tembro 2.0.3 → 2.0.5

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

@@ -1,4 +1,4 @@
-import { AsyncMultiSelect as e } from "../../../components/inputs/async-select.js";
+import { AsyncSelect as e } from "../../../components/inputs/async-select.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/async-multi-select/showcase.tsx
@@ -29,13 +29,14 @@ function o() {
 				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
 				children: [/* @__PURE__ */ n("p", {
 					className: "text-sm font-medium aui-text-strong",
-					children: "AsyncMultiSelect is the multi-value remote member"
+					children: "Use AsyncSelect with isMulti for remote multi-value flows"
 				}), /* @__PURE__ */ n("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."
+					children: "Keep the Select family centered on one remote surface. This route documents the multi-value mode, but new code should stay on AsyncSelect."
 				})]
 			}),
 			/* @__PURE__ */ n(e, {
+				isMulti: !0,
 				value: i,
 				onValueChange: (e) => o(e),
 				loadOptions: a,

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { AsyncSelect, type AsyncSelectOption } from "@/index"
+import { AsyncSelect, type AsyncSelectOption } from "tembro"
 
 const seedOptions: AsyncSelectOption[] = [
   { value: "acme", label: "ACME", description: "Core product line" },

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/async-select/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { AsyncSelect, type AsyncSelectOption } from \"@/index\"\n\nconst seedOptions: AsyncSelectOption[] = [\n  { value: \"acme\", label: \"ACME\", description: \"Core product line\" },\n  { value: \"nova\", label: \"Nova\", description: \"Enterprise clients\" },\n  { value: \"spark\", label: \"Spark\", description: \"Growth workspace\" },\n  { value: \"atlas\", label: \"Atlas\", description: \"Billing team\" },\n  { value: \"zen\", label: \"Zen\", description: \"Ops and support\" },\n  { value: \"legacy\", label: \"Legacy\", description: \"Deprecated workspace\", disabled: true },\n]\n\nconst loadWorkspaces = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 420))\n  const query = search.trim().toLowerCase()\n  if (query === \"error\") {\n    throw new Error(\"Unable to fetch options for the current query.\")\n  }\n\n  if (query.length < 2) return []\n  return seedOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [value, setValue] = useState(\"\")\n  const [label, setLabel] = useState(\"Select workspace\")\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncSelect\n        value={value}\n        onValueChange={(nextValue, option) => {\n          setValue(nextValue ?? \"\")\n          setLabel(option?.label ? String(option.label) : \"Select workspace\")\n        }}\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={async (selectedValue) => {\n          await new Promise((resolve) => setTimeout(resolve, 40))\n          return seedOptions.find((option) => option.value === selectedValue) ?? null\n        }}\n        clearable\n        debounceMs={250}\n        minSearchLength={2}\n        defaultOptions={seedOptions}\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        Selected: <strong>{value || \"none\"}</strong> — {label}\n      </div>\n      <p className=\"text-sm aui-text-muted\">\n        Set search to <code>error</code> to preview empty/error handling paths.\n      </p>\n      <p className=\"text-sm aui-text-muted\">Disabled items are rendered non-selectable in the list.</p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { AsyncSelect, type AsyncSelectOption } from \"tembro\"\n\nconst seedOptions: AsyncSelectOption[] = [\n  { value: \"acme\", label: \"ACME\", description: \"Core product line\" },\n  { value: \"nova\", label: \"Nova\", description: \"Enterprise clients\" },\n  { value: \"spark\", label: \"Spark\", description: \"Growth workspace\" },\n  { value: \"atlas\", label: \"Atlas\", description: \"Billing team\" },\n  { value: \"zen\", label: \"Zen\", description: \"Ops and support\" },\n  { value: \"legacy\", label: \"Legacy\", description: \"Deprecated workspace\", disabled: true },\n]\n\nconst loadWorkspaces = async (search: string) => {\n  await new Promise((resolve) => setTimeout(resolve, 420))\n  const query = search.trim().toLowerCase()\n  if (query === \"error\") {\n    throw new Error(\"Unable to fetch options for the current query.\")\n  }\n\n  if (query.length < 2) return []\n  return seedOptions.filter((option) => String(option.label ?? \"\").toLowerCase().includes(query))\n}\n\nexport function Example() {\n  const [value, setValue] = useState(\"\")\n  const [label, setLabel] = useState(\"Select workspace\")\n\n  return (\n    <div className=\"space-y-3\">\n      <AsyncSelect\n        value={value}\n        onValueChange={(nextValue, option) => {\n          setValue(nextValue ?? \"\")\n          setLabel(option?.label ? String(option.label) : \"Select workspace\")\n        }}\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={async (selectedValue) => {\n          await new Promise((resolve) => setTimeout(resolve, 40))\n          return seedOptions.find((option) => option.value === selectedValue) ?? null\n        }}\n        clearable\n        debounceMs={250}\n        minSearchLength={2}\n        defaultOptions={seedOptions}\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        Selected: <strong>{value || \"none\"}</strong> — {label}\n      </div>\n      <p className=\"text-sm aui-text-muted\">\n        Set search to <code>error</code> to preview empty/error handling paths.\n      </p>\n      <p className=\"text-sm aui-text-muted\">Disabled items are rendered non-selectable in the list.</p>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"async-select-trigger\">Choose workspace</button>",
 	cliCommand: "npx tembro add async-select",
 	highlights: [

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/inputs/async-select.cjs"),n=require("../../component-route-data.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=n.routeWorkspaceOptions,o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();return t?a.filter(e=>String(e.label??``).toLowerCase().includes(t)):a};function c(){let[c,l]=(0,r.useState)(``),u=n.routeWorkspaceOptions.find(e=>e.value===c);return(0,i.jsx)(`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:`Remote selection`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AsyncSelect is the remote member of the Select family`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{value:c,onValueChange:e=>l(e??``),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,debounceMs:220})}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Hydrate selection`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Selected value can be restored from ID-first edit state.`})]})]})]}),(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:u?.label||`No region selected`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:c||`none`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:u?n.routeWorkspaceOptions.find(e=>e.value===u.value)?.team:`No team`})]})]})]})]})]})})}exports.AsyncSelectShowcase=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/inputs/async-select.cjs"),n=require("../../component-route-data.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=n.routeWorkspaceOptions,o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=async e=>{await new Promise(e=>setTimeout(e,260));let t=e.trim().toLowerCase();return t?a.filter(e=>String(e.label??``).toLowerCase().includes(t)):a};function c(){let[c,l]=(0,r.useState)(``),[u,d]=(0,r.useState)([`north`,`west`]),f=n.routeWorkspaceOptions.find(e=>e.value===c),p=n.routeWorkspaceOptions.filter(e=>u.includes(String(e.value)));return(0,i.jsx)(`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:`Remote selection`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AsyncSelect is the remote member of the Select family`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Async`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Search`}),(0,i.jsx)(e.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Assign service region`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{value:c,onValueChange:e=>l(e??``),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectedDescription:!0,debounceMs:220,labels:{placeholder:`Choose service region`,searchPlaceholder:`Search regions...`}})}),(0,i.jsxs)(`div`,{className:`mt-5`,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Multi select uses the same component`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.AsyncSelect,{isMulti:!0,value:u,onValueChange:e=>d(e),loadOptions:s,defaultOptions:a,minSearchLength:1,clearable:!0,showSelectAll:!0,maxSelected:3,maxVisibleTags:2,showSelectedDescription:!0,debounceMs:220,labels:{multiPlaceholder:`Choose team coverage`,searchPlaceholder:`Search team regions...`,selectedCount:e=>`${e} regions selected`,hiddenSelected:e=>`+${e} more`}})})]}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Type to query`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Minimum search length keeps remote requests intentional.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Clear safely`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Clear action is isolated from the trigger surface.`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Hydrate selection`}),(0,i.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Selected value can be restored from ID-first edit state.`})]})]})]}),(0,i.jsxs)(`div`,{className:o,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected result`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:f?.label||`No region selected`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Value`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:c||`none`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Team`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:f?n.routeWorkspaceOptions.find(e=>e.value===f.value)?.team:`No team`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs uppercase tracking-[0.2em] aui-text-muted`,children:`Multi mode`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm font-medium aui-text-strong`,children:p.length?p.map(e=>e.label).join(`, `):`No teams selected`})]})]})]})]})]})})}exports.AsyncSelectShowcase=c;

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

