@devalok/shilp-sutra 0.53.0 → 0.55.0

package/dist/ui/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Border tint per validation state, applied to the trigger. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-control',\n    'border border-surface-border-strong bg-surface-raised-hover',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"min-w-0 flex-1 truncate text-left text-surface-fg-subtle\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          <button\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n            id={externalId ?? fieldCtx.inputId}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // Explicit accessibleLabel wins. Inside a FormField, let the visible <Label>\n            // provide the name (via htmlFor); only fall back to placeholder when standalone.\n            aria-label={accessibleLabel ?? (fieldCtx.inputId ? undefined : placeholder)}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            disabled={disabled}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              open && 'border-accent-7',\n              state && stateBorderClasses[state],\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </button>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-subtle\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                <IconProvider size={resolvedIconSize}>\n                                  {normalizeIcon(option.icon)}\n                                </IconProvider>\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-body-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,KAAqE;CACzE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEa,IAA0B,EACrC;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAKM,IAA2D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAAyD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAmGM,IAAoB,GAGpB,IAAiB,IAEjB,IAAW,EAAM,YAEnB,EACE,YACA,UACA,kBACA,iBAAc,aACd,uBAAoB,aACpB,kBAAe,oBACf,cAAW,IACX,cAAW,IACX,eACA,sBACA,gBAAa,GACb,iBACA,oBACA,IAAI,GACJ,MAAM,IAAW,MACjB,OAAO,GACP,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAQ,KAAa,EAAM,SAAS,EAAE,GACvC,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAE,GAC3D,IAAiB,EAAM,OAAyB,IAAI,GACpD,IAAU,EAAM,OAAyB,IAAI,GAC7C,IAAiB,EAAM,MAAM,GAC7B,IAAY,EAAM,MAAM,GAExB,IAAiB,EAAM,cACvB,KAAiC,OAAa,CAAC,IAC/C,MAAM,QAAQ,CAAK,IAAU,IAC1B,CAAC,CAAK,GACZ,CAAC,CAAK,CAAC,GAEJ,IAAkB,EAAM,cAE1B,IACI,EAAQ,QAAQ,MACd,EAAE,MAAM,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC,CACrD,IACA,GACN,CAAC,GAAS,CAAM,CAClB,GAEM,KAAa,EAAM,aACtB,MAAwB,EAAe,SAAS,CAAW,GAC5D,CAAC,CAAc,CACjB,GAEM,IAAe,EAAM,aACxB,MAAwB;EACvB,AAAI,IAID,EAHgB,EAAe,SAAS,CAAW,IAChD,EAAe,QAAQ,MAAM,MAAM,CAAW,IAC9C,CAAC,GAAG,GAAgB,CAAW,CACmB,KAErD,EAA2C,CAAW,GACvD,EAAQ,EAAK;CAEjB,GACA;EAAC;EAAU;EAAgB;CAAa,CAC1C,GAEM,KAAmB,EAAM,aAC5B,GAAyB,MAAwB;EAI/C,AAHD,EAAE,gBAAgB,GAClB,EAAE,eAAe,GAEhB,EADgB,EAAe,QAAQ,MAAM,MAAM,CACN,CAAQ;CACxD,GACA,CAAC,GAAgB,CAAa,CAChC,GAEM,KAAmB,EAAM,aAC5B,MAAsB;EACjB,MACJ,EAAQ,CAAQ,GACX,MACH,EAAU,EAAE,GACZ,EAAoB,EAAE;CAE1B,GACA,CAAC,CAAQ,CACX;CAGA,EAAM,gBAAgB;EACpB,IAAI,GAAM;GAER,IAAM,IAAQ,iBAAiB;IAC7B,EAAe,SAAS,MAAM;GAChC,GAAG,CAAC;GACJ,aAAa,aAAa,CAAK;EACjC;CACF,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAuB,EAAM,aAChC,GAAsB,MAA8B;EACnD,IAAM,IAAM,EAAgB;EAC5B,IAAI,MAAQ,GAAG,OAAO;EAEtB,IAAI,IAAY,IAAe;EAC/B,OAAO,KAAa,KAAK,IAAY,IAAK;GACxC,IAAI,CAAC,EAAgB,EAAU,CAAC,UAAU,OAAO;GACjD,KAAa;EACf;EACA,OAAO;CACT,GACA,CAAC,CAAe,CAClB,GAEM,KAAgB,EAAM,aACzB,MAA2B;EAC1B,QAAQ,EAAE,KAAV;GACE,KAAK,aAAa;IAChB,EAAE,eAAe;IACjB,IAAM,IAAU,EAAqB,GAAkB,CAAC;IACxD,EAAoB,CAAO;IAC3B;GACF;GACA,KAAK,WAAW;IACd,EAAE,eAAe;IACjB,IAAM,IAAU,EAAqB,GAAkB,EAAE;IACzD,EAAoB,CAAO;IAC3B;GACF;GACA,KAAK,QAAQ;IACX,EAAE,eAAe;IACjB,IAAM,IAAe,EAAgB,WAAW,MAAM,CAAC,EAAE,QAAQ;IACjE,EAAoB,CAAY;IAChC;GACF;GACA,KAAK,OAAO;IACV,EAAE,eAAe;IACjB,IAAI,IAAc;IAClB,KAAK,IAAI,IAAI,EAAgB,SAAS,GAAG,KAAK,GAAG,KAC/C,IAAI,CAAC,EAAgB,EAAE,CAAC,UAAU;KAChC,IAAc;KACd;IACF;IAEF,EAAoB,CAAW;IAC/B;GACF;GACA,KAAK;IAEH,AADA,EAAE,eAAe,GAEf,KAAoB,KACpB,IAAmB,EAAgB,UACnC,CAAC,EAAgB,EAAiB,CAAC,YAEnC,EAAa,EAAgB,EAAiB,CAAC,KAAK;IAEtD;GAEF,KAAK;IAIH,AAHA,EAAE,eAAe,GACjB,EAAQ,EAAK,GACb,EAAU,EAAE,GACZ,EAAoB,EAAE;IACtB;EAEJ;CACF,GACA;EAAC;EAAkB;EAAiB;EAAsB;CAAY,CACxE;CAGA,EAAM,gBAAgB;EACpB,IAAI,KAAoB,KAAK,EAAQ,SAAS;GAC5C,IAAM,IAAW,EAAQ,QAAQ,SAAS;GAC1C,AAAI,KACF,EAAS,iBAAiB,EAAE,OAAO,UAAU,CAAC;EAElD;CACF,GAAG,CAAC,CAAgB,CAAC;CAErB,IAAM,KAAmB,EAAM,kBACzB,EAAe,WAAW,IAAU,OACzB,EAAQ,MAAM,MAAM,EAAE,UAAU,EAAe,EACvD,CAAA,EAAQ,SAAS,MACvB,CAAC,GAAgB,CAAO,CAAC,GAEtB,IAAmB,EAAY,IAC/B,KAAsB,EAAY,IAClC,KAAuB,EAAgB,IAEvC,WAA6B;EACjC,IAAI,KAAY,EAAe,SAAS,GAAG;GACzC,IAAM,IAAe,EAAe,MAAM,GAAG,CAAiB,GACxD,IAAY,EAAe,SAAS;GAE1C,OACE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,KAAK,MAAQ;KACzB,IAAM,IAAS,EAAQ,MAAM,MAAM,EAAE,UAAU,CAAG;KAElD,OADK,IAEH,kBAAC,QAAD;MAEE,WAAW,EAAG,wEAAwE,EAAmB;gBAF3G,CAIG,EAAO,OACR,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,UAAU,MAAM,GAAiB,GAAG,CAAG;OACvC,cAAY,UAAU,EAAO;OAC7B,UAAU;iBAEV,kBAAC,GAAD;QAAM,MAAM;QAAO,MAAM;OAAmB,CAAA;MACtC,CAAA,CACJ;QAbC,CAaD,IAhBY;IAkBtB,CAAC,GACA,IAAY,KACX,kBAAC,QAAD;KAAM,WAAW,EAAG,yBAAyB,EAAoB;eAAjE;MAAoE;MAChE;MAAU;KACR;MAEJ;;EAEV;EAEA,IAAI,CAAC,KAAY,EAAe,WAAW,GAAG;GAC5C,IAAM,IAAQ,GAAiB;GAC/B,IAAI,GACF,OAAO,kBAAC,QAAD;IAAM,WAAU;cAAqC;GAAY,CAAA;EAE5E;EAEA,OACE,kBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;CAEV,GAEM,IAAW,GAAa,GACxB,IAAQ,GAAkB,GAAW,EAAS,KAAK,GACnD,KAAU,MAAU,SACpB,KAAkB,EAAS,cAC3B,KAAe,EAAS;CAE9B,OACE,kBAAC,GAAD;EAA6B;EAAM,cAAc;YAC/C,kBAAC,OAAD;GAAK,WAAW,EAAG,YAAY,EAAS;GAAG,GAAI;aAA/C,CACA,kBAAC,GAAD;IAA0B,SAAA;IAAkB;cAC1C,kBAAC,UAAD;KACO;KACL,MAAK;KACL,MAAK;KAEL,IAAI,KAAc,EAAS;KAC3B,iBAAe;KACf,iBAAe;KACf,iBAAc;KAGd,cAAY,MAAoB,EAAS,UAAU,KAAA,IAAY;KAC/D,gBAAc,MAAW,KAAA;KACzB,oBAAkB;KAClB,iBAAe,MAAgB,KAAA;KACrB;KACV,WAAW,EACT,EAAwB,EAAE,QAAK,CAAC,GAChC,KAAQ,mBACR,KAAS,GAAmB,IAC5B,EACF;eArBF,CAuBG,GAAqB,GACtB,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAM;MAAkB,WAAW,EAAG,+FAA+F,KAAQ,YAAY;KAAI,CAAA,CACpL;;GACgB,CAAA,GAE1B,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAA;IACA,YAAY;IACZ,OAAM;IACN,kBAAkB,MAAM;KAEtB,AADA,EAAE,eAAe,GACjB,EAAe,SAAS,MAAM;IAChC;cAEA,kBAAC,GAAO,KAAR;KACE,SAAS;MAAE,SAAS;MAAG,OAAO;KAAK;KACnC,SAAS;MAAE,SAAS;MAAG,OAAO;KAAE;KAChC,YAAY;MAAE,GAAG,EAAQ;MAAQ,SAAS,EAAO;KAAK;KACtD,WAAW,EACT,qHACF;eANF,CASM,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAM,MAAM;OAAY,MAAK;OAAK,WAAU;MAAmC,CAAA,GAC/E,kBAAC,SAAD;OACE,KAAK;OACL,MAAK;OACL,WAAU;OACV,aAAa;OACb,OAAO;OACP,WAAW,MAAM;QAEf,AADA,EAAU,EAAE,OAAO,KAAK,GACxB,EAAoB,EAAE;OACxB;OACA,WAAW;OACX,qBAAkB;OAClB,iBAAe;OACf,yBACE,KAAoB,IAChB,GAAG,EAAe,UAAU,MAC5B,KAAA;OAEN,cAAW;MACZ,CAAA,CACE;SAGJ,EAAgB,WAAW,IAC1B,kBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,IAEL,kBAAC,MAAD;MACE,KAAK;MACL,IAAI;MACJ,MAAK;MACL,wBAAsB,KAAY,KAAA;MAClC,WAAU;MACV,OAAO,EAAE,WAAW,GAAG,IAAa,EAAe,IAAI;gBAEtD,EAAgB,KAAK,GAAQ,MAAU;OACtC,IAAM,IAAW,GAAW,EAAO,KAAK;OACxC,OACE,kBAAC,MAAD;QAEE,IAAI,GAAG,EAAe,UAAU;QAChC,MAAK;QACL,iBAAe;QACf,iBAAe,EAAO,YAAY,KAAA;QAClC,WAAW,EACT,iIACA,+DACA,MAAqB,KACnB,eACF,KAAY,kBACZ,EAAO,YACL,6CACJ;QACA,eAAe;SACb,AAAK,EAAO,YACV,EAAa,EAAO,KAAK;QAE7B;QACA,YAAY,MAAM;SAChB,AAAI,CAAC,EAAO,aAAa,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACtD,EAAE,eAAe,GACjB,EAAa,EAAO,KAAK;QAE7B;QACA,oBAAoB;SAClB,AAAK,EAAO,YACV,EAAoB,CAAK;QAE7B;kBA9BF;SAgCG,EAAO,QACN,kBAAC,QAAD;UAAM,WAAU;oBACd,kBAAC,IAAD;WAAc,MAAM;qBACjB,GAAc,EAAO,IAAI;UACd,CAAA;SACV,CAAA;SAER,kBAAC,QAAD;UAAM,WAAU;oBACb,IACC,EAAa,GAAQ,CAAQ,IAE7B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,GACzB,EAAO,eACN,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAO;UACJ,CAAA,CAER,EAAA,CAAA;SAEA,CAAA;SACL,KACC,kBAAC,GAAD;UAAM,MAAM;UAAW,MAAK;UAAK,WAAU;SAAY,CAAA;QAEvD;UAvDG,EAAO,KAuDV;MAER,CAAC;KACC,CAAA,CAEI;;GACQ,CAAA,EACH,CAAA,CACpB;;CACgB,CAAA;AAE3B,CACF;AACA,EAAS,cAAc"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Border tint per validation state, applied to the trigger. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-control',\n    'border border-surface-border-strong bg-surface-raised-hover',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    // Trigger is a div[role=combobox] (so chip remove-buttons in multi-select\n    // aren't nested in a <button>), so disabled styling keys off data-disabled,\n    // not the :disabled pseudo-class.\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"min-w-0 flex-1 truncate text-left text-surface-fg-subtle\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          {/* role=combobox on a <div>, NOT a <button> — a native button can't\n              legally contain the chip remove-<button>s rendered in multi-select\n              (invalid HTML + a11y break). This is the W3C select-only combobox\n              pattern. Radix Trigger wires click/toggle; we add the keyboard-open\n              (Enter/Space/ArrowDown) a real button would have given for free. */}\n          <div\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            data-disabled={disabled || undefined}\n            id={externalId}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            // The trigger is a div[role=combobox] — non-labellable, so `<Label htmlFor>`\n            // can't target it. Inside a FormField, adopt the label's id via\n            // aria-labelledby; explicit accessibleLabel wins; placeholder is the\n            // standalone fallback.\n            aria-labelledby={accessibleLabel ? undefined : fieldCtx.labelId}\n            aria-label={accessibleLabel ?? (fieldCtx.labelId ? undefined : placeholder)}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            onKeyDown={(e) => {\n              if (disabled) return\n              if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                e.preventDefault()\n                handleOpenChange(true)\n              }\n            }}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              'cursor-pointer',\n              open && 'border-accent-7',\n              state && stateBorderClasses[state],\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </div>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-subtle\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                <IconProvider size={resolvedIconSize}>\n                                  {normalizeIcon(option.icon)}\n                                </IconProvider>\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-body-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,KAAqE;CACzE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEa,IAA0B,EACrC;CACE;CACA;CACA;CACA;CAIA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAKM,IAA2D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAAyD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAmGM,IAAoB,GAGpB,IAAiB,IAEjB,IAAW,EAAM,YAEnB,EACE,YACA,UACA,kBACA,iBAAc,aACd,wBAAoB,aACpB,mBAAe,oBACf,cAAW,IACX,cAAW,IACX,eACA,sBACA,iBAAa,GACb,iBACA,oBACA,IAAI,GACJ,MAAM,IAAW,MACjB,OAAO,GACP,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAQ,KAAa,EAAM,SAAS,EAAE,GACvC,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAE,GAC3D,IAAiB,EAAM,OAAyB,IAAI,GACpD,IAAU,EAAM,OAAyB,IAAI,GAC7C,IAAiB,EAAM,MAAM,GAC7B,IAAY,EAAM,MAAM,GAExB,IAAiB,EAAM,cACvB,KAAiC,OAAa,CAAC,IAC/C,MAAM,QAAQ,CAAK,IAAU,IAC1B,CAAC,CAAK,GACZ,CAAC,CAAK,CAAC,GAEJ,IAAkB,EAAM,cAE1B,IACI,EAAQ,QAAQ,MACd,EAAE,MAAM,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC,CACrD,IACA,GACN,CAAC,GAAS,CAAM,CAClB,GAEM,KAAa,EAAM,aACtB,MAAwB,EAAe,SAAS,CAAW,GAC5D,CAAC,CAAc,CACjB,GAEM,IAAe,EAAM,aACxB,MAAwB;EACvB,AAAI,IAID,EAHgB,EAAe,SAAS,CAAW,IAChD,EAAe,QAAQ,MAAM,MAAM,CAAW,IAC9C,CAAC,GAAG,GAAgB,CAAW,CACmB,KAErD,EAA2C,CAAW,GACvD,EAAQ,EAAK;CAEjB,GACA;EAAC;EAAU;EAAgB;CAAa,CAC1C,GAEM,KAAmB,EAAM,aAC5B,GAAyB,MAAwB;EAI/C,AAHD,EAAE,gBAAgB,GAClB,EAAE,eAAe,GAEhB,EADgB,EAAe,QAAQ,MAAM,MAAM,CACN,CAAQ;CACxD,GACA,CAAC,GAAgB,CAAa,CAChC,GAEM,IAAmB,EAAM,aAC5B,MAAsB;EACjB,MACJ,EAAQ,CAAQ,GACX,MACH,EAAU,EAAE,GACZ,EAAoB,EAAE;CAE1B,GACA,CAAC,CAAQ,CACX;CAGA,EAAM,gBAAgB;EACpB,IAAI,GAAM;GAER,IAAM,IAAQ,iBAAiB;IAC7B,EAAe,SAAS,MAAM;GAChC,GAAG,CAAC;GACJ,aAAa,aAAa,CAAK;EACjC;CACF,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAuB,EAAM,aAChC,GAAsB,MAA8B;EACnD,IAAM,IAAM,EAAgB;EAC5B,IAAI,MAAQ,GAAG,OAAO;EAEtB,IAAI,IAAY,IAAe;EAC/B,OAAO,KAAa,KAAK,IAAY,IAAK;GACxC,IAAI,CAAC,EAAgB,EAAU,CAAC,UAAU,OAAO;GACjD,KAAa;EACf;EACA,OAAO;CACT,GACA,CAAC,CAAe,CAClB,GAEM,KAAgB,EAAM,aACzB,MAA2B;EAC1B,QAAQ,EAAE,KAAV;GACE,KAAK,aAAa;IAChB,EAAE,eAAe;IACjB,IAAM,IAAU,EAAqB,GAAkB,CAAC;IACxD,EAAoB,CAAO;IAC3B;GACF;GACA,KAAK,WAAW;IACd,EAAE,eAAe;IACjB,IAAM,IAAU,EAAqB,GAAkB,EAAE;IACzD,EAAoB,CAAO;IAC3B;GACF;GACA,KAAK,QAAQ;IACX,EAAE,eAAe;IACjB,IAAM,IAAe,EAAgB,WAAW,MAAM,CAAC,EAAE,QAAQ;IACjE,EAAoB,CAAY;IAChC;GACF;GACA,KAAK,OAAO;IACV,EAAE,eAAe;IACjB,IAAI,IAAc;IAClB,KAAK,IAAI,IAAI,EAAgB,SAAS,GAAG,KAAK,GAAG,KAC/C,IAAI,CAAC,EAAgB,EAAE,CAAC,UAAU;KAChC,IAAc;KACd;IACF;IAEF,EAAoB,CAAW;IAC/B;GACF;GACA,KAAK;IAEH,AADA,EAAE,eAAe,GAEf,KAAoB,KACpB,IAAmB,EAAgB,UACnC,CAAC,EAAgB,EAAiB,CAAC,YAEnC,EAAa,EAAgB,EAAiB,CAAC,KAAK;IAEtD;GAEF,KAAK;IAIH,AAHA,EAAE,eAAe,GACjB,EAAQ,EAAK,GACb,EAAU,EAAE,GACZ,EAAoB,EAAE;IACtB;EAEJ;CACF,GACA;EAAC;EAAkB;EAAiB;EAAsB;CAAY,CACxE;CAGA,EAAM,gBAAgB;EACpB,IAAI,KAAoB,KAAK,EAAQ,SAAS;GAC5C,IAAM,IAAW,EAAQ,QAAQ,SAAS;GAC1C,AAAI,KACF,EAAS,iBAAiB,EAAE,OAAO,UAAU,CAAC;EAElD;CACF,GAAG,CAAC,CAAgB,CAAC;CAErB,IAAM,IAAmB,EAAM,kBACzB,EAAe,WAAW,IAAU,OACzB,EAAQ,MAAM,MAAM,EAAE,UAAU,EAAe,EACvD,CAAA,EAAQ,SAAS,MACvB,CAAC,GAAgB,CAAO,CAAC,GAEtB,IAAmB,EAAY,IAC/B,KAAsB,EAAY,IAClC,KAAuB,EAAgB,IAEvC,WAA6B;EACjC,IAAI,KAAY,EAAe,SAAS,GAAG;GACzC,IAAM,IAAe,EAAe,MAAM,GAAG,CAAiB,GACxD,IAAY,EAAe,SAAS;GAE1C,OACE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,KAAK,MAAQ;KACzB,IAAM,IAAS,EAAQ,MAAM,MAAM,EAAE,UAAU,CAAG;KAElD,OADK,IAEH,kBAAC,QAAD;MAEE,WAAW,EAAG,wEAAwE,EAAmB;gBAF3G,CAIG,EAAO,OACR,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;OACV,UAAU,MAAM,GAAiB,GAAG,CAAG;OACvC,cAAY,UAAU,EAAO;OAC7B,UAAU;iBAEV,kBAAC,GAAD;QAAM,MAAM;QAAO,MAAM;OAAmB,CAAA;MACtC,CAAA,CACJ;QAbC,CAaD,IAhBY;IAkBtB,CAAC,GACA,IAAY,KACX,kBAAC,QAAD;KAAM,WAAW,EAAG,yBAAyB,EAAoB;eAAjE;MAAoE;MAChE;MAAU;KACR;MAEJ;;EAEV;EAEA,IAAI,CAAC,KAAY,EAAe,WAAW,GAAG;GAC5C,IAAM,IAAQ,EAAiB;GAC/B,IAAI,GACF,OAAO,kBAAC,QAAD;IAAM,WAAU;cAAqC;GAAY,CAAA;EAE5E;EAEA,OACE,kBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;CAEV,GAEM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,KAAU,MAAU,SACpB,KAAkB,EAAS,cAC3B,KAAe,EAAS;CAE9B,OACE,kBAAC,IAAD;EAA6B;EAAM,cAAc;YAC/C,kBAAC,OAAD;GAAK,WAAW,EAAG,YAAY,EAAS;GAAG,GAAI;aAA/C,CACA,kBAAC,IAAD;IAA0B,SAAA;IAAkB;cAM1C,kBAAC,OAAD;KACO;KACL,MAAK;KACL,UAAU,IAAW,KAAK;KAC1B,iBAAe,KAAY,KAAA;KAC3B,IAAI;KACJ,iBAAe;KACf,iBAAe;KACf,iBAAc;KACd,iBAAe,KAAY,KAAA;KAK3B,mBAAiB,IAAkB,KAAA,IAAY,EAAS;KACxD,cAAY,MAAoB,EAAS,UAAU,KAAA,IAAY;KAC/D,gBAAc,MAAW,KAAA;KACzB,oBAAkB;KAClB,iBAAe,MAAgB,KAAA;KAC/B,YAAY,MAAM;MACZ,MACA,EAAE,QAAQ,WAAW,EAAE,QAAQ,OAAO,EAAE,QAAQ,iBAClD,EAAE,eAAe,GACjB,EAAiB,EAAI;KAEzB;KACA,WAAW,EACT,EAAwB,EAAE,QAAK,CAAC,GAChC,kBACA,KAAQ,mBACR,KAAS,GAAmB,IAC5B,EACF;eAhCF,CAkCG,GAAqB,GACtB,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAM;MAAkB,WAAW,EAAG,+FAA+F,KAAQ,YAAY;KAAI,CAAA,CACvL;;GACmB,CAAA,GAE1B,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAA;IACA,YAAY;IACZ,OAAM;IACN,kBAAkB,MAAM;KAEtB,AADA,EAAE,eAAe,GACjB,EAAe,SAAS,MAAM;IAChC;cAEA,kBAAC,GAAO,KAAR;KACE,SAAS;MAAE,SAAS;MAAG,OAAO;KAAK;KACnC,SAAS;MAAE,SAAS;MAAG,OAAO;KAAE;KAChC,YAAY;MAAE,GAAG,EAAQ;MAAQ,SAAS,EAAO;KAAK;KACtD,WAAW,EACT,qHACF;eANF,CASM,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAM,MAAM;OAAY,MAAK;OAAK,WAAU;MAAmC,CAAA,GAC/E,kBAAC,SAAD;OACE,KAAK;OACL,MAAK;OACL,WAAU;OACV,aAAa;OACb,OAAO;OACP,WAAW,MAAM;QAEf,AADA,EAAU,EAAE,OAAO,KAAK,GACxB,EAAoB,EAAE;OACxB;OACA,WAAW;OACX,qBAAkB;OAClB,iBAAe;OACf,yBACE,KAAoB,IAChB,GAAG,EAAe,UAAU,MAC5B,KAAA;OAEN,cAAW;MACZ,CAAA,CACE;SAGJ,EAAgB,WAAW,IAC1B,kBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,IAEL,kBAAC,MAAD;MACE,KAAK;MACL,IAAI;MACJ,MAAK;MACL,wBAAsB,KAAY,KAAA;MAClC,WAAU;MACV,OAAO,EAAE,WAAW,GAAG,KAAa,EAAe,IAAI;gBAEtD,EAAgB,KAAK,GAAQ,MAAU;OACtC,IAAM,IAAW,GAAW,EAAO,KAAK;OACxC,OACE,kBAAC,MAAD;QAEE,IAAI,GAAG,EAAe,UAAU;QAChC,MAAK;QACL,iBAAe;QACf,iBAAe,EAAO,YAAY,KAAA;QAClC,WAAW,EACT,iIACA,+DACA,MAAqB,KACnB,eACF,KAAY,kBACZ,EAAO,YACL,6CACJ;QACA,eAAe;SACb,AAAK,EAAO,YACV,EAAa,EAAO,KAAK;QAE7B;QACA,YAAY,MAAM;SAChB,AAAI,CAAC,EAAO,aAAa,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACtD,EAAE,eAAe,GACjB,EAAa,EAAO,KAAK;QAE7B;QACA,oBAAoB;SAClB,AAAK,EAAO,YACV,EAAoB,CAAK;QAE7B;kBA9BF;SAgCG,EAAO,QACN,kBAAC,QAAD;UAAM,WAAU;oBACd,kBAAC,GAAD;WAAc,MAAM;qBACjB,EAAc,EAAO,IAAI;UACd,CAAA;SACV,CAAA;SAER,kBAAC,QAAD;UAAM,WAAU;oBACb,IACC,EAAa,GAAQ,CAAQ,IAE7B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,GACzB,EAAO,eACN,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAO;UACJ,CAAA,CAER,EAAA,CAAA;SAEA,CAAA;SACL,KACC,kBAAC,GAAD;UAAM,MAAM;UAAW,MAAK;UAAK,WAAU;SAAY,CAAA;QAEvD;UAvDG,EAAO,KAuDV;MAER,CAAC;KACC,CAAA,CAEI;;GACQ,CAAA,EACH,CAAA,CACpB;;CACgB,CAAA;AAE3B,CACF;AACA,EAAS,cAAc"}

