@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/popover.js

@@ -1,32 +1,32 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
 import * as t from "react";
-import { P as u, d as l, c as P, b as v, aP as y } from "../_chunks/primitives.js";
-import { cn as x } from "./lib/utils.js";
-import { tweens as b, springs as g } from "./lib/motion.js";
+import { P as u, d, c as v, b as P, aP as y } from "../_chunks/primitives.js";
+import { cn as g } from "./lib/utils.js";
+import { tweens as x, springs as b } from "./lib/motion.js";
 import { A as h, m as C } from "../_chunks/framer.js";
 const m = t.createContext(!1), w = ({
   open: s,
-  defaultOpen: n = !1,
+  defaultOpen: a = !1,
   onOpenChange: o,
-  ...a
+  ...n
 }) => {
-  const [c, i] = t.useState(n), r = s !== void 0, p = r ? s : c, f = t.useCallback(
-    (d) => {
-      r || i(d), o == null || o(d);
+  const [c, i] = t.useState(a), r = s !== void 0, p = r ? s : c, f = t.useCallback(
+    (l) => {
+      r || i(l), o == null || o(l);
     },
     [r, o]
   );
-  return /* @__PURE__ */ e(m.Provider, { value: p, children: /* @__PURE__ */ e(v, { open: p, onOpenChange: f, ...a }) });
+  return /* @__PURE__ */ e(m.Provider, { value: p, children: /* @__PURE__ */ e(P, { open: p, onOpenChange: f, ...n }) });
 };
 w.displayName = "Popover";
-const k = P, z = y, A = t.forwardRef(({ className: s, align: n = "center", sideOffset: o = 4, children: a, ...c }, i) => {
+const k = v, z = y, A = t.forwardRef(({ className: s, align: a = "center", sideOffset: o = 4, children: n, ...c }, i) => {
   const r = t.useContext(m);
   return /* @__PURE__ */ e(h, { children: r && /* @__PURE__ */ e(u, { forceMount: !0, children: /* @__PURE__ */ e(
-    l,
+    d,
     {
       ref: i,
-      align: n,
+      align: a,
       sideOffset: o,
       forceMount: !0,
       asChild: !0,
@@ -37,18 +37,18 @@ const k = P, z = y, A = t.forwardRef(({ className: s, align: n = "center", sideO
           initial: { opacity: 0, scale: 0.95 },
           animate: { opacity: 1, scale: 1 },
           exit: { opacity: 0, scale: 0.95 },
-          transition: { ...g.snappy, opacity: b.fade },
-          className: x(
-            "z-popover w-72 rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-05 text-surface-fg shadow-03 outline-none",
+          transition: { ...b.snappy, opacity: x.fade },
+          className: g(
+            "z-popover w-72 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-none",
             s
           ),
-          children: a
+          children: n
         }
       )
     }
   ) }) });
 });
-A.displayName = l.displayName;
+A.displayName = d.displayName;
 export {
   w as Popover,
   z as PopoverAnchor,

package/dist/ui/progress.js

@@ -7,7 +7,7 @@ import { cn as a } from "./lib/utils.js";
 import { springs as w } from "./lib/motion.js";
 import { m as x } from "../_chunks/framer.js";
 const N = c(
-  "relative w-full overflow-hidden rounded-ds-full bg-surface-2",
+  "relative w-full overflow-hidden rounded-ds-full bg-surface-raised",
   {
     variants: {
       size: {

package/dist/ui/radio.js

@@ -14,11 +14,11 @@ const u = t.forwardRef(({ className: r, ...a }, s) => /* @__PURE__ */ e(
     ref: s,
     className: c(
       "aspect-square h-ico-md w-ico-md rounded-ds-full",
-      "border border-surface-border-strong bg-surface-3",
+      "border border-surface-border-strong bg-surface-raised-hover",
       "transition-colors duration-fast-01",
       "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",
-      "hover:border-accent-7 hover:bg-surface-4",
+      "hover:border-accent-7 hover:bg-surface-raised-active",
       "data-[state=checked]:border-accent-7",
       r
     ),

package/dist/ui/search-input.js

@@ -30,10 +30,10 @@ const x = {
           className: p(
             "flex w-full font-sans",
             x[i],
-            "bg-surface-3 text-surface-fg",
+            "bg-surface-raised-hover text-surface-fg",
             "border border-surface-border-strong rounded-ds-md",
             "placeholder:text-surface-fg-subtle",
-            "hover:bg-surface-4",
+            "hover:bg-surface-raised-active",
             "transition-colors duration-fast-01 ease-productive-standard",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:border-accent-7",
             "disabled:cursor-not-allowed disabled:opacity-action-disabled",
@@ -47,7 +47,7 @@ const x = {
         {
           type: "button",
           onClick: r,
-          className: "absolute right-[0.75rem] rounded-ds-full h-ico-md w-ico-md flex items-center justify-center text-surface-fg-muted hover:text-surface-fg hover:bg-surface-2 transition-colors ease-productive-standard",
+          className: "absolute right-[0.75rem] rounded-ds-full h-ico-md w-ico-md flex items-center justify-center text-surface-fg-muted hover:text-surface-fg hover:bg-surface-raised transition-colors ease-productive-standard",
           "aria-label": "Clear search",
           initial: { opacity: 0, scale: 0.8 },
           animate: { opacity: 1, scale: 1 },

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

@@ -86,7 +86,7 @@ declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControl
  * const [view, setView] = useState<'list' | 'grid'>('list')
  * const [focused, setFocused] = useState<string | null>(null)
  *
- * <div role="tablist" className="inline-flex rounded-full border border-surface-border-strong bg-surface-2">
+ * <div role="tablist" className="inline-flex rounded-full border border-surface-border-strong bg-surface-raised">
  *   <SegmentedControlItem
  *     size="md" variant="tonal" text="List"
  *     isSelected={view === 'list'} isFocused={focused === 'list'}

package/dist/ui/segmented-control.js

@@ -6,19 +6,19 @@ import { cn as w } from "./lib/utils.js";
 import { springs as L } from "./lib/motion.js";
 import { L as T, m as C, A } from "../_chunks/framer.js";
 function j(u = 600) {
-  const [b, l] = k([]), s = I(/* @__PURE__ */ new Set());
+  const [v, l] = k([]), s = I(/* @__PURE__ */ new Set());
   S(() => () => {
     s.current.forEach(clearTimeout);
   }, []);
   const m = R((n) => {
-    const a = n.currentTarget.getBoundingClientRect(), t = Math.max(a.width, a.height) * 2, v = n.clientX - a.left - t / 2, o = n.clientY - a.top - t / 2, x = Date.now();
-    l((i) => [...i, { id: x, x: v, y: o, size: t }]);
+    const a = n.currentTarget.getBoundingClientRect(), t = Math.max(a.width, a.height) * 2, b = n.clientX - a.left - t / 2, o = n.clientY - a.top - t / 2, x = Date.now();
+    l((i) => [...i, { id: x, x: b, y: o, size: t }]);
     const g = setTimeout(() => {
       l((i) => i.filter((f) => f.id !== x)), s.current.delete(g);
     }, u);
     s.current.add(g);
   }, [u]);
-  return { ripples: b, createRipple: m };
+  return { ripples: v, createRipple: m };
 }
 const B = H(
   [
@@ -26,7 +26,7 @@ const B = H(
     "transition-[color,background-color,border-color,box-shadow] duration-moderate-02 ease-productive-standard",
     "relative overflow-hidden",
     "font-accent font-semibold leading-none text-center",
-    "bg-surface-1",
+    "bg-surface-overlay",
     "first:rounded-tr-none first:rounded-br-none",
     "last:rounded-tl-none last:rounded-bl-none"
   ],
@@ -73,7 +73,7 @@ const B = H(
         variant: "filled",
         className: [
           "bg-accent-9",
-          "shadow-[0px_4px_8px_0px_var(--color-accent-10),0px_1px_3px_0.05px_var(--color-surface-2),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]"
+          "shadow-[0px_4px_8px_0px_var(--color-accent-10),0px_1px_3px_0.05px_var(--color-surface-raised),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]"
         ].join(" ")
       },
       // Hover + tonal
@@ -132,16 +132,16 @@ function K(u) {
 }
 const U = D.forwardRef(
   function({
-    size: b,
+    size: v,
     variant: l,
     options: s,
     selectedId: m,
     onSelect: n,
     disabled: a = !1,
     className: t = "",
-    ...v
+    ...b
   }, o) {
-    const x = K(b), g = E(), [i, f] = k(null), h = I(null), y = D.useCallback((e) => {
+    const x = K(v), g = E(), [i, f] = k(null), h = I(null), y = D.useCallback((e) => {
       h.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
     }, [o]), N = (e) => {
       if (a) return;
@@ -172,7 +172,7 @@ const U = D.forwardRef(
         ref: y,
         className: w(
           "inline-flex gap-0 p-0 rounded-ds-full",
-          "bg-surface-2",
+          "bg-surface-raised",
           "border border-solid border-surface-border-strong",
           t
         ),
@@ -180,7 +180,7 @@ const U = D.forwardRef(
         onKeyDown: N,
         tabIndex: -1,
         "aria-label": "Segmented control options",
-        ...v,
+        ...b,
         children: /* @__PURE__ */ d(T, { children: s.map((e) => /* @__PURE__ */ d(
           M,
           {
@@ -205,20 +205,20 @@ const U = D.forwardRef(
 U.displayName = "SegmentedControl";
 const M = D.forwardRef(
   function({
-    size: b,
+    size: v,
     variant: l,
     text: s,
     icon: m,
     isSelected: n,
     onClick: a,
     disabled: t = !1,
-    isFocused: v,
+    isFocused: b,
     onFocus: o,
     onBlur: x,
     layoutId: g = "segment-indicator"
   }, i) {
     const [f, h] = k("default"), { ripples: y, createRipple: N } = j(), e = () => {
-      !t && !v && h("hover");
+      !t && !b && h("hover");
     }, p = () => {
       t || h("default");
     }, c = () => {
@@ -232,7 +232,7 @@ const M = D.forwardRef(
         ref: i,
         className: w(
           B({
-            size: b,
+            size: v,
             variant: l,
             selected: n,
             isHovered: f === "hover",
@@ -262,7 +262,7 @@ const M = D.forwardRef(
               layoutId: g,
               className: w(
                 "absolute inset-0 rounded-ds-full pointer-events-none",
-                l === "filled" ? "bg-accent-9 shadow-[0px_1px_3px_0.05px_var(--color-accent-10),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]" : "bg-surface-3"
+                l === "filled" ? "bg-accent-9 shadow-[0px_1px_3px_0.05px_var(--color-accent-10),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]" : "bg-surface-raised-hover"
               ),
               transition: L.smooth
             }

package/dist/ui/select.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as o from "react";
-import { ao as l, ap as w, aq as n, ar as m, as as x, at as p, au as N, av as f, aw as u, ax as v, ay as S, az as h, aA as I, aB as R, aC as C } from "../_chunks/primitives.js";
-import { IconChevronDown as b, IconChevronUp as j, IconCheck as B } from "@tabler/icons-react";
+import { ao as c, ap as w, aq as n, ar as m, as as x, at as p, au as N, av as f, aw as u, ax as v, ay as S, az as h, aA as I, aB as R, aC as C } from "../_chunks/primitives.js";
+import { IconChevronDown as y, IconChevronUp as j, IconCheck as B } from "@tabler/icons-react";
 import { ag as V } from "../_chunks/vendor-utils.js";
 import { cn as r } from "./lib/utils.js";
 import { tweens as z, springs as T } from "./lib/motion.js";
 import { m as D } from "../_chunks/framer.js";
 const O = I, Q = C, W = R, U = V(
-  "flex w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-3 placeholder:text-surface-fg-subtle 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 [&>span]:line-clamp-1",
+  "flex w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-raised-hover placeholder:text-surface-fg-subtle 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 [&>span]:line-clamp-1",
   {
     variants: {
       size: {
@@ -19,20 +19,20 @@ const O = I, Q = C, W = R, U = V(
     },
     defaultVariants: { size: "md" }
   }
-), G = o.forwardRef(({ className: s, children: t, size: a, ...d }, i) => /* @__PURE__ */ c(
-  l,
+), G = o.forwardRef(({ className: s, children: t, size: a, ...d }, i) => /* @__PURE__ */ l(
+  c,
   {
     ref: i,
     className: r(U({ size: a }), s),
     ...d,
     children: [
       t,
-      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(b, { className: "h-ico-sm w-ico-sm opacity-50" }) })
+      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(y, { className: "h-ico-sm w-ico-sm opacity-50" }) })
     ]
   }
 ));
-G.displayName = l.displayName;
-const y = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
+G.displayName = c.displayName;
+const b = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
   n,
   {
     ref: a,
@@ -44,7 +44,7 @@ const y = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
     children: /* @__PURE__ */ e(j, { className: "h-ico-sm w-ico-sm" })
   }
 ));
-y.displayName = n.displayName;
+b.displayName = n.displayName;
 const g = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
   m,
   {
@@ -54,7 +54,7 @@ const g = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
       s
     ),
     ...t,
-    children: /* @__PURE__ */ e(b, { className: "h-ico-sm w-ico-sm" })
+    children: /* @__PURE__ */ e(y, { className: "h-ico-sm w-ico-sm" })
   }
 ));
 g.displayName = m.displayName;
@@ -65,19 +65,19 @@ const L = o.forwardRef(({ className: s, children: t, position: a = "popper", ...
     position: a,
     asChild: !0,
     ...d,
-    children: /* @__PURE__ */ c(
+    children: /* @__PURE__ */ l(
       D.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         transition: { ...T.snappy, opacity: z.fade },
         className: r(
-          "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-1 text-surface-fg shadow-03",
+          "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating",
           a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           s
         ),
         children: [
-          /* @__PURE__ */ e(y, {}),
+          /* @__PURE__ */ e(b, {}),
           /* @__PURE__ */ e(
             N,
             {
@@ -104,12 +104,12 @@ const k = o.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ e(
   }
 ));
 k.displayName = f.displayName;
-const q = o.forwardRef(({ className: s, children: t, ...a }, d) => /* @__PURE__ */ c(
+const q = o.forwardRef(({ className: s, children: t, ...a }, d) => /* @__PURE__ */ l(
   u,
   {
     ref: d,
     className: r(
-      "relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-none transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-2 focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-none transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       s
     ),
     ...a,
@@ -136,7 +136,7 @@ export {
   q as SelectItem,
   k as SelectLabel,
   g as SelectScrollDownButton,
-  y as SelectScrollUpButton,
+  b as SelectScrollUpButton,
   A as SelectSeparator,
   G as SelectTrigger,
   W as SelectValue,

package/dist/ui/sheet.js

@@ -1,29 +1,29 @@
 "use client";
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import * as r from "react";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as o from "react";
 import { aa as h, ab as R, ac as u, ad as x, ae as b, af as y, ag as P, ah as j } from "../_chunks/primitives.js";
 import { ag as T } from "../_chunks/vendor-utils.js";
 import { IconX as A } from "@tabler/icons-react";
 import { cn as a } from "./lib/utils.js";
 import { tweens as M, motionProps as g, springs as z } from "./lib/motion.js";
 import { m as v, A as D } from "../_chunks/framer.js";
-const N = r.createContext(!1), F = ({
+const N = o.createContext(!1), F = ({
   open: e,
   defaultOpen: s = !1,
   onOpenChange: t,
   children: i,
   ...n
 }) => {
-  const [l, S] = r.useState(s), d = e !== void 0, m = d ? e : l, C = r.useCallback(
+  const [l, S] = o.useState(s), d = e !== void 0, m = d ? e : l, C = o.useCallback(
     (f) => {
       d || S(f), t == null || t(f);
     },
     [d, t]
   );
-  return /* @__PURE__ */ o(N.Provider, { value: m, children: /* @__PURE__ */ o(P, { open: m, onOpenChange: C, ...n, children: i }) });
+  return /* @__PURE__ */ r(N.Provider, { value: m, children: /* @__PURE__ */ r(P, { open: m, onOpenChange: C, ...n, children: i }) });
 };
 F.displayName = "Sheet";
-const W = j, Y = x, H = R, w = r.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ o(h, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ o(
+const W = j, Y = x, H = R, w = o.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ r(h, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ r(
   v.div,
   {
     ref: t,
@@ -47,7 +47,7 @@ const p = {
   left: { x: 0 },
   right: { x: 0 }
 }, V = T(
-  "fixed z-modal gap-ds-05 bg-surface-1 p-ds-06 shadow-05",
+  "fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay",
   {
     variants: {
       side: {
@@ -61,11 +61,11 @@ const p = {
       side: "right"
     }
   }
-), k = r.forwardRef(({ side: e = "right", className: s, children: t, ...i }, n) => {
-  const l = r.useContext(N);
-  return /* @__PURE__ */ o(D, { children: l && /* @__PURE__ */ c(H, { forceMount: !0, children: [
-    /* @__PURE__ */ o(w, {}),
-    /* @__PURE__ */ o(u, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ c(
+), k = o.forwardRef(({ side: e = "right", className: s, children: t, ...i }, n) => {
+  const l = o.useContext(N);
+  return /* @__PURE__ */ r(D, { children: l && /* @__PURE__ */ c(H, { forceMount: !0, children: [
+    /* @__PURE__ */ r(w, {}),
+    /* @__PURE__ */ r(u, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ c(
       v.div,
       {
         ref: n,
@@ -76,9 +76,9 @@ const p = {
         transition: z.smooth,
         ...g(i),
         children: [
-          /* @__PURE__ */ c(x, { 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-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-3 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none", children: [
-            /* @__PURE__ */ o(A, { className: "h-ico-sm w-ico-sm" }),
-            /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ c(x, { 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-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none", children: [
+            /* @__PURE__ */ r(A, { className: "h-ico-sm w-ico-sm" }),
+            /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
           ] }),
           t
         ]
@@ -87,8 +87,8 @@ const p = {
   ] }) });
 });
 k.displayName = u.displayName;
-const O = r.forwardRef(
-  ({ className: e, ...s }, t) => /* @__PURE__ */ o(
+const O = o.forwardRef(
+  ({ className: e, ...s }, t) => /* @__PURE__ */ r(
     "div",
     {
       ref: t,
@@ -101,8 +101,8 @@ const O = r.forwardRef(
   )
 );
 O.displayName = "SheetHeader";
-const U = r.forwardRef(
-  ({ className: e, ...s }, t) => /* @__PURE__ */ o(
+const U = o.forwardRef(
+  ({ className: e, ...s }, t) => /* @__PURE__ */ r(
     "div",
     {
       ref: t,
@@ -115,7 +115,7 @@ const U = r.forwardRef(
   )
 );
 U.displayName = "SheetFooter";
-const X = r.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ o(
+const X = o.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ r(
   b,
   {
     ref: t,
@@ -124,7 +124,7 @@ const X = r.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ o(
   }
 ));
 X.displayName = b.displayName;
-const q = r.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ o(
+const q = o.forwardRef(({ className: e, ...s }, t) => /* @__PURE__ */ r(
   y,
   {
     ref: t,

package/dist/ui/sidebar.js

@@ -73,7 +73,7 @@ const ae = i(
           ...o
         },
         className: r(
-          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-1",
+          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken",
           d
         ),
         ref: f,
@@ -98,7 +98,7 @@ const te = i(
       "div",
       {
         className: r(
-          "flex h-full w-[--sidebar-width] flex-col bg-surface-2 text-surface-fg",
+          "flex h-full w-[--sidebar-width] flex-col bg-surface-raised text-surface-fg",
           d
         ),
         ref: u,
@@ -110,7 +110,7 @@ const te = i(
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-surface-2 p-0 text-surface-fg [&>button]:hidden",
+        className: "w-[--sidebar-width] bg-surface-raised p-0 text-surface-fg [&>button]:hidden",
         style: {
           "--sidebar-width": Q
         },
@@ -152,7 +152,7 @@ const te = i(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-surface-2 group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
+                  className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
                   children: o
                 }
               )
@@ -202,7 +202,7 @@ const re = i(
           "hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
           "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
           "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-3",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover",
           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
           "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
           a
@@ -219,7 +219,7 @@ const ie = i(
     {
       ref: t,
       className: r(
-        "relative flex min-h-svh flex-1 flex-col bg-surface-1",
+        "relative flex min-h-svh flex-1 flex-col bg-surface-base",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow",
         a
       ),
@@ -234,7 +234,7 @@ const de = i(({ className: a, ...e }, t) => /* @__PURE__ */ s(
     ref: t,
     "data-sidebar": "input",
     className: r(
-      "h-ds-sm w-full bg-surface-2 shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
+      "h-ds-sm w-full bg-surface-raised shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
       a
     ),
     ...e
@@ -325,7 +325,7 @@ const me = i(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ s(
     ref: d,
     "data-sidebar": "group-action",
     className: r(
-      "hover:bg-surface-3 absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      "hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       "after:absolute after:-inset-2 after:md:hidden",
       "group-data-[collapsible=icon]:hidden",
       a
@@ -371,12 +371,12 @@ const ge = i(
 );
 ge.displayName = "SidebarMenuItem";
 const he = T(
-  "peer/menu-button hover:bg-surface-3 active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-3 flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-none ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+  "peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-none ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-surface-3 hover:text-surface-fg",
-        outline: "hover:bg-surface-3 bg-surface-2 shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
+        default: "hover:bg-surface-raised-hover hover:text-surface-fg",
+        outline: "hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]"
       },
       size: {
         md: "h-ds-sm text-ds-md",
@@ -445,7 +445,7 @@ const xe = i(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, o) =
     ref: o,
     "data-sidebar": "menu-action",
     className: r(
-      "hover:bg-surface-3 absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      "hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-none ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       "after:absolute after:-inset-2 after:md:hidden",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=md]/menu-button:top-ds-02b",
@@ -538,7 +538,7 @@ const Me = i(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...o
     "data-size": e,
     "data-active": t,
     className: r(
-      "hover:bg-surface-3 active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-none ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg",
+      "hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-none ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg",
       "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg",
       e === "sm" && "text-ds-sm",
       e === "md" && "text-ds-md",

package/dist/ui/slider.js

@@ -17,12 +17,12 @@ const v = f.forwardRef(({ className: i, "aria-label": l, value: a, defaultValue:
       ),
       ...n,
       children: [
-        /* @__PURE__ */ e(m, { className: "relative h-ds-02b w-full grow overflow-hidden rounded-ds-full bg-surface-3", children: /* @__PURE__ */ e(b, { className: "absolute h-full bg-accent-9" }) }),
+        /* @__PURE__ */ e(m, { className: "relative h-ds-02b w-full grow overflow-hidden rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(b, { className: "absolute h-full bg-accent-9" }) }),
         Array.from({ length: s }, (g, c) => /* @__PURE__ */ e(
           u,
           {
             "aria-label": s === 1 ? l : void 0,
-            className: "block h-ico-sm w-ico-sm rounded-ds-full border-2 border-accent-7 bg-surface-1 shadow-01 transition-[color,transform] duration-fast-02 ease-productive-standard hover:scale-110 hover:shadow-02 active:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled"
+            className: "block h-ico-sm w-ico-sm rounded-ds-full border-2 border-accent-7 bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:scale-110 hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled"
           },
           c
         ))