dotMap

stable

유틸리티 문자열을 base + 상태 변형(hover/focus/active 등) 스타일 맵으로 변환

@hua-labs/dotv2.0.0

Import

import { dotMap } from '@hua-labs/dot';

Functions

dotMap

유틸리티 문자열을 파싱하여 기본 스타일(base)과 상태 변형 스타일(hover, focus, active 등)을 분리된 버킷으로 반환합니다. dot()과 동일한 타입 좁힘 오버로드를 지원합니다.

Signature

// 웹 (기본)
function dotMap(input: string | undefined | null, options?: DotOptions): DotStyleMap<StyleObject>

// 타입 좁힘 오버로드
function dotMap(input: string | undefined | null, options: DotOptions & { target: 'web' }): DotStyleMap<StyleObject>
function dotMap(input: string | undefined | null, options: DotOptions & { target: 'native' }): DotStyleMap<RNStyleObject>
function dotMap(input: string | undefined | null, options: DotOptions & { target: 'flutter' }): DotStyleMap<FlutterRecipe>

Parameters

파라미터	타입	설명
`input`	`string \	undefined \	null`	공백 구분 유틸리티 문자열
`options`	`DotOptions`	`dot()`과 동일한 옵션 (`dark`, `breakpoint`, `target`)

Returns

DotStyleMap<T> — 상태별 스타일 오브젝트 맵.

interface DotStyleMap<T = StyleObject> {
  base: T;
  hover?: T;
  focus?: T;
  active?: T;
  'focus-visible'?: T;
  'focus-within'?: T;
  disabled?: T;
}

base는 항상 포함됩니다. 나머지 키는 해당 상태 변형이 입력에 존재할 때만 포함됩니다.

Usage

import { dotMap } from '@hua-labs/dot';

// 기본 사용
const styles = dotMap('p-4 bg-white hover:bg-gray-100 focus:ring-2');
// {
//   base: { padding: '16px', backgroundColor: '#ffffff' },
//   hover: { backgroundColor: '#f3f4f6' },
//   focus: { boxShadow: '0 0 0 3px ...' },
// }

// React 이벤트 핸들러와 함께
function Button({ children }: { children: React.ReactNode }) {
  const [hovered, setHovered] = React.useState(false);
  const [focused, setFocused] = React.useState(false);

  const styles = dotMap('bg-primary-500 text-white hover:bg-primary-600 focus:ring-2 focus:ring-primary-300');

  return (
    <button
      style={{
        ...styles.base,
        ...(hovered ? styles.hover : {}),
        ...(focused ? styles.focus : {}),
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    >
      {children}
    </button>
  );
}

// 지원되는 모든 상태 변형
const allStates = dotMap(
  'bg-white ' +
  'hover:bg-gray-50 ' +
  'focus:ring-2 ' +
  'active:bg-gray-100 ' +
  'focus-visible:outline-none ' +
  'focus-within:ring-1 ' +
  'disabled:opacity-50 disabled:cursor-not-allowed'
);
// {
//   base: { backgroundColor: '#ffffff' },
//   hover: { backgroundColor: '#f9fafb' },
//   focus: { boxShadow: '...' },
//   active: { backgroundColor: '#f3f4f6' },
//   'focus-visible': { outline: 'none' },
//   'focus-within': { boxShadow: '...' },
//   disabled: { opacity: 0.5, cursor: 'not-allowed' },
// }

// React Native 대상
const nativeStyles = dotMap('bg-white hover:bg-gray-100', { target: 'native' });
// { base: { backgroundColor: '#ffffff' }, hover: { backgroundColor: '#f3f4f6' } }

// 반응형 + 다크 모드 + 상태 변형 조합
const complexStyles = dotMap(
  'p-4 md:p-6 bg-white dark:bg-gray-900 hover:opacity-90',
  { breakpoint: 'md', dark: true }
);
// { base: { padding: '24px', backgroundColor: '#111827' }, hover: { opacity: 0.9 } }

// 링 + 상태 조합
dotMap('ring-2 focus:ring-blue-500');
// { base: { boxShadow: '0 0 0 2px ...' }, focus: { boxShadow: '0 0 0 3px #3b82f6' } }

Notes

dotMap()은 dot()과 동일한 반응형, 다크 모드, arbitrary value, opacity modifier 기능을 모두 지원합니다.
상태 버킷은 해당 변형이 입력에 없으면 결과 오브젝트에 포함되지 않습니다. styles.hover가 undefined일 수 있으므로 스프레드 전에 확인하거나 ?.를 사용하세요.
상태 변형 내에서도 !important 수정자가 적용됩니다.
캐시 키는 \x03m 접두사로 dot() 캐시와 분리됩니다.