@devalok/shilp-sutra 0.9.2 → 0.11.0

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

@@ -4,6 +4,11 @@
 > Built on the same primitives as shadcn/ui but with key API differences.
 > Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
 
+## BREAKING CHANGES (v0.11.0 — dark mode)
+- Dark mode interactive colors shifted: --color-interactive pink-400→pink-500, --color-interactive-hover pink-300→pink-600, --color-interactive-active pink-200→pink-700, --color-interactive-subtle pink-950→pink-1000
+- Dark mode text status colors shifted: --color-text-error red-200→red-300, --color-text-success green-200→green-300, --color-text-warning yellow-200→yellow-300, --color-text-link blue-200→blue-300, --color-text-brand pink-300→pink-400
+- New primitive token: --pink-1000 (#150208) near-black
+
 ## BREAKING CHANGES (v0.8.0)
 - Combobox: Now uses discriminated union. Single: `multiple?: false, value: string, onValueChange: (v: string) => void`. Multiple: `multiple: true, value: string[], onValueChange: (v: string[]) => void`. No more `v as string[]` casts.
 - StatusBadge: Pass either `status` OR `color`, not both (discriminated union).
@@ -160,6 +165,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