@devalok/shilp-sutra 0.56.0 → 0.57.0

package/dist/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/** Border + background tint per validation state (checked state uses accent regardless). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 bg-error-3',\n  warning: 'border-warning-7 bg-warning-3',\n  success: 'border-success-7 bg-success-3',\n}\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox state={!termsAccepted ? 'error' : 'default'} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n *   indeterminate={someSelected && !allSelected}\n *   checked={allSelected}\n *   onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n  indeterminate?: boolean\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n  sm: 'h-[14px] w-[14px]',\n  md: 'h-[18px] w-[18px]',\n  lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, state: stateProp, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n  // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n  const isControlled = checked !== undefined\n  const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n    indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n  )\n\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n  const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean | 'indeterminate') => {\n      if (!isControlled) setInternalChecked(value)\n      onCheckedChange?.(value)\n    },\n    [isControlled, onCheckedChange],\n  )\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={isControlled || indeterminate ? actualChecked : undefined}\n      defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n      onCheckedChange={handleCheckedChange}\n      className={cn(\n        'touch-target peer flex items-center justify-center shrink-0 rounded-control-inner',\n        checkboxSizeClasses[size],\n        'border border-surface-border-strong',\n        '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',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active',\n        'data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg',\n        'data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg',\n        state && stateTintClasses[state],\n        className,\n      )}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor>\n      // resolves. Without this the label renders, points at nothing, and the\n      // control has NO accessible name — a screen reader announces an unnamed\n      // checkbox even though the consumer wrote FormField + Label correctly.\n      id={props.id ?? fieldCtx.inputId}\n    >\n      <AnimatePresence>\n        {isActive && (\n          <CheckboxPrimitive.Indicator forceMount asChild>\n            <motion.span\n              className=\"flex items-center justify-center text-current\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: durations.fast01 }}\n            >\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                className={checkboxIconClasses[size]}\n              >\n                {actualChecked === 'indeterminate' ? (\n                  <motion.line\n                    x1=\"4\"\n                    y1=\"8\"\n                    x2=\"12\"\n                    y2=\"8\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                ) : (\n                  <motion.path\n                    d=\"M3.5 8.5l3 3 6-6\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    fill=\"none\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                )}\n              </svg>\n            </motion.span>\n          </CheckboxPrimitive.Indicator>\n        )}\n      </AnimatePresence>\n    </CheckboxPrimitive.Root>\n  )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAqCM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAW,EAAM,YAGpB,EAAE,cAAW,OAAO,GAAW,kBAAe,UAAO,MAAM,YAAS,oBAAiB,mBAAgB,GAAG,KAAS,MAAQ;CAE1H,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAM,SAClD,IAAgB,kBAAmB,GACrC,GAEM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAgB,IAAgB,kBAAmB,IAAe,IAAU,GAC5E,IAAW,MAAkB,MAAQ,MAAkB,iBAEvD,IAAsB,EAAM,aAC/B,MAAqC;EAEpC,AADK,KAAc,EAAmB,CAAK,GAC3C,IAAkB,CAAK;CACzB,GACA,CAAC,GAAc,CAAe,CAChC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAS,KAAgB,IAAgB,IAAgB,KAAA;EACzD,gBAAgB,CAAC,KAAgB,CAAC,IAAgB,IAAiB,KAAA;EACnE,iBAAiB;EACjB,WAAW,EACT,qFACA,EAAoB,IACpB,uCACA,2BACA,+DACA,6GACA,gEACA,sGACA,6GACA,+HACA,KAAS,EAAiB,IAC1B,CACF;EACA,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EAKJ,IAAI,EAAM,MAAM,EAAS;YAEzB,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;GAA6B,YAAA;GAAW,SAAA;aACtC,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,EAAE;IACtB,SAAS,EAAE,SAAS,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE;IACnB,YAAY,EAAE,UAAU,EAAU,OAAO;cAEzC,kBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,WAAW,EAAoB;eAE9B,MAAkB,kBACjB,kBAAC,EAAO,MAAR;MACE,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;MACH,QAAO;MACP,aAAY;MACZ,eAAc;MACd,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA,IAED,kBAAC,EAAO,MAAR;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,MAAK;MACL,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA;IAEA,CAAA;GACM,CAAA;EACc,CAAA,EAEhB,CAAA;CACK,CAAA;AAE5B,CAAC;AACD,EAAS,cAAA,EAAqC"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/** Border + background tint per validation state (checked state uses accent regardless). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 bg-error-3',\n  warning: 'border-warning-7 bg-warning-3',\n  success: 'border-success-7 bg-success-3',\n}\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox state={!termsAccepted ? 'error' : 'default'} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n *   indeterminate={someSelected && !allSelected}\n *   checked={allSelected}\n *   onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n  indeterminate?: boolean\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n  sm: 'h-[14px] w-[14px]',\n  md: 'h-[18px] w-[18px]',\n  lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, state: stateProp, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n  // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n  const isControlled = checked !== undefined\n  const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n    indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n  )\n\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n  const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean | 'indeterminate') => {\n      if (!isControlled) setInternalChecked(value)\n      onCheckedChange?.(value)\n    },\n    [isControlled, onCheckedChange],\n  )\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={isControlled || indeterminate ? actualChecked : undefined}\n      defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n      onCheckedChange={handleCheckedChange}\n      className={cn(\n        'touch-target peer flex items-center justify-center shrink-0 rounded-control-inner',\n        checkboxSizeClasses[size],\n        'border border-surface-border-interactive',\n        'bg-surface-panel-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',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-panel-active',\n        'data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg',\n        'data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg',\n        state && stateTintClasses[state],\n        className,\n      )}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor>\n      // resolves. Without this the label renders, points at nothing, and the\n      // control has NO accessible name — a screen reader announces an unnamed\n      // checkbox even though the consumer wrote FormField + Label correctly.\n      id={props.id ?? fieldCtx.inputId}\n    >\n      <AnimatePresence>\n        {isActive && (\n          <CheckboxPrimitive.Indicator forceMount asChild>\n            <motion.span\n              className=\"flex items-center justify-center text-current\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: durations.fast01 }}\n            >\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                className={checkboxIconClasses[size]}\n              >\n                {actualChecked === 'indeterminate' ? (\n                  <motion.line\n                    x1=\"4\"\n                    y1=\"8\"\n                    x2=\"12\"\n                    y2=\"8\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                ) : (\n                  <motion.path\n                    d=\"M3.5 8.5l3 3 6-6\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    fill=\"none\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                )}\n              </svg>\n            </motion.span>\n          </CheckboxPrimitive.Indicator>\n        )}\n      </AnimatePresence>\n    </CheckboxPrimitive.Root>\n  )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAqCM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAW,EAAM,YAGpB,EAAE,cAAW,OAAO,GAAW,kBAAe,UAAO,MAAM,YAAS,oBAAiB,mBAAgB,GAAG,KAAS,MAAQ;CAE1H,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAM,SAClD,IAAgB,kBAAmB,GACrC,GAEM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAgB,IAAgB,kBAAmB,IAAe,IAAU,GAC5E,IAAW,MAAkB,MAAQ,MAAkB,iBAEvD,IAAsB,EAAM,aAC/B,MAAqC;EAEpC,AADK,KAAc,EAAmB,CAAK,GAC3C,IAAkB,CAAK;CACzB,GACA,CAAC,GAAc,CAAe,CAChC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAS,KAAgB,IAAgB,IAAgB,KAAA;EACzD,gBAAgB,CAAC,KAAgB,CAAC,IAAgB,IAAiB,KAAA;EACnE,iBAAiB;EACjB,WAAW,EACT,qFACA,EAAoB,IACpB,4CACA,0BACA,+DACA,6GACA,gEACA,qGACA,6GACA,+HACA,KAAS,EAAiB,IAC1B,CACF;EACA,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EAKJ,IAAI,EAAM,MAAM,EAAS;YAEzB,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;GAA6B,YAAA;GAAW,SAAA;aACtC,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,EAAE;IACtB,SAAS,EAAE,SAAS,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE;IACnB,YAAY,EAAE,UAAU,EAAU,OAAO;cAEzC,kBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,WAAW,EAAoB;eAE9B,MAAkB,kBACjB,kBAAC,EAAO,MAAR;MACE,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;MACH,QAAO;MACP,aAAY;MACZ,eAAc;MACd,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA,IAED,kBAAC,EAAO,MAAR;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,MAAK;MACL,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA;IAEA,CAAA;GACM,CAAA;EACc,CAAA,EAEhB,CAAA;CACK,CAAA;AAE5B,CAAC;AACD,EAAS,cAAA,EAAqC"}

package/dist/ui/code.js

@@ -4,12 +4,12 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/ui/code.tsx
 var r = t.forwardRef(({ className: t, variant: r = "inline", children: i, ...a }, o) => r === "block" ? /* @__PURE__ */ n("pre", {
 	ref: o,
-	className: e("overflow-x-auto rounded-surface border border-card-strong bg-surface-raised p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg", t),
+	className: e("overflow-x-auto rounded-surface border border-card-strong bg-surface-panel p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg", t),
 	...a,
 	children: /* @__PURE__ */ n("code", { children: i })
 }) : /* @__PURE__ */ n("code", {
 	ref: o,
-	className: e("rounded-control-inner bg-surface-raised-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg", t),
+	className: e("rounded-control-inner bg-surface-panel-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg", t),
 	...a,
 	children: i
 }));

