tembro 2.0.6 → 2.1.0

package/dist/showcase/premium/right-click-menu/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/right-click-menu/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s(){let[e,s]=i.useState(`Rename`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Context actions`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Right click menu should hide secondary actions until they are needed`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for workspace-style surfaces where always-visible row actions would create too much noise.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Pointer workflow`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact menu`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Interactive surface`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.RightClickMenu,{items:[{label:`Rename`,onSelect:()=>s(`Rename`)},{label:`Duplicate`,onSelect:()=>s(`Duplicate`)},{label:`Archive`,onSelect:()=>s(`Archive`)}],children:(0,a.jsx)(`div`,{className:`rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted`,children:`Right click anywhere in this area`})})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last action`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:e}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Keep a visible fallback action path for keyboard and touch users.`})]})]})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Selected action: `,e]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[`Rename`,`Duplicate`,`Archive`].map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>s(n),children:n},n))})]})})]})}exports.RightClickMenuShowcase=s;
+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/right-click-menu/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function c(){let[e,c]=i.useState(`Rename`);return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[(0,o.jsxs)(`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:`Context actions`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Right click menu should hide secondary actions until they are needed`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for workspace-style surfaces where always-visible row actions would create too much noise.`})]}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Pointer workflow`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact menu`})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,o.jsxs)(`div`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Interactive surface`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.RightClickMenu,{items:[{label:`Rename`,icon:(0,o.jsx)(a.PencilIcon,{}),shortcut:`R`,onSelect:()=>c(`Rename`)},{label:`Duplicate`,icon:(0,o.jsx)(a.CopyIcon,{}),shortcut:`D`,onSelect:()=>c(`Duplicate`)},{label:`Archive`,icon:(0,o.jsx)(a.ArchiveIcon,{}),onSelect:()=>c(`Archive`)},{label:`Remove`,icon:(0,o.jsx)(a.Trash2Icon,{}),variant:`destructive`,onSelect:()=>c(`Remove`)}],children:(0,o.jsx)(`div`,{className:`rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted`,tabIndex:0,children:`Right click, use Shift+F10, or press the context-menu key in this area`})})})]}),(0,o.jsxs)(`div`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last action`}),(0,o.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:e}),(0,o.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Keep a visible fallback action path for keyboard and touch users.`})]})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,o.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Selected action: `,e]})]}),(0,o.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[`Rename`,`Duplicate`,`Archive`].map(n=>(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:n},n))})]})})]})}exports.RightClickMenuShowcase=c;

package/dist/showcase/premium/right-click-menu/showcase.js

@@ -2,122 +2,135 @@ import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
 import { RightClickMenu as n } from "../../../components/ui/right-click-menu/index.js";
 import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ArchiveIcon as i, CopyIcon as a, PencilIcon as o, Trash2Icon as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/showcase/premium/right-click-menu/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function s() {
-	let [s, c] = r.useState("Rename");
-	return /* @__PURE__ */ a("div", {
+var u = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function d() {
+	let [d, f] = r.useState("Rename");
+	return /* @__PURE__ */ l("div", {
 		className: "space-y-5",
-		children: [/* @__PURE__ */ a("section", {
+		children: [/* @__PURE__ */ l("section", {
 			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-			children: [/* @__PURE__ */ a("div", {
+			children: [/* @__PURE__ */ l("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ c("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Context actions"
 						}),
-						/* @__PURE__ */ i("h3", {
+						/* @__PURE__ */ c("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "Right click menu should hide secondary actions until they are needed"
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ c("p", {
 							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 							children: "Use it for workspace-style surfaces where always-visible row actions would create too much noise."
 						})
 					]
-				}), /* @__PURE__ */ a("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "flex flex-wrap gap-2",
 					children: [
-						/* @__PURE__ */ i(t, {
+						/* @__PURE__ */ c(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Secondary actions"
 						}),
-						/* @__PURE__ */ i(t, {
+						/* @__PURE__ */ c(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Pointer workflow"
 						}),
-						/* @__PURE__ */ i(t, {
+						/* @__PURE__ */ c(t, {
 							variant: "outline",
 							className: "rounded-full",
 							children: "Compact menu"
 						})
 					]
 				})]
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ l("div", {
 				className: "mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]",
-				children: [/* @__PURE__ */ a("div", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
+				children: [/* @__PURE__ */ l("div", {
+					className: u,
+					children: [/* @__PURE__ */ c("p", {
 						className: "text-sm font-medium aui-text-muted",
 						children: "Interactive surface"
-					}), /* @__PURE__ */ i("div", {
+					}), /* @__PURE__ */ c("div", {
 						className: "mt-3",
-						children: /* @__PURE__ */ i(n, {
+						children: /* @__PURE__ */ c(n, {
 							items: [
 								{
 									label: "Rename",
-									onSelect: () => c("Rename")
+									icon: /* @__PURE__ */ c(o, {}),
+									shortcut: "R",
+									onSelect: () => f("Rename")
 								},
 								{
 									label: "Duplicate",
-									onSelect: () => c("Duplicate")
+									icon: /* @__PURE__ */ c(a, {}),
+									shortcut: "D",
+									onSelect: () => f("Duplicate")
 								},
 								{
 									label: "Archive",
-									onSelect: () => c("Archive")
+									icon: /* @__PURE__ */ c(i, {}),
+									onSelect: () => f("Archive")
+								},
+								{
+									label: "Remove",
+									icon: /* @__PURE__ */ c(s, {}),
+									variant: "destructive",
+									onSelect: () => f("Remove")
 								}
 							],
-							children: /* @__PURE__ */ i("div", {
+							children: /* @__PURE__ */ c("div", {
 								className: "rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted",
-								children: "Right click anywhere in this area"
+								tabIndex: 0,
+								children: "Right click, use Shift+F10, or press the context-menu key in this area"
 							})
 						})
 					})]
-				}), /* @__PURE__ */ a("div", {
-					className: o,
+				}), /* @__PURE__ */ l("div", {
+					className: u,
 					children: [
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ c("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Last action"
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ c("p", {
 							className: "mt-3 text-lg font-semibold aui-text-strong",
-							children: s
+							children: d
 						}),
-						/* @__PURE__ */ i("p", {
+						/* @__PURE__ */ c("p", {
 							className: "mt-2 text-sm leading-6 aui-text-muted",
 							children: "Keep a visible fallback action path for keyboard and touch users."
 						})
 					]
 				})]
 			})]
-		}), /* @__PURE__ */ i("section", {
-			className: o,
-			children: /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ c("section", {
+			className: u,
+			children: /* @__PURE__ */ l("div", {
 				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
-				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+				children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
 					children: "Live state"
-				}), /* @__PURE__ */ a("h4", {
+				}), /* @__PURE__ */ l("h4", {
 					className: "mt-2 text-lg font-semibold aui-text-strong",
-					children: ["Selected action: ", s]
-				})] }), /* @__PURE__ */ i("div", {
+					children: ["Selected action: ", d]
+				})] }), /* @__PURE__ */ c("div", {
 					className: "flex flex-wrap gap-2",
 					children: [
 						"Rename",
 						"Duplicate",
 						"Archive"
-					].map((t) => /* @__PURE__ */ i(e, {
+					].map((t) => /* @__PURE__ */ c(e, {
 						type: "button",
 						size: "sm",
-						variant: s === t ? "default" : "secondary",
-						onClick: () => c(t),
+						variant: d === t ? "default" : "secondary",
+						onClick: () => f(t),
 						children: t
 					}, t))
 				})]
@@ -126,4 +139,4 @@ function s() {
 	});
 }
 //#endregion
-export { s as RightClickMenuShowcase };
+export { d as RightClickMenuShowcase };

package/dist/showcase/premium/segmented-control/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/ui/segmented-control/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=r.useState(`board`),[c,l]=r.useState(`comfortable`);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SegmentedControl is the inline mode switch`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Workspace view switch`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The primary use-case is a visible view toggle for board, list, or table layouts.`}),(0,a.jsx)(`div`,{className:`mt-5`,children:(0,a.jsx)(n.SegmentedControl,{value:e,onValueChange:s,options:[{value:`board`,label:`Board`,icon:(0,a.jsx)(i.LayoutGridIcon,{className:`size-4`})},{value:`list`,label:`List`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})},{value:`table`,label:`Table`,icon:(0,a.jsx)(i.Table2Icon,{className:`size-4`})}]})})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Current surface`}),(0,a.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`Controlled selection is ready for route state or URL sync.`})]}),(0,a.jsx)(t.Badge,{variant:`secondary`,children:e})]}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Prefer segmented controls for 2 to 4 options that should stay visible together.`}),(0,a.jsx)(`p`,{children:`Once the list grows larger or becomes searchable, move to Select instead.`})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Density and size tokens`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Compact admin pages often need a second segmented row for density or behavior mode.`}),(0,a.jsxs)(`div`,{className:`mt-5 space-y-4`,children:[(0,a.jsx)(n.SegmentedControl,{size:`sm`,value:c,onValueChange:l,options:[{value:`compact`,label:`Compact`},{value:`comfortable`,label:`Comfortable`},{value:`spacious`,label:`Spacious`}]}),(0,a.jsx)(n.SegmentedControl,{size:`lg`,fullWidth:!0,defaultValue:`filters`,options:[{value:`filters`,label:`Filters`,icon:(0,a.jsx)(i.SlidersHorizontalIcon,{className:`size-4`})},{value:`views`,label:`Views`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})}]})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Use one sentence labels. Long phrases make the rail heavy and unstable.`}),(0,a.jsx)(`p`,{children:`Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row.`}),(0,a.jsx)(`p`,{children:`If a segment triggers navigation instead of state, route tabs may be the better primitive.`})]})]})]})})]})}exports.SegmentedControlShowcase=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/ui/segmented-control/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=r.useState(`board`),[c,l]=r.useState(`comfortable`);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SegmentedControl is the inline mode switch`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Workspace view switch`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The primary use-case is a visible view toggle for board, list, or table layouts.`}),(0,a.jsx)(`div`,{className:`mt-5`,children:(0,a.jsx)(n.SegmentedControl,{value:e,onValueChange:s,options:[{value:`board`,label:`Board`,icon:(0,a.jsx)(i.LayoutGridIcon,{className:`size-4`})},{value:`list`,label:`List`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})},{value:`table`,label:`Table`,icon:(0,a.jsx)(i.Table2Icon,{className:`size-4`})}]})})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Current surface`}),(0,a.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`Controlled selection is ready for route state or URL sync.`})]}),(0,a.jsx)(t.Badge,{variant:`secondary`,children:e})]}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Prefer segmented controls for 2 to 4 options that should stay visible together.`}),(0,a.jsx)(`p`,{children:`Once the list grows larger or becomes searchable, move to Select instead.`})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Density and size tokens`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Compact admin pages often need a second segmented row for density or behavior mode.`}),(0,a.jsxs)(`div`,{className:`mt-5 space-y-4`,children:[(0,a.jsx)(n.SegmentedControl,{size:`sm`,value:c,onValueChange:l,options:[{value:`compact`,label:`Compact`},{value:`comfortable`,label:`Comfortable`},{value:`spacious`,label:`Spacious`}]}),(0,a.jsx)(n.SegmentedControl,{size:`lg`,fullWidth:!0,equalWidth:!0,defaultValue:`filters`,options:[{value:`filters`,label:`Filters`,icon:(0,a.jsx)(i.SlidersHorizontalIcon,{className:`size-4`})},{value:`views`,label:`Views`,icon:(0,a.jsx)(i.Rows3Icon,{className:`size-4`})}]})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Use one sentence labels. Long phrases make the rail heavy and unstable.`}),(0,a.jsx)(`p`,{children:`Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row.`}),(0,a.jsx)(`p`,{children:`If a segment triggers navigation instead of state, route tabs may be the better primitive.`})]})]})]})})]})}exports.SegmentedControlShowcase=s;

package/dist/showcase/premium/segmented-control/showcase.js

@@ -121,6 +121,7 @@ function u() {
 							}), /* @__PURE__ */ s(t, {
 								size: "lg",
 								fullWidth: !0,
+								equalWidth: !0,
 								defaultValue: "filters",
 								options: [{
 									value: "filters",

package/dist/showcase/premium/select/data.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Plan picker`,options:[{value:`starter`,label:`Starter`},{value:`growth`,label:`Growth`},{value:`enterprise`,label:`Enterprise`}]},{title:`Status filter`,size:`sm`,options:[{value:`active`,label:`Active`},{value:`review`,label:`Review`},{value:`draft`,label:`Draft`}]}];exports.selectDemoGroups=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Plan picker`,options:[{value:`starter`,label:`Starter`},{value:`growth`,label:`Growth`,description:`25 seats and shared support`},{value:`enterprise`,label:`Enterprise`,description:`Unlimited seats and priority support`}]},{title:`Status filter`,size:`sm`,options:[{value:`active`,label:`Active`},{value:`review`,label:`Review`},{value:`draft`,label:`Draft`}]},{title:`Grouped workspace routing`,options:[{value:`north`,label:`North Region`,description:`Sales operations`,keywords:[`sales`]},{value:`south`,label:`South Region`,description:`Support queue`,keywords:[`support`]},{value:`billing`,label:`Billing Desk`,description:`Finance team`,keywords:[`finance`]},{value:`archive`,label:`Archive`,description:`Read-only records`,disabled:!0,keywords:[`disabled`]}]}];exports.selectDemoGroups=e;

package/dist/showcase/premium/select/data.js

@@ -1,37 +1,72 @@
 //#region src/showcase/premium/select/data.ts
-var e = [{
-	title: "Plan picker",
-	options: [
-		{
-			value: "starter",
-			label: "Starter"
-		},
-		{
-			value: "growth",
-			label: "Growth"
-		},
-		{
-			value: "enterprise",
-			label: "Enterprise"
-		}
-	]
-}, {
-	title: "Status filter",
-	size: "sm",
-	options: [
-		{
-			value: "active",
-			label: "Active"
-		},
-		{
-			value: "review",
-			label: "Review"
-		},
-		{
-			value: "draft",
-			label: "Draft"
-		}
-	]
-}];
+var e = [
+	{
+		title: "Plan picker",
+		options: [
+			{
+				value: "starter",
+				label: "Starter"
+			},
+			{
+				value: "growth",
+				label: "Growth",
+				description: "25 seats and shared support"
+			},
+			{
+				value: "enterprise",
+				label: "Enterprise",
+				description: "Unlimited seats and priority support"
+			}
+		]
+	},
+	{
+		title: "Status filter",
+		size: "sm",
+		options: [
+			{
+				value: "active",
+				label: "Active"
+			},
+			{
+				value: "review",
+				label: "Review"
+			},
+			{
+				value: "draft",
+				label: "Draft"
+			}
+		]
+	},
+	{
+		title: "Grouped workspace routing",
+		options: [
+			{
+				value: "north",
+				label: "North Region",
+				description: "Sales operations",
+				keywords: ["sales"]
+			},
+			{
+				value: "south",
+				label: "South Region",
+				description: "Support queue",
+				keywords: ["support"]
+			},
+			{
+				value: "billing",
+				label: "Billing Desk",
+				description: "Finance team",
+				keywords: ["finance"]
+			},
+			{
+				value: "archive",
+				label: "Archive",
+				description: "Read-only records",
+				disabled: !0,
+				keywords: ["disabled"]
+			}
+		]
+	}
+];
 //#endregion
 export { e as selectDemoGroups };

package/dist/showcase/premium/select/mock.cjs

@@ -1,11 +1,24 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Select } from "tembro"
 
-const planOptions = [
-  { value: "starter", label: "Starter" },
-  { value: "growth", label: "Growth" },
-  { value: "enterprise", label: "Enterprise" },
+const planGroups = [
+  {
+    label: "Plans",
+    options: [
+      { value: "starter", label: "Starter" },
+      { value: "growth", label: "Growth", description: "25 seats" },
+      { value: "enterprise", label: "Enterprise", description: "Priority support" },
+    ],
+  },
 ]
 
 export function Example() {
-  return <Select defaultValue="starter" options={planOptions} />
-}`,cliCommand:`npx tembro add select`,highlights:[`Primary selection surface`,`Controlled selection`,`Searchable local flow`,`Compact trigger options`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`dashboard-starter`],scenarios:[{title:`Plan picker`,description:`Switch between starter, growth and enterprise plans.`},{title:`Status filter`,description:`Use select inside dashboards and reporting toolbars.`},{title:`Compact trigger`,description:`Render small controls in dense admin layouts.`},{title:`Grouped options`,description:`Present structured choices without overwhelming the form.`}],capabilityNotes:[`Start here for most static single-choice flows before reaching for helper members.`,`Supports controlled and uncontrolled selected values plus searchable local filtering.`,`Includes trigger sizing for compact or default density layouts.`,`AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.`]};exports.selectMock=e;
+  return (
+    <Select
+      defaultValue="starter"
+      groups={planGroups}
+      searchable
+      clearable
+      emptyMessage="No plan matched"
+    />
+  )
+}`,cliCommand:`npx tembro add select`,highlights:[`Primary selection surface`,`Controlled selection`,`Searchable local flow`,`Grouped option support`,`Compact trigger options`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`dashboard-starter`],scenarios:[{title:`Plan picker`,description:`Switch between starter, growth and enterprise plans.`},{title:`Status filter`,description:`Use select inside dashboards and reporting toolbars.`},{title:`Compact trigger`,description:`Render small controls in dense admin layouts.`},{title:`Grouped options`,description:`Present structured choices without overwhelming the form.`}],capabilityNotes:[`Start here for most static single-choice flows before reaching for helper members.`,`Supports controlled and uncontrolled selected values, grouped options, clearable state, and searchable local filtering.`,`Includes trigger sizing for compact or default density layouts.`,`AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.`]};exports.selectMock=e;

package/dist/showcase/premium/select/mock.js

@@ -1,11 +1,12 @@
 //#region src/showcase/premium/select/mock.ts
 var e = {
-	code: "import { Select } from \"tembro\"\n\nconst planOptions = [\n  { value: \"starter\", label: \"Starter\" },\n  { value: \"growth\", label: \"Growth\" },\n  { value: \"enterprise\", label: \"Enterprise\" },\n]\n\nexport function Example() {\n  return <Select defaultValue=\"starter\" options={planOptions} />\n}",
+	code: "import { Select } from \"tembro\"\n\nconst planGroups = [\n  {\n    label: \"Plans\",\n    options: [\n      { value: \"starter\", label: \"Starter\" },\n      { value: \"growth\", label: \"Growth\", description: \"25 seats\" },\n      { value: \"enterprise\", label: \"Enterprise\", description: \"Priority support\" },\n    ],\n  },\n]\n\nexport function Example() {\n  return (\n    <Select\n      defaultValue=\"starter\"\n      groups={planGroups}\n      searchable\n      clearable\n      emptyMessage=\"No plan matched\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add select",
 	highlights: [
 		"Primary selection surface",
 		"Controlled selection",
 		"Searchable local flow",
+		"Grouped option support",
 		"Compact trigger options"
 	],
 	relatedBlockSlugs: [
@@ -33,7 +34,7 @@ var e = {
 	],
 	capabilityNotes: [
 		"Start here for most static single-choice flows before reaching for helper members.",
-		"Supports controlled and uncontrolled selected values plus searchable local filtering.",
+		"Supports controlled and uncontrolled selected values, grouped options, clearable state, and searchable local filtering.",
 		"Includes trigger sizing for compact or default density layouts.",
 		"AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points."
 	]

package/dist/showcase/premium/select/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("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=e.selectValue??l[0].value,f=l.find(e=>e.value===d)??l[0],p=l[1]??l[0],[m,h]=a.useState(`plan`),g=f.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:f.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:m})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:m===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:m===`plan`?`default`:`outline`,onClick:()=>h(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:m===`density`?`default`:`outline`,onClick:()=>h(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:m===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:m===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:m===`plan`?(0,o.jsx)(r.Select,{value:d,onValueChange:e=>c({selectValue:e??l[0].value}),options:l,triggerClassName:`w-full`}):(0,o.jsx)(r.Select,{defaultValue:u[0].value,options:u,size:`sm`,triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:g.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:f.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:f.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:p.value}),children:[`Choose `,p.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]})]})]})})]})}exports.SelectShowcase=c;
+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("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=i.selectDemoGroups[2].options,f=e.selectValue??l[0].value,p=l.find(e=>e.value===f)??l[0],m=l[1]??l[0],[h,g]=a.useState(`plan`),[_,v]=a.useState(`north`),y=p.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:p.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:p.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:h})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:h===`plan`?`default`:`outline`,onClick:()=>g(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:h===`density`?`default`:`outline`,onClick:()=>g(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:h===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:h===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:h===`plan`?(0,o.jsx)(r.Select,{value:f,onValueChange:e=>c({selectValue:e??l[0].value}),options:l,triggerClassName:`w-full`}):(0,o.jsx)(r.Select,{defaultValue:u[0].value,options:u,size:`sm`,triggerClassName:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped searchable select`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{value:_,onValueChange:e=>v(e??`north`),searchable:!0,clearable:!0,placeholder:`Choose workspace`,emptyMessage:`No workspace matched`,groups:[{label:`Regions`,options:d.slice(0,2)},{label:`Operations`,options:d.slice(2)}],triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:y.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:p.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:p.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:m.value}),children:[`Choose `,m.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]})]})]})})]})}exports.SelectShowcase=c;

