@devalok/shilp-sutra 0.49.0 → 0.49.2

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:scale-110 hover:bg-surface-raised-hover transition-transform 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      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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"}

package/dist/ui/context-menu.js

@@ -1,5 +1,5 @@
 "use client";
-import { At as e, Bt as t, Ft as n, Ht as r, It as i, Lt as a, Mt as o, Nt as s, Pt as c, Rt as l, Ut as u, Vt as d, jt as f, kt as p, zt as m } from "../_chunks/primitives.js";
+import { CheckboxItem2$2 as e, Content2$5 as t, Group2$2 as n, Item2$3 as r, ItemIndicator2$2 as i, Label2$2 as a, Portal2$2 as o, RadioGroup2$2 as s, RadioItem2$2 as c, Root2$7 as l, Separator2$2 as u, Sub2$2 as d, SubContent2$2 as f, SubTrigger2$2 as p, Trigger$7 as m } from "../_chunks/primitives.js";
 import { springs as h, tweens as g } from "./lib/motion.js";
 import { cn as _ } from "./lib/utils.js";
 import { Icon as v } from "./icon.js";
@@ -21,32 +21,32 @@ var D = y.createContext(!1), O = y.createContext(!1), k = ({ onOpenChange: e, ..
 	});
 };
 k.displayName = "ContextMenu";
