tembro 2.0.5 → 2.1.0

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

@@ -1,17 +1,17 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../../components/ui/select/index.js";
-import { selectDemoGroups as s } from "./data.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Select as n } from "../../../components/ui/select/index.js";
+import { selectDemoGroups as r } from "./data.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/select/showcase.tsx
-var d = "border-t border-[color:var(--aui-divider)] py-6";
-function f({ state: f, setState: p }) {
-	let m = s[0].options, h = s[1].options, g = f.selectValue ?? m[0].value, _ = m.find((e) => e.value === g) ?? m[0], v = m[1] ?? m[0], [y, b] = c.useState("plan"), x = _.value === "enterprise" ? [
+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 = 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"]
-	] : _.value === "growth" ? [
+	] : m.value === "growth" ? [
 		["Seats", "25"],
 		["Support", "Shared"],
 		["SLA", "Same day"]
@@ -20,175 +20,190 @@ function f({ state: f, setState: p }) {
 		["Support", "Email"],
 		["SLA", "Standard"]
 	];
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ o("div", {
 		className: "space-y-0",
-		children: [/* @__PURE__ */ u("section", {
+		children: [/* @__PURE__ */ o("section", {
 			className: "pb-6",
-			children: [/* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ a("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Selection"
 						}),
-						/* @__PURE__ */ l("h3", {
+						/* @__PURE__ */ a("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "One clean select surface first"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ a("p", {
 							className: "mt-3 text-sm leading-6 aui-text-muted",
 							children: "Show the default trigger, controlled value, and summary update in one place."
 						})
 					]
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Choice"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: _.label
+								children: m.label
 							})]
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Mode"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold capitalize aui-text-strong",
-								children: y
+								children: g
 							})]
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Options"
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ a("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: y === "plan" ? m.length : h.length
+								children: g === "plan" ? u.length : d.length
 							})]
 						})
 					]
 				})]
-			}), /* @__PURE__ */ u("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "mt-6 flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ l(e, {
+				children: [/* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: y === "plan" ? "default" : "outline",
-					onClick: () => b("plan"),
+					variant: g === "plan" ? "default" : "outline",
+					onClick: () => _("plan"),
 					children: "Default trigger"
-				}), /* @__PURE__ */ l(e, {
+				}), /* @__PURE__ */ a(e, {
 					size: "sm",
-					variant: y === "density" ? "default" : "outline",
-					onClick: () => b("density"),
+					variant: g === "density" ? "default" : "outline",
+					onClick: () => _("density"),
 					children: "Compact trigger"
 				})]
 			})]
