tembro 2.0.4 → 2.0.6

package/dist/showcase/premium/accordion/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/accordion/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`,o=[{key:`tokens`,title:`Theme tokens stay in one place`,description:`Radius, color and shadow should not be redefined per route.`,content:`Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.`},{key:`surface`,title:`One canonical public surface`,description:`Teach one entry point before helper members.`,content:`Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.`},{key:`demo`,title:`Real demos beat placeholder previews`,description:`Each route should prove the actual component behavior.`,content:`A docs page should show the real installed component with interactive state, not a generic substitute card.`}],s=[{key:`docs`,title:`Docs updated`,description:`Public route and CLI snippet verified`,content:`Component detail page, API notes, and install snippet were reviewed together before release.`},{key:`tokens`,title:`Visual tokens synced`,description:`No stray radius, border, or surface overrides`,content:`The route uses package tokens directly so the result matches what consumers install.`},{key:`qa`,title:`QA preview checked`,description:`Build and interactive preview passed`,content:`The component was verified with type-check and production build before push.`}];function c(){let[e,c]=r.useState(`surface`),[l,u]=r.useState([`docs`]);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 primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Accordion keeps dense guidance readable`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`This route uses the exported accordion surface directly. The page adds only spacing and explanation around it.`})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Documentation flow`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Single-open mode keeps the user focused on one explanation at a time.`}),(0,i.jsx)(n.Accordion,{className:`mt-5`,type:`single`,value:e,onValueChange:c,items:[...o]})]}),(0,i.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Current open item`}),(0,i.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`Controlled state mirrors route-level docs navigation.`})]}),(0,i.jsx)(t.Badge,{variant:`secondary`,children:Array.isArray(e)?e.join(`, `):e||`none`})]}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Use this mode on component detail pages, FAQs, or policy explanations where only one answer should dominate the layout.`}),(0,i.jsx)(`p`,{children:`The trigger keeps title and helper description together, so content stays understandable even before expansion.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Operational checklist`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Multiple-open mode works better when teams compare several readiness items together.`}),(0,i.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:(Array.isArray(l)?l:[]).map(e=>(0,i.jsx)(t.Badge,{variant:`outline`,children:e},e))})]}),(0,i.jsx)(n.Accordion,{className:`xl:mt-8`,type:`multiple`,value:l,onValueChange:u,items:[...s]})]})})]})}exports.AccordionShowcase=c;
+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/accordion/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`,o=[{key:`tokens`,title:`Theme tokens stay in one place`,meta:`P0`,description:`Radius, color and shadow should not be redefined per route.`,content:`Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.`},{key:`surface`,title:`One canonical public surface`,badge:(0,i.jsx)(t.Badge,{variant:`secondary`,children:`Core`}),description:`Teach one entry point before helper members.`,content:`Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.`},{key:`demo`,title:`Real demos beat placeholder previews`,description:`Each route should prove the actual component behavior.`,meta:`Docs`,content:`A docs page should show the real installed component with interactive state, not a generic substitute card.`}],s=[{key:`docs`,title:`Docs updated`,badge:(0,i.jsx)(t.Badge,{variant:`secondary`,children:`Done`}),description:`Public route and CLI snippet verified`,content:`Component detail page, API notes, and install snippet were reviewed together before release.`},{key:`tokens`,title:`Visual tokens synced`,meta:`Review`,description:`No stray radius, border, or surface overrides`,content:`The route uses package tokens directly so the result matches what consumers install.`},{key:`qa`,title:`QA preview checked`,description:`Build and interactive preview passed`,disabled:!0,disabledReason:`Blocked until release candidate is built.`,content:`The component was verified with type-check and production build before push.`}];function c(){let[e,c]=r.useState(`surface`),[l,u]=r.useState([`docs`]),[d,f]=r.useState(`soft`);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 primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Accordion keeps dense guidance readable`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`This route uses the exported accordion surface directly. The page adds only spacing and explanation around it.`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`div`,{className:`mb-5 flex flex-wrap gap-2`,children:[`soft`,`default`,`ghost`].map(e=>(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border px-3 py-1.5 text-xs font-medium ${d===e?`border-primary bg-primary/10 text-foreground`:`border-[color:var(--aui-divider)] text-muted-foreground`}`,onClick:()=>f(e),children:e},e))}),(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1.1fr_0.9fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Documentation flow`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Single-open mode keeps the user focused on one explanation at a time.`}),(0,i.jsx)(n.Accordion,{className:`mt-5`,type:`single`,variant:d,size:`lg`,value:e,onValueChange:c,items:[...o]})]}),(0,i.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Current open item`}),(0,i.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`Controlled state mirrors route-level docs navigation.`})]}),(0,i.jsx)(t.Badge,{variant:`secondary`,children:Array.isArray(e)?e.join(`, `):e||`none`})]}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Use this mode on component detail pages, FAQs, or policy explanations where only one answer should dominate the layout.`}),(0,i.jsx)(`p`,{children:`The trigger keeps title and helper description together, so content stays understandable even before expansion.`})]})]})]})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Operational checklist`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Multiple-open mode works better when teams compare several readiness items together.`}),(0,i.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:(Array.isArray(l)?l:[]).map(e=>(0,i.jsx)(t.Badge,{variant:`outline`,children:e},e))})]}),(0,i.jsx)(n.Accordion,{className:`xl:mt-8`,type:`multiple`,variant:d,value:l,onValueChange:u,items:s.map((e,t)=>({...e,indicatorPosition:t===0?`start`:`end`}))})]})})]})}exports.AccordionShowcase=c;