package/dist/showcase/premium/select/showcase.js

@@ -7,11 +7,11 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/select/showcase.tsx
 var s = "border-t border-[color:var(--aui-divider)] py-6";
 function c({ state: c, setState: l }) {
-	let u = r[0].options, d = r[1].options, f = c.selectValue ?? u[0].value, p = u.find((e) => e.value === f) ?? u[0], m = u[1] ?? u[0], [h, g] = i.useState("plan"), _ = p.value === "enterprise" ? [
+	let u = r[0].options, d = r[1].options, f = r[2].options, p = c.selectValue ?? u[0].value, m = u.find((e) => e.value === p) ?? u[0], h = u[1] ?? u[0], [g, _] = i.useState("plan"), [v, y] = i.useState("north"), b = m.value === "enterprise" ? [
 		["Seats", "Unlimited"],
 		["Support", "Dedicated"],
 		["SLA", "Priority"]
-	] : p.value === "growth" ? [
+	] : m.value === "growth" ? [
 		["Seats", "25"],
 		["Support", "Shared"],
 		["SLA", "Same day"]
@@ -52,7 +52,7 @@ function c({ state: c, setState: l }) {
 								children: "Choice"
 							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: p.label
+								children: m.label
 							})]
 						}),
 						/* @__PURE__ */ o("div", {
@@ -62,7 +62,7 @@ function c({ state: c, setState: l }) {
 								children: "Mode"
 							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold capitalize aui-text-strong",
-								children: h
+								children: g
 							})]
 						}),
 						/* @__PURE__ */ o("div", {
@@ -72,7 +72,7 @@ function c({ state: c, setState: l }) {
 								children: "Options"
 							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: h === "plan" ? u.length : d.length
+								children: g === "plan" ? u.length : d.length
 							})]
 						})
 					]
