@devalok/shilp-sutra 0.52.0 → 0.53.0

package/dist/ui/autocomplete.js

@@ -1,29 +1,30 @@
 "use client";
 import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives.js";
-import { springs as o, tweens as s } from "./lib/motion.js";
-import { cn as c } from "./lib/utils.js";
-import { useFormField as l } from "./form.js";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
-import { AnimatePresence as m, motion as h } from "framer-motion";
+import { tweens as o } from "./lib/motion.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 * 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";
 //#region src/ui/autocomplete.tsx
-var g = {
-	hidden: {},
-	visible: { transition: { staggerChildren: .03 } }
-}, _ = {
-	hidden: {
-		opacity: 0,
-		y: 4
-	},
-	visible: {
-		opacity: 1,
-		y: 0,
-		transition: o.snappy
-	}
-}, v = u.forwardRef(({ options: o, value: v, onValueChange: y, placeholder: b, emptyText: x = "No options", disabled: S, className: C, id: w, ...T }, E) => {
-	let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } = a({
-		open: N,
+function v({ 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),
+		/* @__PURE__ */ p("span", {
+			className: "font-semibold text-accent-11",
+			children: e.slice(n, n + t.length)
+		}),
+		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,
 		placement: "bottom-start",
 		whileElementsMounted: e,
 		middleware: [
@@ -37,110 +38,114 @@ var g = {
 				});
 			} })
 		]