package/dist/showcase/premium/accordion/showcase.js

@@ -7,12 +7,17 @@ var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
 	{
 		key: "tokens",
 		title: "Theme tokens stay in one place",
+		meta: "P0",
 		description: "Radius, color and shadow should not be redefined per route.",
 		content: "Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles."
 	},
 	{
 		key: "surface",
 		title: "One canonical public surface",
+		badge: /* @__PURE__ */ r(e, {
+			variant: "secondary",
+			children: "Core"
+		}),
 		description: "Teach one entry point before helper members.",
 		content: "Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy."
 	},
@@ -20,18 +25,24 @@ var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
 		key: "demo",
 		title: "Real demos beat placeholder previews",
 		description: "Each route should prove the actual component behavior.",
+		meta: "Docs",
 		content: "A docs page should show the real installed component with interactive state, not a generic substitute card."
 	}
 ], s = [
 	{
 		key: "docs",
 		title: "Docs updated",
+		badge: /* @__PURE__ */ r(e, {
+			variant: "secondary",
+			children: "Done"
+		}),
 		description: "Public route and CLI snippet verified",
 		content: "Component detail page, API notes, and install snippet were reviewed together before release."
 	},
 	{
 		key: "tokens",
 		title: "Visual tokens synced",
+		meta: "Review",
 		description: "No stray radius, border, or surface overrides",
 		content: "The route uses package tokens directly so the result matches what consumers install."
 	},
@@ -39,11 +50,13 @@ var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
 		key: "qa",
 		title: "QA preview checked",
 		description: "Build and interactive preview passed",
+		disabled: !0,
+		disabledReason: "Blocked until release candidate is built.",
 		content: "The component was verified with type-check and production build before push."
 	}
 ];
 function c() {
-	let [c, l] = n.useState("surface"), [u, d] = n.useState(["docs"]);
+	let [c, l] = n.useState("surface"), [u, d] = n.useState(["docs"]), [f, p] = n.useState("soft");
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-0",
 		children: [
@@ -64,9 +77,21 @@ function c() {
 					})
 				]
 			}),
-			/* @__PURE__ */ r("section", {
+			/* @__PURE__ */ i("section", {
 				className: a,
-				children: /* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ r("div", {
+					className: "mb-5 flex flex-wrap gap-2",
+					children: [
+						"soft",
+						"default",
+						"ghost"
+					].map((e) => /* @__PURE__ */ r("button", {
+						type: "button",
+						className: `rounded-full border px-3 py-1.5 text-xs font-medium ${f === e ? "border-primary bg-primary/10 text-foreground" : "border-[color:var(--aui-divider)] text-muted-foreground"}`,
+						onClick: () => p(e),
+						children: e
+					}, e))
+				}), /* @__PURE__ */ i("div", {
 					className: "grid gap-6 xl:grid-cols-[1.1fr_0.9fr]",
 					children: [/* @__PURE__ */ i("div", { children: [
 						/* @__PURE__ */ r("p", {
@@ -80,6 +105,8 @@ function c() {
 						/* @__PURE__ */ r(t, {
 							className: "mt-5",
 							type: "single",
+							variant: f,
+							size: "lg",
 							value: c,
 							onValueChange: l,
 							items: [...o]
@@ -103,7 +130,7 @@ function c() {
 							children: [/* @__PURE__ */ r("p", { children: "Use this mode on component detail pages, FAQs, or policy explanations where only one answer should dominate the layout." }), /* @__PURE__ */ r("p", { children: "The trigger keeps title and helper description together, so content stays understandable even before expansion." })]
 						})]
 					})]
-				})
+				})]
 			}),
 			/* @__PURE__ */ r("section", {
 				className: a,
@@ -128,9 +155,13 @@ function c() {
 					] }), /* @__PURE__ */ r(t, {
 						className: "xl:mt-8",
 						type: "multiple",
+						variant: f,
 						value: u,
 						onValueChange: d,
-						items: [...s]
+						items: s.map((e, t) => ({
+							...e,
+							indicatorPosition: t === 0 ? "start" : "end"
+						}))
 					})]
 				})
 			})

