@devalok/shilp-sutra 0.49.3 → 0.49.5

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-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-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-ds-xs',\n  sm: 'px-ds-02 py-0 text-ds-xs',\n  md: 'px-ds-03 py-[1px] text-ds-sm',\n  lg: 'px-ds-03 py-[2px] text-ds-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-ds-xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-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      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            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-label={accessibleLabel ?? 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-ds-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-ds-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-ds-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-ds-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":"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"}
+{"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-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-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-ds-xs',\n  sm: 'px-ds-02 py-0 text-ds-xs',\n  md: 'px-ds-03 py-[1px] text-ds-sm',\n  lg: 'px-ds-03 py-[2px] text-ds-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-ds-xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-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-ds-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-ds-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-ds-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-ds-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,+HACA,+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"}

package/dist/ui/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../src/ui/container.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype ContainerProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  maxWidth?: 'default' | 'body' | 'full'\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst maxWidthMap = {\n  default: 'max-w-layout',\n  body: 'max-w-layout-body',\n  full: 'max-w-full',\n} as const\n\n// Polymorphic component type — preserves T across the call site so element-\n// specific props (e.g. `<Container as=\"main\">` accepting <main> props)\n// typecheck. Standard polymorphic-component pattern; see text.tsx + stack.tsx.\ntype ContainerComponent = (<T extends React.ElementType = 'div'>(\n  props: ContainerProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n) => React.ReactElement | null) & { displayName?: string }\n\nconst ContainerImpl = React.forwardRef<HTMLElement, ContainerProps>(\n  ({ as, maxWidth = 'default', className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn('mx-auto w-full px-page-x', maxWidthMap[maxWidth], className),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nContainerImpl.displayName = 'Container'\n\nconst Container = ContainerImpl as unknown as ContainerComponent\n\nexport { Container, type ContainerProps }\n"],"mappings":";;;AAYA,IAAM,IAAc;CAClB,SAAS;CACT,MAAM;CACN,MAAM;CACP,EASK,IAAgB,EAAM,YACzB,EAAE,OAAI,cAAW,WAAW,cAAW,aAAU,GAAG,KAAS,MAAQ;CACpE,IAAM,IAAY,KAAM;AACxB,QAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EAAG,4BAA4B,EAAY,IAAW,EAAU;EAC3E,GAAG;EACJ,EACD,EACD;EAEJ;AACD,EAAc,cAAc;AAE5B,IAAM,IAAY"}
+{"version":3,"file":"container.js","names":[],"sources":["../../src/ui/container.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype ContainerProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  maxWidth?: 'default' | 'body' | 'full'\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst maxWidthMap = {\n  default: 'max-w-layout',\n  body: 'max-w-layout-body',\n  full: 'max-w-full',\n} as const\n\n// Polymorphic component type — preserves T across the call site so element-\n// specific props (e.g. `<Container as=\"main\">` accepting <main> props)\n// typecheck. Standard polymorphic-component pattern; see text.tsx + stack.tsx.\ntype ContainerComponent = (<T extends React.ElementType = 'div'>(\n  props: ContainerProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n) => React.ReactElement | null) & { displayName?: string }\n\nconst ContainerImpl = React.forwardRef<HTMLElement, ContainerProps>(\n  ({ as, maxWidth = 'default', className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn('mx-auto w-full px-page-x', maxWidthMap[maxWidth], className),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nContainerImpl.displayName = 'Container'\n\nconst Container = ContainerImpl as unknown as ContainerComponent\n\nexport { Container, type ContainerProps }\n"],"mappings":";;;AAYA,IAAM,IAAc;CAClB,SAAS;CACT,MAAM;CACN,MAAM;AACR,GASM,IAAgB,EAAM,YACzB,EAAE,OAAI,cAAW,WAAW,cAAW,aAAU,GAAG,KAAS,MAAQ;CACpE,IAAM,IAAY,KAAM;CACxB,OAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EAAG,4BAA4B,EAAY,IAAW,CAAS;EAC1E,GAAG;CACL,GACA,CACF;AACF,CACF;AACA,EAAc,cAAc;AAE5B,IAAM,IAAY"}

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

@@ -1,5 +1,5 @@
 "use client";
-import * as ContextMenuPrimitive from "../primitives/react-context-menu";
+import * as ContextMenuPrimitive from '../primitives/react-context-menu';
 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>>;
@@ -22,7 +22,7 @@ declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenu
 } & React.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
     displayName: string;
 };
 export type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;

