@devalok/shilp-sutra 0.18.2 → 0.19.1

package/dist/ui/alert-dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
 import * as o from "react";
 import { O as p, w as R, x as u, y as g, D as x, A as y, z as b, B as C, E as j } from "../_chunks/primitives.js";
 import { cn as i } from "./lib/utils.js";
@@ -7,20 +7,20 @@ import { tweens as f, springs as M } from "./lib/motion.js";
 import { A as T, m } from "../_chunks/framer.js";
 const v = o.createContext({ open: !1 }), z = () => o.useContext(v), P = ({
   open: t,
-  defaultOpen: a,
+  defaultOpen: s,
   onOpenChange: e,
   ...r
 }) => {
-  const [l, A] = o.useState(a ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
+  const [l, A] = o.useState(s ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
     (c) => {
       n || A(c), e == null || e(c);
     },
     [n, e]
   ), w = o.useMemo(() => ({ open: d }), [d]);
-  return /* @__PURE__ */ s(v.Provider, { value: w, children: /* @__PURE__ */ s(C, { open: d, onOpenChange: D, ...r }) });
+  return /* @__PURE__ */ a(v.Provider, { value: w, children: /* @__PURE__ */ a(C, { open: d, onOpenChange: D, ...r }) });
 };
 P.displayName = "AlertDialog";
-const L = j, F = R, N = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const L = j, F = R, N = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
   p,
   {
     ref: e,
@@ -29,14 +29,14 @@ const L = j, F = R, N = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__
       "fixed inset-0 z-modal bg-overlay",
       t
     ),
-    ...a
+    ...s
   }
 ));
 N.displayName = p.displayName;
-const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
+const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
   const { open: l } = z();
-  return /* @__PURE__ */ s(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
-    /* @__PURE__ */ s(N, { asChild: !0, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
+    /* @__PURE__ */ a(N, { asChild: !0, children: /* @__PURE__ */ a(
       m.div,
       {
         initial: { opacity: 0 },
@@ -45,25 +45,25 @@ const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
         transition: f.fade
       }
     ) }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ a(
       u,
       {
         ref: r,
         forceMount: !0,
         asChild: !0,
         ...e,
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ a(
           m.div,
           {
-            initial: { opacity: 0, scale: 0.95 },
-            animate: { opacity: 1, scale: 1 },
-            exit: { opacity: 0, scale: 0.95 },
+            initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
+            animate: { opacity: 1, scale: 1, x: "-50%", y: "-50%" },
+            exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
             transition: { ...M.smooth, opacity: f.fade },
             className: i(
-              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
+              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
               t
             ),
-            children: a
+            children: s
           }
         )
       }
@@ -72,7 +72,7 @@ const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
 });
 H.displayName = u.displayName;
 const O = o.forwardRef(
-  ({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  ({ className: t, ...s }, e) => /* @__PURE__ */ a(
     "div",
     {
       ref: e,
@@ -80,13 +80,13 @@ const O = o.forwardRef(
         "flex flex-col space-y-ds-02b text-center sm:text-left",
         t
       ),
-      ...a
+      ...s
     }
   )
 );
 O.displayName = "AlertDialogHeader";
 const k = o.forwardRef(
-  ({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  ({ className: t, ...s }, e) => /* @__PURE__ */ a(
     "div",
     {
       ref: e,
@@ -94,12 +94,12 @@ const k = o.forwardRef(
         "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
         t
       ),
-      ...a
+      ...s
     }
   )
 );
 k.displayName = "AlertDialogFooter";
-const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const B = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
   g,
   {
     ref: e,
@@ -107,20 +107,20 @@ const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
       "text-ds-lg font-semibold",
       t
     ),
-    ...a
+    ...s
   }
 ));
 B.displayName = g.displayName;
-const E = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const E = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
   x,
   {
     ref: e,
     className: i("text-ds-md text-surface-fg-muted", t),
-    ...a
+    ...s
   }
 ));
 E.displayName = x.displayName;
-const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const I = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
   y,
   {
     ref: e,
@@ -128,11 +128,11 @@ const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
       "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 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",
       t
     ),
-    ...a
+    ...s
   }
 ));
 I.displayName = y.displayName;
