@tipp/ui 2.7.1 → 2.9.0

package/dist/molecules/autocomplete-textfield.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/autocomplete-textfield.tsx","../../src/atoms/text-field.tsx","../../src/atoms/dropdown-menu.tsx","../../src/utils/resolve-color.ts","../../src/theme/theme-provider.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';\nimport { DropdownMenu } from '../atoms/dropdown-menu';\nimport { Typo } from '../atoms/typo';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\nexport interface AutocompleteTextfieldProps\n  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {\n  options: AutocompleteOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOption) => void;\n  placeholder?: string;\n  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */\n  emptyMessage?: string | null;\n  /** 최대 표시 항목 수 (기본값: 10) */\n  maxItems?: number;\n  /** TextField 왼쪽 슬롯 (아이콘 등) */\n  slotLeft?: React.ReactNode;\n  /** TextField 오른쪽 슬롯 (아이콘 등) */\n  slotRight?: React.ReactNode;\n}\n\nexport const AutocompleteTextfield = forwardRef<\n  HTMLInputElement,\n  AutocompleteTextfieldProps\n>(\n  (\n    {\n      options,\n      value: externalValue,\n      onChange,\n      onSelect,\n      placeholder,\n      emptyMessage = '검색 결과가 없습니다.',\n      maxItems = 10,\n      slotLeft,\n      slotRight,\n      error,\n      ...rest\n    },\n    ref\n  ): React.ReactElement => {\n    const isControlled = externalValue !== undefined;\n    const [internalValue, setInternalValue] = useState('');\n    const inputValue = isControlled ? externalValue : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const listboxId = useId();\n    const justSelectedRef = useRef(false);\n\n    const filtered = options\n      .filter((opt: AutocompleteOption) =>\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\n      )\n      .slice(0, maxItems);\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (!isControlled) setInternalValue(next);\n        onChange?.(next);\n        const nextFiltered = options\n          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))\n          .slice(0, maxItems);\n        setOpen(nextFiltered.length > 0 || emptyMessage !== null);\n        setHighlightedIndex(-1);\n      },\n      [isControlled, onChange, options, maxItems, emptyMessage]\n    );\n\n    const handleSelect = useCallback(\n      (option: AutocompleteOption) => {\n        if (!isControlled) setInternalValue(option.label);\n        onChange?.(option.label);\n        onSelect?.(option);\n        setOpen(false);\n        setHighlightedIndex(-1);\n        justSelectedRef.current = true;\n        inputRef.current?.focus();\n      },\n      [isControlled, onChange, onSelect]\n    );\n\n    const handleFocus = useCallback(() => {\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      const currentFiltered = options\n        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))\n        .slice(0, maxItems);\n      setOpen(currentFiltered.length > 0 || emptyMessage !== null);\n    }, [options, inputValue, maxItems, emptyMessage]);\n\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음\n      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {\n        return;\n      }\n      setOpen(false);\n      setHighlightedIndex(-1);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!open) {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            setOpen(true);\n            setHighlightedIndex(0);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev < filtered.length - 1 ? prev + 1 : 0\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filtered.length - 1\n            );\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          default:\n            break;\n        }\n      },\n      [open, filtered, highlightedIndex, handleSelect]\n    );\n\n    // 하이라이트 항목을 리스트 뷰에 스크롤\n    useEffect(() => {\n      if (!listRef.current || highlightedIndex < 0) return;\n      const item = listRef.current.children[highlightedIndex];\n      (item as HTMLElement).scrollIntoView({ block: 'nearest' });\n    }, [highlightedIndex]);\n\n    return (\n      <Box position=\"relative\" style={{ width: '100%' }}>\n        <TextField.Root\n          aria-activedescendant={\n            open && highlightedIndex >= 0\n              ? `${listboxId}-option-${highlightedIndex}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={open ? listboxId : undefined}\n          aria-expanded={open}\n          error={error}\n          onBlur={handleBlur}\n          onChange={handleInputChange}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n              node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n                node;\n            }\n          }}\n          role=\"combobox\"\n          style={{ width: '100%' }}\n          value={inputValue}\n          {...rest}\n        >\n          {slotLeft && <TextField.Slot side=\"left\">{slotLeft}</TextField.Slot>}\n          {slotRight && <TextField.Slot side=\"right\">{slotRight}</TextField.Slot>}\n        </TextField.Root>\n\n        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}\n        <DropdownMenu.Root\n          modal={false}\n          onOpenChange={(nextOpen) => {\n            if (!nextOpen && document.activeElement !== inputRef.current) {\n              setOpen(false);\n              setHighlightedIndex(-1);\n            }\n          }}\n          open={open}\n        >\n          <DropdownMenu.Trigger asChild>\n            <span\n              aria-hidden=\"true\"\n              style={{\n                bottom: 0,\n                height: 0,\n                left: 0,\n                opacity: 0,\n                pointerEvents: 'none',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            onCloseAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            onOpenAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            sideOffset={4}\n            style={{\n              maxHeight: 240,\n              overflowY: 'auto',\n              padding: 0,\n              width: 'var(--radix-dropdown-menu-trigger-width)',\n            }}\n          >\n            {filtered.length === 0 && emptyMessage !== null ? (\n              <Box px=\"2\" py=\"2\">\n                <Typo color=\"gray\">\n                  {emptyMessage}\n                </Typo>\n              </Box>\n            ) : (\n              <ul\n                id={listboxId}\n                ref={listRef}\n                role=\"listbox\"\n                style={{ listStyle: 'none', margin: 0, padding: 0 }}\n              >\n                {filtered.map((option, index) => {\n                  const isHighlighted = index === highlightedIndex;\n                  return (\n                    <li\n                      aria-selected={isHighlighted}\n                      id={`${listboxId}-option-${index}`}\n                      key={option.value}\n                      onMouseEnter={() => {\n                        setHighlightedIndex(index);\n                      }}\n                      onPointerDown={(e) => {\n                        // blur 전에 선택되도록 pointerdown 사용\n                        e.preventDefault();\n                        handleSelect(option);\n                      }}\n                      role=\"option\"\n                      style={{\n                        padding: 'var(--spacing-4) var(--spacing-6)',\n                        cursor: 'pointer',\n                        backgroundColor: isHighlighted\n                          ? 'var(--accent-3)'\n                          : 'transparent',\n                        transition: 'background-color 80ms',\n                      }}\n                    >\n                      <Typo variant=\"body\">{option.label}</Typo>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Box>\n    );\n  }\n);\n\nAutocompleteTextfield.displayName = 'AutocompleteTextfield';\n","import { TextField as RTextField } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype RSlotProps = RTextField.SlotProps;\n\ntype RootProps = RTextField.RootProps & { error?: boolean };\n\nconst Root = forwardRef<\n  HTMLInputElement,\n  RTextField.RootProps & { error?: boolean }\n>((props, ref) => {\n  const { error, style, className, ...rest } = props;\n\n  const fieldStyle = useMemo(() => {\n    if (!error) return style;\n    const errorStyle = {\n      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',\n    };\n\n    return { ...(style || {}), ...errorStyle };\n  }, [error, style]);\n\n  const classNameStr = error ? `error ${className}` : className;\n  return (\n    <RTextField.Root\n      className={classNameStr}\n      ref={ref}\n      style={fieldStyle}\n      {...rest}\n    />\n  );\n});\n\nRoot.displayName = 'TextField.Root';\n\nconst TextField = { Root, Slot: RTextField.Slot };\n\nexport { TextField };\nexport type { RootProps, RSlotProps as SlotProps };\n","import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\nimport { ThemeAccentContext } from '../theme/theme-provider';\n\nconst DropdownMenuContext = createContext<{ color?: UiColor }>({});\n\ntype ContentProps = DistributiveOmit<\n  RadixDropdownMenu.ContentProps,\n  'color'\n> & {\n  isNavigation?: boolean;\n  onOpenAutoFocus?: (event: Event) => void;\n  color?: UiColor;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n  const { isNavigation, className, color, ...rest } = props;\n  const { color: contextColor } = useContext(DropdownMenuContext);\n  const themeAccent = useContext(ThemeAccentContext);\n\n  // Content는 Portal로 렌더돼 theme의 className override를 못 받으므로, per-instance/Root color가\n  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color ?? contextColor ?? themeAccent),\n    [color, contextColor, themeAccent],\n  );\n\n  // custom color(black)는 className override만 사용 — fallback color를 함께 넘기면 자식 Item이\n  // 자기 data-accent-color로 gray를 다시 적용해 override를 덮는다.\n  const appliedColor = colorClassName ? undefined : radixColor;\n\n  const contentClassName = useMemo(() => {\n    const cls = isNavigation ? 'dropdown-navigation' : '';\n    return [cls, colorClassName, className].filter(Boolean).join(' ');\n  }, [isNavigation, colorClassName, className]);\n\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      {...rest}\n      className={contentClassName}\n      color={appliedColor}\n    />\n  );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\n// @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장\ntype TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(\n  ({ asChild: _asChild, ...props }, ref) => (\n    <RadixDropdownMenu.Trigger ref={ref} {...props} />\n  ),\n);\n\nTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype RootProps = RadixDropdownMenu.RootProps & {\n  /** Content에 일괄 적용할 color. Content에서 color prop으로 개별 override 가능. */\n  color?: UiColor;\n};\n\nfunction Root(props: RootProps): React.ReactNode {\n  const { color, ...rest } = props;\n\n  const value = useMemo(() => ({ color }), [color]);\n\n  return (\n    <DropdownMenuContext.Provider value={value}>\n      <RadixDropdownMenu.Root {...rest} />\n    </DropdownMenuContext.Provider>\n  );\n}\n\nRoot.displayName = 'DropdownMenu.Root';\n\nexport const DropdownMenu = {\n  ...RadixDropdownMenu,\n  Root,\n  Content,\n  Trigger,\n};\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n","import React, { createContext } from 'react';\nimport { Theme } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\n/**\n * 테마 전역 primary가 custom color(black 등)일 때 그 값을 하위로 전달하는 context.\n * Radix는 Portal 컨텐츠(Select 드롭다운 등)에 theme의 accentColor \"값\"(여기선 fallback gray)만\n * 복제하고 `.tipp-accent-black` className은 복제하지 않으므로, Portal 안에서는 accent override가\n * 사라진다. 래핑된 overlay 컴포넌트(Select 등)가 이 context를 최하위 fallback color로 읽어\n * 자기 요소에 className을 직접 부여하면 Portal 내부에서도 black이 유지된다.\n * (custom accent가 아닐 때는 undefined — Radix 네이티브 portal 상속에 맡긴다.)\n */\nexport const ThemeAccentContext = createContext<UiColor | undefined>(undefined);\n\nexport interface ThemeProviderProps extends Omit<ThemeProps, 'accentColor'> {\n  children: React.ReactNode;\n  /**\n   * 전역 primary(accent) color. Radix accent color에 더해 커스텀 `black`을 지원한다.\n   * black이면 Radix에는 fallback `gray`를 넘기고 Theme 루트에 accent override\n   * className을 부여하여 하위 컴포넌트가 color prop 없이도 black을 상속한다.\n   */\n  accentColor?: ThemeProps['accentColor'] | 'black';\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  const { accentColor = 'iris', className, ...rest } = props;\n\n  const { color: radixAccent, className: accentClassName } =\n    resolveColor(accentColor);\n\n  // custom accent(className이 생기는 경우 = black)일 때만 Portal 보정용으로 context에 흘린다.\n  const themeAccent = accentClassName ? accentColor : undefined;\n\n  return (\n    <ThemeAccentContext.Provider value={themeAccent}>\n      <Theme\n        accentColor={radixAccent ?? 'iris'}\n        className={clsx(accentClassName, className)}\n        radius=\"medium\"\n        {...rest}\n      />\n    </ThemeAccentContext.Provider>\n  );\n}\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n  color?: UiColor;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, color, className, ...rest } = props;\n\n    const { color: radixColor, className: colorClassName } = useMemo(\n      () => resolveColor(color),\n      [color]\n    );\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n      >\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAOO;AACP,IAAAC,iBAAoB;;;ACRpB,oBAAwC;AACxC,mBAAoC;AAuBhC;AAjBJ,IAAM,WAAO,yBAGX,CAAC,OAAO,QAAQ;AAChB,QAA6C,YAArC,SAAO,OAAO,UAXxB,IAW+C,IAAT,iBAAS,IAAT,CAA5B,SAAO,SAAO;AAEtB,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI,CAAC,MAAO,QAAO;AACnB,UAAM,aAAa;AAAA,MACjB,WAAW;AAAA,IACb;AAEA,WAAO,kCAAM,SAAS,CAAC,IAAO;AAAA,EAChC,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,eAAe,QAAQ,SAAS,SAAS,KAAK;AACpD,SACE;AAAA,IAAC,cAAAC,UAAW;AAAA,IAAX;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,OACH;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AAEnB,IAAM,YAAY,EAAE,MAAM,MAAM,cAAAA,UAAW,KAAK;;;ACnChD,IAAAC,iBAAkD;AAClD,IAAAC,gBAA+D;;;AC4B/D,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;ACrFA,IAAAC,gBAAqC;AACrC,IAAAC,iBAAsB;AACtB,kBAAqB;AAoCf,IAAAC,sBAAA;AAvBC,IAAM,yBAAqB,6BAAmC,MAAS;;;AF2B1E,IAAAC,sBAAA;AAjCJ,IAAM,0BAAsB,6BAAmC,CAAC,CAAC;AAWjE,IAAM,cAAU,0BAAyC,CAAC,OAAO,QAAQ;AACvE,QAAoD,YAA5C,gBAAc,WAAW,MArBnC,IAqBsD,IAAT,iBAAS,IAAT,CAAnC,gBAAc,aAAW;AACjC,QAAM,EAAE,OAAO,aAAa,QAAI,0BAAW,mBAAmB;AAC9D,QAAM,kBAAc,0BAAW,kBAAkB;AAIjD,QAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,IACvD,MAAG;AA5BP,UAAAC;AA4BU,2BAAaA,MAAA,wBAAS,iBAAT,OAAAA,MAAyB,WAAW;AAAA;AAAA,IACvD,CAAC,OAAO,cAAc,WAAW;AAAA,EACnC;AAIA,QAAM,eAAe,iBAAiB,SAAY;AAElD,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,UAAM,MAAM,eAAe,wBAAwB;AACnD,WAAO,CAAC,KAAK,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EAClE,GAAG,CAAC,cAAc,gBAAgB,SAAS,CAAC;AAE5C,SACE;AAAA,IAAC,eAAAC,aAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,OACI,OAFL;AAAA,MAGC,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AAED,QAAQ,cAAc;AAKtB,IAAM,cAAU;AAAA,EACd,CAAC,IAAiC,QAAK;AAAtC,iBAAE,WAAS,SAzDd,IAyDG,IAAwB,kBAAxB,IAAwB,CAAtB;AACD,wDAAC,eAAAA,aAAkB,SAAlB,iBAA0B,OAAc,MAAO;AAAA;AAEpD;AAEA,QAAQ,cAAc;AAOtB,SAASC,MAAK,OAAmC;AAC/C,QAA2B,YAAnB,QAtEV,IAsE6B,IAAT,iBAAS,IAAT,CAAV;AAER,QAAM,YAAQ,uBAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAEhD,SACE,6CAAC,oBAAoB,UAApB,EAA6B,OAC5B,uDAAC,eAAAD,aAAkB,MAAlB,mBAA2B,KAAM,GACpC;AAEJ;AAEAC,MAAK,cAAc;AAEZ,IAAM,eAAe,iCACvB,eAAAD,eADuB;AAAA,EAE1B,MAAAC;AAAA,EACA;AAAA,EACA;AACF;;;AGtFA,IAAAC,iBAAkC;AAClC,IAAAC,eAAqB;AACrB,IAAAC,gBAA2C;;;ACFpC,IAAM,oBAAoB,CAChC,SAC+B;AAC9B,QAAM,EAAC,OAAO,MAAK,IAAI;AACvB,MAAG,OAAO,UAAU,UAAS;AAC3B,WAAO,MAAM,KAAK;AAAA,EACpB;AAAC;AAED,MAAG,OAAO,UAAU,UAAS;AAC3B,UAAM,SAAyC,CAAC;AAChD,QAAI;AACJ,SAAI,OAAO,OAAM;AACf,aAAO,GAAG,IAAI,MAAM,MAAM,GAAG,CAAC;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;AD6BM,IAAAC,sBAAA;AA/BC,IAAM,WAAO;AAAA,EAClB,CAAC,OAAkB,QAAyB;AAC1C,UAA+D,YAAvD,QAAM,SAAS,UAAU,OAAO,UAnB5C,IAmBmE,IAAT,iBAAS,IAAT,CAA9C,QAAM,WAAS,YAAU,SAAO;AAExC,UAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,MACvD,MAAM,aAAa,KAAK;AAAA,MACxB,CAAC,KAAK;AAAA,IACR;AAEA,UAAM,gBAAY,uBAAgC,MAAM;AACtD,UAAI,SAAS,OAAW,QAAO;AAE/B,UAAI,YAAY,OAAW,QAAO;AAElC,aAAO,kBAAkB;AAAA,QACvB,OAAO;AAAA,QACP,OAAO,CAAC,iBAAmD;AACzD,kBAAQ,cAAc;AAAA,YACpB,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,WACE;AAAA,MAAC,eAAAC;AAAA,MAAA,iCACK,OADL;AAAA,QAEC,eAAW,mBAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QAEL;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ALiHX,IAAAC,sBAAA;AA3ID,IAAM,4BAAwB;AAAA,EAInC,CACE,IAaA,QACuB;AAdvB,iBACE;AAAA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAlDN,IAwCI,IAWK,iBAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,eAAe,kBAAkB;AACvC,UAAM,CAAC,eAAe,gBAAgB,QAAI,wBAAS,EAAE;AACrD,UAAM,aAAa,eAAe,gBAAgB;AAElD,UAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,UAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAS,EAAE;AAE3D,UAAM,eAAW,sBAAyB,IAAI;AAC9C,UAAM,cAAU,sBAAyB,IAAI;AAC7C,UAAM,gBAAY,qBAAM;AACxB,UAAM,sBAAkB,sBAAO,KAAK;AAEpC,UAAM,WAAW,QACd;AAAA,MAAO,CAAC,QACP,IAAI,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC;AAAA,IAC3D,EACC,MAAM,GAAG,QAAQ;AAEpB,UAAM,wBAAoB;AAAA,MACxB,CAAC,MAA2C;AAC1C,cAAM,OAAO,EAAE,OAAO;AACtB,YAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,6CAAW;AACX,cAAM,eAAe,QAClB,OAAO,CAAC,QAAQ,IAAI,MAAM,YAAY,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,EACpE,MAAM,GAAG,QAAQ;AACpB,gBAAQ,aAAa,SAAS,KAAK,iBAAiB,IAAI;AACxD,4BAAoB,EAAE;AAAA,MACxB;AAAA,MACA,CAAC,cAAc,UAAU,SAAS,UAAU,YAAY;AAAA,IAC1D;AAEA,UAAM,mBAAe;AAAA,MACnB,CAAC,WAA+B;AAxFtC,YAAAC;AAyFQ,YAAI,CAAC,aAAc,kBAAiB,OAAO,KAAK;AAChD,6CAAW,OAAO;AAClB,6CAAW;AACX,gBAAQ,KAAK;AACb,4BAAoB,EAAE;AACtB,wBAAgB,UAAU;AAC1B,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,MACpB;AAAA,MACA,CAAC,cAAc,UAAU,QAAQ;AAAA,IACnC;AAEA,UAAM,kBAAc,2BAAY,MAAM;AACpC,UAAI,gBAAgB,SAAS;AAC3B,wBAAgB,UAAU;AAC1B;AAAA,MACF;AACA,YAAM,kBAAkB,QACrB,OAAO,CAAC,QAAQ,IAAI,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC,CAAC,EAC1E,MAAM,GAAG,QAAQ;AACpB,cAAQ,gBAAgB,SAAS,KAAK,iBAAiB,IAAI;AAAA,IAC7D,GAAG,CAAC,SAAS,YAAY,UAAU,YAAY,CAAC;AAEhD,UAAM,iBAAa,2BAAY,CAAC,MAA0C;AA/G9E,UAAAA,KAAAC;AAiHM,UAAI,EAAE,mBAAiBA,OAAAD,MAAA,SAAS,YAAT,gBAAAA,IAAkB,kBAAlB,gBAAAC,IAAiC,SAAS,EAAE,iBAAwB;AACzF;AAAA,MACF;AACA,cAAQ,KAAK;AACb,0BAAoB,EAAE;AAAA,IACxB,GAAG,CAAC,CAAC;AAEL,UAAM,oBAAgB;AAAA,MACpB,CAAC,MAA6C;AAC5C,YAAI,CAAC,MAAM;AACT,cAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,oBAAQ,IAAI;AACZ,gCAAoB,CAAC;AACrB,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF;AAEA,gBAAQ,EAAE,KAAK;AAAA,UACb,KAAK;AACH,cAAE,eAAe;AACjB;AAAA,cAAoB,CAAC,SACnB,OAAO,SAAS,SAAS,IAAI,OAAO,IAAI;AAAA,YAC1C;AACA;AAAA,UACF,KAAK;AACH,cAAE,eAAe;AACjB;AAAA,cAAoB,CAAC,SACnB,OAAO,IAAI,OAAO,IAAI,SAAS,SAAS;AAAA,YAC1C;AACA;AAAA,UACF,KAAK;AACH,cAAE,eAAe;AACjB,gBAAI,oBAAoB,KAAK,SAAS,gBAAgB,GAAG;AACvD,2BAAa,SAAS,gBAAgB,CAAC;AAAA,YACzC;AACA;AAAA,UACF,KAAK;AACH,oBAAQ,KAAK;AACb,gCAAoB,EAAE;AACtB;AAAA,UACF,KAAK;AACH,oBAAQ,KAAK;AACb,gCAAoB,EAAE;AACtB;AAAA,UACF;AACE;AAAA,QACJ;AAAA,MACF;AAAA,MACA,CAAC,MAAM,UAAU,kBAAkB,YAAY;AAAA,IACjD;AAGA,iCAAU,MAAM;AACd,UAAI,CAAC,QAAQ,WAAW,mBAAmB,EAAG;AAC9C,YAAM,OAAO,QAAQ,QAAQ,SAAS,gBAAgB;AACtD,MAAC,KAAqB,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,IAC3D,GAAG,CAAC,gBAAgB,CAAC;AAErB,WACE,8CAAC,sBAAI,UAAS,YAAW,OAAO,EAAE,OAAO,OAAO,GAC9C;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,yBACE,QAAQ,oBAAoB,IACxB,GAAG,SAAS,WAAW,gBAAgB,KACvC;AAAA,UAEN,qBAAkB;AAAA,UAClB,iBAAe,OAAO,YAAY;AAAA,UAClC,iBAAe;AAAA,UACf;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,KAAK,CAAC,SAAS;AACb,YAAC,SAA6D,UAC5D;AACF,gBAAI,OAAO,QAAQ,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACV,WAAW,KAAK;AACd,cAAC,IAAwD,UACvD;AAAA,YACJ;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,OAAO;AAAA,UACvB,OAAO;AAAA,WACH,OA5BL;AAAA,UA8BE;AAAA,wBAAY,6CAAC,UAAU,MAAV,EAAe,MAAK,QAAQ,oBAAS;AAAA,YAClD,aAAa,6CAAC,UAAU,MAAV,EAAe,MAAK,SAAS,qBAAU;AAAA;AAAA;AAAA,MACxD;AAAA,MAGA;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACC,OAAO;AAAA,UACP,cAAc,CAAC,aAAa;AAC1B,gBAAI,CAAC,YAAY,SAAS,kBAAkB,SAAS,SAAS;AAC5D,sBAAQ,KAAK;AACb,kCAAoB,EAAE;AAAA,YACxB;AAAA,UACF;AAAA,UACA;AAAA,UAEA;AAAA,yDAAC,aAAa,SAAb,EAAqB,SAAO,MAC3B;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,UAAU;AAAA,kBACV,OAAO;AAAA,gBACT;AAAA;AAAA,YACF,GACF;AAAA,YAEA;AAAA,cAAC,aAAa;AAAA,cAAb;AAAA,gBACC,OAAM;AAAA,gBACN,kBAAkB,CAAC,MAAa;AAC9B,oBAAE,eAAe;AAAA,gBACnB;AAAA,gBACA,iBAAiB,CAAC,MAAa;AAC7B,oBAAE,eAAe;AAAA,gBACnB;AAAA,gBACA,YAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,WAAW;AAAA,kBACX,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,OAAO;AAAA,gBACT;AAAA,gBAEC,mBAAS,WAAW,KAAK,iBAAiB,OACzC,6CAAC,sBAAI,IAAG,KAAI,IAAG,KACb,uDAAC,QAAK,OAAM,QACT,wBACH,GACF,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,KAAK;AAAA,oBACL,MAAK;AAAA,oBACL,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAE;AAAA,oBAEjD,mBAAS,IAAI,CAAC,QAAQ,UAAU;AAC/B,4BAAM,gBAAgB,UAAU;AAChC,6BACE;AAAA,wBAAC;AAAA;AAAA,0BACC,iBAAe;AAAA,0BACf,IAAI,GAAG,SAAS,WAAW,KAAK;AAAA,0BAEhC,cAAc,MAAM;AAClB,gDAAoB,KAAK;AAAA,0BAC3B;AAAA,0BACA,eAAe,CAAC,MAAM;AAEpB,8BAAE,eAAe;AACjB,yCAAa,MAAM;AAAA,0BACrB;AAAA,0BACA,MAAK;AAAA,0BACL,OAAO;AAAA,4BACL,SAAS;AAAA,4BACT,QAAQ;AAAA,4BACR,iBAAiB,gBACb,oBACA;AAAA,4BACJ,YAAY;AAAA,0BACd;AAAA,0BAEA,uDAAC,QAAK,SAAQ,QAAQ,iBAAO,OAAM;AAAA;AAAA,wBAnB9B,OAAO;AAAA,sBAoBd;AAAA,oBAEJ,CAAC;AAAA;AAAA,gBACH;AAAA;AAAA,YAEJ;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;","names":["import_react","import_themes","RTextField","import_themes","import_react","import_react","import_themes","import_jsx_runtime","import_jsx_runtime","_a","RadixDropdownMenu","Root","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","_a","_b"]}
+{"version":3,"sources":["../../src/molecules/autocomplete-textfield.tsx","../../src/atoms/text-field.tsx","../../src/atoms/dropdown-menu.tsx","../../src/utils/resolve-color.ts","../../src/theme/theme-provider.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts","../../src/utils/clamp-style.ts","../../src/utils/mono-style.ts"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';\nimport { DropdownMenu } from '../atoms/dropdown-menu';\nimport { Typo } from '../atoms/typo';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\nexport interface AutocompleteTextfieldProps\n  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {\n  options: AutocompleteOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOption) => void;\n  placeholder?: string;\n  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */\n  emptyMessage?: string | null;\n  /** 최대 표시 항목 수 (기본값: 10) */\n  maxItems?: number;\n  /** TextField 왼쪽 슬롯 (아이콘 등) */\n  slotLeft?: React.ReactNode;\n  /** TextField 오른쪽 슬롯 (아이콘 등) */\n  slotRight?: React.ReactNode;\n}\n\nexport const AutocompleteTextfield = forwardRef<\n  HTMLInputElement,\n  AutocompleteTextfieldProps\n>(\n  (\n    {\n      options,\n      value: externalValue,\n      onChange,\n      onSelect,\n      placeholder,\n      emptyMessage = '검색 결과가 없습니다.',\n      maxItems = 10,\n      slotLeft,\n      slotRight,\n      error,\n      ...rest\n    },\n    ref\n  ): React.ReactElement => {\n    const isControlled = externalValue !== undefined;\n    const [internalValue, setInternalValue] = useState('');\n    const inputValue = isControlled ? externalValue : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const listboxId = useId();\n    const justSelectedRef = useRef(false);\n\n    const filtered = options\n      .filter((opt: AutocompleteOption) =>\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\n      )\n      .slice(0, maxItems);\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (!isControlled) setInternalValue(next);\n        onChange?.(next);\n        const nextFiltered = options\n          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))\n          .slice(0, maxItems);\n        setOpen(nextFiltered.length > 0 || emptyMessage !== null);\n        setHighlightedIndex(-1);\n      },\n      [isControlled, onChange, options, maxItems, emptyMessage]\n    );\n\n    const handleSelect = useCallback(\n      (option: AutocompleteOption) => {\n        if (!isControlled) setInternalValue(option.label);\n        onChange?.(option.label);\n        onSelect?.(option);\n        setOpen(false);\n        setHighlightedIndex(-1);\n        justSelectedRef.current = true;\n        inputRef.current?.focus();\n      },\n      [isControlled, onChange, onSelect]\n    );\n\n    const handleFocus = useCallback(() => {\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      const currentFiltered = options\n        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))\n        .slice(0, maxItems);\n      setOpen(currentFiltered.length > 0 || emptyMessage !== null);\n    }, [options, inputValue, maxItems, emptyMessage]);\n\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음\n      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {\n        return;\n      }\n      setOpen(false);\n      setHighlightedIndex(-1);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!open) {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            setOpen(true);\n            setHighlightedIndex(0);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev < filtered.length - 1 ? prev + 1 : 0\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filtered.length - 1\n            );\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          default:\n            break;\n        }\n      },\n      [open, filtered, highlightedIndex, handleSelect]\n    );\n\n    // 하이라이트 항목을 리스트 뷰에 스크롤\n    useEffect(() => {\n      if (!listRef.current || highlightedIndex < 0) return;\n      const item = listRef.current.children[highlightedIndex];\n      (item as HTMLElement).scrollIntoView({ block: 'nearest' });\n    }, [highlightedIndex]);\n\n    return (\n      <Box position=\"relative\" style={{ width: '100%' }}>\n        <TextField.Root\n          aria-activedescendant={\n            open && highlightedIndex >= 0\n              ? `${listboxId}-option-${highlightedIndex}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={open ? listboxId : undefined}\n          aria-expanded={open}\n          error={error}\n          onBlur={handleBlur}\n          onChange={handleInputChange}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n              node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n                node;\n            }\n          }}\n          role=\"combobox\"\n          style={{ width: '100%' }}\n          value={inputValue}\n          {...rest}\n        >\n          {slotLeft && <TextField.Slot side=\"left\">{slotLeft}</TextField.Slot>}\n          {slotRight && <TextField.Slot side=\"right\">{slotRight}</TextField.Slot>}\n        </TextField.Root>\n\n        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}\n        <DropdownMenu.Root\n          modal={false}\n          onOpenChange={(nextOpen) => {\n            if (!nextOpen && document.activeElement !== inputRef.current) {\n              setOpen(false);\n              setHighlightedIndex(-1);\n            }\n          }}\n          open={open}\n        >\n          <DropdownMenu.Trigger asChild>\n            <span\n              aria-hidden=\"true\"\n              style={{\n                bottom: 0,\n                height: 0,\n                left: 0,\n                opacity: 0,\n                pointerEvents: 'none',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            onCloseAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            onOpenAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            sideOffset={4}\n            style={{\n              maxHeight: 240,\n              overflowY: 'auto',\n              padding: 0,\n              width: 'var(--radix-dropdown-menu-trigger-width)',\n            }}\n          >\n            {filtered.length === 0 && emptyMessage !== null ? (\n              <Box px=\"2\" py=\"2\">\n                <Typo color=\"gray\">\n                  {emptyMessage}\n                </Typo>\n              </Box>\n            ) : (\n              <ul\n                id={listboxId}\n                ref={listRef}\n                role=\"listbox\"\n                style={{ listStyle: 'none', margin: 0, padding: 0 }}\n              >\n                {filtered.map((option, index) => {\n                  const isHighlighted = index === highlightedIndex;\n                  return (\n                    <li\n                      aria-selected={isHighlighted}\n                      id={`${listboxId}-option-${index}`}\n                      key={option.value}\n                      onMouseEnter={() => {\n                        setHighlightedIndex(index);\n                      }}\n                      onPointerDown={(e) => {\n                        // blur 전에 선택되도록 pointerdown 사용\n                        e.preventDefault();\n                        handleSelect(option);\n                      }}\n                      role=\"option\"\n                      style={{\n                        padding: 'var(--spacing-4) var(--spacing-6)',\n                        cursor: 'pointer',\n                        backgroundColor: isHighlighted\n                          ? 'var(--accent-3)'\n                          : 'transparent',\n                        transition: 'background-color 80ms',\n                      }}\n                    >\n                      <Typo variant=\"body\">{option.label}</Typo>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Box>\n    );\n  }\n);\n\nAutocompleteTextfield.displayName = 'AutocompleteTextfield';\n","import { TextField as RTextField } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype RSlotProps = RTextField.SlotProps;\n\ntype RootProps = RTextField.RootProps & { error?: boolean };\n\nconst Root = forwardRef<\n  HTMLInputElement,\n  RTextField.RootProps & { error?: boolean }\n>((props, ref) => {\n  const { error, style, className, ...rest } = props;\n\n  const fieldStyle = useMemo(() => {\n    if (!error) return style;\n    const errorStyle = {\n      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',\n    };\n\n    return { ...(style || {}), ...errorStyle };\n  }, [error, style]);\n\n  const classNameStr = error ? `error ${className}` : className;\n  return (\n    <RTextField.Root\n      className={classNameStr}\n      ref={ref}\n      style={fieldStyle}\n      {...rest}\n    />\n  );\n});\n\nRoot.displayName = 'TextField.Root';\n\nconst TextField = { Root, Slot: RTextField.Slot };\n\nexport { TextField };\nexport type { RootProps, RSlotProps as SlotProps };\n","import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\nimport { ThemeAccentContext } from '../theme/theme-provider';\n\nconst DropdownMenuContext = createContext<{ color?: UiColor }>({});\n\ntype ContentProps = DistributiveOmit<\n  RadixDropdownMenu.ContentProps,\n  'color'\n> & {\n  isNavigation?: boolean;\n  onOpenAutoFocus?: (event: Event) => void;\n  color?: UiColor;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n  const { isNavigation, className, color, ...rest } = props;\n  const { color: contextColor } = useContext(DropdownMenuContext);\n  const themeAccent = useContext(ThemeAccentContext);\n\n  // Content는 Portal로 렌더돼 theme의 className override를 못 받으므로, per-instance/Root color가\n  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color ?? contextColor ?? themeAccent),\n    [color, contextColor, themeAccent],\n  );\n\n  // custom color(black)는 className override만 사용 — fallback color를 함께 넘기면 자식 Item이\n  // 자기 data-accent-color로 gray를 다시 적용해 override를 덮는다.\n  const appliedColor = colorClassName ? undefined : radixColor;\n\n  const contentClassName = useMemo(() => {\n    const cls = isNavigation ? 'dropdown-navigation' : '';\n    return [cls, colorClassName, className].filter(Boolean).join(' ');\n  }, [isNavigation, colorClassName, className]);\n\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      {...rest}\n      className={contentClassName}\n      color={appliedColor}\n    />\n  );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\n// @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장\ntype TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(\n  ({ asChild: _asChild, ...props }, ref) => (\n    <RadixDropdownMenu.Trigger ref={ref} {...props} />\n  ),\n);\n\nTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype RootProps = RadixDropdownMenu.RootProps & {\n  /** Content에 일괄 적용할 color. Content에서 color prop으로 개별 override 가능. */\n  color?: UiColor;\n};\n\nfunction Root(props: RootProps): React.ReactNode {\n  const { color, ...rest } = props;\n\n  const value = useMemo(() => ({ color }), [color]);\n\n  return (\n    <DropdownMenuContext.Provider value={value}>\n      <RadixDropdownMenu.Root {...rest} />\n    </DropdownMenuContext.Provider>\n  );\n}\n\nRoot.displayName = 'DropdownMenu.Root';\n\nexport const DropdownMenu = {\n  ...RadixDropdownMenu,\n  Root,\n  Content,\n  Trigger,\n};\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n","import React, { createContext } from 'react';\nimport { Theme } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\n/**\n * 테마 전역 primary가 custom color(black 등)일 때 그 값을 하위로 전달하는 context.\n * Radix는 Portal 컨텐츠(Select 드롭다운 등)에 theme의 accentColor \"값\"(여기선 fallback gray)만\n * 복제하고 `.tipp-accent-black` className은 복제하지 않으므로, Portal 안에서는 accent override가\n * 사라진다. 래핑된 overlay 컴포넌트(Select 등)가 이 context를 최하위 fallback color로 읽어\n * 자기 요소에 className을 직접 부여하면 Portal 내부에서도 black이 유지된다.\n * (custom accent가 아닐 때는 undefined — Radix 네이티브 portal 상속에 맡긴다.)\n */\nexport const ThemeAccentContext = createContext<UiColor | undefined>(undefined);\n\nexport interface ThemeProviderProps extends Omit<ThemeProps, 'accentColor'> {\n  children: React.ReactNode;\n  /**\n   * 전역 primary(accent) color. Radix accent color에 더해 커스텀 `black`을 지원한다.\n   * black이면 Radix에는 fallback `gray`를 넘기고 Theme 루트에 accent override\n   * className을 부여하여 하위 컴포넌트가 color prop 없이도 black을 상속한다.\n   */\n  accentColor?: ThemeProps['accentColor'] | 'black';\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  const { accentColor = 'iris', className, ...rest } = props;\n\n  const { color: radixAccent, className: accentClassName } =\n    resolveColor(accentColor);\n\n  // custom accent(className이 생기는 경우 = black)일 때만 Portal 보정용으로 context에 흘린다.\n  const themeAccent = accentClassName ? accentColor : undefined;\n\n  return (\n    <ThemeAccentContext.Provider value={themeAccent}>\n      <Theme\n        accentColor={radixAccent ?? 'iris'}\n        className={clsx(accentClassName, className)}\n        radius=\"medium\"\n        {...rest}\n      />\n    </ThemeAccentContext.Provider>\n  );\n}\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport { clampStyle } from '../utils/clamp-style';\nimport { MONO_STYLE } from '../utils/mono-style';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n  color?: UiColor;\n  /** 등폭(monospace) 폰트 + 숫자 고정폭 정렬(tabular-nums). 점수·퍼센트 등 수치 표시에 사용한다. */\n  mono?: boolean;\n  /** 여러 줄 말줄임(line-clamp). 지정한 줄 수까지만 표시하고 넘치면 …로 자른다. */\n  clamp?: number;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const {\n      size,\n      variant,\n      children,\n      color,\n      className,\n      mono,\n      clamp,\n      style,\n      ...rest\n    } = props;\n\n    const { color: radixColor, className: colorClassName } = useMemo(\n      () => resolveColor(color),\n      [color]\n    );\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n        style={{\n          ...(mono ? MONO_STYLE : null),\n          ...(clamp ? clampStyle(clamp) : null),\n          ...style,\n        }}\n      >\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n","import type { CSSProperties } from 'react';\n\n/**\n * 여러 줄 말줄임(line-clamp) 스타일. 지정한 줄 수까지만 표시하고 넘치면 `…`로 자른다.\n *\n * Radix의 `truncate`(white-space:nowrap 강제 1줄)와 달리, 줄바꿈을 허용한 뒤\n * `lines` 줄에서 자른다. `Typo`/`Heading`의 `clamp` prop 구현에 사용된다.\n *\n * @param lines - 표시할 최대 줄 수 (1, 2, 3 …)\n */\nexport const clampStyle = (lines: number): CSSProperties => ({\n  display: '-webkit-box',\n  WebkitBoxOrient: 'vertical',\n  WebkitLineClamp: lines,\n  lineClamp: lines,\n  overflow: 'hidden',\n});\n","import type { CSSProperties } from 'react';\n\n/**\n * 등폭(monospace) 텍스트 스타일.\n * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)\n * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함\n *\n * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.\n */\nexport const MONO_STYLE: CSSProperties = {\n  fontFamily: 'var(--code-font-family, ui-monospace, \"SF Mono\", monospace)',\n  fontVariantNumeric: 'tabular-nums',\n};\n"],"mappings":"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","names":["import_react","import_themes","RTextField","import_themes","import_react","import_react","import_themes","import_jsx_runtime","import_jsx_runtime","_a","RadixDropdownMenu","Root","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","_a","_b"]}

package/dist/molecules/autocomplete-textfield.js

@@ -1,11 +1,13 @@
 import {
   AutocompleteTextfield
-} from "../chunk-AJTGTGOC.js";
+} from "../chunk-OOM522XP.js";
 import "../chunk-6NPTJBFE.js";
 import "../chunk-T73HHR3I.js";
