@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        solid: '',\n        outline: '',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    compoundVariants: [\n      // subtle (surface bg) — default, matches previous behavior\n      { variant: 'subtle', color: 'info', className: 'bg-info-2 border-info-4 text-info-11' },\n      { variant: 'subtle', color: 'success', className: 'bg-success-2 border-success-4 text-success-11' },\n      { variant: 'subtle', color: 'warning', className: 'bg-warning-2 border-warning-4 text-warning-11' },\n      { variant: 'subtle', color: 'error', className: 'bg-error-2 border-error-4 text-error-11' },\n      { variant: 'subtle', color: 'neutral', className: 'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n      // solid (solid bg, contrasting text) — canonical name\n      { variant: 'solid', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n      { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n      { variant: 'solid', color: 'neutral', className: 'bg-surface-panel-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted' },\n      // outline (transparent bg, colored border)\n      { variant: 'outline', color: 'info', className: 'bg-transparent border-info-7 text-info-11' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent border-success-7 text-success-11' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent border-warning-7 text-warning-11' },\n      { variant: 'outline', color: 'error', className: 'bg-transparent border-error-7 text-error-11' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ opacity: 1, y: 0 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={springs.snappy}\n            className={cn(alertVariants({ variant, color, size }), className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n            <div className=\"flex-1 min-w-0\">\n              {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n              {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                  saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                  there drops contrast below WCAG AA. Only mute on subtle/outline\n                  variants where the root color is a readable step-11. */}\n              <div\n                className={cn(\n                  textClass,\n                  variant !== 'solid' && 'text-surface-fg-muted',\n                )}\n              >\n                {children}\n              </div>\n            </div>\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className={cn(\n                  'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                  // On solid the fill is a saturated step 9, where a mid grey\n                  // measures as low as 1.01:1. Inherit the alert's own foreground,\n                  // exactly as the title and body already do.\n                  variant === 'solid'\n                    ? 'text-current opacity-80 hover:opacity-100'\n                    : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n                )}\n                aria-label=\"Dismiss\"\n              >\n                <Icon icon={IconX} size={dismissIconSize} />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      // Colour is a role; the hue arrives via `data-palette` on the element.\n      // Alert's subtle edge was already step 4, which is what the `border` role\n      // now resolves to, so it is an exact match rather than a compromise.\n      variant: {\n        subtle: 'bg-palette-subtle border-palette-border text-palette-text',\n        solid:\n          'bg-palette-solid text-palette-fg border-transparent [&>svg]:text-palette-fg',\n        outline: 'bg-transparent border-palette-border text-palette-text',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    // Fifteen compounds become three, all of them `neutral`. A neutral alert is\n    // not a grey version of a coloured one — it is a plain panel, so its ground\n    // and its text come from the surface family rather than a ramp, and its icon\n    // steps back to muted instead of matching the label.\n    compoundVariants: [\n      {\n        variant: 'subtle',\n        color: 'neutral',\n        className: 'bg-surface-panel text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n      {\n        variant: 'solid',\n        color: 'neutral',\n        className: 'bg-surface-panel-hover text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n      {\n        variant: 'outline',\n        color: 'neutral',\n        className: 'text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <MotionPreference>\n        <AnimatePresence onExitComplete={onDismiss}>\n          {isVisible && (\n            <motion.div\n              ref={ref}\n              initial={{ opacity: 1, y: 0 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -8 }}\n              transition={springs.snappy}\n              data-palette={color}\n              className={cn(alertVariants({ variant, color, size }), className)}\n              role=\"alert\"\n              {...motionProps(props)}\n            >\n              <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n              <div className=\"flex-1 min-w-0\">\n                {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n                {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                    saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                    there drops contrast below WCAG AA. Only mute on subtle/outline\n                    variants where the root color is a readable step-11. */}\n                <div\n                  className={cn(\n                    textClass,\n                    variant !== 'solid' && 'text-surface-fg-muted',\n                  )}\n                >\n                  {children}\n                </div>\n              </div>\n              {onDismiss && (\n                <button\n                  type=\"button\"\n                  onClick={handleDismiss}\n                  className={cn(\n                    'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                    // On solid the fill is a saturated step 9, where a mid grey\n                    // measures as low as 1.01:1. Inherit the alert's own foreground,\n                    // exactly as the title and body already do.\n                    variant === 'solid'\n                      ? 'text-current opacity-80 hover:opacity-100'\n                      : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n                  )}\n                  aria-label=\"Dismiss\"\n                >\n                  <Icon icon={IconX} size={dismissIconSize} />\n                </button>\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionPreference>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAgB,EACpB,wCACA;CACE,UAAU;EAIR,SAAS;GACP,QAAQ;GACR,OACE;GACF,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CAKA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAU,OAAO;EAAQ,MAAM;CAAK;AAClE,CACF,GAEM,IAAoE;CACxE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GAmDM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,UAAU,WAAQ,QAAQ,UAAO,MAAM,UAAO,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC7G,IAAM,IAAY,EAAY,KAAS,SACjC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC,GAEC,IAAW,MAAS,OAAO,OAAO,MAAS,OAAO,OAAO,MACzD,IAAkB,MAAS,OAAO,OAAO,MACzC,IAAY,MAAS,OAAO,iBAAiC,gBAC7D,IAAa,MAAS,OAAO,iBAAiB,MAAS,OAAO,oBAAoB;CAExF,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,MAAM;IAAE,SAAS;IAAG,GAAG;GAAG;GAC1B,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EAAG,EAAc;IAAE;IAAS;IAAO;GAAK,CAAC,GAAG,CAAS;GAChE,MAAK;GACL,GAAI,EAAY,CAAK;aATvB;IAWE,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAU,WAAU;IAAqB,CAAA;IACtE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KAAS,kBAAC,KAAD;MAAG,WAAW,EAAG,GAAY,wBAAwB;gBAAI;KAAS,CAAA,GAK5E,kBAAC,OAAD;MACE,WAAW,EACT,GACA,MAAY,WAAW,uBACzB;MAEC;KACE,CAAA,CACF;;IACJ,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAW,EACT,qPAIA,MAAY,UACR,8CACA,iFACN;KACA,cAAW;eAEX,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAM;KAAkB,CAAA;IACrC,CAAA;GAEA;;CAEC,CAAA,EACD,CAAA;AAEtB,CACF;AACA,EAAM,cAAc"}

package/dist/ui/autocomplete.js

@@ -1,17 +1,17 @@
 "use client";
-import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives-internal.js";
-import { tweens as o } from "./lib/motion.js";
+import { autoUpdate as e, flip as t, offset as n, shift as ee, size as r, useFloating as i } from "../_chunks/primitives-internal.js";
+import { tweens as a } from "./lib/motion.js";
+import { useMotion as o } from "../_chunks/motion-provider.js";
 import { cn as s } from "./lib/utils.js";
 import { Spinner as c } from "./spinner.js";
-import { useMotion as l } from "../_chunks/motion-provider.js";
-import { useFormField as u } from "./form.js";
-import { Input as ee } from "./input.js";
+import { useFormField as l } from "./form.js";
+import { Input as u } from "./input.js";
 import * as d from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
-import { AnimatePresence as g, motion as _ } from "framer-motion";
+import { createPortal as te } from "react-dom";
+import { AnimatePresence as h, motion as g } from "framer-motion";
 //#region src/ui/autocomplete.tsx
-function v({ label: e, query: t }) {
+function _({ label: e, query: t }) {
 	let n = t ? e.toLowerCase().indexOf(t.toLowerCase()) : -1;
 	return n === -1 ? /* @__PURE__ */ p(f, { children: e }) : /* @__PURE__ */ m(f, { children: [
 		e.slice(0, n),
@@ -22,130 +22,130 @@ function v({ label: e, query: t }) {
 		e.slice(n + t.length)
 	] });
 }
-var y = d.forwardRef(({ options: f, value: y, defaultValue: b = null, onValueChange: x, placeholder: S, emptyText: C = "No options", disabled: w, size: T, state: E, isLoading: D = !1, loadingText: O = "Loading…", renderOption: k, className: A, id: j, ...M }, N) => {
-	let te = d.useId(), P = j || te, F = `${P}-listbox`, I = `${P}-option`, L = y !== void 0, [R, z] = d.useState(b), B = L ? y : R, [V, H] = d.useState(B?.label ?? ""), [U, W] = d.useState(!1), [G, K] = d.useState(-1), q = d.useRef(null), J = d.useRef(null), Y = d.useRef(null), { reducedMotion: X } = l(), { refs: Z, floatingStyles: ne } = a({
-		open: U,
+var v = d.forwardRef(({ options: f, value: v, defaultValue: y = null, onValueChange: b, placeholder: x, emptyText: S = "No options", disabled: C, size: w, state: T, isLoading: E = !1, loadingText: D = "Loading…", renderOption: O, className: k, id: A, ...ne }, j) => {
+	let M = d.useId(), N = A || M, P = `${N}-listbox`, F = `${N}-option`, I = v !== void 0, [L, R] = d.useState(y), z = I ? v : L, [B, V] = d.useState(z?.label ?? ""), [H, U] = d.useState(!1), [W, G] = d.useState(-1), K = d.useRef(null), q = d.useRef(null), J = d.useRef(null), { reducedMotion: Y } = o(), { refs: X, floatingStyles: re } = i({
+		open: H,
 		placement: "bottom-start",
 		whileElementsMounted: e,
 		middleware: [
 			n(4),
 			t(),
-			r(),
-			i({ apply({ availableHeight: e, rects: t, elements: n }) {
+			ee(),
+			r({ apply({ availableHeight: e, rects: t, elements: n }) {
 				Object.assign(n.floating.style, {
 					maxHeight: `${Math.min(e, 240)}px`,
 					width: `${t.reference.width}px`
 				});
 			} })
 		]
-	}), re = d.useCallback((e) => {
-		J.current = e, Z.setReference(e);
-	}, [Z]), ie = d.useCallback((e) => {
-		q.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
-	}, [N]), ae = d.useCallback((e) => {
-		Y.current = e, Z.setFloating(e);
-	}, [Z]);
+	}), ie = d.useCallback((e) => {
+		q.current = e, X.setReference(e);
+	}, [X]), ae = d.useCallback((e) => {
+		K.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+	}, [j]), oe = d.useCallback((e) => {
+		J.current = e, X.setFloating(e);
+	}, [X]);
 	d.useEffect(() => {
-		H(B?.label ?? "");
-	}, [B]);
-	let Q = d.useMemo(() => V ? f.filter((e) => e.label.toLowerCase().includes(V.toLowerCase())) : f, [f, V]), $ = d.useCallback((e) => {
-		H(e.label), W(!1), K(-1), L || z(e), x?.(e);
-	}, [L, x]), oe = d.useCallback((e) => {
-		if (!w) {
-			if (!U) {
-				(e.key === "ArrowDown" || e.key === "Enter") && W(!0);
+		V(z?.label ?? "");
+	}, [z]);
+	let Z = d.useMemo(() => B ? f.filter((e) => e.label.toLowerCase().includes(B.toLowerCase())) : f, [f, B]), Q = d.useCallback((e) => {
+		V(e.label), U(!1), G(-1), I || R(e), b?.(e);
+	}, [I, b]), $ = d.useCallback((e) => {
+		if (!C) {
+			if (!H) {
+				(e.key === "ArrowDown" || e.key === "Enter") && U(!0);
 				return;
 			}
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), K((e) => Math.min(e + 1, Q.length - 1));
+					e.preventDefault(), G((e) => Math.min(e + 1, Z.length - 1));
 					break;
 				case "ArrowUp":
-					e.preventDefault(), K((e) => Math.max(e - 1, 0));
+					e.preventDefault(), G((e) => Math.max(e - 1, 0));
 					break;
 				case "Home":
-					e.preventDefault(), K(0);
+					e.preventDefault(), G(0);
 					break;
 				case "End":
-					e.preventDefault(), K(Q.length - 1);
+					e.preventDefault(), G(Z.length - 1);
 					break;
 				case "Enter":
-					e.preventDefault(), G >= 0 && Q[G] && $(Q[G]);
+					e.preventDefault(), W >= 0 && Z[W] && Q(Z[W]);
 					break;
 				case "Escape":
-					W(!1), K(-1);
+					U(!1), G(-1);
 					break;
 			}
 		}
 	}, [
-		w,
-		U,
-		Q,
-		G,
-		$
-	]), se = u(), ce = !!(j || se.inputId), le = G >= 0 ? `${I}-${G}` : void 0;
+		C,
+		H,
+		Z,
+		W,
+		Q
+	]), se = l(), ce = !!(A || se.inputId), le = W >= 0 ? `${F}-${W}` : void 0;
 	return /* @__PURE__ */ m("div", {
-		ref: re,
-		className: s("relative", A),
-		...M,
-		children: [/* @__PURE__ */ p(ee, {
-			ref: ie,
+		ref: ie,
+		className: s("relative", k),
+		...ne,
+		children: [/* @__PURE__ */ p(u, {
+			ref: ae,
 			type: "text",
 			role: "combobox",
-			size: T,
-			state: E,
-			id: j,
-			value: V,
-			placeholder: S,
-			disabled: w,
-			"aria-expanded": U,
+			size: w,
+			state: T,
+			id: A,
+			value: B,
+			placeholder: x,
+			disabled: C,
+			"aria-expanded": H,
 			"aria-autocomplete": "list",
-			"aria-controls": U ? F : void 0,
+			"aria-controls": H ? P : void 0,
 			"aria-activedescendant": le,
-			"aria-label": ce ? void 0 : S,
-			endSection: D ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
+			"aria-label": ce ? void 0 : x,
+			endSection: E ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
 			onChange: (e) => {
-				H(e.target.value), W(!0), K(-1);
+				V(e.target.value), U(!0), G(-1);
 			},
-			onFocus: () => W(!0),
+			onFocus: () => U(!0),
 			onBlur: (e) => {
 				let t = e.relatedTarget;
-				!J.current?.contains(t) && !Y.current?.contains(t) && W(!1);
+				!q.current?.contains(t) && !J.current?.contains(t) && U(!1);
 			},
-			onKeyDown: oe
-		}), typeof document < "u" && h(/* @__PURE__ */ p(g, { children: U && /* @__PURE__ */ p(_.ul, {
-			id: F,
-			ref: ae,
+			onKeyDown: $
+		}), typeof document < "u" && te(/* @__PURE__ */ p(h, { children: H && /* @__PURE__ */ p(g.ul, {
+			id: P,
+			ref: oe,
 			role: "listbox",
-			initial: !X && { opacity: 0 },
+			initial: !Y && { opacity: 0 },
 			animate: { opacity: 1 },
-			exit: X ? { opacity: 1 } : { opacity: 0 },
-			transition: X ? { duration: 0 } : o.fade,
-			style: ne,
+			exit: Y ? { opacity: 1 } : { opacity: 0 },
+			transition: Y ? { duration: 0 } : a.fade,
+			style: re,
 			className: "z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover",
-			children: D ? /* @__PURE__ */ m("li", {
+			children: E ? /* @__PURE__ */ m("li", {
 				className: "flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: [/* @__PURE__ */ p(c, { size: "sm" }), O]
-			}) : Q.length === 0 ? /* @__PURE__ */ p("li", {
+				children: [/* @__PURE__ */ p(c, { size: "sm" }), D]
+			}) : Z.length === 0 ? /* @__PURE__ */ p("li", {
 				className: "px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: C
-			}) : Q.map((e, t) => /* @__PURE__ */ p("li", {
-				id: `${I}-${t}`,
+				children: S
+			}) : Z.map((e, t) => /* @__PURE__ */ p("li", {
+				id: `${F}-${t}`,
 				role: "option",
-				"aria-selected": G === t,
+				"aria-selected": W === t,
 				title: e.label,
-				className: s("cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", G === t && "bg-accent-3", B?.value === e.value && "font-semibold"),
+				className: s("cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", W === t && "bg-accent-4", z?.value === e.value && "font-semibold"),
 				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => $(e),
-				onMouseEnter: () => K(t),
-				children: k ? k(e, V) : /* @__PURE__ */ p(v, {
+				onClick: () => Q(e),
+				onMouseEnter: () => G(t),
+				children: O ? O(e, B) : /* @__PURE__ */ p(_, {
 					label: e.label,
-					query: V
+					query: B
 				})
 			}, e.value))
 		}) }), document.body)]
 	});
 });
-y.displayName = "Autocomplete";
+v.displayName = "Autocomplete";
 //#endregion
-export { y as Autocomplete };
+export { v as Autocomplete };

package/dist/ui/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, flip, offset, shift, size as sizeMiddleware, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { useFormField } from './form'\nimport { Input, type InputProps } from './input'\nimport { tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport type AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * A free-text input with a live-filtered dropdown, keyboard navigation, and\n * combobox ARIA. The field itself is the DS `Input`, so it inherits size,\n * error/state painting, read-only, hover, and FormField wiring.\n *\n * Free-text (no forced selection) — for enforced selection use `Combobox`.\n * `value`/`defaultValue` are a full `AutocompleteOption` (or null).\n */\nexport type AutocompleteProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  options: AutocompleteOption[]\n  /** Controlled selection. */\n  value?: AutocompleteOption | null\n  /** Initial selection for uncontrolled mode. */\n  defaultValue?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  /** Input size (forwarded to the composed `Input`). */\n  size?: InputProps['size']\n  /** Field state (forwarded to `Input`); overrides FormField auto-consumption. */\n  state?: InputProps['state']\n  /** Show a loading spinner + `loadingText` (async \"type to search\"). */\n  isLoading?: boolean\n  loadingText?: string\n  /** Custom option renderer. Receives the option and the current query. */\n  renderOption?: (option: AutocompleteOption, query: string) => React.ReactNode\n  className?: string\n  id?: string\n}\n\n/** Bold the matched substring inside an option label. */\nfunction HighlightMatch({ label, query }: { label: string; query: string }) {\n  const idx = query ? label.toLowerCase().indexOf(query.toLowerCase()) : -1\n  if (idx === -1) return <>{label}</>\n  return (\n    <>\n      {label.slice(0, idx)}\n      <span className=\"font-semibold text-accent-11\">{label.slice(idx, idx + query.length)}</span>\n      {label.slice(idx + query.length)}\n    </>\n  )\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      defaultValue = null,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      size,\n      state,\n      isLoading = false,\n      loadingText = 'Loading…',\n      renderOption,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    // Controlled / uncontrolled selection\n    const isControlled = value !== undefined\n    const [internalValue, setInternalValue] = React.useState<AutocompleteOption | null>(defaultValue)\n    const selected = isControlled ? value : internalValue\n\n    const [query, setQuery] = React.useState(selected?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n    const { reducedMotion } = useMotion()\n\n    // Floating UI — anchor the dropdown to the whole field (container width)\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        sizeMiddleware({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    const setContainer = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        containerRef.current = node\n        refs.setReference(node)\n      },\n      [refs],\n    )\n\n    const composedInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref],\n    )\n\n    const setFloating = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        floatingRef.current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when the selection changes externally\n    React.useEffect(() => {\n      setQuery(selected?.label ?? '')\n    }, [selected])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        if (!isControlled) setInternalValue(option)\n        onValueChange?.(option)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Home':\n            e.preventDefault()\n            setHighlightedIndex(0)\n            break\n          case 'End':\n            e.preventDefault()\n            setHighlightedIndex(filtered.length - 1)\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) handleSelect(filtered[highlightedIndex])\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [disabled, isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    // FormField wiring is auto-consumed by Input; only used here to decide the\n    // standalone accessible-name fallback + the combobox aria-controls id.\n    const fieldCtx = useFormField()\n    const hasFieldName = !!(externalId || fieldCtx.inputId)\n    const highlightedOptionId = highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={setContainer} className={cn('relative', className)} {...props}>\n        <Input\n          ref={composedInputRef}\n          type=\"text\"\n          role=\"combobox\"\n          size={size}\n          state={state}\n          id={externalId}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-label={hasFieldName ? undefined : placeholder}\n          endSection={isLoading ? <Spinner size=\"sm\" /> : undefined}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            const target = e.relatedTarget as Node | null\n            if (!containerRef.current?.contains(target) && !floatingRef.current?.contains(target)) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={setFloating}\n                  role=\"listbox\"\n                  initial={reducedMotion ? false : { opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={reducedMotion ? { opacity: 1 } : { opacity: 0 }}\n                  transition={reducedMotion ? { duration: 0 } : tweens.fade}\n                  style={floatingStyles}\n                  className=\"z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover\"\n                >\n                  {isLoading ? (\n                    <li className=\"flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">\n                      <Spinner size=\"sm\" />\n                      {loadingText}\n                    </li>\n                  ) : filtered.length === 0 ? (\n                    <li className=\"px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">{emptyText}</li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- WAI-ARIA combobox: keyboard nav is on the input via aria-activedescendant; options are pointer affordances, not focusable tab stops\n                      <li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        title={option.label}\n                        className={cn(\n                          'cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          selected?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {renderOption ? renderOption(option, query) : <HighlightMatch label={option.label} query={query} />}\n                      </li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete }\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, flip, offset, shift, size as sizeMiddleware, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { useFormField } from './form'\nimport { Input, type InputProps } from './input'\nimport { tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport type AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * A free-text input with a live-filtered dropdown, keyboard navigation, and\n * combobox ARIA. The field itself is the DS `Input`, so it inherits size,\n * error/state painting, read-only, hover, and FormField wiring.\n *\n * Free-text (no forced selection) — for enforced selection use `Combobox`.\n * `value`/`defaultValue` are a full `AutocompleteOption` (or null).\n */\nexport type AutocompleteProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  options: AutocompleteOption[]\n  /** Controlled selection. */\n  value?: AutocompleteOption | null\n  /** Initial selection for uncontrolled mode. */\n  defaultValue?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  /** Input size (forwarded to the composed `Input`). */\n  size?: InputProps['size']\n  /** Field state (forwarded to `Input`); overrides FormField auto-consumption. */\n  state?: InputProps['state']\n  /** Show a loading spinner + `loadingText` (async \"type to search\"). */\n  isLoading?: boolean\n  loadingText?: string\n  /** Custom option renderer. Receives the option and the current query. */\n  renderOption?: (option: AutocompleteOption, query: string) => React.ReactNode\n  className?: string\n  id?: string\n}\n\n/** Bold the matched substring inside an option label. */\nfunction HighlightMatch({ label, query }: { label: string; query: string }) {\n  const idx = query ? label.toLowerCase().indexOf(query.toLowerCase()) : -1\n  if (idx === -1) return <>{label}</>\n  return (\n    <>\n      {label.slice(0, idx)}\n      <span className=\"font-semibold text-accent-11\">{label.slice(idx, idx + query.length)}</span>\n      {label.slice(idx + query.length)}\n    </>\n  )\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      defaultValue = null,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      size,\n      state,\n      isLoading = false,\n      loadingText = 'Loading…',\n      renderOption,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    // Controlled / uncontrolled selection\n    const isControlled = value !== undefined\n    const [internalValue, setInternalValue] = React.useState<AutocompleteOption | null>(defaultValue)\n    const selected = isControlled ? value : internalValue\n\n    const [query, setQuery] = React.useState(selected?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n    const { reducedMotion } = useMotion()\n\n    // Floating UI — anchor the dropdown to the whole field (container width)\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        sizeMiddleware({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    const setContainer = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        containerRef.current = node\n        refs.setReference(node)\n      },\n      [refs],\n    )\n\n    const composedInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref],\n    )\n\n    const setFloating = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        floatingRef.current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when the selection changes externally\n    React.useEffect(() => {\n      setQuery(selected?.label ?? '')\n    }, [selected])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        if (!isControlled) setInternalValue(option)\n        onValueChange?.(option)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Home':\n            e.preventDefault()\n            setHighlightedIndex(0)\n            break\n          case 'End':\n            e.preventDefault()\n            setHighlightedIndex(filtered.length - 1)\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) handleSelect(filtered[highlightedIndex])\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [disabled, isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    // FormField wiring is auto-consumed by Input; only used here to decide the\n    // standalone accessible-name fallback + the combobox aria-controls id.\n    const fieldCtx = useFormField()\n    const hasFieldName = !!(externalId || fieldCtx.inputId)\n    const highlightedOptionId = highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={setContainer} className={cn('relative', className)} {...props}>\n        <Input\n          ref={composedInputRef}\n          type=\"text\"\n          role=\"combobox\"\n          size={size}\n          state={state}\n          id={externalId}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-label={hasFieldName ? undefined : placeholder}\n          endSection={isLoading ? <Spinner size=\"sm\" /> : undefined}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            const target = e.relatedTarget as Node | null\n            if (!containerRef.current?.contains(target) && !floatingRef.current?.contains(target)) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={setFloating}\n                  role=\"listbox\"\n                  initial={reducedMotion ? false : { opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={reducedMotion ? { opacity: 1 } : { opacity: 0 }}\n                  transition={reducedMotion ? { duration: 0 } : tweens.fade}\n                  style={floatingStyles}\n                  className=\"z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover\"\n                >\n                  {isLoading ? (\n                    <li className=\"flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">\n                      <Spinner size=\"sm\" />\n                      {loadingText}\n                    </li>\n                  ) : filtered.length === 0 ? (\n                    <li className=\"px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">{emptyText}</li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- WAI-ARIA combobox: keyboard nav is on the input via aria-activedescendant; options are pointer affordances, not focusable tab stops\n                      <li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        title={option.label}\n                        className={cn(\n                          'cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-4',\n                          selected?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {renderOption ? renderOption(option, query) : <HighlightMatch label={option.label} query={query} />}\n                      </li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete }\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA4EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA8EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAkBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}

package/dist/ui/avatar.js

@@ -1,15 +1,16 @@
 "use client";
 import { springs as e } from "./lib/motion.js";
-import { cn as t } from "./lib/utils.js";
-import { Fallback as n, Image as r, Root as i } from "../_chunks/primitives/react-avatar.js";
-import { Dot as a } from "./dot.js";
-import { Skeleton as o } from "./skeleton.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { motion as u } from "framer-motion";
-import { cva as d } from "class-variance-authority";
+import { MotionPreference as t } from "../_chunks/motion-preference.js";
+import { cn as n } from "./lib/utils.js";
+import { Fallback as r, Image as i, Root as a } from "../_chunks/primitives/react-avatar.js";
+import { Dot as o } from "./dot.js";
+import { Skeleton as s } from "./skeleton.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { motion as d } from "framer-motion";
+import { cva as f } from "class-variance-authority";
 //#region src/ui/avatar.tsx
-var f = s.createContext("circle"), p = s.createContext("md"), m = d("relative flex shrink-0 overflow-hidden", {
+var p = c.createContext("circle"), m = c.createContext("md"), h = f("relative flex shrink-0 overflow-hidden", {
 	variants: {
 		size: {
 			xs: "h-ds-xs w-ds-xs",
@@ -28,37 +29,37 @@ var f = s.createContext("circle"), p = s.createContext("md"), m = d("relative fl
 		size: "md",
 		shape: "circle"
 	}
-}), h = {
+}), g = {
 	online: "success",
 	offline: "neutral",
 	busy: "error",
 	away: "warning"
-}, g = {
+}, _ = {
 	online: "Online",
 	offline: "Offline",
 	busy: "Busy",
 	away: "Away"
-}, _ = {
+}, v = {
 	xs: "xs",
 	sm: "sm",
 	md: "md",
 	lg: "lg",
 	xl: "lg"
-}, v = {
+}, y = {
 	lead: "ring-accent-7",
 	admin: "ring-warning-7",
 	client: "ring-info-7"
-}, y = {
+}, b = {
 	circle: "rounded-pill",
 	square: "rounded-none",
 	rounded: "rounded-control"
-}, b = {
+}, x = {
 	xs: "text-body-xs",
 	sm: "text-body-xs",
 	md: "text-body-sm",
 	lg: "text-body-md",
 	xl: "text-heading-xs"
-}, x = [
+}, S = [
 	{
 		bg: "bg-accent-3",
 		text: "text-accent-11"
@@ -92,77 +93,77 @@ var f = s.createContext("circle"), p = s.createContext("md"), m = d("relative fl
 		text: "text-category-cyan-11"
 	}
 ];
-function S(e) {
+function C(e) {
 	let t = 5381;
 	for (let n = 0; n < e.length; n++) t = (t << 5) + t + e.charCodeAt(n) | 0;
-	return x[Math.abs(t) % x.length];
+	return S[Math.abs(t) % S.length];
 }
-var C = s.forwardRef(({ className: n, size: r, shape: s, status: d, ring: b, badge: x, loading: S, children: C, ...w }, T) => {
-	let E = s ?? "circle", D = b && b !== "none" ? t("ring-2 ring-offset-2 ring-offset-surface-panel", v[b], y[E]) : void 0;
-	if (S) return /* @__PURE__ */ c("span", {
-		ref: T,
-		className: t("relative inline-flex shrink-0", D),
-		children: /* @__PURE__ */ c(o, {
-			className: t(m({
-				size: r,
-				shape: s
+var w = c.forwardRef(({ className: r, size: i, shape: c, status: f, ring: x, badge: S, loading: C, children: w, ...T }, E) => {
+	let D = c ?? "circle", O = x && x !== "none" ? n("ring-2 ring-offset-2 ring-offset-surface-panel", y[x], b[D]) : void 0;
+	if (C) return /* @__PURE__ */ l("span", {
+		ref: E,
+		className: n("relative inline-flex shrink-0", O),
+		children: /* @__PURE__ */ l(s, {
+			className: n(h({
+				size: i,
+				shape: c
 			})),
 			"data-slot": "avatar-skeleton"
 		})
 	});
-	let O = x !== void 0 && x !== 0;
-	return /* @__PURE__ */ c(f.Provider, {
-		value: E,
-		children: /* @__PURE__ */ c(p.Provider, {
-			value: r ?? "md",
-			children: /* @__PURE__ */ l("span", {
-				className: t("relative inline-flex shrink-0", D),
+	let k = S !== void 0 && S !== 0;
+	return /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(p.Provider, {
+		value: D,
+		children: /* @__PURE__ */ l(m.Provider, {
+			value: i ?? "md",
+			children: /* @__PURE__ */ u("span", {
+				className: n("relative inline-flex shrink-0", O),
 				children: [
-					/* @__PURE__ */ c(i, {
-						ref: T,
-						className: t(m({
-							size: r,
-							shape: s
-						}), n),
-						...w,
-						children: C
+					/* @__PURE__ */ l(a, {
+						ref: E,
+						className: n(h({
+							size: i,
+							shape: c
+						}), r),
+						...T,
+						children: w
 					}),
-					d && /* @__PURE__ */ c("span", {
+					f && /* @__PURE__ */ l("span", {
 						className: "absolute bottom-0 right-0",
 						role: "img",
-						"aria-label": g[d],
-						children: /* @__PURE__ */ c(a, {
-							color: h[d],
-							size: _[r ?? "md"],
+						"aria-label": _[f],
+						children: /* @__PURE__ */ l(o, {
+							color: g[f],
+							size: v[i ?? "md"],
 							withBorder: !0,
 							"aria-hidden": !0
 						})
 					}),
-					O && (x === "dot" ? /* @__PURE__ */ c("span", {
+					k && (S === "dot" ? /* @__PURE__ */ l("span", {
 						className: "absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-panel",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
-					}) : typeof x == "number" ? /* @__PURE__ */ c(u.span, {
+					}) : typeof S == "number" ? /* @__PURE__ */ l(d.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
 						transition: e.smooth,
 						className: "absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-panel",
 						"data-slot": "avatar-badge",
 						role: "status",
-						"aria-label": `${x > 99 ? "99+" : x} notifications`,
-						children: x > 99 ? "99+" : x
-					}) : /* @__PURE__ */ c("span", {
+						"aria-label": `${S > 99 ? "99+" : S} notifications`,
+						children: S > 99 ? "99+" : S
+					}) : /* @__PURE__ */ l("span", {
 						className: "absolute -right-1 -top-1",
 						"data-slot": "avatar-badge-custom",
-						children: x
+						children: S
 					}))
 				]
 			})
 		})
-	});
+	}) });
 });
-C.displayName = i.displayName;
-var w = s.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ c(u.span, {
+w.displayName = a.displayName;
+var T = c.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(d.span, {
 	initial: { scale: .96 },
 	animate: {
 		opacity: 1,
@@ -170,23 +171,23 @@ var w = s.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ c(u.span, {
 	},
 	transition: e.smooth,
 	className: "absolute inset-0 h-full w-full",
-	children: /* @__PURE__ */ c(r, {
-		ref: a,
-		className: t("aspect-square h-full w-full", n),
-		...i
+	children: /* @__PURE__ */ l(i, {
+		ref: o,
+		className: n("aspect-square h-full w-full", r),
+		...a
 	})
-}));
-w.displayName = r.displayName;
-var T = s.forwardRef(({ className: e, colorSeed: r, children: i, ...a }, o) => {
-	let l = typeof i == "string" ? i : "", u = S(r ?? l), d = s.useContext(f), m = s.useContext(p), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
-	return /* @__PURE__ */ c(n, {
+}) }));
+T.displayName = i.displayName;
+var E = c.forwardRef(({ className: e, colorSeed: t, children: i, ...a }, o) => {
+	let s = typeof i == "string" ? i : "", u = C(t ?? s), d = c.useContext(p), f = c.useContext(m), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = s.length === 1 ? "tracking-wide" : "tracking-normal";
+	return /* @__PURE__ */ l(r, {
 		ref: o,
 		"data-slot": "avatar-fallback",
-		className: t("flex h-full w-full items-center justify-center font-semibold", h, b[m], u.bg, u.text, g, e),
+		className: n("flex h-full w-full items-center justify-center font-semibold", h, x[f], u.bg, u.text, g, e),
 		...a,
 		children: i
 	});
 });
-T.displayName = n.displayName;
+E.displayName = r.displayName;
 //#endregion
-export { C as Avatar, T as AvatarFallback, w as AvatarImage, m as avatarVariants };
+export { w as Avatar, E as AvatarFallback, T as AvatarImage, h as avatarVariants };