package/dist/ui/context-menu.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import * as ContextMenuPrimitive from '../primitives/react-context-menu';
+import * as ContextMenuPrimitive from '../primitives/react-context-menu.js';
 import * as React from "react";
 declare const ContextMenu: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>>;
 declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/ui/context-menu.js

@@ -1,8 +1,8 @@
 "use client";
-import { CheckboxItem2$2 as e, Content2$5 as t, Group2$2 as n, Item2$3 as r, ItemIndicator2$2 as i, Label2$2 as a, Portal2$2 as o, RadioGroup2$2 as s, RadioItem2$2 as c, Root2$7 as l, Separator2$2 as u, Sub2$2 as d, SubContent2$2 as f, SubTrigger2$2 as p, Trigger$7 as m } from "../_chunks/primitives.js";
-import { springs as h, tweens as g } from "./lib/motion.js";
-import { cn as _ } from "./lib/utils.js";
-import { Icon as v } from "./icon.js";
+import { springs as e, tweens as t } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
+import { Icon as r } from "./icon.js";
+import { CheckboxItem2 as i, Content2 as a, Group2 as o, Item2 as s, ItemIndicator2 as c, Label2 as l, Portal2 as u, RadioGroup2 as d, RadioItem2 as f, Root2 as p, Separator2 as m, Sub2 as h, SubContent2 as g, SubTrigger2 as _, Trigger as v } from "../_chunks/primitives/react-context-menu.js";
 import * as y from "react";
 import { jsx as b, jsxs as x } from "react/jsx-runtime";
 import { IconCheck as S, IconChevronRight as C, IconCircle as w } from "@tabler/icons-react";