package/dist/showcase/premium/action-menu/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/action-menu.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),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({mode:e}){let[s,c]=r.useState(`No action selected`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Compact actions`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ActionMenu should hide secondary actions, not critical path actions`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is ideal for row or card actions that matter, but should not dominate the layout.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Contextual`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Invoice #2048`}),(0,a.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Acme Growth payment workflow`})]}),(0,a.jsx)(t.ActionMenu,{label:`Invoice actions`,actions:[{key:`open`,label:`Open details`,icon:(0,a.jsx)(i.ExternalLinkIcon,{className:`size-4`}),onSelect:async()=>c(`Opened invoice details`)},{key:`duplicate`,label:`Duplicate`,icon:(0,a.jsx)(i.CopyIcon,{className:`size-4`}),onSelect:async()=>c(`Duplicated invoice workflow`)},{key:`archive`,label:`Archive`,icon:(0,a.jsx)(i.ArchiveIcon,{className:`size-4`}),destructive:!0,onSelect:async()=>c(`Archived invoice workflow`)}]})]})}),(0,a.jsxs)(`section`,{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-base font-medium aui-text-strong`,children:s})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ActionMenu table row, card header yoki compact list itemlarda juda foydali.`})}):null]})}exports.ActionMenuShowcase=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/action-menu.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),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({mode:e}){let[s,c]=r.useState(`No action selected`),[l,u]=r.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Compact actions`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ActionMenu should hide secondary actions, not critical path actions`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is ideal for row or card actions that matter, but should not dominate the layout.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Contextual`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Invoice #2048`}),(0,a.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Acme Growth payment workflow`})]}),(0,a.jsx)(t.ActionMenu,{label:`Invoice actions`,closeOnSelect:!l,actions:[{key:`open`,section:`Primary`,label:`Open details`,description:`Jump into the full invoice route`,icon:(0,a.jsx)(i.ExternalLinkIcon,{className:`size-4`}),shortcut:`↵`,onSelect:async()=>c(`Opened invoice details`)},{key:`duplicate`,section:`Primary`,label:`Duplicate`,description:`Create a new workflow from this one`,icon:(0,a.jsx)(i.CopyIcon,{className:`size-4`}),keepOpen:l,onSelect:async()=>c(`Duplicated invoice workflow`)},{key:`archive`,section:`Danger zone`,label:`Archive`,description:`Hide it from active operational queues`,icon:(0,a.jsx)(i.ArchiveIcon,{className:`size-4`}),destructive:!0,onSelect:async()=>c(`Archived invoice workflow`)}]})]})}),(0,a.jsxs)(`section`,{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-base font-medium aui-text-strong`,children:s}),(0,a.jsx)(`button`,{type:`button`,className:`mt-4 rounded-full border border-[color:var(--aui-divider)] px-3 py-1.5 text-xs font-medium`,onClick:()=>u(e=>!e),children:l?`Close on select off`:`Close on select on`})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ActionMenu table row, card header yoki compact list itemlarda juda foydali.`})}):null]})}exports.ActionMenuShowcase=s;

package/dist/showcase/premium/action-menu/showcase.js

@@ -6,7 +6,7 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/showcase/premium/action-menu/showcase.tsx
 var c = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
 function l({ mode: l }) {
-	let [u, d] = n.useState("No action selected");
+	let [u, d] = n.useState("No action selected"), [f, p] = n.useState(!1);
 	return /* @__PURE__ */ s("div", {
 		className: "space-y-5",
 		children: [
@@ -58,22 +58,31 @@ function l({ mode: l }) {
 							children: "Acme Growth payment workflow"
 						})] }), /* @__PURE__ */ o(e, {
 							label: "Invoice actions",
+							closeOnSelect: !f,
 							actions: [
 								{
 									key: "open",
+									section: "Primary",
 									label: "Open details",
+									description: "Jump into the full invoice route",
 									icon: /* @__PURE__ */ o(a, { className: "size-4" }),
+									shortcut: "↵",
 									onSelect: async () => d("Opened invoice details")
 								},
 								{
 									key: "duplicate",
+									section: "Primary",
 									label: "Duplicate",
+									description: "Create a new workflow from this one",
 									icon: /* @__PURE__ */ o(i, { className: "size-4" }),
+									keepOpen: f,
 									onSelect: async () => d("Duplicated invoice workflow")
 								},
 								{
 									key: "archive",
+									section: "Danger zone",
 									label: "Archive",
+									description: "Hide it from active operational queues",
 									icon: /* @__PURE__ */ o(r, { className: "size-4" }),
 									destructive: !0,
 									onSelect: async () => d("Archived invoice workflow")
@@ -83,13 +92,22 @@ function l({ mode: l }) {
 					})
 				}), /* @__PURE__ */ s("section", {
 					className: c,
-					children: [/* @__PURE__ */ o("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Last action"
-					}), /* @__PURE__ */ o("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: u
-					})]
+					children: [
+						/* @__PURE__ */ o("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Last action"
+						}),
+						/* @__PURE__ */ o("p", {
+							className: "mt-3 text-base font-medium aui-text-strong",
+							children: u
+						}),
+						/* @__PURE__ */ o("button", {
+							type: "button",
+							className: "mt-4 rounded-full border border-[color:var(--aui-divider)] px-3 py-1.5 text-xs font-medium",
+							onClick: () => p((e) => !e),
+							children: f ? "Close on select off" : "Close on select on"
+						})
+					]
 				})]
 			}),
 			l === "playground" ? /* @__PURE__ */ o("section", {

package/dist/showcase/premium/activity-feed/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/activity-feed.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{id:`i-1`,title:`Team invited`,description:`New designer joined the workspace.`,time:`2 min ago`,tone:`info`},{id:`i-2`,title:`Deployment succeeded`,description:`Staging deployment passed smoke checks.`,time:`12 min ago`,tone:`success`},{id:`i-3`,title:`Invoice warning`,description:`Payment sync delayed in queue, retrying soon.`,time:`34 min ago`,tone:`warning`},{id:`i-4`,title:`Critical alert`,description:`Webhook failed for production billing endpoint.`,time:`1h ago`,tone:`danger`}],a=[`all`,`success`,`warning`,`info`,`danger`];function o({mode:e}){let[o,s]=n.useState(e===`playground`),[c,l]=n.useState(`all`),u=n.useMemo(()=>c===`all`?i:i.filter(e=>e.tone===c),[c]);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`div`,{className:`grid gap-2`,children:[(0,r.jsxs)(`div`,{className:`aui-text-muted text-sm`,children:[`Density: `,o?`Compact`:`Spacious`]}),(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(`button`,{type:`button`,className:`rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm`,onClick:()=>s(e=>!e),children:o?`Use spacious`:`Use compact`}),a.map(e=>(0,r.jsx)(`button`,{type:`button`,className:`rounded-lg border px-3 py-2 text-sm ${c===e?`aui-surface-strong border-[color:var(--aui-surface-strong)]`:`border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`}`,onClick:()=>l(e),children:e},e))]})]}),(0,r.jsx)(t.ActivityFeed,{title:`Recent activity`,description:`System and team events are grouped into one lightweight feed.`,items:u,compact:o,empty:(0,r.jsx)(`span`,{className:`aui-text-muted text-sm`,children:`No matching activity for selected tone.`})})]})}exports.ActivityFeedShowcase=o;
+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/display/activity-feed.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{id:`i-1`,title:`Team invited`,description:`New designer joined the workspace.`,time:`2 min ago`,tone:`info`},{id:`i-2`,title:`Deployment succeeded`,description:`Staging deployment passed smoke checks.`,time:`12 min ago`,tone:`success`},{id:`i-3`,title:`Invoice warning`,description:`Payment sync delayed in queue, retrying soon.`,time:`34 min ago`,tone:`warning`},{id:`i-4`,title:`Critical alert`,description:`Webhook failed for production billing endpoint.`,time:`1h ago`,tone:`danger`}],s=[`all`,`success`,`warning`,`info`,`danger`];function c({mode:e}){let[c,l]=i.useState(e===`playground`),[u,d]=i.useState(`all`),[f,p]=i.useState(null),m=i.useMemo(()=>u===`all`?o:o.filter(e=>e.tone===u),[u]);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`grid gap-2`,children:[(0,a.jsxs)(`div`,{className:`aui-text-muted text-sm`,children:[`Density: `,c?`Compact`:`Spacious`]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(`button`,{type:`button`,className:`rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm`,onClick:()=>l(e=>!e),children:c?`Use spacious`:`Use compact`}),s.map(e=>(0,a.jsx)(`button`,{type:`button`,className:`rounded-lg border px-3 py-2 text-sm ${u===e?`aui-surface-strong border-[color:var(--aui-surface-strong)]`:`border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`}`,onClick:()=>d(e),children:e},e))]})]}),(0,a.jsx)(r.ActivityFeed,{title:`Recent activity`,description:`System and team events are grouped into one lightweight feed.`,items:m.map((e,r)=>({...e,unread:r===0,badge:r===0?(0,a.jsx)(n.Badge,{variant:`secondary`,children:`Unread`}):void 0,interactive:!0,onSelect:()=>p(e.id),actions:(0,a.jsx)(t.Button,{size:`xs`,variant:`ghost`,onClick:()=>p(e.id),children:`Review`})})),compact:c,empty:(0,a.jsx)(`span`,{className:`aui-text-muted text-sm`,children:`No matching activity for selected tone.`})}),(0,a.jsxs)(`div`,{className:`aui-text-muted text-sm`,children:[`Selected item: `,f??`none`]})]})}exports.ActivityFeedShowcase=c;