-var A = u, j = f, M = n, N = ({ open: e, defaultOpen: n = !1, onOpenChange: r, ...i }) => {
-	let [a, o] = y.useState(n), s = e !== void 0, c = s ? e : a, l = y.useCallback((e) => {
-		s || o(e), r?.(e);
-	}, [s, r]);
+var A = m, j = n, M = o, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
+	let [i, a] = y.useState(t), o = e !== void 0, s = o ? e : i, c = y.useCallback((e) => {
+		o || a(e), n?.(e);
+	}, [o, n]);
 	return /* @__PURE__ */ b(O.Provider, {
-		value: c,
-		children: /* @__PURE__ */ b(t, {
-			open: c,
-			onOpenChange: l,
-			...i
+		value: s,
+		children: /* @__PURE__ */ b(d, {
+			open: s,
+			onOpenChange: c,
+			...r
 		})
 	});
 };
 N.displayName = "ContextMenuSub";
-var P = i, F = y.forwardRef(({ className: e, inset: t, children: n, ...i }, a) => /* @__PURE__ */ x(r, {
-	ref: a,
+var P = s, F = y.forwardRef(({ className: e, inset: t, children: n, ...r }, i) => /* @__PURE__ */ x(p, {
+	ref: i,
 	className: _("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
-	...i,
+	...r,
 	children: [n, /* @__PURE__ */ b(v, {
 		icon: C,
 		size: "sm",
 		className: "ml-auto"
 	})]
 }));
-F.displayName = r.displayName;
-var I = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ b(T, { children: y.useContext(O) && /* @__PURE__ */ b(d, {
+F.displayName = p.displayName;
+var I = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ b(T, { children: y.useContext(O) && /* @__PURE__ */ b(f, {
 	ref: r,
 	forceMount: !0,
 	asChild: !0,
@@ -72,14 +72,14 @@ var I = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */
 		children: t
 	})
 }) }));
-I.displayName = d.displayName;
-var L = y.forwardRef(({ className: t, children: r, ...i }, a) => /* @__PURE__ */ b(T, { children: y.useContext(D) && /* @__PURE__ */ b(n, {
+I.displayName = f.displayName;
+var L = y.forwardRef(({ className: e, children: n, ...r }, i) => /* @__PURE__ */ b(T, { children: y.useContext(D) && /* @__PURE__ */ b(o, {
 	forceMount: !0,
-	children: /* @__PURE__ */ b(e, {
-		ref: a,
+	children: /* @__PURE__ */ b(t, {
+		ref: i,
 		forceMount: !0,
 		asChild: !0,
-		...i,
+		...r,
 		children: /* @__PURE__ */ b(E.div, {
 			initial: {
 				opacity: 0,
@@ -97,58 +97,58 @@ var L = y.forwardRef(({ className: t, children: r, ...i }, a) => /* @__PURE__ */
 				...h.snappy,
 				opacity: g.fade
 			},
-			className: _("z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", t),
-			children: r
+			className: _("z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+			children: n
 		})
 	})
 }) }));
-L.displayName = e.displayName;
-var R = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(o, {
-	ref: r,
+L.displayName = t.displayName;
+var R = y.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ b(r, {
+	ref: i,
 	className: _("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", t && "pl-ds-07", e),
 	...n
 }));
-R.displayName = o.displayName;
-var z = y.forwardRef(({ className: e, children: t, checked: n, ...r }, i) => /* @__PURE__ */ x(p, {
-	ref: i,
-	className: _("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", e),
-	checked: n,
-	...r,
+R.displayName = r.displayName;
+var z = y.forwardRef(({ className: t, children: n, checked: r, ...a }, o) => /* @__PURE__ */ x(e, {
+	ref: o,
+	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
+	checked: r,
+	...a,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ b(s, { children: /* @__PURE__ */ b(v, {
+		children: /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(v, {
 			icon: S,
 			size: "sm"
 		}) })
-	}), t]
+	}), n]
 }));
-z.displayName = p.displayName;
-var B = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ x(a, {
+z.displayName = e.displayName;
+var B = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ x(c, {
 	ref: r,
 	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...n,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ b(s, { children: /* @__PURE__ */ b(v, {
+		children: /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(v, {
 			icon: w,
 			size: "sm",
 			className: "fill-current"
 		}) })
 	}), t]
 }));
-B.displayName = a.displayName;
-var V = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(c, {
+B.displayName = c.displayName;
+var V = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(a, {
 	ref: r,
 	className: _("px-ds-03 py-ds-02b text-ds-md font-semibold text-surface-fg", t && "pl-ds-07", e),
 	...n
 }));
-V.displayName = c.displayName;
-var H = y.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ b(m, {
+V.displayName = a.displayName;
+var H = y.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ b(u, {
 	ref: n,
 	className: _("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
 	...t
 }));
-H.displayName = m.displayName;
+H.displayName = u.displayName;
 var U = ({ className: e, ...t }) => /* @__PURE__ */ b("span", {
 	className: _("ml-auto text-ds-sm text-surface-fg-subtle", e),
 	...t

package/dist/ui/dialog.js

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

package/dist/ui/dot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dot.d.ts","sourceRoot":"","sources":["../../src/ui/dot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAClG,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AA4DlD,QAAA,MAAM,WAAW;;8EAUf,CAAA;AASF;;;;;;;;GAQG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,uGAAuG;IACvG,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,qGAAqG;IACrG,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACvC,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,GAAG,kFA8DR,CAAA;AAGD,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"dot.d.ts","sourceRoot":"","sources":["../../src/ui/dot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAClG,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAiDlD,QAAA,MAAM,WAAW;;8EAUf,CAAA;AASF;;;;;;;;GAQG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,uGAAuG;IACvG,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,qGAAqG;IACrG,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACvC,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,GAAG,kFA4DR,CAAA;AAGD,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/dot.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../_chunks/vendor-utils.js";
+import { cva as e } from "../_chunks/vendor-utils.js";
 import { cn as t } from "./lib/utils.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
@@ -29,14 +29,6 @@ var a = {
 	neutral: "border-neutral-8/40 bg-neutral-8/10",
 	current: "border-current/40 bg-current/10"
 }, c = {
-	accent: "bg-accent-9/40",
-	success: "bg-success-9/40",
-	warning: "bg-warning-9/40",
-	error: "bg-error-9/40",
-	info: "bg-info-9/40",
-	neutral: "bg-neutral-8/40",
-	current: "bg-current/40"
-}, l = {
 	accent: "text-accent-11",
 	success: "text-success-11",
 	warning: "text-warning-11",
@@ -44,11 +36,11 @@ var a = {
 	info: "text-info-11",
 	neutral: "text-surface-fg-muted",
 	current: ""
-}, u = {
+}, l = {
 	slow: "2s",
 	normal: "1s",
 	fast: "0.6s"
-}, d = e("relative inline-flex shrink-0 rounded-pill", {
+}, u = e("relative inline-flex shrink-0 rounded-pill", {
 	variants: { size: {
 		xs: "h-1 w-1",
 		sm: "h-1.5 w-1.5",
@@ -56,37 +48,37 @@ var a = {
 		lg: "h-2.5 w-2.5"
 	} },
 	defaultVariants: { size: "md" }
-}), f = {
+}), d = {
 	xs: "text-ds-xs",
 	sm: "text-ds-xs",
 	md: "text-ds-sm",
 	lg: "text-ds-sm"
-}, p = n.forwardRef(({ color: e = "neutral", size: n = "md", variant: p = "filled", withBorder: m = !1, pulse: h = !1, pulseSpeed: g = "normal", label: _, labelPosition: v = "end", labelClassName: y, className: b, "aria-label": x, ...S }, C) => {
-	let w = n ?? "md", T = _ != null || x != null, E = h && p !== "off", D = t(d({ size: w }), p === "filled" && a[e], p === "ring" && t("border-[1.5px] bg-transparent", o[e]), p === "off" && t("border", s[e]), m && "ring-2 ring-surface-raised"), O = _ == null ? null : /* @__PURE__ */ r("span", {
-		className: t(f[w], l[e], "font-sans", y),
-		children: _
+}, f = n.forwardRef(({ color: e = "neutral", size: n = "md", variant: f = "filled", withBorder: p = !1, pulse: m = !1, pulseSpeed: h = "normal", label: g, labelPosition: _ = "end", labelClassName: v, className: y, "aria-label": b, ...x }, S) => {
+	let C = n ?? "md", w = g != null || b != null, T = m && f !== "off", E = t(u({ size: C }), f === "filled" && a[e], f === "ring" && t("border-[1.5px] bg-transparent", o[e]), f === "off" && t("border", s[e]), p && "ring-2 ring-surface-raised"), D = g == null ? null : /* @__PURE__ */ r("span", {
+		className: t(d[C], c[e], "font-sans", v),
+		children: g
 	});
 	return /* @__PURE__ */ i("span", {
-		ref: C,
-		role: T ? "status" : void 0,
-		"aria-hidden": T ? void 0 : !0,
-		"aria-label": x,
-		className: t("inline-flex items-center gap-ds-02", b),
-		...S,
+		ref: S,
+		role: w ? "status" : void 0,
+		"aria-hidden": w ? void 0 : !0,
+		"aria-label": b,
+		className: t("inline-flex items-center gap-ds-02", y),
+		...x,
 		children: [
-			v === "start" && O,
-			/* @__PURE__ */ i("span", {
+			_ === "start" && D,
+			/* @__PURE__ */ r("span", {
 				className: "relative inline-flex shrink-0",
-				children: [E && /* @__PURE__ */ r("span", {
-					"data-pulse": "",
-					style: { animationDuration: u[g] },
-					className: t("absolute inset-0 inline-flex rounded-pill animate-ping motion-reduce:animate-none", c[e])
-				}), /* @__PURE__ */ r("span", { className: D })]
+				children: /* @__PURE__ */ r("span", {
+					"data-pulse": T ? "" : void 0,
+					style: T ? { animationDuration: l[h] } : void 0,
+					className: t(E, T && "animate-pulse motion-reduce:animate-none")
+				})
 			}),
-			v === "end" && O
+			_ === "end" && D
 		]
 	});
 });
-p.displayName = "Dot";
+f.displayName = "Dot";
 //#endregion
-export { p as Dot, d as dotVariants };
+export { f as Dot, u as dotVariants };

package/dist/ui/dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"dot.js","names":[],"sources":["../../src/ui/dot.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ---------------------------------------------------------------------------\n * Dot — a small semantic status/indicator dot. The low-level primitive behind\n * StatusBadge, status/presence/health indicators, legend swatches, Avatar status.\n *\n * Intent-coloured, sized (xs–lg), filled / ring / off, optionally pulsing (with\n * a speed), optionally with a contrast border, and an optional label on either\n * side. Decorative by default (aria-hidden); a `label` (or `aria-label`) makes\n * it an announced status.\n *\n * For a dot/count that overlays a child element (notification badge), use\n * `BadgeIndicator` instead — that's the positioned-overlay pattern.\n *\n * API informed by Mantine `Indicator`, Ant `Badge status`, Chakra `Status`.\n * ------------------------------------------------------------------------ */\n\nexport type DotColor = 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current'\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type DotVariant = 'filled' | 'ring' | 'off'\n\nconst FILL: Record<DotColor, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-neutral-8',\n  current: 'bg-current',\n}\n\nconst RING: Record<DotColor, string> = {\n  accent: 'border-accent-9',\n  success: 'border-success-9',\n  warning: 'border-warning-9',\n  error: 'border-error-9',\n  info: 'border-info-9',\n  neutral: 'border-neutral-8',\n  current: 'border-current',\n}\n\n// Off — \"exists but inactive\": faint same-tone fill + a light border.\nconst OFF: Record<DotColor, string> = {\n  accent: 'border-accent-9/40 bg-accent-9/10',\n  success: 'border-success-9/40 bg-success-9/10',\n  warning: 'border-warning-9/40 bg-warning-9/10',\n  error: 'border-error-9/40 bg-error-9/10',\n  info: 'border-info-9/40 bg-info-9/10',\n  neutral: 'border-neutral-8/40 bg-neutral-8/10',\n  current: 'border-current/40 bg-current/10',\n}\n\n// Pulse ripple — the fill colour at low opacity.\nconst PULSE: Record<DotColor, string> = {\n  accent: 'bg-accent-9/40',\n  success: 'bg-success-9/40',\n  warning: 'bg-warning-9/40',\n  error: 'bg-error-9/40',\n  info: 'bg-info-9/40',\n  neutral: 'bg-neutral-8/40',\n  current: 'bg-current/40',\n}\n\nconst TEXT: Record<DotColor, string> = {\n  accent: 'text-accent-11',\n  success: 'text-success-11',\n  warning: 'text-warning-11',\n  error: 'text-error-11',\n  info: 'text-info-11',\n  neutral: 'text-surface-fg-muted',\n  current: '',\n}\n\nconst PULSE_SPEED: Record<'slow' | 'normal' | 'fast', string> = {\n  slow: '2s',\n  normal: '1s',\n  fast: '0.6s',\n}\n\nconst dotVariants = cva('relative inline-flex shrink-0 rounded-pill', {\n  variants: {\n    size: {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nconst labelTextSize: Record<DotSize, 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 * Props for Dot — a small semantic indicator dot.\n *\n * @example\n * <Dot color=\"success\" />                              // bare dot\n * <Dot color=\"error\" pulse pulseSpeed=\"fast\" label=\"Recording\" />\n * <Dot color=\"neutral\" variant=\"off\" label=\"Offline\" /> // inactive\n * <Dot color=\"success\" withBorder />                    // contrast ring on busy bg\n */\nexport interface DotProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,\n    VariantProps<typeof dotVariants> {\n  /** Intent colour, or `current` to inherit text colour. @default 'neutral' */\n  color?: DotColor\n  /** `filled` disc, hollow `ring`, or `off` (faint fill + light border = inactive). @default 'filled' */\n  variant?: DotVariant\n  /** A contrast ring around the dot so it stays visible on busy/colored backgrounds. @default false */\n  withBorder?: boolean\n  /** Animate a pulsing ripple (ignored for `off`). @default false */\n  pulse?: boolean\n  /** Pulse tempo. @default 'normal' */\n  pulseSpeed?: 'slow' | 'normal' | 'fast'\n  /** Inline label. Makes the dot an announced status. */\n  label?: React.ReactNode\n  /** Which side the label sits on. @default 'end' */\n  labelPosition?: 'start' | 'end'\n  labelClassName?: string\n}\n\nconst Dot = React.forwardRef<HTMLSpanElement, DotProps>(\n  (\n    {\n      color = 'neutral',\n      size = 'md',\n      variant = 'filled',\n      withBorder = false,\n      pulse = false,\n      pulseSpeed = 'normal',\n      label,\n      labelPosition = 'end',\n      labelClassName,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSize = size ?? 'md'\n    // A dot with a label (or explicit aria-label) is an announced status;\n    // a bare dot is decorative (the surrounding element carries the meaning).\n    const isAnnounced = label != null || ariaLabel != null\n    // Off dots are inactive — a pulse would contradict that.\n    const showPulse = pulse && variant !== 'off'\n\n    const disc = cn(\n      dotVariants({ size: resolvedSize }),\n      variant === 'filled' && FILL[color],\n      variant === 'ring' && cn('border-[1.5px] bg-transparent', RING[color]),\n      variant === 'off' && cn('border', OFF[color]),\n      withBorder && 'ring-2 ring-surface-raised',\n    )\n\n    const labelEl =\n      label != null ? (\n        <span className={cn(labelTextSize[resolvedSize], TEXT[color], 'font-sans', labelClassName)}>{label}</span>\n      ) : null\n\n    return (\n      <span\n        ref={ref}\n        role={isAnnounced ? 'status' : undefined}\n        aria-hidden={isAnnounced ? undefined : true}\n        aria-label={ariaLabel}\n        className={cn('inline-flex items-center gap-ds-02', className)}\n        {...props}\n      >\n        {labelPosition === 'start' && labelEl}\n        <span className=\"relative inline-flex shrink-0\">\n          {showPulse && (\n            <span\n              data-pulse=\"\"\n              style={{ animationDuration: PULSE_SPEED[pulseSpeed] }}\n              className={cn('absolute inset-0 inline-flex rounded-pill animate-ping motion-reduce:animate-none', PULSE[color])}\n            />\n          )}\n          <span className={disc} />\n        </span>\n        {labelPosition === 'end' && labelEl}\n      </span>\n    )\n  },\n)\nDot.displayName = 'Dot'\n\nexport { Dot, dotVariants }\n"],"mappings":";;;;;;AA0BA,IAAM,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAGK,IAAgC;CACpC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAGK,IAAkC;CACtC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAA0D;CAC9D,MAAM;CACN,QAAQ;CACR,MAAM;CACP,EAEK,IAAc,EAAI,8CAA8C;CACpE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CAAC,EAEI,IAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA+BK,IAAM,EAAM,YAEd,EACE,WAAQ,WACR,UAAO,MACP,aAAU,UACV,gBAAa,IACb,WAAQ,IACR,gBAAa,UACb,UACA,mBAAgB,OAChB,mBACA,cACA,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAe,KAAQ,MAGvB,IAAc,KAAS,QAAQ,KAAa,MAE5C,IAAY,KAAS,MAAY,OAEjC,IAAO,EACX,EAAY,EAAE,MAAM,GAAc,CAAC,EACnC,MAAY,YAAY,EAAK,IAC7B,MAAY,UAAU,EAAG,iCAAiC,EAAK,GAAO,EACtE,MAAY,SAAS,EAAG,UAAU,EAAI,GAAO,EAC7C,KAAc,6BACf,EAEK,IACJ,KAAS,OAEL,OADF,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAc,IAAe,EAAK,IAAQ,aAAa,EAAe;YAAG;EAAa,CAAA;AAG9G,QACE,kBAAC,QAAD;EACO;EACL,MAAM,IAAc,WAAW,KAAA;EAC/B,eAAa,IAAc,KAAA,IAAY;EACvC,cAAY;EACZ,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;YANN;GAQG,MAAkB,WAAW;GAC9B,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,KACC,kBAAC,QAAD;KACE,cAAW;KACX,OAAO,EAAE,mBAAmB,EAAY,IAAa;KACrD,WAAW,EAAG,qFAAqF,EAAM,GAAO;KAChH,CAAA,EAEJ,kBAAC,QAAD,EAAM,WAAW,GAAQ,CAAA,CACpB;;GACN,MAAkB,SAAS;GACvB;;EAGZ;AACD,EAAI,cAAc"}
+{"version":3,"file":"dot.js","names":[],"sources":["../../src/ui/dot.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ---------------------------------------------------------------------------\n * Dot — a small semantic status/indicator dot. The low-level primitive behind\n * StatusBadge, status/presence/health indicators, legend swatches, Avatar status.\n *\n * Intent-coloured, sized (xs–lg), filled / ring / off, optionally pulsing (with\n * a speed), optionally with a contrast border, and an optional label on either\n * side. Decorative by default (aria-hidden); a `label` (or `aria-label`) makes\n * it an announced status.\n *\n * For a dot/count that overlays a child element (notification badge), use\n * `BadgeIndicator` instead — that's the positioned-overlay pattern.\n *\n * API informed by Mantine `Indicator`, Ant `Badge status`, Chakra `Status`.\n * ------------------------------------------------------------------------ */\n\nexport type DotColor = 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current'\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type DotVariant = 'filled' | 'ring' | 'off'\n\nconst FILL: Record<DotColor, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-neutral-8',\n  current: 'bg-current',\n}\n\nconst RING: Record<DotColor, string> = {\n  accent: 'border-accent-9',\n  success: 'border-success-9',\n  warning: 'border-warning-9',\n  error: 'border-error-9',\n  info: 'border-info-9',\n  neutral: 'border-neutral-8',\n  current: 'border-current',\n}\n\n// Off — \"exists but inactive\": faint same-tone fill + a light border.\nconst OFF: Record<DotColor, string> = {\n  accent: 'border-accent-9/40 bg-accent-9/10',\n  success: 'border-success-9/40 bg-success-9/10',\n  warning: 'border-warning-9/40 bg-warning-9/10',\n  error: 'border-error-9/40 bg-error-9/10',\n  info: 'border-info-9/40 bg-info-9/10',\n  neutral: 'border-neutral-8/40 bg-neutral-8/10',\n  current: 'border-current/40 bg-current/10',\n}\n\nconst TEXT: Record<DotColor, string> = {\n  accent: 'text-accent-11',\n  success: 'text-success-11',\n  warning: 'text-warning-11',\n  error: 'text-error-11',\n  info: 'text-info-11',\n  neutral: 'text-surface-fg-muted',\n  current: '',\n}\n\nconst PULSE_SPEED: Record<'slow' | 'normal' | 'fast', string> = {\n  slow: '2s',\n  normal: '1s',\n  fast: '0.6s',\n}\n\nconst dotVariants = cva('relative inline-flex shrink-0 rounded-pill', {\n  variants: {\n    size: {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nconst labelTextSize: Record<DotSize, 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 * Props for Dot — a small semantic indicator dot.\n *\n * @example\n * <Dot color=\"success\" />                              // bare dot\n * <Dot color=\"error\" pulse pulseSpeed=\"fast\" label=\"Recording\" />\n * <Dot color=\"neutral\" variant=\"off\" label=\"Offline\" /> // inactive\n * <Dot color=\"success\" withBorder />                    // contrast ring on busy bg\n */\nexport interface DotProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,\n    VariantProps<typeof dotVariants> {\n  /** Intent colour, or `current` to inherit text colour. @default 'neutral' */\n  color?: DotColor\n  /** `filled` disc, hollow `ring`, or `off` (faint fill + light border = inactive). @default 'filled' */\n  variant?: DotVariant\n  /** A contrast ring around the dot so it stays visible on busy/colored backgrounds. @default false */\n  withBorder?: boolean\n  /** Animate a pulsing ripple (ignored for `off`). @default false */\n  pulse?: boolean\n  /** Pulse tempo. @default 'normal' */\n  pulseSpeed?: 'slow' | 'normal' | 'fast'\n  /** Inline label. Makes the dot an announced status. */\n  label?: React.ReactNode\n  /** Which side the label sits on. @default 'end' */\n  labelPosition?: 'start' | 'end'\n  labelClassName?: string\n}\n\nconst Dot = React.forwardRef<HTMLSpanElement, DotProps>(\n  (\n    {\n      color = 'neutral',\n      size = 'md',\n      variant = 'filled',\n      withBorder = false,\n      pulse = false,\n      pulseSpeed = 'normal',\n      label,\n      labelPosition = 'end',\n      labelClassName,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSize = size ?? 'md'\n    // A dot with a label (or explicit aria-label) is an announced status;\n    // a bare dot is decorative (the surrounding element carries the meaning).\n    const isAnnounced = label != null || ariaLabel != null\n    // Off dots are inactive — a pulse would contradict that.\n    const showPulse = pulse && variant !== 'off'\n\n    const disc = cn(\n      dotVariants({ size: resolvedSize }),\n      variant === 'filled' && FILL[color],\n      variant === 'ring' && cn('border-[1.5px] bg-transparent', RING[color]),\n      variant === 'off' && cn('border', OFF[color]),\n      withBorder && 'ring-2 ring-surface-raised',\n    )\n\n    const labelEl =\n      label != null ? (\n        <span className={cn(labelTextSize[resolvedSize], TEXT[color], 'font-sans', labelClassName)}>{label}</span>\n      ) : null\n\n    return (\n      <span\n        ref={ref}\n        role={isAnnounced ? 'status' : undefined}\n        aria-hidden={isAnnounced ? undefined : true}\n        aria-label={ariaLabel}\n        className={cn('inline-flex items-center gap-ds-02', className)}\n        {...props}\n      >\n        {labelPosition === 'start' && labelEl}\n        <span className=\"relative inline-flex shrink-0\">\n          {/* Contained opacity breathe on the disc itself — never an expanding halo/ring. */}\n          <span\n            data-pulse={showPulse ? '' : undefined}\n            style={showPulse ? { animationDuration: PULSE_SPEED[pulseSpeed] } : undefined}\n            className={cn(disc, showPulse && 'animate-pulse motion-reduce:animate-none')}\n          />\n        </span>\n        {labelPosition === 'end' && labelEl}\n      </span>\n    )\n  },\n)\nDot.displayName = 'Dot'\n\nexport { Dot, dotVariants }\n"],"mappings":";;;;;;AA0BA,IAAM,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAGK,IAAgC;CACpC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAAiC;CACrC,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAA0D;CAC9D,MAAM;CACN,QAAQ;CACR,MAAM;CACP,EAEK,IAAc,EAAI,8CAA8C;CACpE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CAAC,EAEI,IAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA+BK,IAAM,EAAM,YAEd,EACE,WAAQ,WACR,UAAO,MACP,aAAU,UACV,gBAAa,IACb,WAAQ,IACR,gBAAa,UACb,UACA,mBAAgB,OAChB,mBACA,cACA,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAe,KAAQ,MAGvB,IAAc,KAAS,QAAQ,KAAa,MAE5C,IAAY,KAAS,MAAY,OAEjC,IAAO,EACX,EAAY,EAAE,MAAM,GAAc,CAAC,EACnC,MAAY,YAAY,EAAK,IAC7B,MAAY,UAAU,EAAG,iCAAiC,EAAK,GAAO,EACtE,MAAY,SAAS,EAAG,UAAU,EAAI,GAAO,EAC7C,KAAc,6BACf,EAEK,IACJ,KAAS,OAEL,OADF,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAc,IAAe,EAAK,IAAQ,aAAa,EAAe;YAAG;EAAa,CAAA;AAG9G,QACE,kBAAC,QAAD;EACO;EACL,MAAM,IAAc,WAAW,KAAA;EAC/B,eAAa,IAAc,KAAA,IAAY;EACvC,cAAY;EACZ,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;YANN;GAQG,MAAkB,WAAW;GAC9B,kBAAC,QAAD;IAAM,WAAU;cAEd,kBAAC,QAAD;KACE,cAAY,IAAY,KAAK,KAAA;KAC7B,OAAO,IAAY,EAAE,mBAAmB,EAAY,IAAa,GAAG,KAAA;KACpE,WAAW,EAAG,GAAM,KAAa,2CAA2C;KAC5E,CAAA;IACG,CAAA;GACN,MAAkB,SAAS;GACvB;;EAGZ;AACD,EAAI,cAAc"}