@@ -10,7 +10,7 @@ var o = n, s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[colo
 	return t ? o.filter((e) => String(e.label ?? "").toLowerCase().includes(t)) : o;
 };
 function l() {
-	let [l, u] = r(""), d = n.find((e) => e.value === l);
+	let [l, u] = r(""), [d, f] = r(["north", "west"]), p = n.find((e) => e.value === l), m = n.filter((e) => d.includes(String(e.value)));
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-5",
 		children: /* @__PURE__ */ a("section", {
@@ -71,9 +71,43 @@ function l() {
 								defaultOptions: o,
 								minSearchLength: 1,
 								clearable: !0,
-								debounceMs: 220
+								showSelectedDescription: !0,
+								debounceMs: 220,
+								labels: {
+									placeholder: "Choose service region",
+									searchPlaceholder: "Search regions..."
+								}
 							})
 						}),
+						/* @__PURE__ */ a("div", {
+							className: "mt-5",
+							children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-muted",
+								children: "Multi select uses the same component"
+							}), /* @__PURE__ */ i("div", {
+								className: "mt-3",
+								children: /* @__PURE__ */ i(t, {
+									isMulti: !0,
+									value: d,
+									onValueChange: (e) => f(e),
+									loadOptions: c,
+									defaultOptions: o,
+									minSearchLength: 1,
+									clearable: !0,
+									showSelectAll: !0,
+									maxSelected: 3,
+									maxVisibleTags: 2,
+									showSelectedDescription: !0,
+									debounceMs: 220,
+									labels: {
+										multiPlaceholder: "Choose team coverage",
+										searchPlaceholder: "Search team regions...",
+										selectedCount: (e) => `${e} regions selected`,
+										hiddenSelected: (e) => `+${e} more`
+									}
+								})
+							})]
+						}),
 						/* @__PURE__ */ a("div", {
 							className: "mt-4 grid gap-3 md:grid-cols-3",
 							children: [
@@ -119,7 +153,7 @@ function l() {
 						}),
 						/* @__PURE__ */ i("p", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: d?.label || "No region selected"
+							children: p?.label || "No region selected"
 						}),
 						/* @__PURE__ */ i("p", {
 							className: "mt-2 text-sm leading-6 aui-text-muted",
@@ -127,25 +161,38 @@ function l() {
 						}),
 						/* @__PURE__ */ a("div", {
 							className: "mt-4 space-y-3",
-							children: [/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
-									children: "Value"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-sm font-medium aui-text-strong",
-									children: l || "none"
-								})]
-							}), /* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
-									children: "Team"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-sm font-medium aui-text-strong",
-									children: d ? n.find((e) => e.value === d.value)?.team : "No team"
-								})]
-							})]
+							children: [
+								/* @__PURE__ */ a("div", {
+									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ i("p", {
+										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
+										children: "Value"
+									}), /* @__PURE__ */ i("p", {
+										className: "mt-2 text-sm font-medium aui-text-strong",
+										children: l || "none"
+									})]
+								}),
+								/* @__PURE__ */ a("div", {
+									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ i("p", {
+										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
+										children: "Team"
+									}), /* @__PURE__ */ i("p", {
+										className: "mt-2 text-sm font-medium aui-text-strong",
+										children: p ? n.find((e) => e.value === p.value)?.team : "No team"
+									})]
+								}),
+								/* @__PURE__ */ a("div", {
+									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
+									children: [/* @__PURE__ */ i("p", {
+										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
+										children: "Multi mode"
+									}), /* @__PURE__ */ i("p", {
+										className: "mt-2 text-sm font-medium aui-text-strong",
+										children: m.length ? m.map((e) => e.label).join(", ") : "No teams selected"
+									})]
+								})
+							]
 						})
 					]
 				})]