package/dist/showcase/premium/activity-feed/showcase.js

@@ -1,8 +1,10 @@
-import { ActivityFeed as e } from "../../../components/display/activity-feed.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ActivityFeed as n } from "../../../components/display/activity-feed.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/activity-feed/showcase.tsx
-var i = [
+var o = [
 	{
 		id: "i-1",
 		title: "Team invited",
@@ -31,47 +33,69 @@ var i = [
 		time: "1h ago",
 		tone: "danger"
 	}
-], a = [
+], s = [
 	"all",
 	"success",
 	"warning",
 	"info",
 	"danger"
 ];
-function o({ mode: o }) {
-	let [s, c] = t.useState(o === "playground"), [l, u] = t.useState("all"), d = t.useMemo(() => l === "all" ? i : i.filter((e) => e.tone === l), [l]);
-	return /* @__PURE__ */ r("div", {
+function c({ mode: c }) {
+	let [l, u] = r.useState(c === "playground"), [d, f] = r.useState("all"), [p, m] = r.useState(null), h = r.useMemo(() => d === "all" ? o : o.filter((e) => e.tone === d), [d]);
+	return /* @__PURE__ */ a("div", {
 		className: "space-y-4",
-		children: [/* @__PURE__ */ r("div", {
-			className: "grid gap-2",
-			children: [/* @__PURE__ */ r("div", {
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-2",
+				children: [/* @__PURE__ */ a("div", {
+					className: "aui-text-muted text-sm",
+					children: ["Density: ", l ? "Compact" : "Spacious"]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ i("button", {
+						type: "button",
+						className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm",
+						onClick: () => u((e) => !e),
+						children: l ? "Use spacious" : "Use compact"
+					}), s.map((e) => /* @__PURE__ */ i("button", {
+						type: "button",
+						className: `rounded-lg border px-3 py-2 text-sm ${d === e ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`,
+						onClick: () => f(e),
+						children: e
+					}, e))]
+				})]
+			}),
+			/* @__PURE__ */ i(n, {
+				title: "Recent activity",
+				description: "System and team events are grouped into one lightweight feed.",
+				items: h.map((n, r) => ({
+					...n,
+					unread: r === 0,
+					badge: r === 0 ? /* @__PURE__ */ i(t, {
+						variant: "secondary",
+						children: "Unread"
+					}) : void 0,
+					interactive: !0,
+					onSelect: () => m(n.id),
+					actions: /* @__PURE__ */ i(e, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => m(n.id),
+						children: "Review"
+					})
+				})),
+				compact: l,
+				empty: /* @__PURE__ */ i("span", {
+					className: "aui-text-muted text-sm",
+					children: "No matching activity for selected tone."
+				})
+			}),
+			/* @__PURE__ */ a("div", {
 				className: "aui-text-muted text-sm",
-				children: ["Density: ", s ? "Compact" : "Spacious"]
-			}), /* @__PURE__ */ r("div", {
-				className: "flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ n("button", {
-					type: "button",
-					className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm",
-					onClick: () => c((e) => !e),
-					children: s ? "Use spacious" : "Use compact"
-				}), a.map((e) => /* @__PURE__ */ n("button", {
-					type: "button",
-					className: `rounded-lg border px-3 py-2 text-sm ${l === e ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`,
-					onClick: () => u(e),
-					children: e
-				}, e))]
-			})]
-		}), /* @__PURE__ */ n(e, {
-			title: "Recent activity",
-			description: "System and team events are grouped into one lightweight feed.",
-			items: d,
-			compact: s,
-			empty: /* @__PURE__ */ n("span", {
-				className: "aui-text-muted text-sm",
-				children: "No matching activity for selected tone."
+				children: ["Selected item: ", p ?? "none"]
 			})
-		})]
+		]
 	});
 }
 //#endregion
