@devalok/shilp-sutra 0.12.0 → 0.13.0

package/dist/_chunks/button.js

@@ -5,7 +5,7 @@ import { S as R, a as E } from "./primitives.js";
 import * as G from "react";
 import { u as M, S as q } from "./spinner.js";
 import { c as s } from "./utils.js";
-const p = V("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent transition-[color,background-color,border-color,box-shadow] duration-fast-01 ease-productive-standard 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]", {
+const p = V("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent transition-[color,background-color,border-color,box-shadow,transform] duration-fast-01 ease-productive-standard active:translate-y-px 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]", {
   variants: {
     variant: {
       solid: "",
@@ -73,8 +73,8 @@ const p = V("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, F = G.forwardRef(({ className: c, variant: w, color: N, size: y, asChild: S = !1, startIcon: d, endIcon: l, loading: e = !1, loadingPosition: t = "start", fullWidth: m = !1, disabled: v, children: i, ...u }, h) => {
-  const a = M(), b = w ?? a.variant, f = N ?? a.color, o = y ?? a.size ?? "md", g = A[o], z = D[o], n = e ? r(q, { size: z }) : null;
+}, F = G.forwardRef(({ className: c, variant: w, color: N, size: y, asChild: S = !1, startIcon: d, endIcon: l, loading: e = !1, loadingPosition: t = "start", fullWidth: m = !1, disabled: v, children: a, ...u }, h) => {
+  const i = M(), b = w ?? i.variant, f = N ?? i.color, o = y ?? i.size ?? "md", g = A[o], z = D[o], n = e ? r(q, { size: z }) : null;
   if (S) {
     const C = {
       className: s(p({ variant: b, color: f, size: o }), m && "w-full", c),
@@ -83,9 +83,9 @@ const p = V("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap
       "aria-busy": e || void 0,
       ...u
     };
-    return r(R, { ...C, children: r(E, { children: i }) });
+    return r(R, { ...C, children: r(E, { children: a }) });
   }
-  const j = () => e && t === "start" ? n : d ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? n : l ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, B = () => e && t === "center" ? x("span", { className: "relative inline-flex items-center justify-center", children: [r("span", { className: "invisible", children: i }), r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })] }) : i;
+  const j = () => e && t === "start" ? n : d ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? n : l ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, B = () => e && t === "center" ? x("span", { className: "relative inline-flex items-center justify-center", children: [r("span", { className: "invisible", children: a }), r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })] }) : a;
   return x("button", { className: s(p({ variant: b, color: f, size: o }), m && "w-full", c), ref: h, disabled: v || e, "aria-busy": e || void 0, ...u, children: [j(), B(), k()] });
 });
 F.displayName = "Button";

package/dist/_chunks/card.js

@@ -4,7 +4,7 @@ import * as o from "react";
 import { bj as n, bk as c } from "./primitives.js";
 import { c as s } from "./utils.js";
 import { e as l } from "./vendor-utils.js";
-const f = o.forwardRef(({ className: e, error: r, ...a }, d) => t(n, { className: s("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong", r && "border-border-error data-[state=checked]:bg-error", e), ...a, ref: d, children: t(c, { className: s("pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-fast-01 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) }));
+const f = o.forwardRef(({ className: e, error: r, ...a }, d) => t(n, { className: s("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong", r && "border-border-error data-[state=checked]:bg-error", e), ...a, ref: d, children: t(c, { className: s("pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-moderate-01 ease-bounce data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) }));
 f.displayName = n.displayName;
 const b = l("rounded-ds-lg text-text-primary", {
   variants: {
@@ -16,7 +16,7 @@ const b = l("rounded-ds-lg text-text-primary", {
     }
   },
   defaultVariants: { variant: "default" }
-}), m = o.forwardRef(({ className: e, variant: r, interactive: a, ...d }, i) => t("div", { ref: i, className: s(b({ variant: r }), a && "hover:shadow-02 hover:border-border-strong cursor-pointer transition-shadow duration-fast-01", e), ...d }));
+}), m = o.forwardRef(({ className: e, variant: r, interactive: a, ...d }, i) => t("div", { ref: i, className: s(b({ variant: r }), a && "hover:shadow-02 hover:border-border-strong hover:-translate-y-px active:scale-[0.98] cursor-pointer transition-all duration-fast-02 ease-productive-standard", e), ...d }));
 m.displayName = "Card";
 const p = o.forwardRef(({ className: e, ...r }, a) => t("div", { ref: a, className: s("flex flex-col space-y-ds-02b p-ds-06", e), ...r }));
 p.displayName = "CardHeader";
@@ -26,8 +26,8 @@ const h = o.forwardRef(({ className: e, ...r }, a) => t("div", { ref: a, classNa
 h.displayName = "CardDescription";
 const v = o.forwardRef(({ className: e, ...r }, a) => t("div", { ref: a, className: s("p-ds-06 pt-0", e), ...r }));
 v.displayName = "CardContent";
-const w = o.forwardRef(({ className: e, ...r }, a) => t("div", { ref: a, className: s("flex items-center p-ds-06 pt-0", e), ...r }));
-w.displayName = "CardFooter";
+const g = o.forwardRef(({ className: e, ...r }, a) => t("div", { ref: a, className: s("flex items-center p-ds-06 pt-0", e), ...r }));
+g.displayName = "CardFooter";
 export {
   m as C,
   f as S,
@@ -35,6 +35,6 @@ export {
   u as b,
   v as c,
   h as d,
-  w as e,
+  g as e,
   b as f
 };

package/dist/_chunks/checkbox.js

@@ -4,9 +4,9 @@ import { C as r, b as d } from "./primitives.js";
 import { IconMinus as m, IconCheck as l } from "@tabler/icons-react";
 import * as f from "react";
 import { c as b } from "./utils.js";
-const h = f.forwardRef(({ className: i, error: o, indeterminate: a, checked: s, ...c }, n) => {
-  const t = a ? "indeterminate" : s;
-  return e(r, { ref: n, checked: t, className: b("peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-border-strong", "bg-field", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color", "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color", o && "border-border-error", i), ...c, children: e(d, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? e(m, { className: "h-ico-sm w-ico-sm" }) : e(l, { className: "h-3 w-3" }) }) });
+const h = f.forwardRef(({ className: i, error: o, indeterminate: a, checked: c, ...s }, n) => {
+  const t = a ? "indeterminate" : c;
+  return e(r, { ref: n, checked: t, className: b("peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-border-strong", "bg-field", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color", "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color", o && "border-border-error", i), ...s, children: e(d, { className: "flex items-center justify-center text-current animate-check-pop", children: t === "indeterminate" ? e(m, { className: "h-ico-sm w-ico-sm" }) : e(l, { className: "h-3 w-3" }) }) });
 });
 h.displayName = r.displayName;
 export {

package/dist/composed/empty-state.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | React.ComponentType<{
+        className?: string;
+    }>;
     title: string;
     description?: string;
     action?: React.ReactNode;

package/dist/composed/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/composed/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAcD,QAAA,MAAM,UAAU,wFAkEf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/composed/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAcD,QAAA,MAAM,UAAU,wFAwEf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/composed/empty-state.js

@@ -1,85 +1,84 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import * as n from "react";
-import { c } from "../_chunks/utils.js";
-const h = ({ className: t }) => /* @__PURE__ */ e(
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as c from "react";
+import { c as s } from "../_chunks/utils.js";
+const h = ({ className: e }) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
     fill: "currentColor",
-    className: t,
+    className: e,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ e("path", { d: "M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z" })
+    children: /* @__PURE__ */ t("path", { d: "M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z" })
   }
-), f = n.forwardRef(
+), y = c.forwardRef(
   ({
-    icon: t,
-    title: a,
+    icon: e,
+    title: o,
     description: d,
-    action: l,
-    compact: s = !1,
+    action: a,
+    compact: l = !1,
     className: i,
-    ...m
-  }, o) => {
-    const x = t ?? /* @__PURE__ */ e(
+    ...n
+  }, x) => {
+    const r = l ? "h-ico-md w-ico-md" : "h-ico-lg w-ico-lg", f = e != null && !c.isValidElement(e) && (typeof e == "function" || typeof e == "object" && "$$typeof" in e), p = e ? f ? c.createElement(e, {
+      className: s("text-text-placeholder", r)
+    }) : e : /* @__PURE__ */ t(
       h,
       {
-        className: c(
-          "text-text-placeholder",
-          s ? "h-ico-md w-ico-md" : "h-ico-lg w-ico-lg"
-        )
+        className: s("text-text-placeholder", r)
       }
     );
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: o,
-        className: c(
+        ref: x,
+        className: s(
           "flex flex-col items-center justify-center text-center",
-          s ? "gap-ds-04 py-ds-07" : "gap-ds-05 py-ds-10",
+          l ? "gap-ds-04 py-ds-07" : "gap-ds-05 py-ds-10",
           i
         ),
-        ...m,
+        ...n,
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "div",
             {
-              className: c(
-                "flex items-center justify-center rounded-ds-xl bg-layer-02",
-                s ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg"
+              className: s(
+                "flex items-center justify-center rounded-ds-xl bg-layer-02 animate-float",
+                l ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg"
               ),
-              children: x
+              children: p
             }
           ),
-          /* @__PURE__ */ r("div", { className: "flex max-w-[280px] flex-col gap-ds-02", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ m("div", { className: "flex max-w-[280px] flex-col gap-ds-02", children: [
+            /* @__PURE__ */ t(
               "h3",
               {
-                className: c(
+                className: s(
                   "text-text-primary",
-                  s ? "text-ds-md font-semibold" : "text-ds-base font-semibold"
+                  l ? "text-ds-md font-semibold" : "text-ds-base font-semibold"
                 ),
-                children: a
+                children: o
               }
             ),
-            d && /* @__PURE__ */ e(
+            d && /* @__PURE__ */ t(
               "p",
               {
-                className: c(
+                className: s(
                   "text-text-placeholder",
-                  s ? "text-ds-sm" : "text-ds-md"
+                  l ? "text-ds-sm" : "text-ds-md"
                 ),
                 children: d
               }
             )
           ] }),
-          l && /* @__PURE__ */ e("div", { className: "mt-ds-02", children: l })
+          a && /* @__PURE__ */ t("div", { className: "mt-ds-02", children: a })
         ]
       }
     );
   }
 );
-f.displayName = "EmptyState";
+y.displayName = "EmptyState";
 export {
-  f as EmptyState
+  y as EmptyState
 };

package/dist/shell/bottom-navbar.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as s, Fragment as v, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, Fragment as v, jsx as t } from "react/jsx-runtime";
 import * as g from "react";
 import { useState as N } from "react";
 import { useLink as p } from "./link-context.js";
 import { IconX as y, IconDots as w } from "@tabler/icons-react";
 import { c as r } from "../_chunks/utils.js";
 function k({
-  item: a,
+  item: s,
   isActive: n,
   onClick: d
 }) {
@@ -14,45 +14,45 @@ function k({
   return /* @__PURE__ */ t(
     i,
     {
-      href: a.href,
+      href: s.href,
       onClick: d,
-      "aria-label": a.title,
+      "aria-label": s.title,
       "aria-current": n ? "page" : void 0,
       className: r(
-        "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm",
+        "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm active:animate-subtle-bounce",
         n ? "font-semibold text-interactive" : "text-text-helper"
       ),
-      children: /* @__PURE__ */ s("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
+      children: /* @__PURE__ */ a("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
         /* @__PURE__ */ t(
           "div",
           {
             className: r(
-              "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-opacity duration-slow-01",
-              n ? "opacity-100" : "opacity-0"
+              "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-[opacity,transform] duration-moderate-01",
+              n ? "opacity-100 animate-tab-indicator" : "opacity-0 scale-x-0"
             ),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ t("div", { className: "p-ds-03", children: /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", "aria-hidden": "true", children: a.icon }) }),
-        /* @__PURE__ */ t("span", { className: "text-center", children: a.title })
+        /* @__PURE__ */ t("div", { className: "p-ds-03", children: /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", "aria-hidden": "true", children: s.icon }) }),
+        /* @__PURE__ */ t("span", { className: "text-center", children: s.title })
       ] })
     }
   );
 }
 const M = g.forwardRef(
   ({
-    currentPath: a = "/",
+    currentPath: s = "/",
     user: n,
     primaryItems: d = [],
     moreItems: i = [],
     className: f,
     ...x
   }, h) => {
-    const b = p(), [o, l] = N(!1), c = (e, u = !1) => u || e === "/" ? a === e : a.startsWith(e), m = i.some(
+    const b = p(), [o, l] = N(!1), c = (e, u = !1) => u || e === "/" ? s === e : s.startsWith(e), m = i.some(
       (e) => c(e.href, e.exact)
     );
-    return /* @__PURE__ */ s(v, { children: [
-      o && /* @__PURE__ */ s(
+    return /* @__PURE__ */ a(v, { children: [
+      o && /* @__PURE__ */ a(
         "div",
         {
           role: "button",
@@ -64,14 +64,14 @@ const M = g.forwardRef(
           },
           children: [
             /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-overlay" }),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ a(
               "div",
               {
                 className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-border bg-layer-01 p-ds-05 pb-ds-03",
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ s("div", { className: "mb-ds-04 flex items-center justify-between", children: [
+                  /* @__PURE__ */ a("div", { className: "mb-ds-04 flex items-center justify-between", children: [
                     /* @__PURE__ */ t("span", { className: "text-ds-md font-semibold text-text-primary", children: "More" }),
                     /* @__PURE__ */ t(
                       "button",
@@ -83,7 +83,7 @@ const M = g.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-ds-03", children: i.map((e) => /* @__PURE__ */ s(
+                  /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-ds-03", children: i.map((e) => /* @__PURE__ */ a(
                     b,
                     {
                       href: e.href,
@@ -105,7 +105,7 @@ const M = g.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         "nav",
         {
           ...x,
@@ -132,16 +132,16 @@ const M = g.forwardRef(
                 "aria-label": "More navigation options",
                 "aria-expanded": o,
                 className: r(
-                  "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm",
+                  "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm active:animate-subtle-bounce",
                   o || m ? "font-semibold text-interactive" : "text-text-helper"
                 ),
-                children: /* @__PURE__ */ s("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
+                children: /* @__PURE__ */ a("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
                   /* @__PURE__ */ t(
                     "div",
                     {
                       className: r(
-                        "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-opacity duration-slow-01",
-                        o || m ? "opacity-100" : "opacity-0"
+                        "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-[opacity,transform] duration-moderate-01",
+                        o || m ? "opacity-100 animate-tab-indicator" : "opacity-0 scale-x-0"
                       ),
                       "aria-hidden": "true"
                     }

package/dist/shell/notification-center.d.ts

@@ -6,6 +6,14 @@
  * reading from Zustand stores or using Remix useNavigate.
  */
 import * as React from 'react';
+export interface NotificationAction {
+    /** Button label */
+    label: string;
+    /** Visual style — 'primary' is filled, 'default' is ghost, 'danger' is red ghost */
+    variant?: 'primary' | 'default' | 'danger';
+    /** Called when the action button is clicked. Receives the notification id. */
+    onClick: (id: string) => void;
+}
 export interface Notification {
     id: string;
     title: string;
@@ -19,6 +27,8 @@ export interface Notification {
     project?: {
         title: string;
     } | null;
+    /** Inline action buttons (e.g. Approve / Deny). Max 2–3 recommended. */
+    actions?: NotificationAction[];
 }
 export interface NotificationCenterProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** List of notifications to display */

package/dist/shell/notification-center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-center.d.ts","sourceRoot":"","sources":["../../src/shell/notification-center.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,uCAAuC;IACvC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,MAAM,GAAG,IAAI,CAAA;IACpE,wEAAwE;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,oEAAoE;IACpE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,gGAAgG;IAChG,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA0KD,QAAA,MAAM,kBAAkB,mGA+LvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"notification-center.d.ts","sourceRoot":"","sources":["../../src/shell/notification-center.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,kBAAkB;IACjC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1C,8EAA8E;IAC9E,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAClC,wEAAwE;IACxE,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,uCAAuC;IACvC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,MAAM,GAAG,IAAI,CAAA;IACpE,wEAAwE;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,oEAAoE;IACpE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,+DAA+D;IAC/D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,gGAAgG;IAChG,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8LD,QAAA,MAAM,kBAAkB,mGA+LvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}