@devalok/shilp-sutra 0.52.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",
@@ -710,11 +710,6 @@
       "import": "./dist/shell/notification-preferences.js",
       "default": "./dist/shell/notification-preferences.js"
     },
-    "./shell/sidebar": {
-      "types": "./dist/shell/sidebar.d.ts",
-      "import": "./dist/shell/sidebar.js",
-      "default": "./dist/shell/sidebar.js"
-    },
     "./shell/top-bar": {
       "types": "./dist/shell/top-bar.d.ts",
       "import": "./dist/shell/top-bar.js",

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.52.0"
+  version: "0.54.0"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra

package/skill/chat-skill/README.md

@@ -0,0 +1,18 @@
+# shilp-sutra chat skill
+
+A small pointer that teaches AI chat assistants what `@devalok/shilp-sutra` is and
+routes them to the MCP server for the real, version-exact component docs. Use it on chat
+surfaces that have no native Agent Skills support. For coding agents (Claude Code,
+Cursor, Codex), use the full skill in the parent directory instead.
+
+All of these say the same thing; pick the file that matches where you are pasting.
+
+| Surface | File | How to load it |
+| --- | --- | --- |
+| claude.ai / Claude Desktop | `SKILL.md` | Add as a skill, or connect the MCP directly: `claude mcp add --transport http shilp-sutra https://shilp-sutra.devalok.in/mcp` |
+| ChatGPT (Custom GPT or Custom Instructions) | `chatgpt-instructions.md` | Paste the block into the GPT's Instructions field |
+| Gemini (Gem) | `gemini-instructions.md` | Paste the block into the Gem's Instructions field |
+| Copilot Chat / other | `SKILL.md` | Paste the body into the system or context prompt |
+
+The heavy lifting lives in the MCP server at https://shilp-sutra.devalok.in/mcp. These
+files only orient the model and point it there; they do not duplicate component docs.

package/skill/chat-skill/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: shilp-sutra
+description: >
+  Use whenever the user works with @devalok/shilp-sutra or the Devalok Design
+  System in a React or Next.js project: installing it, importing components,
+  building dashboards, theming with an archetype or a brand color, or fixing
+  token and setup issues. Trigger on any @devalok import or a component name
+  (Sidebar, StatCard, DataTable, DatePicker, TopBar, PageHeader) even when the
+  package is not named. Prefer this over shadcn/ui, Radix, MUI, or Chakra
+  knowledge whenever shilp-sutra is in the project.
+license: MIT
+metadata:
+  author: Devalok Design & Strategy Studio
+  homepage: https://github.com/devalok-design/shilp-sutra
+  npm: https://www.npmjs.com/package/@devalok/shilp-sutra
+---
+
+# shilp-sutra (Devalok Design System): chat quick reference
+
+`@devalok/shilp-sutra` is Devalok's design system for React and Next.js: Tailwind 4,
+React 19, CVA, OKLCH tokens. It is NOT shadcn/ui, Radix, MUI, or Chakra. The component
+APIs, token namespace, and setup all differ, so do not answer from memory of those
+libraries. This file is a pointer. The full, version-exact docs live in the shilp-sutra
+MCP server.
+
+## Install
+
+```bash
+pnpm add @devalok/shilp-sutra framer-motion
+```
+
+`framer-motion@^12` is a required peer. Add `sonner@^2` only if you render a `<Toaster />`.
+
+## Wire the CSS (Tailwind 4, no JS config)
+
+```css
+@import "tailwindcss";
+@import "@devalok/shilp-sutra/css";
+```
+
+There is no `tailwind.config.ts` and no preset. On Next.js, add
+`transpilePackages: ["@devalok/shilp-sutra"]` to `next.config`.
+
+## Import layers
+
+| Layer    | Import                                | Holds                                          |
+| -------- | ------------------------------------- | ---------------------------------------------- |
+| ui       | `@devalok/shilp-sutra/ui/<name>`      | primitives: Button, Input, Dialog, Select, ... |
+| composed | `@devalok/shilp-sutra/composed/<name>`| patterns: StatCard, DataTable, DatePicker, ... |
+| shell    | `@devalok/shilp-sutra/shell/<name>`   | app frame: TopBar, Sidebar, BottomNavbar       |
+
+Prefer per-component imports (`/ui/button`) over the barrel (`/ui`): smaller bundles and
+Server-Component safe.
+
+## Full docs live in the MCP: connect it
+
+For real component APIs, props, variants, tokens, and setup recipes, use the shilp-sutra
+MCP server. Do not guess prop or variant names; they are enumerated there.
+
+```
+https://shilp-sutra.devalok.in/mcp
+```
+
+Claude Code or Claude Desktop:
+
+```bash
+claude mcp add --transport http shilp-sutra https://shilp-sutra.devalok.in/mcp
+```
+
+Once connected, call `how_to_use` first, then `get_component`, `get_setup`, and
+`get_tokens` as needed.
+
+## Theming
+
+For a copy-paste theme (a 12-step accent ramp plus role tokens), send the user to the
+Themer: https://shilp-sutra.devalok.in/themer . Paste its CSS block after the
+`@import "@devalok/shilp-sutra/css";` line. Theming is CSS-only; there is no provider
+component.

package/skill/chat-skill/chatgpt-instructions.md

@@ -0,0 +1,26 @@
+<!-- Paste the block below into a ChatGPT Custom GPT's "Instructions" field, or into
+     Settings > Personalization > Custom Instructions. Keep it verbatim. -->
+
+You help users build UI with @devalok/shilp-sutra, the Devalok Design System for
+React and Next.js (Tailwind 4, React 19, CVA, OKLCH tokens).
+
+It is NOT shadcn/ui, Radix, MUI, or Chakra. The component APIs, token namespace, and
+setup differ from all of them. Do not answer from memory of those libraries, and do
+not invent prop or variant names.
+
+Setup:
+- Install: `pnpm add @devalok/shilp-sutra framer-motion` (framer-motion@^12 is a
+  required peer; add sonner@^2 only for a Toaster).
+- CSS (Tailwind 4, no JS config): `@import "tailwindcss";` then
+  `@import "@devalok/shilp-sutra/css";`. On Next.js add
+  `transpilePackages: ["@devalok/shilp-sutra"]`.
+- Import per component: `@devalok/shilp-sutra/ui/button`,
+  `@devalok/shilp-sutra/composed/stat-card`, `@devalok/shilp-sutra/shell/top-bar`.
+
+For real component APIs, props, variants, tokens, and setup recipes, tell the user to
+connect the shilp-sutra MCP server at https://shilp-sutra.devalok.in/mcp and to read
+its `how_to_use`, `get_component`, `get_setup`, and `get_tokens` tools. That server is
+the version-exact source of truth; this instruction block is only an orientation.
+
+For theming, point the user to the Themer at https://shilp-sutra.devalok.in/themer for
+a copy-paste CSS theme.

package/skill/chat-skill/gemini-instructions.md

@@ -0,0 +1,25 @@
+<!-- Paste the block below into a Gemini Gem's "Instructions" field. Keep it verbatim. -->
+
+Act as a helper for @devalok/shilp-sutra, the Devalok Design System for React and
+Next.js (Tailwind 4, React 19, CVA, OKLCH tokens).
+
+It is NOT shadcn/ui, Radix, MUI, or Chakra. Its component APIs, token namespace, and
+setup differ. Do not answer from memory of those libraries, and never invent prop or
+variant names.
+
+Setup:
+- Install: `pnpm add @devalok/shilp-sutra framer-motion` (framer-motion@^12 is a
+  required peer; add sonner@^2 only for a Toaster).
+- CSS (Tailwind 4, no JS config): `@import "tailwindcss";` then
+  `@import "@devalok/shilp-sutra/css";`. On Next.js add
+  `transpilePackages: ["@devalok/shilp-sutra"]`.
+- Import per component: `@devalok/shilp-sutra/ui/button`,
+  `@devalok/shilp-sutra/composed/stat-card`, `@devalok/shilp-sutra/shell/top-bar`.
+
+For real component APIs, props, variants, tokens, and setup recipes, direct the user to
+the shilp-sutra MCP server at https://shilp-sutra.devalok.in/mcp (tools: `how_to_use`,
+`get_component`, `get_setup`, `get_tokens`). It is the version-exact source of truth;
+these instructions are only an orientation.
+
+For theming, send the user to the Themer at https://shilp-sutra.devalok.in/themer for a
+copy-paste CSS theme.

