tembro 2.0.1 → 2.0.3

package/dist/showcase/package-meta.js

@@ -1,4 +1,4 @@
 //#region src/showcase/package-meta.ts
-var e = "2.0.1", t = "July 7, 2026", n = `^${e}`;
+var e = "2.0.3", t = "July 8, 2026", n = `^${e}`;
 //#endregion
 export { n as PACKAGE_DEPENDENCY_RANGE, t as PACKAGE_LATEST_RELEASE_DATE, e as PACKAGE_LATEST_VERSION };

package/dist/showcase/premium/app-shell/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/layout/app-sidebar.cjs"),i=require("../../../components/layout/breadcrumbs.cjs"),a=require("../../../components/layout/page-container.cjs"),o=require("../../../components/layout/sidebar-nav.cjs"),s=require("../../../components/display/metric-grid.cjs"),c=require("../../../components/display/smart-card.cjs"),l=require("../../../components/layout/app-header.cjs"),u=require("../../../components/layout/page-header.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=[{key:`overview`,label:`Overview`,href:`#overview`},{key:`products`,label:`Products`,href:`#products`},{key:`billing`,label:`Billing`,href:`#billing`},{key:`settings`,label:`Settings`,href:`#settings`}],m=[{key:`mrr`,label:`MRR`,value:`$64k`,description:`11% vs last week`,tone:`success`},{key:`users`,label:`Users`,value:`1,020`,description:`3% churn risk`,tone:`warning`},{key:`tasks`,label:`Tasks`,value:`58`,description:`5 in progress`,tone:`info`},{key:`response`,label:`Latency`,value:`1.2s`,description:`P95 API response`,tone:`default`}];function h({mode:e}){let[h,g]=d.useState(`overview`),[_,v]=d.useState(!1),y=p.map(e=>({...e,active:e.key===h,onSelect:()=>g(e.key)})),b=p.find(e=>e.key===h)?.label??`Overview`;return(0,f.jsxs)(`div`,{className:`space-y-5`,children:[(0,f.jsx)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,f.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between`,children:[(0,f.jsxs)(`div`,{className:`max-w-xl`,children:[(0,f.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Application frame`}),(0,f.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Reusable shell preview`}),(0,f.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Header, sidebar, main content and aside should feel like one predictable route frame.`})]}),(0,f.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Header`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Sidebar`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Aside`})]})]})}),e===`playground`?(0,f.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,f.jsx)(t.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>v(e=>!e),children:_?`Expand sidebar`:`Collapse sidebar`})}):null,(0,f.jsxs)(`div`,{className:`overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,f.jsx)(l.AppHeader,{className:`border-b border-[color:var(--aui-divider)] px-4 py-3`,left:`Product shell`,right:(0,f.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Profile`})}),(0,f.jsxs)(`div`,{className:`grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]`,children:[(0,f.jsx)(r.AppSidebar,{className:_?`hidden lg:block`:``,header:(0,f.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`AZA Studio`}),footer:(0,f.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Shell footer`}),children:(0,f.jsx)(o.SidebarNav,{items:y})}),(0,f.jsx)(`div`,{className:`min-w-0 border-x border-[color:var(--aui-divider)] p-4`,children:(0,f.jsxs)(a.PageContainer,{size:`lg`,children:[(0,f.jsx)(u.PageHeader,{eyebrow:`Workspace`,title:b,description:`Use shared shell primitives to keep regions stable across routes.`,breadcrumbs:(0,f.jsx)(i.Breadcrumbs,{items:[{key:`home`,label:`Home`,href:`/`},{key:`components`,label:`Components`,href:`/components`},{key:`active`,label:b,current:!0}]}),actions:(0,f.jsx)(t.Button,{size:`sm`,children:`Manage`})}),(0,f.jsx)(`div`,{className:`mt-4`,children:(0,f.jsx)(s.MetricGrid,{items:m,columns:2,compact:!0})})]})}),(0,f.jsx)(`aside`,{className:`hidden p-4 lg:block`,children:(0,f.jsx)(c.SmartCard,{title:`Quick actions`,description:`Support content can live in the aside.`,compact:!0})})]})]})]})}exports.AppShellShowcase=h;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/layout/app-sidebar.cjs"),i=require("../../../components/layout/breadcrumbs.cjs"),a=require("../../../components/layout/page-container.cjs"),o=require("../../../components/layout/sidebar-nav.cjs"),s=require("../../../components/display/metric-grid.cjs"),c=require("../../../components/display/smart-card.cjs"),l=require("../../../components/layout/app-header.cjs"),u=require("../../../components/layout/page-header.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=[{key:`overview`,label:`Overview`,href:`#overview`},{key:`products`,label:`Products`,href:`#products`},{key:`billing`,label:`Billing`,href:`#billing`},{key:`settings`,label:`Settings`,href:`#settings`}],m=[{key:`mrr`,label:`MRR`,value:`$64k`,description:`11% vs last week`,tone:`success`},{key:`users`,label:`Users`,value:`1,020`,description:`3% churn risk`,tone:`warning`},{key:`tasks`,label:`Tasks`,value:`58`,description:`5 in progress`,tone:`info`},{key:`response`,label:`Latency`,value:`1.2s`,description:`P95 API response`,tone:`default`}];function h({mode:e}){let[h,g]=d.useState(`overview`),[_,v]=d.useState(!1),y=p.map(e=>({...e,active:e.key===h,onSelect:()=>g(e.key)})),b=p.find(e=>e.key===h)?.label??`Overview`;return(0,f.jsxs)(`div`,{className:`space-y-5`,children:[(0,f.jsx)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,f.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between`,children:[(0,f.jsxs)(`div`,{className:`max-w-xl`,children:[(0,f.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Application frame`}),(0,f.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Reusable shell preview`}),(0,f.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Header, sidebar, main content and aside should feel like one predictable route frame.`})]}),(0,f.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Header`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Sidebar`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Aside`})]})]})}),e===`playground`?(0,f.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,f.jsx)(t.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>v(e=>!e),children:_?`Expand sidebar`:`Collapse sidebar`})}):null,(0,f.jsxs)(`div`,{className:`overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,f.jsx)(l.AppHeader,{className:`border-b border-[color:var(--aui-divider)] px-4 py-3`,left:`Product shell`,right:(0,f.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Profile`})}),(0,f.jsxs)(`div`,{className:`grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]`,children:[(0,f.jsx)(r.AppSidebar,{responsive:!0,mobileTitle:`Workspace navigation`,mobileDescription:`Open the shell menu first, then move through app routes without squeezing the main content.`,header:(0,f.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`AZA Studio`}),footer:(0,f.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Shell footer`}),className:_?`lg:w-[92px]`:``,collapsed:_,children:(0,f.jsx)(o.SidebarNav,{items:y})}),(0,f.jsx)(`div`,{className:`min-w-0 border-x border-[color:var(--aui-divider)] p-4`,children:(0,f.jsxs)(a.PageContainer,{size:`lg`,children:[(0,f.jsx)(u.PageHeader,{eyebrow:`Workspace`,title:b,description:`Use shared shell primitives to keep regions stable across routes.`,breadcrumbs:(0,f.jsx)(i.Breadcrumbs,{items:[{key:`home`,label:`Home`,href:`/`},{key:`components`,label:`Components`,href:`/components`},{key:`active`,label:b,current:!0}]}),actions:(0,f.jsx)(t.Button,{size:`sm`,children:`Manage`})}),(0,f.jsx)(`div`,{className:`mt-4`,children:(0,f.jsx)(s.MetricGrid,{items:m,columns:2,compact:!0})})]})}),(0,f.jsx)(`aside`,{className:`hidden p-4 lg:block`,children:(0,f.jsx)(c.SmartCard,{title:`Quick actions`,description:`Support content can live in the aside.`,compact:!0})})]})]})]})}exports.AppShellShowcase=h;

