@devalok/shilp-sutra 0.6.2 → 0.8.0

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,59 +1,34 @@
 "use client";
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import * as u from "react";
-import { cva as f } from "class-variance-authority";
-import { cn as m } from "./lib/utils.js";
-const b = f(
-  [
-    "flex w-full font-sans",
-    "bg-field text-text-primary",
-    "border border-border rounded-ds-md",
-    "placeholder:text-text-placeholder",
-    "hover:bg-field-hover",
-    "transition-colors duration-fast-01",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:border-border-interactive",
-    "disabled:cursor-not-allowed disabled:opacity-[0.38]",
-    "read-only:bg-layer-02 read-only:cursor-default"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-ds-sm text-ds-sm px-ds-03",
-        md: "h-ds-md text-ds-base px-ds-04",
-        lg: "h-ds-lg text-ds-lg px-ds-05"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), p = u.forwardRef(
-  ({ className: t, type: d, state: e, size: l, startIcon: r, endIcon: s, ...n }, a) => {
-    const o = /* @__PURE__ */ 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 : /* @__PURE__ */ c("div", { className: "relative flex items-center w-full", children: [
-      r && /* @__PURE__ */ 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 && /* @__PURE__ */ 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 })
-    ] });
-  }
-);
-p.displayName = "Input";
+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",
+  "placeholder:text-text-placeholder",
+  "hover:bg-field-hover",
+  "transition-colors duration-fast-01",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:border-border-interactive",
+  "disabled:cursor-not-allowed disabled:opacity-[0.38]",
+  "read-only:bg-layer-02 read-only:cursor-default"
+], {
+  variants: {
+    size: {
+      sm: "h-ds-sm text-ds-sm px-ds-03",
+      md: "h-ds-md text-ds-base px-ds-04",
+      lg: "h-ds-lg text-ds-lg px-ds-05"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), 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 })] });
+});
+y.displayName = "Input";
 export {
-  p as Input,
-  b as inputVariants
+  y as Input,
+  h as inputVariants
 };

package/dist/ui/label.js

@@ -3,21 +3,7 @@ import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import * as d from "react";
 import { Root as e } from "../primitives/react-label.js";
 import { cn as n } from "./lib/utils.js";
-const p = d.forwardRef(({ className: t, required: r, children: a, ...o }, m) => /* @__PURE__ */ s(
-  e,
-  {
-    ref: m,
-    className: n(
-      "font-sans text-ds-md font-medium text-text-primary leading-none peer-disabled:opacity-[0.38]",
-      t
-    ),
-    ...o,
-    children: [
-      a,
-      r && /* @__PURE__ */ i("span", { className: "text-text-error ml-ds-01", "aria-hidden": "true", children: "*" })
-    ]
-  }
-));
+const p = d.forwardRef(({ className: r, required: t, children: a, ...o }, m) => s(e, { ref: m, className: n("font-sans text-ds-md font-medium text-text-primary leading-none peer-disabled:opacity-[0.38]", r), ...o, children: [a, t && i("span", { className: "text-text-error ml-ds-01", "aria-hidden": "true", children: "*" })] }));
 p.displayName = e.displayName;
 export {
   p as Label

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
 };

package/dist/ui/popover.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import * as s from "react";
+import * as n from "react";
 import { Root as i, Anchor as m, Trigger as p, Portal as l, Content as t } from "../primitives/react-popover.js";
 import { cn as c } from "./lib/utils.js";
