@devalok/shilp-sutra 0.9.2 → 0.10.0

package/dist/_chunks/primitives.js

@@ -6820,29 +6820,29 @@ function kt(e) {
 var iC = Tl, cC = Nl, lC = Ol, uC = kl, dC = $l, fC = Ll, pC = Fl, vC = Kl;
 export {
   Gg as $,
-  Zg as A,
-  Xg as B,
+  Jg as A,
+  og as B,
   Ad as C,
-  jg as D,
-  Jg as E,
+  rg as D,
+  ig as E,
   fg as F,
   Rg as G,
   Zm as H,
   dg as I,
-  og as J,
-  rg as K,
+  cg as J,
+  ag as K,
   Eg as L,
-  ig as M,
-  cg as N,
+  sg as M,
+  eg as N,
   ng as O,
   gg as P,
-  ag as Q,
+  tg as Q,
   ug as R,
   Ym as S,
   Jm as T,
-  sg as U,
-  eg as V,
-  tg as W,
+  Eu as U,
+  yu as V,
+  Ru as W,
   zg as X,
   Yg as Y,
   kg as Z,
@@ -6942,24 +6942,24 @@ export {
   Qm as d,
   jm as e,
   lg as f,
-  Eu as g,
-  yu as h,
-  Ru as i,
-  pg as j,
-  mg as k,
-  hg as l,
-  Ng as m,
-  Ag as n,
-  bg as o,
-  yg as p,
-  Pg as q,
-  xg as r,
-  Tg as s,
-  _g as t,
-  Mg as u,
-  Cg as v,
-  Sg as w,
-  Ig as x,
-  wg as y,
-  qg as z
+  pg as g,
+  mg as h,
+  hg as i,
+  Ng as j,
+  Ag as k,
+  bg as l,
+  yg as m,
+  Pg as n,
+  xg as o,
+  Tg as p,
+  _g as q,
+  Mg as r,
+  Cg as s,
+  Sg as t,
+  Ig as u,
+  wg as v,
+  qg as w,
+  Zg as x,
+  Xg as y,
+  jg as z
 };

package/dist/_chunks/sidebar.js

@@ -569,22 +569,22 @@ export {
   ue as c,
   pe as d,
   be as e,
-  fe as f,
-  ge as g,
-  le as h,
-  he as i,
-  ve as j,
-  se as k,
-  R as l,
-  me as m,
-  oe as n,
-  de as o,
-  ye as p,
-  we as q,
-  Se as r,
-  Ne as s,
-  _e as t,
-  Me as u,
+  me as f,
+  fe as g,
+  ge as h,
+  le as i,
+  he as j,
+  ve as k,
+  we as l,
+  Ne as m,
+  Me as n,
+  _e as o,
+  se as p,
+  R as q,
+  oe as r,
+  de as s,
+  ye as t,
+  Se as u,
   te as v,
   ie as w,
   X as x,

package/dist/shell/sidebar.d.ts

@@ -10,16 +10,30 @@
  * reading from Remix hooks or Zustand stores.
  */
 import * as React from 'react';
+export interface NavSubItem {
+    title: string;
+    href: string;
+    icon?: React.ReactNode;
+    exact?: boolean;
+}
 export interface NavItem {
     title: string;
     href: string;
     icon: React.ReactNode;
     /** When true, the route matches only when the path is exactly equal */
     exact?: boolean;
+    /** Badge rendered on the right side of the nav item */
+    badge?: string | number;
+    /** Optional child items — renders as collapsible sub-list with chevron */
+    children?: NavSubItem[];
+    /** Whether the collapsible is open by default. Auto-opens when a child is active. */
+    defaultOpen?: boolean;
 }
 export interface NavGroup {
     label: string;
     items: NavItem[];
+    /** Action rendered next to the group label (e.g., a "+" button) */
+    action?: React.ReactNode;
 }
 export interface SidebarUser {
     name: string;
@@ -28,6 +42,17 @@ export interface SidebarUser {
     designation?: string;
     role?: string;
 }
+export interface SidebarFooterConfig {
+    /** Legal/utility links rendered as a row separated by dividers */
+    links?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** Version or build info text rendered below links */
+    version?: string;
+    /** Custom content rendered above the links row */
+    slot?: React.ReactNode;
+}
 export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Currently active pathname -- used to highlight the active nav item */
     currentPath?: string;
@@ -42,6 +67,14 @@ export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
         label: string;
         href: string;
     }>;
+    /** Structured footer config (takes precedence over footerLinks) */
+    footer?: SidebarFooterConfig;
+    /** Content rendered between user header and navigation */
+    headerSlot?: React.ReactNode;
+    /** Content rendered between navigation and footer */
+    preFooterSlot?: React.ReactNode;
+    /** Override rendering for specific nav items. Return null to use default rendering. */
+    renderItem?: (item: NavItem, defaultRender: () => React.ReactNode) => React.ReactNode | null;
     /** Additional className for the root sidebar element */
     className?: string;
 }

package/dist/shell/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,EAAE,CAAA;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,kEAAkE;IAClE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpD,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAsCD,QAAA,MAAM,UAAU,wFAgHf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgC9B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAA;IACvB,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC9C,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,kEAAkE;IAClE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpD,mEAAmE;IACnE,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,qDAAqD;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,uFAAuF;IACvF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAC5F,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4JD,QAAA,MAAM,UAAU,wFA8Kf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/shell/sidebar.js

@@ -1,103 +1,226 @@
 "use client";
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as N from "react";
-import { useLink as m } from "./link-context.js";
-import { S as u, a as S, b as o, c as y, d as A, e as w, f as L, g as j, h as C, i as M, j as k } from "../_chunks/sidebar.js";
-import { A as G, a as F, b as I } from "../_chunks/avatar.js";
-import { c as p } from "../_chunks/utils.js";
-function R({ item: t, isActive: a }) {
-  const i = m();
-  return /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
-    k,
+import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
+import * as x from "react";
+import { useLink as I } from "./link-context.js";
+import { S as R, a as O, b, c as T, d as W, e as z, f as H, g as U, h as $, i as w, j as C, k, l as A, m as q, n as D, o as E } from "../_chunks/sidebar.js";
+import { Collapsible as J, CollapsibleTrigger as K, CollapsibleContent as Q } from "../ui/collapsible.js";
+import { A as V, a as X, b as Y } from "../_chunks/avatar.js";
+import { c as u } from "../_chunks/utils.js";
+function Z({ className: a }) {
+  return /* @__PURE__ */ e(
+    "svg",
     {
-      asChild: !0,
-      isActive: a,
-      tooltip: t.title,
-      className: p(
-        "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors",
-        a ? "bg-interactive-subtle text-interactive after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-interactive after:content-['']" : "text-text-helper hover:bg-layer-02 hover:text-text-primary"
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: a,
+      children: /* @__PURE__ */ e("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+const M = "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors", j = "bg-interactive-subtle text-interactive after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-interactive after:content-['']", L = "text-text-helper hover:bg-layer-02 hover:text-text-primary";
+function _({
+  item: a,
+  isActive: s,
+  isPathActive: p
+}) {
+  const o = I(), n = a.badge != null ? typeof a.badge == "number" && a.badge > 99 ? "99+" : String(a.badge) : null;
+  if (a.children && a.children.length > 0) {
+    const d = a.children.some(
+      (r) => p(r.href, r.exact)
+    ), m = d || s || (a.defaultOpen ?? !1);
+    return /* @__PURE__ */ e(J, { defaultOpen: m, className: "group/collapsible", children: /* @__PURE__ */ l(C, { children: [
+      /* @__PURE__ */ e(
+        k,
+        {
+          asChild: !0,
+          isActive: s || d,
+          tooltip: a.title,
+          className: u(
+            M,
+            s || d ? j : L
+          ),
+          children: /* @__PURE__ */ l(
+            o,
+            {
+              href: a.href,
+              "aria-label": a.title,
+              "aria-current": s ? "page" : void 0,
+              children: [
+                /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0", "aria-hidden": "true", children: a.icon }),
+                /* @__PURE__ */ e("span", { className: "text-ds-base", children: a.title })
+              ]
+            }
+          )
+        }
       ),
-      children: /* @__PURE__ */ s(
-        i,
+      n && /* @__PURE__ */ e(A, { children: n }),
+      /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ e(
+        "button",
         {
-          href: t.href,
-          "aria-label": t.title,
-          "aria-current": a ? "page" : void 0,
-          children: [
-            /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0", "aria-hidden": "true", children: t.icon }),
-            /* @__PURE__ */ e("span", { className: "text-ds-base", children: t.title })
-          ]
+          className: "absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-ds-md text-text-helper transition-transform hover:bg-layer-02 hover:text-text-primary group-data-[collapsible=icon]:hidden",
+          "aria-label": `Toggle ${a.title}`,
+          children: /* @__PURE__ */ e(Z, { className: "h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
         }
-      )
-    }
-  ) });
+      ) }),
+      /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(q, { children: a.children.map((r) => {
+        const h = p(r.href, r.exact);
+        return /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
+          E,
+          {
+            asChild: !0,
+            isActive: h,
+            children: /* @__PURE__ */ l(
+              o,
+              {
+                href: r.href,
+                "aria-current": h ? "page" : void 0,
+                children: [
+                  r.icon && /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0", "aria-hidden": "true", children: r.icon }),
+                  /* @__PURE__ */ e("span", { children: r.title })
+                ]
+              }
+            )
+          }
+        ) }, r.href);
+      }) }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ l(C, { children: [
+    /* @__PURE__ */ e(
+      k,
+      {
+        asChild: !0,
+        isActive: s,
+        tooltip: a.title,
+        className: u(
+          M,
+          s ? j : L
+        ),
+        children: /* @__PURE__ */ l(
+          o,
+          {
+            href: a.href,
+            "aria-label": a.title,
+            "aria-current": s ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0", "aria-hidden": "true", children: a.icon }),
+              /* @__PURE__ */ e("span", { className: "text-ds-base", children: a.title })
+            ]
+          }
+        )
+      }
+    ),
+    n && /* @__PURE__ */ e(A, { children: n })
+  ] });
 }
-const z = N.forwardRef(
+const P = x.forwardRef(
   ({
-    currentPath: t = "/",
-    user: a,
-    navGroups: i = [],
-    logo: h,
-    footerLinks: n = [],
-    className: x,
-    ...b
-  }, f) => {
-    var c;
-    const g = m(), v = (r, l = !1) => l || r === "/" ? t === r : t.startsWith(r);
-    return /* @__PURE__ */ s(
-      u,
+    currentPath: a = "/",
+    user: s,
+    navGroups: p = [],
+    logo: o,
+    headerSlot: n,
+    preFooterSlot: d,
+    footerLinks: m = [],
+    footer: r,
+    renderItem: h,
+    className: B,
+    ...F
+  }, G) => {
+    var v;
+    const f = I(), g = (t, i = !1) => i || t === "/" ? a === t : a.startsWith(t);
+    return /* @__PURE__ */ l(
+      R,
       {
-        ...b,
-        ref: f,
+        ...F,
+        ref: G,
         "aria-label": "Main navigation",
-        className: p(
+        className: u(
           "z-raised hidden h-full flex-col border-r border-border bg-layer-01 md:flex",
-          x
+          B
         ),
         children: [
-          /* @__PURE__ */ e(S, { className: "px-ds-06 py-ds-06", children: h ?? /* @__PURE__ */ e("span", { className: "text-ds-lg font-semibold text-text-primary", children: "Logo" }) }),
-          a && /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05", children: [
-            /* @__PURE__ */ s(G, { className: "h-ds-sm-plus w-ds-sm-plus", children: [
-              a.image ? /* @__PURE__ */ e(F, { src: a.image, alt: a.name }) : null,
-              /* @__PURE__ */ e(I, { className: "bg-layer-03 text-text-primary", children: (c = a.name) == null ? void 0 : c.charAt(0).toUpperCase() })
+          /* @__PURE__ */ e(O, { className: "px-ds-06 py-ds-06", children: o ?? /* @__PURE__ */ e("span", { className: "text-ds-lg font-semibold text-text-primary", children: "Logo" }) }),
+          s && /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05", children: [
+            /* @__PURE__ */ l(V, { className: "h-ds-sm-plus w-ds-sm-plus", children: [
+              s.image ? /* @__PURE__ */ e(X, { src: s.image, alt: s.name }) : null,
+              /* @__PURE__ */ e(Y, { className: "bg-layer-03 text-text-primary", children: (v = s.name) == null ? void 0 : v.charAt(0).toUpperCase() })
             ] }),
-            /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-col", children: [
-              /* @__PURE__ */ e("span", { className: "truncate text-ds-md text-text-primary", children: a.name }),
-              /* @__PURE__ */ e("span", { className: "truncate text-ds-sm text-text-placeholder", children: a.designation || a.role })
+            /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ e("span", { className: "truncate text-ds-md text-text-primary", children: s.name }),
+              /* @__PURE__ */ e("span", { className: "truncate text-ds-sm text-text-placeholder", children: s.designation || s.role })
             ] })
           ] }),
-          /* @__PURE__ */ e(o, {}),
-          /* @__PURE__ */ e(y, { className: "no-scrollbar px-ds-04", children: i.map((r, l) => /* @__PURE__ */ s("div", { children: [
-            l > 0 && /* @__PURE__ */ e(o, {}),
-            /* @__PURE__ */ s(A, { children: [
-              /* @__PURE__ */ e(w, { className: "px-ds-04 text-ds-sm text-text-placeholder", children: r.label }),
-              /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(j, { children: r.items.map((d) => /* @__PURE__ */ e(
-                R,
-                {
-                  item: d,
-                  isActive: v(d.href, d.exact)
-                },
-                d.href
-              )) }) })
+          /* @__PURE__ */ e(b, {}),
+          n && /* @__PURE__ */ l(y, { children: [
+            n,
+            /* @__PURE__ */ e(b, {})
+          ] }),
+          /* @__PURE__ */ e(T, { className: "no-scrollbar px-ds-04", children: p.map((t, i) => /* @__PURE__ */ l("div", { children: [
+            i > 0 && /* @__PURE__ */ e(b, {}),
+            /* @__PURE__ */ l(W, { children: [
+              /* @__PURE__ */ e(z, { className: "px-ds-04 text-ds-sm text-text-placeholder", children: t.label }),
+              t.action && /* @__PURE__ */ e(H, { asChild: !0, children: t.action }),
+              /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e($, { children: t.items.map((c) => {
+                const N = () => /* @__PURE__ */ e(
+                  _,
+                  {
+                    item: c,
+                    isActive: g(c.href, c.exact),
+                    isPathActive: g
+                  }
+                );
+                if (h) {
+                  const S = h(c, N);
+                  if (S !== null)
+                    return /* @__PURE__ */ e(x.Fragment, { children: S }, c.href);
+                }
+                return /* @__PURE__ */ e(x.Fragment, { children: N() }, c.href);
+              }) }) })
             ] })
-          ] }, r.label)) }),
-          n.length > 0 && /* @__PURE__ */ e(C, { className: "px-ds-06 py-ds-05", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: n.map((r, l) => /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
-            l > 0 && /* @__PURE__ */ e("div", { className: "h-[16px] w-px bg-border" }),
+          ] }, t.label)) }),
+          d && /* @__PURE__ */ l(y, { children: [
+            /* @__PURE__ */ e(b, {}),
+            d
+          ] }),
+          r ? /* @__PURE__ */ l(w, { className: "px-ds-06 py-ds-05", children: [
+            r.slot && /* @__PURE__ */ e("div", { className: "pb-ds-04", children: r.slot }),
+            r.links && r.links.length > 0 && /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: r.links.map((t, i) => /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03", children: [
+              i > 0 && /* @__PURE__ */ e("span", { className: "text-text-placeholder", children: "·" }),
+              /* @__PURE__ */ e(
+                f,
+                {
+                  className: "text-ds-sm text-text-placeholder transition-colors hover:text-interactive",
+                  href: t.href,
+                  children: t.label
+                }
+              )
+            ] }, t.href)) }),
+            r.version && /* @__PURE__ */ e("p", { className: "text-center text-ds-sm text-text-placeholder", children: r.version })
+          ] }) : m.length > 0 ? /* @__PURE__ */ e(w, { className: "px-ds-06 py-ds-05", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: m.map((t, i) => /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03", children: [
+            i > 0 && /* @__PURE__ */ e("div", { className: "h-[16px] w-px bg-border" }),
             /* @__PURE__ */ e(
-              g,
+              f,
               {
                 className: "text-ds-md text-text-placeholder transition-colors hover:text-interactive",
-                href: r.href,
-                children: r.label
+                href: t.href,
+                children: t.label
               }
             )
-          ] }, r.href)) }) })
+          ] }, t.href)) }) }) : null
         ]
       }
     );
   }
 );