package/dist/showcase/premium/button/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");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,size:`icon`,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.useState(0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,size:`icon`,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;
+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");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,size:`icon`,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,pressed:e===`Focus`,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.useState(0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsxs)(`section`,{className:c,children:[(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,fullWidth:!0,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Primary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Main action with filled emphasis.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Secondary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Alternative action without stealing focus.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Outline`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Low-emphasis action for previews and neutral workflows.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Destructive`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Reserved for archive, delete, or dangerous transitions.`})]})]})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,size:`icon`,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;

package/dist/showcase/premium/button/showcase.js

@@ -55,6 +55,7 @@ function p({ state: t, variant: n }) {
 		children: "Save"
 	}) : /* @__PURE__ */ s(e, {
 		variant: n,
+		pressed: t === "Focus",
 		disabled: t === "Disabled",
 		className: t === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : void 0,
 		children: t
@@ -82,9 +83,9 @@ function m() {
 					})
 				]
 			}),
-			/* @__PURE__ */ s("section", {
+			/* @__PURE__ */ c("section", {
 				className: d,
-				children: /* @__PURE__ */ c("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: "grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start",
 					children: [/* @__PURE__ */ c("div", { children: [
 						/* @__PURE__ */ s("p", {
@@ -133,6 +134,7 @@ function m() {
 								}),
 								/* @__PURE__ */ s(e, {
 									variant: m,
+									fullWidth: !0,
 									loading: g === "saving",
 									loadingLabel: "Approving",
 									onClick: () => {
@@ -143,7 +145,51 @@ function m() {
 							]
 						})]
 					})]
-				})
+				}), /* @__PURE__ */ c("div", {
+					className: "mt-6 grid gap-3 md:grid-cols-4",
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
+							children: [/* @__PURE__ */ s("p", {
+								className: "font-medium aui-text-strong",
+								children: "Primary"
+							}), /* @__PURE__ */ s("p", {
+								className: "mt-2 leading-6 aui-text-muted",
+								children: "Main action with filled emphasis."
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
+							children: [/* @__PURE__ */ s("p", {
+								className: "font-medium aui-text-strong",
+								children: "Secondary"
+							}), /* @__PURE__ */ s("p", {
+								className: "mt-2 leading-6 aui-text-muted",
+								children: "Alternative action without stealing focus."
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
+							children: [/* @__PURE__ */ s("p", {
+								className: "font-medium aui-text-strong",
+								children: "Outline"
+							}), /* @__PURE__ */ s("p", {
+								className: "mt-2 leading-6 aui-text-muted",
+								children: "Low-emphasis action for previews and neutral workflows."
+							})]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
+							children: [/* @__PURE__ */ s("p", {
+								className: "font-medium aui-text-strong",
+								children: "Destructive"
+							}), /* @__PURE__ */ s("p", {
+								className: "mt-2 leading-6 aui-text-muted",
+								children: "Reserved for archive, delete, or dangerous transitions."
+							})]
+						})
+					]
+				})]
 			}),
 			/* @__PURE__ */ s("section", {
 				className: d,

package/dist/showcase/premium/button-group/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/button-group.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);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({mode:e}){let[o,s]=r.useState(`list`);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`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:`Grouped control`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ButtonGroup should make adjacent choices feel like one control set`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for closely related toggles like view mode or density. It should reduce toolbar noise, not create another visual cluster.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`View switching`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Toolbar compactness`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.ButtonGroup,{items:[{key:`list`,label:`List`,variant:o===`list`?`default`:`outline`,onClick:()=>s(`list`)},{key:`board`,label:`Board`,variant:o===`board`?`default`:`outline`,onClick:()=>s(`board`)},{key:`timeline`,label:`Timeline`,variant:o===`timeline`?`default`:`outline`,onClick:()=>s(`timeline`)}]})}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected view`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ButtonGroup list/board/timeline kabi yaqin tanlovlar uchun yaxshi ishlaydi.`})}):null]})}exports.ButtonGroupShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/button-group.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);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({mode:e}){let[o,s]=r.useState(`list`),[c,l]=r.useState(`comfortable`);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`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:`Grouped control`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ButtonGroup should make adjacent choices feel like one control set`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for closely related toggles like view mode or density. It should reduce toolbar noise, not create another visual cluster.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`View switching`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Toolbar compactness`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(t.ButtonGroup,{value:o,onValueChange:e=>s(e),items:[{key:`list`,label:`List`,description:`Rows first`},{key:`board`,label:`Board`,description:`Kanban view`},{key:`timeline`,label:`Timeline`,description:`Chronology`}]}),(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsx)(t.ButtonGroup,{value:c,onValueChange:e=>l(e),size:`xs`,activeVariant:`secondary`,allowDeselect:!0,items:[{key:`comfortable`,label:`Comfortable`},{key:`compact`,label:`Compact`}]})})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected view`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o}),(0,i.jsxs)(`p`,{className:`mt-2 text-sm aui-text-muted`,children:[`Density: `,c||`none`]})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ButtonGroup list/board/timeline kabi yaqin tanlovlar uchun yaxshi ishlaydi.`})}):null]})}exports.ButtonGroupShowcase=o;