-export { o as ActivityFeedShowcase };
+export { c as ActivityFeedShowcase };

package/dist/showcase/premium/alert/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/feedback/alert.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`,s=[`info`,`success`,`warning`,`destructive`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(0),f=s[c]??`warning`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Inline feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Alert should guide the next user decision`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Context aware`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Action ready`})]})]})}),(0,a.jsx)(r.Alert,{tone:f,title:f===`success`?`Workspace synced`:f===`destructive`?`Action blocked`:f===`info`?`Heads up`:`Review needed`,description:f===`success`?`Changes were saved and the team can continue safely.`:f===`destructive`?`The release cannot continue until billing permissions are restored.`:f===`info`?`Usage data refreshed and one metric changed since your last visit.`:`Billing rules changed and one approval is pending before publish.`,action:(0,a.jsx)(t.Button,{size:`sm`,variant:f===`destructive`?`destructive`:`default`,onClick:()=>d(e=>e+1),children:f===`success`?`Continue`:f===`destructive`?`Fix access`:f===`info`?`Open details`:`Open review`})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Action count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:u}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Alert CTA should resolve a real decision, not just dismiss a message.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Recommended usage`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Put alert above the affected surface, form, or result area.`}),(0,a.jsx)(`p`,{children:`Prefer one primary action. If the user only needs acknowledgment, use toast instead.`})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[s.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e)),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(0),children:`Reset counter`})]})}):null]})}exports.AlertShowcase=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/feedback/alert.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`,s=[`info`,`success`,`warning`,`destructive`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(0),[f,p]=i.useState(!0),m=s[c]??`warning`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Inline feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Alert should guide the next user decision`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Context aware`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Action ready`})]})]})}),f?(0,a.jsx)(r.Alert,{tone:m,dismissible:!0,onDismiss:()=>p(!1),title:m===`success`?`Workspace synced`:m===`destructive`?`Action blocked`:m===`info`?`Heads up`:`Review needed`,description:m===`success`?`Changes were saved and the team can continue safely.`:m===`destructive`?`The release cannot continue until billing permissions are restored.`:m===`info`?`Usage data refreshed and one metric changed since your last visit.`:`Billing rules changed and one approval is pending before publish.`,action:(0,a.jsx)(t.Button,{size:`sm`,variant:m===`destructive`?`destructive`:`default`,onClick:()=>d(e=>e+1),children:m===`success`?`Continue`:m===`destructive`?`Fix access`:m===`info`?`Open details`:`Open review`})}):(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Alert dismissed`}),(0,a.jsx)(t.Button,{className:`mt-4`,size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Restore alert`})]}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Action count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:u}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Alert CTA should resolve a real decision, not just dismiss a message.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Recommended usage`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Put alert above the affected surface, form, or result area.`}),(0,a.jsx)(`p`,{children:`Prefer one primary action. If the user only needs acknowledgment, use toast instead.`})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[s.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e)),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(0),children:`Reset counter`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Show alert`})]})}):null]})}exports.AlertShowcase=c;

package/dist/showcase/premium/alert/showcase.js

@@ -11,7 +11,7 @@ var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 	"destructive"
 ];
 function c({ mode: c }) {
-	let [l, u] = r.useState(2), [d, f] = r.useState(0), p = s[l] ?? "warning";
+	let [l, u] = r.useState(2), [d, f] = r.useState(0), [p, m] = r.useState(!0), h = s[l] ?? "warning";
 	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
 		children: [
@@ -49,16 +49,30 @@ function c({ mode: c }) {
 					})]
 				})
 			}),
-			/* @__PURE__ */ i(n, {
-				tone: p,
-				title: p === "success" ? "Workspace synced" : p === "destructive" ? "Action blocked" : p === "info" ? "Heads up" : "Review needed",
-				description: p === "success" ? "Changes were saved and the team can continue safely." : p === "destructive" ? "The release cannot continue until billing permissions are restored." : p === "info" ? "Usage data refreshed and one metric changed since your last visit." : "Billing rules changed and one approval is pending before publish.",
+			p ? /* @__PURE__ */ i(n, {
+				tone: h,
+				dismissible: !0,
+				onDismiss: () => m(!1),
+				title: h === "success" ? "Workspace synced" : h === "destructive" ? "Action blocked" : h === "info" ? "Heads up" : "Review needed",
+				description: h === "success" ? "Changes were saved and the team can continue safely." : h === "destructive" ? "The release cannot continue until billing permissions are restored." : h === "info" ? "Usage data refreshed and one metric changed since your last visit." : "Billing rules changed and one approval is pending before publish.",
 				action: /* @__PURE__ */ i(e, {
 					size: "sm",
-					variant: p === "destructive" ? "destructive" : "default",
+					variant: h === "destructive" ? "destructive" : "default",
 					onClick: () => f((e) => e + 1),
-					children: p === "success" ? "Continue" : p === "destructive" ? "Fix access" : p === "info" ? "Open details" : "Open review"
+					children: h === "success" ? "Continue" : h === "destructive" ? "Fix access" : h === "info" ? "Open details" : "Open review"
 				})
+			}) : /* @__PURE__ */ a("section", {
+				className: o,
+				children: [/* @__PURE__ */ i("p", {
+					className: "text-sm font-medium aui-text-muted",
+					children: "Alert dismissed"
+				}), /* @__PURE__ */ i(e, {
+					className: "mt-4",
+					size: "sm",
+					variant: "outline",
+					onClick: () => m(!0),
+					children: "Restore alert"
+				})]
 			}),
 			/* @__PURE__ */ a("div", {
 				className: "grid gap-4 xl:grid-cols-[0.9fr_1.1fr]",
@@ -93,17 +107,26 @@ function c({ mode: c }) {
 				className: o,
 				children: /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap gap-2",
-					children: [s.map((t, n) => /* @__PURE__ */ i(e, {
-						size: "sm",
-						variant: l === n ? "default" : "outline",
-						onClick: () => u(n),
-						children: t
-					}, t)), /* @__PURE__ */ i(e, {
-						size: "sm",
-						variant: "outline",
-						onClick: () => f(0),
-						children: "Reset counter"
-					})]
+					children: [
+						s.map((t, n) => /* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: l === n ? "default" : "outline",
+							onClick: () => u(n),
+							children: t
+						}, t)),
+						/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => f(0),
+							children: "Reset counter"
+						}),
+						/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => m(!0),
+							children: "Show alert"
+						})
+					]
 				})
 			}) : null
 		]

package/dist/showcase/premium/alert-dialog/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/overlay/alert-dialog.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({mode:e}){let[s,c]=i.useState(!1),[l,u]=i.useState(!1),[d,f]=i.useState(`No action confirmed yet`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Destructive gate`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AlertDialog should interrupt only when the action has real consequence`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`High risk`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Explicit confirmation`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live destructive flow`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the dialog and confirm a risky workspace action.`})]}),(0,a.jsx)(t.Button,{variant:`destructive`,onClick:()=>c(!0),children:`Delete workspace`})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last result`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:d})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Design rule`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next.`})]})]}),(0,a.jsx)(r.AlertDialog,{open:s,onOpenChange:c,loading:l,title:`Delete workspace?`,description:`This removes active billing rules, API tokens, and member access from the selected workspace.`,actionLabel:`Delete workspace`,onAction:async()=>{u(!0),await new Promise(e=>window.setTimeout(e,450)),u(!1),c(!1),f(`Workspace deletion confirmed`)}}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>f(`No action confirmed yet`),children:`Reset result`})}):null]})}exports.AlertDialogShowcase=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/overlay/alert-dialog.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({mode:e}){let[s,c]=i.useState(!1),[l,u]=i.useState(!1),[d,f]=i.useState(`No action confirmed yet`),[p,m]=i.useState(!0),[h,g]=i.useState(!0),[_,v]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`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:`Destructive gate`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AlertDialog should interrupt only when the action has real consequence`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`High risk`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Explicit confirmation`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live destructive flow`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the dialog and confirm a risky workspace action.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{variant:h?`secondary`:`outline`,onClick:()=>g(e=>!e),children:h?`Case sensitive`:`Case insensitive`}),(0,a.jsx)(t.Button,{variant:p?`secondary`:`outline`,onClick:()=>m(e=>!e),children:p?`Typed confirm on`:`Typed confirm off`}),(0,a.jsx)(t.Button,{variant:_?`warning`:`outline`,onClick:()=>v(e=>!e),children:_?`Failure mode on`:`Failure mode off`}),(0,a.jsx)(t.Button,{variant:`destructive`,onClick:()=>c(!0),children:`Delete workspace`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last result`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:d})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Design rule`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next.`})]})]}),(0,a.jsx)(r.AlertDialog,{open:s,onOpenChange:c,loading:l,title:`Delete workspace?`,description:`This removes active billing rules, API tokens, and member access from the selected workspace.`,actionLabel:`Delete workspace`,confirmValue:p?`DELETE`:void 0,confirmCaseSensitive:h,confirmLabel:`High-risk confirmation`,confirmDescription:`Type DELETE to confirm you want to remove this workspace and its active access.`,severityNote:`Deleting a workspace clears active access, billing rules, and route-level secrets for the current team.`,errorMessage:`Workspace could not be deleted right now. Check dependent billing or retry.`,onAction:async()=>{if(u(!0),await new Promise(e=>window.setTimeout(e,450)),_)throw u(!1),Error(`dependent billing`);u(!1),c(!1),f(`Workspace deletion confirmed`)},onActionError:()=>f(`Workspace deletion failed`)}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>f(`No action confirmed yet`),children:`Reset result`})}):null]})}exports.AlertDialogShowcase=s;

