@devalok/shilp-sutra 0.7.0 → 0.8.1

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

package/dist/ui/toast.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as r from "react";
 import { Provider as p, Root as i, Action as d, Close as n, Description as l, Title as c, Viewport as m } from "../primitives/react-toast.js";
 import { cva as u } from "class-variance-authority";
-import { IconX as b } from "@tabler/icons-react";
+import { IconX as x } from "@tabler/icons-react";
 import { cn as a } from "./lib/utils.js";
-const C = p, x = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const C = p, b = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   m,
   {
-    ref: o,
+    ref: s,
     className: a(
       "fixed top-0 z-toast flex max-h-screen w-full flex-col-reverse p-ds-05 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       e
@@ -16,7 +16,7 @@ const C = p, x = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
     ...t
   }
 ));
-x.displayName = m.displayName;
+b.displayName = m.displayName;
 const v = u(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-ds-03 overflow-hidden rounded-ds-md border p-ds-05 pr-ds-06 shadow-03 transition-all duration-moderate-02 data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
@@ -33,21 +33,21 @@ const v = u(
       color: "neutral"
     }
   }
-), w = r.forwardRef(({ className: e, color: t, ...o }, f) => /* @__PURE__ */ s(
+), w = r.forwardRef(({ className: e, color: t, ...s }, f) => /* @__PURE__ */ o(
   i,
   {
     ref: f,
     role: "status",
     "aria-live": "polite",
     className: a(v({ color: t }), e),
-    ...o
+    ...s
   }
 ));
 w.displayName = i.displayName;
-const y = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const y = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   d,
   {
-    ref: o,
+    ref: s,
     className: a(
       "inline-flex h-ds-sm shrink-0 items-center justify-center rounded-ds-md border border-border bg-transparent px-ds-04 text-ds-md font-medium transition-colors hover:bg-layer-02 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38] group-[.destructive]:border-border-error group-[.destructive]:hover:bg-error-surface",
       e
@@ -56,33 +56,33 @@ const y = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
   }
 ));
 y.displayName = d.displayName;
-const g = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const g = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   n,
   {
-    ref: o,
+    ref: s,
     className: a(
-      "absolute right-ds-02 top-ds-02 min-h-6 min-w-6 flex items-center justify-center rounded-ds-md p-ds-02 text-text-secondary opacity-70 transition-opacity hover:text-text-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+      "absolute right-ds-02 top-ds-02 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-md p-ds-02 text-text-secondary opacity-70 transition-opacity hover:text-text-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
       e
     ),
     "toast-close": "",
     ...t,
-    children: /* @__PURE__ */ s(b, { className: "h-ico-sm w-ico-sm" })
+    children: /* @__PURE__ */ o(x, { className: "h-ico-sm w-ico-sm" })
   }
 ));
 g.displayName = n.displayName;
-const N = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const N = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   c,
   {
-    ref: o,
+    ref: s,
     className: a("text-ds-md font-semibold [&+div]:text-ds-sm", e),
     ...t
   }
 ));
 N.displayName = c.displayName;
-const h = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const h = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   l,
   {
-    ref: o,
+    ref: s,
     className: a("text-ds-md opacity-[0.9]", e),
     ...t
   }
@@ -95,5 +95,5 @@ export {
   h as ToastDescription,
   C as ToastProvider,
   N as ToastTitle,
-  x as ToastViewport
+  b as ToastViewport
 };

package/llms-full.txt

@@ -390,12 +390,12 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Server-safe: No
 - Props:
     options: ComboboxOption[] (REQUIRED) — { value: string, label: string, description?: string, icon?: ReactNode, disabled?: boolean }
-    value: string | string[]
-    onValueChange: (value: string | string[]) => void (REQUIRED)
+    DISCRIMINATED UNION — type depends on `multiple` flag:
+    Single (default): multiple?: false, value: string, onValueChange: (value: string) => void
+    Multiple: multiple: true, value: string[], onValueChange: (value: string[]) => void
     placeholder: string (default: "Select...")
     searchPlaceholder: string (default: "Search...")
     emptyMessage: string (default: "No results found")
-    multiple: boolean (default: false)
     disabled: boolean
     triggerClassName: string
     maxVisible: number (default: 6, max dropdown items before scroll)
@@ -405,7 +405,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     multiple
     options={tagOptions}
     value={selectedTags}
-    onValueChange={(v) => setSelectedTags(v as string[])}
+    onValueChange={setSelectedTags}
     placeholder="Select tags..."
   />
 - Gotchas:
@@ -593,6 +593,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Gotchas:
     - HTML native "size" attribute is excluded — use CSS width instead
     - state="error" sets aria-invalid automatically
+    - Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
 
 ## InputOTP
 - Import: @devalok/shilp-sutra/ui/input-otp
@@ -1134,6 +1135,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Example:
   <Textarea size="lg" state="error" placeholder="Describe the issue..." />
 - Gotchas: state="error" sets aria-invalid automatically; all sizes are vertically resizable
+    - Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
 
 ## Toast / Toaster
 - Import: @devalok/shilp-sutra/ui/toast, @devalok/shilp-sutra/ui/toaster

package/llms.txt

@@ -4,6 +4,11 @@
 > Built on the same primitives as shadcn/ui but with key API differences.
 > Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
 
+## BREAKING CHANGES (v0.8.0)
+- Combobox: Now uses discriminated union. Single: `multiple?: false, value: string, onValueChange: (v: string) => void`. Multiple: `multiple: true, value: string[], onValueChange: (v: string[]) => void`. No more `v as string[]` casts.
+- StatusBadge: Pass either `status` OR `color`, not both (discriminated union).
+- Input/Textarea: Now auto-inherit state, aria-describedby, aria-required from FormField context. Explicit props override.
+
 ## Install & Setup
 
 pnpm add @devalok/shilp-sutra
@@ -127,12 +132,13 @@ NOTIFICATION SELECTION GUIDE:
 - FormField: state(helper|error|warning|success) > Label + Input + FormHelperText
 - useFormField() hook returns { state, helperTextId, required } from FormField context
 - Wire accessibility: const { state, helperTextId } = useFormField(); then aria-describedby={helperTextId}, aria-invalid={state === 'error'}
+- Input/Textarea auto-wire from FormField context (no manual hookup needed). Explicit props override.
 
 ### Composed Components
 - ConfirmDialog: open, onOpenChange, title, description, onConfirm + confirmText, cancelText, color(default|error), loading
 - PageHeader: title, subtitle, breadcrumbs[], actions(ReactNode)
 - AvatarGroup: users[], max(number), size(sm|md|lg), showTooltip
-- StatusBadge: status(active|pending|approved|rejected|completed|blocked|cancelled|draft) color(success|warning|error|info|neutral) size(sm|md)
+- StatusBadge: DISCRIMINATED UNION — pass status OR color, not both. status(active|pending|approved|rejected|completed|blocked|cancelled|draft) color(success|warning|error|info|neutral) size(sm|md)
 - ContentCard: variant(default|outline|ghost) padding(default|compact|spacious|none)
 - EmptyState: icon, title(required), description, action(ReactNode), compact
 - PriorityIndicator: priority(LOW|MEDIUM|HIGH|URGENT) display(compact|full)