package/dist/showcase/premium/button-group/showcase.js

@@ -5,7 +5,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/showcase/premium/button-group/showcase.tsx
 var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
 function o({ mode: o }) {
-	let [s, c] = n.useState("list");
+	let [s, c] = n.useState("list"), [l, u] = n.useState("comfortable");
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-5",
 		children: [
@@ -45,37 +45,61 @@ function o({ mode: o }) {
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ r("section", {
+				children: [/* @__PURE__ */ i("section", {
 					className: a,
-					children: /* @__PURE__ */ r(e, { items: [
-						{
-							key: "list",
-							label: "List",
-							variant: s === "list" ? "default" : "outline",
-							onClick: () => c("list")
-						},
-						{
-							key: "board",
-							label: "Board",
-							variant: s === "board" ? "default" : "outline",
-							onClick: () => c("board")
-						},
-						{
-							key: "timeline",
-							label: "Timeline",
-							variant: s === "timeline" ? "default" : "outline",
-							onClick: () => c("timeline")
-						}
-					] })
+					children: [/* @__PURE__ */ r(e, {
+						value: s,
+						onValueChange: (e) => c(e),
+						items: [
+							{
+								key: "list",
+								label: "List",
+								description: "Rows first"
+							},
+							{
+								key: "board",
+								label: "Board",
+								description: "Kanban view"
+							},
+							{
+								key: "timeline",
+								label: "Timeline",
+								description: "Chronology"
+							}
+						]
+					}), /* @__PURE__ */ r("div", {
+						className: "mt-4",
+						children: /* @__PURE__ */ r(e, {
+							value: l,
+							onValueChange: (e) => u(e),
+							size: "xs",
+							activeVariant: "secondary",
+							allowDeselect: !0,
+							items: [{
+								key: "comfortable",
+								label: "Comfortable"
+							}, {
+								key: "compact",
+								label: "Compact"
+							}]
+						})
+					})]
 				}), /* @__PURE__ */ i("section", {
 					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Selected view"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: s
-					})]
+					children: [
+						/* @__PURE__ */ r("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Selected view"
+						}),
+						/* @__PURE__ */ r("p", {
+							className: "mt-3 text-base font-medium aui-text-strong",
+							children: s
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 text-sm aui-text-muted",
+							children: ["Density: ", l || "none"]
+						})
+					]
 				})]
 			}),
 			o === "playground" ? /* @__PURE__ */ r("section", {

package/dist/showcase/premium/calendar/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/calendar/calendar.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=[`2026-07-18`,`2026-07-19`,`2026-07-25`];function c({mode:e}){let[c,l]=i.useState(`2026-07-14`),[u,d]=i.useState({from:`2026-07-10`,to:`2026-07-15`}),[f,p]=i.useState(2);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:`Date control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Calendar should feel precise, not decorative`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Real usage needs visible range selection, disabled business dates, and month comparison without clutter. This surface shows all three.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Range mode`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Blocked dates`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[1.15fr_0.85fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Range selection`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{mode:`range`,range:u,onRangeChange:d,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-08-31`,disabledDates:s,numberOfMonths:f,pagedNavigation:!0})})]}),(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single date`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{value:c,onValueChange:l,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-07-31`,disabledDates:s})})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsxs)(`p`,{children:[`Single: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c})]}),(0,a.jsxs)(`p`,{children:[`Range start: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.from??`not selected`})]}),(0,a.jsxs)(`p`,{children:[`Range end: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.to??`not selected`})]})]})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:f===1?`default`:`outline`,onClick:()=>p(1),children:`1 month`}),(0,a.jsx)(t.Button,{size:`sm`,variant:f===2?`default`:`outline`,onClick:()=>p(2),children:`2 months`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{l(`2026-07-14`),d({from:`2026-07-10`,to:`2026-07-15`})},children:`Reset selection`})]})}):null]})}exports.CalendarShowcase=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/calendar/calendar.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=[`2026-07-18`,`2026-07-19`,`2026-07-25`];function c({mode:e}){let[c,l]=i.useState(`2026-07-14`),[u,d]=i.useState({from:`2026-07-10`,to:`2026-07-15`}),[f,p]=i.useState(2);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:`Date control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Calendar should feel precise, not decorative`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Real usage needs visible range selection, disabled business dates, and month comparison without clutter. This surface shows all three.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Range mode`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Blocked dates`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[1.15fr_0.85fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Range selection`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{mode:`range`,range:u,onRangeChange:d,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-08-31`,disabledDates:s,numberOfMonths:f,pagedNavigation:!0,showClearShortcut:!0,showTodayShortcut:!0,showSelectionSummary:!0})})]}),(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single date`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{value:c,onValueChange:l,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-07-31`,disabledDates:s,showClearShortcut:!0,showSelectionSummary:!0})})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsxs)(`p`,{children:[`Single: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c})]}),(0,a.jsxs)(`p`,{children:[`Range start: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.from??`not selected`})]}),(0,a.jsxs)(`p`,{children:[`Range end: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.to??`not selected`})]})]})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:f===1?`default`:`outline`,onClick:()=>p(1),children:`1 month`}),(0,a.jsx)(t.Button,{size:`sm`,variant:f===2?`default`:`outline`,onClick:()=>p(2),children:`2 months`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{l(`2026-07-14`),d({from:`2026-07-10`,to:`2026-07-15`})},children:`Reset selection`})]})}):null]})}exports.CalendarShowcase=c;