-const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const S = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
   b,
   {
     ref: e,
@@ -140,7 +140,7 @@ const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
       "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-2 hover:text-surface-fg 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",
       t
     ),
-    ...a
+    ...s
   }
 ));
 S.displayName = b.displayName;

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

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

package/dist/ui/chip.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import * as v from "react";
 import { IconX as N } from "@tabler/icons-react";
 import { ag as h } from "../_chunks/vendor-utils.js";
 import { springs as w, motionProps as C } from "./lib/motion.js";
 import { cn as k } from "./lib/utils.js";
 import { m as n } from "../_chunks/framer.js";
-import { A as $ } from "../_chunks/framer.js";
+import { A as X } from "../_chunks/framer.js";
 const j = h(
   "inline-flex items-center gap-ds-02 font-sans leading-ds-relaxed rounded-ds-full transition-colors duration-fast-01",
   {
@@ -69,8 +69,8 @@ const j = h(
     }
   }
 ), R = v.forwardRef(
-  ({ label: t, variant: i, size: l, color: g, icon: o, onClick: s, onDismiss: c, disabled: a, className: d, ...m }, b) => {
-    const e = !!s, u = e ? n.button : n.span, y = e && !a ? "cursor-pointer hover:bg-surface-4 active:scale-95" : "", x = a ? "opacity-action-disabled cursor-not-allowed" : "";
+  ({ label: t, variant: i, size: l, color: g, icon: o, onClick: s, onDismiss: c, disabled: e, className: d, ...m }, b) => {
+    const r = !!s, u = r ? n.button : n.span, y = r && !e ? "cursor-pointer hover:bg-surface-4" : "", x = e ? "opacity-action-disabled cursor-not-allowed" : "";
     return /* @__PURE__ */ f(
       u,
       {
@@ -78,16 +78,17 @@ const j = h(
         layout: !0,
         initial: { opacity: 1, scale: 1 },
         exit: { opacity: 0, scale: 0.8 },
+        whileTap: r && !e ? { scale: 0.95 } : void 0,
         transition: w.snappy,
         className: k(j({ variant: i, size: l, color: g }), y, x, d),
-        onClick: e ? s : void 0,
-        disabled: e ? a : void 0,
-        type: e ? "button" : void 0,
+        onClick: r ? s : void 0,
+        disabled: r ? e : void 0,
+        type: r ? "button" : void 0,
         ...C(m),
         children: [
-          o && /* @__PURE__ */ r("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
-          /* @__PURE__ */ r("span", { children: t }),
-          c && /* @__PURE__ */ r(
+          o && /* @__PURE__ */ a("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
+          /* @__PURE__ */ a("span", { children: t }),
+          c && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
@@ -96,7 +97,7 @@ const j = h(
               onClick: (p) => {
                 p.stopPropagation(), c();
               },
-              children: /* @__PURE__ */ r(N, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ a(N, { className: "h-ico-sm w-ico-sm" })
             }
           )
         ]
@@ -107,6 +108,6 @@ const j = h(
 R.displayName = "Chip";
 export {
   R as Chip,
-  $ as ChipGroup,
+  X as ChipGroup,
   j as chipVariants
 };

package/dist/ui/dialog.js

@@ -56,12 +56,12 @@ const H = t.forwardRef(({ className: a, children: s, ...e }, r) => {
         children: /* @__PURE__ */ d(
           g.div,
           {
-            initial: { opacity: 0, scale: 0.95 },
-            animate: { opacity: 1, scale: 1 },
-            exit: { opacity: 0, scale: 0.95 },
+            initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
+            animate: { opacity: 1, scale: 1, x: "-50%", y: "-50%" },
+            exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
             transition: { ...T.smooth, opacity: p.fade },
             className: i(
-              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
+              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
               a
             ),
             children: [

package/dist/ui/sidebar.js

@@ -98,7 +98,7 @@ const te = i(
       "div",
       {
         className: r(
-          "flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-surface-fg",
+          "flex h-full w-[--sidebar-width] flex-col bg-surface-2 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-1 p-0 text-surface-fg [&>button]:hidden",
+        className: "w-[--sidebar-width] bg-surface-2 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-1 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-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",
                   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-linear 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-2",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-3",
           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
           "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
           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-1 shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
+      "h-ds-sm w-full bg-surface-2 shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
       a
     ),
     ...e
@@ -325,7 +325,7 @@ const pe = i(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ s(
     ref: d,
     "data-sidebar": "group-action",
     className: r(
-      "hover:bg-surface-2 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-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",
       "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-2 active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-2 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-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",
   {
     variants: {
       variant: {
-        default: "hover:bg-surface-2 hover:text-surface-fg",
-        outline: "hover:bg-surface-2 bg-surface-1 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-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)]"
       },
       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-2 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-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",
       "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-2 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-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",
       "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg",
       e === "sm" && "text-ds-sm",
       e === "md" && "text-ds-md",

package/docs/components/_header.md

@@ -42,10 +42,10 @@ Color tokens use OKLCH (perceptually uniform) with 12 functional steps per palet
 | 2 | Subtle background | Sidebar, card alt |
 | 3 | Component bg | Input bg, badge bg |
 | 4 | Component bg hover | Button hover state |
-| 5 | Component bg active | Active/pressed state |
-| 6 | Border subtle | Dividers, soft borders |
-| 7 | Border default | Input borders, card borders |
-| 8 | Border strong | Focus rings, emphasis borders |
+| 5 | Border subtle | Semantic `surface-border` in light mode |
+| 6 | Border default | Semantic `surface-border-strong` in light mode |
+| 7 | Border strong | Focus rings, emphasis borders |
+| 8 | Border emphasis | High-contrast outlines |
 | 9 | Solid / accent | Button bg, primary CTA |
 | 10 | Solid hover | Button hover bg |
 | 11 | Low-contrast text | Secondary accent text |
@@ -54,7 +54,9 @@ Color tokens use OKLCH (perceptually uniform) with 12 functional steps per palet
 Semantic layer:
 - Accent (swappable): --color-accent-{1-12} + --color-accent-fg
 - Secondary: --color-secondary-{1-12} + --color-secondary-fg
-- Surface: --color-surface-{1-4} + --color-surface-fg / fg-muted / fg-subtle / border
+- Surface: --color-surface-{1-4} + --color-surface-fg / fg-muted / fg-subtle / border / border-strong
+  - Border mapping: light mode border=step5, border-strong=step6; dark mode border=step3, border-strong=step4
+  - Shell chrome (sidebar, topbar, bottom nav) uses surface-2 for elevation above surface-1 app background
 - Status: --color-{error,success,warning,info}-{3,7,9,11}
 - Category: --color-category-{teal,amber,slate,indigo,cyan,orange,emerald}
 

package/docs/components/composed/activity-feed.md

@@ -6,15 +6,15 @@
 
 ## Props
     items: ActivityItem[] (REQUIRED) — { id, actor?: { name, image? }, action: string|ReactNode, timestamp: Date|string, icon?, color?: 'default'|'success'|'warning'|'error'|'info', detail?: ReactNode }
-    onLoadMore: () => void — "Load more" button callback
+    onLoadMore?: () => void — "Load more" button callback
     loading: boolean — skeleton shimmer
-    hasMore: boolean — shows "Load more" button
-    emptyState: ReactNode — empty state content
+    hasMore?: boolean — shows "Load more" button
+    emptyState?: ReactNode — empty state content
     compact: boolean — tighter spacing, no avatars, smaller text
     maxInitialItems: number — truncate with "Show all (N)" toggle
 
 ## Defaults
-    loading=false, compact=false
+    loading=false, compact=false, hasMore=false
 
 ## Example
 ```jsx

package/docs/components/composed/command-palette.md

@@ -5,7 +5,7 @@
 - Category: composed
 
 ## Props
-    groups: CommandGroup[] — { label: string, items: CommandItem[] }
+    groups?: CommandGroup[] (default: []) — { label: string, items: CommandItem[] }
     placeholder: string (default: "Search or jump to...")
     onSearch: (query: string) => void
     emptyMessage: string (default: "No results found.")
@@ -13,7 +13,7 @@
 CommandItem shape: { id, label, description?, icon?, shortcut?, onSelect: () => void }
 
 ## Defaults
-    placeholder="Search or jump to...", emptyMessage="No results found."
+    placeholder="Search or jump to...", emptyMessage="No results found.", groups=[]
 
 ## Example
 ```jsx

package/docs/components/composed/confirm-dialog.md

@@ -12,7 +12,7 @@
     confirmText: string (default: "Confirm")
     cancelText: string (default: "Cancel")
     color: "default" | "error" (controls confirm button color)
-    loading: boolean (default: false, disables buttons and shows spinner)
+    loading: boolean (default: false, disables buttons and replaces confirm button text with 'Processing...')
     onConfirm: () => void | Promise<void> (REQUIRED)
 
 ## Defaults

package/docs/components/composed/date-picker.md

@@ -7,8 +7,8 @@
 ## Props
 
 ### DatePicker
-    value: Date | null
-    onChange: (date: Date | null) => void
+    value?: Date | null
+    onChange?: (date: Date | null) => void
     placeholder: string (default: "Pick a date")
     formatStr: string (default: "MMM d, yyyy")
     minDate: Date
@@ -17,9 +17,9 @@
     className: string
 
 ### DateRangePicker
-    startDate: Date | null
-    endDate: Date | null
-    onChange: (range: { start: Date | null, end: Date | null }) => void
+    startDate?: Date | null
+    endDate?: Date | null
+    onChange?: (range: { start: Date | null, end: Date | null }) => void
     placeholder: string (default: "Pick a date range")
     formatStr: string (default: "MMM d, yyyy")
     minDate: Date
@@ -40,8 +40,8 @@
     className: string
 
 ### TimePicker
-    value: Date | null (time stored as a Date object)
-    onChange: (date: Date) => void
+    value?: Date | null (time stored as a Date object)
+    onChange?: (date: Date) => void
     format: "12h" | "24h" (default: "12h")
     minuteStep: number (default: 1)
     secondStep: number (default: 1)
@@ -52,14 +52,14 @@
 
 ### CalendarGrid
     currentMonth: Date (REQUIRED)
-    selected: Date | null
-    rangeStart: Date | null
-    rangeEnd: Date | null
-    hoverDate: Date | null
+    selected?: Date | null
+    rangeStart?: Date | null
+    rangeEnd?: Date | null
+    hoverDate?: Date | null
     onSelect: (date: Date) => void (REQUIRED)
-    onHover: (date: Date | null) => void
+    onHover?: (date: Date | null) => void
     onMonthChange: (date: Date) => void (REQUIRED)
-    onHeaderClick: () => void
+    onHeaderClick?: () => void
     disabledDates: (date: Date) => boolean
     minDate: Date
     maxDate: Date

package/docs/components/composed/schedule-view.md

@@ -8,8 +8,8 @@
     view: "day" | "week" (REQUIRED)
     date: Date (REQUIRED — current day or any date in target week)
     events: ScheduleEvent[] (REQUIRED) — { id, title, start: Date, end: Date, color? }
-    onEventClick: (event: ScheduleEvent) => void
-    onSlotClick: (start: Date, end: Date) => void
+    onEventClick?: (event: ScheduleEvent) => void
+    onSlotClick?: (start: Date, end: Date) => void
     startHour: number (default: 8)
     endHour: number (default: 18, exclusive)
     slotDuration: number (minutes, default: 30)

package/docs/components/composed/status-badge.md

@@ -15,6 +15,7 @@ Note: StatusBadge was server-safe prior to v0.18.0 but is NO LONGER server-safe
 
 ## Defaults
     size="md", hideDot=false
+    When neither status nor color is passed, defaults to status='pending' styling
 
 ## Example
 ```jsx

package/docs/components/shell/bottom-navbar.md

@@ -35,6 +35,10 @@ BottomNavbarUser: { name: string, role?: string }
 - Requires LinkProvider for framework-specific link components (e.g., Next.js Link)
 
 ## Changes
+### v0.19.0
+- **Changed** Background elevated from `bg-surface-1` to `bg-surface-2` for visual hierarchy above app background
+- **Changed** "More" menu and interactive items bumped accordingly
+
 ### v0.18.0
 - **Fixed** Removed incorrect `role="button"` and `tabIndex` from overlay
 

package/docs/components/shell/notification-center.md

@@ -6,21 +6,21 @@
 
 ## Props
     notifications?: Notification[]
-    unreadCount: number (derived from notifications if not provided)
-    open: boolean (controlled mode)
-    onOpenChange: (open: boolean) => void
-    isLoading: boolean
-    hasMore: boolean
-    onFetchMore: () => void
-    onMarkRead: (id: string) => void
-    onMarkAllRead: () => void
-    onNavigate: (path: string) => void — called when a notification with a route is clicked
-    getNotificationRoute: (notification: Notification) => string | null — returns route for a notification; defaults to () => null
-    footerSlot: ReactNode — content rendered in a sticky footer below the scroll area
-    emptyState: ReactNode — replaces default empty state UI
-    headerActions: ReactNode — extra action buttons after "Mark all read"
-    popoverClassName: string — override default popover dimensions
-    onDismiss: (id: string) => void — when provided, each notification shows a dismiss button
+    unreadCount?: number (derived from notifications if not provided)
+    open?: boolean (controlled mode)
+    onOpenChange?: (open: boolean) => void
+    isLoading?: boolean
+    hasMore?: boolean
+    onFetchMore?: () => void
+    onMarkRead?: (id: string) => void
+    onMarkAllRead?: () => void
+    onNavigate?: (path: string) => void — called when a notification with a route is clicked
+    getNotificationRoute?: (notification: Notification) => string | null — returns route for a notification; defaults to () => null
+    footerSlot?: ReactNode — content rendered in a sticky footer below the scroll area
+    emptyState?: ReactNode — replaces default empty state UI
+    headerActions?: ReactNode — extra action buttons after "Mark all read"
+    popoverClassName?: string — override default popover dimensions
+    onDismiss?: (id: string) => void — when provided, each notification shows a dismiss button
 
 Notification: { id: string, title: string, body?: string | null, tier: 'INFO' | 'IMPORTANT' | 'CRITICAL', isRead: boolean, createdAt: string, entityType?: string | null, entityId?: string | null, projectId?: string | null, project?: { title: string } | null, actions?: NotificationAction[] }
 NotificationAction: { label: string, variant?: 'primary' | 'default' | 'danger', onClick: (id: string) => void }

package/docs/components/shell/sidebar.md

@@ -21,7 +21,7 @@ NavItem: { title: string, href: string, icon: ReactNode, exact?: boolean, badge?
 NavSubItem: { title: string, href: string, icon?: ReactNode, exact?: boolean }
 NavGroup: { label: string, items: NavItem[], action?: ReactNode }
 SidebarUser: { name: string, email?: string, image?: string | null, designation?: string, role?: string }
-SidebarFooterConfig: { links: Array<{ label: string, href: string }>, version: string | { label: string, href: string }, slot: ReactNode, promo: SidebarPromo }
+SidebarFooterConfig: { links?: Array<{ label: string, href: string }>, version?: string | { label: string, href: string }, slot?: ReactNode, promo?: SidebarPromo }
 SidebarPromo: { text: string, icon?: ReactNode, action?: { label: string, href?: string, onClick?: () => void }, onDismiss?: () => void }
 
 ## Defaults
@@ -57,6 +57,10 @@ SidebarPromo: { text: string, icon?: ReactNode, action?: { label: string, href?:
 - Badge numbers > 99 display as "99+"
 
 ## Changes
+### v0.19.0
+- **Changed** Background elevated from `bg-surface-1` to `bg-surface-2` for visual hierarchy above app background
+- **Changed** Interactive hover states bumped from `surface-2` to `surface-3`
+
 ### v0.18.0
 - **Fixed** `bg-interactive-subtle` changed to `bg-accent-2` (OKLCH migration)