@customafk/lunas-ui 0.2.82 → 0.2.83

package/dist/{combobox-kp_kPY8o.cjs.map → combobox-Bhgo112r.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-kp_kPY8o.cjs","names":["Popover","PopoverTrigger","Badge","XIcon","ChevronDownIcon","PopoverContent","Command","Button","CommandPrimitive","inputVariants","CommandList","Spinner","PlusIcon","CommandItem","CommandGroup","CheckIcon"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"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"}
+{"version":3,"file":"combobox-Bhgo112r.cjs","names":["Popover","PopoverTrigger","Badge","XIcon","ChevronDownIcon","PopoverContent","Command","Button","CommandPrimitive","inputVariants","CommandList","Spinner","PlusIcon","CommandItem","CommandGroup","CheckIcon"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"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"}

package/dist/combobox-C0nno01T.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Badge as t}from"./ui/badge.mjs";import{inputVariants as n}from"./ui/input.mjs";import{Command as r,CommandGroup as i,CommandItem as a,CommandList as ee}from"./ui/command.mjs";import{Spinner as te}from"./ui/spinner.mjs";import{Popover as ne,PopoverContent as re,PopoverTrigger as ie}from"./ui/popover.mjs";import{CheckIcon as ae,ChevronDownIcon as oe,PlusIcon as se,XIcon as o}from"lucide-react";import{forwardRef as s,useCallback as c,useEffect as l,useImperativeHandle as ce,useMemo as u,useRef as d,useState as f}from"react";import{cn as p}from"@customafk/react-toolkit/utils";import{cva as m}from"class-variance-authority";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{Command as le,useCommandState as v}from"cmdk";const ue=m([`relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow`,`outline-hidden`,`aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak`],{variants:{color:{normal:[`border-border-weak`,`focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`].join(` `),danger:[`border-danger bg-danger-bg-subtle`,`focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak`,`data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak`].join(` `)},size:{sm:`min-h-8 text-xs`,md:`min-h-9 text-sm`,lg:`min-h-10 text-base`}},defaultVariants:{color:`normal`,size:`md`}});function y(e){e.preventDefault(),e.stopPropagation()}function de(e,t){let[n,r]=f(e);return l(()=>{let n=setTimeout(()=>r(e),t??500);return()=>clearTimeout(n)},[e,t]),n}function b(e,t){if(e.length===0)return{};if(!t)return{"":e};let n={};return e.forEach(e=>{let r=e[t]||``;n[r]||(n[r]=[]),n[r].push(e)}),n}function fe(e,t){let n={};for(let[r,i]of Object.entries(e))n[r]=i.filter(e=>!t.has(e.value));return n}function pe(e,t){return e.length===t.length&&e.every((e,n)=>e.value===t[n]?.value)}const me=s(({className:e,...t},n)=>v(e=>e.filtered.count===0)?g(`div`,{ref:n,className:p(`p-2.5 pt-1 text-center text-xs`,e),"cmdk-empty":``,role:`presentation`,...t}):null);me.displayName=`ComboboxCommandEmpty`;const x=s(({value:s,defaultValue:m=[],onChange:v,options:x,defaultOptions:he=[],onSearch:S,delay:ge,triggerSearchOnFocus:_e=!1,groupBy:C,placeholder:ve,disabled:w,color:T,size:ye=`md`,loadingIndicator:be,loadingText:xe,emptyIndicator:Se,creatable:E=!1,createHint:D,createLabel:O,onCreateOption:k,maxSelected:A=2**53-1,onMaxSelected:j,hideSelectedFromList:M=!1,hideClearAllButton:Ce=!1,onClearAll:we,hideClearQueryButton:Te=!1,onClearQuery:Ee,className:De,badgeClassName:Oe,contentClassName:ke,commandProps:N,inputProps:P},Ae)=>{let F=d(null),I=d(0),L=d(!0),[R,z]=f(!1),[B,V]=f(!1),[je,Me]=f(m),[H,Ne]=f(b(he,C)),[U,W]=f(``),G=s??je,K=U.trim(),q=de(U,ge??500),J=c(e=>{s===void 0&&Me(e),v?.(e)},[v,s]);ce(Ae,()=>({selectedValue:[...G],input:F.current,focus:()=>{z(!0),F.current?.focus()},reset:()=>J([]),clearQuery:()=>W(``)}),[G,J]),l(()=>(L.current=!0,()=>{L.current=!1}),[]),l(()=>{R||W(``)},[R]);let Y=u(()=>new Set(G.map(e=>e.value)),[G]),X=c(e=>{J(G.filter(t=>t.value!==e.value))},[G,J]),Pe=c(e=>{if(Y.has(e.value)){e.fixed||X(e);return}if(G.length>=A){j?.(A);return}W(``),J([...G,e])},[X,A,j,G,Y,J]);l(()=>{!x||S||Ne(e=>pe(x,Object.values(e).flat())?e:b(x,C))},[x,C,S]),l(()=>{(async()=>{if(!S||!R||!_e&&!q)return;let e=++I.current;V(!0);let t=await S(q);!L.current||e!==I.current||(Ne(b(t,C)),V(!1))})()},[q,C,R,_e,S]);let Fe=u(()=>M?fe(H,Y):H,[M,H,Y]),Z=u(()=>{if(!E||!K||B)return!1;let e=K.toLowerCase(),t=Object.values(H).some(t=>t.some(t=>t.label.toLowerCase()===e)),n=G.some(t=>t.label.toLowerCase()===e);return!t&&!n},[E,K,B,H,G]),Ie=typeof O==`function`?O(K):O??`Create "${K}"`,Q=typeof D==`function`?D(K):D,$=c(()=>{if(G.length>=A){j?.(A);return}let e=K;W(``),J([...G,{value:e,label:e}]),k?.(e),z(!1)},[K,A,k,j,G,J]),Le=c(e=>{let t=F.current;if(t){if((e.key===`Delete`||e.key===`Backspace`)&&t.value===``&&G.length>0){let e=G[G.length-1];e.fixed||X(e)}e.key===`Enter`&&Z&&(e.preventDefault(),$())}},[$,X,G,Z]),Re=G.some(e=>!e.fixed);return _(ne,{open:R,onOpenChange:e=>!w&&z(e),children:[g(ie,{asChild:!0,children:_(`div`,{"data-slot":`combobox-trigger`,role:`combobox`,"aria-expanded":R,"aria-haspopup":`listbox`,"aria-disabled":w||void 0,tabIndex:w?-1:0,className:p(ue({color:T,size:ye}),G.length!==0&&`p-1`,!w&&`cursor-pointer`,w&&`pointer-events-none`,De),onKeyDown:e=>{w||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),z(e=>!e))},children:[G.length===0&&g(`span`,{className:`flex-1 truncate px-3 py-2 text-text-positive-muted`,children:ve}),G.map(e=>_(t,{"data-slot":`combobox-chip`,"data-fixed":e.fixed||void 0,variant:`soft`,color:T===`danger`?`danger`:`secondary`,size:ye,pill:!1,className:p(`gap-1 text-xs bg-muted-muted font-normal`,w&&`opacity-50`,Oe),children:[e.label,!e.fixed&&!w&&g(`button`,{type:`button`,"data-slot":`combobox-chip-remove`,"aria-label":`Remove ${e.label}`,onMouseDown:y,onClick:t=>{t.stopPropagation(),X(e)},className:`ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted`,children:g(o,{size:12,strokeWidth:2,"aria-hidden":`true`})})]},e.value)),g(oe,{size:16,"aria-hidden":`true`,className:p(`ms-auto me-2 shrink-0 text-text-positive-muted transition-transform`,R&&`rotate-180`)})]})}),g(re,{align:`start`,"data-slot":`combobox-content`,className:p(`w-(--radix-popover-trigger-width) p-0`,ke),children:_(r,{...N,onKeyDown:e=>{Le(e),N?.onKeyDown?.(e)},"data-slot":`combobox`,className:p(`overflow-visible bg-white`,N?.className),shouldFilter:N?.shouldFilter??!S,children:[!Ce&&Re&&_(e,{type:`button`,"data-slot":`combobox-clear-all`,tabIndex:-1,size:`xs`,variant:`ghost`,color:`muted`,className:`w-fit mt-1 font-normal hover:text-text-positive`,onMouseDown:y,onClick:()=>{let e=G.filter(e=>e.fixed);J(e),we?.()},children:[g(o,{size:10,strokeWidth:2,"aria-hidden":`true`,className:`size-3!`}),`Clear Selected Input`]}),_(`div`,{"data-slot":`combobox-search`,className:`relative px-2.5 pt-2.5 pb-1 border-t border-t-border`,children:[g(le.Input,{...P,ref:F,"data-slot":`combobox-input`,value:U,onValueChange:e=>{W(e),P?.onValueChange?.(e)},placeholder:ve,className:p(n({size:`sm`}),`pe-8`,P?.className)}),!Te&&U.length>0&&g(`button`,{type:`button`,"data-slot":`combobox-clear-query`,"aria-label":`Clear search`,onMouseDown:y,onClick:()=>{W(``),Ee?.(),F.current?.focus()},className:`absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive`,children:g(o,{size:14,strokeWidth:2,"aria-hidden":`true`})})]}),g(ee,{"data-slot":`combobox-list`,className:`shadow-lg outline-hidden`,onMouseDown:e=>e.preventDefault(),children:B?g(`div`,{"data-slot":`combobox-loading`,className:`flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted`,children:be??_(h,{children:[g(te,{className:`size-4`}),xe]})}):Z?_(`div`,{"data-slot":`combobox-create`,className:`flex flex-col gap-2 p-3`,children:[Q&&g(`p`,{className:`pe-10 text-text-positive-weak text-xs`,children:Q}),g(`div`,{className:`flex justify-end`,children:_(e,{type:`button`,"data-slot":`combobox-create-confirm`,"aria-label":Ie,size:`xs`,variant:`outline`,color:`muted`,onMouseDown:y,onClick:$,children:[g(se,{}),`Thêm mới`]})})]}):_(h,{children:[g(me,{"data-slot":`combobox-empty`,children:g(`div`,{className:`bg-muted-muted size-full min-h-14 flex items-center justify-center`,children:Se??`No results found.`})}),g(a,{value:`__combobox-first-item-guard__`,className:`hidden`,"aria-hidden":`true`}),Object.entries(Fe).map(([e,t])=>g(i,{heading:e||void 0,value:e||`__combobox-options__`,children:t.map(e=>{let t=Y.has(e.value);return _(a,{value:e.value,keywords:[e.label],disabled:e.disable,"data-picked":t||void 0,onMouseDown:y,onSelect:()=>Pe(e),className:p(`cursor-pointer justify-between`,e.disable&&`cursor-not-allowed opacity-50`,t&&`bg-primary-bg-subtle! text-primary!`),children:[e.label,t&&_(h,{children:[g(ae,{size:14,className:`ms-auto text-primary`,"aria-hidden":`true`}),g(`span`,{className:`sr-only`,children:`, selected`})]})]},e.value)})},e))]})})]})})]})});x.displayName=`Combobox`;export{x as t};
+//# sourceMappingURL=combobox-C0nno01T.mjs.map