@@ -81,13 +81,13 @@ function c({ state: c, setState: l }) {
 				className: "mt-6 flex flex-wrap gap-2",
 				children: [/* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: h === "plan" ? "default" : "outline",
-					onClick: () => g("plan"),
+					variant: g === "plan" ? "default" : "outline",
+					onClick: () => _("plan"),
 					children: "Default trigger"
 				}), /* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: h === "density" ? "default" : "outline",
-					onClick: () => g("density"),
+					variant: g === "density" ? "default" : "outline",
+					onClick: () => _("density"),
 					children: "Compact trigger"
 				})]
 			})]
@@ -103,17 +103,17 @@ function c({ state: c, setState: l }) {
 							children: "Primary select"
 						}), /* @__PURE__ */ a("h4", {
 							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-							children: h === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
+							children: g === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
 						})] }),
 						/* @__PURE__ */ o("div", {
 							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
 							children: [/* @__PURE__ */ a("p", {
 								className: "text-sm font-medium aui-text-muted",
-								children: h === "plan" ? "Workspace plan" : "Toolbar density"
+								children: g === "plan" ? "Workspace plan" : "Toolbar density"
 							}), /* @__PURE__ */ a("div", {
 								className: "mt-3",
-								children: h === "plan" ? /* @__PURE__ */ a(n, {
-									value: f,
+								children: g === "plan" ? /* @__PURE__ */ a(n, {
+									value: p,
 									onValueChange: (e) => l({ selectValue: e ?? u[0].value }),
 									options: u,
 									triggerClassName: "w-full"
@@ -125,9 +125,34 @@ function c({ state: c, setState: l }) {
 								})
 							})]
 						}),
+						/* @__PURE__ */ o("div", {
+							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
+							children: [/* @__PURE__ */ a("p", {
+								className: "text-sm font-medium aui-text-muted",
+								children: "Grouped searchable select"
+							}), /* @__PURE__ */ a("div", {
+								className: "mt-3",
+								children: /* @__PURE__ */ a(n, {
+									value: v,
+									onValueChange: (e) => y(e ?? "north"),
+									searchable: !0,
+									clearable: !0,
+									placeholder: "Choose workspace",
+									emptyMessage: "No workspace matched",
+									groups: [{
+										label: "Regions",
+										options: f.slice(0, 2)
+									}, {
+										label: "Operations",
+										options: f.slice(2)
+									}],
+									triggerClassName: "w-full"
+								})
+							})]
+						}),
 						/* @__PURE__ */ a("div", {
 							className: "grid gap-3 sm:grid-cols-3",
-							children: _.map(([e, t]) => /* @__PURE__ */ o("div", {
+							children: b.map(([e, t]) => /* @__PURE__ */ o("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
 								children: [/* @__PURE__ */ a("p", {
 									className: "text-xs aui-text-muted",
@@ -149,11 +174,11 @@ function c({ state: c, setState: l }) {
 								children: "Controlled result"
 							}), /* @__PURE__ */ a("h4", {
 								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-								children: p.label
+								children: m.label
 							})] }), /* @__PURE__ */ a(t, {
 								variant: "outline",
 								className: "rounded-full",
-								children: p.value
+								children: m.value
 							})]
 						}),
 						/* @__PURE__ */ a("div", {
@@ -172,8 +197,8 @@ function c({ state: c, setState: l }) {
 							children: [/* @__PURE__ */ o(e, {
 								type: "button",
 								size: "sm",
-								onClick: () => l({ selectValue: m.value }),
-								children: ["Choose ", m.label]
+								onClick: () => l({ selectValue: h.value }),
+								children: ["Choose ", h.label]
 							}), /* @__PURE__ */ a(e, {
 								type: "button",
 								size: "sm",

package/dist/showcase/premium/select/types.d.ts

@@ -1,6 +1,9 @@
 export type SelectDemoOption = {
     value: string;
     label: string;
+    description?: string;
+    disabled?: boolean;
+    keywords?: string[];
 };
 export type SelectDemoGroup = {
     title: string;

package/dist/showcase/premium/statistic/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/statistic.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`;function i(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Statistic is the KPI surface, not a generic card clone`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(t.StatisticGrid,{columns:3,children:[(0,n.jsx)(t.StatisticCard,{label:`Revenue`,value:`$24.8k`,change:`+12.4%`,trend:`up`,description:`vs last 30 days`}),(0,n.jsx)(t.StatisticCard,{label:`Errors`,value:`14`,change:`-3.1%`,trend:`down`,description:`production incidents`}),(0,n.jsx)(t.StatisticCard,{label:`Adoption`,value:`86%`,description:`workspace activation rate`,action:(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Live`})})]})}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,n.jsx)(t.Statistic,{label:`Publish latency`,value:`1.8s`,suffix:`avg`,change:`-0.4s`,trend:`down`,description:`from the previous release window`})}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,n.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,n.jsx)(`p`,{children:`Keep labels short and units clear. Users should understand the value before reading the description.`}),(0,n.jsx)(`p`,{children:`Trend color should reinforce meaning, not carry the whole message alone.`})]})]})]})})]})}exports.StatisticShowcase=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/statistic.cjs"),n=require("../../../components/display/trend-card.cjs"),r=require("../../../components/charts/progress-ring.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsxs)(`section`,{className:`pb-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Statistic is the KPI surface, not a generic card clone`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.`})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(t.StatisticGrid,{columns:3,children:[(0,i.jsx)(t.StatisticCard,{label:`Revenue`,value:`$24.8k`,change:`+12.4%`,trend:`up`,description:`vs last 30 days`}),(0,i.jsx)(t.StatisticCard,{label:`Errors`,value:`14`,change:`-3.1%`,trend:`down`,description:`production incidents`}),(0,i.jsx)(t.StatisticCard,{label:`Adoption`,value:`86%`,description:`workspace activation rate`,action:(0,i.jsx)(e.Badge,{variant:`secondary`,children:`Live`})})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,i.jsx)(t.Statistic,{label:`Publish latency`,value:`1.8s`,suffix:`avg`,change:`-0.4s`,trend:`down`,description:`from the previous release window`})}),(0,i.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,i.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Keep labels short and units clear. Users should understand the value before reading the description.`}),(0,i.jsx)(`p`,{children:`Trend color should reinforce meaning, not carry the whole message alone.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_240px]`,children:[(0,i.jsx)(n.TrendCard,{title:`Release velocity`,value:`24`,change:`+3`,trend:`up`,description:`completed this sprint`,sparkline:[8,10,9,14,18,19,24]}),(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:(0,i.jsx)(r.ProgressRing,{value:76,label:`76%`,description:`coverage`,tone:`success`})})]})})]})}exports.StatisticShowcase=o;