tembro 2.0.6 → 2.1.0

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

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

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

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

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

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

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

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

package/dist/showcase/premium/tabs/showcase.js

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

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { FormEvent, useState } from "react"
-import { Textarea } from "@/index"
+import { Textarea } from "tembro"
 
 export function Example() {
   const [note, setNote] = useState("")
@@ -12,11 +12,19 @@ export function Example() {
 
   return (
     <form onSubmit={submit} className="space-y-3">
-      <Textarea rows={6} value={note} onChange={(event) => setNote(event.target.value)} placeholder="Write your message..." />
-      <Textarea rows={4} defaultValue="Internal changelog draft..." />
+      <Textarea
+        rows={6}
+        value={note}
+        onValueChange={setNote}
+        placeholder="Write your message..."
+        helperText="Keep instructions visible below the field."
+        errorText={error ? "Please enter at least 10 characters." : undefined}
+        maxLength={240}
+        showCharacterCount
+      />
+      <Textarea rows={4} defaultValue="Internal changelog draft..." helperText="Draft copy" />
       <Textarea readOnly value="Locked review comment" rows={3} />
       <button type="submit">Submit</button>
-      {error ? <p className="text-sm text-red-600">Please enter at least 10 characters.</p> : null}
     </form>
   )
 }`,htmlCode:`<textarea data-slot="textarea" placeholder="Write your message..." rows="6"></textarea>`,cliCommand:`npx tembro add textarea`,highlights:[`Long-form notes`,`Multiline forms`,`Rows/height control`,`Validation-friendly error context`],relatedBlockSlugs:[`settings-form`,`auth-sign-in`,`pricing-section`],scenarios:[{title:`Support notes`,description:`Capture longer messages with 6+ rows without layout shift.`},{title:`Release notes`,description:`Use multiline fields for changelog and update summaries.`},{title:`Review comments`,description:`Keep readOnly previews for policy or audit style workflows.`},{title:`Internal description editor`,description:`Combine rows with validation text and section headers.`}],capabilityNotes:[`Designed for multi-line content with enough vertical rhythm for long text.`,`Supports controlled/uncontrolled usage with rows customization.`,`Should demonstrate empty, filled and read-only states in form contexts.`,`Pairs well with form shells and richer editorial patterns.`]};exports.textareaMock=e;

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/textarea/mock.ts
 var e = {
-	code: "import { FormEvent, useState } from \"react\"\nimport { Textarea } from \"@/index\"\n\nexport function Example() {\n  const [note, setNote] = useState(\"\")\n  const [error, setError] = useState(false)\n\n  function submit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    setError(note.trim().length < 10)\n  }\n\n  return (\n    <form onSubmit={submit} className=\"space-y-3\">\n      <Textarea rows={6} value={note} onChange={(event) => setNote(event.target.value)} placeholder=\"Write your message...\" />\n      <Textarea rows={4} defaultValue=\"Internal changelog draft...\" />\n      <Textarea readOnly value=\"Locked review comment\" rows={3} />\n      <button type=\"submit\">Submit</button>\n      {error ? <p className=\"text-sm text-red-600\">Please enter at least 10 characters.</p> : null}\n    </form>\n  )\n}",
+	code: "import { FormEvent, useState } from \"react\"\nimport { Textarea } from \"tembro\"\n\nexport function Example() {\n  const [note, setNote] = useState(\"\")\n  const [error, setError] = useState(false)\n\n  function submit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    setError(note.trim().length < 10)\n  }\n\n  return (\n    <form onSubmit={submit} className=\"space-y-3\">\n      <Textarea\n        rows={6}\n        value={note}\n        onValueChange={setNote}\n        placeholder=\"Write your message...\"\n        helperText=\"Keep instructions visible below the field.\"\n        errorText={error ? \"Please enter at least 10 characters.\" : undefined}\n        maxLength={240}\n        showCharacterCount\n      />\n      <Textarea rows={4} defaultValue=\"Internal changelog draft...\" helperText=\"Draft copy\" />\n      <Textarea readOnly value=\"Locked review comment\" rows={3} />\n      <button type=\"submit\">Submit</button>\n    </form>\n  )\n}",
 	htmlCode: "<textarea data-slot=\"textarea\" placeholder=\"Write your message...\" rows=\"6\"></textarea>",
 	cliCommand: "npx tembro add textarea",
 	highlights: [

package/dist/showcase/premium/textarea/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/textarea/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Long-form entry`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Textarea should feel calm and readable`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for notes, summaries, and message bodies. The preview should focus on readability, resize behavior, and passive states instead of raw field duplication.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Editable`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Read-only`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Resizable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Internal note`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.Textarea,{value:o.textareaValue,onChange:e=>s({textareaValue:e.target.value}),rows:r.textareaDemoFields[0].rows,className:`${r.textareaDemoFields[0].minHeight} resize-y`,placeholder:r.textareaDemoFields[0].placeholder})})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current length`}),(0,i.jsxs)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:[o.textareaValue.length,` chars`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Long text surfaces should stay readable before they become decorative. Keep line-height, contrast, and padding stable as content grows.`})]})]})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Draft length: `,o.textareaValue.length,` characters`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Fill or clear the note to verify controlled textarea behavior and visual density.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({textareaValue:`Customer prefers weekly status updates and a shorter approval cycle.`}),children:`Fill sample`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({textareaValue:``}),children:`Clear`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Pre-filled draft`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.Textarea,{defaultValue:r.textareaDemoFields[1].defaultValue,rows:r.textareaDemoFields[1].rows,className:`${r.textareaDemoFields[1].minHeight} resize-none`})})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Read-only copy`}),(0,i.jsxs)(`div`,{className:`mt-3 space-y-3`,children:[(0,i.jsx)(t.Textarea,{value:r.textareaDemoFields[2].defaultValue,readOnly:r.textareaDemoFields[2].readOnly,rows:r.textareaDemoFields[2].rows,className:`${r.textareaDemoFields[2].minHeight} resize-none opacity-70`}),(0,i.jsx)(`p`,{className:`text-sm leading-6 aui-text-muted`,children:`Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.`})]})]})]})]})}exports.TextareaShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/textarea/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Long-form entry`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Textarea should feel calm and readable`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for notes, summaries, and message bodies. The preview should focus on readability, resize behavior, and passive states instead of raw field duplication.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Editable`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Read-only`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Resizable`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]`,children:[(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Internal note`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.Textarea,{value:o.textareaValue,onChange:e=>s({textareaValue:e.target.value}),rows:r.textareaDemoFields[0].rows,className:`${r.textareaDemoFields[0].minHeight} resize-y`,placeholder:r.textareaDemoFields[0].placeholder,helperText:`Visible helper copy keeps instructions outside the placeholder.`,maxLength:240,showCharacterCount:!0})})]}),(0,i.jsxs)(`div`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current length`}),(0,i.jsxs)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:[o.textareaValue.length,` chars`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Long text surfaces should stay readable before they become decorative. Keep line-height, contrast, and padding stable as content grows.`})]})]})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Draft length: `,o.textareaValue.length,` characters`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Fill or clear the note to verify controlled textarea behavior and visual density.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({textareaValue:`Customer prefers weekly status updates and a shorter approval cycle.`}),children:`Fill sample`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({textareaValue:``}),children:`Clear`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Pre-filled draft`}),(0,i.jsx)(`div`,{className:`mt-3`,children:(0,i.jsx)(t.Textarea,{defaultValue:r.textareaDemoFields[1].defaultValue,rows:r.textareaDemoFields[1].rows,className:`${r.textareaDemoFields[1].minHeight} resize-none`,helperText:`Uncontrolled draft with stable helper spacing.`})})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Read-only copy`}),(0,i.jsxs)(`div`,{className:`mt-3 space-y-3`,children:[(0,i.jsx)(t.Textarea,{value:r.textareaDemoFields[2].defaultValue,readOnly:r.textareaDemoFields[2].readOnly,rows:r.textareaDemoFields[2].rows,className:`${r.textareaDemoFields[2].minHeight} resize-none opacity-70`,errorText:o.textareaValue.trim().length>0&&o.textareaValue.trim().length<10?`Draft needs at least 10 characters.`:void 0}),(0,i.jsx)(`p`,{className:`text-sm leading-6 aui-text-muted`,children:`Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.`})]})]})]})]})}exports.TextareaShowcase=o;