package/dist/ui/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from \"@primitives/react-context-menu\"\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\n// ── Internal contexts to thread open state ──\n\nconst ContextMenuOpenContext = React.createContext(false)\nconst ContextMenuSubOpenContext = React.createContext(false)\n\nconst ContextMenu: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>> = ({\n  onOpenChange,\n  ...props\n}) => {\n  const [open, setOpen] = React.useState(false)\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      setOpen(value)\n      onOpenChange?.(value)\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <ContextMenuOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Root onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuOpenContext.Provider>\n  )\n}\nContextMenu.displayName = 'ContextMenu'\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <ContextMenuSubOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuSubOpenContext.Provider>\n  )\n}\nContextMenuSub.displayName = 'ContextMenuSub'\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              \"z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n              className\n            )}\n          >\n            {children}\n          </motion.div>\n        </ContextMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.Portal forceMount>\n          <ContextMenuPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                \"z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n                className\n              )}\n            >\n              {children}\n            </motion.div>\n          </ContextMenuPrimitive.Content>\n        </ContextMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCircle} size=\"sm\" className=\"fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-ds-03 py-ds-02b text-ds-md font-semibold text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-ds-01 my-ds-02 h-px bg-surface-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-ds-sm text-surface-fg-subtle\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\nexport type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from \"@primitives/react-context-menu\"\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\n// ── Internal contexts to thread open state ──\n\nconst ContextMenuOpenContext = React.createContext(false)\nconst ContextMenuSubOpenContext = React.createContext(false)\n\nconst ContextMenu: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>> = ({\n  onOpenChange,\n  ...props\n}) => {\n  const [open, setOpen] = React.useState(false)\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      setOpen(value)\n      onOpenChange?.(value)\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <ContextMenuOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Root onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuOpenContext.Provider>\n  )\n}\nContextMenu.displayName = 'ContextMenu'\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <ContextMenuSubOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuSubOpenContext.Provider>\n  )\n}\nContextMenuSub.displayName = 'ContextMenuSub'\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              \"z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n              className\n            )}\n          >\n            {children}\n          </motion.div>\n        </ContextMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.Portal forceMount>\n          <ContextMenuPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                \"z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n                className\n              )}\n            >\n              {children}\n            </motion.div>\n          </ContextMenuPrimitive.Content>\n        </ContextMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCircle} size=\"sm\" className=\"fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-ds-03 py-ds-02b text-ds-md font-semibold text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-ds-01 my-ds-02 h-px bg-surface-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-ds-sm text-surface-fg-subtle\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\nexport type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}\n"],"mappings":"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"}

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

@@ -8,5 +8,5 @@ export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResu
     emptyState?: React.ReactNode;
     virtualItems?: VirtualItem[];
     totalVirtualSize?: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=data-table-body.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,KAAmD,MAAM,OAAO,CAAA;AA6QvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,2CAmEA"}