-import "../chunk-WYWM2HSZ.js";
-import "../chunk-GR4PG6HY.js";
+import "../chunk-L4QQGIYQ.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-PO2PBAHW.js";
+import "../chunk-36W7VD2Z.js";
+import "../chunk-WYWM2HSZ.js";
 import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {

package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.cjs

@@ -147,6 +147,21 @@ var mapWithResponsive = (args) => {
   return value;
 };
 
+// src/utils/clamp-style.ts
+var clampStyle = (lines) => ({
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: lines,
+  lineClamp: lines,
+  overflow: "hidden"
+});
+
+// src/utils/mono-style.ts
+var MONO_STYLE = {
+  fontFamily: 'var(--code-font-family, ui-monospace, "SF Mono", monospace)',
+  fontVariantNumeric: "tabular-nums"
+};
+
 // src/utils/resolve-color.ts
 var SEMANTIC_COLOR_MAP = {
   error: "red",
@@ -190,7 +205,25 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const _a = props, {
+    size,
+    children,
+    variant,
+    color,
+    className,
+    mono,
+    clamp,
+    style
+  } = _a, rest = __objRest(_a, [
+    "size",
+    "children",
+    "variant",
+    "color",
+    "className",
+    "mono",
+    "clamp",
+    "style"
+  ]);
   const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
     () => resolveColor(color),
     [color]
@@ -207,6 +240,7 @@ function Heading2(props) {
       className: (0, import_clsx.clsx)(colorClassName, className),
       color: radixColor,
       size: radixSize,
+      style: __spreadValues(__spreadValues(__spreadValues({}, mono ? MONO_STYLE : null), clamp ? clampStyle(clamp) : null), style),
       children
     })
   );
@@ -238,7 +272,25 @@ var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Typo = (0, import_react3.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const _a = props, {
+      size,
+      variant,
+      children,
+      color,
+      className,
+      mono,
+      clamp,
+      style
+    } = _a, rest = __objRest(_a, [
+      "size",
+      "variant",
+      "children",
+      "color",
+      "className",
+      "mono",
+      "clamp",
+      "style"
+    ]);
     const { color: radixColor, className: colorClassName } = (0, import_react3.useMemo)(
       () => resolveColor(color),
       [color]
@@ -268,6 +320,7 @@ var Typo = (0, import_react3.forwardRef)(
         color: radixColor,
         ref,
         size: radixSize,
+        style: __spreadValues(__spreadValues(__spreadValues({}, mono ? MONO_STYLE : null), clamp ? clampStyle(clamp) : null), style),
         children
       })
     );