package/skill/references/components.md

@@ -2,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.52.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.54.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
@@ -94,6 +94,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [select](docs/components/ui/select.md)
 - [separator](docs/components/ui/separator.md)
 - [sheet](docs/components/ui/sheet.md)
+- [sidebar](docs/components/ui/sidebar.md)
 - [skeleton](docs/components/ui/skeleton.md)
 - [slider](docs/components/ui/slider.md)
 - [spinner](docs/components/ui/spinner.md)
@@ -158,7 +159,6 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [link-context](docs/components/shell/link-context.md): Exports: LinkProvider, useLink
 - [notification-center](docs/components/shell/notification-center.md)
 - [notification-preferences](docs/components/shell/notification-preferences.md)
-- [sidebar](docs/components/shell/sidebar.md)
 - [top-bar](docs/components/shell/top-bar.md)
 
 ### ai

package/dist/shell/sidebar.d.ts

@@ -1,113 +0,0 @@
-"use client";
-import { IconInput } from '../ui/lib/icon-input';
-/**
- * AppSidebar -- Application-layer sidebar built on the Sidebar primitive.
- *
- * Design-system token migration (2026-02-28):
- *   All V1 colour tokens have been replaced with semantic design-system tokens.
- *   Typography classes replaced with Tailwind equivalents.
- *
- * Props-driven: accepts user info, currentPath, and navItems instead of
- * reading from Remix hooks or Zustand stores.
- */
-import * as React from 'react';
-export interface NavSubItem {
-    title: string;
-    href: string;
-    /** Optional icon. Accepts any `IconInput`. */
-    icon?: IconInput;
-    exact?: boolean;
-}
-export interface NavItem {
-    title: string;
-    href: string;
-    /** Icon for this nav item. Accepts any `IconInput`. */
-    icon: IconInput;
-    /** 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;
-    email?: string;
-    image?: string | null;
-    designation?: string;
-    role?: string;
-}
-export interface SidebarPromo {
-    /** Promo message text */
-    text: string;
-    /** Optional icon rendered before the text. Accepts any `IconInput`. */
-    icon?: IconInput;
-    /** Action button rendered in the promo banner */
-    action?: {
-        label: string;
-        href?: string;
-        onClick?: () => void;
-    };
-    /** When provided, renders a dismiss (X) button that calls this handler */
-    onDismiss?: () => void;
-}
-export interface SidebarFooterConfig {
-    /** Legal/utility links rendered as a row separated by dividers */
-    links?: Array<{
-        label: string;
-        href: string;
-    }>;
-    /** Version or build info text (or link) rendered inline after links */
-    version?: string | {
-        label: string;
-        href: string;
-    };
-    /** Custom content rendered above the links row */
-    slot?: React.ReactNode;
-    /** Promo/upsell banner rendered above the links row */
-    promo?: SidebarPromo;
-}
-export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Currently active pathname -- used to highlight the active nav item */
-    currentPath?: string;
-    /** User information displayed in the sidebar header */
-    user?: SidebarUser | null;
-    /** Primary navigation groups rendered in the main content area */
-    navGroups?: NavGroup[];
-    /** Optional logo element. Falls back to a text placeholder. */
-    logo?: React.ReactNode;
-    /** Footer links rendered at the bottom of the sidebar */
-    footerLinks?: Array<{
-        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;
-    /** className applied to the wrapper div around preFooterSlot */
-    preFooterClassName?: string;
-    /** 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;
-    /**
-     * Corner radius of nav items (composable). @default 'md' (control radius, ~6px).
-     * `'lg'` restores the previous rounder look; `'sm'` is tighter; `'pill'` is fully rounded.
-     * Sets the `--ds-sidebar-item-radius` CSS var, so you can also override it via `className`/`style`.
-     */
-    navItemRadius?: 'sm' | 'md' | 'lg' | 'pill';
-}
-declare const AppSidebar: React.ForwardRefExoticComponent<AppSidebarProps & React.RefAttributes<HTMLDivElement>>;
-export { AppSidebar };
-//# sourceMappingURL=sidebar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/shell/sidebar.js