-const u = i, P = p, v = m, f = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, n) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+const u = i, v = p, P = m, f = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, s) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
   t,
   {
-    ref: n,
+    ref: s,
     align: a,
     sideOffset: r,
     className: c(
-      "z-dropdown w-72 rounded-ds-lg border border-border bg-layer-01 p-ds-05 text-text-primary shadow-03 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-popover w-72 rounded-ds-lg border border-border bg-layer-01 p-ds-05 text-text-primary shadow-03 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       e
     ),
     ...d
@@ -19,7 +19,7 @@ const u = i, P = p, v = m, f = s.forwardRef(({ className: e, align: a = "center"
 f.displayName = t.displayName;
 export {
   u as Popover,
-  v as PopoverAnchor,
+  P as PopoverAnchor,
   f as PopoverContent,
-  P as PopoverTrigger
+  v as PopoverTrigger
 };

package/dist/ui/separator.js

@@ -1,24 +1,9 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import * as e from "react";
+import { jsx as i } from "react/jsx-runtime";
+import * as l from "react";
 import { Root as o } from "../primitives/react-separator.js";
-import { cn as s } from "./lib/utils.js";
-const f = e.forwardRef(
-  ({ className: a, orientation: r = "horizontal", decorative: m = !0, ...t }, l) => /* @__PURE__ */ p(
-    o,
-    {
-      ref: l,
-      decorative: m,
-      orientation: r,
-      className: s(
-        "shrink-0 bg-border-subtle",
-        r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        a
-      ),
-      ...t
-    }
-  )
-);
+import { cn as p } from "./lib/utils.js";
+const f = l.forwardRef(({ className: a, orientation: r = "horizontal", decorative: t = !0, ...e }, m) => i(o, { ref: m, decorative: t, orientation: r, className: p("shrink-0 bg-border-subtle", r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a), ...e }));
 f.displayName = o.displayName;
 export {
   f as Separator

package/dist/ui/sheet.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import * as s from "react";
-import { Root as b, Close as i, Portal as x, Trigger as y, Content as l, Description as n, Overlay as m, Title as c } from "../primitives/react-dialog.js";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import * as o from "react";
+import { Root as x, Close as i, Portal as b, Trigger as y, Content as l, Description as n, Overlay as m, Title as c } from "../primitives/react-dialog.js";
 import { cva as u } from "class-variance-authority";
 import { IconX as N } from "@tabler/icons-react";
 import { cn as r } from "./lib/utils.js";
-const O = b, P = y, V = i, g = x, f = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const O = x, P = y, V = i, g = b, f = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
   m,
   {
     className: r(
@@ -13,7 +13,7 @@ const O = b, P = y, V = i, g = x, f = s.forwardRef(({ className: e, ...t }, a) =
       e
     ),
     ...t,
-    ref: a
+    ref: s
   }
 ));
 f.displayName = m.displayName;
@@ -32,8 +32,8 @@ const v = u(
       side: "right"
     }
   }
-), w = s.forwardRef(({ side: e = "right", className: t, children: a, ...p }, h) => /* @__PURE__ */ d(g, { children: [
-  /* @__PURE__ */ o(f, {}),
+), w = o.forwardRef(({ side: e = "right", className: t, children: s, ...p }, h) => /* @__PURE__ */ d(g, { children: [
+  /* @__PURE__ */ a(f, {}),
   /* @__PURE__ */ d(
     l,
     {
@@ -41,21 +41,21 @@ const v = u(
       className: r(v({ side: e }), t),
       ...p,
       children: [
-        /* @__PURE__ */ d(i, { 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__ */ o(N, { className: "h-ico-sm w-ico-sm" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ d(i, { 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__ */ a(N, { className: "h-ico-sm w-ico-sm" }),
+          /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
         ] }),
-        a
+        s
       ]
     }
   )
 ] }));
 w.displayName = l.displayName;
-const S = s.forwardRef(
-  ({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const S = o.forwardRef(
+  ({ className: e, ...t }, s) => /* @__PURE__ */ a(
     "div",
     {
-      ref: a,
+      ref: s,
       className: r(
         "flex flex-col space-y-ds-03 text-center sm:text-left",
         e
@@ -65,11 +65,11 @@ const S = s.forwardRef(
   )
 );
 S.displayName = "SheetHeader";
-const R = s.forwardRef(
-  ({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const R = o.forwardRef(
+  ({ className: e, ...t }, s) => /* @__PURE__ */ a(
     "div",
     {
-      ref: a,
+      ref: s,
       className: r(
         "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
         e
@@ -79,19 +79,19 @@ const R = s.forwardRef(
   )
 );
 R.displayName = "SheetFooter";
-const C = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const C = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
   c,
   {
-    ref: a,
+    ref: s,
     className: r("text-ds-lg font-semibold text-text-primary", e),
     ...t
   }
 ));
 C.displayName = c.displayName;
-const j = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const j = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
   n,
   {
-    ref: a,
+    ref: s,
     className: r("text-ds-md text-text-secondary", e),
     ...t
   }

package/dist/ui/spinner.js

@@ -5,42 +5,7 @@ const l = {
   sm: "h-ico-sm w-ico-sm",
   md: "h-ico-md w-ico-md",
   lg: "h-ico-lg w-ico-lg"
-}, t = a.forwardRef(
-  ({ size: e = "md", className: s, ...i }, n) => /* @__PURE__ */ r("span", { role: "status", children: [
-    /* @__PURE__ */ r(
-      "svg",
-      {
-        ref: n,
-        className: c("animate-spin motion-reduce:animate-none", l[e], s),
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...i,
-        children: [
-          /* @__PURE__ */ o(
-            "circle",
-            {
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "var(--color-border-subtle)",
-              strokeWidth: "4",
-              fill: "none"
-            }
-          ),
-          /* @__PURE__ */ o(
-            "path",
-            {
-              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
-              fill: "var(--color-interactive)"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ o("span", { className: "sr-only", children: "Loading..." })
-  ] })
-);
+}, t = a.forwardRef(({ size: e = "md", className: s, ...i }, n) => r("span", { role: "status", children: [r("svg", { ref: n, className: c("animate-spin motion-reduce:animate-none", l[e], s), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i, children: [o("circle", { cx: "12", cy: "12", r: "10", stroke: "var(--color-border-subtle)", strokeWidth: "4", fill: "none" }), o("path", { d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z", fill: "var(--color-interactive)" })] }), o("span", { className: "sr-only", children: "Loading..." })] }));
 t.displayName = "Spinner";
 export {
   t as Spinner

package/dist/ui/switch.js

@@ -3,26 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
 import * as n from "react";
 import { Root as o, Thumb as d } from "../primitives/react-switch.js";
 import { cn as r } from "./lib/utils.js";
-const c = n.forwardRef(({ className: t, error: a, ...s }, i) => /* @__PURE__ */ e(
-  o,
-  {
-    className: r(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong",
-      a && "border-border-error data-[state=checked]:bg-error",
-      t
-    ),
-    ...s,
-    ref: i,
-    children: /* @__PURE__ */ e(
-      d,
-      {
-        className: r(
-          "pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-fast-01 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
-  }
-));
+const c = n.forwardRef(({ className: t, error: a, ...s }, i) => e(o, { className: r("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong", a && "border-border-error data-[state=checked]:bg-error", t), ...s, ref: i, children: e(d, { className: r("pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-fast-01 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) }));
 c.displayName = o.displayName;
 export {
   c as Switch

package/dist/ui/tabs.js

@@ -12,60 +12,33 @@ const R = m, v = r.createContext({ variant: "line" }), p = f("inline-flex items-
     }
   },
   defaultVariants: { variant: "line" }
-}), u = f(
-  "inline-flex items-center justify-center whitespace-nowrap font-sans text-ds-md font-medium transition-[color,background-color,border-color,box-shadow] duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-[0.38]",
-  {
-    variants: {
-      variant: {
-        line: [
-          "px-ds-05 py-ds-03 -mb-px border-b-2 border-transparent",
-          "text-text-secondary hover:text-text-primary",
-          "data-[state=active]:border-interactive data-[state=active]:text-interactive"
-        ],
-        contained: [
-          "px-ds-05 py-ds-02b rounded-ds-md",
-          "text-text-secondary hover:text-text-primary",
-          "data-[state=active]:bg-layer-01 data-[state=active]:shadow-01 data-[state=active]:text-text-primary"
-        ]
-      }
-    },
-    defaultVariants: { variant: "line" }
-  }
-), x = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
-  const i = e ?? "line";
-  return /* @__PURE__ */ s(v.Provider, { value: { variant: i }, children: /* @__PURE__ */ s(
-    c,
-    {
-      ref: n,
-      className: o(p({ variant: i }), t),
-      ...a
+}), u = f("inline-flex items-center justify-center whitespace-nowrap font-sans text-ds-md font-medium transition-[color,background-color,border-color,box-shadow] duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-[0.38]", {
+  variants: {
+    variant: {
+      line: [
+        "px-ds-05 py-ds-03 -mb-px border-b-2 border-transparent",
+        "text-text-secondary hover:text-text-primary",
+        "data-[state=active]:border-interactive data-[state=active]:text-interactive"
+      ],
+      contained: [
+        "px-ds-05 py-ds-02b rounded-ds-md",
+        "text-text-secondary hover:text-text-primary",
+        "data-[state=active]:bg-layer-01 data-[state=active]:shadow-01 data-[state=active]:text-text-primary"
+      ]
     }
-  ) });
+  },
+  defaultVariants: { variant: "line" }
+}), x = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
+  const i = e ?? "line";
+  return s(v.Provider, { value: { variant: i }, children: s(c, { ref: n, className: o(p({ variant: i }), t), ...a }) });
 });
 x.displayName = c.displayName;
 const g = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
   const i = r.useContext(v), b = e ?? i.variant;
-  return /* @__PURE__ */ s(
-    l,
-    {
-      ref: n,
-      className: o(u({ variant: b }), t),
-      ...a
-    }
-  );
+  return s(l, { ref: n, className: o(u({ variant: b }), t), ...a });
 });
 g.displayName = l.displayName;
-const y = r.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ s(
-  d,
-  {
-    ref: a,
-    className: o(
-      "mt-ds-05 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
-      t
-    ),
-    ...e
-  }
-));
+const y = r.forwardRef(({ className: t, ...e }, a) => s(d, { ref: a, className: o("mt-ds-05 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", t), ...e }));
 y.displayName = d.displayName;
 export {
   R as Tabs,

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,QAAA,MAAM,gBAAgB;;8EAsBrB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EACrE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ,2FAiBb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,QAAA,MAAM,gBAAgB;;8EAsBrB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EACrE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ,2FAyBb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/textarea.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
-import * as a from "react";
-import { cva as t } from "class-variance-authority";
-import { cn as n } from "./lib/utils.js";
-const l = t(
+import { jsx as l } from "react/jsx-runtime";
+import * as c from "react";
+import { cva as b } from "class-variance-authority";
+import { cn as u } from "./lib/utils.js";
+import { useFormField as f } from "./form.js";
+const m = b(
   [
     "flex w-full font-sans resize-y",
     "bg-field text-text-primary",
@@ -25,25 +26,30 @@ const l = t(
     },
     defaultVariants: { size: "md" }
   }
-), c = a.forwardRef(
-  ({ className: e, state: r, size: s, ...o }, i) => /* @__PURE__ */ d(
-    "textarea",
-    {
-      "aria-invalid": r === "error" || void 0,
-      className: n(
-        l({ size: s }),
-        r === "error" && "border-border-error focus-visible:ring-error",
-        r === "warning" && "border-border-warning focus-visible:ring-warning",
-        r === "success" && "border-border-success focus-visible:ring-success",
-        e
-      ),
-      ref: i,
-      ...o
-    }
-  )
+), x = c.forwardRef(
+  ({ className: s, state: a, size: o, ...i }, t) => {
+    const r = f(), e = a ?? (r.state === "helper" ? void 0 : r.state), d = i["aria-describedby"] ?? r.helperTextId, n = i["aria-required"] ?? r.required;
+    return /* @__PURE__ */ l(
+      "textarea",
+      {
+        "aria-invalid": e === "error" || void 0,
+        "aria-describedby": d,
+        "aria-required": n || void 0,
+        className: u(
+          m({ size: o }),
+          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",
+          s
+        ),
+        ref: t,
+        ...i
+      }
+    );
+  }
 );
-c.displayName = "Textarea";
+x.displayName = "Textarea";
 export {
-  c as Textarea,
-  l as textareaVariants
+  x as Textarea,
+  m as textareaVariants
 };