@devalok/shilp-sutra 0.7.0 → 0.8.0

package/dist/tailwind/index.cjs

@@ -160,6 +160,7 @@ const r = {
         "layer-01": "var(--color-layer-01)",
         "layer-02": "var(--color-layer-02)",
         "layer-03": "var(--color-layer-03)",
+        "layer-active": "var(--color-layer-active)",
         overlay: "var(--color-overlay)",
         field: "var(--color-field)",
         "field-hover": "var(--color-field-hover)",
@@ -172,6 +173,7 @@ const r = {
         "text-error": "var(--color-text-error)",
         "text-success": "var(--color-text-success)",
         "text-warning": "var(--color-text-warning)",
+        "text-info": "var(--color-text-info)",
         "text-link": "var(--color-text-link)",
         "text-on-color": "var(--color-text-on-color)",
         "text-inverse": "var(--color-text-inverse)",

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAwV3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA0V3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -160,6 +160,7 @@ const r = {
         "layer-01": "var(--color-layer-01)",
         "layer-02": "var(--color-layer-02)",
         "layer-03": "var(--color-layer-03)",
+        "layer-active": "var(--color-layer-active)",
         overlay: "var(--color-overlay)",
         field: "var(--color-field)",
         "field-hover": "var(--color-field-hover)",
@@ -172,6 +173,7 @@ const r = {
         "text-error": "var(--color-text-error)",
         "text-success": "var(--color-text-success)",
         "text-warning": "var(--color-text-warning)",
+        "text-info": "var(--color-text-info)",
         "text-link": "var(--color-text-link)",
         "text-on-color": "var(--color-text-on-color)",
         "text-inverse": "var(--color-text-inverse)",

package/dist/tokens/semantic.css

@@ -58,6 +58,7 @@
   --color-layer-01:             var(--neutral-0);
   --color-layer-02:             var(--neutral-50);
   --color-layer-03:             var(--neutral-100);
+  --color-layer-active:         var(--neutral-200);
   --color-layer-accent-subtle:  var(--pink-50);
   --color-overlay:              rgba(5, 5, 5, 0.50);
   --color-field:                var(--neutral-50);
@@ -67,7 +68,7 @@
   --color-text-primary:         var(--neutral-900);
   --color-text-secondary:       var(--neutral-700);
   --color-text-tertiary:        var(--neutral-600);
-  --color-text-placeholder:     var(--neutral-400);
+  --color-text-placeholder:     var(--neutral-500);
   --color-text-helper:          var(--neutral-600);
   --color-text-disabled:        var(--neutral-400);
   --color-text-error:           var(--red-600);
@@ -283,6 +284,7 @@
   --color-layer-01:             var(--neutral-900);
   --color-layer-02:             var(--neutral-800);
   --color-layer-03:             var(--neutral-700);
+  --color-layer-active:         var(--neutral-700);
   --color-layer-accent-subtle:  var(--pink-950);
   --color-overlay:              rgba(0, 0, 0, 0.70);
   /* Fields */

package/dist/ui/alert.js

@@ -48,7 +48,7 @@ const N = v("relative flex gap-ds-04 rounded-ds-lg border p-ds-05", {
   neutral: s
 }, h = g.forwardRef(({ className: n, variant: c = "subtle", color: e = "info", title: t, onDismiss: o, children: i, ...l }, d) => {
   const b = w[e ?? "info"];
-  return a("div", { ref: d, className: p(N({ variant: c, color: e }), n), role: "alert", ...l, children: [r(b, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }), a("div", { className: "flex-1 min-w-0", children: [t && r("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }), r("div", { className: "text-ds-md opacity-[0.9]", children: i })] }), o && r("button", { type: "button", onClick: o, className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Dismiss", children: r(f, { className: "h-ico-sm w-ico-sm" }) })] });
+  return a("div", { ref: d, className: p(N({ variant: c, color: e }), n), role: "alert", ...l, children: [r(b, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }), a("div", { className: "flex-1 min-w-0", children: [t && r("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }), r("div", { className: "text-ds-md opacity-[0.9]", children: i })] }), o && r("button", { type: "button", onClick: o, className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Dismiss", children: r(f, { className: "h-ico-sm w-ico-sm" }) })] });
 });
 h.displayName = "Alert";
 export {

package/dist/ui/badge.js

@@ -32,6 +32,7 @@ const u = x("inline-flex items-center gap-ds-02b font-sans font-medium rounded-d
       emerald: ""
     },
     size: {
+      xs: "h-[16px] px-ds-02b text-ds-xs",
       sm: "h-[20px] px-ds-03 text-ds-xs",
       md: "h-ds-xs px-ds-03 text-ds-sm",
       lg: "h-ds-xs-plus px-ds-04 text-ds-md"
@@ -94,7 +95,7 @@ const u = x("inline-flex items-center gap-ds-02b font-sans font-medium rounded-d
     color: "default",
     size: "md"
   }
-}), v = g.forwardRef(({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [n && r("span", { className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0", "aria-hidden": "true" }), c, e && r("button", { type: "button", onClick: e, className: "ml-ds-01 min-h-6 min-w-6 flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Remove", children: r(b, { className: "h-ico-sm w-ico-sm" }) })] }));
+}), v = g.forwardRef(({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [n && r("span", { className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0", "aria-hidden": "true" }), c, e && r("button", { type: "button", onClick: e, className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Remove", children: r(b, { className: "h-ico-sm w-ico-sm" }) })] }));
 v.displayName = "Badge";
 export {
   v as Badge,

package/dist/ui/banner.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as s, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as n, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
 import * as x from "react";
 import { cva as g } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
@@ -19,24 +19,24 @@ const h = g(
     defaultVariants: { color: "info" }
   }
 ), N = {
-  info: s,
+  info: n,
   success: b,
   warning: m,
   error: f,
-  neutral: s
+  neutral: n
 }, v = x.forwardRef(
-  ({ className: t, color: e = "info", action: o, onDismiss: n, children: i, ...c }, a) => {
-    const l = N[e ?? "info"];
-    return /* @__PURE__ */ d("div", { ref: a, className: p(h({ color: e }), t), role: "alert", ...c, children: [
-      /* @__PURE__ */ r(l, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+  ({ className: t, color: e = "info", action: s, onDismiss: o, children: i, ...c }, a) => {
+    const d = N[e ?? "info"];
+    return /* @__PURE__ */ l("div", { ref: a, className: p(h({ color: e }), t), role: "alert", ...c, children: [
+      /* @__PURE__ */ r(d, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
       /* @__PURE__ */ r("span", { className: "flex-1", children: i }),
-      o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
-      n && /* @__PURE__ */ r(
+      s && /* @__PURE__ */ r("span", { className: "shrink-0", children: s }),
+      o && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          onClick: n,
-          className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+          onClick: o,
+          className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
           "aria-label": "Dismiss",
           children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
         }

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

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/ui/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;;;8EA6DjB,CAAA;AAED,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEzJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,KAAK,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,IAAI;;;;;WATD,MAAM;YACL,SAAS;WACV,KAAK,CAAC,SAAS;cACZ,KAAK,CAAC,iBAAiB;gBACrB,MAAM,IAAI;eACX,OAAO;gBACN,MAAM;qCAyCnB,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/ui/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,YAAY;;;;8EA6DjB,CAAA;AAED,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEzJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,KAAK,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,IAAI;;;;;WATD,MAAM;YACL,SAAS;WACV,KAAK,CAAC,SAAS;cACZ,KAAK,CAAC,iBAAiB;gBACrB,MAAM,IAAI;eACX,OAAO;gBACN,MAAM;qCAyCnB,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}

package/dist/ui/chip.js

@@ -85,7 +85,7 @@ const w = N(
             {
               type: "button",
               "aria-label": `Remove ${a}`,
-              className: "flex-shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-full p-ds-01 hover:bg-layer-03 transition-colors duration-fast-01 [&>svg]:w-ico-sm [&>svg]:h-ico-sm",
+              className: "flex-shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full p-ds-01 hover:bg-layer-03 transition-colors duration-fast-01 [&>svg]:w-ico-sm [&>svg]:h-ico-sm",
               onClick: (y) => {
                 y.stopPropagation(), c();
               },

package/dist/ui/color-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,0FAkFf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,0FAmFf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/color-input.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import * as m from "react";
-import { cn as n } from "./lib/utils.js";
+import { cn as s } from "./lib/utils.js";
 const f = m.forwardRef(
-  ({ value: s = "#000000", onChange: a, presets: c, disabled: o = !1, className: d }, u) => {
-    const l = (r) => {
-      a == null || a(r);
+  ({ value: l = "#000000", onChange: n, presets: c, disabled: o = !1, className: d }, u) => {
+    const a = (r) => {
+      n == null || n(r);
     };
-    return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-ds-03", d), children: [
+    return /* @__PURE__ */ i("div", { className: s("flex flex-col gap-ds-03", d), children: [
       /* @__PURE__ */ i("div", { className: "flex items-center gap-ds-03", children: [
         /* @__PURE__ */ i(
           "label",
           {
             "aria-label": "Pick a color",
-            className: n(
+            className: s(
               "relative flex h-ds-sm w-ds-sm shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-ds-md border border-border transition-colors hover:border-border-strong",
               o && "cursor-not-allowed opacity-50"
             ),
@@ -23,9 +23,9 @@ const f = m.forwardRef(
                 {
                   ref: u,
                   type: "color",
-                  value: s,
+                  value: l,
                   disabled: o,
-                  onChange: (r) => l(r.target.value),
+                  onChange: (r) => a(r.target.value),
                   className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
                 }
               ),
@@ -33,7 +33,7 @@ const f = m.forwardRef(
                 "span",
                 {
                   className: "h-full w-full rounded-[inherit]",
-                  style: { backgroundColor: s }
+                  style: { backgroundColor: l }
                 }
               )
             ]
@@ -43,18 +43,19 @@ const f = m.forwardRef(
           "input",
           {
             type: "text",
-            value: s,
+            "aria-label": "Hex color value",
+            value: l,
             disabled: o,
             onChange: (r) => {
               const e = r.target.value;
-              /^#[0-9a-fA-F]{0,6}$/.test(e) && l(e);
+              /^#[0-9a-fA-F]{0,6}$/.test(e) && a(e);
             },
             onBlur: (r) => {
               const e = r.target.value;
-              /^#[0-9a-fA-F]{6}$/.test(e) && l(e);
+              /^#[0-9a-fA-F]{6}$/.test(e) && a(e);
             },
             maxLength: 7,
-            className: n(
+            className: s(
               "h-ds-sm w-[90px] rounded-ds-md border border-border bg-layer-01 px-ds-03 font-mono text-ds-sm text-text-primary transition-colors",
               "focus:border-interactive focus:outline-none focus:ring-1 focus:ring-interactive",
               o && "cursor-not-allowed opacity-50"
@@ -67,10 +68,10 @@ const f = m.forwardRef(
         {
           type: "button",
           disabled: o,
-          onClick: () => l(r),
-          className: n(
+          onClick: () => a(r),
+          className: s(
             "h-ds-xs w-ds-xs rounded-ds-sm border transition-colors",
-            s === r ? "border-interactive ring-1 ring-interactive" : "border-border hover:border-border-strong",
+            l === r ? "border-interactive ring-1 ring-interactive" : "border-border hover:border-border-strong",
             o && "cursor-not-allowed opacity-50"
           ),
           style: { backgroundColor: r },

package/dist/ui/combobox.d.ts

@@ -15,11 +15,12 @@ export interface ComboboxOption {
  * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard
  * navigation, pill overflow ("+ N more"), and an optional custom option renderer.
  *
- * **Single vs multi:** `multiple={false}` (default) — `value` is a `string`. When `multiple={true}`,
- * `value` is `string[]` and selected items appear as dismissible pills in the trigger.
+ * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`
+ * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives
+ * `string[]`, and selected items appear as dismissible pills in the trigger.
  *
- * **`onValueChange` signature:** always `(value: string | string[]) => void`. Check `multiple` to determine
- * which type you'll receive.
+ * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and
+ * `onValueChange` automatically, so no manual casts are needed.
  *
  * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).
  *
@@ -28,7 +29,7 @@ export interface ComboboxOption {
  * <Combobox
  *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}
  *   value={country}
- *   onValueChange={(v) => setCountry(v as string)}
+ *   onValueChange={(v) => setCountry(v)}
  *   placeholder="Select country"
  * />
  *
@@ -38,7 +39,7 @@ export interface ComboboxOption {
  *   multiple
  *   options={tagOptions}
  *   value={selectedTags}
- *   onValueChange={(v) => setSelectedTags(v as string[])}
+ *   onValueChange={(v) => setSelectedTags(v)}
  *   placeholder="Select tags..."
  * />
  *
@@ -47,7 +48,7 @@ export interface ComboboxOption {
  * <Combobox
  *   options={users.map(u => ({ value: u.id, label: u.name }))}
  *   value={assigneeId}
- *   onValueChange={(v) => setAssigneeId(v as string)}
+ *   onValueChange={(v) => setAssigneeId(v)}
  *   renderOption={(option, selected) => (
  *     <span className="flex items-center gap-ds-03">
  *       <Avatar size="xs"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>
@@ -57,20 +58,28 @@ export interface ComboboxOption {
  * />
  * // These are just a few ways — feel free to combine props creatively!
  */
-export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     options: ComboboxOption[];
-    value?: string | string[];
-    onValueChange: (value: string | string[]) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
-    multiple?: boolean;
     disabled?: boolean;
     triggerClassName?: string;
     /** Max visible items in the dropdown before scroll (default 6) */
     maxVisible?: number;
     renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode;
 }
+interface ComboboxSingleProps extends ComboboxBaseProps {
+    multiple?: false;
+    value?: string;
+    onValueChange: (value: string) => void;
+}
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+    multiple: true;
+    value?: string[];
+    onValueChange: (value: string[]) => void;
+}
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
 export { Combobox };
 //# sourceMappingURL=combobox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9E;AAQD,QAAA,MAAM,QAAQ,yFA4Xb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9E;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFA4Xb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/dialog.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
-import { Root as g, Close as r, Portal as y, Trigger as x, Content as d, Description as n, Overlay as c, Title as m } from "../primitives/react-dialog.js";
+import { Root as g, Close as r, Portal as x, Trigger as y, Content as i, Description as n, Overlay as c, Title as m } from "../primitives/react-dialog.js";
 import { IconX as N } from "@tabler/icons-react";
 import { cn as l } from "./lib/utils.js";
-const F = g, H = x, u = y, O = r, f = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+const F = g, H = y, u = x, O = r, f = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   c,
   {
     ref: t,
@@ -16,10 +16,10 @@ const F = g, H = x, u = y, O = r, f = s.forwardRef(({ className: e, ...a }, t) =
   }
 ));
 f.displayName = c.displayName;
-const D = s.forwardRef(({ className: e, children: a, ...t }, p) => /* @__PURE__ */ i(u, { children: [
+const D = s.forwardRef(({ className: e, children: a, ...t }, p) => /* @__PURE__ */ d(u, { children: [
   /* @__PURE__ */ o(f, {}),
-  /* @__PURE__ */ i(
-    d,
+  /* @__PURE__ */ d(
+    i,
     {
       ref: p,
       className: l(
@@ -29,7 +29,7 @@ const D = s.forwardRef(({ className: e, children: a, ...t }, p) => /* @__PURE__
       ...t,
       children: [
         a,
-        /* @__PURE__ */ i(r, { className: "absolute right-ds-05 top-ds-05 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus disabled:pointer-events-none", children: [
+        /* @__PURE__ */ d(r, { className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus disabled:pointer-events-none", children: [
           /* @__PURE__ */ o(N, { className: "h-ico-lg w-ico-lg" }),
           /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
         ] })
@@ -37,9 +37,9 @@ const D = s.forwardRef(({ className: e, children: a, ...t }, p) => /* @__PURE__
     }
   )
 ] }));
-D.displayName = d.displayName;
+D.displayName = i.displayName;
 const w = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
-  d,
+  i,
   {
     ref: t,
     className: l(e),

package/dist/ui/form.js

@@ -1,49 +1,28 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import * as e from "react";
 import { cn as i } from "./lib/utils.js";
-const x = e.createContext({}), m = e.forwardRef(
-  ({ className: o, helperTextId: s, state: l = "helper", required: n, children: a, ...t }, r) => {
-    const c = e.useId(), p = s || `${c}-helper`;
-    return /* @__PURE__ */ d(x.Provider, { value: { state: l, helperTextId: p, required: n }, children: /* @__PURE__ */ d(
-      "div",
-      {
-        ref: r,
-        className: i("flex flex-col gap-ds-02", o),
-        ...t,
-        children: a
-      }
-    ) });
-  }
-);
+const x = e.createContext({}), m = e.forwardRef(({ className: o, helperTextId: s, state: l = "helper", required: n, children: d, ...t }, r) => {
+  const a = e.useId(), p = s || `${a}-helper`;
+  return c(x.Provider, { value: { state: l, helperTextId: p, required: n }, children: c("div", { ref: r, className: i("flex flex-col gap-ds-02", o), ...t, children: d }) });
+});
 m.displayName = "FormField";
-const u = {
+const f = {
   helper: "text-text-helper",
   error: "text-text-error",
   warning: "text-text-warning",
   success: "text-text-success"
-}, f = e.forwardRef(
-  ({ className: o, id: s, state: l, ...n }, a) => {
-    const t = e.useContext(x), r = l ?? t.state ?? "helper", c = s ?? t.helperTextId;
-    return /* @__PURE__ */ d(
-      "p",
-      {
-        ref: a,
-        id: c,
-        role: r === "error" ? "alert" : void 0,
-        className: i("text-ds-sm", u[r], o),
-        ...n
-      }
-    );
-  }
-);
-f.displayName = "FormHelperText";
-function v() {
+}, u = e.forwardRef(({ className: o, id: s, state: l, ...n }, d) => {
+  const t = e.useContext(x), r = l ?? t.state ?? "helper", a = s ?? t.helperTextId;
+  return c("p", { ref: d, id: a, role: r === "error" ? "alert" : void 0, className: i("text-ds-sm", f[r], o), ...n });
+});
+u.displayName = "FormHelperText";
+function C() {
   return e.useContext(x);
 }
 export {
   m as FormField,
   x as FormFieldContext,
-  f as FormHelperText,
-  v as useFormField
+  u as FormHelperText,
+  C as useFormField
 };

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpE,QAAA,MAAM,aAAa;;8EAsBlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,KAAK,qFAsCV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpE,QAAA,MAAM,aAAa;;8EAsBlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,KAAK,qFA6CV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/input.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import * as f from "react";
-import { cva as u } from "class-variance-authority";
-import { cn as m } from "./lib/utils.js";
-const b = u([
+import { jsx as d, jsxs as m } from "react/jsx-runtime";
+import * as p from "react";
+import { cva as x } from "class-variance-authority";
+import { cn as v } from "./lib/utils.js";
+import { useFormField as g } from "./form.js";
+const h = x([
   "flex w-full font-sans",
   "bg-field text-text-primary",
   "border border-border rounded-ds-md",
@@ -22,12 +23,12 @@ const b = u([
     }
   },
   defaultVariants: { size: "md" }
-}), p = f.forwardRef(({ className: t, type: d, state: e, size: l, startIcon: r, endIcon: s, ...n }, a) => {
-  const o = i("input", { type: d, className: m(b({ size: l }), r && "pl-ds-08", s && "pr-ds-08", e === "error" && "border-border-error focus-visible:ring-error", e === "warning" && "border-border-warning focus-visible:ring-warning", e === "success" && "border-border-success focus-visible:ring-success", t), "aria-invalid": e === "error" || void 0, ref: a, ...n });
-  return !r && !s ? o : c("div", { className: "relative flex items-center w-full", children: [r && i("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: r }), o, s && i("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: s })] });
+}), y = p.forwardRef(({ className: a, type: n, state: l, size: c, startIcon: e, endIcon: r, ...t }, u) => {
+  const s = g(), i = l ?? (s.state === "helper" ? void 0 : s.state), f = t["aria-describedby"] ?? s.helperTextId, b = t["aria-required"] ?? s.required, o = d("input", { type: n, className: v(h({ size: c }), e && "pl-ds-08", r && "pr-ds-08", i === "error" && "border-border-error focus-visible:ring-error", i === "warning" && "border-border-warning focus-visible:ring-warning", i === "success" && "border-border-success focus-visible:ring-success", a), "aria-invalid": i === "error" || void 0, "aria-describedby": f, "aria-required": b || void 0, ref: u, ...t });
+  return !e && !r ? o : m("div", { className: "relative flex items-center w-full", children: [e && d("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: e }), o, r && d("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: r })] });
 });
-p.displayName = "Input";
+y.displayName = "Input";
 export {
-  p as Input,
-  b as inputVariants
+  y as Input,
+  h as inputVariants
 };

package/dist/ui/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/ui/number-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACjI,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,2FA+EhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/ui/number-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACjI,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,WAAW,2FAuFhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/number-input.js

@@ -1,35 +1,37 @@
 "use client";
-import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import * as u from "react";
-import { IconMinus as N, IconPlus as w } from "@tabler/icons-react";
-import { cn as I } from "./lib/utils.js";
-const y = u.forwardRef(
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import * as w from "react";
+import { IconMinus as y, IconPlus as v } from "@tabler/icons-react";
+import { cn as E } from "./lib/utils.js";
+import { useFormField as j } from "./form.js";
+const h = w.forwardRef(
   ({
     value: r = 0,
     onValueChange: e,
-    min: o = Number.MIN_SAFE_INTEGER,
-    max: n = Number.MAX_SAFE_INTEGER,
-    step: i = 1,
+    min: i = Number.MIN_SAFE_INTEGER,
+    max: o = Number.MAX_SAFE_INTEGER,
+    step: n = 1,
     disabled: d = !1,
     className: m,
-    ...p
-  }, a) => {
-    const b = (s) => {
-      const t = parseInt(s.target.value) || 0;
-      t >= o && t <= n && (e == null || e(t));
-    }, l = (s) => {
+    "aria-label": b,
+    ...a
+  }, p) => {
+    const l = j(), f = b ?? (a.id || l.helperTextId ? void 0 : "Numeric value"), x = (s) => {
+      const t = parseInt(s.target.value, 10) || 0;
+      t >= i && t <= o && (e == null || e(t));
+    }, u = (s) => {
       s.preventDefault();
-      const t = r + i;
-      t <= n && (e == null || e(t));
-    }, f = (s) => {
+      const t = r + n;
+      t <= o && (e == null || e(t));
+    }, N = (s) => {
       s.preventDefault();
-      const t = r - i;
-      t >= o && (e == null || e(t));
+      const t = r - n;
+      t >= i && (e == null || e(t));
     };
-    return /* @__PURE__ */ x(
+    return /* @__PURE__ */ I(
       "div",
       {
-        className: I(
+        className: E(
           "flex items-center justify-between rounded-ds-full border border-border",
           m
         ),
@@ -38,37 +40,39 @@ const y = u.forwardRef(
             "button",
             {
               type: "button",
-              onClick: f,
-              disabled: d || r <= o,
+              onClick: N,
+              disabled: d || r <= i,
               "aria-label": "Decrease value",
               className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-text-placeholder transition-colors hover:text-text-secondary",
-              children: /* @__PURE__ */ c(N, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ c(y, { className: "h-ico-sm w-ico-sm" })
             }
           ),
           /* @__PURE__ */ c(
             "input",
             {
-              ref: a,
+              ref: p,
               type: "number",
               value: r,
-              onChange: b,
-              min: o,
-              max: n,
-              step: i,
+              onChange: x,
+              min: i,
+              max: o,
+              step: n,
               disabled: d,
+              "aria-label": f,
+              "aria-describedby": a["aria-describedby"] ?? l.helperTextId,
               className: "bg-transparent text-ds-base font-semibold w-ds-sm-plus border-0 text-center text-text-secondary [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-              ...p
+              ...a
             }
           ),
           /* @__PURE__ */ c(
             "button",
             {
               type: "button",
-              onClick: l,
-              disabled: d || r >= n,
+              onClick: u,
+              disabled: d || r >= o,
               "aria-label": "Increase value",
               className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-text-placeholder transition-colors hover:text-text-secondary",
-              children: /* @__PURE__ */ c(w, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ c(v, { className: "h-ico-sm w-ico-sm" })
             }
           )
         ]
@@ -76,7 +80,7 @@ const y = u.forwardRef(
     );
   }
 );
-y.displayName = "NumberInput";
+h.displayName = "NumberInput";
 export {
-  y as NumberInput
+  h as NumberInput
 };