tembro 3.1.1 → 3.1.5

package/dist/src/showcase/package-meta.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.0`,t=`July 10, 2026`,n=`^${e}`;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`3.1.5`,t=`July 13, 2026`,n=`^${e}`;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;

package/dist/src/showcase/package-meta.js

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

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

@@ -1,9 +1,18 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Sidebar } from "@/components/layout/app-sidebar"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Sidebar } from "tembro"
 
 const items = [
-  { key: "overview", label: "Overview", href: "/overview", active: true },
-  { key: "customers", label: "Customers", href: "/customers", badge: "12" },
-  { key: "billing", label: "Billing", href: "/billing" },
+  { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
+  {
+    key: "customers",
+    label: "Customers",
+    badge: "12",
+    defaultExpanded: true,
+    items: [
+      { key: "active", label: "Active", href: "/customers/active" },
+      { key: "archived", label: "Archived", href: "/customers/archived" },
+    ],
+  },
+  { key: "billing", label: "Billing", href: "/billing", sectionLabel: "Manage" },
   { key: "settings", label: "Settings", href: "/settings", disabled: true },
 ]
 
@@ -11,8 +20,18 @@ export function Example() {
   return (
     <Sidebar
       items={items}
+      navigationLabel="Workspace navigation"
+      itemSize="md"
+      activeIndicator="bar"
+      showSectionLabels
+      responsive
+      renderLink={({ item: _item, href = "/", ...props }) => (
+        <a {...props} href={href} />
+      )}
       header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-      footer={<div className="px-3 py-2 text-xs text-muted-foreground">Starter plan</div>}
+      footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}
+      secondaryActions={[{ key: "support", label: "Support", href: "/support" }]}
+      onItemSelect={(item) => console.log(item.key)}
     />
   )
-}`,highlights:[`Header and footer slots`,`Active and disabled items`,`Collapsed rail support`,`Custom link rendering for routers`],scenarios:[{title:`Workspace shell`,description:`Use one sidebar contract across dashboards, settings and dense internal tools.`},{title:`Router integration`,description:`Swap anchors with framework links through renderLink without rewriting item state.`},{title:`Collapsed desktop rail`,description:`Keep icons visible when space is tight, but preserve labels in expanded mode.`}],capabilityNotes:[`Keep one items array as the source of truth for label, badge, disabled and active route state.`,`Use the header slot for workspace identity, not for unrelated page actions.`,`Collapsed mode works best when icons stay distinctive and current route is still obvious.`,`Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.`]};exports.appSidebarMock=e;
+}`,highlights:[`Nested and collapsible route groups`,`Three density modes`,`Bar, pill and minimal active indicators`,`Responsive mobile navigation`,`Custom link rendering`],scenarios:[{title:`Workspace shell`,description:`Use one sidebar contract across dashboards, settings and dense internal tools.`},{title:`Router integration`,description:`Swap anchors with framework links through renderLink without rewriting item state.`},{title:`Collapsed desktop rail`,description:`Keep icons visible when space is tight, but preserve labels in expanded mode.`}],capabilityNotes:[`Keep one items array as the source of truth for label, badge, disabled and active route state.`,`Use the header slot for workspace identity, not for unrelated page actions.`,`Collapsed mode works best when icons stay distinctive and current route is still obvious.`,`Use navigationLabel and the mobile labels when the product language is not English.`,`Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.`]};exports.appSidebarMock=e;

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

@@ -1,11 +1,12 @@
 //#region src/showcase/premium/app-sidebar/mock.ts
 var e = {
-	code: "import { Sidebar } from \"@/components/layout/app-sidebar\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true },\n  { key: \"customers\", label: \"Customers\", href: \"/customers\", badge: \"12\" },\n  { key: \"billing\", label: \"Billing\", href: \"/billing\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return (\n    <Sidebar\n      items={items}\n      header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n      footer={<div className=\"px-3 py-2 text-xs text-muted-foreground\">Starter plan</div>}\n    />\n  )\n}",
+	code: "import { Sidebar } from \"tembro\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true, sectionLabel: \"Workspace\" },\n  {\n    key: \"customers\",\n    label: \"Customers\",\n    badge: \"12\",\n    defaultExpanded: true,\n    items: [\n      { key: \"active\", label: \"Active\", href: \"/customers/active\" },\n      { key: \"archived\", label: \"Archived\", href: \"/customers/archived\" },\n    ],\n  },\n  { key: \"billing\", label: \"Billing\", href: \"/billing\", sectionLabel: \"Manage\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return (\n    <Sidebar\n      items={items}\n      navigationLabel=\"Workspace navigation\"\n      itemSize=\"md\"\n      activeIndicator=\"bar\"\n      showSectionLabels\n      responsive\n      renderLink={({ item: _item, href = \"/\", ...props }) => (\n        <a {...props} href={href} />\n      )}\n      header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n      footerAccount={{ label: \"Azamat Workspace\", description: \"Starter plan\", avatar: \"AW\" }}\n      secondaryActions={[{ key: \"support\", label: \"Support\", href: \"/support\" }]}\n      onItemSelect={(item) => console.log(item.key)}\n    />\n  )\n}",
 	highlights: [
-		"Header and footer slots",
-		"Active and disabled items",
-		"Collapsed rail support",
-		"Custom link rendering for routers"
+		"Nested and collapsible route groups",
+		"Three density modes",
+		"Bar, pill and minimal active indicators",
+		"Responsive mobile navigation",
+		"Custom link rendering"
 	],
 	scenarios: [
 		{
@@ -25,6 +26,7 @@ var e = {
 		"Keep one items array as the source of truth for label, badge, disabled and active route state.",
 		"Use the header slot for workspace identity, not for unrelated page actions.",
 		"Collapsed mode works best when icons stay distinctive and current route is still obvious.",
+		"Use navigationLabel and the mobile labels when the product language is not English.",
 		"Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared."
 	]
 };

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

@@ -1 +1 @@
-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.Sidebar,{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`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,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;
+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`}),sectionLabel:`Core`},{key:`projects`,label:`Projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`,defaultExpanded:!0,items:[{key:`active-projects`,label:`Active projects`,href:`/components/app-sidebar?view=active`},{key:`archived-projects`,label:`Archived`,href:`/components/app-sidebar?view=archived`,badge:`3`}]},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`}),sectionLabel:`Insights`},{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[u,d]=a.useState(`overview`),[f,p]=a.useState(e===`playground`),[m,h]=a.useState(`desktop`),[g,_]=a.useState(!0),[v,y]=a.useState(`md`),[b,x]=a.useState(`bar`),[S,C]=a.useState(0),w=a.useMemo(()=>c.map(e=>({...e,active:e.key===u,onSelect:()=>d(e.key)})),[u]),T=c.find(e=>e.key===u),E=m===`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:f?`outline`:`default`,onClick:()=>p(e=>!e),children:f?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>d(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`default`:`outline`,onClick:()=>h(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`outline`:`default`,onClick:()=>h(`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,E&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.Sidebar,{collapsed:f,items:w,showSectionLabels:g,itemSize:v,activeIndicator:b,renderLink:({item:e,href:t=`/components/app-sidebar`,...n})=>(0,s.jsx)(`a`,{...n,href:t}),secondaryActions:[{key:`support`,label:`Support`,icon:(0,s.jsx)(o.LifeBuoyIcon,{className:`size-4`}),onSelect:()=>d(`reports`)}],railItems:[{key:`members`,label:`Members`,icon:(0,s.jsx)(o.UsersIcon,{className:`size-4`}),onSelect:()=>d(`projects`)}],footerAccount:{label:`Azamat Workspace`,description:S?`Account opened ${S}x`:`Starter plan`,avatar:`AW`,onSelect:()=>C(e=>e+1)},responsive:!0,mobileBreakpoint:E?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`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,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:T?.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:E?`Mobile drawer`:f?`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:w.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`})]})]}),e===`playground`?(0,s.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:g?`default`:`outline`,onClick:()=>_(e=>!e),children:g?`Hide section labels`:`Show section labels`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`sm`?`default`:`outline`,onClick:()=>y(`sm`),children:`Compact`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`md`?`default`:`outline`,onClick:()=>y(`md`),children:`Default`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`lg`?`default`:`outline`,onClick:()=>y(`lg`),children:`Comfortable`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`bar`?`default`:`outline`,onClick:()=>x(`bar`),children:`Bar active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`pill`?`default`:`outline`,onClick:()=>x(`pill`),children:`Pill active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`none`?`default`:`outline`,onClick:()=>x(`none`),children:`Minimal active`})]}):null]})]})]})}exports.AppSidebarShowcase=u;

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

@@ -3,87 +3,99 @@ import { Button as t } from "../../../components/ui/button/index.js";
 import { Badge as n } from "../../../components/ui/badge/index.js";
 import { Sidebar 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";
+import { BarChart3Icon as a, CreditCardIcon as o, FolderIcon as s, HomeIcon as c, LifeBuoyIcon as l, SettingsIcon as u, UsersIcon as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/showcase/premium/app-sidebar/showcase.tsx
-var f = [
+var m = [
 	{
 		key: "overview",
 		label: "Overview",
 		href: "/overview",
-		icon: /* @__PURE__ */ u(c, { className: "size-4" })
+		icon: /* @__PURE__ */ f(c, { className: "size-4" }),
+		sectionLabel: "Core"
 	},
 	{
 		key: "projects",
 		label: "Projects",
-		href: "/projects",
-		icon: /* @__PURE__ */ u(s, { className: "size-4" }),
-		badge: "8"
+		icon: /* @__PURE__ */ f(s, { className: "size-4" }),
+		badge: "8",
+		defaultExpanded: !0,
+		items: [{
+			key: "active-projects",
+			label: "Active projects",
+			href: "/components/app-sidebar?view=active"
+		}, {
+			key: "archived-projects",
+			label: "Archived",
+			href: "/components/app-sidebar?view=archived",
+			badge: "3"
+		}]
 	},
 	{
 		key: "reports",
 		label: "Reports",
 		href: "/reports",
-		icon: /* @__PURE__ */ u(a, { className: "size-4" })
+		icon: /* @__PURE__ */ f(a, { className: "size-4" }),
+		sectionLabel: "Insights"
 	},
 	{
 		key: "billing",
 		label: "Billing",
 		href: "/billing",
-		icon: /* @__PURE__ */ u(o, { className: "size-4" }),
+		icon: /* @__PURE__ */ f(o, { className: "size-4" }),
 		badge: "2"
 	},
 	{
 		key: "settings",
 		label: "Settings",
 		href: "/settings",
-		icon: /* @__PURE__ */ u(l, { className: "size-4" }),
+		icon: /* @__PURE__ */ f(u, { className: "size-4" }),
 		disabled: !0
 	}
-], 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) => ({
+], h = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function g({ mode: a }) {
+	let [o, s] = i.useState("overview"), [c, u] = i.useState(a === "playground"), [g, _] = i.useState("desktop"), [v, y] = i.useState(!0), [b, x] = i.useState("md"), [S, C] = i.useState("bar"), [w, T] = i.useState(0), E = i.useMemo(() => m.map((e) => ({
 		...e,
 		active: e.key === o,
 		onSelect: () => s(e.key)
-	})), [o]), _ = f.find((e) => e.key === o), v = m === "mobile";
-	return /* @__PURE__ */ d("div", {
+	})), [o]), D = m.find((e) => e.key === o), O = g === "mobile";
+	return /* @__PURE__ */ p("div", {
 		className: "space-y-5",
 		children: [
-			/* @__PURE__ */ u("section", {
+			/* @__PURE__ */ f("section", {
 				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ p("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ p("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Navigation shell"
 							}),
-							/* @__PURE__ */ u("h3", {
+							/* @__PURE__ */ f("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "Sidebar should feel install-ready on its own"
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("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__ */ d("div", {
+					}), /* @__PURE__ */ p("div", {
 						className: "flex flex-wrap gap-2",
 						children: [
-							/* @__PURE__ */ u(n, {
+							/* @__PURE__ */ f(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Header slot"
 							}),
-							/* @__PURE__ */ u(n, {
+							/* @__PURE__ */ f(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Badges"
 							}),
-							/* @__PURE__ */ u(n, {
+							/* @__PURE__ */ f(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Mobile drawer"
@@ -92,108 +104,180 @@ function m({ mode: a }) {
 					})]
 				})
 			}),
-			a === "playground" ? /* @__PURE__ */ d("div", {
+			a === "playground" ? /* @__PURE__ */ p("div", {
 				className: "flex flex-wrap gap-3",
 				children: [
-					/* @__PURE__ */ u(t, {
+					/* @__PURE__ */ f(t, {
 						size: "sm",
 						variant: c ? "outline" : "default",
-						onClick: () => l((e) => !e),
+						onClick: () => u((e) => !e),
 						children: c ? "Expand sidebar" : "Collapse sidebar"
 					}),
-					/* @__PURE__ */ u(t, {
+					/* @__PURE__ */ f(t, {
 						size: "sm",
 						variant: "outline",
 						onClick: () => s("reports"),
 						children: "Jump to reports"
 					}),
-					/* @__PURE__ */ u(t, {
+					/* @__PURE__ */ f(t, {
 						size: "sm",
-						variant: v ? "default" : "outline",
-						onClick: () => h("mobile"),
+						variant: O ? "default" : "outline",
+						onClick: () => _("mobile"),
 						children: "Mobile drawer"
 					}),
-					/* @__PURE__ */ u(t, {
+					/* @__PURE__ */ f(t, {
 						size: "sm",
-						variant: v ? "outline" : "default",
-						onClick: () => h("desktop"),
+						variant: O ? "outline" : "default",
+						onClick: () => _("desktop"),
 						children: "Desktop rail"
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p("div", {
 				className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]",
-				children: [/* @__PURE__ */ u("section", {
-					className: e(p, v && "mx-auto w-full max-w-[420px]"),
-					children: /* @__PURE__ */ u(r, {
+				children: [/* @__PURE__ */ f("section", {
+					className: e(h, O && "mx-auto w-full max-w-[420px]"),
+					children: /* @__PURE__ */ f(r, {
 						collapsed: c,
-						items: g,
+						items: E,
+						showSectionLabels: v,
+						itemSize: b,
+						activeIndicator: S,
+						renderLink: ({ item: e, href: t = "/components/app-sidebar", ...n }) => /* @__PURE__ */ f("a", {
+							...n,
+							href: t
+						}),
+						secondaryActions: [{
+							key: "support",
+							label: "Support",
+							icon: /* @__PURE__ */ f(l, { className: "size-4" }),
+							onSelect: () => s("reports")
+						}],
+						railItems: [{
+							key: "members",
+							label: "Members",
+							icon: /* @__PURE__ */ f(d, { className: "size-4" }),
+							onSelect: () => s("projects")
+						}],
+						footerAccount: {
+							label: "Azamat Workspace",
+							description: w ? `Account opened ${w}x` : "Starter plan",
+							avatar: "AW",
+							onSelect: () => T((e) => e + 1)
+						},
 						responsive: !0,
-						mobileBreakpoint: v ? 1e4 : 0,
+						mobileBreakpoint: O ? 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", {
+						header: /* @__PURE__ */ f("div", {
 							className: "px-3 py-2 text-sm font-semibold",
 							children: "Azamat Workspace"
 						}),
-						footer: /* @__PURE__ */ u("div", {
+						footer: /* @__PURE__ */ f("div", {
 							className: "aui-text-muted px-3 py-2 text-xs",
 							children: "Starter plan • 3 editors"
 						}),
 						footerClassName: "bg-[color:var(--aui-page-bg-alt)]/55",
 						className: "min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
 					})
-				}), /* @__PURE__ */ d("section", {
-					className: p,
+				}), /* @__PURE__ */ p("section", {
+					className: h,
 					children: [
-						/* @__PURE__ */ u("p", {
+						/* @__PURE__ */ f("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Current route"
 						}),
-						/* @__PURE__ */ u("p", {
+						/* @__PURE__ */ f("p", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: _?.label ?? "Overview"
+							children: D?.label ?? "Overview"
 						}),
-						/* @__PURE__ */ u("p", {
+						/* @__PURE__ */ f("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__ */ d("div", {
+						/* @__PURE__ */ p("div", {
 							className: "mt-6 grid gap-3 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ p("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ u("p", {
+									children: [/* @__PURE__ */ f("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Shell"
-									}), /* @__PURE__ */ u("p", {
+									}), /* @__PURE__ */ f("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: v ? "Mobile drawer" : c ? "Collapsed" : "Expanded"
+										children: O ? "Mobile drawer" : c ? "Collapsed" : "Expanded"
 									})]
 								}),
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ p("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ u("p", {
+									children: [/* @__PURE__ */ f("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Visible items"
-									}), /* @__PURE__ */ u("p", {
+									}), /* @__PURE__ */ f("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: g.length
+										children: E.length
 									})]
 								}),
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ p("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ u("p", {
+									children: [/* @__PURE__ */ f("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Disabled"
-									}), /* @__PURE__ */ u("p", {
+									}), /* @__PURE__ */ f("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
 										children: "1 route"
 									})]
 								})
 							]
-						})
+						}),
+						a === "playground" ? /* @__PURE__ */ p("div", {
+							className: "mt-4 flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: v ? "default" : "outline",
+									onClick: () => y((e) => !e),
+									children: v ? "Hide section labels" : "Show section labels"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "sm" ? "default" : "outline",
+									onClick: () => x("sm"),
+									children: "Compact"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "md" ? "default" : "outline",
+									onClick: () => x("md"),
+									children: "Default"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: b === "lg" ? "default" : "outline",
+									onClick: () => x("lg"),
+									children: "Comfortable"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "bar" ? "default" : "outline",
+									onClick: () => C("bar"),
+									children: "Bar active"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "pill" ? "default" : "outline",
+									onClick: () => C("pill"),
+									children: "Pill active"
+								}),
+								/* @__PURE__ */ f(t, {
+									size: "sm",
+									variant: S === "none" ? "default" : "outline",
+									onClick: () => C("none"),
+									children: "Minimal active"
+								})
+							]
+						}) : null
 					]
 				})]
 			})
@@ -201,4 +285,4 @@ function m({ mode: a }) {
 	});
 }
 //#endregion
-export { m as AppSidebarShowcase };
+export { g as AppSidebarShowcase };

package/dist/src/showcase/premium/{command-bar → color-picker}/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.CommandBarShowcase=t.CommandBarShowcase,exports.commandBarMock=e.commandBarMock;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.ColorPickerShowcase=t.ColorPickerShowcase,exports.colorPickerMock=e.colorPickerMock;

package/dist/src/showcase/premium/color-picker/index.js

@@ -0,0 +1,3 @@
+import { colorPickerMock as e } from "./mock.js";
+import { ColorPickerShowcase as t } from "./showcase.js";
+export { t as ColorPickerShowcase, e as colorPickerMock };

package/dist/src/showcase/premium/color-picker/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ColorPicker } from "tembro"
+
+export function Example() {
+  return (
+    <ColorPicker
+      label="Brand color"
+      defaultValue="#2563ebcc"
+      showAlpha
+    />
+  )
+}`,cliCommand:`npx tembro add color-picker`,highlights:[`Controlled HEX and alpha value`,`Keyboard-editable input and accessible swatches`],scenarios:[{title:`Brand settings`,description:`Choose and validate theme colors with reusable presets.`},{title:`Design tools`,description:`Edit opaque or alpha-aware colors through one value contract.`}]};exports.colorPickerMock=e;

package/dist/src/showcase/premium/color-picker/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/color-picker/mock.ts
+var e = {
+	code: "import { ColorPicker } from \"tembro\"\n\nexport function Example() {\n  return (\n    <ColorPicker\n      label=\"Brand color\"\n      defaultValue=\"#2563ebcc\"\n      showAlpha\n    />\n  )\n}",
+	cliCommand: "npx tembro add color-picker",
+	highlights: ["Controlled HEX and alpha value", "Keyboard-editable input and accessible swatches"],
+	scenarios: [{
+		title: "Brand settings",
+		description: "Choose and validate theme colors with reusable presets."
+	}, {
+		title: "Design tools",
+		description: "Edit opaque or alpha-aware colors through one value contract."
+	}]
+};
+//#endregion
+export { e as colorPickerMock };

package/dist/src/showcase/premium/color-picker/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/color-picker.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`#2563ebcc`);return(0,r.jsxs)(`div`,{className:`mx-auto grid w-full max-w-sm gap-3`,children:[(0,r.jsx)(t.ColorPicker,{label:`Brand color`,value:e,onValueChange:i,showAlpha:!0}),(0,r.jsx)(`code`,{className:`text-sm text-muted-foreground`,children:e})]})}exports.ColorPickerShowcase=i;