package/dist/ui/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-surface border border-card-strong bg-surface-raised p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-control-inner bg-surface-raised-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,iJACA,CACF;CACA,GAAI;WAEJ,kBAAC,QAAD,EAAO,YAAe,CAAA;AACnB,CAAA,IAKP,kBAAC,QAAD;CACO;CACL,WAAW,EACT,6HACA,CACF;CACA,GAAI;CAEH;AACG,CAAA,CAGZ;AACA,EAAK,cAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-surface border border-card-strong bg-surface-panel p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-control-inner bg-surface-panel-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,gJACA,CACF;CACA,GAAI;WAEJ,kBAAC,QAAD,EAAO,YAAe,CAAA;AACnB,CAAA,IAKP,kBAAC,QAAD;CACO;CACL,WAAW,EACT,4HACA,CACF;CACA,GAAI;CAEH;AACG,CAAA,CAGZ;AACA,EAAK,cAAc"}

package/dist/ui/color-input.js

@@ -123,7 +123,7 @@ function _({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
 				onChange: (e) => r(e.target.value),
 				onBlur: i,
 				maxLength: o,
-				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
+				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border-interactive bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
 			})]
 		})]
 	});
@@ -202,7 +202,7 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 				}) : /* @__PURE__ */ u(f.button, {
 					type: "button",
 					disabled: x,
-					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", x && "cursor-not-allowed opacity-50"),
+					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-interactive", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", x && "cursor-not-allowed opacity-50"),
 					whileHover: { scale: 1.02 },
 					whileTap: { scale: .98 },
 					transition: t.snappy,
@@ -412,7 +412,7 @@ var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled:
 											...t.bouncy,
 											delay: r * .02
 										},