package/dist/showcase/premium/alert-dialog/showcase.js

@@ -6,7 +6,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/alert-dialog/showcase.tsx
 var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
 function s({ mode: s }) {
-	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState("No action confirmed yet");
+	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState("No action confirmed yet"), [m, h] = r.useState(!0), [g, _] = r.useState(!0), [v, y] = r.useState(!1);
 	return /* @__PURE__ */ a("div", {
 		className: "space-y-5",
 		children: [
@@ -54,10 +54,30 @@ function s({ mode: s }) {
 					}), /* @__PURE__ */ i("p", {
 						className: "mt-2 text-sm leading-6 aui-text-muted",
 						children: "Open the dialog and confirm a risky workspace action."
-					})] }), /* @__PURE__ */ i(e, {
-						variant: "destructive",
-						onClick: () => l(!0),
-						children: "Delete workspace"
+					})] }), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i(e, {
+								variant: g ? "secondary" : "outline",
+								onClick: () => _((e) => !e),
+								children: g ? "Case sensitive" : "Case insensitive"
+							}),
+							/* @__PURE__ */ i(e, {
+								variant: m ? "secondary" : "outline",
+								onClick: () => h((e) => !e),
+								children: m ? "Typed confirm on" : "Typed confirm off"
+							}),
+							/* @__PURE__ */ i(e, {
+								variant: v ? "warning" : "outline",
+								onClick: () => y((e) => !e),
+								children: v ? "Failure mode on" : "Failure mode off"
+							}),
+							/* @__PURE__ */ i(e, {
+								variant: "destructive",
+								onClick: () => l(!0),
+								children: "Delete workspace"
+							})
+						]
 					})]
 				})
 			}),