package/dist/src/showcase/premium/color-picker/showcase.js

@@ -0,0 +1,21 @@
+import { ColorPicker as e } from "../../../components/inputs/color-picker.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/color-picker/showcase.tsx
+function i() {
+	let [i, a] = t.useState("#2563ebcc");
+	return /* @__PURE__ */ r("div", {
+		className: "mx-auto grid w-full max-w-sm gap-3",
+		children: [/* @__PURE__ */ n(e, {
+			label: "Brand color",
+			value: i,
+			onValueChange: a,
+			showAlpha: !0
+		}), /* @__PURE__ */ n("code", {
+			className: "text-sm text-muted-foreground",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { i as ColorPickerShowcase };

package/dist/src/showcase/premium/data-table/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/ui/select/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-sortable-header.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`},{invoice:`INV-4824`,customer:`Pixel Union`,owner:`Azamat`,amount:`$17,300`,status:`Paid`,updatedAt:`44m ago`},{invoice:`INV-4825`,customer:`Meridian Labs`,owner:`Madina`,amount:`$2,180`,status:`Review`,updatedAt:`1h ago`},{invoice:`INV-4826`,customer:`Orbit Cloud`,owner:`Jasur`,amount:`$9,040`,status:`Draft`,updatedAt:`3h ago`}];function f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,title:`Invoices`,description:`Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.`,features:{search:!0,columnVisibility:!0,bulkActions:!0},search:{value:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.Select,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.Select,{value:h,onValueChange:e=>g(e??`all`),options:[{value:`all`,label:`All owners`},{value:`Azamat`,label:`Azamat`},{value:`Madina`,label:`Madina`},{value:`Jasur`,label:`Jasur`}],triggerClassName:`min-w-36`})]}),summary:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`})]}),bulkActions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:()=>void 0}],onRowSelectionChange:e=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;
+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/ui/select/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-select-column.cjs"),c=require("../../../components/data-table/data-table-sortable-header.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`},{invoice:`INV-4824`,customer:`Pixel Union`,owner:`Azamat`,amount:`$17,300`,status:`Paid`,updatedAt:`44m ago`},{invoice:`INV-4825`,customer:`Meridian Labs`,owner:`Madina`,amount:`$2,180`,status:`Review`,updatedAt:`1h ago`},{invoice:`INV-4826`,customer:`Orbit Cloud`,owner:`Jasur`,amount:`$9,040`,status:`Draft`,updatedAt:`3h ago`}];function f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[s.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,title:`Invoices`,description:`Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.`,features:{search:!0,columnVisibility:!0,bulkActions:!0},search:{value:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.Select,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.Select,{value:h,onValueChange:e=>g(e??`all`),options:[{value:`all`,label:`All owners`},{value:`Azamat`,label:`Azamat`},{value:`Madina`,label:`Madina`},{value:`Jasur`,label:`Jasur`}],triggerClassName:`min-w-36`})]}),summary:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`})]}),bulkActions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:()=>void 0}],onRowSelectionChange:e=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;

