@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/checkbox.js

@@ -23,14 +23,14 @@ const L = n.forwardRef(({ className: h, error: u, indeterminate: a, checked: s,
       className: v(
         "peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm",
         "border border-surface-border-strong",
-        "bg-surface-3",
+        "bg-surface-raised-hover",
         "transition-colors duration-fast-01 ease-productive-standard",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-action-disabled",
-        "data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-4",
+        "data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active",
         "data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg",
         "data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg",
-        u && "border-error-7 bg-error-2",
+        u && "border-error-7 bg-error-3",
         h
       ),
       ...m,

package/dist/ui/chip.js

@@ -12,7 +12,7 @@ const j = h(
   {
     variants: {
       variant: {
-        subtle: "bg-surface-2 text-surface-fg border border-transparent",
+        subtle: "bg-surface-raised text-surface-fg border border-transparent",
         outline: "bg-transparent text-surface-fg border border-surface-border-strong"
       },
       size: {
@@ -69,8 +69,8 @@ const j = h(
     }
   }
 ), R = f.forwardRef(
-  ({ label: t, variant: i, size: l, color: g, icon: o, onClick: s, onDismiss: c, disabled: r, className: d, ...m }, b) => {
-    const e = !!s, u = e ? n.button : n.span, y = e && !r ? "cursor-pointer hover:bg-surface-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9" : "", x = r ? "opacity-action-disabled cursor-not-allowed" : "";
+  ({ label: t, variant: i, size: l, color: d, icon: o, onClick: s, onDismiss: c, disabled: r, className: g, ...m }, b) => {
+    const e = !!s, u = e ? n.button : n.span, y = e && !r ? "cursor-pointer hover:bg-surface-raised-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9" : "", x = r ? "opacity-action-disabled cursor-not-allowed" : "";
     return /* @__PURE__ */ p(
       u,
       {
@@ -80,7 +80,7 @@ const j = h(
         exit: { opacity: 0, scale: 0.8 },
         whileTap: e && !r ? { scale: 0.97 } : void 0,
         transition: w.snappy,
-        className: k(j({ variant: i, size: l, color: g }), y, x, d),
+        className: k(j({ variant: i, size: l, color: d }), y, x, g),
         onClick: e ? s : void 0,
         disabled: e ? r : void 0,
         type: e ? "button" : void 0,

package/dist/ui/code.js

@@ -7,7 +7,7 @@ const m = f.forwardRef(
     {
       ref: s,
       className: t(
-        "overflow-x-auto rounded-ds-md border border-surface-border-strong bg-surface-2 p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg",
+        "overflow-x-auto rounded-ds-md border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg",
         e
       ),
       ...d,
@@ -18,7 +18,7 @@ const m = f.forwardRef(
     {
       ref: s,
       className: t(
-        "rounded-ds-sm bg-surface-3 border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg",
+        "rounded-ds-sm bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg",
         e
       ),
       ...d,

package/dist/ui/color-input.js

@@ -56,7 +56,7 @@ const b = m.forwardRef(
             },
             maxLength: 7,
             className: c(
-              "h-ds-sm w-[90px] rounded-ds-md border border-surface-border-strong bg-surface-1 px-ds-03 font-mono text-ds-md text-surface-fg transition-colors",
+              "h-ds-sm w-[90px] rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-03 font-mono text-ds-md text-surface-fg transition-colors",
               "focus:border-accent-7 focus:outline-none focus:ring-1 focus:ring-accent-9",
               o && "cursor-not-allowed opacity-50"
             )

package/dist/ui/combobox.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as a, jsxs as d, Fragment as G } from "react/jsx-runtime";
+import { jsx as a, jsxs as o, Fragment as G } from "react/jsx-runtime";
 import * as r from "react";
 import { b as U, c as q, P as J, d as Q } from "../_chunks/primitives.js";
 import { IconChevronDown as W, IconSearch as Y, IconCheck as Z, IconX as V } from "@tabler/icons-react";
@@ -8,8 +8,8 @@ import { tweens as ee, springs as se } from "./lib/motion.js";
 import { m as te } from "../_chunks/framer.js";
 const P = 2, re = 36, ae = r.forwardRef(
   ({
-    options: u,
-    value: f,
+    options: f,
+    value: u,
     onValueChange: b,
     placeholder: S = "Select...",
     searchPlaceholder: A = "Search...",
@@ -23,15 +23,15 @@ const P = 2, re = 36, ae = r.forwardRef(
     accessibleLabel: H,
     ...M
   }, O) => {
-    const [m, w] = r.useState(!1), [g, y] = r.useState(""), [c, o] = r.useState(-1), k = r.useRef(null), N = r.useRef(null), R = r.useId(), I = r.useId(), n = r.useMemo(() => f == null ? [] : Array.isArray(f) ? f : [f], [f]), i = r.useMemo(
-      () => g ? u.filter(
-        (e) => e.label.toLowerCase().includes(g.toLowerCase())
-      ) : u,
-      [u, g]
+    const [m, w] = r.useState(!1), [v, y] = r.useState(""), [c, d] = r.useState(-1), k = r.useRef(null), N = r.useRef(null), R = r.useId(), I = r.useId(), n = r.useMemo(() => u == null ? [] : Array.isArray(u) ? u : [u], [u]), i = r.useMemo(
+      () => v ? f.filter(
+        (e) => e.label.toLowerCase().includes(v.toLowerCase())
+      ) : f,
+      [f, v]
     ), _ = r.useCallback(
       (e) => n.includes(e),
       [n]
-    ), v = r.useCallback(
+    ), g = r.useCallback(
       (e) => {
         if (h) {
           const s = n.includes(e) ? n.filter((t) => t !== e) : [...n, e];
@@ -49,7 +49,7 @@ const P = 2, re = 36, ae = r.forwardRef(
       [n, b]
     ), X = r.useCallback(
       (e) => {
-        x || (w(e), e || (y(""), o(-1)));
+        x || (w(e), e || (y(""), d(-1)));
       },
       [x]
     );
@@ -80,19 +80,19 @@ const P = 2, re = 36, ae = r.forwardRef(
           case "ArrowDown": {
             e.preventDefault();
             const s = C(c, 1);
-            o(s);
+            d(s);
             break;
           }
           case "ArrowUp": {
             e.preventDefault();
             const s = C(c, -1);
-            o(s);
+            d(s);
             break;
           }
           case "Home": {
             e.preventDefault();
             const s = i.findIndex((t) => !t.disabled);
-            o(s);
+            d(s);
             break;
           }
           case "End": {
@@ -103,20 +103,20 @@ const P = 2, re = 36, ae = r.forwardRef(
                 s = t;
                 break;
               }
-            o(s);
+            d(s);
             break;
           }
           case "Enter": {
-            e.preventDefault(), c >= 0 && c < i.length && !i[c].disabled && v(i[c].value);
+            e.preventDefault(), c >= 0 && c < i.length && !i[c].disabled && g(i[c].value);
             break;
           }
           case "Escape": {
-            e.preventDefault(), w(!1), y(""), o(-1);
+            e.preventDefault(), w(!1), y(""), d(-1);
             break;
           }
         }
       },
-      [c, i, C, v]
+      [c, i, C, g]
     );
     r.useEffect(() => {
       var e;
@@ -127,15 +127,15 @@ const P = 2, re = 36, ae = r.forwardRef(
     }, [c]);
     const z = r.useCallback(() => {
       if (n.length === 0) return null;
-      const e = u.find((s) => s.value === n[0]);
+      const e = f.find((s) => s.value === n[0]);
       return (e == null ? void 0 : e.label) ?? null;
-    }, [n, u]), B = () => {
+    }, [n, f]), B = () => {
       if (h && n.length > 0) {
         const e = n.slice(0, P), s = n.length - P;
-        return /* @__PURE__ */ d("span", { className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden", children: [
+        return /* @__PURE__ */ o("span", { className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden", children: [
           e.map((t) => {
-            const l = u.find((D) => D.value === t);
-            return l ? /* @__PURE__ */ d(
+            const l = f.find((D) => D.value === t);
+            return l ? /* @__PURE__ */ o(
               "span",
               {
                 className: "inline-flex items-center gap-ds-01 rounded-ds-md bg-accent-2 px-ds-03 py-[1px] text-ds-sm",
@@ -145,7 +145,7 @@ const P = 2, re = 36, ae = r.forwardRef(
                     "button",
                     {
                       type: "button",
-                      className: "inline-flex items-center justify-center rounded-ds-full outline-none hover:scale-110 hover:bg-surface-3 transition-transform duration-fast-01 ease-productive-standard",
+                      className: "inline-flex items-center justify-center rounded-ds-full outline-none hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
                       onClick: (D) => K(D, t),
                       "aria-label": `Remove ${l.label}`,
                       tabIndex: -1,
@@ -157,7 +157,7 @@ const P = 2, re = 36, ae = r.forwardRef(
               t
             ) : null;
           }),
-          s > 0 && /* @__PURE__ */ d("span", { className: "text-ds-sm text-surface-fg-muted", children: [
+          s > 0 && /* @__PURE__ */ o("span", { className: "text-ds-sm text-surface-fg-muted", children: [
             "+",
             s,
             " more"
@@ -171,8 +171,8 @@ const P = 2, re = 36, ae = r.forwardRef(
       }
       return /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left text-surface-fg-subtle", children: S });
     };
-    return /* @__PURE__ */ a(U, { open: m, onOpenChange: X, children: /* @__PURE__ */ d("div", { className: p("relative", T), ...M, children: [
-      /* @__PURE__ */ a(q, { asChild: !0, disabled: x, children: /* @__PURE__ */ d(
+    return /* @__PURE__ */ a(U, { open: m, onOpenChange: X, children: /* @__PURE__ */ o("div", { className: p("relative", T), ...M, children: [
+      /* @__PURE__ */ a(q, { asChild: !0, disabled: x, children: /* @__PURE__ */ o(
         "button",
         {
           ref: O,
@@ -184,7 +184,7 @@ const P = 2, re = 36, ae = r.forwardRef(
           "aria-label": H ?? S,
           disabled: x,
           className: p(
-            "flex h-ds-md w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-3 px-ds-04 py-ds-03 text-ds-md",
+            "flex h-ds-md w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 text-ds-md",
             "transition-colors duration-fast-01 ease-productive-standard",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
             "disabled:cursor-not-allowed disabled:opacity-action-disabled",
@@ -207,17 +207,17 @@ const P = 2, re = 36, ae = r.forwardRef(
             var s;
             e.preventDefault(), (s = k.current) == null || s.focus();
           },
-          children: /* @__PURE__ */ d(
+          children: /* @__PURE__ */ o(
             te.div,
             {
               initial: { opacity: 0, scale: 0.95 },
               animate: { opacity: 1, scale: 1 },
               transition: { ...se.snappy, opacity: ee.fade },
               className: p(
-                "z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-1 shadow-02"
+                "z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-overlay shadow-floating"
               ),
               children: [
-                /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04", children: [
+                /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04", children: [
                   /* @__PURE__ */ a(Y, { className: "h-ico-sm w-ico-sm shrink-0 text-surface-fg-subtle", "aria-hidden": "true" }),
                   /* @__PURE__ */ a(
                     "input",
@@ -226,9 +226,9 @@ const P = 2, re = 36, ae = r.forwardRef(
                       type: "text",
                       className: "flex-1 bg-transparent py-ds-03 text-ds-md outline-none placeholder:text-surface-fg-subtle",
                       placeholder: A,
-                      value: g,
+                      value: v,
                       onChange: (e) => {
-                        y(e.target.value), o(-1);
+                        y(e.target.value), d(-1);
                       },
                       onKeyDown: F,
                       "aria-autocomplete": "list",
@@ -249,7 +249,7 @@ const P = 2, re = 36, ae = r.forwardRef(
                     style: { maxHeight: `${j * re}px` },
                     children: i.map((e, s) => {
                       const t = _(e.value);
-                      return /* @__PURE__ */ d(
+                      return /* @__PURE__ */ o(
                         "li",
                         {
                           id: `${R}-option-${s}`,
@@ -264,17 +264,17 @@ const P = 2, re = 36, ae = r.forwardRef(
                             e.disabled && "pointer-events-none opacity-action-disabled"
                           ),
                           onClick: () => {
-                            e.disabled || v(e.value);
+                            e.disabled || g(e.value);
                           },
                           onKeyDown: (l) => {
-                            !e.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), v(e.value));
+                            !e.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), g(e.value));
                           },
                           onMouseEnter: () => {
-                            e.disabled || o(s);
+                            e.disabled || d(s);
                           },
                           children: [
                             e.icon && /* @__PURE__ */ a("span", { className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0", children: e.icon }),
-                            /* @__PURE__ */ a("span", { className: "flex flex-1 flex-col", children: E ? E(e, t) : /* @__PURE__ */ d(G, { children: [
+                            /* @__PURE__ */ a("span", { className: "flex flex-1 flex-col", children: E ? E(e, t) : /* @__PURE__ */ o(G, { children: [
                               /* @__PURE__ */ a("span", { children: e.label }),
                               e.description && /* @__PURE__ */ a("span", { className: "text-ds-sm text-surface-fg-muted", children: e.description })
                             ] }) }),

package/dist/ui/context-menu.js

@@ -39,7 +39,7 @@ const oe = P, E = n.forwardRef(({ className: e, inset: a, children: t, ...o }, r
   {
     ref: r,
     className: d(
-      "flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-2 focus:text-surface-fg data-[state=open]:bg-surface-2 data-[state=open]:text-surface-fg",
+      "flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg",
       a && "pl-ds-07",
       e
     ),
@@ -68,7 +68,7 @@ const F = n.forwardRef(({ className: e, children: a, ...t }, o) => {
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...v.snappy, opacity: w.fade },
           className: d(
-            "z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 text-surface-fg shadow-03",
+            "z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating",
             e
           ),
           children: a
@@ -95,7 +95,7 @@ const H = n.forwardRef(({ className: e, children: a, ...t }, o) => {
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...v.snappy, opacity: w.fade },
           className: d(
-            "z-popover rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 text-surface-fg shadow-03",
+            "z-popover rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating",
             e
           ),
           children: a
@@ -110,7 +110,7 @@ const J = n.forwardRef(({ className: e, inset: a, ...t }, o) => /* @__PURE__ */
   {
     ref: o,
     className: d(
-      "relative flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "relative flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       a && "pl-ds-07",
       e
     ),
@@ -123,7 +123,7 @@ const K = n.forwardRef(({ className: e, children: a, checked: t, ...o }, r) => /
   {
     ref: r,
     className: d(
-      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       e
     ),
     checked: t,
@@ -140,7 +140,7 @@ const Q = n.forwardRef(({ className: e, children: a, ...t }, o) => /* @__PURE__
   {
     ref: o,
     className: d(
-      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       e
     ),
     ...t,

package/dist/ui/data-table-toolbar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
 import { IconSearch as v, IconColumns3 as w, IconTextResize as D, IconDownload as N } from "@tabler/icons-react";
 import { DropdownMenu as y, DropdownMenuTrigger as T, DropdownMenuContent as k, DropdownMenuLabel as I, DropdownMenuSeparator as L, DropdownMenuCheckboxItem as j } from "./dropdown-menu.js";
 import { cn as f } from "./lib/utils.js";
@@ -14,7 +14,7 @@ const b = {
 }, g = f(
   "h-ds-sm px-ds-03 rounded-ds-md",
   "border border-surface-border-strong",
-  "hover:bg-surface-2",
+  "hover:bg-surface-raised",
   "text-ds-sm flex items-center gap-ds-02 transition-colors"
 ), d = "text-surface-fg-subtle";
 function S(n) {
@@ -45,9 +45,9 @@ function R({
   ...a
 }) {
   const i = n.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
-  return /* @__PURE__ */ s("div", { className: f("flex items-center gap-ds-03 pb-ds-04", t), ...a, children: [
-    m && /* @__PURE__ */ s("div", { className: "flex flex-1 items-center gap-ds-02", children: [
-      /* @__PURE__ */ o(
+  return /* @__PURE__ */ o("div", { className: f("flex items-center gap-ds-03 pb-ds-04", t), ...a, children: [
+    m && /* @__PURE__ */ o("div", { className: "flex flex-1 items-center gap-ds-02", children: [
+      /* @__PURE__ */ s(
         v,
         {
           size: 16,
@@ -55,7 +55,7 @@ function R({
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ s(
         "input",
         {
           type: "text",
@@ -72,26 +72,26 @@ function R({
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: "ml-auto flex items-center gap-ds-03", children: [
-      i.length > 0 && /* @__PURE__ */ s(y, { children: [
-        /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ o("div", { className: "ml-auto flex items-center gap-ds-03", children: [
+      i.length > 0 && /* @__PURE__ */ o(y, { children: [
+        /* @__PURE__ */ s(T, { asChild: !0, children: /* @__PURE__ */ o(
           "button",
           {
             type: "button",
             className: g,
             "aria-label": "Toggle column visibility",
             children: [
-              /* @__PURE__ */ o(w, { size: 16, className: d }),
+              /* @__PURE__ */ s(w, { size: 16, className: d }),
               "Columns"
             ]
           }
         ) }),
-        /* @__PURE__ */ s(k, { align: "end", className: "w-40", children: [
-          /* @__PURE__ */ o(I, { children: "Toggle columns" }),
-          /* @__PURE__ */ o(L, {}),
+        /* @__PURE__ */ o(k, { align: "end", className: "w-40", children: [
+          /* @__PURE__ */ s(I, { children: "Toggle columns" }),
+          /* @__PURE__ */ s(L, {}),
           i.map((e) => {
             const h = e.columnDef.header, C = typeof h == "string" ? h : e.id;
-            return /* @__PURE__ */ o(
+            return /* @__PURE__ */ s(
               j,
               {
                 checked: e.getIsVisible(),
@@ -103,7 +103,7 @@ function R({
           })
         ] })
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "button",
         {
           type: "button",
@@ -112,12 +112,12 @@ function R({
           "aria-label": `Table density: ${b[l]}. Click to change.`,
           title: `Density: ${b[l]}`,
           children: [
-            /* @__PURE__ */ o(D, { size: 16, className: d }),
+            /* @__PURE__ */ s(D, { size: 16, className: d }),
             b[l]
           ]
         }
       ),
-      r && /* @__PURE__ */ s(
+      r && /* @__PURE__ */ o(
         "button",
         {
           type: "button",
@@ -125,7 +125,7 @@ function R({
           onClick: () => S(n),
           "aria-label": "Export table as CSV",
           children: [
-            /* @__PURE__ */ o(N, { size: 16, className: d }),
+            /* @__PURE__ */ s(N, { size: 16, className: d }),
             "Export"
           ]
         }