@@ -90,9 +110,17 @@ function s({ mode: s }) {
 				title: "Delete workspace?",
 				description: "This removes active billing rules, API tokens, and member access from the selected workspace.",
 				actionLabel: "Delete workspace",
+				confirmValue: m ? "DELETE" : void 0,
+				confirmCaseSensitive: g,
+				confirmLabel: "High-risk confirmation",
+				confirmDescription: "Type DELETE to confirm you want to remove this workspace and its active access.",
+				severityNote: "Deleting a workspace clears active access, billing rules, and route-level secrets for the current team.",
+				errorMessage: "Workspace could not be deleted right now. Check dependent billing or retry.",
 				onAction: async () => {
-					d(!0), await new Promise((e) => window.setTimeout(e, 450)), d(!1), l(!1), p("Workspace deletion confirmed");
-				}
+					if (d(!0), await new Promise((e) => window.setTimeout(e, 450)), v) throw d(!1), Error("dependent billing");
+					d(!1), l(!1), p("Workspace deletion confirmed");
+				},
+				onActionError: () => p("Workspace deletion failed")
 			}),
 			s === "playground" ? /* @__PURE__ */ i("section", {
 				className: o,

package/dist/showcase/premium/async-multi-select/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { AsyncMultiSelect } from "@/index"
+import { AsyncSelect } from "tembro"
 
 const projectOptions = [
   { value: "analytics", label: "Analytics", description: "Dashboards and reports" },
@@ -22,7 +22,8 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <AsyncMultiSelect
+      <AsyncSelect
+        isMulti
         value={selected}
         onValueChange={(values) => setSelected(values)}
         loadOptions={loadProjectOptions}
@@ -37,4 +38,4 @@ export function Example() {
       </div>
     </div>
   )
-}`,htmlCode:`<button data-slot="async-multiselect-trigger">Choose modules</button>`,cliCommand:`npx tembro add async-multi-select`,highlights:[`Multiple selected tags`,`maxSelected guard`,`select-all action`,`remove by tag/checkbox`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Project scope`,description:`Attach multiple modules to one workspace or permission set.`},{title:`Max selected`,description:`Limit selections to keep downstream payloads predictable.`},{title:`Keyboard remove`,description:`Support tag cleanup for power users in dense inputs.`},{title:`Async updates`,description:`Keep tags synced with changing remote data.`}],capabilityNotes:["Use `AsyncMultiSelect` for sparse multi-select forms where dataset changes over time.","Show clear limits with `maxSelected` and help text from validation.","`onValueChange` returns both ids and resolved options when custom payloads are needed.",`Disable close-on-select when users are likely to make batch picks.`]};exports.asyncMultiSelectMock=e;
+}`,htmlCode:`<button data-slot="async-multiselect-trigger">Choose modules</button>`,cliCommand:`npx tembro add async-select`,highlights:[`Multi-value remote tags`,`maxSelected guard`,`select-all action`,`canonical isMulti flow`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Project scope`,description:`Attach multiple modules to one workspace or permission set.`},{title:`Max selected`,description:`Limit selections to keep downstream payloads predictable.`},{title:`Keyboard remove`,description:`Support tag cleanup for power users in dense inputs.`},{title:`Async updates`,description:`Keep tags synced with changing remote data.`}],capabilityNotes:["Prefer `AsyncSelect isMulti` for sparse multi-select forms where dataset changes over time.","Show clear limits with `maxSelected` and help text from validation.","`onValueChange` returns both ids and resolved options when custom payloads are needed.",`Disable close-on-select when users are likely to make batch picks.`]};exports.asyncMultiSelectMock=e;