-z.displayName = "AppSidebar";
+P.displayName = "AppSidebar";
 export {
-  z as AppSidebar
+  P as AppSidebar
 };

package/dist/shell/top-bar.js

@@ -5,7 +5,7 @@ import { useColorMode as I } from "../hooks/use-color-mode.js";
 import { A as j, a as K, b as F } from "../_chunks/avatar.js";
 import { DropdownMenu as U, DropdownMenuTrigger as B, DropdownMenuContent as E, DropdownMenuItem as a, DropdownMenuSeparator as w } from "../ui/dropdown-menu.js";
 import { a as c, b as n, c as i } from "../_chunks/tooltip.js";
-import { k as R } from "../_chunks/sidebar.js";
+import { p as R } from "../_chunks/sidebar.js";
 import { IconSearch as z, IconSparkles as L, IconUser as O, IconSun as P, IconMoon as q, IconLogout as G } from "@tabler/icons-react";
 import { c as d } from "../_chunks/utils.js";
 const H = g.forwardRef(

package/dist/ui/alert-dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as s, jsxs as p } from "react/jsx-runtime";
 import * as o from "react";
-import { O as l, J as g, K as d, M as r, N as n, Q as c, U as f, V as x, W as b } from "../_chunks/primitives.js";
+import { O as l, B as g, D as d, E as r, J as n, K as c, M as f, N as x, Q as b } from "../_chunks/primitives.js";
 import { c as i } from "../_chunks/utils.js";
 const C = x, T = b, y = g, m = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   l,