-										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", x && "cursor-not-allowed opacity-50"),
+										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border-interactive hover:border-surface-border-interactive-strong", x && "cursor-not-allowed opacity-50"),
 										style: { backgroundColor: e.hex },
 										title: e.label,
 										"aria-label": `${e.label}: ${e.hex}`

package/dist/ui/color-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { useFormField } from './form'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-label-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-body-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    id: externalId,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n    const fieldCtx = useFormField()\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves\n    // onto the (labelable) trigger button. The root is a <div>, which can't be a label target.\n    const triggerId = externalId ?? fieldCtx.inputId\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    // Draft state for the hex field so in-progress (<6 char) typing isn't clobbered\n    // by re-renders off internalColor. null = show the committed color.\n    const [hexDraft, setHexDraft] = React.useState<string | null>(null)\n    React.useEffect(() => { setInternalColor(value); setHexDraft(null) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setHexDraft(null)\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      setHexDraft(null)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={hexDraft ?? internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          setHexDraft(clean.toUpperCase())\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Drop any incomplete draft; display falls back to the\n                          // committed color. A complete value already committed onChange.\n                          setHexDraft(null)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-control-inner border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-caption text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}
+{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { useFormField } from './form'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-label-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-body-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-control-inner border border-surface-border-interactive bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    id: externalId,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n    const fieldCtx = useFormField()\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves\n    // onto the (labelable) trigger button. The root is a <div>, which can't be a label target.\n    const triggerId = externalId ?? fieldCtx.inputId\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    // Draft state for the hex field so in-progress (<6 char) typing isn't clobbered\n    // by re-renders off internalColor. null = show the committed color.\n    const [hexDraft, setHexDraft] = React.useState<string | null>(null)\n    React.useEffect(() => { setInternalColor(value); setHexDraft(null) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setHexDraft(null)\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      setHexDraft(null)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-control border border-surface-border-interactive',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={hexDraft ?? internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          setHexDraft(clean.toUpperCase())\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Drop any incomplete draft; display falls back to the\n                          // committed color. A complete value already committed onChange.\n                          setHexDraft(null)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-control-inner border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border-interactive hover:border-surface-border-interactive-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-caption text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}

package/dist/ui/combobox.js

@@ -19,7 +19,7 @@ var ae = {
 	success: "border-success-7"
 }, _ = g([
 	"flex w-full items-center justify-between whitespace-nowrap rounded-control",
-	"border border-surface-border-strong bg-surface-raised-hover",
+	"border border-surface-border-interactive bg-surface-panel-hover",
 	"transition-colors duration-fast-01 ease-productive-standard",
 	"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
 	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled"
@@ -135,7 +135,7 @@ var ae = {
 						className: r("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
 						children: [t.label, /* @__PURE__ */ d("button", {
 							type: "button",
-							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard",
+							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-panel-hover transition-colors duration-fast-01 ease-productive-standard",
 							onClick: (t) => fe(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,
@@ -163,7 +163,7 @@ var ae = {
 			});
 		}
 		return /* @__PURE__ */ d("span", {
-			className: "min-w-0 flex-1 truncate text-left text-surface-fg-subtle",
+			className: "min-w-0 flex-1 truncate text-left text-surface-fg-muted",
 			children: T
 		});
 	}, Q = a(), $ = o(M, Q.state), ve = $ === "error", ye = Q.helperTextId, be = Q.required;
@@ -231,7 +231,7 @@ var ae = {
 						}), /* @__PURE__ */ d("input", {
 							ref: H,
 							type: "text",
-							className: "flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-subtle",
+							className: "flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-muted",
 							placeholder: oe,
 							value: R,
 							onChange: (e) => {

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    // Trigger is a div[role=combobox] (so chip remove-buttons in multi-select\n    // aren't nested in a <button>), so disabled styling keys off data-disabled,\n    // not the :disabled pseudo-class.\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"min-w-0 flex-1 truncate text-left text-surface-fg-subtle\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          {/* role=combobox on a <div>, NOT a <button> — a native button can't\n              legally contain the chip remove-<button>s rendered in multi-select\n              (invalid HTML + a11y break). This is the W3C select-only combobox\n              pattern. Radix Trigger wires click/toggle; we add the keyboard-open\n              (Enter/Space/ArrowDown) a real button would have given for free. */}\n          <div\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            data-disabled={disabled || undefined}\n            id={externalId}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            // The trigger is a div[role=combobox] — non-labellable, so `<Label htmlFor>`\n            // can't target it. Inside a FormField, adopt the label's id via\n            // aria-labelledby; explicit accessibleLabel wins; placeholder is the\n            // standalone fallback.\n            aria-labelledby={accessibleLabel ? undefined : fieldCtx.labelId}\n            aria-label={accessibleLabel ?? (fieldCtx.labelId ? undefined : placeholder)}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            onKeyDown={(e) => {\n              if (disabled) return\n              if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                e.preventDefault()\n                handleOpenChange(true)\n              }\n            }}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              'cursor-pointer',\n              open && 'border-accent-7',\n              state && stateBorderClasses[state],\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </div>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-subtle\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                <IconProvider size={resolvedIconSize}>\n                                  {normalizeIcon(option.icon)}\n                                </IconProvider>\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-body-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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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-interactive bg-surface-panel-hover',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    // Trigger is a div[role=combobox] (so chip remove-buttons in multi-select\n    // aren't nested in a <button>), so disabled styling keys off data-disabled,\n    // not the :disabled pseudo-class.\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-panel-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-muted\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          {/* role=combobox on a <div>, NOT a <button> — a native button can't\n              legally contain the chip remove-<button>s rendered in multi-select\n              (invalid HTML + a11y break). This is the W3C select-only combobox\n              pattern. Radix Trigger wires click/toggle; we add the keyboard-open\n              (Enter/Space/ArrowDown) a real button would have given for free. */}\n          <div\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            data-disabled={disabled || undefined}\n            id={externalId}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            // The trigger is a div[role=combobox] — non-labellable, so `<Label htmlFor>`\n            // can't target it. Inside a FormField, adopt the label's id via\n            // aria-labelledby; explicit accessibleLabel wins; placeholder is the\n            // standalone fallback.\n            aria-labelledby={accessibleLabel ? undefined : fieldCtx.labelId}\n            aria-label={accessibleLabel ?? (fieldCtx.labelId ? undefined : placeholder)}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            onKeyDown={(e) => {\n              if (disabled) return\n              if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                e.preventDefault()\n                handleOpenChange(true)\n              }\n            }}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              'cursor-pointer',\n              open && 'border-accent-7',\n              state && stateBorderClasses[state],\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </div>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-muted\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                <IconProvider size={resolvedIconSize}>\n                                  {normalizeIcon(option.icon)}\n                                </IconProvider>\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-body-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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"}

package/dist/ui/context-menu.js

@@ -37,7 +37,7 @@ var A = v, j = o, M = u, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, .
 N.displayName = "ContextMenuSub";
 var P = d, F = y.forwardRef(({ className: e, inset: t, children: i, ...a }, o) => /* @__PURE__ */ x(_, {
 	ref: o,
-	className: n("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
+	className: n("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[state=open]:bg-surface-panel-hover data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
 	...a,
 	children: [i, /* @__PURE__ */ b(r, {
 		icon: C,
@@ -105,13 +105,13 @@ var L = y.forwardRef(({ className: r, children: i, ...o }, s) => /* @__PURE__ */
 L.displayName = a.displayName;
 var R = y.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ b(s, {
 	ref: i,
-	className: n("relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
+	className: n("relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
 	...r
 }));
 R.displayName = s.displayName;
 var z = y.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /* @__PURE__ */ x(i, {
 	ref: s,
-	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	checked: a,
 	...o,
 	children: [/* @__PURE__ */ b("span", {
@@ -125,7 +125,7 @@ var z = y.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /*
 z.displayName = i.displayName;
 var B = y.forwardRef(({ className: e, children: t, ...i }, a) => /* @__PURE__ */ x(f, {
 	ref: a,
-	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...i,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",

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-body-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-body-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-body-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-body-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-body-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-body-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":";;;;;;;;;;AAaA,IAAM,IAAyB,EAAM,cAAc,EAAK,GAClD,IAA4B,EAAM,cAAc,EAAK,GAErD,KAA2F,EAC/F,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GAEtC,IAAmB,EAAM,aAC5B,MAAmB;EAElB,AADA,EAAQ,CAAK,GACb,IAAe,CAAK;CACtB,GACA,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,EAAuB,UAAxB;EAAiC,OAAO;YACtC,kBAAC,GAAD;GAA2B,cAAc;GAAkB,GAAI;EAAQ,CAAA;CACxC,CAAA;AAErC;AACA,EAAY,cAAc;AAE1B,IAAM,IAAqB,GAErB,IAAmB,GAEnB,IAAoB,GAEpB,KAA6F,EACjG,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,CAAW,GACpE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;EAElB,AADK,KAAc,EAAoB,CAAK,GAC5C,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAY,CAC7B;CAEA,OACE,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;YACzC,kBAAC,GAAD;GAAgC;GAAM,cAAc;GAAkB,GAAI;EAAQ,CAAA;CAChD,CAAA;AAExC;AACA,EAAe,cAAc;AAE7B,IAAM,IAAwB,GAExB,IAAwB,EAAM,YAKjC,EAAE,cAAW,UAAO,aAAU,GAAG,KAAS,MAC3C,kBAAC,GAAD;CACO;CACL,WAAW,EACT,mOACA,KAAS,YACT,CACF;CACA,GAAI;WAPN,CASG,GACD,kBAAC,GAAD;EAAM,MAAM;EAAkB,MAAK;EAAK,WAAU;CAAW,CAAA,CAC9B;EAClC;AACD,EAAsB,cAAA,EAA8C;AAEpE,IAAM,IAAwB,EAAM,YAGjC,EAAE,cAAW,aAAU,GAAG,KAAS,MAIlC,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,CAIzB,KACC,kBAAC,GAAD;CACO;CACL,YAAA;CACA,SAAA;CACA,GAAI;WAEJ,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,OAAO;EAAK;EACnC,SAAS;GAAE,SAAS;GAAG,OAAO;EAAE;EAChC,MAAM;GAAE,SAAS;GAAG,OAAO;EAAK;EAChC,YAAY;GAAE,GAAG,EAAQ;GAAQ,SAAS,EAAO;EAAK;EACtD,WAAW,EACT,qHACA,CACF;EAEC;CACS,CAAA;AACmB,CAAA,EAEpB,CAAA,CAEpB;AACD,EAAsB,cAAA,EAA8C;AAEpE,IAAM,IAAqB,EAAM,YAG9B,EAAE,cAAW,aAAU,GAAG,KAAS,MAIlC,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,CAIzB,KACC,kBAAC,GAAD;CAA6B,YAAA;WAC3B,kBAAC,GAAD;EACO;EACL,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;GAAK;GACnC,SAAS;IAAE,SAAS;IAAG,OAAO;GAAE;GAChC,MAAM;IAAE,SAAS;IAAG,OAAO;GAAK;GAChC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;GAAK;GACtD,WAAW,EACT,wFACA,CACF;GAEC;EACS,CAAA;CACgB,CAAA;AACH,CAAA,EAEhB,CAAA,CAEpB;AACD,EAAmB,cAAA,EAA2C;AAE9D,IAAM,IAAkB,EAAM,YAK3B,EAAE,cAAW,UAAO,GAAG,KAAS,MACjC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,kPACA,KAAS,YACT,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAgB,cAAA,EAAwC;AAExD,IAAM,IAA0B,EAAM,YAGnC,EAAE,cAAW,aAAU,YAAS,GAAG,KAAS,MAC7C,kBAAC,GAAD;CACO;CACL,WAAW,EACT,2PACA,CACF;CACS;CACT,GAAI;WAPN,CASE,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAM,MAAM;GAAW,MAAK;EAAM,CAAA,EACA,CAAA;CAChC,CAAA,GACL,CACgC;EACpC;AACD,EAAwB,cAAA,EACY;AAEpC,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,2PACA,CACF;CACA,GAAI;WANN,CAQE,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAM,MAAM;GAAY,MAAK;GAAK,WAAU;EAAgB,CAAA,EAC1B,CAAA;CAChC,CAAA,GACL,CAC6B;EACjC;AACD,EAAqB,cAAA,EAA6C;AAElE,IAAM,IAAmB,EAAM,YAK5B,EAAE,cAAW,UAAO,GAAG,KAAS,MACjC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,iEACA,KAAS,YACT,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAA,EAAyC;AAE1D,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,6CAA6C,CAAS;CACpE,GAAI;AACL,CAAA,CACF;AACD,EAAqB,cAAA,EAA6C;AAElE,IAAM,KAAuB,EAC3B,cACA,GAAG,QAGD,kBAAC,QAAD;CACE,WAAW,EACT,+CACA,CACF;CACA,GAAI;AACL,CAAA;AAGL,EAAoB,cAAc"}
+{"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-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[state=open]:bg-surface-panel-hover 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-body-md outline-hidden focus:bg-surface-panel-hover 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-body-md outline-hidden focus:bg-surface-panel-hover 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-body-md outline-hidden focus:bg-surface-panel-hover 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-body-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-body-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

@@ -1,11 +1,13 @@
 import { VirtualItem } from '@tanstack/react-virtual';
 import { default as React } from 'react';
-export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResultsText, emptyState, virtualItems, totalVirtualSize, }: {
+export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResultsText, emptyState, virtualItems, totalVirtualSize, measureRow, }: {
     loading?: boolean;
     skeletonRowCount: number;
     noResultsText?: string;
     emptyState?: React.ReactNode;
     virtualItems?: VirtualItem[];
     totalVirtualSize?: number;
+    /** `virtualizer.measureElement` — attached to each virtual row group */
+    measureRow?: (node: HTMLTableSectionElement | null) => void;
 }): 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,qBAmEA"}
+{"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;AA6PvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,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;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,GAAG,IAAI,KAAK,IAAI,CAAA;CAC5D,qBAoFA"}