package/dist/showcase/premium/async-multi-select/mock.js

@@ -1,13 +1,13 @@
 //#region src/showcase/premium/async-multi-select/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { AsyncMultiSelect } from \"@/index\"\n\nconst projectOptions = [\n  { value: \"analytics\", label: \"Analytics\", description: \"Dashboards and reports\" },\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and subscriptions\" },\n  { value: \"support\", label: \"Support\", description: \"Customer tickets\" },\n  { value: \"security\", label: \"Security\", description: \"Permissions and audit\" },\n  { value: \"search\", label: \"Search\", description: \"Discovery and recommendations\" },\n  { value: \"archive\", label: \"Archive\", description: \"Legacy read-only project\", disabled: true },\n]\n\nconst loadProjectOptions = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 300))\n  const query = search.trim().toLowerCase()\n  if (!query) return projectOptions\n  return projectOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [selected, setSelected] = useState<string[]>([\"analytics\"])\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncMultiSelect\n        value={selected}\n        onValueChange={(values) => setSelected(values)}\n        loadOptions={loadProjectOptions}\n        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}\n        maxSelected={3}\n        closeOnSelect={false}\n        showSelectAll\n        clearable\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Modules: <strong>{selected.length}</strong> selected\n      </div>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { AsyncSelect } from \"tembro\"\n\nconst projectOptions = [\n  { value: \"analytics\", label: \"Analytics\", description: \"Dashboards and reports\" },\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and subscriptions\" },\n  { value: \"support\", label: \"Support\", description: \"Customer tickets\" },\n  { value: \"security\", label: \"Security\", description: \"Permissions and audit\" },\n  { value: \"search\", label: \"Search\", description: \"Discovery and recommendations\" },\n  { value: \"archive\", label: \"Archive\", description: \"Legacy read-only project\", disabled: true },\n]\n\nconst loadProjectOptions = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 300))\n  const query = search.trim().toLowerCase()\n  if (!query) return projectOptions\n  return projectOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [selected, setSelected] = useState<string[]>([\"analytics\"])\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncSelect\n        isMulti\n        value={selected}\n        onValueChange={(values) => setSelected(values)}\n        loadOptions={loadProjectOptions}\n        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}\n        maxSelected={3}\n        closeOnSelect={false}\n        showSelectAll\n        clearable\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Modules: <strong>{selected.length}</strong> selected\n      </div>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"async-multiselect-trigger\">Choose modules</button>",
-	cliCommand: "npx tembro add async-multi-select",
+	cliCommand: "npx tembro add async-select",
 	highlights: [
-		"Multiple selected tags",
+		"Multi-value remote tags",
 		"maxSelected guard",
 		"select-all action",
-		"remove by tag/checkbox"
+		"canonical isMulti flow"
 	],
 	relatedBlockSlugs: [
 		"users-table",
@@ -33,7 +33,7 @@ var e = {
 		}
 	],
 	capabilityNotes: [
-		"Use `AsyncMultiSelect` for sparse multi-select forms where dataset changes over time.",
+		"Prefer `AsyncSelect isMulti` for sparse multi-select forms where dataset changes over time.",
 		"Show clear limits with `maxSelected` and help text from validation.",
 		"`onValueChange` returns both ids and resolved options when custom payloads are needed.",
 		"Disable close-on-select when users are likely to make batch picks."

package/dist/showcase/premium/async-multi-select/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/async-select.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=[{value:`inbox`,label:`Inbox`},{value:`analytics`,label:`Analytics`},{value:`billing`,label:`Billing`},{value:`support`,label:`Support`}],i=async e=>(await new Promise(e=>setTimeout(e,240)),e?r.filter(t=>String(t.label??``).toLowerCase().includes(e.toLowerCase())):r);function a(){let[r,a]=(0,t.useState)([`analytics`]);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`AsyncMultiSelect is the multi-value remote member`}),(0,n.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Reach for it only when one Select surface must support remote search, visible tags, and multiple chosen values together.`})]}),(0,n.jsx)(e.AsyncMultiSelect,{value:r,onValueChange:e=>a(e),loadOptions:i,maxSelected:3,showSelectAll:!0}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Selected count: `,r.length]})]})}exports.AsyncMultiSelectShowcase=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/async-select.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=[{value:`inbox`,label:`Inbox`},{value:`analytics`,label:`Analytics`},{value:`billing`,label:`Billing`},{value:`support`,label:`Support`}],i=async e=>(await new Promise(e=>setTimeout(e,240)),e?r.filter(t=>String(t.label??``).toLowerCase().includes(e.toLowerCase())):r);function a(){let[r,a]=(0,t.useState)([`analytics`]);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Use AsyncSelect with isMulti for remote multi-value flows`}),(0,n.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Keep the Select family centered on one remote surface. This route documents the multi-value mode, but new code should stay on AsyncSelect.`})]}),(0,n.jsx)(e.AsyncSelect,{isMulti:!0,value:r,onValueChange:e=>a(e),loadOptions:i,maxSelected:3,showSelectAll:!0}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Selected count: `,r.length]})]})}exports.AsyncMultiSelectShowcase=a;