@@ -58,7 +58,7 @@ const N = o.forwardRef(
   )
 );
 N.displayName = "AlertDialogFooter";
-const A = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+const D = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   r,
   {
     ref: a,
@@ -69,8 +69,8 @@ const A = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-A.displayName = r.displayName;
-const D = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+D.displayName = r.displayName;
+const A = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   n,
   {
     ref: a,
@@ -78,7 +78,7 @@ const D = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-D.displayName = n.displayName;
+A.displayName = n.displayName;
 const w = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   c,
   {
@@ -108,11 +108,11 @@ export {
   w as AlertDialogAction,
   R as AlertDialogCancel,
   u as AlertDialogContent,
-  D as AlertDialogDescription,
+  A as AlertDialogDescription,
   N as AlertDialogFooter,
   v as AlertDialogHeader,
   m as AlertDialogOverlay,
   y as AlertDialogPortal,
-  A as AlertDialogTitle,
+  D as AlertDialogTitle,
   T as AlertDialogTrigger
 };

package/dist/ui/collapsible.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
 import * as i from "react";
-import { g as a, h as l, i as n } from "../_chunks/primitives.js";
+import { U as a, V as l, W as n } from "../_chunks/primitives.js";
 import { c as r } from "../_chunks/utils.js";
-const f = l, g = n, d = i.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ s(
+const f = l, C = n, d = i.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ s(
   a,
   {
     ref: e,
@@ -18,5 +18,5 @@ d.displayName = a.displayName;
 export {
   f as Collapsible,
   d as CollapsibleContent,
-  g as CollapsibleTrigger
+  C as CollapsibleTrigger
 };

package/dist/ui/combobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as r, jsxs as d, Fragment as B } from "react/jsx-runtime";
 import * as a from "react";
-import { j as G, k as U, P as q, l as J } from "../_chunks/primitives.js";
+import { g as G, h as U, P as q, i as J } from "../_chunks/primitives.js";
 import { IconChevronDown as Q, IconSearch as W, IconCheck as Y, IconX as Z } from "@tabler/icons-react";
 import { c as x } from "../_chunks/utils.js";
 const P = 2, V = 36, ee = a.forwardRef(
@@ -10,13 +10,13 @@ const P = 2, V = 36, ee = a.forwardRef(
     value: f,
     onValueChange: m,
     placeholder: S = "Select...",
-    searchPlaceholder: j = "Search...",
-    emptyMessage: A = "No results found",
+    searchPlaceholder: A = "Search...",
+    emptyMessage: L = "No results found",
     multiple: b = !1,
     disabled: p = !1,
-    className: L,
-    triggerClassName: T,
-    maxVisible: $ = 6,
+    className: T,
+    triggerClassName: $,
+    maxVisible: j = 6,
     renderOption: E,
     ...H
   }, M) => {
@@ -168,7 +168,7 @@ const P = 2, V = 36, ee = a.forwardRef(
       }
       return /* @__PURE__ */ r("span", { className: "flex-1 truncate text-left text-text-placeholder", children: S });
     };
-    return /* @__PURE__ */ r(G, { open: h, onOpenChange: z, children: /* @__PURE__ */ d("div", { className: x("relative", L), ...H, children: [
+    return /* @__PURE__ */ r(G, { open: h, onOpenChange: z, children: /* @__PURE__ */ d("div", { className: x("relative", T), ...H, children: [
       /* @__PURE__ */ r(U, { asChild: !0, disabled: p, children: /* @__PURE__ */ d(
         "button",
         {
@@ -185,7 +185,7 @@ const P = 2, V = 36, ee = a.forwardRef(
             "transition-colors duration-fast-01",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:border-border-interactive",
             "disabled:cursor-not-allowed disabled:opacity-[0.38]",
-            T
+            $
           ),
           children: [
             F(),
@@ -215,7 +215,7 @@ const P = 2, V = 36, ee = a.forwardRef(
                   ref: k,
                   type: "text",
                   className: "flex-1 bg-transparent py-ds-03 text-ds-md outline-none placeholder:text-text-placeholder",
-                  placeholder: j,
+                  placeholder: A,
                   value: v,
                   onChange: (e) => {
                     y(e.target.value), c(-1);
@@ -228,7 +228,7 @@ const P = 2, V = 36, ee = a.forwardRef(
                 }
               )
             ] }),
-            o.length === 0 ? /* @__PURE__ */ r("div", { className: "px-ds-04 py-ds-05 text-center text-ds-md text-text-tertiary", children: A }) : /* @__PURE__ */ r(
+            o.length === 0 ? /* @__PURE__ */ r("div", { className: "px-ds-04 py-ds-05 text-center text-ds-md text-text-tertiary", children: L }) : /* @__PURE__ */ r(
               "ul",
               {
                 ref: N,
@@ -236,7 +236,7 @@ const P = 2, V = 36, ee = a.forwardRef(
                 role: "listbox",
                 "aria-multiselectable": b || void 0,
                 className: "overflow-auto p-ds-02",
-                style: { maxHeight: `${$ * V}px` },
+                style: { maxHeight: `${j * V}px` },
                 children: o.map((e, t) => {
                   const s = O(e.value);
                   return /* @__PURE__ */ d(

package/dist/ui/context-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as i, jsx as s } from "react/jsx-runtime";
 import * as n from "react";
-import { m as l, n as m, o as c, p, q as u, r as f, s as x, t as b, L as y, u as N, v as h, G as C, w as g, x as w, y as M } from "../_chunks/primitives.js";
+import { j as l, k as m, l as c, m as p, n as u, o as f, p as x, q as b, L as y, r as N, s as h, G as C, t as g, u as w, v as M } from "../_chunks/primitives.js";
 import { IconChevronRight as R, IconCheck as I, IconCircle as v } from "@tabler/icons-react";
 import { c as d } from "../_chunks/utils.js";
 const F = h, H = M, J = C, K = c, O = w, Q = g, S = n.forwardRef(({ className: e, inset: t, children: a, ...o }, r) => /* @__PURE__ */ i(
@@ -33,7 +33,7 @@ const z = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
   }
 ));
 z.displayName = m.displayName;
-const G = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(c, { children: /* @__PURE__ */ s(
+const j = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(c, { children: /* @__PURE__ */ s(
   p,
   {
     ref: a,
@@ -44,8 +44,8 @@ const G = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(c, { chi
     ...t
   }
 ) }));
-G.displayName = p.displayName;
-const j = n.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */ s(
+j.displayName = p.displayName;
+const G = n.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */ s(
   u,
   {
     ref: o,
@@ -57,8 +57,8 @@ const j = n.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */
     ...a
   }
 ));
-j.displayName = u.displayName;
-const T = n.forwardRef(({ className: e, children: t, checked: a, ...o }, r) => /* @__PURE__ */ i(
+G.displayName = u.displayName;
+const k = n.forwardRef(({ className: e, children: t, checked: a, ...o }, r) => /* @__PURE__ */ i(
   f,
   {
     ref: r,
@@ -74,8 +74,8 @@ const T = n.forwardRef(({ className: e, children: t, checked: a, ...o }, r) => /
     ]
   }
 ));
-T.displayName = f.displayName;
-const k = n.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__ */ i(
+k.displayName = f.displayName;
+const T = n.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__ */ i(
   b,
   {
     ref: o,
@@ -90,7 +90,7 @@ const k = n.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__
     ]
   }
 ));
-k.displayName = b.displayName;
+T.displayName = b.displayName;
 const L = n.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */ s(
   y,
   {
@@ -129,14 +129,14 @@ const q = ({
 q.displayName = "ContextMenuShortcut";
 export {
   F as ContextMenu,
-  T as ContextMenuCheckboxItem,
-  G as ContextMenuContent,
+  k as ContextMenuCheckboxItem,
+  j as ContextMenuContent,
   J as ContextMenuGroup,
-  j as ContextMenuItem,
+  G as ContextMenuItem,
   L as ContextMenuLabel,
   K as ContextMenuPortal,
   Q as ContextMenuRadioGroup,
-  k as ContextMenuRadioItem,
+  T as ContextMenuRadioItem,
   P as ContextMenuSeparator,
   q as ContextMenuShortcut,
   O as ContextMenuSub,

package/dist/ui/hover-card.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
 import * as i from "react";
-import { z as n, A as o, B as m, D as l } from "../_chunks/primitives.js";
+import { w as n, x as o, y as m, z as l } from "../_chunks/primitives.js";
 import { c as f } from "../_chunks/utils.js";
-const u = m, C = l, p = i.forwardRef(({ className: a, align: e = "center", sideOffset: d = 4, ...r }, s) => /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+const u = m, w = l, p = i.forwardRef(({ className: a, align: e = "center", sideOffset: d = 4, ...r }, s) => /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
   o,
   {
     ref: s,
@@ -20,5 +20,5 @@ p.displayName = o.displayName;
 export {
   u as HoverCard,
   p as HoverCardContent,
-  C as HoverCardTrigger
+  w as HoverCardTrigger
 };

package/dist/ui/index.js

@@ -2,11 +2,11 @@
 import { B as K, b as Q } from "../_chunks/button.js";
 import { IconButton as Y } from "./icon-button.js";
 import { B as $, S as ee, u as re } from "../_chunks/spinner.js";
-import { I as ae, l as oe, S as ne, c as se, h as ie, d as le, m as ce, f as de, e as be, a as ue, n as ge, o as xe, g as me, p as pe, q as fe, j as ve, i as ye, r as Ne, s as Se, t as Ce, u as Te, v as we, w as Me, b as he, k as Ie, x as De, y as Ae } from "../_chunks/sidebar.js";
+import { I as ae, q as oe, S as ne, c as se, i as ie, d as le, f as ce, g as de, e as be, a as ue, r as ge, s as xe, h as me, t as pe, l as fe, k as ve, j as ye, u as Ne, m as Se, o as Ce, n as Te, v as we, w as Me, b as he, p as Ie, x as De, y as Ae } from "../_chunks/sidebar.js";
 import { ColorInput as Ve } from "./color-input.js";
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import * as s from "react";
-import { E as m, bo as S, bn as p, bl as f, bm as v } from "../_chunks/primitives.js";
+import { A as m, bo as S, bn as p, bl as f, bm as v } from "../_chunks/primitives.js";
 import { c as l } from "../_chunks/utils.js";
 import { VisuallyHidden as ke } from "./visually-hidden.js";
 import { Autocomplete as Ge } from "./autocomplete.js";

package/dist/ui/label.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import * as d from "react";
-import { E as e } from "../_chunks/primitives.js";
+import { A as e } from "../_chunks/primitives.js";
 import { c as n } from "../_chunks/utils.js";
 const p = d.forwardRef(({ className: a, required: t, children: r, ...s }, o) => /* @__PURE__ */ m(
   e,

package/dist/ui/popover.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
 import * as i from "react";
-import { P as n, l as t, j as m, k as p, aT as l } from "../_chunks/primitives.js";
+import { P as n, i as t, g as m, h as p, aT as l } from "../_chunks/primitives.js";
 import { c } from "../_chunks/utils.js";
 const P = m, u = p, v = l, f = i.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...s }, d) => /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(
   t,

package/dist/ui/sidebar.js

@@ -6,7 +6,7 @@ import "@tabler/icons-react";
 import "../hooks/use-mobile.js";
 import "../_chunks/utils.js";
 import "../_chunks/button.js";
-import { S as m, c as M, h as g, d as G, m as I, f as c, e as l, a as B, n as f, o as k, g as v, p as A, q as C, j as h, i as j, r as q, s as w, t as x, u as y, v as F, w as H, b as L, k as P, y as R } from "../_chunks/sidebar.js";
+import { S as m, c as M, i as g, d as l, f as G, g as I, e as c, a as B, r as f, s as k, h as v, t as A, l as C, k as h, j, u as w, m as x, o as y, n as F, v as H, w as L, b as P, p as R, y as T } from "../_chunks/sidebar.js";
 import "./sheet.js";
 import "./skeleton.js";
 import "../_chunks/tooltip.js";
@@ -15,10 +15,10 @@ export {
   m as Sidebar,
   M as SidebarContent,
   g as SidebarFooter,
-  G as SidebarGroup,
-  I as SidebarGroupAction,
-  c as SidebarGroupContent,
-  l as SidebarGroupLabel,
+  l as SidebarGroup,
+  G as SidebarGroupAction,
+  I as SidebarGroupContent,
+  c as SidebarGroupLabel,
   B as SidebarHeader,
   f as SidebarInput,
   k as SidebarInset,
@@ -27,13 +27,13 @@ export {
   C as SidebarMenuBadge,
   h as SidebarMenuButton,
   j as SidebarMenuItem,
-  q as SidebarMenuSkeleton,
-  w as SidebarMenuSub,
-  x as SidebarMenuSubButton,
-  y as SidebarMenuSubItem,
-  F as SidebarProvider,
-  H as SidebarRail,
-  L as SidebarSeparator,
-  P as SidebarTrigger,
-  R as useSidebar
+  w as SidebarMenuSkeleton,
+  x as SidebarMenuSub,
+  y as SidebarMenuSubButton,
+  F as SidebarMenuSubItem,
+  H as SidebarProvider,
+  L as SidebarRail,
+  P as SidebarSeparator,
+  R as SidebarTrigger,
+  T as useSidebar
 };

package/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.6.1
+> Version: 0.10.0
 
 ---
 
@@ -1677,6 +1677,96 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
   />
 - Gotchas: Must be wrapped in SidebarProvider (from ui/sidebar)
 
+### AppSidebar v0.10.0 additions
+
+New props on AppSidebarProps:
+    footer: SidebarFooterConfig — structured footer (takes precedence over footerLinks)
+    headerSlot: ReactNode — content between user info and navigation
+    preFooterSlot: ReactNode — content between navigation and footer
+    renderItem: (item: NavItem, defaultRender: () => ReactNode) => ReactNode | null — custom item rendering
+
+New fields on NavItem:
+    badge: string | number — badge rendered on the right side (numbers > 99 display as "99+")
+    children: NavSubItem[] — renders as collapsible sub-list with chevron toggle
+    defaultOpen: boolean — whether collapsible is open by default (auto-opens when a child is active)
+
+New type NavSubItem: { title: string, href: string, icon?: ReactNode, exact?: boolean }
+
+New fields on NavGroup:
+    action: ReactNode — action button rendered next to the group label
+
+New type SidebarFooterConfig:
+    links: Array<{ label: string, href: string }> — legal/utility links as a row
+    version: string — version or build info text
+    slot: ReactNode — custom content above the links row
+
+Deprecated props:
+    footerLinks — use footer.links instead (footerLinks still works for backwards compat)
+
+- S9: Collapsible nav items
+  ```tsx
+  // Collapsible nav items
+  {
+    title: "Projects",
+    href: "/projects",
+    icon: <IconLayoutKanban />,
+    children: [
+      { title: "Karm V2", href: "/projects/abc/board" },
+      { title: "Website Redesign", href: "/projects/def/board" },
+    ],
+  }
+  ```
+
+- S10: Nav item badge
+  ```tsx
+  { title: "My Tasks", href: "/my-tasks", icon: <IconChecklist />, badge: 5 }
+  { title: "Messages", href: "/messages", icon: <IconMessage />, badge: "New" }
+  // Numbers > 99 display as "99+"
+  ```
+
+- S11: Nav group action
+  ```tsx
+  {
+    label: "WORK",
+    items: [...],
+    action: <button onClick={...} aria-label="New project"><IconPlus size={14} /></button>,
+  }
+  ```
+
+- S12: Structured footer
+  ```tsx
+  <AppSidebar
+    footer={{
+      links: [{ label: "Terms", href: "/terms" }, { label: "Privacy", href: "/privacy" }],
+      version: "v2.4.1",
+      slot: <a href="/changelog">What's new?</a>,
+    }}
+  />
+  // footer takes precedence over footerLinks. footerLinks still works for backwards compat.
+  ```
+
+- S13: Header and pre-footer slots
+  ```tsx
+  <AppSidebar
+    headerSlot={<DharaWidget userId={user.id} />}
+    preFooterSlot={<UpgradeBanner />}
+    navGroups={navGroups}
+  />
+  // Slots auto-add SidebarSeparator. No extra DOM when not provided.
+  ```
+
+- S14: Custom item rendering
+  ```tsx
+  <AppSidebar
+    renderItem={(item, defaultRender) => {
+      if (item.href === "/my-tasks") {
+        return <CustomTasksItem item={item} />
+      }
+      return null // use default for all other items
+    }}
+  />
+  ```
+
 ## BottomNavbar
 - Import: @devalok/shilp-sutra/shell/bottom-navbar
 - Server-safe: No

package/llms.txt

@@ -160,6 +160,17 @@ NOTIFICATION SELECTION GUIDE:
 ### Shell Components (app-level layout)
 - TopBar: pageTitle, user, onNavigate, onLogout, notificationSlot, mobileLogo, userMenuItems?(UserMenuItem[] — custom items between Profile and theme toggle, supports icon, href, onClick, separator, badge, disabled, color)
 - AppSidebar: navigation tree with NavItem[], NavGroup[]
+
+### AppSidebar (v0.10.0 additions)
+- NavItem.children?: NavSubItem[] — collapsible sub-list with chevron toggle
+- NavItem.defaultOpen?: boolean — control initial collapsed state
+- NavItem.badge?: string | number — badge on nav item (99+ cap for numbers)
+- NavGroup.action?: ReactNode — action button next to group label
+- footer?: SidebarFooterConfig — structured footer with links, version, slot (replaces footerLinks)
+- headerSlot?: ReactNode — content between user info and navigation
+- preFooterSlot?: ReactNode — content between navigation and footer
+- renderItem?: (item, defaultRender) => ReactNode | null — custom item rendering
+
 - BottomNavbar: mobile navigation, user is optional (not required to render)
 - NotificationCenter: notifications[], onMarkRead, onMarkAllRead, onNavigate, getNotificationRoute?(returns string|null, fallback null), footerSlot?, emptyState?, headerActions?, popoverClassName?, onDismiss?(id)
 - AppCommandPalette: user, isAdmin, onNavigate, onSearch, searchResults, isSearching, onSearchResultSelect

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",