@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/radio.js

@@ -1,51 +1,49 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { aj as i, ak as t, al as n } from "../_chunks/primitives.js";
+import { ct as e, ot as t, st as n } from "../_chunks/primitives.js";
+import { a as r } from "../_chunks/framer.js";
+import { springs as i } from "./lib/motion.js";
+import { cn as a } from "./lib/utils.js";
+import { useFormField as o } from "./form.js";
+import * as s from "react";
+import { jsx as c } from "react/jsx-runtime";
 import { IconCircle as l } from "@tabler/icons-react";
-import * as c from "react";
-import { springs as m } from "./lib/motion.js";
-import { cn as o } from "./lib/utils.js";
-import { m as f } from "../_chunks/framer.js";
-const u = c.forwardRef(({ className: r, ...a }, s) => /* @__PURE__ */ e(i, { className: o("grid gap-ds-03", r), ...a, ref: s }));
-u.displayName = i.displayName;
-const p = {
-  sm: "h-5 w-5",
-  md: "h-6 w-6",
-  lg: "h-7 w-7"
-}, h = {
-  sm: "h-1.5 w-1.5",
-  md: "h-ds-03 w-ds-03",
-  lg: "h-2.5 w-2.5"
-}, b = c.forwardRef(({ className: r, size: a = "md", ...s }, d) => /* @__PURE__ */ e(
-  t,
-  {
-    ref: d,
-    className: o(
-      "touch-target aspect-square rounded-ds-full",
-      p[a],
-      "border border-surface-border-strong bg-surface-raised-hover",
-      "transition-colors duration-fast-01",
-      "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:opacity-action-disabled",
-      "hover:border-accent-7 hover:bg-surface-raised-active",
-      "data-[state=checked]:border-accent-7",
-      r
-    ),
-    ...s,
-    children: /* @__PURE__ */ e(n, { asChild: !0, className: "flex items-center justify-center", children: /* @__PURE__ */ e(
-      f.span,
-      {
-        className: "flex items-center justify-center",
-        initial: { scale: 0 },
-        animate: { scale: 1 },
-        transition: m.bouncy,
-        children: /* @__PURE__ */ e(l, { className: o(h[a], "fill-accent-9 text-accent-11") })
-      }
-    ) })
-  }
-));
-b.displayName = t.displayName;
-export {
-  u as RadioGroup,
-  b as RadioGroupItem
-};
+//#region src/ui/radio.tsx
+var u = s.forwardRef(({ className: t, ...n }, r) => {
+	let i = o(), s = i.state === "error", l = n["aria-describedby"] ?? i.helperTextId, u = n["aria-required"] ?? i.required;
+	return /* @__PURE__ */ c(e, {
+		className: a("grid gap-ds-03", t),
+		"aria-invalid": s || void 0,
+		"aria-describedby": l,
+		"aria-required": u || void 0,
+		...n,
+		ref: r
+	});
+});
+u.displayName = e.displayName;
+var d = {
+	sm: "h-5 w-5",
+	md: "h-6 w-6",
+	lg: "h-7 w-7"
+}, f = {
+	sm: "h-1.5 w-1.5",
+	md: "h-ds-03 w-ds-03",
+	lg: "h-2.5 w-2.5"
+}, p = s.forwardRef(({ className: e, size: o = "md", ...s }, u) => /* @__PURE__ */ c(n, {
+	ref: u,
+	className: a("touch-target aspect-square rounded-ds-full", d[o], "border border-surface-border-strong bg-surface-raised-hover", "transition-colors duration-fast-01", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "hover:border-accent-7 hover:bg-surface-raised-active", "data-[state=checked]:border-accent-7", e),
+	...s,
+	children: /* @__PURE__ */ c(t, {
+		asChild: !0,
+		className: "flex items-center justify-center",
+		children: /* @__PURE__ */ c(r.span, {
+			className: "flex items-center justify-center",
+			initial: { scale: 0 },
+			animate: { scale: 1 },
+			transition: i.bouncy,
+			children: /* @__PURE__ */ c(l, { className: a(f[o], "fill-accent-9 text-accent-11") })
+		})
+	})
+}));
+p.displayName = n.displayName;
+//#endregion
+export { u as RadioGroup, p as RadioGroupItem };