package/dist/showcase/premium/app-shell/showcase.js

@@ -136,7 +136,9 @@ function h({ mode: h }) {
 					className: "grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]",
 					children: [
 						/* @__PURE__ */ d(n, {
-							className: v ? "hidden lg:block" : "",
+							responsive: !0,
+							mobileTitle: "Workspace navigation",
+							mobileDescription: "Open the shell menu first, then move through app routes without squeezing the main content.",
 							header: /* @__PURE__ */ d("div", {
 								className: "px-3 py-2 text-sm font-semibold",
 								children: "AZA Studio"
@@ -145,6 +147,8 @@ function h({ mode: h }) {
 								className: "aui-text-muted px-3 py-2 text-xs",
 								children: "Shell footer"
 							}),
+							className: v ? "lg:w-[92px]" : "",
+							collapsed: v,
 							children: /* @__PURE__ */ d(a, { items: b })
 						}),
 						/* @__PURE__ */ d("div", {

package/dist/showcase/premium/app-sidebar/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/layout/app-sidebar.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,o.jsx)(a.HomeIcon,{className:`size-4`})},{key:`projects`,label:`Projects`,href:`/projects`,icon:(0,o.jsx)(a.FolderIcon,{className:`size-4`}),badge:`8`},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,o.jsx)(a.BarChart3Icon,{className:`size-4`})},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,o.jsx)(a.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,o.jsx)(a.SettingsIcon,{className:`size-4`}),disabled:!0}],c=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function l({mode:e}){let[a,l]=i.useState(`overview`),[u,d]=i.useState(e===`playground`),f=i.useMemo(()=>s.map(e=>({...e,active:e.key===a,onSelect:()=>l(e.key)})),[a]),p=s.find(e=>e.key===a);return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[(0,o.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.`})]}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Collapsed rail`})]})]})}),e===`playground`?(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:u?`outline`:`default`,onClick:()=>d(e=>!e),children:u?`Expand sidebar`:`Collapse sidebar`}),(0,o.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>l(`reports`),children:`Jump to reports`})]}):null,(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,o.jsx)(`section`,{className:c,children:(0,o.jsx)(r.AppSidebar,{collapsed:u,items:f,header:(0,o.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,o.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,o.jsxs)(`section`,{className:c,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,o.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:p?.label??`Overview`}),(0,o.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u?`Collapsed`:`Expanded`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f.length})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]})]})]})]})}exports.AppSidebarShowcase=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`})},{key:`projects`,label:`Projects`,href:`/projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`})},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[o,u]=a.useState(`overview`),[d,f]=a.useState(e===`playground`),[p,m]=a.useState(`desktop`),h=a.useMemo(()=>c.map(e=>({...e,active:e.key===o,onSelect:()=>u(e.key)})),[o]),g=c.find(e=>e.key===o),_=p===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:d?`outline`:`default`,onClick:()=>f(e=>!e),children:d?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>u(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`default`:`outline`,onClick:()=>m(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>m(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,_&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.AppSidebar,{collapsed:d,items:h,responsive:!0,mobileBreakpoint:_?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:g?.label??`Overview`}),(0,s.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:_?`Mobile drawer`:d?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]})]})]})]})}exports.AppSidebarShowcase=u;

package/dist/showcase/premium/app-sidebar/showcase.js

@@ -1,171 +1,192 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { AppSidebar as n } from "../../../components/layout/app-sidebar.js";
-import * as r from "react";
-import { BarChart3Icon as i, CreditCardIcon as a, FolderIcon as o, HomeIcon as s, SettingsIcon as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../../../components/ui/button/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { AppSidebar as r } from "../../../components/layout/app-sidebar.js";
+import * as i from "react";
+import { BarChart3Icon as a, CreditCardIcon as o, FolderIcon as s, HomeIcon as c, SettingsIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/showcase/premium/app-sidebar/showcase.tsx
-var d = [
+var f = [
 	{
 		key: "overview",
 		label: "Overview",
 		href: "/overview",
-		icon: /* @__PURE__ */ l(s, { className: "size-4" })
+		icon: /* @__PURE__ */ u(c, { className: "size-4" })
 	},
 	{
 		key: "projects",
 		label: "Projects",
 		href: "/projects",
-		icon: /* @__PURE__ */ l(o, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(s, { className: "size-4" }),
 		badge: "8"
 	},
 	{
 		key: "reports",
 		label: "Reports",
 		href: "/reports",
-		icon: /* @__PURE__ */ l(i, { className: "size-4" })
+		icon: /* @__PURE__ */ u(a, { className: "size-4" })
 	},
 	{
 		key: "billing",
 		label: "Billing",
 		href: "/billing",
-		icon: /* @__PURE__ */ l(a, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(o, { className: "size-4" }),
 		badge: "2"
 	},
 	{
 		key: "settings",
 		label: "Settings",
 		href: "/settings",
-		icon: /* @__PURE__ */ l(c, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(l, { className: "size-4" }),
 		disabled: !0
 	}
-], f = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function p({ mode: i }) {
-	let [a, o] = r.useState("overview"), [s, c] = r.useState(i === "playground"), p = r.useMemo(() => d.map((e) => ({
+], p = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function m({ mode: a }) {
+	let [o, s] = i.useState("overview"), [c, l] = i.useState(a === "playground"), [m, h] = i.useState("desktop"), g = i.useMemo(() => f.map((e) => ({
 		...e,
-		active: e.key === a,
-		onSelect: () => o(e.key)
-	})), [a]), m = d.find((e) => e.key === a);
-	return /* @__PURE__ */ u("div", {
+		active: e.key === o,
+		onSelect: () => s(e.key)
+	})), [o]), _ = f.find((e) => e.key === o), v = m === "mobile";
+	return /* @__PURE__ */ d("div", {
 		className: "space-y-5",
 		children: [
-			/* @__PURE__ */ l("section", {
+			/* @__PURE__ */ u("section", {
 				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ u("div", {
+				children: /* @__PURE__ */ d("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ u("div", {
+					children: [/* @__PURE__ */ d("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ l("p", {
+							/* @__PURE__ */ u("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Navigation shell"
 							}),
-							/* @__PURE__ */ l("h3", {
+							/* @__PURE__ */ u("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "Sidebar should feel install-ready on its own"
 							}),
-							/* @__PURE__ */ l("p", {
+							/* @__PURE__ */ u("p", {
 								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 								children: "This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior."
 							})
 						]
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ d("div", {
 						className: "flex flex-wrap gap-2",
 						children: [
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Header slot"
 							}),
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Badges"
 							}),
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
-								children: "Collapsed rail"
+								children: "Mobile drawer"
 							})
 						]
 					})]
 				})
 			}),
-			i === "playground" ? /* @__PURE__ */ u("div", {
+			a === "playground" ? /* @__PURE__ */ d("div", {
 				className: "flex flex-wrap gap-3",
-				children: [/* @__PURE__ */ l(e, {
-					size: "sm",
-					variant: s ? "outline" : "default",
-					onClick: () => c((e) => !e),
-					children: s ? "Expand sidebar" : "Collapse sidebar"
-				}), /* @__PURE__ */ l(e, {
-					size: "sm",
-					variant: "outline",
-					onClick: () => o("reports"),
-					children: "Jump to reports"
-				})]
+				children: [
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: c ? "outline" : "default",
+						onClick: () => l((e) => !e),
+						children: c ? "Expand sidebar" : "Collapse sidebar"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => s("reports"),
+						children: "Jump to reports"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: v ? "default" : "outline",
+						onClick: () => h("mobile"),
+						children: "Mobile drawer"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: v ? "outline" : "default",
+						onClick: () => h("desktop"),
+						children: "Desktop rail"
+					})
+				]
 			}) : null,
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ d("div", {
 				className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]",
-				children: [/* @__PURE__ */ l("section", {
-					className: f,
-					children: /* @__PURE__ */ l(n, {
-						collapsed: s,
-						items: p,
-						header: /* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ u("section", {
+					className: e(p, v && "mx-auto w-full max-w-[420px]"),
+					children: /* @__PURE__ */ u(r, {
+						collapsed: c,
+						items: g,
+						responsive: !0,
+						mobileBreakpoint: v ? 1e4 : 0,
+						mobileTitle: "Workspace navigation",
+						mobileDescription: "Open routes, check badges, and move between sections from one compact drawer.",
+						mobileToggleLabel: "Open workspace menu",
+						header: /* @__PURE__ */ u("div", {
 							className: "px-3 py-2 text-sm font-semibold",
 							children: "Azamat Workspace"
 						}),
-						footer: /* @__PURE__ */ l("div", {
+						footer: /* @__PURE__ */ u("div", {
 							className: "aui-text-muted px-3 py-2 text-xs",
 							children: "Starter plan • 3 editors"
 						}),
 						className: "min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
 					})
-				}), /* @__PURE__ */ u("section", {
-					className: f,
+				}), /* @__PURE__ */ d("section", {
+					className: p,
 					children: [
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Current route"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: m?.label ?? "Overview"
+							children: _?.label ?? "Overview"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
 							children: "Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it."
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: "mt-6 grid gap-3 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
-										children: "Mode"
-									}), /* @__PURE__ */ l("p", {
+										children: "Shell"
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: s ? "Collapsed" : "Expanded"
+										children: v ? "Mobile drawer" : c ? "Collapsed" : "Expanded"
 									})]
 								}),
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Visible items"
-									}), /* @__PURE__ */ l("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: p.length
+										children: g.length
 									})]
 								}),
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Disabled"
-									}), /* @__PURE__ */ l("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
 										children: "1 route"
 									})]
@@ -179,4 +200,4 @@ function p({ mode: i }) {
 	});
 }
 //#endregion
-export { p as AppSidebarShowcase };
+export { m as AppSidebarShowcase };