package/dist/src/showcase/premium/data-table/showcase.js

@@ -4,8 +4,8 @@ import { Select as n } from "../../../components/ui/select/index.js";
 import { createDataTableActionsColumn as r } from "../../../components/data-table/data-table-actions-column.js";
 import { DataTableColumnVisibilityMenu as i } from "../../../components/data-table/data-table-column-visibility-menu.js";
 import { DataTable as a } from "../../../components/data-table/data-table.js";
-import { DataTableSortableHeader as o } from "../../../components/data-table/data-table-sortable-header.js";
-import { createDataTableSelectColumn as s } from "../../../components/data-table/data-table-select-column.js";
+import { createDataTableSelectColumn as o } from "../../../components/data-table/data-table-select-column.js";
+import { DataTableSortableHeader as s } from "../../../components/data-table/data-table-sortable-header.js";
 import * as c from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/showcase/premium/data-table/showcase.tsx
@@ -64,17 +64,17 @@ function p() {
 		let t = p.trim().toLowerCase(), n = !t || `${e.invoice} ${e.customer} ${e.owner} ${e.amount}`.toLowerCase().includes(t), r = h === "all" || e.status === h, i = _ === "all" || e.owner === _;
 		return n && r && i;
 	}), S = Object.values(y).filter(Boolean).length, C = c.useMemo(() => [
-		s(),
+		o(),
 		{
 			accessorKey: "invoice",
-			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+			header: ({ column: e }) => /* @__PURE__ */ u(s, {
 				column: e,
 				children: "Invoice"
 			})
 		},
 		{
 			accessorKey: "customer",
-			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+			header: ({ column: e }) => /* @__PURE__ */ u(s, {
 				column: e,
 				children: "Customer"
 			})
@@ -89,7 +89,7 @@ function p() {
 		},
 		{
 			accessorKey: "amount",
-			header: ({ column: e }) => /* @__PURE__ */ u(o, {
+			header: ({ column: e }) => /* @__PURE__ */ u(s, {
 				column: e,
 				children: "Amount"
 			})