package/dist/ui/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/ui/radio.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@primitives/react-radio-group'\nimport { IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { useFormField } from './form'\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn('grid gap-ds-03', className)}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nexport interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst radioSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst radioIndicatorClasses = {\n  sm: 'h-1.5 w-1.5',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-2.5 w-2.5',\n} as const\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(({ className, size = 'md', ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'touch-target aspect-square rounded-ds-full',\n        radioSizeClasses[size],\n        'border border-surface-border-strong bg-surface-raised-hover',\n        'transition-colors duration-fast-01',\n        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'hover:border-accent-7 hover:bg-surface-raised-active',\n        'data-[state=checked]:border-accent-7',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator asChild className=\"flex items-center justify-center\">\n        <motion.span\n          className=\"flex items-center justify-center\"\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          transition={springs.bouncy}\n        >\n          <IconCircle className={cn(radioIndicatorClasses[size], 'fill-accent-9 text-accent-11')} />\n        </motion.span>\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n\nexport { RadioGroup, RadioGroupItem }\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,GAAc,EACzB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS;AAExD,QACE,kBAAC,GAAD;EACE,WAAW,EAAG,kBAAkB,EAAU;EAC1C,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;EACL,CAAA;EAEJ;AACF,EAAW,cAAA,EAAuC;AAOlD,IAAM,IAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwB;CAC5B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAiB,EAAM,YAG1B,EAAE,cAAW,UAAO,MAAM,GAAG,KAAS,MAErC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,8CACA,EAAiB,IACjB,+DACA,sCACA,6GACA,gEACA,wDACA,wCACA,EACD;CACD,GAAI;WAEJ,kBAAC,GAAD;EAA+B,SAAA;EAAQ,WAAU;YAC/C,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,SAAS,EAAE,OAAO,GAAG;GACrB,SAAS,EAAE,OAAO,GAAG;GACrB,YAAY,EAAQ;aAEpB,kBAAC,GAAD,EAAY,WAAW,EAAG,EAAsB,IAAO,+BAA+B,EAAI,CAAA;GAC9E,CAAA;EACgB,CAAA;CACP,CAAA,CAE7B;AACF,EAAe,cAAA,EAAuC"}

package/dist/ui/search-input.js

@@ -1,54 +1,52 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { IconX as f, IconSearch as d } from "@tabler/icons-react";
-import * as h from "react";
-import { springs as y } from "./lib/motion.js";
-import { Spinner as S } from "./spinner.js";
-import { Icon as e } from "./icon.js";
-import { Input as u } from "./input.js";
-import { Button as I } from "./button.js";
-import { A as b, m as x } from "../_chunks/framer.js";
-const C = h.forwardRef(
-  ({ className: a, value: i, onClear: r, loading: o, size: c = "md", placeholder: m, ...s }, p) => {
-    const n = i !== void 0 && i !== "", l = o ? /* @__PURE__ */ t(S, { size: "sm" }) : /* @__PURE__ */ t(b, { children: n && r && /* @__PURE__ */ t(
-      x.div,
-      {
-        initial: { opacity: 0, scale: 0.8 },
-        animate: { opacity: 1, scale: 1 },
-        exit: { opacity: 0, scale: 0.8 },
-        transition: y.snappy,
-        children: /* @__PURE__ */ t(
-          I,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "icon-xs",
-            onClick: r,
-            "aria-label": "Clear search",
-            title: "Clear",
-            children: /* @__PURE__ */ t(e, { icon: f })
-          }
-        )
-      }
-    ) });
-    return /* @__PURE__ */ t(
-      u,
-      {
-        ref: p,
-        size: c,
-        startSection: /* @__PURE__ */ t(e, { icon: d }),
-        endSection: l,
-        endSectionClickable: !!n && !o,
-        placeholder: m,
-        value: i,
-        "aria-busy": o || void 0,
-        className: a,
-        ...s
-      }
-    );
-  }
-);
-C.displayName = "SearchInput";
-export {
-  C as SearchInput
-};
+import { a as e, c as t } from "../_chunks/framer.js";
+import { springs as n } from "./lib/motion.js";
+import { Spinner as r } from "./spinner.js";
+import { Icon as i } from "./icon.js";
+import { Button as a } from "./button.js";
+import { Input as o } from "./input.js";
+import * as s from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { IconSearch as l, IconX as u } from "@tabler/icons-react";
+//#region src/ui/search-input.tsx
+var d = s.forwardRef(({ className: s, value: d, onClear: f, loading: p, size: m = "md", placeholder: h, ...g }, _) => {
+	let v = d !== void 0 && d !== "", y = p ? /* @__PURE__ */ c(r, { size: "sm" }) : /* @__PURE__ */ c(t, { children: v && f && /* @__PURE__ */ c(e.div, {
+		initial: {
+			opacity: 0,
+			scale: .8
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .8
+		},
+		transition: n.snappy,
+		children: /* @__PURE__ */ c(a, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			onClick: f,
+			"aria-label": "Clear search",
+			title: "Clear",
+			children: /* @__PURE__ */ c(i, { icon: u })
+		})
+	}) });
+	return /* @__PURE__ */ c(o, {
+		ref: _,
+		size: m,
+		startSection: /* @__PURE__ */ c(i, { icon: l }),
+		endSection: y,
+		endSectionClickable: !!v && !p,
+		placeholder: h,
+		value: d,
+		"aria-busy": p || void 0,
+		className: s,
+		...g
+	});
+});
+d.displayName = "SearchInput";
+//#endregion
+export { d as SearchInput };

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.js","names":[],"sources":["../../src/ui/search-input.tsx"],"sourcesContent":["'use client'\n\nimport { IconSearch, IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { springs } from './lib/motion'\nimport { Spinner } from './spinner'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { Button } from './button'\n\ntype SearchInputSize = 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Props for SearchInput — a search field with a built-in leading magnifier icon, optional loading\n * spinner, and an auto-shown clear button when `value` is non-empty and `onClear` is provided.\n *\n * **Sizes:** `sm` | `md` (default) | `lg` — matches Input's `size` prop API.\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Clear button:** Appears automatically when `value !== ''` and `onClear` is provided.\n * When `loading` is true, a spinning loader replaces the clear button.\n *\n * @example\n * // Controlled search with clear:\n * <SearchInput\n *   value={query}\n *   onChange={(e) => setQuery(e.target.value)}\n *   onClear={() => setQuery('')}\n *   placeholder=\"Search tasks...\"\n * />\n *\n * @example\n * // Async search with loading state while fetching results:\n * <SearchInput\n *   value={query}\n *   onChange={handleSearch}\n *   loading={isSearching}\n *   placeholder=\"Search clients...\"\n * />\n *\n * @example\n * // Compact search bar in a toolbar:\n * <SearchInput size=\"sm\" value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ('')} />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  onClear?: () => void\n  loading?: boolean\n  /** @default 'md' */\n  size?: SearchInputSize\n}\n\nconst SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  ({ className, value, onClear, loading, size = 'md', placeholder, ...props }, ref) => {\n    const hasValue = value !== undefined && value !== ''\n\n    const endContent = loading ? (\n      <Spinner size=\"sm\" />\n    ) : (\n      <AnimatePresence>\n        {hasValue && onClear && (\n          <motion.div\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={springs.snappy}\n          >\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              onClick={onClear}\n              aria-label=\"Clear search\"\n              title=\"Clear\"\n            >\n              <Icon icon={IconX} />\n            </Button>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n\n    return (\n      <Input\n        ref={ref}\n        size={size}\n        startSection={<Icon icon={IconSearch} />}\n        endSection={endContent}\n        endSectionClickable={!!hasValue && !loading}\n        placeholder={placeholder}\n        value={value}\n        aria-busy={loading || undefined}\n        className={className}\n        {...props}\n      />\n    )\n  },\n)\nSearchInput.displayName = 'SearchInput'\n\nexport { SearchInput }\n"],"mappings":";;;;;;;;;;;AAqDA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,UAAO,YAAS,YAAS,UAAO,MAAM,gBAAa,GAAG,KAAS,MAAQ;CACnF,IAAM,IAAW,MAAU,KAAA,KAAa,MAAU,IAE5C,IAAa,IACjB,kBAAC,GAAD,EAAS,MAAK,MAAO,CAAA,GAErB,kBAAC,GAAD,EAAA,UACG,KAAY,KACX,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK;EACnC,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK;EAChC,YAAY,EAAQ;YAEpB,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,SAAS;GACT,cAAW;GACX,OAAM;aAEN,kBAAC,GAAD,EAAM,MAAM,GAAS,CAAA;GACd,CAAA;EACE,CAAA,EAEC,CAAA;AAGpB,QACE,kBAAC,GAAD;EACO;EACC;EACN,cAAc,kBAAC,GAAD,EAAM,MAAM,GAAc,CAAA;EACxC,YAAY;EACZ,qBAAqB,CAAC,CAAC,KAAY,CAAC;EACvB;EACN;EACP,aAAW,KAAW,KAAA;EACX;EACX,GAAI;EACJ,CAAA;EAGP;AACD,EAAY,cAAc"}

package/dist/ui/segmented-control.d.ts

@@ -1,7 +1,7 @@
 "use client";
 import * as React from 'react';
 export type SegmentedControlSize = 'sm' | 'md' | 'lg';
-export type SegmentedControlVariant = 'default' | 'accent';
+export type SegmentedControlVariant = 'default' | 'solid' | /** @deprecated Use `'solid'` instead. */ 'accent';
 export interface SegmentedControlOption {
     id: string;
     text: string;

package/dist/ui/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE1D,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA4BD,QAAA,MAAM,gBAAgB,8FA+HrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,yCAAyC,CAAC,QAAQ,CAAA;AAE9G,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAiCD,QAAA,MAAM,gBAAgB,8FA+HrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/segmented-control.js

@@ -1,115 +1,96 @@
 "use client";
-import { jsx as a, jsxs as S } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as i } from "./lib/utils.js";
-import { L as k, m as I } from "../_chunks/framer.js";
-const C = {
-  sm: { button: "h-7 px-ds-04 text-ds-sm", icon: "h-3.5 w-3.5" },
-  md: { button: "h-8 px-ds-05 text-ds-md", icon: "h-4 w-4" },
-  lg: { button: "h-10 px-ds-06 text-ds-md", icon: "h-4 w-4" }
-}, D = {
-  default: "bg-surface-overlay shadow-sm",
-  accent: "bg-accent-9"
-}, N = {
-  default: "text-surface-fg",
-  accent: "text-accent-fg"
-}, R = { type: "spring", stiffness: 400, damping: 30 }, z = o.forwardRef(
-  function({
-    size: g = "md",
-    variant: l = "default",
-    options: s,
-    selectedId: d,
-    onSelect: u,
-    disabled: c = !1,
-    className: x,
-    ...f
-  }, r) {
-    const p = o.useId(), m = o.useRef(null), h = o.useCallback(
-      (e) => {
-        m.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
-      },
-      [r]
-    ), v = (e) => {
-      if (c) return;
-      const t = s.findIndex((b) => b.id === d);
-      let n = t;
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault(), n = t > 0 ? t - 1 : s.length - 1;
-          break;
-        case "ArrowRight":
-          e.preventDefault(), n = t < s.length - 1 ? t + 1 : 0;
-          break;
-        case "Home":
-          e.preventDefault(), n = 0;
-          break;
-        case "End":
-          e.preventDefault(), n = s.length - 1;
-          break;
-        default:
-          return;
-      }
-      u(s[n].id), requestAnimationFrame(() => {
-        m.current?.querySelectorAll('[role="tab"]')?.[n]?.focus();
-      });
-    }, { button: y, icon: w } = C[g];
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        ref: h,
-        role: "tablist",
-        tabIndex: -1,
-        "aria-label": f["aria-label"] ?? "Segmented control",
-        onKeyDown: v,
-        className: i(
-          "inline-flex p-[3px] rounded-ds-lg",
-          "bg-surface-raised-hover border border-surface-border-subtle shadow-inset",
-          c && "opacity-action-disabled pointer-events-none",
-          x
-        ),
-        ...f,
-        children: /* @__PURE__ */ a(k, { id: p, children: s.map((e) => {
-          const t = e.id === d, n = e.icon;
-          return /* @__PURE__ */ S(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": t,
-              tabIndex: t ? 0 : -1,
-              disabled: c,
-              onClick: () => u(e.id),
-              className: i(
-                "relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md",
-                "font-medium transition-colors duration-fast-02 ease-productive-standard",
-                "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
-                y,
-                t ? N[l] : "text-surface-fg-muted hover:text-surface-fg"
-              ),
-              children: [
-                t && /* @__PURE__ */ a(
-                  I.span,
-                  {
-                    layoutId: "segment-pill",
-                    className: i(
-                      "absolute inset-0 rounded-ds-md pointer-events-none",
-                      D[l]
-                    ),
-                    transition: R
-                  }
-                ),
-                n && /* @__PURE__ */ a(n, { className: i("relative z-[1] shrink-0", w) }),
-                /* @__PURE__ */ a("span", { className: "relative z-[1]", children: e.text })
-              ]
-            },
-            e.id
-          );
-        }) })
-      }
-    );
-  }
-);
-z.displayName = "SegmentedControl";
-export {
-  z as SegmentedControl
-};
+import { a as e, s as t } from "../_chunks/framer.js";
+import { cn as n } from "./lib/utils.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/ui/segmented-control.tsx
+var o = {
+	sm: {
+		button: "h-7 px-ds-04 text-ds-sm",
+		icon: "h-3.5 w-3.5"
+	},
+	md: {
+		button: "h-8 px-ds-05 text-ds-md",
+		icon: "h-4 w-4"
+	},
+	lg: {
+		button: "h-10 px-ds-06 text-ds-md",
+		icon: "h-4 w-4"
+	}
+}, s = {
+	default: "bg-surface-overlay shadow-sm",
+	solid: "bg-accent-9",
+	accent: "bg-accent-9"
+}, c = {
+	default: "text-surface-fg",
+	solid: "text-accent-fg",
+	accent: "text-accent-fg"
+}, l = {
+	type: "spring",
+	stiffness: 400,
+	damping: 30
+}, u = r.forwardRef(function({ size: u = "md", variant: d = "default", options: f, selectedId: p, onSelect: m, disabled: h = !1, className: g, ..._ }, v) {
+	let y = r.useId(), b = r.useRef(null), x = r.useCallback((e) => {
+		b.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+	}, [v]), S = (e) => {
+		if (h) return;
+		let t = f.findIndex((e) => e.id === p), n = t;
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), n = t > 0 ? t - 1 : f.length - 1;
+				break;
+			case "ArrowRight":
+				e.preventDefault(), n = t < f.length - 1 ? t + 1 : 0;
+				break;
+			case "Home":
+				e.preventDefault(), n = 0;
+				break;
+			case "End":
+				e.preventDefault(), n = f.length - 1;
+				break;
+			default: return;
+		}
+		m(f[n].id), requestAnimationFrame(() => {
+			(b.current?.querySelectorAll("[role=\"tab\"]"))?.[n]?.focus();
+		});
+	}, { button: C, icon: w } = o[u];
+	return /* @__PURE__ */ i("div", {
+		ref: x,
+		role: "tablist",
+		tabIndex: -1,
+		"aria-label": _["aria-label"] ?? "Segmented control",
+		onKeyDown: S,
+		className: n("inline-flex p-[3px] rounded-ds-lg", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", h && "opacity-action-disabled pointer-events-none", g),
+		..._,
+		children: /* @__PURE__ */ i(t, {
+			id: y,
+			children: f.map((t) => {
+				let r = t.id === p, o = t.icon;
+				return /* @__PURE__ */ a("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": r,
+					tabIndex: r ? 0 : -1,
+					disabled: h,
+					onClick: () => m(t.id),
+					className: n("relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C, r ? c[d] : "text-surface-fg-muted hover:text-surface-fg"),
+					children: [
+						r && /* @__PURE__ */ i(e.span, {
+							layoutId: "segment-pill",
+							className: n("absolute inset-0 rounded-ds-md pointer-events-none", s[d]),
+							transition: l
+						}),
+						o && /* @__PURE__ */ i(o, { className: n("relative z-[1] shrink-0", w) }),
+						/* @__PURE__ */ i("span", {
+							className: "relative z-[1]",
+							children: t.text
+						})
+					]
+				}, t.id);
+			})
+		})
+	});
+});
+u.displayName = "SegmentedControl";
+//#endregion
+export { u as SegmentedControl };