package/dist/showcase/premium/calendar/showcase.js

@@ -69,7 +69,10 @@ function c({ mode: c }) {
 							max: "2026-08-31",
 							disabledDates: s,
 							numberOfMonths: p,
-							pagedNavigation: !0
+							pagedNavigation: !0,
+							showClearShortcut: !0,
+							showTodayShortcut: !0,
+							showSelectionSummary: !0
 						})
 					})]
 				}), /* @__PURE__ */ a("div", {
@@ -87,7 +90,9 @@ function c({ mode: c }) {
 								defaultMonth: "2026-07-01",
 								min: "2026-07-01",
 								max: "2026-07-31",
-								disabledDates: s
+								disabledDates: s,
+								showClearShortcut: !0,
+								showSelectionSummary: !0
 							})
 						})]
 					}), /* @__PURE__ */ a("section", {

package/dist/showcase/premium/carousel/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/display/carousel.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{title:`Onboarding`,text:`Guide quickly from first login.`},{title:`Components`,text:`Review ready-made dashboard patterns.`},{title:`Release`,text:`Publish, test, and iterate faster.`}];function o(){let[e,o]=r.useState(!0),[s,c]=r.useState(!0),[l,u]=r.useState(0);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,i.jsxs)(t.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>o(e=>!e),children:[e?`Hide`:`Show`,` arrows`]}),(0,i.jsxs)(t.Button,{size:`sm`,variant:s?`default`:`outline`,onClick:()=>c(e=>!e),children:[s?`Hide`:`Show`,` dots`]})]}),(0,i.jsx)(n.Carousel,{index:l,loop:!0,showArrows:e,showDots:s,onIndexChange:e=>u(e),previousLabel:`Previous slide`,nextLabel:`Next slide`,children:a.map((e,t)=>(0,i.jsx)(n.CarouselItem,{children:(0,i.jsx)(`div`,{className:`rounded-xl border border-border bg-card p-8`,children:(0,i.jsx)(`div`,{className:`flex items-start justify-between gap-3`,children:(0,i.jsxs)(`div`,{className:`grid gap-2`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground`,children:`Slide ${t+1}`}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:e.title}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.text})]})})})},e.title))})]})}exports.CarouselShowcase=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/display/carousel.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{title:`Onboarding`,text:`Guide quickly from first login.`,tone:`Launch`},{title:`Components`,text:`Review ready-made dashboard patterns.`,tone:`Library`},{title:`Release`,text:`Publish, test, and iterate faster.`,tone:`Ship`}];function o(){let[e,o]=r.useState(!0),[s,c]=r.useState(!0),[l,u]=r.useState(!1),[d,f]=r.useState(0),[p,m]=r.useState(!1);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,i.jsxs)(t.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>o(e=>!e),children:[e?`Hide`:`Show`,` arrows`]}),(0,i.jsxs)(t.Button,{size:`sm`,variant:s?`default`:`outline`,onClick:()=>c(e=>!e),children:[s?`Hide`:`Show`,` dots`]}),(0,i.jsxs)(t.Button,{size:`sm`,variant:l?`default`:`outline`,onClick:()=>u(e=>!e),children:[l?`Stop`:`Start`,` autoplay`]})]}),(0,i.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:a.map((e,n)=>(0,i.jsxs)(t.Button,{type:`button`,variant:d===n?`default`:`outline`,className:`justify-start`,onClick:()=>f(n),children:[n+1,`. `,e.title]},e.title))}),(0,i.jsx)(n.Carousel,{index:d,loop:!0,showArrows:e,showDots:s,autoplay:l,autoplayInterval:2200,showPlaybackControl:!0,onIndexChange:e=>f(e),onAutoplayChange:m,previousLabel:`Previous slide`,nextLabel:`Next slide`,children:a.map((e,t)=>(0,i.jsx)(n.CarouselItem,{children:(0,i.jsx)(`div`,{className:`min-h-56 rounded-xl border border-border bg-card p-8`,children:(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-2`,children:[(0,i.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] text-primary`,children:e.tone}),(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground`,children:`Slide ${t+1}`}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:e.title}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.text})]}),(0,i.jsxs)(`div`,{className:`rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground`,children:[t+1,`/`,a.length]})]})})},e.title))}),(0,i.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[`Playback: `,p||l?`active`:`paused`]})]})}exports.CarouselShowcase=o;