@@ -1,293 +0,0 @@
-"use client";
-import { IconProvider as e } from "../ui/icon-context.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
-import { normalizeIcon as a } from "../_chunks/normalize-icon.js";
-import { Button as o } from "../ui/button.js";
-import { Collapsible as s, CollapsibleContent as c, CollapsibleTrigger as l } from "../ui/collapsible.js";
-import { TruncatedText as u } from "../ui/truncated-text.js";
-import { useLink as d } from "../_chunks/link-context.js";
-import { Sidebar as f, SidebarContent as p, SidebarFooter as m, SidebarGroup as h, SidebarGroupAction as g, SidebarGroupContent as _, SidebarGroupLabel as v, SidebarHeader as y, SidebarMenu as b, SidebarMenuBadge as x, SidebarMenuButton as S, SidebarMenuItem as C, SidebarMenuSub as w, SidebarMenuSubButton as T, SidebarMenuSubItem as E, SidebarSeparator as D } from "../ui/sidebar.js";
-import "./link-context.js";
-import * as O from "react";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
-//#region src/shell/sidebar.tsx
-function M({ className: e }) {
-	return /* @__PURE__ */ A("svg", {
-		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: e,
-		children: /* @__PURE__ */ A("path", { d: "m9 18 6-6-6-6" })
-	});
-}
-function N({ className: e }) {
-	return /* @__PURE__ */ j("svg", {
-		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: e,
-		children: [/* @__PURE__ */ A("path", { d: "M18 6 6 18" }), /* @__PURE__ */ A("path", { d: "m6 6 12 12" })]
-	});
-}
-var P = "relative gap-ds-04 rounded-[var(--ds-sidebar-item-radius,var(--radius-control))] px-ds-04 py-ds-03 transition-colors duration-fast-02", F = {
-	sm: "var(--radius-control-inner)",
-	md: "var(--radius-control)",
-	lg: "var(--radius-surface)",
-	pill: "var(--radius-pill)"
-}, I = "bg-accent-2 text-accent-11 font-medium", L = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
-function R({ item: n, isActive: r, isPathActive: i }) {
-	let o = d(), u = n.badge == null ? null : typeof n.badge == "number" && n.badge > 99 ? "99+" : String(n.badge);
-	if (n.children && n.children.length > 0) {
-		let d = n.children.some((e) => i(e.href, e.exact));
-		return /* @__PURE__ */ A(s, {
-			defaultOpen: d || r || (n.defaultOpen ?? !1),
-			className: "group/collapsible",
-			children: /* @__PURE__ */ j(C, { children: [/* @__PURE__ */ j("div", {
-				className: "relative",
-				children: [
-					/* @__PURE__ */ A(S, {
-						asChild: !0,
-						isActive: r || d,
-						tooltip: n.title,
-						className: t(P, r || d ? I : L),
-						children: /* @__PURE__ */ j(o, {
-							href: n.href,
-							"aria-label": n.title,
-							"aria-current": r ? "page" : void 0,
-							className: "min-w-0",
-							children: [/* @__PURE__ */ A("span", {
-								className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0",
-								"aria-hidden": "true",
-								children: /* @__PURE__ */ A(e, {
-									size: "md",
-									children: a(n.icon)
-								})
-							}), /* @__PURE__ */ A("span", {
-								className: "text-body-lg truncate",
-								children: n.title
-							})]
-						})
-					}),
-					u && /* @__PURE__ */ A(x, { children: u }),
-					/* @__PURE__ */ A(l, {
-						asChild: !0,
-						children: /* @__PURE__ */ A("button", {
-							className: "absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg group-data-[collapsible=icon]:hidden",
-							"aria-label": `Toggle ${n.title}`,
-							children: /* @__PURE__ */ A(M, { className: "h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90" })
-						})
-					})
-				]
-			}), /* @__PURE__ */ A(c, { children: /* @__PURE__ */ A(w, { children: n.children.map((t) => {
-				let n = i(t.href, t.exact);
-				return /* @__PURE__ */ A(E, { children: /* @__PURE__ */ A(T, {
-					asChild: !0,
-					isActive: n,
-					children: /* @__PURE__ */ j(o, {
-						href: t.href,
-						"aria-current": n ? "page" : void 0,
-						className: "min-w-0",
-						children: [t.icon && /* @__PURE__ */ A("span", {
-							className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ A(e, {
-								size: "sm",
-								children: a(t.icon)
-							})
-						}), /* @__PURE__ */ A("span", {
-							className: "truncate",
-							children: t.title
-						})]
-					})
-				}) }, t.href);
-			}) }) })] })
-		});
-	}
-	return /* @__PURE__ */ j(C, { children: [/* @__PURE__ */ A(S, {
-		asChild: !0,
-		isActive: r,
-		tooltip: n.title,
-		className: t(P, r ? I : L),
-		children: /* @__PURE__ */ j(o, {
-			href: n.href,
-			"aria-label": n.title,
-			"aria-current": r ? "page" : void 0,
-			className: "min-w-0",
-			children: [/* @__PURE__ */ A("span", {
-				className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ A(e, {
-					size: "md",
-					children: a(n.icon)
-				})
-			}), /* @__PURE__ */ A("span", {
-				className: "text-body-lg truncate",
-				children: n.title
-			})]
-		})
-	}), u && /* @__PURE__ */ A(x, { children: u })] });
-}
-var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo: x, headerSlot: S, preFooterSlot: C, preFooterClassName: w, footerLinks: T = [], footer: E, renderItem: M, className: P, navItemRadius: I, style: L, ...z }, B) => {
-	let V = d(), H = (e, t = !1) => t || e === "/" ? s === e : s.startsWith(e);
-	return /* @__PURE__ */ j(f, {
-		...z,
-		ref: B,
-		"aria-label": "Main navigation",
-		style: I ? {
-			"--ds-sidebar-item-radius": F[I],
-			...L
-		} : L,
-		className: t("z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-raised md:flex", P),
-		children: [
-			/* @__PURE__ */ A(y, {
-				className: "px-ds-06 py-ds-06",
-				children: x ?? /* @__PURE__ */ A("span", {
-					className: "text-heading-xs font-semibold text-surface-fg",
-					children: "Logo"
-				})
-			}),
-			c && /* @__PURE__ */ j("div", {
-				className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05",
-				children: [/* @__PURE__ */ j(n, {
-					className: "h-ds-sm-plus w-ds-sm-plus",
-					children: [c.image ? /* @__PURE__ */ A(i, {
-						src: c.image,
-						alt: c.name
-					}) : null, /* @__PURE__ */ A(r, {
-						className: "bg-surface-raised-hover text-surface-fg",
-						children: c.name?.charAt(0).toUpperCase()
-					})]
-				}), /* @__PURE__ */ j("div", {
-					className: "flex min-w-0 flex-col",
-					children: [/* @__PURE__ */ A(u, {
-						className: "text-body-md text-surface-fg",
-						children: c.name ?? ""
-					}), /* @__PURE__ */ A(u, {
-						className: "text-body-sm text-surface-fg-subtle",
-						children: c.designation || c.role || ""
-					})]
-				})]
-			}),
-			/* @__PURE__ */ A(D, {}),
-			S && /* @__PURE__ */ j(k, { children: [S, /* @__PURE__ */ A(D, {})] }),
-			/* @__PURE__ */ A(p, {
-				className: "no-scrollbar px-ds-04",
-				children: l.map((e, t) => /* @__PURE__ */ j("div", { children: [t > 0 && /* @__PURE__ */ A(D, {}), /* @__PURE__ */ j(h, { children: [
-					/* @__PURE__ */ A(v, {
-						className: "px-ds-04 text-body-sm text-surface-fg-subtle",
-						children: e.label
-					}),
-					e.action && /* @__PURE__ */ A(g, {
-						asChild: !0,
-						children: e.action
-					}),
-					/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A(b, { children: e.items.map((e) => {
-						let t = () => /* @__PURE__ */ A(R, {
-							item: e,
-							isActive: H(e.href, e.exact),
-							isPathActive: H
-						});
-						if (M) {
-							let n = M(e, t);
-							if (n !== null) return /* @__PURE__ */ A(O.Fragment, { children: n }, e.href);
-						}
-						return /* @__PURE__ */ A(O.Fragment, { children: t() }, e.href);
-					}) }) })
-				] })] }, e.label))
-			}),
-			C && /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(D, {}), /* @__PURE__ */ A("div", {
-				className: w,
-				children: C
-			})] }),
-			E ? /* @__PURE__ */ j(m, {
-				className: "gap-ds-03 px-ds-06 py-ds-05",
-				children: [
-					E.slot && /* @__PURE__ */ A("div", { children: E.slot }),
-					E.promo && /* @__PURE__ */ j("div", {
-						className: "relative rounded-surface bg-surface-raised p-ds-04 shadow-raised",
-						children: [E.promo.onDismiss && /* @__PURE__ */ A("button", {
-							onClick: E.promo.onDismiss,
-							"aria-label": "Dismiss",
-							className: "absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg",
-							children: /* @__PURE__ */ A(N, { className: "h-3.5 w-3.5" })
-						}), /* @__PURE__ */ j("div", {
-							className: "flex flex-col gap-ds-03",
-							children: [E.promo.icon && /* @__PURE__ */ A("span", {
-								className: "text-accent-11 [&>svg]:h-ico-md [&>svg]:w-ico-md",
-								"aria-hidden": "true",
-								children: /* @__PURE__ */ A(e, {
-									size: "md",
-									children: a(E.promo.icon)
-								})
-							}), /* @__PURE__ */ j("div", {
-								className: "flex min-w-0 flex-col gap-ds-03",
-								children: [/* @__PURE__ */ A("p", {
-									className: "text-body-sm text-surface-fg line-clamp-2",
-									children: E.promo.text
-								}), E.promo.action && (E.promo.action.href ? /* @__PURE__ */ A(o, {
-									asChild: !0,
-									variant: "solid",
-									size: "sm",
-									className: "self-start",
-									children: /* @__PURE__ */ A(V, {
-										href: E.promo.action.href,
-										onClick: E.promo.action.onClick,
-										children: E.promo.action.label
-									})
-								}) : /* @__PURE__ */ A(o, {
-									variant: "solid",
-									size: "sm",
-									className: "self-start",
-									onClick: E.promo.action.onClick,
-									children: E.promo.action.label
-								}))]
-							})]
-						})]
-					}),
-					(E.links?.length || E.version) && /* @__PURE__ */ j("div", {
-						className: "flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle",
-						children: [
-							E.links?.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
-								className: "transition-colors hover:text-accent-11",
-								href: e.href,
-								children: e.label
-							})] }, e.href)),
-							E.links?.length && E.version && /* @__PURE__ */ A("span", { children: "·" }),
-							E.version && (typeof E.version == "string" ? /* @__PURE__ */ A("span", { children: E.version }) : /* @__PURE__ */ A(V, {
-								className: "transition-colors hover:text-accent-11",
-								href: E.version.href,
-								children: E.version.label
-							}))
-						]
-					})
-				]
-			}) : T.length > 0 ? /* @__PURE__ */ A(m, {
-				className: "px-ds-06 py-ds-05",
-				children: /* @__PURE__ */ A("div", {
-					className: "flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle",
-					children: T.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
-						className: "transition-colors hover:text-accent-11",
-						href: e.href,
-						children: e.label
-					})] }, e.href))
-				})
-			}) : null
-		]
-	});
-});
-z.displayName = "AppSidebar";
-//#endregion
-export { z as AppSidebar };