@@ -14,20 +14,20 @@ var D = y.createContext(!1), O = y.createContext(!1), k = ({ onOpenChange: e, ..
 	}, [e]);
 	return /* @__PURE__ */ b(D.Provider, {
 		value: n,
-		children: /* @__PURE__ */ b(l, {
+		children: /* @__PURE__ */ b(p, {
 			onOpenChange: i,
 			...t
 		})
 	});
 };
 k.displayName = "ContextMenu";
-var A = m, j = n, M = o, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
+var A = v, j = o, M = u, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
 	let [i, a] = y.useState(t), o = e !== void 0, s = o ? e : i, c = y.useCallback((e) => {
 		o || a(e), n?.(e);
 	}, [o, n]);
 	return /* @__PURE__ */ b(O.Provider, {
 		value: s,
-		children: /* @__PURE__ */ b(d, {
+		children: /* @__PURE__ */ b(h, {
 			open: s,
 			onOpenChange: c,
 			...r
@@ -35,22 +35,22 @@ var A = m, j = n, M = o, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, .
 	});
 };
 N.displayName = "ContextMenuSub";
-var P = s, F = y.forwardRef(({ className: e, inset: t, children: n, ...r }, i) => /* @__PURE__ */ x(p, {
-	ref: i,
-	className: _("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
-	...r,
-	children: [n, /* @__PURE__ */ b(v, {
+var P = d, F = y.forwardRef(({ className: e, inset: t, children: i, ...a }, o) => /* @__PURE__ */ x(_, {
+	ref: o,
+	className: n("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
+	...a,
+	children: [i, /* @__PURE__ */ b(r, {
 		icon: C,
 		size: "sm",
 		className: "ml-auto"
 	})]
 }));
-F.displayName = p.displayName;
-var I = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ b(T, { children: y.useContext(O) && /* @__PURE__ */ b(f, {
-	ref: r,
+F.displayName = _.displayName;
+var I = y.forwardRef(({ className: r, children: i, ...a }, o) => /* @__PURE__ */ b(T, { children: y.useContext(O) && /* @__PURE__ */ b(g, {
+	ref: o,
 	forceMount: !0,
 	asChild: !0,
-	...n,
+	...a,
 	children: /* @__PURE__ */ b(E.div, {
 		initial: {
 			opacity: 0,
@@ -65,21 +65,21 @@ var I = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */
 			scale: .95
 		},
 		transition: {
-			...h.snappy,
-			opacity: g.fade
+			...e.snappy,
+			opacity: t.fade
 		},
-		className: _("z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
-		children: t
+		className: n("z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", r),
+		children: i
 	})
 }) }));
-I.displayName = f.displayName;
-var L = y.forwardRef(({ className: e, children: n, ...r }, i) => /* @__PURE__ */ b(T, { children: y.useContext(D) && /* @__PURE__ */ b(o, {
+I.displayName = g.displayName;
+var L = y.forwardRef(({ className: r, children: i, ...o }, s) => /* @__PURE__ */ b(T, { children: y.useContext(D) && /* @__PURE__ */ b(u, {
 	forceMount: !0,
-	children: /* @__PURE__ */ b(t, {
-		ref: i,
+	children: /* @__PURE__ */ b(a, {
+		ref: s,
 		forceMount: !0,
 		asChild: !0,
-		...r,
+		...o,
 		children: /* @__PURE__ */ b(E.div, {
 			initial: {
 				opacity: 0,
@@ -94,63 +94,63 @@ var L = y.forwardRef(({ className: e, children: n, ...r }, i) => /* @__PURE__ */
 				scale: .95
 			},
 			transition: {
-				...h.snappy,
-				opacity: g.fade
+				...e.snappy,
+				opacity: t.fade
 			},
-			className: _("z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
-			children: n
+			className: n("z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", r),
+			children: i
 		})
 	})
 }) }));
-L.displayName = t.displayName;
-var R = y.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ b(r, {
+L.displayName = a.displayName;
+var R = y.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ b(s, {
 	ref: i,
-	className: _("relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
-	...n
+	className: n("relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
+	...r
 }));
-R.displayName = r.displayName;
-var z = y.forwardRef(({ className: t, children: n, checked: r, ...a }, o) => /* @__PURE__ */ x(e, {
-	ref: o,
-	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
-	checked: r,
-	...a,
+R.displayName = s.displayName;
+var z = y.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /* @__PURE__ */ x(i, {
+	ref: s,
+	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	checked: a,
+	...o,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(v, {
+		children: /* @__PURE__ */ b(c, { children: /* @__PURE__ */ b(r, {
 			icon: S,
 			size: "sm"
 		}) })
-	}), n]
+	}), t]
 }));
-z.displayName = e.displayName;
-var B = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ x(c, {
-	ref: r,
-	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
-	...n,
+z.displayName = i.displayName;
+var B = y.forwardRef(({ className: e, children: t, ...i }, a) => /* @__PURE__ */ x(f, {
+	ref: a,
+	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	...i,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(v, {
+		children: /* @__PURE__ */ b(c, { children: /* @__PURE__ */ b(r, {
 			icon: w,
 			size: "sm",
 			className: "fill-current"
 		}) })
 	}), t]
 }));
-B.displayName = c.displayName;
-var V = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(a, {
-	ref: r,
-	className: _("px-ds-03 py-ds-02b text-body-md font-semibold text-surface-fg", t && "pl-ds-07", e),
-	...n
+B.displayName = f.displayName;
+var V = y.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ b(l, {
+	ref: i,
+	className: n("px-ds-03 py-ds-02b text-body-md font-semibold text-surface-fg", t && "pl-ds-07", e),
+	...r
 }));
-V.displayName = a.displayName;
-var H = y.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ b(u, {
-	ref: n,
-	className: _("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
+V.displayName = l.displayName;
+var H = y.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ b(m, {
+	ref: r,
+	className: n("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
 	...t
 }));
-H.displayName = u.displayName;
+H.displayName = m.displayName;
 var U = ({ className: e, ...t }) => /* @__PURE__ */ b("span", {
-	className: _("ml-auto text-body-sm text-surface-fg-subtle", e),
+	className: n("ml-auto text-body-sm text-surface-fg-subtle", e),
 	...t
 });
 U.displayName = "ContextMenuShortcut";

package/dist/ui/data-table-body.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { VirtualItem } from '@tanstack/react-virtual';
 import { default as React } from 'react';
 export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResultsText, emptyState, virtualItems, totalVirtualSize, }: {

package/dist/ui/data-table-bulk-actions.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { Table } from '@tanstack/react-table';
 import { default as React } from 'react';
 /** Bulk action definition for the floating action bar */

package/dist/ui/data-table-card.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { default as React } from 'react';
 export declare function DataTableCards<TData>({ loading, skeletonRowCount, noResultsText, emptyState, }: {
     loading?: boolean;

package/dist/ui/data-table-context.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { ColumnPinningState, Table } from '@tanstack/react-table';
 import { default as React } from 'react';
 /** Editing state: which cell is currently in edit mode */

package/dist/ui/data-table-header.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { default as React } from 'react';
 /**
  * Renders the `<TableHeader>` block including sortable column headers

package/dist/ui/data-table-pagination.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { Table } from '@tanstack/react-table';
 import { default as React } from 'react';
 /**

package/dist/ui/data-table-toolbar.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { Table } from '@tanstack/react-table';
 import * as React from 'react';
 export type Density = 'compact' | 'standard' | 'comfortable';

package/dist/ui/data-table.d.ts

@@ -1,9 +1,8 @@
-"use client";
 import { ColumnDef, RowData } from '@tanstack/react-table';
 import { default as React } from 'react';
-import { BulkAction } from './data-table-bulk-actions';
-import { Density } from './data-table-toolbar';
-export type { BulkAction } from './data-table-bulk-actions';
+import { BulkAction } from './data-table-bulk-actions.js';
+import { Density } from './data-table-toolbar.js';
+export type { BulkAction } from './data-table-bulk-actions.js';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         align?: 'left' | 'center' | 'right';

package/dist/ui/devalok-grain.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import * as React from 'react';
 export type GrainIntensity = 'subtle' | 'medium' | 'heavy';
 export interface DevalokGrainProps {

package/dist/ui/dialog.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import * as DialogPrimitive from '../primitives/react-dialog';
+import * as DialogPrimitive from '../primitives/react-dialog.js';
 import * as React from 'react';
 /**
  * Dialog compound component — accessible modal overlay with focus trap and Escape dismissal.

package/dist/ui/dialog.js

@@ -1,8 +1,8 @@
 "use client";
-import { Close as e, Content$2 as t, Description as n, Overlay as r, Portal$4 as i, Root$8 as a, Title as o, Trigger$9 as s } from "../_chunks/primitives.js";
-import { springs as c, tweens as l } from "./lib/motion.js";
-import { cn as u } from "./lib/utils.js";
-import { Icon as d } from "./icon.js";
+import { springs as e, tweens as t } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
+import { Icon as r } from "./icon.js";
+import { Close as i, Content as a, Description as o, Overlay as s, Portal as c, Root as l, Title as u, Trigger as d } from "../_chunks/primitives/react-alert-dialog.js";
 import { useIsMobile as f } from "../hooks/use-mobile.js";
 import { useControllableOpen as p } from "../_chunks/use-controllable-open.js";
 import * as m from "react";
@@ -11,31 +11,31 @@ import { IconX as _ } from "@tabler/icons-react";
 import { AnimatePresence as v, motion as y } from "framer-motion";
 //#region src/ui/dialog.tsx
 var b = m.createContext({ open: !1 }), x = () => m.useContext(b), S = ({ open: e, defaultOpen: t, onOpenChange: n, ...r }) => {
-	let { open: i, setOpen: o } = p({
+	let { open: i, setOpen: a } = p({
 		open: e,
 		defaultOpen: t,
 		onOpenChange: n
-	}), s = m.useMemo(() => ({ open: i }), [i]);
+	}), o = m.useMemo(() => ({ open: i }), [i]);
 	return /* @__PURE__ */ h(b.Provider, {
-		value: s,
-		children: /* @__PURE__ */ h(a, {
+		value: o,
+		children: /* @__PURE__ */ h(l, {
 			open: i,
-			onOpenChange: o,
+			onOpenChange: a,
 			...r
 		})
 	});
 };
 S.displayName = "Dialog";
-var C = s, w = i, T = e, E = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(r, {
-	ref: n,
+var C = d, w = c, T = i, E = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h(s, {
+	ref: r,
 	forceMount: !0,
-	className: u("fixed inset-0 z-overlay bg-overlay", e),
+	className: n("fixed inset-0 z-overlay bg-overlay", e),
 	...t
 }));
-E.displayName = r.displayName;
-var D = m.forwardRef(({ className: n, children: r, responsive: i, ...a }, o) => {
-	let { open: s } = x(), p = f(), m = i !== !1 && p;
-	return /* @__PURE__ */ h(v, { children: s && /* @__PURE__ */ g(w, {
+E.displayName = s.displayName;
+var D = m.forwardRef(({ className: o, children: s, responsive: c, ...l }, u) => {
+	let { open: d } = x(), p = f(), m = c !== !1 && p;
+	return /* @__PURE__ */ h(v, { children: d && /* @__PURE__ */ g(w, {
 		forceMount: !0,
 		children: [/* @__PURE__ */ h(E, {
 			asChild: !0,
@@ -43,13 +43,13 @@ var D = m.forwardRef(({ className: n, children: r, responsive: i, ...a }, o) =>
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				exit: { opacity: 0 },
-				transition: l.fade
+				transition: t.fade
 			})
-		}), /* @__PURE__ */ h(t, {
-			ref: o,
+		}), /* @__PURE__ */ h(a, {
+			ref: u,
 			forceMount: !0,
 			asChild: !0,
-			...a,
+			...l,
 			children: /* @__PURE__ */ g(y.div, {
 				initial: m ? { y: "100%" } : {
 					opacity: 0,
@@ -69,15 +69,15 @@ var D = m.forwardRef(({ className: n, children: r, responsive: i, ...a }, o) =>
 					x: "-50%",
 					y: "-50%"
 				},
-				transition: m ? c.smooth : {
-					...c.smooth,
-					opacity: l.fade
+				transition: m ? e.smooth : {
+					...e.smooth,
+					opacity: t.fade
 				},
-				className: u("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", i === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", n),
-				children: [r, /* @__PURE__ */ g(e, {
+				className: n("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", c === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", o),
+				children: [s, /* @__PURE__ */ g(i, {
 					title: "Close",
 					className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
-					children: [/* @__PURE__ */ h(d, {
+					children: [/* @__PURE__ */ h(r, {
 						icon: _,
 						size: "lg"
 					}), /* @__PURE__ */ h("span", {
@@ -89,36 +89,36 @@ var D = m.forwardRef(({ className: n, children: r, responsive: i, ...a }, o) =>
 		})]
 	}) });
 });
-D.displayName = t.displayName;
-var O = m.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ h(t, {
+D.displayName = a.displayName;
+var O = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h(a, {
 	ref: r,
-	className: u(e),
-	...n
+	className: n(e),
+	...t
 }));
 O.displayName = "DialogContentRaw";
-var k = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h("div", {
-	ref: n,
-	className: u("flex flex-col space-y-ds-02b text-center sm:text-left", e),
+var k = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h("div", {
+	ref: r,
+	className: n("flex flex-col space-y-ds-02b text-center sm:text-left", e),
 	...t
 }));
 k.displayName = "DialogHeader";
-var A = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h("div", {
-	ref: n,
-	className: u("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
+var A = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h("div", {
+	ref: r,
+	className: n("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
 	...t
 }));
 A.displayName = "DialogFooter";
-var j = m.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ h(o, {
-	ref: n,
-	className: u("text-heading-xs font-semibold", e),
+var j = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h(u, {
+	ref: r,
+	className: n("text-heading-xs font-semibold", e),
 	...t
 }));
-j.displayName = o.displayName;
-var M = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h(n, {
+j.displayName = u.displayName;
+var M = m.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ h(o, {
 	ref: r,
-	className: u("text-body-md text-surface-fg-muted", e),
+	className: n("text-body-md text-surface-fg-muted", e),
 	...t
 }));
-M.displayName = n.displayName;
+M.displayName = o.displayName;
 //#endregion
 export { S as Dialog, T as DialogClose, D as DialogContent, O as DialogContentRaw, M as DialogDescription, A as DialogFooter, k as DialogHeader, E as DialogOverlay, w as DialogPortal, j as DialogTitle, C as DialogTrigger };

package/dist/ui/dot.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export type DotColor = 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current';

package/dist/ui/dropdown-menu.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import * as DropdownMenuPrimitive from '../primitives/react-dropdown-menu';
+import * as DropdownMenuPrimitive from '../primitives/react-dropdown-menu.js';
 import * as React from 'react';
 /**
  * DropdownMenu compound component — accessible floating menu triggered by a button, with full