-		}), /* @__PURE__ */ l("section", {
-			className: d,
-			children: /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ a("section", {
+			className: s,
+			children: /* @__PURE__ */ o("div", {
 				className: "grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]",
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 							children: "Primary select"
-						}), /* @__PURE__ */ l("h4", {
+						}), /* @__PURE__ */ a("h4", {
 							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-							children: y === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
+							children: g === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"
 						})] }),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
-							children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ a("p", {
 								className: "text-sm font-medium aui-text-muted",
-								children: y === "plan" ? "Workspace plan" : "Toolbar density"
-							}), /* @__PURE__ */ l("div", {
+								children: g === "plan" ? "Workspace plan" : "Toolbar density"
+							}), /* @__PURE__ */ a("div", {
 								className: "mt-3",
-								children: y === "plan" ? /* @__PURE__ */ u(n, {
-									value: g,
-									onValueChange: (e) => p({ selectValue: e ?? m[0].value }),
-									children: [/* @__PURE__ */ l(a, {
-										className: "w-full",
-										children: /* @__PURE__ */ l(o, {})
-									}), /* @__PURE__ */ l(r, { children: m.map((e) => /* @__PURE__ */ l(i, {
-										value: e.value,
-										children: e.label
-									}, e.value)) })]
-								}) : /* @__PURE__ */ u(n, {
-									defaultValue: h[0].value,
-									children: [/* @__PURE__ */ l(a, {
-										size: "sm",
-										className: "w-full",
-										children: /* @__PURE__ */ l(o, {})
-									}), /* @__PURE__ */ l(r, { children: h.map((e) => /* @__PURE__ */ l(i, {
-										value: e.value,
-										children: e.label
-									}, e.value)) })]
+								children: g === "plan" ? /* @__PURE__ */ a(n, {
+									value: p,
+									onValueChange: (e) => l({ selectValue: e ?? u[0].value }),
+									options: u,
+									triggerClassName: "w-full"
+								}) : /* @__PURE__ */ a(n, {
+									defaultValue: d[0].value,
+									options: d,
+									size: "sm",
+									triggerClassName: "w-full"
 								})
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__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: x.map(([e, t]) => /* @__PURE__ */ u("div", {
+							children: b.map(([e, t]) => /* @__PURE__ */ o("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ l("p", {
+								children: [/* @__PURE__ */ a("p", {
 									className: "text-xs aui-text-muted",
 									children: e
-								}), /* @__PURE__ */ l("p", {
+								}), /* @__PURE__ */ a("p", {
 									className: "mt-1 text-sm font-medium aui-text-strong",
 									children: t
 								})]
 							}, e))
 						})
 					]
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "flex items-center justify-between gap-3",
-							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Controlled result"
-							}), /* @__PURE__ */ l("h4", {
+							}), /* @__PURE__ */ a("h4", {
 								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
-								children: _.label
-							})] }), /* @__PURE__ */ l(t, {
+								children: m.label
+							})] }), /* @__PURE__ */ a(t, {
 								variant: "outline",
 								className: "rounded-full",
-								children: _.value
+								children: m.value
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ a("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) => /* @__PURE__ */ l("div", {
+							].map((e) => /* @__PURE__ */ a("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))
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ o("div", {
 							className: "flex flex-wrap gap-2",
-							children: [/* @__PURE__ */ u(e, {
+							children: [/* @__PURE__ */ o(e, {
 								type: "button",
 								size: "sm",
-								onClick: () => p({ selectValue: v.value }),
-								children: ["Choose ", v.label]
-							}), /* @__PURE__ */ l(e, {
+								onClick: () => l({ selectValue: h.value }),
+								children: ["Choose ", h.label]
+							}), /* @__PURE__ */ a(e, {
 								type: "button",
 								size: "sm",
 								variant: "secondary",
-								onClick: () => p({ selectValue: m[0].value }),
+								onClick: () => l({ selectValue: u[0].value }),
 								children: "Reset"
 							})]
 						})
@@ -199,4 +214,4 @@ function f({ state: f, setState: p }) {
 	});
 }
 //#endregion
-export { f as SelectShowcase };
+export { c as SelectShowcase };

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;

package/dist/showcase/premium/statistic/showcase.js

@@ -1,53 +1,55 @@
 import { Badge as e } from "../../../components/ui/badge/index.js";
 import { Statistic as t, StatisticCard as n, StatisticGrid as r } from "../../../components/display/statistic.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { TrendCard as i } from "../../../components/display/trend-card.js";
+import { ProgressRing as a } from "../../../components/charts/progress-ring.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/showcase/premium/statistic/showcase.tsx
-var o = "border-t border-[color:var(--aui-divider)] py-6";
-function s() {
-	return /* @__PURE__ */ a("div", {
+var c = "border-t border-[color:var(--aui-divider)] py-6";
+function l() {
+	return /* @__PURE__ */ s("div", {
 		className: "space-y-0",
 		children: [
-			/* @__PURE__ */ a("section", {
+			/* @__PURE__ */ s("section", {
 				className: "pb-6",
 				children: [
-					/* @__PURE__ */ i("p", {
+					/* @__PURE__ */ o("p", {
 						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
 						children: "Installed display primitive"
 					}),
-					/* @__PURE__ */ i("h3", {
+					/* @__PURE__ */ o("h3", {
 						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 						children: "Statistic is the KPI surface, not a generic card clone"
 					}),
-					/* @__PURE__ */ i("p", {
+					/* @__PURE__ */ o("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."
 					})
 				]
 			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ a(r, {
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s(r, {
 					columns: 3,
 					children: [
-						/* @__PURE__ */ i(n, {
+						/* @__PURE__ */ o(n, {
 							label: "Revenue",
 							value: "$24.8k",
 							change: "+12.4%",
 							trend: "up",
 							description: "vs last 30 days"
 						}),
-						/* @__PURE__ */ i(n, {
+						/* @__PURE__ */ o(n, {
 							label: "Errors",
 							value: "14",
 							change: "-3.1%",
 							trend: "down",
 							description: "production incidents"
 						}),
-						/* @__PURE__ */ i(n, {
+						/* @__PURE__ */ o(n, {
 							label: "Adoption",
 							value: "86%",
 							description: "workspace activation rate",
-							action: /* @__PURE__ */ i(e, {
+							action: /* @__PURE__ */ o(e, {
 								variant: "secondary",
 								children: "Live"
 							})
@@ -55,13 +57,13 @@ function s() {
 					]
 				})
 			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s("div", {
 					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
-					children: [/* @__PURE__ */ i("div", {
+					children: [/* @__PURE__ */ o("div", {
 						className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-						children: /* @__PURE__ */ i(t, {
+						children: /* @__PURE__ */ o(t, {
 							label: "Publish latency",
 							value: "1.8s",
 							suffix: "avg",
@@ -69,20 +71,50 @@ function s() {
 							trend: "down",
 							description: "from the previous release window"
 						})
-					}), /* @__PURE__ */ a("div", {
+					}), /* @__PURE__ */ s("div", {
 						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
-						children: [/* @__PURE__ */ i("p", {
+						children: [/* @__PURE__ */ o("p", {
 							className: "text-sm font-semibold aui-text-strong",
 							children: "Guidance"
-						}), /* @__PURE__ */ a("div", {
+						}), /* @__PURE__ */ s("div", {
 							className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
-							children: [/* @__PURE__ */ i("p", { children: "Keep labels short and units clear. Users should understand the value before reading the description." }), /* @__PURE__ */ i("p", { children: "Trend color should reinforce meaning, not carry the whole message alone." })]
+							children: [/* @__PURE__ */ o("p", { children: "Keep labels short and units clear. Users should understand the value before reading the description." }), /* @__PURE__ */ o("p", { children: "Trend color should reinforce meaning, not carry the whole message alone." })]
 						})]
 					})]
 				})
+			}),
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_240px]",
+					children: [/* @__PURE__ */ o(i, {
+						title: "Release velocity",
+						value: "24",
+						change: "+3",
+						trend: "up",
+						description: "completed this sprint",
+						sparkline: [
+							8,
+							10,
+							9,
+							14,
+							18,
+							19,
+							24
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: /* @__PURE__ */ o(a, {
+							value: 76,
+							label: "76%",
+							description: "coverage",
+							tone: "success"
+						})
+					})]
+				})
 			})
 		]
 	});
 }
 //#endregion
-export { s as StatisticShowcase };
+export { l as StatisticShowcase };

package/dist/showcase/premium/switch/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/switch/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Preferences`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Switches should feel like settings`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This pattern is for single on/off preferences. The preview should read like a settings page, not a stack of anonymous toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Settings`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single preference`})]})]}),(0,i.jsx)(`div`,{className:`mt-6 grid gap-3`,children:r.switchDemoRows.map((e,n)=>(0,i.jsxs)(`div`,{className:`${a} flex items-center justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:e.title}),(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:e.description})]}),(0,i.jsx)(t.Switch,{checked:n===0?o.switchOn:e.defaultChecked,onCheckedChange:n===0?e=>s({switchOn:e}):void 0,defaultChecked:n>0?e.defaultChecked:void 0})]},e.title))})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Dark mode sync is `,o.switchOn?`on`:`off`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Switches should show immediate preference feedback without requiring a save button.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({switchOn:!0}),children:`Turn on`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({switchOn:!1}),children:`Turn off`})]})]})})]})}exports.SwitchShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/switch/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Preferences`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Switches should feel like settings`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This pattern is for single on/off preferences. The preview should read like a settings page, not a stack of anonymous toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Settings`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single preference`})]})]}),(0,i.jsx)(`div`,{className:`mt-6 grid gap-3`,children:r.switchDemoRows.map((e,n)=>(0,i.jsx)(`div`,{className:a,children:(0,i.jsx)(t.Switch,{label:e.title,description:e.description,checked:n===0?o.switchOn:e.defaultChecked,onCheckedChange:n===0?e=>s({switchOn:e}):void 0,defaultChecked:n>0?e.defaultChecked:void 0,size:n===0?`lg`:`md`,labelPlacement:`start`,className:`w-full justify-between`})},e.title))})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Dark mode sync is `,o.switchOn?`on`:`off`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Switches should show immediate preference feedback without requiring a save button.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({switchOn:!0}),children:`Turn on`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({switchOn:!1}),children:`Turn off`})]})]}),(0,i.jsxs)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:[(0,i.jsx)(t.Switch,{label:`Sync in progress`,description:`Loading disables the control until the request finishes.`,loading:!0,defaultChecked:!0}),(0,i.jsx)(t.Switch,{label:`Invalid setting`,description:`Error state keeps the same field layout.`,invalid:!0})]})]})]})}exports.SwitchShowcase=o;

package/dist/showcase/premium/switch/showcase.js

@@ -50,24 +50,23 @@ function s({ state: s, setState: c }) {
 				})]
 			}), /* @__PURE__ */ i("div", {
 				className: "mt-6 grid gap-3",
-				children: r.map((e, n) => /* @__PURE__ */ a("div", {
-					className: `${o} flex items-center justify-between gap-4`,
-					children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-						className: "font-medium aui-text-strong",
-						children: e.title
-					}), /* @__PURE__ */ i("p", {
-						className: "text-sm aui-text-muted",
-						children: e.description
-					})] }), /* @__PURE__ */ i(t, {
+				children: r.map((e, n) => /* @__PURE__ */ i("div", {
+					className: o,
+					children: /* @__PURE__ */ i(t, {
+						label: e.title,
+						description: e.description,
 						checked: n === 0 ? s.switchOn : e.defaultChecked,
 						onCheckedChange: n === 0 ? (e) => c({ switchOn: e }) : void 0,
-						defaultChecked: n > 0 ? e.defaultChecked : void 0
-					})]
+						defaultChecked: n > 0 ? e.defaultChecked : void 0,
+						size: n === 0 ? "lg" : "md",
+						labelPlacement: "start",
+						className: "w-full justify-between"
+					})
 				}, e.title))
 			})]
-		}), /* @__PURE__ */ i("section", {
+		}), /* @__PURE__ */ a("section", {
 			className: o,
-			children: /* @__PURE__ */ a("div", {
+			children: [/* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
 				children: [/* @__PURE__ */ a("div", { children: [
 					/* @__PURE__ */ i("p", {
@@ -97,7 +96,19 @@ function s({ state: s, setState: c }) {
 						children: "Turn off"
 					})]
 				})]
-			})
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-5 grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ i(t, {
+					label: "Sync in progress",
+					description: "Loading disables the control until the request finishes.",
+					loading: !0,
+					defaultChecked: !0
+				}), /* @__PURE__ */ i(t, {
+					label: "Invalid setting",
+					description: "Error state keeps the same field layout.",
+					invalid: !0
+				})]
+			})]
 		})]
 	});
 }

package/dist/showcase/premium/tabs/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/tabs/index.cjs"),n=require("./data.cjs");let r=require("react/jsx-runtime");var i=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function a({state:a,setState:o}){let s=n.tabsDemoPanels.find(e=>e.value===a.activeTab);return(0,r.jsxs)(`div`,{className:`space-y-5`,children:[(0,r.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`View switching`}),(0,r.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Tabs should read like page sections`}),(0,r.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`Overview, activity and settings stay separated without turning the screen into a navigation maze.`})]}),(0,r.jsxs)(`section`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,r.jsxs)(`div`,{className:i,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Current tab`}),(0,r.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:s?.label}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The selected view should feel like a real section change, not a tiny state toggle.`})]}),(0,r.jsxs)(`div`,{className:i,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Sections`}),(0,r.jsxs)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:[n.tabsDemoPanels.length,` surfaces`]}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use a small number of high-signal tabs so the layout stays readable.`})]}),(0,r.jsxs)(`div`,{className:i,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Pattern`}),(0,r.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:`Page sections`}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Tabs work best when each panel owns a distinct slice of the workflow.`})]})]}),(0,r.jsx)(`div`,{className:i,children:(0,r.jsxs)(t.Tabs,{value:a.activeTab,onValueChange:e=>o({activeTab:e}),children:[(0,r.jsx)(t.TabsList,{children:n.tabsDemoPanels.map(e=>(0,r.jsx)(t.TabsTrigger,{value:e.value,children:e.label},e.value))}),n.tabsDemoPanels.map(e=>(0,r.jsx)(t.TabsContent,{value:e.value,className:`aui-text-muted mt-4 border-t border-[color:var(--aui-divider)] pt-4 text-sm leading-6`,children:e.content},e.value))]})}),(0,r.jsx)(`section`,{className:i,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,r.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Active tab: `,s?.label]}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Change tabs above or jump directly to a common product section.`})]}),(0,r.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:n.tabsDemoPanels.map(t=>(0,r.jsx)(e.Button,{type:`button`,size:`sm`,variant:a.activeTab===t.value?`default`:`secondary`,onClick:()=>o({activeTab:t.value}),children:t.label},t.value))})]})})]})}exports.TabsShowcase=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/tabs/index.cjs"),n=require("./data.cjs");let r=require("lucide-react"),i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){let c=n.tabsDemoPanels.find(e=>e.value===o.activeTab);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`View switching`}),(0,i.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Tabs should read like page sections`}),(0,i.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`Overview, activity and settings stay separated without turning the screen into a navigation maze.`})]}),(0,i.jsxs)(`section`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Current tab`}),(0,i.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:c?.label}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The selected view should feel like a real section change, not a tiny state toggle.`})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Sections`}),(0,i.jsxs)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:[n.tabsDemoPanels.length,` surfaces`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use a small number of high-signal tabs so the layout stays readable.`})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Pattern`}),(0,i.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:`Page sections`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Tabs work best when each panel owns a distinct slice of the workflow.`})]})]}),(0,i.jsx)(`div`,{className:a,children:(0,i.jsxs)(t.Tabs,{value:o.activeTab,onValueChange:e=>s({activeTab:e}),children:[(0,i.jsx)(t.TabsList,{overflow:`scroll`,children:n.tabsDemoPanels.map(e=>(0,i.jsx)(t.TabsTrigger,{value:e.value,children:e.label},e.value))}),n.tabsDemoPanels.map(e=>(0,i.jsx)(t.TabsContent,{value:e.value,className:`aui-text-muted mt-4 border-t border-[color:var(--aui-divider)] pt-4 text-sm leading-6`,children:e.content},e.value))]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Variants and overflow`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The same primitive covers underline navigation, compact density, icon labels, and long mobile tab rows.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-4`,children:[(0,i.jsx)(t.Tabs,{defaultValue:`activity`,children:(0,i.jsxs)(t.TabsList,{variant:`underline`,overflow:`scroll`,children:[(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`activity`,children:[(0,i.jsx)(r.ActivityIcon,{}),`Activity`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`files`,children:[(0,i.jsx)(r.FileTextIcon,{}),`Files`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`members`,children:[(0,i.jsx)(r.UsersIcon,{}),`Members`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`security`,children:[(0,i.jsx)(r.ShieldIcon,{}),`Security`]}),(0,i.jsxs)(t.TabsTrigger,{variant:`underline`,value:`settings`,children:[(0,i.jsx)(r.SettingsIcon,{}),`Settings`]})]})}),(0,i.jsx)(t.Tabs,{defaultValue:`compact`,children:(0,i.jsxs)(t.TabsList,{variant:`compact`,overflow:`wrap`,children:[(0,i.jsx)(t.TabsTrigger,{variant:`compact`,value:`compact`,children:`Compact`}),(0,i.jsxs)(t.TabsTrigger,{variant:`compact`,value:`alerts`,children:[(0,i.jsx)(r.BellIcon,{}),`Alerts`]}),(0,i.jsx)(t.TabsTrigger,{variant:`compact`,value:`audit`,children:`Audit`})]})}),(0,i.jsxs)(t.Tabs,{defaultValue:`vertical`,orientation:`vertical`,className:`grid gap-3 sm:grid-cols-[180px_1fr]`,children:[(0,i.jsxs)(t.TabsList,{variant:`pills`,overflow:`wrap`,className:`grid`,children:[(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`vertical`,children:`Vertical`}),(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`pills`,children:`Pills`}),(0,i.jsx)(t.TabsTrigger,{variant:`pills`,value:`overflow`,children:`Overflow`})]}),(0,i.jsx)(t.TabsContent,{value:`vertical`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Vertical tabs keep local settings readable when each panel has a larger form.`}),(0,i.jsx)(t.TabsContent,{value:`pills`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Pill tabs carry a stronger selected state for dense dashboards.`}),(0,i.jsx)(t.TabsContent,{value:`overflow`,className:`mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted`,children:`Scroll overflow keeps long labels accessible on small screens.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Active tab: `,c?.label]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Change tabs above or jump directly to a common product section.`})]}),(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:n.tabsDemoPanels.map(t=>(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:o.activeTab===t.value?`default`:`secondary`,onClick:()=>s({activeTab:t.value}),children:t.label},t.value))})]})})]})}exports.TabsShowcase=o;