+{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,KAAmD,MAAM,OAAO,CAAA;AA6QvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,qBAmEA"}

package/dist/ui/data-table-body.js

@@ -82,7 +82,7 @@ function C({ row: t, style: n }) {
 				className: "bg-surface-base p-0",
 				children: /* @__PURE__ */ h(v.div, {
 					className: "overflow-hidden",
-					initial: u ? !1 : {
+					initial: !u && {
 						height: 0,
 						opacity: 0
 					},

package/dist/ui/data-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-raised-hover',\n        'px-ds-02 text-ds-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    virtualRows,\n    onRowClick,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      style={style}\n      className={cn(\n        virtualRows ? 'absolute w-full flex' : undefined,\n        onRowClick && 'cursor-pointer',\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              virtualRows && 'flex-1',\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // Virtual rows are absolutely positioned with measured heights — a height\n  // animation would fight the virtualizer, so the reveal is instant there.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow style={style} className=\"absolute w-full flex\">\n        <TableCell\n          colSpan={allColumns.length}\n          className=\"bg-surface-base p-ds-05 flex-1\"\n        >\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow style={style}>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-raised would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    return (\n      <TableBody\n        style={{\n          height: `${totalVirtualSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          return (\n            <DataTableRow\n              key={row.id}\n              row={row}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: `${virtualRow.size}px`,\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            />\n          )\n        })}\n      </TableBody>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-raised-hover',\n        'px-ds-02 text-ds-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    virtualRows,\n    onRowClick,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      style={style}\n      className={cn(\n        virtualRows ? 'absolute w-full flex' : undefined,\n        onRowClick && 'cursor-pointer',\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              virtualRows && 'flex-1',\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // Virtual rows are absolutely positioned with measured heights — a height\n  // animation would fight the virtualizer, so the reveal is instant there.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow style={style} className=\"absolute w-full flex\">\n        <TableCell\n          colSpan={allColumns.length}\n          className=\"bg-surface-base p-ds-05 flex-1\"\n        >\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow style={style}>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-raised would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    return (\n      <TableBody\n        style={{\n          height: `${totalVirtualSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          return (\n            <DataTableRow\n              key={row.id}\n              row={row}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: `${virtualRow.size}px`,\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            />\n          )\n        })}\n      </TableBody>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 "use client";
 import { Table } from '@tanstack/react-table';
+import { default as React } from 'react';
 /** Bulk action definition for the floating action bar */
 export interface BulkAction<TData> {
     label: string;
@@ -15,5 +16,5 @@ export declare function DataTableBulkActions<TData>({ table, selectedRows, bulkA
     table: Table<TData>;
     selectedRows: TData[];
     bulkActions: BulkAction<TData>[];
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=data-table-bulk-actions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAOlD,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;CACjC,2CA0CA"}
+{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;CACjC,qBA0CA"}

package/dist/ui/data-table-bulk-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n}) {\n  return (\n    <div\n      className={cn(\n        'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky',\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n        'animate-in slide-in-from-bottom-2',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-ds-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-raised transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,EAA4B,EAC1C,UACA,iBACA,kBAKC;AACD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,qDACA,iDACA,sDACA,oCACD;EACD,MAAK;EACL,cAAW;YARb;GAUE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,YAChB;;GACP,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;IAAS,CAAA;GAChE,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,eAAe,EAAO,QAAQ,EAAa;cAE1C,EAAO;IACD,EARF,EAAO,MAQL,CACT;GACF,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,mBAAmB;IACxC,cAAW;IACX,WAAW,EACT,4CACA,mEACA,8CACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;KAAO,CAAA;IACxB,CAAA;GACL"}
+{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n}) {\n  return (\n    <div\n      className={cn(\n        'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky',\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n        'animate-in slide-in-from-bottom-2',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-ds-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-raised transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,EAA4B,EAC1C,UACA,iBACA,kBAKC;CACD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,qDACA,iDACA,sDACA,mCACF;EACA,MAAK;EACL,cAAW;YARb;GAUE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,WACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;GAAQ,CAAA;GAC/D,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,eAAe,EAAO,QAAQ,CAAY;cAEzC,EAAO;GACF,GARD,EAAO,KAQN,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,kBAAkB;IACvC,cAAW;IACX,WAAW,EACT,4CACA,mEACA,6CACF;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EACL;;AAET"}

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

@@ -5,5 +5,5 @@ export declare function DataTableCards<TData>({ loading, skeletonRowCount, noRes
     skeletonRowCount: number;
     noResultsText?: string;
     emptyState?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=data-table-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,2CAkHA"}
+{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAkHA"}

package/dist/ui/data-table-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-card.js","names":[],"sources":["../../src/ui/data-table-card.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Card, CardContent } from './card'\nimport { Checkbox } from './checkbox'\nimport { useDataTableContext } from './data-table-context'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\n\n// ── DataTableCards ─────────────────────────────────────────────\n// Renders rows as vertically stacked cards for small (< sm) viewports.\n// Consumes the same TanStack Table instance from context — sorting,\n// filtering, pagination, and selection all work identically.\n\nexport function DataTableCards<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n}) {\n  const { table, selectable } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <div className=\"flex flex-col gap-ds-03\">\n        {Array.from({ length: skeletonRowCount }, (_, i) => (\n          <Card key={`card-skeleton-${i}`} size=\"sm\" variant=\"outline\">\n            <CardContent>\n              <Skeleton variant=\"text\" className=\"mb-ds-03 h-5 w-2/3\" animation=\"pulse\" />\n              <div className=\"flex flex-col gap-ds-02\">\n                <Skeleton variant=\"text\" className=\"h-4 w-full\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-3/4\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-1/2\" animation=\"pulse\" />\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <div className={cn('py-ds-07 text-center', !emptyState && 'text-surface-fg-subtle')}>\n        {emptyState || noResultsText || 'No results.'}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-ds-03\" role=\"list\">\n      {rows.map((row) => {\n        const cells = row.getVisibleCells()\n        // Skip internal columns (_select, _expand) for card content\n        const contentCells = cells.filter(\n          (cell) => cell.column.id !== '_select' && cell.column.id !== '_expand',\n        )\n        const primaryCell = contentCells[0]\n        const restCells = contentCells.slice(1)\n        const isSelected = row.getIsSelected()\n\n        return (\n          <Card\n            key={row.id}\n            role=\"listitem\"\n            size=\"sm\"\n            // outline, not default — a phone screen of stacked shadow cards\n            // accumulates lift (make-kit dense-list rule).\n            variant=\"outline\"\n            className={cn(isSelected && 'ring-2 ring-accent-9')}\n          >\n            {/* Header row: primary field + optional selection checkbox */}\n            <CardContent className=\"flex items-start justify-between gap-ds-03\">\n              <div className=\"min-w-0 flex-1 font-medium text-surface-fg\">\n                {primaryCell &&\n                  flexRender(primaryCell.column.columnDef.cell, primaryCell.getContext())}\n              </div>\n              {selectable && (\n                <Checkbox\n                  size=\"sm\"\n                  checked={isSelected}\n                  disabled={!row.getCanSelect()}\n                  onCheckedChange={(v) => row.toggleSelected(!!v)}\n                  aria-label=\"Select row\"\n                  className=\"shrink-0\"\n                />\n              )}\n            </CardContent>\n\n            {/* Label-value pairs for remaining columns, behind a full-width rule */}\n            {restCells.length > 0 && (\n              <>\n              <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n              <CardContent className=\"flex flex-col gap-ds-01\">\n                {restCells.map((cell) => {\n                  // Respect hideBelow column meta — skip hidden columns\n                  const meta = cell.column.columnDef.meta as\n                    | { hideBelow?: string }\n                    | undefined\n                  // In card mode on mobile, hideBelow='sm' columns are still useful\n                  // since we're showing all data in a card layout. Only skip if\n                  // the column is explicitly hidden via visibility toggle.\n                  if (meta?.hideBelow === 'md' || meta?.hideBelow === 'lg') {\n                    // These would normally be hidden at this breakpoint in table\n                    // mode too, so skip them in cards for consistency\n                  }\n\n                  // Derive header label text\n                  const header =\n                    typeof cell.column.columnDef.header === 'string'\n                      ? cell.column.columnDef.header\n                      : cell.column.id\n\n                  return (\n                    <div key={cell.id} className=\"flex justify-between gap-ds-03 text-ds-sm\">\n                      <span className=\"shrink-0 text-surface-fg-muted\">{header}</span>\n                      <span className=\"min-w-0 text-right text-surface-fg\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </span>\n                    </div>\n                  )\n                })}\n              </CardContent>\n              </>\n            )}\n          </Card>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,EAAsB,EACpC,YACA,qBACA,kBACA,iBAMC;CACD,IAAM,EAAE,UAAO,kBAAe,GAA4B,EACpD,IAAO,EAAM,aAAa,CAAC;AA+BjC,QA5BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,GAAkB,GAAG,GAAG,MAC5C,kBAAC,GAAD;GAAiC,MAAK;GAAK,SAAQ;aACjD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAU,SAAQ;IAAO,WAAU;IAAqB,WAAU;IAAU,CAAA,EAC5E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAa,WAAU;MAAU,CAAA;KACpE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KACnE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KAC/D;MACM,EAAA,CAAA;GACT,EATI,iBAAiB,IASrB,CACP;EACE,CAAA,GAKL,EAAK,SASR,kBAAC,OAAD;EAAK,WAAU;EAA0B,MAAK;YAC3C,EAAK,KAAK,MAAQ;GAGjB,IAAM,IAFQ,EAAI,iBAAiB,CAER,QACxB,MAAS,EAAK,OAAO,OAAO,aAAa,EAAK,OAAO,OAAO,UAC9D,EACK,IAAc,EAAa,IAC3B,IAAY,EAAa,MAAM,EAAE,EACjC,IAAa,EAAI,eAAe;AAEtC,UACE,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IAGL,SAAQ;IACR,WAAW,EAAG,KAAc,uBAAuB;cAPrD,CAUE,kBAAC,GAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,KACC,EAAW,EAAY,OAAO,UAAU,MAAM,EAAY,YAAY,CAAC;MACrE,CAAA,EACL,KACC,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC,EAAI,cAAc;MAC7B,kBAAkB,MAAM,EAAI,eAAe,CAAC,CAAC,EAAE;MAC/C,cAAW;MACX,WAAU;MACV,CAAA,CAEQ;QAGb,EAAU,SAAS,KAClB,kBAAA,GAAA,EAAA,UAAA,CACA,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAyC,CAAA,EAC3E,kBAAC,GAAD;KAAa,WAAU;eACpB,EAAU,KAAK,MAAS;MAEvB,IAAM,IAAO,EAAK,OAAO,UAAU;AAiBnC,aAXI,GAAM,cAAc,QAAQ,GAAM,WAYpC,kBAAC,OAAD;OAAmB,WAAU;iBAA7B,CACE,kBAAC,QAAD;QAAM,WAAU;kBANlB,OAAO,EAAK,OAAO,UAAU,UAAW,WACpC,EAAK,OAAO,UAAU,SACtB,EAAK,OAAO;QAIkD,CAAA,EAChE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,YAAY,CAAC;QACrD,CAAA,CACH;SALI,EAAK,GAKT;OAER;KACU,CAAA,CACX,EAAA,CAAA,CAEA;MA9DA,EAAI,GA8DJ;IAET;EACE,CAAA,GArFJ,kBAAC,OAAD;EAAK,WAAW,EAAG,wBAAwB,CAAC,KAAc,yBAAyB;YAChF,KAAc,KAAiB;EAC5B,CAAA"}
+{"version":3,"file":"data-table-card.js","names":[],"sources":["../../src/ui/data-table-card.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Card, CardContent } from './card'\nimport { Checkbox } from './checkbox'\nimport { useDataTableContext } from './data-table-context'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\n\n// ── DataTableCards ─────────────────────────────────────────────\n// Renders rows as vertically stacked cards for small (< sm) viewports.\n// Consumes the same TanStack Table instance from context — sorting,\n// filtering, pagination, and selection all work identically.\n\nexport function DataTableCards<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n}) {\n  const { table, selectable } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <div className=\"flex flex-col gap-ds-03\">\n        {Array.from({ length: skeletonRowCount }, (_, i) => (\n          <Card key={`card-skeleton-${i}`} size=\"sm\" variant=\"outline\">\n            <CardContent>\n              <Skeleton variant=\"text\" className=\"mb-ds-03 h-5 w-2/3\" animation=\"pulse\" />\n              <div className=\"flex flex-col gap-ds-02\">\n                <Skeleton variant=\"text\" className=\"h-4 w-full\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-3/4\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-1/2\" animation=\"pulse\" />\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <div className={cn('py-ds-07 text-center', !emptyState && 'text-surface-fg-subtle')}>\n        {emptyState || noResultsText || 'No results.'}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-ds-03\" role=\"list\">\n      {rows.map((row) => {\n        const cells = row.getVisibleCells()\n        // Skip internal columns (_select, _expand) for card content\n        const contentCells = cells.filter(\n          (cell) => cell.column.id !== '_select' && cell.column.id !== '_expand',\n        )\n        const primaryCell = contentCells[0]\n        const restCells = contentCells.slice(1)\n        const isSelected = row.getIsSelected()\n\n        return (\n          <Card\n            key={row.id}\n            role=\"listitem\"\n            size=\"sm\"\n            // outline, not default — a phone screen of stacked shadow cards\n            // accumulates lift (make-kit dense-list rule).\n            variant=\"outline\"\n            className={cn(isSelected && 'ring-2 ring-accent-9')}\n          >\n            {/* Header row: primary field + optional selection checkbox */}\n            <CardContent className=\"flex items-start justify-between gap-ds-03\">\n              <div className=\"min-w-0 flex-1 font-medium text-surface-fg\">\n                {primaryCell &&\n                  flexRender(primaryCell.column.columnDef.cell, primaryCell.getContext())}\n              </div>\n              {selectable && (\n                <Checkbox\n                  size=\"sm\"\n                  checked={isSelected}\n                  disabled={!row.getCanSelect()}\n                  onCheckedChange={(v) => row.toggleSelected(!!v)}\n                  aria-label=\"Select row\"\n                  className=\"shrink-0\"\n                />\n              )}\n            </CardContent>\n\n            {/* Label-value pairs for remaining columns, behind a full-width rule */}\n            {restCells.length > 0 && (\n              <>\n              <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n              <CardContent className=\"flex flex-col gap-ds-01\">\n                {restCells.map((cell) => {\n                  // Respect hideBelow column meta — skip hidden columns\n                  const meta = cell.column.columnDef.meta as\n                    | { hideBelow?: string }\n                    | undefined\n                  // In card mode on mobile, hideBelow='sm' columns are still useful\n                  // since we're showing all data in a card layout. Only skip if\n                  // the column is explicitly hidden via visibility toggle.\n                  if (meta?.hideBelow === 'md' || meta?.hideBelow === 'lg') {\n                    // These would normally be hidden at this breakpoint in table\n                    // mode too, so skip them in cards for consistency\n                  }\n\n                  // Derive header label text\n                  const header =\n                    typeof cell.column.columnDef.header === 'string'\n                      ? cell.column.columnDef.header\n                      : cell.column.id\n\n                  return (\n                    <div key={cell.id} className=\"flex justify-between gap-ds-03 text-ds-sm\">\n                      <span className=\"shrink-0 text-surface-fg-muted\">{header}</span>\n                      <span className=\"min-w-0 text-right text-surface-fg\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </span>\n                    </div>\n                  )\n                })}\n              </CardContent>\n              </>\n            )}\n          </Card>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,EAAsB,EACpC,YACA,qBACA,kBACA,iBAMC;CACD,IAAM,EAAE,UAAO,kBAAe,EAA2B,GACnD,IAAO,EAAM,YAAY,CAAC,CAAC;CA+BjC,OA5BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,EAAiB,IAAI,GAAG,MAC5C,kBAAC,GAAD;GAAiC,MAAK;GAAK,SAAQ;aACjD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAU,SAAQ;IAAO,WAAU;IAAqB,WAAU;GAAS,CAAA,GAC3E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAa,WAAU;KAAS,CAAA;KACnE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;KAAS,CAAA;KAClE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;KAAS,CAAA;IAC/D;KACM,EAAA,CAAA;EACT,GATK,iBAAiB,GAStB,CACP;CACE,CAAA,IAKJ,EAAK,SASR,kBAAC,OAAD;EAAK,WAAU;EAA0B,MAAK;YAC3C,EAAK,KAAK,MAAQ;GAGjB,IAAM,IAFQ,EAAI,gBAEG,CAAA,CAAM,QACxB,MAAS,EAAK,OAAO,OAAO,aAAa,EAAK,OAAO,OAAO,SAC/D,GACM,IAAc,EAAa,IAC3B,IAAY,EAAa,MAAM,CAAC,GAChC,IAAa,EAAI,cAAc;GAErC,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IAGL,SAAQ;IACR,WAAW,EAAG,KAAc,sBAAsB;cAPpD,CAUE,kBAAC,GAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,KACC,EAAW,EAAY,OAAO,UAAU,MAAM,EAAY,WAAW,CAAC;KACrE,CAAA,GACJ,KACC,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC,EAAI,aAAa;MAC5B,kBAAkB,MAAM,EAAI,eAAe,CAAC,CAAC,CAAC;MAC9C,cAAW;MACX,WAAU;KACX,CAAA,CAEQ;QAGZ,EAAU,SAAS,KAClB,kBAAA,GAAA,EAAA,UAAA,CACA,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;IAAwC,CAAA,GAC1E,kBAAC,GAAD;KAAa,WAAU;eACpB,EAAU,KAAK,MAAS;MAEvB,IAAM,IAAO,EAAK,OAAO,UAAU;MAiBnC,OAXI,GAAM,cAAc,QAAQ,GAAM,WAYpC,kBAAC,OAAD;OAAmB,WAAU;iBAA7B,CACE,kBAAC,QAAD;QAAM,WAAU;kBANlB,OAAO,EAAK,OAAO,UAAU,UAAW,WACpC,EAAK,OAAO,UAAU,SACtB,EAAK,OAAO;OAIiD,CAAA,GAC/D,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC;OACrD,CAAA,CACH;SALK,EAAK,EAKV;KAET,CAAC;IACU,CAAA,CACX,EAAA,CAAA,CAEA;MA9DC,EAAI,EA8DL;EAEV,CAAC;CACE,CAAA,IArFH,kBAAC,OAAD;EAAK,WAAW,EAAG,wBAAwB,CAAC,KAAc,wBAAwB;YAC/E,KAAc,KAAiB;CAC7B,CAAA;AAqFX"}

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

@@ -46,7 +46,7 @@ export interface DataTableContextValue<TData = unknown> {
 export declare function DataTableProvider<TData>({ children, value, }: {
     children: React.ReactNode;
     value: DataTableContextValue<TData>;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function useDataTableContext<TData = unknown>(): DataTableContextValue<TData>;
 /** Compute sticky positioning styles for pinned columns */
 export declare function getPinnedCellStyle(columnId: string, columnPinningState: ColumnPinningState): {

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAIvE,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAS3E;AAED,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,4DACwB,CAAA;AAIzD,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO;IACpD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yDAAyD;IACzD,UAAU,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/C,kDAAkD;IAClD,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,uBAAuB;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;CACpC,2CAMA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAGnC,qBAAqB,CAAC,KAAK,CAAC,CAC3C;AAID,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,kBAAkB;;WASZ,KAAK,CAAC,aAAa;EAU9C;AAED,uCAAuC;AACvC,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,OAAO,CAYT"}
+{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAIvE,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAS3E;AAED,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,4DACwB,CAAA;AAIzD,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO;IACpD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yDAAyD;IACzD,UAAU,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/C,kDAAkD;IAClD,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,uBAAuB;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;CACpC,qBAMA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAGnC,qBAAqB,CAAC,KAAK,CAAC,CAC3C;AAID,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,kBAAkB;;WASZ,KAAK,CAAC,aAAa;EAU9C;AAED,uCAAuC;AACvC,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,OAAO,CAYT"}

package/dist/ui/data-table-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** Whether inline editing is enabled */\n  editable: boolean\n  /** Whether row expansion is enabled */\n  expandable: boolean\n  /** Whether virtual rows are enabled */\n  virtualRows: boolean\n  /** Whether row selection is enabled */\n  selectable: boolean\n  /** Mobile view mode */\n  mobileView: 'card' | 'table'\n  /** Current editing cell */\n  editingCell: EditingCell\n  /** Set editing cell */\n  setEditingCell: (cell: EditingCell) => void\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n  /** Row click handler */\n  onRowClick?: (row: TData) => void\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAqB,GAAwC;AAC3E,KAAI,CAAC,EAAM,QAAO;CAClB,IAAM,IAAoB,EAAE;AAM5B,QALI,EAAK,UAAU,WAAS,EAAQ,KAAK,0BAA0B,EAC/D,EAAK,UAAU,YAAU,EAAQ,KAAK,cAAc,EACpD,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC1D,EAAQ,KAAK,IAAI;;AAI1B,IAAa,IACX,2DAoCI,IAAmB,EAAM,cAA4C,KAAK;AAEhF,SAAgB,EAAyB,EACvC,aACA,YAIC;AACD,QACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;EACyB,CAAA;;AAIhC,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,EAAiB;AAC9C,KAAI,CAAC,EAAK,OAAU,MAAM,4DAA4D;AACtF,QAAO;;AAMT,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,EAAE,EAAE,WAAQ,EAAE,KAAK,GAC5B,IAAY,EAAK,QAAQ,EAAS,EAClC,IAAa,EAAM,QAAQ,EAAS;AAc1C,QAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,EAAE;EAAyB,GALjD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,GAAG;EACpB,GATM;EACL,WAAW;EACX,OAAO,EAAE,MAAM,GAAG;EACnB;;AAYL,SAAgB,EACd,GACA,GACA,GACS;AAGT,KAFI,CAAC,KAED,MAAa,aAAa,MAAa,UAAW,QAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,EAAS;AAOrC,QADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB"}
+{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** Whether inline editing is enabled */\n  editable: boolean\n  /** Whether row expansion is enabled */\n  expandable: boolean\n  /** Whether virtual rows are enabled */\n  virtualRows: boolean\n  /** Whether row selection is enabled */\n  selectable: boolean\n  /** Mobile view mode */\n  mobileView: 'card' | 'table'\n  /** Current editing cell */\n  editingCell: EditingCell\n  /** Set editing cell */\n  setEditingCell: (cell: EditingCell) => void\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n  /** Row click handler */\n  onRowClick?: (row: TData) => void\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAqB,GAAwC;CAC3E,IAAI,CAAC,GAAM,OAAO;CAClB,IAAM,IAAoB,CAAC;CAM3B,OALI,EAAK,UAAU,WAAS,EAAQ,KAAK,yBAAyB,GAC9D,EAAK,UAAU,YAAU,EAAQ,KAAK,aAAa,GACnD,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GACzD,EAAQ,KAAK,GAAG;AACzB;AAGA,IAAa,IACX,2DAoCI,IAAmB,EAAM,cAA4C,IAAI;AAE/E,SAAgB,EAAyB,EACvC,aACA,YAIC;CACD,OACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;CACwB,CAAA;AAE/B;AAEA,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,CAAgB;CAC7C,IAAI,CAAC,GAAK,MAAU,MAAM,2DAA2D;CACrF,OAAO;AACT;AAKA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,CAAC,GAAG,WAAQ,CAAC,MAAM,GAC5B,IAAY,EAAK,QAAQ,CAAQ,GACjC,IAAa,EAAM,QAAQ,CAAQ;CAczC,OAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,CAAC;CAAyB,IALhD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,EAAE;CACpB,IATO;EACL,WAAW;EACX,OAAO,EAAE,MAAM,EAAE;CACnB;AASJ;AAGA,SAAgB,EACd,GACA,GACA,GACS;CAGT,IAFI,CAAC,KAED,MAAa,aAAa,MAAa,WAAW,OAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,CAAQ;CAOpC,OADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB;AAE9B"}

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

@@ -1,10 +1,11 @@
 "use client";
+import { default as React } from 'react';
 /**
  * Renders the `<TableHeader>` block including sortable column headers
  * and optional per-column filter inputs. Internal — not exported to consumers.
  */
 declare function DataTableHeaderImpl({ stickyHeader }: {
     stickyHeader?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { DataTableHeaderImpl as DataTableHeader };
 //# sourceMappingURL=data-table-header.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-header.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,2CAwJxE;AAED,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAA"}
+{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-header.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,qBAwJxE;AAED,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAA"}

package/dist/ui/data-table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.js","names":[],"sources":["../../src/ui/data-table-header.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconArrowDown,\n  IconArrowsSort,\n  IconArrowUp,\n} from '@tabler/icons-react'\nimport { flexRender } from '@tanstack/react-table'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport React from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  useDataTableContext,\n} from './data-table-context'\nimport { Icon } from './icon'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { TableHead, TableHeader, TableRow } from './table'\n\n/**\n * Renders the `<TableHeader>` block including sortable column headers\n * and optional per-column filter inputs. Internal — not exported to consumers.\n */\nfunction DataTableHeaderImpl({ stickyHeader }: { stickyHeader?: boolean }) {\n  const { table, sortable, filterable, columnPinningState } =\n    useDataTableContext()\n\n  return (\n    <TableHeader\n      className={cn(\n        // surface-raised, not base — the table lives on a card; a base-colored\n        // sticky bar would read as a grey stripe over the white surface.\n        stickyHeader && 'sticky top-0 z-10 bg-surface-raised',\n      )}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow key={headerGroup.id}>\n          {headerGroup.headers.map((header) => {\n            const canSort = sortable && header.column.getCanSort()\n            const sorted = header.column.getIsSorted()\n            const pinned = getPinnedCellStyle(\n              header.column.id,\n              columnPinningState,\n            )\n\n            return (\n              <TableHead\n                key={header.id}\n                className={cn(\n                  pinned.className,\n                  getColumnMetaClasses(\n                    header.column.columnDef.meta as Record<string, unknown>,\n                  ),\n                )}\n                style={pinned.style}\n                aria-sort={\n                  canSort\n                    ? sorted === 'asc'\n                      ? 'ascending'\n                      : sorted === 'desc'\n                        ? 'descending'\n                        : 'none'\n                    : undefined\n                }\n              >\n                {header.isPlaceholder ? null : canSort ? (\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'flex items-center gap-ds-01 font-medium',\n                      'cursor-pointer select-none',\n                      '-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01',\n                      'hover:bg-surface-raised-hover transition-colors',\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                    aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                  >\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n                    <AnimatePresence mode=\"wait\" initial={false}>\n                      {sorted === 'asc' ? (\n                        <motion.span\n                          key=\"asc\"\n                          initial={{ opacity: 0, rotate: 90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: -90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowUp}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : sorted === 'desc' ? (\n                        <motion.span\n                          key=\"desc\"\n                          initial={{ opacity: 0, rotate: -90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: 90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowDown}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : (\n                        <motion.span\n                          key=\"unsorted\"\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          exit={{ opacity: 0 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowsSort}\n                            size=\"sm\"\n                            className=\"text-surface-fg-subtle\"\n                          />\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </button>\n                ) : (\n                  flexRender(\n                    header.column.columnDef.header,\n                    header.getContext(),\n                  )\n                )}\n              </TableHead>\n            )\n          })}\n        </TableRow>\n      ))}\n\n      {/* Column filter row */}\n      {filterable &&\n        table.getHeaderGroups().map((headerGroup) => (\n          <TableRow key={`${headerGroup.id}-filters`}>\n            {headerGroup.headers.map((header) => (\n              <TableHead key={`${header.id}-filter`} className=\"py-ds-01\">\n                {header.isPlaceholder ||\n                header.column.columnDef.enableColumnFilter === false ? null : (\n                  <input\n                    type=\"text\"\n                    value={\n                      (header.column.getFilterValue() as string) ?? ''\n                    }\n                    onChange={(e) =>\n                      header.column.setFilterValue(e.target.value)\n                    }\n                    placeholder={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : ''}...`}\n                    aria-label={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                    className={cn(\n                      'h-ds-xs-plus w-full rounded-control',\n                      'border border-surface-border-strong bg-surface-raised-hover',\n                      'px-ds-02 text-ds-sm',\n                      'text-surface-fg placeholder:text-surface-fg-subtle',\n                      'outline-hidden focus:border-accent-7',\n                    )}\n                  />\n                )}\n              </TableHead>\n            ))}\n          </TableRow>\n        ))}\n    </TableHeader>\n  )\n}\n\nexport { DataTableHeaderImpl as DataTableHeader }\n"],"mappings":"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"}
+{"version":3,"file":"data-table-header.js","names":[],"sources":["../../src/ui/data-table-header.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconArrowDown,\n  IconArrowsSort,\n  IconArrowUp,\n} from '@tabler/icons-react'\nimport { flexRender } from '@tanstack/react-table'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport React from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  useDataTableContext,\n} from './data-table-context'\nimport { Icon } from './icon'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { TableHead, TableHeader, TableRow } from './table'\n\n/**\n * Renders the `<TableHeader>` block including sortable column headers\n * and optional per-column filter inputs. Internal — not exported to consumers.\n */\nfunction DataTableHeaderImpl({ stickyHeader }: { stickyHeader?: boolean }) {\n  const { table, sortable, filterable, columnPinningState } =\n    useDataTableContext()\n\n  return (\n    <TableHeader\n      className={cn(\n        // surface-raised, not base — the table lives on a card; a base-colored\n        // sticky bar would read as a grey stripe over the white surface.\n        stickyHeader && 'sticky top-0 z-10 bg-surface-raised',\n      )}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow key={headerGroup.id}>\n          {headerGroup.headers.map((header) => {\n            const canSort = sortable && header.column.getCanSort()\n            const sorted = header.column.getIsSorted()\n            const pinned = getPinnedCellStyle(\n              header.column.id,\n              columnPinningState,\n            )\n\n            return (\n              <TableHead\n                key={header.id}\n                className={cn(\n                  pinned.className,\n                  getColumnMetaClasses(\n                    header.column.columnDef.meta as Record<string, unknown>,\n                  ),\n                )}\n                style={pinned.style}\n                aria-sort={\n                  canSort\n                    ? sorted === 'asc'\n                      ? 'ascending'\n                      : sorted === 'desc'\n                        ? 'descending'\n                        : 'none'\n                    : undefined\n                }\n              >\n                {header.isPlaceholder ? null : canSort ? (\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'flex items-center gap-ds-01 font-medium',\n                      'cursor-pointer select-none',\n                      '-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01',\n                      'hover:bg-surface-raised-hover transition-colors',\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                    aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                  >\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n                    <AnimatePresence mode=\"wait\" initial={false}>\n                      {sorted === 'asc' ? (\n                        <motion.span\n                          key=\"asc\"\n                          initial={{ opacity: 0, rotate: 90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: -90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowUp}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : sorted === 'desc' ? (\n                        <motion.span\n                          key=\"desc\"\n                          initial={{ opacity: 0, rotate: -90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: 90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowDown}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : (\n                        <motion.span\n                          key=\"unsorted\"\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          exit={{ opacity: 0 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowsSort}\n                            size=\"sm\"\n                            className=\"text-surface-fg-subtle\"\n                          />\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </button>\n                ) : (\n                  flexRender(\n                    header.column.columnDef.header,\n                    header.getContext(),\n                  )\n                )}\n              </TableHead>\n            )\n          })}\n        </TableRow>\n      ))}\n\n      {/* Column filter row */}\n      {filterable &&\n        table.getHeaderGroups().map((headerGroup) => (\n          <TableRow key={`${headerGroup.id}-filters`}>\n            {headerGroup.headers.map((header) => (\n              <TableHead key={`${header.id}-filter`} className=\"py-ds-01\">\n                {header.isPlaceholder ||\n                header.column.columnDef.enableColumnFilter === false ? null : (\n                  <input\n                    type=\"text\"\n                    value={\n                      (header.column.getFilterValue() as string) ?? ''\n                    }\n                    onChange={(e) =>\n                      header.column.setFilterValue(e.target.value)\n                    }\n                    placeholder={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : ''}...`}\n                    aria-label={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                    className={cn(\n                      'h-ds-xs-plus w-full rounded-control',\n                      'border border-surface-border-strong bg-surface-raised-hover',\n                      'px-ds-02 text-ds-sm',\n                      'text-surface-fg placeholder:text-surface-fg-subtle',\n                      'outline-hidden focus:border-accent-7',\n                    )}\n                  />\n                )}\n              </TableHead>\n            ))}\n          </TableRow>\n        ))}\n    </TableHeader>\n  )\n}\n\nexport { DataTableHeaderImpl as DataTableHeader }\n"],"mappings":"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"}