-	}), U = u.useCallback((e) => {
-		L.current = e, V.setReference(e), typeof E == "function" ? E(e) : E && (E.current = e);
-	}, [E, V]), W = u.useCallback((e) => {
-		R.current = e, B.current = e, V.setFloating(e);
-	}, [V]);
-	u.useEffect(() => {
-		M(v?.label ?? "");
-	}, [v]), u.useEffect(() => () => {}, []);
-	let G = u.useMemo(() => j ? o.filter((e) => e.label.toLowerCase().includes(j.toLowerCase())) : o, [o, j]), K = u.useCallback((e) => {
-		M(e.label), P(!1), I(-1), y?.(e);
-	}, [y]), q = u.useCallback((e) => {
-		if (!N) {
-			(e.key === "ArrowDown" || e.key === "Enter") && P(!0);
-			return;
-		}
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), I((e) => Math.min(e + 1, G.length - 1));
-				break;
-			case "ArrowUp":
-				e.preventDefault(), I((e) => Math.max(e - 1, 0));
-				break;
-			case "Home":
-				e.preventDefault(), I(0);
-				break;
-			case "End":
-				e.preventDefault(), I(G.length - 1);
-				break;
-			case "Enter":
-				e.preventDefault(), F >= 0 && G[F] && K(G[F]);
-				break;
-			case "Escape":
-				P(!1), I(-1);
-				break;
+	}), 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]);
+	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);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), K((e) => Math.min(e + 1, Q.length - 1));
+					break;
+				case "ArrowUp":
+					e.preventDefault(), K((e) => Math.max(e - 1, 0));
+					break;
+				case "Home":
+					e.preventDefault(), K(0);
+					break;
+				case "End":
+					e.preventDefault(), K(Q.length - 1);
+					break;
+				case "Enter":
+					e.preventDefault(), G >= 0 && Q[G] && $(Q[G]);
+					break;
+				case "Escape":
+					W(!1), K(-1);
+					break;
+			}
 		}
 	}, [
-		N,
+		w,
+		U,
+		Q,
 		G,
-		F,
-		K
-	]), J = l(), Y = J.state === "error", X = J.helperTextId, Z = J.required, Q = F >= 0 ? `${A}-${F}` : void 0;
-	return /* @__PURE__ */ f("div", {
-		ref: z,
-		className: c("relative", C),
-		...T,
-		children: [/* @__PURE__ */ d("input", {
-			ref: U,
+		$
+	]), se = u(), ce = !!(j || se.inputId), le = G >= 0 ? `${I}-${G}` : void 0;
+	return /* @__PURE__ */ m("div", {
+		ref: re,
+		className: s("relative", A),
+		...M,
+		children: [/* @__PURE__ */ p(ee, {
+			ref: ie,
 			type: "text",
 			role: "combobox",
-			id: w ?? J.inputId,
-			"aria-expanded": N,
+			size: T,
+			state: E,
+			id: j,
+			value: V,
+			placeholder: S,
+			disabled: w,
+			"aria-expanded": U,
 			"aria-autocomplete": "list",
-			"aria-controls": N ? k : void 0,
-			"aria-activedescendant": Q,
-			"aria-invalid": Y || void 0,
-			"aria-describedby": X,
-			"aria-required": Z || void 0,
-			"aria-label": w || J.inputId ? void 0 : b,
-			value: j,
-			placeholder: b,
-			disabled: S,
-			className: c("flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-body-md text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]", "transition-colors duration-fast-01", S && "opacity-action-disabled cursor-not-allowed"),
+			"aria-controls": U ? F : void 0,
+			"aria-activedescendant": le,
+			"aria-label": ce ? void 0 : S,
+			endSection: D ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
 			onChange: (e) => {
-				M(e.target.value), P(!0), I(-1);
+				H(e.target.value), W(!0), K(-1);
 			},
-			onFocus: () => P(!0),
+			onFocus: () => W(!0),
 			onBlur: (e) => {
 				let t = e.relatedTarget;
-				!z.current?.contains(t) && !B.current?.contains(t) && P(!1);
+				!J.current?.contains(t) && !Y.current?.contains(t) && W(!1);
 			},
-			onKeyDown: q
-		}), typeof document < "u" && p(/* @__PURE__ */ d(m, { children: N && /* @__PURE__ */ d(h.ul, {
-			id: k,
-			ref: W,
+			onKeyDown: oe
+		}), typeof document < "u" && h(/* @__PURE__ */ p(g, { children: U && /* @__PURE__ */ p(_.ul, {
+			id: F,
+			ref: ae,
 			role: "listbox",
-			initial: "hidden",
-			animate: "visible",
-			exit: "hidden",
-			variants: g,
-			style: H,
-			className: c("z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover"),
-			children: G.length === 0 ? /* @__PURE__ */ d(h.li, {
-				initial: { opacity: 0 },
-				animate: { opacity: 1 },
-				transition: s.fade,
+			initial: !X && { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: X ? { opacity: 1 } : { opacity: 0 },
+			transition: X ? { duration: 0 } : o.fade,
+			style: ne,
+			className: "z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover",
+			children: D ? /* @__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", {
 				className: "px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: x
-			}) : G.map((e, t) => /* @__PURE__ */ d(h.li, {
-				id: `${A}-${t}`,
+				children: C
+			}) : Q.map((e, t) => /* @__PURE__ */ p("li", {
+				id: `${I}-${t}`,
 				role: "option",
-				"aria-selected": F === t,
-				variants: _,
-				className: c("cursor-pointer px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", F === t && "bg-accent-3", v?.value === e.value && "font-semibold"),
+				"aria-selected": G === 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"),
 				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => K(e),
-				onKeyDown: (t) => {
-					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), K(e));
-				},
-				onMouseEnter: () => I(t),
-				children: e.label
+				onClick: () => $(e),
+				onMouseEnter: () => K(t),
+				children: k ? k(e, V) : /* @__PURE__ */ p(v, {
+					label: e.label,
+					query: V
+				})
 			}, e.value))
 		}) }), document.body)]
 	});
 });
-v.displayName = "Autocomplete";
+y.displayName = "Autocomplete";
 //#endregion
-export { v as Autocomplete };
+export { y 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, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useFormField } from './form'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\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    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\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        size({\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    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\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        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\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]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n          id={externalId ?? fieldCtx.inputId}\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          // Named by the associated <Label> (FormField) or an external label via id.\n          // Only when there's no association mechanism, fall back to placeholder.\n          aria-label={externalId || fieldCtx.inputId ? undefined : placeholder}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-body-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\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={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps }\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-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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"}

package/dist/ui/combobox.js

@@ -6,8 +6,8 @@ import { cva as o } from "../_chunks/vendor-utils.js";
 import { cn as s } from "./lib/utils.js";
 import { Icon as c } from "./icon.js";
 import { useFormField as te } from "./form.js";
-import { normalizeIcon as ne } from "../_chunks/normalize-icon.js";
-import { resolveFieldState as re } from "../_chunks/field-state.js";
+import { resolveFieldState as ne } from "../_chunks/field-state.js";
+import { normalizeIcon as re } from "../_chunks/normalize-icon.js";
 import * as l from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { IconCheck as p, IconChevronDown as m, IconSearch as ie, IconX as ae } from "@tabler/icons-react";
@@ -166,7 +166,7 @@ var se = {
 			className: "min-w-0 flex-1 truncate text-left text-surface-fg-subtle",
 			children: C
 		});
-	}, Q = te(), $ = re(N, Q.state), ve = $ === "error", ye = Q.helperTextId, be = Q.required;
+	}, Q = te(), $ = ne(N, Q.state), ve = $ === "error", ye = Q.helperTextId, be = Q.required;
 	return /* @__PURE__ */ d(n, {
 		open: L,
 		onOpenChange: fe,
@@ -270,7 +270,7 @@ var se = {
 										className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0",
 										children: /* @__PURE__ */ d(ee, {
 											size: Z,
-											children: ne(e.icon)
+											children: re(e.icon)
 										})
 									}),
 									/* @__PURE__ */ d("span", {

package/dist/ui/index.js

@@ -9,35 +9,35 @@ import { AlertDialog as d, AlertDialogAction as f, AlertDialogCancel as p, Alert
 import { Alert as S, alertVariants as C } from "./alert.js";
 import { AspectRatio as w } from "./aspect-ratio.js";
 import { FormField as T, FormHelperText as E, useFormField as D } from "./form.js";
-import { Autocomplete as O } from "./autocomplete.js";
-import { Dot as k, dotVariants as A } from "./dot.js";
-import { Skeleton as j, SkeletonAvatar as M, SkeletonButton as N, SkeletonChart as P, SkeletonGroup as F, SkeletonImage as I, SkeletonInput as L, SkeletonText as R, skeletonVariants as z } from "./skeleton.js";
-import { Avatar as B, AvatarFallback as V, AvatarImage as H, avatarVariants as U } from "./avatar.js";
-import { BadgeIndicator as W } from "./badge-indicator.js";
-import { BadgeCompound as G, BadgeGroup as K, badgeVariants as q } from "../_chunks/badge-group.js";
-import { Banner as J, bannerVariants as Y } from "./banner.js";
-import { Breadcrumb as X, BreadcrumbEllipsis as Z, BreadcrumbItem as re, BreadcrumbLink as ie, BreadcrumbList as ae, BreadcrumbPage as oe, BreadcrumbSeparator as se } from "./breadcrumb.js";
-import { ButtonGroup as ce, useButtonGroup as le } from "./button-group.js";
-import { Button as ue, buttonVariants as de } from "./button.js";
-import { Card as fe, CardAction as pe, CardBleed as me, CardContent as he, CardDescription as ge, CardFooter as _e, CardHeader as ve, CardSection as ye, CardTitle as be, cardVariants as xe } from "./card.js";
-import { Checkbox as Se } from "./checkbox.js";
-import { Code as Ce } from "./code.js";
-import { Collapsible as we, CollapsibleContent as Te, CollapsibleTrigger as Ee } from "./collapsible.js";
-import { Popover as De, PopoverAnchor as Oe, PopoverContent as ke, PopoverTrigger as Ae } from "../_chunks/popover.js";
-import { ColorInput as je } from "./color-input.js";
-import { ColorSwatch as Me } from "./color-swatch.js";
-import { Combobox as Ne, comboboxTriggerVariants as Pe } from "./combobox.js";
-import { Container as Fe } from "./container.js";
-import { ContextMenu as Ie, ContextMenuCheckboxItem as Le, ContextMenuContent as Re, ContextMenuGroup as ze, ContextMenuItem as Be, ContextMenuLabel as Ve, ContextMenuPortal as He, ContextMenuRadioGroup as Ue, ContextMenuRadioItem as We, ContextMenuSeparator as Ge, ContextMenuShortcut as Ke, ContextMenuSub as qe, ContextMenuSubContent as Je, ContextMenuSubTrigger as Ye, ContextMenuTrigger as Xe } from "./context-menu.js";
-import { Table as Ze, TableBody as Qe, TableCaption as $e, TableCell as et, TableFooter as tt, TableHead as nt, TableHeader as rt, TableRow as it, TableRowActions as at } from "./table.js";
-import { DropdownMenu as ot, DropdownMenuCheckboxItem as st, DropdownMenuContent as ct, DropdownMenuGroup as lt, DropdownMenuItem as ut, DropdownMenuLabel as dt, DropdownMenuPortal as ft, DropdownMenuRadioGroup as pt, DropdownMenuRadioItem as mt, DropdownMenuSeparator as ht, DropdownMenuShortcut as gt, DropdownMenuSub as _t, DropdownMenuSubContent as vt, DropdownMenuSubTrigger as yt, DropdownMenuTrigger as bt } from "./dropdown-menu.js";
-import { DevalokGrain as xt } from "./devalok-grain.js";
-import { Dialog as St, DialogClose as Ct, DialogContent as wt, DialogContentRaw as Tt, DialogDescription as Et, DialogFooter as Dt, DialogHeader as Ot, DialogOverlay as kt, DialogPortal as At, DialogTitle as jt, DialogTrigger as Mt } from "./dialog.js";
-import { FileUpload as Nt } from "./file-upload.js";
-import { HoverCard as Pt, HoverCardContent as Ft, HoverCardTrigger as It } from "./hover-card.js";
-import { IconButton as Lt } from "./icon-button.js";
-import { IconGroup as Rt } from "./icon-group.js";
-import { Input as zt, inputWrapperVariants as Bt } from "./input.js";
+import { Input as O, inputWrapperVariants as k } from "./input.js";
+import { Autocomplete as A } from "./autocomplete.js";
+import { Dot as j, dotVariants as M } from "./dot.js";
+import { Skeleton as N, SkeletonAvatar as P, SkeletonButton as F, SkeletonChart as I, SkeletonGroup as L, SkeletonImage as R, SkeletonInput as z, SkeletonText as B, skeletonVariants as V } from "./skeleton.js";
+import { Avatar as H, AvatarFallback as U, AvatarImage as W, avatarVariants as G } from "./avatar.js";
+import { BadgeIndicator as K } from "./badge-indicator.js";
+import { BadgeCompound as q, BadgeGroup as J, badgeVariants as Y } from "../_chunks/badge-group.js";
+import { Banner as X, bannerVariants as Z } from "./banner.js";
+import { Breadcrumb as re, BreadcrumbEllipsis as ie, BreadcrumbItem as ae, BreadcrumbLink as oe, BreadcrumbList as se, BreadcrumbPage as ce, BreadcrumbSeparator as le } from "./breadcrumb.js";
+import { ButtonGroup as ue, useButtonGroup as de } from "./button-group.js";
+import { Button as fe, buttonVariants as pe } from "./button.js";
+import { Card as me, CardAction as he, CardBleed as ge, CardContent as _e, CardDescription as ve, CardFooter as ye, CardHeader as be, CardSection as xe, CardTitle as Se, cardVariants as Ce } from "./card.js";
+import { Checkbox as we } from "./checkbox.js";
+import { Code as Te } from "./code.js";
+import { Collapsible as Ee, CollapsibleContent as De, CollapsibleTrigger as Oe } from "./collapsible.js";
+import { Popover as ke, PopoverAnchor as Ae, PopoverContent as je, PopoverTrigger as Me } from "../_chunks/popover.js";
+import { ColorInput as Ne } from "./color-input.js";
+import { ColorSwatch as Pe } from "./color-swatch.js";
+import { Combobox as Fe, comboboxTriggerVariants as Ie } from "./combobox.js";
+import { Container as Le } from "./container.js";
+import { ContextMenu as Re, ContextMenuCheckboxItem as ze, ContextMenuContent as Be, ContextMenuGroup as Ve, ContextMenuItem as He, ContextMenuLabel as Ue, ContextMenuPortal as We, ContextMenuRadioGroup as Ge, ContextMenuRadioItem as Ke, ContextMenuSeparator as qe, ContextMenuShortcut as Je, ContextMenuSub as Ye, ContextMenuSubContent as Xe, ContextMenuSubTrigger as Ze, ContextMenuTrigger as Qe } from "./context-menu.js";
+import { Table as $e, TableBody as et, TableCaption as tt, TableCell as nt, TableFooter as rt, TableHead as it, TableHeader as at, TableRow as ot, TableRowActions as st } from "./table.js";
+import { DropdownMenu as ct, DropdownMenuCheckboxItem as lt, DropdownMenuContent as ut, DropdownMenuGroup as dt, DropdownMenuItem as ft, DropdownMenuLabel as pt, DropdownMenuPortal as mt, DropdownMenuRadioGroup as ht, DropdownMenuRadioItem as gt, DropdownMenuSeparator as _t, DropdownMenuShortcut as vt, DropdownMenuSub as yt, DropdownMenuSubContent as bt, DropdownMenuSubTrigger as xt, DropdownMenuTrigger as St } from "./dropdown-menu.js";
+import { DevalokGrain as Ct } from "./devalok-grain.js";
+import { Dialog as wt, DialogClose as Tt, DialogContent as Et, DialogContentRaw as Dt, DialogDescription as Ot, DialogFooter as kt, DialogHeader as At, DialogOverlay as jt, DialogPortal as Mt, DialogTitle as Nt, DialogTrigger as Pt } from "./dialog.js";
+import { FileUpload as Ft } from "./file-upload.js";
+import { HoverCard as It, HoverCardContent as Lt, HoverCardTrigger as Rt } from "./hover-card.js";
+import { IconButton as zt } from "./icon-button.js";
+import { IconGroup as Bt } from "./icon-group.js";
 import { Label as Vt } from "./label.js";
 import { Separator as Ht } from "./separator.js";
 import { SplitButton as Ut } from "./split-button.js";
@@ -90,4 +90,4 @@ function Oi() {
 //#region src/ui/index.ts
 Oi();
 //#endregion
-export { s as Accordion, c as AccordionContent, l as AccordionItem, u as AccordionTrigger, S as Alert, d as AlertDialog, f as AlertDialogAction, p as AlertDialogCancel, m as AlertDialogContent, h as AlertDialogDescription, g as AlertDialogFooter, _ as AlertDialogHeader, v as AlertDialogOverlay, y as AlertDialogPortal, b as AlertDialogTitle, x as AlertDialogTrigger, w as AspectRatio, O as Autocomplete, B as Avatar, V as AvatarFallback, H as AvatarImage, G as Badge, K as BadgeGroup, W as BadgeIndicator, J as Banner, X as Breadcrumb, Z as BreadcrumbEllipsis, re as BreadcrumbItem, ie as BreadcrumbLink, ae as BreadcrumbList, oe as BreadcrumbPage, se as BreadcrumbSeparator, ue as Button, ce as ButtonGroup, fe as Card, pe as CardAction, me as CardBleed, he as CardContent, ge as CardDescription, _e as CardFooter, ve as CardHeader, ye as CardSection, be as CardTitle, Se as Checkbox, Ce as Code, we as Collapsible, Te as CollapsibleContent, Ee as CollapsibleTrigger, je as ColorInput, Me as ColorSwatch, Ne as Combobox, Fe as Container, Ie as ContextMenu, Le as ContextMenuCheckboxItem, Re as ContextMenuContent, ze as ContextMenuGroup, Be as ContextMenuItem, Ve as ContextMenuLabel, He as ContextMenuPortal, Ue as ContextMenuRadioGroup, We as ContextMenuRadioItem, Ge as ContextMenuSeparator, Ke as ContextMenuShortcut, qe as ContextMenuSub, Je as ContextMenuSubContent, Ye as ContextMenuSubTrigger, Xe as ContextMenuTrigger, ui as DateSeparator, xt as DevalokGrain, St as Dialog, Ct as DialogClose, wt as DialogContent, Tt as DialogContentRaw, Et as DialogDescription, Dt as DialogFooter, Ot as DialogHeader, kt as DialogOverlay, At as DialogPortal, jt as DialogTitle, Mt as DialogTrigger, k as Dot, ot as DropdownMenu, st as DropdownMenuCheckboxItem, ct as DropdownMenuContent, lt as DropdownMenuGroup, ut as DropdownMenuItem, dt as DropdownMenuLabel, ft as DropdownMenuPortal, pt as DropdownMenuRadioGroup, mt as DropdownMenuRadioItem, ht as DropdownMenuSeparator, gt as DropdownMenuShortcut, _t as DropdownMenuSub, vt as DropdownMenuSubContent, yt as DropdownMenuSubTrigger, bt as DropdownMenuTrigger, Nt as FileUpload, T as FormField, E as FormHelperText, Pt as HoverCard, Ft as HoverCardContent, It as HoverCardTrigger, o as Icon, Lt as IconButton, ee as IconContext, Rt as IconGroup, te as IconProvider, zt as Input, Vt as Label, vi as Link, Jn as Menubar, Yn as MenubarCheckboxItem, Xn as MenubarContent, Zn as MenubarGroup, Qn as MenubarItem, $n as MenubarLabel, er as MenubarMenu, tr as MenubarPortal, nr as MenubarRadioGroup, rr as MenubarRadioItem, ir as MenubarSeparator, ar as MenubarShortcut, or as MenubarSub, sr as MenubarSubContent, cr as MenubarSubTrigger, lr as MenubarTrigger, di as Message, fi as MessageInput, pi as MessageList, Vn as MultiProgressRing, ur as NavigationMenu, dr as NavigationMenuContent, fr as NavigationMenuIndicator, pr as NavigationMenuItem, mr as NavigationMenuLink, hr as NavigationMenuList, gr as NavigationMenuTrigger, _r as NavigationMenuViewport, Gt as NumberInput, yi as OAuth, bi as OAuthButton, xi as OAuthConnectionRow, Si as OAuthDivider, Ci as OAuthGlyph, wi as OAuthGroup, vr as PaginationContent, yr as PaginationEllipsis, br as PaginationItem, xr as PaginationLink, Sr as PaginationNav, Cr as PaginationNext, wr as PaginationPrevious, Tr as PaginationRoot, De as Popover, Oe as PopoverAnchor, ke as PopoverContent, Ae as PopoverTrigger, Mn as Progress, Nn as ProgressIndicator, Pn as ProgressLabel, Hn as ProgressRing, Fn as ProgressRoot, In as ProgressSegment, Ln as ProgressTrack, Rn as ProgressValue, qt as RadioGroup, Jt as RadioGroupItem, Yt as SearchInput, li as SegmentedControl, Xt as Select, Zt as SelectContent, Qt as SelectGroup, $t as SelectItem, en as SelectLabel, tn as SelectScrollDownButton, nn as SelectScrollUpButton, rn as SelectSeparator, Q as SelectTrigger, an as SelectValue, Ht as Separator, Sn as Sheet, Cn as SheetClose, wn as SheetContent, Tn as SheetDescription, En as SheetFooter, Dn as SheetHeader, On as SheetOverlay, kn as SheetPortal, An as SheetTitle, jn as SheetTrigger, Dr as Sidebar, Or as SidebarContent, kr as SidebarFooter, Ar as SidebarGroup, jr as SidebarGroupAction, Mr as SidebarGroupContent, Nr as SidebarGroupLabel, Pr as SidebarHeader, Fr as SidebarInput, Ir as SidebarInset, Lr as SidebarMenu, Rr as SidebarMenuAction, zr as SidebarMenuBadge, Br as SidebarMenuButton, Vr as SidebarMenuItem, Hr as SidebarMenuSkeleton, Ur as SidebarMenuSub, Wr as SidebarMenuSubButton, Gr as SidebarMenuSubItem, Kr as SidebarProvider, qr as SidebarRail, Jr as SidebarSeparator, Yr as SidebarTrigger, j as Skeleton, M as SkeletonAvatar, N as SkeletonButton, P as SkeletonChart, F as SkeletonGroup, I as SkeletonImage, L as SkeletonInput, R as SkeletonText, sn as Slider, a as Spinner, Ut as SplitButton, ai as Stack, Wn as StatCard, Un as StatFlash, ti as Step, ni as Stepper, Gn as Surface, un as Switch, mi as SystemMessage, Ze as Table, Qe as TableBody, $e as TableCaption, et as TableCell, tt as TableFooter, nt as TableHead, rt as TableHeader, it as TableRow, at as TableRowActions, qn as TableRowLink, Zr as Tabs, Qr as TabsContent, $r as TabsList, ei as TabsTrigger, ri as Text, dn as Textarea, pn as Toggle, hn as ToggleGroup, gn as ToggleGroupItem, _n as Tooltip, vn as TooltipContent, yn as TooltipProvider, bn as TooltipTrigger, oi as TreeItem, si as TreeView, xn as TruncatedText, hi as TypingIndicator, gi as UnreadSeparator, Wt as VisuallyHidden, C as alertVariants, U as avatarVariants, q as badgeVariants, Y as bannerVariants, de as buttonVariants, xe as cardVariants, i as cn, Pe as comboboxTriggerVariants, A as dotVariants, Di as formatRelativeTime, Er as generatePagination, Ti as getOAuthLabel, Ei as getOAuthName, Bt as inputWrapperVariants, Kt as numberInputWrapperVariants, zn as progressIndicatorVariants, Bn as progressTrackVariants, on as selectTriggerVariants, z as skeletonVariants, cn as sliderThumbVariants, ln as sliderTrackVariants, e as springs, t as stagger, Kn as surfaceVariants, ii as textVariants, fn as textareaVariants, mn as toggleVariants, n as tweens, le as useButtonGroup, D as useFormField, ne as useIconContext, _i as useMessageContext, Xr as useSidebar, ci as useTree, r as withReducedMotion };
+export { s as Accordion, c as AccordionContent, l as AccordionItem, u as AccordionTrigger, S as Alert, d as AlertDialog, f as AlertDialogAction, p as AlertDialogCancel, m as AlertDialogContent, h as AlertDialogDescription, g as AlertDialogFooter, _ as AlertDialogHeader, v as AlertDialogOverlay, y as AlertDialogPortal, b as AlertDialogTitle, x as AlertDialogTrigger, w as AspectRatio, A as Autocomplete, H as Avatar, U as AvatarFallback, W as AvatarImage, q as Badge, J as BadgeGroup, K as BadgeIndicator, X as Banner, re as Breadcrumb, ie as BreadcrumbEllipsis, ae as BreadcrumbItem, oe as BreadcrumbLink, se as BreadcrumbList, ce as BreadcrumbPage, le as BreadcrumbSeparator, fe as Button, ue as ButtonGroup, me as Card, he as CardAction, ge as CardBleed, _e as CardContent, ve as CardDescription, ye as CardFooter, be as CardHeader, xe as CardSection, Se as CardTitle, we as Checkbox, Te as Code, Ee as Collapsible, De as CollapsibleContent, Oe as CollapsibleTrigger, Ne as ColorInput, Pe as ColorSwatch, Fe as Combobox, Le as Container, Re as ContextMenu, ze as ContextMenuCheckboxItem, Be as ContextMenuContent, Ve as ContextMenuGroup, He as ContextMenuItem, Ue as ContextMenuLabel, We as ContextMenuPortal, Ge as ContextMenuRadioGroup, Ke as ContextMenuRadioItem, qe as ContextMenuSeparator, Je as ContextMenuShortcut, Ye as ContextMenuSub, Xe as ContextMenuSubContent, Ze as ContextMenuSubTrigger, Qe as ContextMenuTrigger, ui as DateSeparator, Ct as DevalokGrain, wt as Dialog, Tt as DialogClose, Et as DialogContent, Dt as DialogContentRaw, Ot as DialogDescription, kt as DialogFooter, At as DialogHeader, jt as DialogOverlay, Mt as DialogPortal, Nt as DialogTitle, Pt as DialogTrigger, j as Dot, ct as DropdownMenu, lt as DropdownMenuCheckboxItem, ut as DropdownMenuContent, dt as DropdownMenuGroup, ft as DropdownMenuItem, pt as DropdownMenuLabel, mt as DropdownMenuPortal, ht as DropdownMenuRadioGroup, gt as DropdownMenuRadioItem, _t as DropdownMenuSeparator, vt as DropdownMenuShortcut, yt as DropdownMenuSub, bt as DropdownMenuSubContent, xt as DropdownMenuSubTrigger, St as DropdownMenuTrigger, Ft as FileUpload, T as FormField, E as FormHelperText, It as HoverCard, Lt as HoverCardContent, Rt as HoverCardTrigger, o as Icon, zt as IconButton, ee as IconContext, Bt as IconGroup, te as IconProvider, O as Input, Vt as Label, vi as Link, Jn as Menubar, Yn as MenubarCheckboxItem, Xn as MenubarContent, Zn as MenubarGroup, Qn as MenubarItem, $n as MenubarLabel, er as MenubarMenu, tr as MenubarPortal, nr as MenubarRadioGroup, rr as MenubarRadioItem, ir as MenubarSeparator, ar as MenubarShortcut, or as MenubarSub, sr as MenubarSubContent, cr as MenubarSubTrigger, lr as MenubarTrigger, di as Message, fi as MessageInput, pi as MessageList, Vn as MultiProgressRing, ur as NavigationMenu, dr as NavigationMenuContent, fr as NavigationMenuIndicator, pr as NavigationMenuItem, mr as NavigationMenuLink, hr as NavigationMenuList, gr as NavigationMenuTrigger, _r as NavigationMenuViewport, Gt as NumberInput, yi as OAuth, bi as OAuthButton, xi as OAuthConnectionRow, Si as OAuthDivider, Ci as OAuthGlyph, wi as OAuthGroup, vr as PaginationContent, yr as PaginationEllipsis, br as PaginationItem, xr as PaginationLink, Sr as PaginationNav, Cr as PaginationNext, wr as PaginationPrevious, Tr as PaginationRoot, ke as Popover, Ae as PopoverAnchor, je as PopoverContent, Me as PopoverTrigger, Mn as Progress, Nn as ProgressIndicator, Pn as ProgressLabel, Hn as ProgressRing, Fn as ProgressRoot, In as ProgressSegment, Ln as ProgressTrack, Rn as ProgressValue, qt as RadioGroup, Jt as RadioGroupItem, Yt as SearchInput, li as SegmentedControl, Xt as Select, Zt as SelectContent, Qt as SelectGroup, $t as SelectItem, en as SelectLabel, tn as SelectScrollDownButton, nn as SelectScrollUpButton, rn as SelectSeparator, Q as SelectTrigger, an as SelectValue, Ht as Separator, Sn as Sheet, Cn as SheetClose, wn as SheetContent, Tn as SheetDescription, En as SheetFooter, Dn as SheetHeader, On as SheetOverlay, kn as SheetPortal, An as SheetTitle, jn as SheetTrigger, Dr as Sidebar, Or as SidebarContent, kr as SidebarFooter, Ar as SidebarGroup, jr as SidebarGroupAction, Mr as SidebarGroupContent, Nr as SidebarGroupLabel, Pr as SidebarHeader, Fr as SidebarInput, Ir as SidebarInset, Lr as SidebarMenu, Rr as SidebarMenuAction, zr as SidebarMenuBadge, Br as SidebarMenuButton, Vr as SidebarMenuItem, Hr as SidebarMenuSkeleton, Ur as SidebarMenuSub, Wr as SidebarMenuSubButton, Gr as SidebarMenuSubItem, Kr as SidebarProvider, qr as SidebarRail, Jr as SidebarSeparator, Yr as SidebarTrigger, N as Skeleton, P as SkeletonAvatar, F as SkeletonButton, I as SkeletonChart, L as SkeletonGroup, R as SkeletonImage, z as SkeletonInput, B as SkeletonText, sn as Slider, a as Spinner, Ut as SplitButton, ai as Stack, Wn as StatCard, Un as StatFlash, ti as Step, ni as Stepper, Gn as Surface, un as Switch, mi as SystemMessage, $e as Table, et as TableBody, tt as TableCaption, nt as TableCell, rt as TableFooter, it as TableHead, at as TableHeader, ot as TableRow, st as TableRowActions, qn as TableRowLink, Zr as Tabs, Qr as TabsContent, $r as TabsList, ei as TabsTrigger, ri as Text, dn as Textarea, pn as Toggle, hn as ToggleGroup, gn as ToggleGroupItem, _n as Tooltip, vn as TooltipContent, yn as TooltipProvider, bn as TooltipTrigger, oi as TreeItem, si as TreeView, xn as TruncatedText, hi as TypingIndicator, gi as UnreadSeparator, Wt as VisuallyHidden, C as alertVariants, G as avatarVariants, Y as badgeVariants, Z as bannerVariants, pe as buttonVariants, Ce as cardVariants, i as cn, Ie as comboboxTriggerVariants, M as dotVariants, Di as formatRelativeTime, Er as generatePagination, Ti as getOAuthLabel, Ei as getOAuthName, k as inputWrapperVariants, Kt as numberInputWrapperVariants, zn as progressIndicatorVariants, Bn as progressTrackVariants, on as selectTriggerVariants, V as skeletonVariants, cn as sliderThumbVariants, ln as sliderTrackVariants, e as springs, t as stagger, Kn as surfaceVariants, ii as textVariants, fn as textareaVariants, mn as toggleVariants, n as tweens, de as useButtonGroup, D as useFormField, ne as useIconContext, _i as useMessageContext, Xr as useSidebar, ci as useTree, r as withReducedMotion };

package/dist/ui/search-input.js

@@ -2,8 +2,8 @@
 import { springs as e } from "./lib/motion.js";
 import { Spinner as t } from "./spinner.js";
 import { Icon as n } from "./icon.js";
-import { Button as r } from "./button.js";
-import { Input as i } from "./input.js";
+import { Input as r } from "./input.js";
+import { Button as i } from "./button.js";
 import * as a from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { IconSearch as s, IconX as c } from "@tabler/icons-react";
@@ -25,7 +25,7 @@ var d = a.forwardRef(({ className: a, value: d, onClear: f, loading: p, size: m
 			scale: .8
 		},
 		transition: e.snappy,
-		children: /* @__PURE__ */ o(r, {
+		children: /* @__PURE__ */ o(i, {
 			type: "button",
 			variant: "ghost",
 			size: "icon-xs",
@@ -35,7 +35,7 @@ var d = a.forwardRef(({ className: a, value: d, onClear: f, loading: p, size: m
 			children: /* @__PURE__ */ o(n, { icon: c })
 		})
 	}) });
-	return /* @__PURE__ */ o(i, {
+	return /* @__PURE__ */ o(r, {
 		ref: _,
 		size: m,
 		startSection: /* @__PURE__ */ o(n, { icon: s }),

package/dist/ui/sidebar.js

@@ -5,9 +5,9 @@ import { cva as n } from "../_chunks/vendor-utils.js";
 import { cn as r } from "./lib/utils.js";
 import { Icon as i } from "./icon.js";
 import { useIsMobile as a } from "../hooks/use-mobile.js";
-import { Skeleton as o } from "./skeleton.js";
-import { Button as s } from "./button.js";
-import { Input as c } from "./input.js";
+import { Input as o } from "./input.js";
+import { Skeleton as s } from "./skeleton.js";
+import { Button as c } from "./button.js";
 import { Separator as l } from "./separator.js";
 import { Tooltip as u, TooltipContent as d, TooltipProvider as f, TooltipTrigger as p } from "./tooltip.js";
 import { Sheet as m, SheetContent as h } from "./sheet.js";
@@ -139,7 +139,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
 M.displayName = "Sidebar";
 var N = _(({ className: e, onClick: t, ...n }, a) => {
 	let { toggleSidebar: o } = A();
-	return /* @__PURE__ */ E(s, {
+	return /* @__PURE__ */ E(c, {
 		ref: a,
 		"data-sidebar": "trigger",
 		variant: "ghost",
@@ -179,7 +179,7 @@ var F = _(({ className: e, ...t }, n) => /* @__PURE__ */ T("main", {
 	...t
 }));
 F.displayName = "SidebarInset";
-var I = _(({ className: e, wrapperClassName: t, ...n }, i) => /* @__PURE__ */ T(c, {
+var I = _(({ className: e, wrapperClassName: t, ...n }, i) => /* @__PURE__ */ T(o, {
 	ref: i,
 	"data-sidebar": "input",
 	size: "sm",
@@ -326,10 +326,10 @@ var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
 		"data-sidebar": "menu-skeleton",
 		className: r("flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03", e),
 		...n,
-		children: [t && /* @__PURE__ */ T(o, {
+		children: [t && /* @__PURE__ */ T(s, {
 			className: "h-ico-sm w-ico-sm rounded-control",
 			"data-sidebar": "menu-skeleton-icon"
-		}), /* @__PURE__ */ T(o, {
+		}), /* @__PURE__ */ T(s, {
 			className: "h-4 max-w-(--skeleton-width) flex-1",
 			"data-sidebar": "menu-skeleton-text",
 			style: { "--skeleton-width": a }

package/docs/components/composed/priority-indicator.md

@@ -1,37 +1,48 @@
 # PriorityIndicator
 
 - Import: @devalok/shilp-sutra/composed/priority-indicator
-- Server-safe: Yes
+- Server-safe: No
 - Category: composed
 
 ## Props
     priority: Priority
-    display: "compact" | "full" (default: "full")
+    iconOnly?: boolean (icon-only chip, no visible text)
+    display?: "compact" | "full" (@deprecated — use iconOnly)
+    children?: ReactNode (override the label, e.g. i18n)
 
 Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'urgent'
 
 ## Defaults
-    display="full"
+    iconOnly: false
 
 ## Example
 ```jsx
 <PriorityIndicator priority="HIGH" />
-<PriorityIndicator priority="low" display="compact" />
+<PriorityIndicator priority="low" iconOnly />
+<PriorityIndicator priority="URGENT">Critical</PriorityIndicator>
 ```
 
 ## Composability
-- **Server-safe priority label** — icon + color + text for task / issue priority.
+- **Composes `Badge`** — radius, color semantics, a11y labelling, and reduced-motion handling all come from one place (no bespoke re-roll).
 - **Composes inside list rows, DataTable cells, Card headers, task panels** — anywhere a priority flag fits.
-- **display="compact"** shows only the icon (with priority text as title attribute for tooltip). Use in tight cells; use `display="full"` (default) in free space.
-- **Case-insensitive priority** — accepts both UPPERCASE (LOW/MEDIUM/HIGH/URGENT) and lowercase. Designed to match both backend conventions without manual coercion.
-- Color semantics: LOW=success, MEDIUM=warning, HIGH=error, URGENT=error with bolder icon.
+- **`iconOnly`** shows only the icon with a real accessible name (`role="img"` + `aria-label`), for tight cells. Omit it (default) for icon + label.
+- **Severity by weight, not motion** — URGENT renders as a solid fill so the top tier reads at a glance; the others are soft. No animation (removes the prior perpetual pulse).
+- **Case-insensitive priority** — accepts both UPPERCASE and lowercase; unknown values fall back to MEDIUM instead of throwing.
+- **`children`** overrides the label for i18n / custom copy.
+- Color semantics: LOW = slate (neutral), MEDIUM = warning, HIGH = error (soft), URGENT = error (solid).
 
 ## Gotchas
-- Case-insensitive — "low" and "LOW" both work
-- Server-safe: can be imported directly in Next.js Server Components
-- `compact` display shows only the icon; `full` shows icon + text label
+- Case-insensitive — "low" and "LOW" both work; unknown values fall back to MEDIUM
+- `iconOnly` shows only the icon (accessible-named); default shows icon + text label
+- `display` is deprecated — use `iconOnly`
 
 ## Changes
+### v0.53.0
+- **Changed** Recomposed on the `Badge` primitive (was a bespoke re-rolled chip): inherits pill radius, color semantics, accessible labelling.
+- **Changed** URGENT is now a solid static fill; the perpetual scale-pulse is removed (was unguarded infinite motion, WCAG 2.2.2). Severity reads without animation.
+- **Added** `iconOnly` (replaces deprecated `display`) and `children` (label override for i18n).
+- **Fixed** Icon-only chip now has a real accessible name (`role="img"` + `aria-label`), not a mouse-only `title`. Unknown priority no longer throws.
+
 ### v0.2.0
 - **Added** Identified as server-safe component