package/dist/ui/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, LayoutGroup } from 'framer-motion'\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid' | /** @deprecated Use `'solid'` instead. */ 'accent'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon component rendered before the text label. */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-sm',\n  solid: 'bg-accent-9',\n  /** @deprecated Use `solid` instead. */\n  accent: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n  /** @deprecated Use `solid` instead. */\n  accent: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-ds-lg',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n            const OptionIcon = option.icon\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-ds-md pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {OptionIcon && (\n                  <OptionIcon className={cn('relative z-[1] shrink-0', iconSize)} />\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;AA6BA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CAEP,QAAQ;CACT,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CAEP,QAAQ;CACT,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,qCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO,GAC3B,IAAa,EAAO;AAE1B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,4EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,sDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,KACC,kBAAC,GAAD,EAAY,WAAW,EAAG,2BAA2B,EAAS,EAAI,CAAA;MAEpE,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAlCF,EAAO,GAkCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,WAAW,yGAAwB,CAAA;AAEzC,QAAA,MAAM,WAAW,0GAAwB,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;;;8EA2BjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,EACnF,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,QAAA,MAAM,aAAa,8FAejB,CAAA;AAGF,QAAA,MAAM,oBAAoB,qKAcxB,CAAA;AAGF,QAAA,MAAM,sBAAsB,uKAc1B,CAAA;AAIF,QAAA,MAAM,aAAa,8JAoCjB,CAAA;AAGF,QAAA,MAAM,WAAW,4JASf,CAAA;AAGF,QAAA,MAAM,UAAU,2JAmBd,CAAA;AAGF,QAAA,MAAM,eAAe,gKASnB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,WAAW,yGAAwB,CAAA;AAEzC,QAAA,MAAM,WAAW,0GAAwB,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;;;8EA2BjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,EACnF,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,QAAA,MAAM,aAAa,8FA0BjB,CAAA;AAGF,QAAA,MAAM,oBAAoB,qKAcxB,CAAA;AAGF,QAAA,MAAM,sBAAsB,uKAc1B,CAAA;AAIF,QAAA,MAAM,aAAa,8JAoCjB,CAAA;AAGF,QAAA,MAAM,WAAW,4JASf,CAAA;AAGF,QAAA,MAAM,UAAU,2JAmBd,CAAA;AAGF,QAAA,MAAM,eAAe,gKASnB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}