package/dist/{combobox-C64Rvd7n.mjs.map → combobox-C0nno01T.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-C64Rvd7n.mjs","names":["Command","CommandPrimitive"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"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"}
+{"version":3,"file":"combobox-C0nno01T.mjs","names":["Command","CommandPrimitive"],"sources":["../packages/components/ui/combobox.variants.ts","../packages/components/ui/combobox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/** CVA styling for the `Combobox` trigger box (border/background/focus-ring by color and size). */\nexport const comboboxVariants = cva(\n  [\n    'relative flex flex-wrap items-center gap-1 rounded border bg-transparent text-sm transition-shadow',\n    'outline-hidden',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-muted-muted aria-disabled:text-text-positive-weak',\n  ],\n  {\n    variants: {\n      color: {\n        normal: [\n          'border-border-weak',\n          'focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:border-primary data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n        ].join(' '),\n        danger: [\n          'border-danger bg-danger-bg-subtle',\n          'focus-visible:border-danger focus-visible:ring-4 focus-visible:ring-danger-weak',\n          'data-[state=open]:border-danger data-[state=open]:ring-4 data-[state=open]:ring-danger-weak',\n        ].join(' '),\n      },\n      size: {\n        sm: 'min-h-8 text-xs',\n        md: 'min-h-9 text-sm',\n        lg: 'min-h-10 text-base',\n      },\n    },\n    defaultVariants: { color: 'normal', size: 'md' },\n  }\n);\n\nexport type ComboboxVariantProps = VariantProps<typeof comboboxVariants>;\n","'use client';\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { Badge } from './badge';\nimport { comboboxVariants } from './combobox.variants';\nimport { Command, CommandGroup, CommandItem, CommandList } from './command';\nimport { inputVariants } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\nimport { Button } from './button';\n\n/** A single selectable/creatable option rendered in the `Combobox` dropdown. */\nexport interface ComboboxOption {\n  /** Unique value used for selection, comparison, and de-duplication. */\n  value: string;\n  /** Human-readable label displayed in the dropdown and as a chip. */\n  label: string;\n  /** When true, the option cannot be selected. */\n  disable?: boolean;\n  /** When true, the resulting chip cannot be removed via the ×/Backspace and is excluded from \"clear all\". */\n  fixed?: boolean;\n  /** Group the options by providing a matching key. */\n  [key: string]: string | boolean | undefined;\n}\n\ninterface GroupOption {\n  [key: string]: ComboboxOption[];\n}\n\n/** Props for the `Combobox` component. */\nexport interface ComboboxProps {\n  /** Controlled list of currently selected options. */\n  value?: ComboboxOption[];\n  /** Initial selection when uncontrolled. */\n  defaultValue?: ComboboxOption[];\n  /** Fired whenever the selection changes. */\n  onChange?: (options: ComboboxOption[]) => void;\n\n  /** Manually controlled options. */\n  options?: ComboboxOption[];\n  /** Initial options pre-loaded into the dropdown (uncontrolled). */\n  defaultOptions?: ComboboxOption[];\n  /** Async search, called (debounced) whenever the typed query changes while the dropdown is open. */\n  onSearch?: (query: string) => Promise<ComboboxOption[]>;\n  /** Debounce delay in ms for `onSearch`. Defaults to 500. */\n  delay?: number;\n  /** Trigger `onSearch` as soon as the dropdown opens, even before typing. */\n  triggerSearchOnFocus?: boolean;\n  /** Group options in the dropdown by this option key. */\n  groupBy?: string;\n\n  /** Placeholder shown on the closed trigger (when nothing is selected) and in the search input. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Visual color variant of the trigger box. Defaults to `'normal'`. */\n  color?: 'normal' | 'danger';\n  /** Size of the trigger box, chips, and dropdown text. Defaults to `'md'`. */\n  size?: 'sm' | 'md' | 'lg';\n\n  /** Full override of the loading row content, shown while `onSearch` is pending. */\n  loadingIndicator?: React.ReactNode;\n  /** Convenience text shown next to the default spinner while loading. Ignored if `loadingIndicator` is set. */\n  loadingText?: string;\n\n  /** Content shown when no options match the current query. Defaults to `'No results found.'`. Ignored while the creatable prompt is shown. */\n  emptyIndicator?: React.ReactNode;\n\n  /** Allow creating a new option when the typed query doesn't match any existing option. */\n  creatable?: boolean;\n  /** Explanatory hint rendered above the confirm button when no option matches the typed query (e.g. why this value isn't in the list). */\n  createHint?: React.ReactNode | ((query: string) => React.ReactNode);\n  /** Accessible label for the confirm button. Defaults to `Create \"<query>\"`. */\n  createLabel?: string | ((query: string) => string);\n  /** Fired when a new option is created via the creatable flow. */\n  onCreateOption?: (query: string) => void;\n\n  /** Maximum number of options that can be selected at once. */\n  maxSelected?: number;\n  /** Fired when a selection attempt exceeds `maxSelected`, with the configured cap. */\n  onMaxSelected?: (max: number) => void;\n\n  /** When true, already-selected options are removed from the dropdown instead of shown with a checkmark. */\n  hideSelectedFromList?: boolean;\n\n  /** Hide the \"Clear Selected Input\" action. */\n  hideClearAllButton?: boolean;\n  /** Fired after all (non-fixed) selections are cleared via \"Clear Selected Input\". */\n  onClearAll?: () => void;\n  /** Hide the search input's clear (×) button. */\n  hideClearQueryButton?: boolean;\n  /** Fired after the typed query is cleared via the search input's clear button. */\n  onClearQuery?: () => void;\n\n  className?: string;\n  badgeClassName?: string;\n  contentClassName?: string;\n  /** Props forwarded to the underlying `Command` root. `value`/`onValueChange` are excluded — they control cmdk's internal highlighted-item tracking, not this component's selection. */\n  commandProps?: Omit<React.ComponentPropsWithoutRef<typeof Command>, 'value' | 'onValueChange'>;\n  /** Props forwarded to the underlying `CommandPrimitive.Input`. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'placeholder' | 'disabled'>;\n}\n\n/** Imperative handle exposed by `Combobox` via `ref`. */\nexport interface ComboboxRef {\n  /** The currently selected options. */\n  selectedValue: ComboboxOption[];\n  /** The underlying search `<input>` DOM element. */\n  input: HTMLInputElement;\n  /** Programmatically open the dropdown and focus the search input. */\n  focus: () => void;\n  /** Clear all selected options. */\n  reset: () => void;\n  /** Clear the currently typed query without touching the selection. */\n  clearQuery: () => void;\n}\n\n/** Shared handler that keeps the search input focused while interacting with a chip/button/row. */\nfunction stopMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: ComboboxOption[], groupBy?: string) {\n  if (options.length === 0) return {};\n  if (!groupBy) return { '': options };\n\n  const groupOption: GroupOption = {};\n  options.forEach(option => {\n    const key = (option[groupBy] as string) || '';\n    if (!groupOption[key]) groupOption[key] = [];\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, pickedValues: Set<string>) {\n  const cloneOption: GroupOption = {};\n  for (const [key, options] of Object.entries(groupOption)) {\n    cloneOption[key] = options.filter(option => !pickedValues.has(option.value));\n  }\n  return cloneOption;\n}\n\n/** Cheap structural-equality check on option identity (by `value`, in order) — avoids `JSON.stringify` comparisons. */\nfunction haveSameOptionValues(a: ComboboxOption[], b: ComboboxOption[]) {\n  if (a.length !== b.length) return false;\n  return a.every((option, index) => option.value === b[index]?.value);\n}\n\n/**\n * shadcn/ui's `CommandEmpty` doesn't render correctly inside a controlled/filtered `Command`, so\n * this re-implements `cmdk`'s own `Empty` primitive directly.\n *\n * @reference https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607\n */\nconst CommandEmpty = forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive.Empty>>(({ className, ...props }, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n  if (!render) return null;\n  return <div ref={forwardedRef} className={cn('p-2.5 pt-1 text-center text-xs', className)} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nCommandEmpty.displayName = 'ComboboxCommandEmpty';\n\n/**\n * A multi-select combobox: a closed trigger shows the current selection as removable chips (or a\n * placeholder) and toggles a popover on click; the popover holds a type-to-filter search input, an\n * optional async-loaded option list, and a creatable \"custom input\" prompt for values that don't\n * match any existing option.\n *\n * @example\n * ```tsx\n * import { Combobox } from '@customafk/lunas-ui/ui/combobox';\n *\n * const options = [\n *   { value: 'hokkaido', label: 'Hokkaido' },\n *   { value: 'aomori', label: 'Aomori' },\n * ];\n *\n * <Combobox\n *   options={options}\n *   placeholder=\"Search location…\"\n *   creatable\n *   createHint=\"This location isn't registered yet — it will be added as a custom entry.\"\n *   onChange={(selected) => console.log(selected)}\n * />\n * ```\n */\nexport const Combobox = forwardRef<ComboboxRef, ComboboxProps>(\n  (\n    {\n      value,\n      defaultValue = [],\n      onChange,\n      options: arrayOptions,\n      defaultOptions: arrayDefaultOptions = [],\n      onSearch,\n      delay,\n      triggerSearchOnFocus = false,\n      groupBy,\n      placeholder,\n      disabled,\n      color,\n      size = 'md',\n      loadingIndicator,\n      loadingText,\n      emptyIndicator,\n      creatable = false,\n      createHint,\n      createLabel,\n      onCreateOption,\n      maxSelected = Number.MAX_SAFE_INTEGER,\n      onMaxSelected,\n      hideSelectedFromList = false,\n      hideClearAllButton = false,\n      onClearAll,\n      hideClearQueryButton = false,\n      onClearQuery,\n      className,\n      badgeClassName,\n      contentClassName,\n      commandProps,\n      inputProps,\n    }: ComboboxProps,\n    ref: React.Ref<ComboboxRef>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const searchRequestIdRef = useRef(0);\n    const isMountedRef = useRef(true);\n\n    const [open, setOpen] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [internalSelected, setInternalSelected] = useState<ComboboxOption[]>(defaultValue);\n    const [options, setOptions] = useState<GroupOption>(transToGroupOption(arrayDefaultOptions, groupBy));\n    const [inputValue, setInputValue] = useState('');\n\n    const selected = value ?? internalSelected;\n    const trimmedInputValue = inputValue.trim();\n    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);\n\n    /** Notifies `onChange` unconditionally; only mirrors into local state when uncontrolled. */\n    const setSelected = useCallback(\n      (next: ComboboxOption[]) => {\n        if (value === undefined) setInternalSelected(next);\n        onChange?.(next);\n      },\n      [onChange, value]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        selectedValue: [...selected],\n        input: inputRef.current as HTMLInputElement,\n        focus: () => {\n          setOpen(true);\n          inputRef.current?.focus();\n        },\n        reset: () => setSelected([]),\n        clearQuery: () => setInputValue(''),\n      }),\n      [selected, setSelected]\n    );\n\n    useEffect(() => {\n      isMountedRef.current = true;\n      return () => {\n        isMountedRef.current = false;\n      };\n    }, []);\n\n    // Start each open with a blank query, so reopening always shows the full list first.\n    useEffect(() => {\n      if (!open) setInputValue('');\n    }, [open]);\n\n    const selectedValues = useMemo(() => new Set(selected.map(option => option.value)), [selected]);\n\n    const handleUnselect = useCallback(\n      (option: ComboboxOption) => {\n        setSelected(selected.filter(s => s.value !== option.value));\n      },\n      [selected, setSelected]\n    );\n\n    const handleSelect = useCallback(\n      (option: ComboboxOption) => {\n        if (selectedValues.has(option.value)) {\n          if (!option.fixed) handleUnselect(option);\n          return;\n        }\n        if (selected.length >= maxSelected) {\n          onMaxSelected?.(maxSelected);\n          return;\n        }\n        setInputValue('');\n        setSelected([...selected, option]);\n      },\n      [handleUnselect, maxSelected, onMaxSelected, selected, selectedValues, setSelected]\n    );\n\n    useEffect(() => {\n      if (!arrayOptions || onSearch) return;\n      setOptions(prev => {\n        const prevFlat = Object.values(prev).flat();\n        return haveSameOptionValues(arrayOptions, prevFlat) ? prev : transToGroupOption(arrayOptions, groupBy);\n      });\n    }, [arrayOptions, groupBy, onSearch]);\n\n    useEffect(() => {\n      const exec = async () => {\n        if (!onSearch || !open) return;\n        if (!triggerSearchOnFocus && !debouncedSearchTerm) return;\n\n        const requestId = ++searchRequestIdRef.current;\n        setIsLoading(true);\n        const res = await onSearch(debouncedSearchTerm);\n        if (!isMountedRef.current || requestId !== searchRequestIdRef.current) return;\n        setOptions(transToGroupOption(res, groupBy));\n        setIsLoading(false);\n      };\n      void exec();\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n    const selectables = useMemo<GroupOption>(\n      () => (hideSelectedFromList ? removePickedOption(options, selectedValues) : options),\n      [hideSelectedFromList, options, selectedValues]\n    );\n\n    const showCreatePrompt = useMemo(() => {\n      if (!creatable || !trimmedInputValue || isLoading) return false;\n\n      const normalizedQuery = trimmedInputValue.toLowerCase();\n      const matchesExisting = Object.values(options).some(group => group.some(o => o.label.toLowerCase() === normalizedQuery));\n      const matchesSelected = selected.some(s => s.label.toLowerCase() === normalizedQuery);\n      return !matchesExisting && !matchesSelected;\n    }, [creatable, trimmedInputValue, isLoading, options, selected]);\n\n    const resolvedCreateLabel = typeof createLabel === 'function' ? createLabel(trimmedInputValue) : (createLabel ?? `Create \"${trimmedInputValue}\"`);\n    const resolvedCreateHint = typeof createHint === 'function' ? createHint(trimmedInputValue) : createHint;\n\n    const handleCreateOption = useCallback(() => {\n      if (selected.length >= maxSelected) {\n        onMaxSelected?.(maxSelected);\n        return;\n      }\n      const query = trimmedInputValue;\n      setInputValue('');\n      setSelected([...selected, { value: query, label: query }]);\n      onCreateOption?.(query);\n      setOpen(false);\n    }, [trimmedInputValue, maxSelected, onCreateOption, onMaxSelected, selected, setSelected]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current;\n        if (!input) return;\n\n        if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '' && selected.length > 0) {\n          const lastSelectOption = selected[selected.length - 1];\n          if (!lastSelectOption.fixed) handleUnselect(lastSelectOption);\n        }\n\n        if (e.key === 'Enter' && showCreatePrompt) {\n          e.preventDefault();\n          handleCreateOption();\n        }\n      },\n      [handleCreateOption, handleUnselect, selected, showCreatePrompt]\n    );\n\n    const hasClearableSelection = selected.some(s => !s.fixed);\n\n    return (\n      <Popover open={open} onOpenChange={next => !disabled && setOpen(next)}>\n        <PopoverTrigger asChild>\n          <div\n            data-slot=\"combobox-trigger\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : 0}\n            className={cn(\n              comboboxVariants({ color, size }),\n              selected.length !== 0 && 'p-1',\n              !disabled && 'cursor-pointer',\n              disabled && 'pointer-events-none',\n              className\n            )}\n            onKeyDown={e => {\n              if (disabled) return;\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                setOpen(o => !o);\n              }\n            }}\n          >\n            {selected.length === 0 && <span className=\"flex-1 truncate px-3 py-2 text-text-positive-muted\">{placeholder}</span>}\n\n            {selected.map(option => (\n              <Badge\n                key={option.value}\n                data-slot=\"combobox-chip\"\n                data-fixed={option.fixed || undefined}\n                variant=\"soft\"\n                color={color === 'danger' ? 'danger' : 'secondary'}\n                size={size}\n                pill={false}\n                className={cn('gap-1 text-xs bg-muted-muted font-normal', disabled && 'opacity-50', badgeClassName)}\n              >\n                {option.label}\n                {!option.fixed && !disabled && (\n                  <button\n                    type=\"button\"\n                    data-slot=\"combobox-chip-remove\"\n                    aria-label={`Remove ${option.label}`}\n                    onMouseDown={stopMouseDown}\n                    onClick={e => {\n                      e.stopPropagation();\n                      handleUnselect(option);\n                    }}\n                    className=\"ms-0.5 -me-0.5 rounded-sm outline-hidden hover:text-text-positive text-text-positive-muted\"\n                  >\n                    <XIcon size={12} strokeWidth={2} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </Badge>\n            ))}\n\n            <ChevronDownIcon\n              size={16}\n              aria-hidden=\"true\"\n              className={cn('ms-auto me-2 shrink-0 text-text-positive-muted transition-transform', open && 'rotate-180')}\n            />\n          </div>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" data-slot=\"combobox-content\" className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}>\n          <Command\n            {...commandProps}\n            onKeyDown={e => {\n              handleKeyDown(e);\n              commandProps?.onKeyDown?.(e);\n            }}\n            data-slot=\"combobox\"\n            className={cn('overflow-visible bg-white', commandProps?.className)}\n            shouldFilter={commandProps?.shouldFilter ?? !onSearch}\n          >\n            {!hideClearAllButton && hasClearableSelection && (\n              <Button\n                type=\"button\"\n                data-slot=\"combobox-clear-all\"\n                tabIndex={-1}\n                size=\"xs\"\n                variant=\"ghost\"\n                color=\"muted\"\n                className=\"w-fit mt-1 font-normal hover:text-text-positive\"\n                onMouseDown={stopMouseDown}\n                onClick={() => {\n                  const remaining = selected.filter(s => s.fixed);\n                  setSelected(remaining);\n                  onClearAll?.();\n                }}\n              >\n                <XIcon size={10} strokeWidth={2} aria-hidden=\"true\" className=\"size-3!\" />\n                Clear Selected Input\n              </Button>\n            )}\n\n            <div data-slot=\"combobox-search\" className=\"relative px-2.5 pt-2.5 pb-1 border-t border-t-border\">\n              <CommandPrimitive.Input\n                {...inputProps}\n                ref={inputRef}\n                data-slot=\"combobox-input\"\n                value={inputValue}\n                onValueChange={val => {\n                  setInputValue(val);\n                  inputProps?.onValueChange?.(val);\n                }}\n                placeholder={placeholder}\n                className={cn(inputVariants({ size: 'sm' }), 'pe-8', inputProps?.className)}\n              />\n              {!hideClearQueryButton && inputValue.length > 0 && (\n                <button\n                  type=\"button\"\n                  data-slot=\"combobox-clear-query\"\n                  aria-label=\"Clear search\"\n                  onMouseDown={stopMouseDown}\n                  onClick={() => {\n                    setInputValue('');\n                    onClearQuery?.();\n                    inputRef.current?.focus();\n                  }}\n                  className=\"absolute inset-y-6 inset-e-4 flex items-center justify-center text-text-positive-muted transition-colors hover:text-text-positive\"\n                >\n                  <XIcon size={14} strokeWidth={2} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n\n            <CommandList data-slot=\"combobox-list\" className=\"shadow-lg outline-hidden\" onMouseDown={e => e.preventDefault()}>\n              {isLoading ? (\n                <div data-slot=\"combobox-loading\" className=\"flex items-center justify-center gap-2 px-2 py-6 text-sm text-text-positive-muted\">\n                  {loadingIndicator ?? (\n                    <>\n                      <Spinner className=\"size-4\" />\n                      {loadingText}\n                    </>\n                  )}\n                </div>\n              ) : showCreatePrompt ? (\n                <div data-slot=\"combobox-create\" className=\"flex flex-col gap-2 p-3\">\n                  {resolvedCreateHint && <p className=\"pe-10 text-text-positive-weak text-xs\">{resolvedCreateHint}</p>}\n                  <div className=\"flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      data-slot=\"combobox-create-confirm\"\n                      aria-label={resolvedCreateLabel}\n                      size=\"xs\"\n                      variant=\"outline\"\n                      color=\"muted\"\n                      onMouseDown={stopMouseDown}\n                      onClick={handleCreateOption}\n                    >\n                      <PlusIcon />\n                      Thêm mới\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty data-slot=\"combobox-empty\">\n                    <div className=\"bg-muted-muted size-full min-h-14 flex items-center justify-center\">{emptyIndicator ?? 'No results found.'}</div>\n                  </CommandEmpty>\n\n                  {/* Absorbs cmdk's default \"auto-highlight the first item\" behavior so opening the\n                      dropdown with no typed query doesn't silently arm Enter to toggle a real option. */}\n                  <CommandItem value=\"__combobox-first-item-guard__\" className=\"hidden\" aria-hidden=\"true\" />\n\n                  {Object.entries(selectables).map(([key, groupOptions]) => (\n                    <CommandGroup key={key} heading={key || undefined} value={key || '__combobox-options__'}>\n                      {groupOptions.map(option => {\n                        const picked = selectedValues.has(option.value);\n                        return (\n                          <CommandItem\n                            key={option.value}\n                            value={option.value}\n                            keywords={[option.label]}\n                            disabled={option.disable}\n                            data-picked={picked || undefined}\n                            onMouseDown={stopMouseDown}\n                            onSelect={() => handleSelect(option)}\n                            className={cn(\n                              'cursor-pointer justify-between',\n                              option.disable && 'cursor-not-allowed opacity-50',\n                              picked && 'bg-primary-bg-subtle! text-primary!'\n                            )}\n                          >\n                            {option.label}\n                            {picked && (\n                              <>\n                                <CheckIcon size={14} className=\"ms-auto text-primary\" aria-hidden=\"true\" />\n                                <span className=\"sr-only\">, selected</span>\n                              </>\n                            )}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"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"}

package/dist/{combobox-field-Bug1qI5B.mjs → combobox-field-CvkdZkQE.mjs}

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{Dialog as t,DialogClose as n,DialogOverlay as ee,DialogPortal as te}from"./ui/dialog.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as ne}from"./ui/command.mjs";import{G as re}from"./tanstack-form-q9hDCc0Y.mjs";import{Popover as ie,PopoverContent as c,PopoverTrigger as l}from"./ui/popover.mjs";import{Field as u,FieldContent as d,FieldContentMain as f,FieldDescription as p,FieldError as m,FieldGroup as h,FieldLabel as g,FieldNote as ae,FieldSeparator as oe,FieldTooltip as se}from"./field-V2DoD8qL.mjs";import{XIcon as _}from"lucide-react";import{memo as v,useId as y,useState as b}from"react";import{cn as x}from"@customafk/react-toolkit/utils";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";import{useStore as E}from"@tanstack/react-form";import{useIsMobile as D}from"@customafk/react-toolkit/hooks/useMobile";const O=v(({label:v,description:O,placeholder:k,tooltip:A,helperText:j,orientation:M=`responsive`,options:N,required:P=!1,disabled:ce=!1,clearable:F=!1,showErrorMessage:I=!0,modal:L})=>{let R=y(),z=re(),B=D(),[V,H]=b(!1),[U,W]=b(!1),G=E(z.form.store,({isSubmitting:e})=>e),K=ce||G,q=z.state.meta.isDirty||z.state.meta.isTouched,J=q&&!z.state.meta.isValid,le=P&&z.state.value===null,Y=F&&!!z.state.value&&!K,ue=z.state.meta.errors.length>0,X=N.find(({value:e})=>e===z.state.value)?.label,Z=()=>{z.handleChange(null),z.handleBlur()},Q=t=>C(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":R,className:x(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,Y&&`pr-8`,!z.state.value&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:X?C(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:X}):C(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:k})}),$=e=>w(r,{className:`border-none`,children:[C(o,{placeholder:k??`Tìm kiếm…`}),w(ne,{children:[C(i,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),C(a,{className:`max-h-60 overflow-y-auto`,children:N.map(({value:t,label:n})=>C(s,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return w(h,{className:`gap-y-4 px-4`,children:[w(u,{orientation:M,"data-invalid":J,children:[w(d,{children:[w(g,{"aria-required":le,htmlFor:z.name,children:[v,A&&C(se,{tooltip:A})]}),C(p,{children:O})]}),C(f,{className:`flex justify-end`,children:w(`div`,{className:`flex w-full flex-col`,children:[w(`div`,{className:`relative`,children:[B?w(S,{children:[Q(()=>H(!0)),C(t,{open:V,onOpenChange:e=>{H(e),e||z.handleBlur()},children:w(te,{children:[C(ee,{}),w(T.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:x(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[w(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[C(`span`,{className:`font-semibold text-sm text-text-positive`,children:v}),C(n,{asChild:!0,children:C(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:C(_,{size:16})})})]}),w(`div`,{className:`flex flex-col overflow-y-auto`,children:[Y&&C(n,{asChild:!0,children:w(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:Z,children:[C(_,{size:14}),`Xóa lựa chọn`]})}),$(e=>{z.handleChange(e),H(!1),z.handleBlur()})]}),C(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):w(ie,{open:U,modal:L,onOpenChange:e=>{W(e),e||z.handleBlur()},children:[C(l,{asChild:!0,children:Q()}),C(c,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:$(e=>{z.handleChange(e),W(!1),z.handleBlur()})})]}),Y&&C(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:Z,children:C(_,{"aria-hidden":`true`})})]}),q&&I&&ue&&C(m,{id:R,className:`mt-1`,errors:z.state.meta.errors}),C(ae,{isShow:!!j,children:j})]})})]}),C(oe,{})]})});O.displayName=`ComboboxField`;export{O as ComboboxField};
-//# sourceMappingURL=combobox-field-Bug1qI5B.mjs.map
+import{Button as e}from"./ui/button.mjs";import{Dialog as t,DialogClose as n,DialogOverlay as ee,DialogPortal as te}from"./ui/dialog.mjs";import{Command as r,CommandEmpty as i,CommandGroup as a,CommandInput as o,CommandItem as s,CommandList as ne}from"./ui/command.mjs";import{G as re}from"./tanstack-form-fkaBh9RO.mjs";import{Popover as ie,PopoverContent as c,PopoverTrigger as l}from"./ui/popover.mjs";import{Field as u,FieldContent as d,FieldContentMain as f,FieldDescription as p,FieldError as m,FieldGroup as h,FieldLabel as g,FieldNote as ae,FieldSeparator as oe,FieldTooltip as se}from"./field-V2DoD8qL.mjs";import{XIcon as _}from"lucide-react";import{memo as v,useId as y,useState as b}from"react";import{cn as x}from"@customafk/react-toolkit/utils";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";import{useStore as E}from"@tanstack/react-form";import{useIsMobile as D}from"@customafk/react-toolkit/hooks/useMobile";const O=v(({label:v,description:O,placeholder:k,tooltip:A,helperText:j,orientation:M=`responsive`,options:N,required:P=!1,disabled:ce=!1,clearable:F=!1,showErrorMessage:I=!0,modal:L})=>{let R=y(),z=re(),B=D(),[V,H]=b(!1),[U,W]=b(!1),G=E(z.form.store,({isSubmitting:e})=>e),K=ce||G,q=z.state.meta.isDirty||z.state.meta.isTouched,J=q&&!z.state.meta.isValid,le=P&&z.state.value===null,Y=F&&!!z.state.value&&!K,ue=z.state.meta.errors.length>0,X=N.find(({value:e})=>e===z.state.value)?.label,Z=()=>{z.handleChange(null),z.handleBlur()},Q=t=>C(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":R,className:x(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,Y&&`pr-8`,!z.state.value&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:X?C(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:X}):C(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:k})}),$=e=>w(r,{className:`border-none`,children:[C(o,{placeholder:k??`Tìm kiếm…`}),w(ne,{children:[C(i,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),C(a,{className:`max-h-60 overflow-y-auto`,children:N.map(({value:t,label:n})=>C(s,{value:n,onSelect:()=>e(t),children:n},t))})]})]});return w(h,{className:`gap-y-4 px-4`,children:[w(u,{orientation:M,"data-invalid":J,children:[w(d,{children:[w(g,{"aria-required":le,htmlFor:z.name,children:[v,A&&C(se,{tooltip:A})]}),C(p,{children:O})]}),C(f,{className:`flex justify-end`,children:w(`div`,{className:`flex w-full flex-col`,children:[w(`div`,{className:`relative`,children:[B?w(S,{children:[Q(()=>H(!0)),C(t,{open:V,onOpenChange:e=>{H(e),e||z.handleBlur()},children:w(te,{children:[C(ee,{}),w(T.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:x(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[w(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[C(`span`,{className:`font-semibold text-sm text-text-positive`,children:v}),C(n,{asChild:!0,children:C(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:C(_,{size:16})})})]}),w(`div`,{className:`flex flex-col overflow-y-auto`,children:[Y&&C(n,{asChild:!0,children:w(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:Z,children:[C(_,{size:14}),`Xóa lựa chọn`]})}),$(e=>{z.handleChange(e),H(!1),z.handleBlur()})]}),C(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):w(ie,{open:U,modal:L,onOpenChange:e=>{W(e),e||z.handleBlur()},children:[C(l,{asChild:!0,children:Q()}),C(c,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:$(e=>{z.handleChange(e),W(!1),z.handleBlur()})})]}),Y&&C(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:Z,children:C(_,{"aria-hidden":`true`})})]}),q&&I&&ue&&C(m,{id:R,className:`mt-1`,errors:z.state.meta.errors}),C(ae,{isShow:!!j,children:j})]})})]}),C(oe,{})]})});O.displayName=`ComboboxField`;export{O as ComboboxField};
+//# sourceMappingURL=combobox-field-CvkdZkQE.mjs.map

package/dist/{combobox-field-Bug1qI5B.mjs.map → combobox-field-CvkdZkQE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-field-Bug1qI5B.mjs","names":["Dialog","RadixDialog","Popover"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}
+{"version":3,"file":"combobox-field-CvkdZkQE.mjs","names":["Dialog","RadixDialog","Popover"],"sources":["../packages/components/features/tanstack-form/components/fields/combobox-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { XIcon } from 'lucide-react';\n\nimport { Dialog as RadixDialog } from 'radix-ui';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';\nimport { Dialog, DialogClose, DialogOverlay, DialogPortal } from '@/components/ui/dialog';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { ComboboxFieldProps } from '../../types';\n\nexport const ComboboxField = memo<ComboboxFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    options,\n    required = false,\n    disabled = false,\n    clearable = false,\n    showErrorMessage = true,\n    modal,\n  }) => {\n    const errorId = useId();\n    const field = useTanStackFieldContext<string | null>();\n    const isMobile = useIsMobile();\n    const [dialogOpen, setDialogOpen] = useState(false);\n    const [popoverOpen, setPopoverOpen] = useState(false);\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _showClear = clearable && !!field.state.value && !isDisabled;\n    const _hasErrors = field.state.meta.errors.length > 0;\n\n    const selectedLabel = options.find(({ value }) => value === field.state.value)?.label;\n\n    const onClear = () => {\n      field.handleChange(null);\n      field.handleBlur();\n    };\n\n    const triggerButton = (onClick?: () => void) => (\n      <Button\n        variant=\"outline\"\n        color=\"muted\"\n        size=\"lg\"\n        disabled={isDisabled}\n        aria-invalid={_invalid ? true : undefined}\n        aria-describedby={errorId}\n        className={cn(\n          'flex w-full items-center justify-start rounded outline-border',\n          'hover:bg-transparent',\n          'focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak',\n          'data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n          _showClear && 'pr-8',\n          !field.state.value && 'text-text-positive-muted',\n          _invalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n        )}\n        onClick={onClick}\n      >\n        {selectedLabel ? (\n          <p className=\"flex min-w-0 flex-1 items-center gap-2 truncate text-start\">{selectedLabel}</p>\n        ) : (\n          <p className=\"flex-1 text-start text-text-positive-muted\">{placeholder}</p>\n        )}\n      </Button>\n    );\n\n    const renderCommandList = (onSelect: (value: string) => void) => (\n      <Command className=\"border-none\">\n        <CommandInput placeholder={placeholder ?? 'Tìm kiếm…'} />\n        <CommandList>\n          <CommandEmpty className=\"flex min-h-30 items-center justify-center text-sm text-text-positive-weak\">Không tìm thấy kết quả nào phù hợp.</CommandEmpty>\n          <CommandGroup className=\"max-h-60 overflow-y-auto\">\n            {options.map(({ value, label: optLabel }) => (\n              <CommandItem key={value} value={optLabel} onSelect={() => onSelect(value)}>\n                {optLabel}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel aria-required={_isEmpty} htmlFor={field.name}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain className=\"flex justify-end\">\n            <div className=\"flex w-full flex-col\">\n              <div className=\"relative\">\n                {isMobile ? (\n                  <>\n                    {triggerButton(() => setDialogOpen(true))}\n                    <Dialog\n                      open={dialogOpen}\n                      onOpenChange={open => {\n                        setDialogOpen(open);\n                        if (!open) field.handleBlur();\n                      }}\n                    >\n                      <DialogPortal>\n                        <DialogOverlay />\n                        <RadixDialog.Content\n                          onOpenAutoFocus={e => e.preventDefault()}\n                          className={cn(\n                            'fixed inset-x-0 bottom-0 z-50',\n                            'flex flex-col bg-background rounded-t-2xl outline-none',\n                            'max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]',\n                            'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0',\n                            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0',\n                            'duration-300'\n                          )}\n                        >\n                          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n                            <span className=\"font-semibold text-sm text-text-positive\">{label}</span>\n                            <DialogClose asChild>\n                              <button\n                                type=\"button\"\n                                aria-label=\"Đóng\"\n                                className=\"flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive\"\n                              >\n                                <XIcon size={16} />\n                              </button>\n                            </DialogClose>\n                          </div>\n\n                          <div className=\"flex flex-col overflow-y-auto\">\n                            {_showClear && (\n                              <DialogClose asChild>\n                                <button\n                                  type=\"button\"\n                                  className=\"flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle\"\n                                  onClick={onClear}\n                                >\n                                  <XIcon size={14} />\n                                  Xóa lựa chọn\n                                </button>\n                              </DialogClose>\n                            )}\n                            {renderCommandList(value => {\n                              field.handleChange(value);\n                              setDialogOpen(false);\n                              field.handleBlur();\n                            })}\n                          </div>\n\n                          <div className=\"shrink-0 h-safe-bottom\" />\n                        </RadixDialog.Content>\n                      </DialogPortal>\n                    </Dialog>\n                  </>\n                ) : (\n                  <Popover\n                    open={popoverOpen}\n                    modal={modal}\n                    onOpenChange={open => {\n                      setPopoverOpen(open);\n                      if (!open) field.handleBlur();\n                    }}\n                  >\n                    <PopoverTrigger asChild>{triggerButton()}</PopoverTrigger>\n                    <PopoverContent align=\"end\" side=\"bottom\" className=\"flex w-fit rounded p-0\">\n                      {renderCommandList(value => {\n                        field.handleChange(value);\n                        setPopoverOpen(false);\n                        field.handleBlur();\n                      })}\n                    </PopoverContent>\n                  </Popover>\n                )}\n\n                {_showClear && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Xóa lựa chọn\"\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform\"\n                    onClick={onClear}\n                  >\n                    <XIcon aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n\n              {_touched && showErrorMessage && _hasErrors && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n              <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n            </div>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nComboboxField.displayName = 'ComboboxField';\n"],"mappings":"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"}

package/dist/{combobox-field-BE9miJ3D.cjs → combobox-field-ZYr7636s.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-BxqS40rB.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@tanstack/react-form"),f=require("@customafk/react-toolkit/hooks/useMobile");const p=(0,s.memo)(({label:p,description:m,placeholder:h,tooltip:g,helperText:_,orientation:v=`responsive`,options:y,required:b=!1,disabled:x=!1,clearable:S=!1,showErrorMessage:C=!0,modal:w})=>{let T=(0,s.useId)(),E=r.G(),D=(0,f.useIsMobile)(),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=(0,d.useStore)(E.form.store,({isSubmitting:e})=>e),N=x||M,P=E.state.meta.isDirty||E.state.meta.isTouched,F=P&&!E.state.meta.isValid,I=b&&E.state.value===null,L=S&&!!E.state.value&&!N,R=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=t=>(0,l.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:N,"aria-invalid":F?!0:void 0,"aria-describedby":T,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,L&&`pr-8`,!E.state.value&&`text-text-positive-muted`,F&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=e=>(0,l.jsxs)(n.Command,{className:`border-none`,children:[(0,l.jsx)(n.CommandInput,{placeholder:h??`Tìm kiếm…`}),(0,l.jsxs)(n.CommandList,{children:[(0,l.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,l.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:y.map(({value:t,label:r})=>(0,l.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,l.jsxs)(a.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(a.Field,{orientation:v,"data-invalid":F,children:[(0,l.jsxs)(a.FieldContent,{children:[(0,l.jsxs)(a.FieldLabel,{"aria-required":I,htmlFor:E.name,children:[p,g&&(0,l.jsx)(a.FieldTooltip,{tooltip:g})]}),(0,l.jsx)(a.FieldDescription,{children:m})]}),(0,l.jsx)(a.FieldContentMain,{className:`flex justify-end`,children:(0,l.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,l.jsxs)(`div`,{className:`relative`,children:[D?(0,l.jsxs)(l.Fragment,{children:[V(()=>k(!0)),(0,l.jsx)(t.Dialog,{open:O,onOpenChange:e=>{k(e),e||E.handleBlur()},children:(0,l.jsxs)(t.DialogPortal,{children:[(0,l.jsx)(t.DialogOverlay,{}),(0,l.jsxs)(u.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,c.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,l.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:p}),(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,l.jsx)(o.XIcon,{size:16})})})]}),(0,l.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[L&&(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(e=>{E.handleChange(e),k(!1),E.handleBlur()})]}),(0,l.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,l.jsxs)(i.Popover,{open:A,modal:w,onOpenChange:e=>{j(e),e||E.handleBlur()},children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(e=>{E.handleChange(e),j(!1),E.handleBlur()})})]}),L&&(0,l.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(0,l.jsx)(a.FieldError,{id:T,className:`mt-1`,errors:E.state.meta.errors}),(0,l.jsx)(a.FieldNote,{isShow:!!_,children:_})]})})]}),(0,l.jsx)(a.FieldSeparator,{})]})});p.displayName=`ComboboxField`,exports.ComboboxField=p;
-//# sourceMappingURL=combobox-field-BE9miJ3D.cjs.map
+const e=require("./ui/button.cjs"),t=require("./ui/dialog.cjs"),n=require("./ui/command.cjs"),r=require("./tanstack-form-C0ab8EEl.cjs"),i=require("./ui/popover.cjs"),a=require("./field-BSLi-P0Q.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@tanstack/react-form"),f=require("@customafk/react-toolkit/hooks/useMobile");const p=(0,s.memo)(({label:p,description:m,placeholder:h,tooltip:g,helperText:_,orientation:v=`responsive`,options:y,required:b=!1,disabled:x=!1,clearable:S=!1,showErrorMessage:C=!0,modal:w})=>{let T=(0,s.useId)(),E=r.G(),D=(0,f.useIsMobile)(),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(!1),M=(0,d.useStore)(E.form.store,({isSubmitting:e})=>e),N=x||M,P=E.state.meta.isDirty||E.state.meta.isTouched,F=P&&!E.state.meta.isValid,I=b&&E.state.value===null,L=S&&!!E.state.value&&!N,R=E.state.meta.errors.length>0,z=y.find(({value:e})=>e===E.state.value)?.label,B=()=>{E.handleChange(null),E.handleBlur()},V=t=>(0,l.jsx)(e.Button,{variant:`outline`,color:`muted`,size:`lg`,disabled:N,"aria-invalid":F?!0:void 0,"aria-describedby":T,className:(0,c.cn)(`flex w-full items-center justify-start rounded outline-border`,`hover:bg-transparent`,`focus-visible:outline-1 focus-visible:outline-primary-strong focus-visible:ring-4 focus-visible:ring-primary-weak`,`data-[state=open]:text-text-positive-muted data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,L&&`pr-8`,!E.state.value&&`text-text-positive-muted`,F&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),onClick:t,children:z?(0,l.jsx)(`p`,{className:`flex min-w-0 flex-1 items-center gap-2 truncate text-start`,children:z}):(0,l.jsx)(`p`,{className:`flex-1 text-start text-text-positive-muted`,children:h})}),H=e=>(0,l.jsxs)(n.Command,{className:`border-none`,children:[(0,l.jsx)(n.CommandInput,{placeholder:h??`Tìm kiếm…`}),(0,l.jsxs)(n.CommandList,{children:[(0,l.jsx)(n.CommandEmpty,{className:`flex min-h-30 items-center justify-center text-sm text-text-positive-weak`,children:`Không tìm thấy kết quả nào phù hợp.`}),(0,l.jsx)(n.CommandGroup,{className:`max-h-60 overflow-y-auto`,children:y.map(({value:t,label:r})=>(0,l.jsx)(n.CommandItem,{value:r,onSelect:()=>e(t),children:r},t))})]})]});return(0,l.jsxs)(a.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(a.Field,{orientation:v,"data-invalid":F,children:[(0,l.jsxs)(a.FieldContent,{children:[(0,l.jsxs)(a.FieldLabel,{"aria-required":I,htmlFor:E.name,children:[p,g&&(0,l.jsx)(a.FieldTooltip,{tooltip:g})]}),(0,l.jsx)(a.FieldDescription,{children:m})]}),(0,l.jsx)(a.FieldContentMain,{className:`flex justify-end`,children:(0,l.jsxs)(`div`,{className:`flex w-full flex-col`,children:[(0,l.jsxs)(`div`,{className:`relative`,children:[D?(0,l.jsxs)(l.Fragment,{children:[V(()=>k(!0)),(0,l.jsx)(t.Dialog,{open:O,onOpenChange:e=>{k(e),e||E.handleBlur()},children:(0,l.jsxs)(t.DialogPortal,{children:[(0,l.jsx)(t.DialogOverlay,{}),(0,l.jsxs)(u.Dialog.Content,{onOpenAutoFocus:e=>e.preventDefault(),className:(0,c.cn)(`fixed inset-x-0 bottom-0 z-50`,`flex flex-col bg-background rounded-t-2xl outline-none`,`max-h-[80dvh] shadow-[0_-4px_24px_rgba(0,0,0,0.08)]`,`data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in-0`,`data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:fade-out-0`,`duration-300`),children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3 border-b border-border shrink-0`,children:[(0,l.jsx)(`span`,{className:`font-semibold text-sm text-text-positive`,children:p}),(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsx)(`button`,{type:`button`,"aria-label":`Đóng`,className:`flex size-7 items-center justify-center rounded-md text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive`,children:(0,l.jsx)(o.XIcon,{size:16})})})]}),(0,l.jsxs)(`div`,{className:`flex flex-col overflow-y-auto`,children:[L&&(0,l.jsx)(t.DialogClose,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,className:`flex w-full items-center gap-x-2 px-4 py-3 text-left text-sm text-danger-strong transition-colors hover:bg-danger-bg-subtle`,onClick:B,children:[(0,l.jsx)(o.XIcon,{size:14}),`Xóa lựa chọn`]})}),H(e=>{E.handleChange(e),k(!1),E.handleBlur()})]}),(0,l.jsx)(`div`,{className:`shrink-0 h-safe-bottom`})]})]})})]}):(0,l.jsxs)(i.Popover,{open:A,modal:w,onOpenChange:e=>{j(e),e||E.handleBlur()},children:[(0,l.jsx)(i.PopoverTrigger,{asChild:!0,children:V()}),(0,l.jsx)(i.PopoverContent,{align:`end`,side:`bottom`,className:`flex w-fit rounded p-0`,children:H(e=>{E.handleChange(e),j(!1),E.handleBlur()})})]}),L&&(0,l.jsx)(`button`,{type:`button`,"aria-label":`Xóa lựa chọn`,className:`absolute right-2 top-1/2 -translate-y-1/2 flex size-4 cursor-pointer items-center justify-center rounded-md text-text-positive-weak outline-none transition-[color,transform] hover:text-text-positive focus-visible:text-primary-strong focus-visible:[&>svg]:scale-125 [&>svg]:size-3.5 [&>svg]:transition-transform`,onClick:B,children:(0,l.jsx)(o.XIcon,{"aria-hidden":`true`})})]}),P&&C&&R&&(0,l.jsx)(a.FieldError,{id:T,className:`mt-1`,errors:E.state.meta.errors}),(0,l.jsx)(a.FieldNote,{isShow:!!_,children:_})]})})]}),(0,l.jsx)(a.FieldSeparator,{})]})});p.displayName=`ComboboxField`,exports.ComboboxField=p;
+//# sourceMappingURL=combobox-field-ZYr7636s.cjs.map