tembro 2.0.5 → 2.1.0

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;

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

@@ -63,7 +63,10 @@ function s({ state: s, setState: c }) {
 								onChange: (e) => c({ textareaValue: e.target.value }),
 								rows: r[0].rows,
 								className: `${r[0].minHeight} resize-y`,
-								placeholder: r[0].placeholder
+								placeholder: r[0].placeholder,
+								helperText: "Visible helper copy keeps instructions outside the placeholder.",
+								maxLength: 240,
+								showCharacterCount: !0
 							})
 						})]
 					}), /* @__PURE__ */ a("div", {
@@ -135,7 +138,8 @@ function s({ state: s, setState: c }) {
 						children: /* @__PURE__ */ i(t, {
 							defaultValue: r[1].defaultValue,
 							rows: r[1].rows,
-							className: `${r[1].minHeight} resize-none`
+							className: `${r[1].minHeight} resize-none`,
+							helperText: "Uncontrolled draft with stable helper spacing."
 						})
 					})]
 				}), /* @__PURE__ */ a("section", {
@@ -149,7 +153,8 @@ function s({ state: s, setState: c }) {
 							value: r[2].defaultValue,
 							readOnly: r[2].readOnly,
 							rows: r[2].rows,
-							className: `${r[2].minHeight} resize-none opacity-70`
+							className: `${r[2].minHeight} resize-none opacity-70`,
+							errorText: s.textareaValue.trim().length > 0 && s.textareaValue.trim().length < 10 ? "Draft needs at least 10 characters." : void 0
 						}), /* @__PURE__ */ i("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."

package/dist/showcase/premium/toast/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/notifications/toast.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(0),{addToast:l,success:u,warning:d,error:f,clearToasts:p,toasts:m,dismissToast:h}=r.useToast();return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Transient feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Toasts should report short-lived outcomes`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use them for short confirmations and lightweight warnings. Critical blocking states should remain on the page, not vanish into transient notifications.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Success`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Warning`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Error`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,onClick:()=>{c(e=>e+1),l({title:`Sync started`,description:`Sync run ${s+1} has started.`,tone:`info`})},children:`Add toast`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),u({title:`Saved`,description:`Project updated successfully.`,tone:`success`})},children:`Success`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),d(`Please confirm required metadata before publish.`)},children:`Warning`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),f({title:`Request failed`,description:`Failure occurred while saving item #${s+1}`})},children:`Error`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:p,children:`Clear all`})]})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsxs)(`p`,{className:`mb-2 text-sm aui-text-muted`,children:[`Active toasts: `,m.length]}),(0,a.jsx)(`div`,{className:`grid gap-2`,children:m.length===0?(0,a.jsx)(`div`,{className:`rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted`,children:`No active toasts`}):m.map(e=>(0,a.jsxs)(`div`,{className:`flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:e.title??`Untitled`}),(0,a.jsx)(`p`,{className:`aui-text-muted`,children:e.description})]}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>h(e.id),children:`Dismiss`})]},e.id))})]}),null]})}function c({mode:e}){return(0,a.jsx)(r.ToastProvider,{position:`top-right`,defaultDuration:3e3,maxToasts:5,pauseOnHover:e===`playground`,children:(0,a.jsx)(s,{mode:e})})}exports.ToastShowcase=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/notifications/toast.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(0),{addToast:l,success:u,warning:d,error:f,promise:p,clearToasts:m,toasts:h,dismissToast:g}=r.useToast();return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Transient feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Toasts should report short-lived outcomes`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use them for short confirmations and lightweight warnings. Critical blocking states should remain on the page, not vanish into transient notifications.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Success`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Warning`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Error`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,onClick:()=>{c(e=>e+1),l({title:`Sync started`,description:`Sync run ${s+1} has started.`,tone:`info`})},children:`Add toast`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),u({title:`Saved`,description:`Project updated successfully.`,tone:`success`})},children:`Success`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),d(`Please confirm required metadata before publish.`)},children:`Warning`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{c(e=>e+1),f({title:`Request failed`,description:`Failure occurred while saving item #${s+1}`})},children:`Error`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{p(new Promise(e=>{window.setTimeout(()=>e(`Export ready`),1200)}),{loading:{title:`Preparing export`,description:`Building CSV package.`,group:`Export`},success:e=>({title:e,description:`Download can start now.`,group:`Export`}),error:()=>({title:`Export failed`,description:`Retry after refreshing.`,group:`Export`})})},children:`Promise`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:m,children:`Clear all`})]})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsxs)(`p`,{className:`mb-2 text-sm aui-text-muted`,children:[`Active toasts: `,h.length]}),(0,a.jsx)(`div`,{className:`grid gap-2`,children:h.length===0?(0,a.jsx)(`div`,{className:`rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted`,children:`No active toasts`}):h.map(e=>(0,a.jsxs)(`div`,{className:`flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:e.title??`Untitled`}),(0,a.jsx)(`p`,{className:`aui-text-muted`,children:e.description})]}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>g(e.id),children:`Dismiss`})]},e.id))})]}),null]})}function c({mode:e}){return(0,a.jsx)(r.ToastProvider,{position:`top-right`,defaultDuration:3e3,maxToasts:5,pauseOnHover:e===`playground`,children:(0,a.jsx)(s,{mode:e})})}exports.ToastShowcase=c;

package/dist/showcase/premium/toast/showcase.js

@@ -6,7 +6,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/showcase/premium/toast/showcase.tsx
 var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
 function c({ mode: n }) {
-	let [c, l] = i.useState(0), { addToast: u, success: d, warning: f, error: p, clearToasts: m, toasts: h, dismissToast: g } = r();
+	let [c, l] = i.useState(0), { addToast: u, success: d, warning: f, error: p, promise: m, clearToasts: h, toasts: g, dismissToast: _ } = r();
 	return /* @__PURE__ */ o("div", {
 		className: "space-y-5",
 		children: [
@@ -98,7 +98,33 @@ function c({ mode: n }) {
 						/* @__PURE__ */ a(e, {
 							size: "sm",
 							variant: "outline",
-							onClick: m,
+							onClick: () => {
+								m(new Promise((e) => {
+									window.setTimeout(() => e("Export ready"), 1200);
+								}), {
+									loading: {
+										title: "Preparing export",
+										description: "Building CSV package.",
+										group: "Export"
+									},
+									success: (e) => ({
+										title: e,
+										description: "Download can start now.",
+										group: "Export"
+									}),
+									error: () => ({
+										title: "Export failed",
+										description: "Retry after refreshing.",
+										group: "Export"
+									})
+								});
+							},
+							children: "Promise"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: h,
 							children: "Clear all"
 						})
 					]
@@ -108,13 +134,13 @@ function c({ mode: n }) {
 				className: s,
 				children: [/* @__PURE__ */ o("p", {
 					className: "mb-2 text-sm aui-text-muted",
-					children: ["Active toasts: ", h.length]
+					children: ["Active toasts: ", g.length]
 				}), /* @__PURE__ */ a("div", {
 					className: "grid gap-2",
-					children: h.length === 0 ? /* @__PURE__ */ a("div", {
+					children: g.length === 0 ? /* @__PURE__ */ a("div", {
 						className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted",
 						children: "No active toasts"
-					}) : h.map((t) => /* @__PURE__ */ o("div", {
+					}) : g.map((t) => /* @__PURE__ */ o("div", {
 						className: "flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm",
 						children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 							className: "font-medium aui-text-strong",
@@ -125,7 +151,7 @@ function c({ mode: n }) {
 						})] }), /* @__PURE__ */ a(e, {
 							size: "sm",
 							variant: "outline",
-							onClick: () => g(t.id),
+							onClick: () => _(t.id),
 							children: "Dismiss"
 						})]
 					}, t.id))

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

@@ -5,7 +5,7 @@ export type ComponentDemoState = {
     checked: boolean;
     switchOn: boolean;
     selectValue: string;
-    badgeVariant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+    badgeVariant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link";
     cardCompact: boolean;
     activeTab: "overview" | "activity" | "settings";
 };

package/dist/showcase/registry-quality.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`button`,`Button`,`actions`,`Primary action surface for clicks, submit, and quick triggers in dashboard workflows.`),e.component(`input`,`Input`,`inputs`,`Single-line text input for quick edits, queries, and form fields.`),e.component(`select`,`Select`,`inputs`,`Select component with menu-driven single choice workflows.`),e.component(`dialog`,`Dialog`,`overlay`,`Modal surface for confirmation, forms, and contextual workflows.`),e.component(`data-table`,`DataTable`,`data-table`,`High density table with search, filters, rows, actions and pagination context.`),e.component(`date-picker`,`DatePicker`,`calendar`,`Date picker surface for period and event selection.`),e.component(`form-input`,`FormInput`,`form`,`Input wrapper with RHF-ready metadata and helper text.`),e.component(`form-select`,`FormSelect`,`form`,`Select wrapper for controlled local and async choice fields.`),e.component(`form-textarea`,`FormTextarea`,`form`,`Textarea wrapper with helper, validation and consistent spacing.`),e.component(`form-switch`,`FormSwitch`,`form`,`Boolean form control with shell-level label and hint handling.`),e.component(`form-date-picker`,`FormDatePicker`,`form`,`Popover date picker wrapper with RHF integration.`),e.component(`form-date-range-picker`,`FormDateRangePicker`,`form`,`Range date picker wrapper for planning and reporting flows.`),e.component(`alert-dialog`,`AlertDialog`,`overlay`,`Destructive confirmation dialog with loading-ready action states.`),e.component(`drawer`,`Drawer`,`overlay`,`Side panel for contextual details without leaving the page.`),e.component(`pagination`,`Pagination`,`navigation`,`Controlled page navigation with edge buttons and active state.`),e.component(`nav-tabs`,`NavTabs`,`navigation`,`Navigation tabs for switching related document sections.`),e.component(`page-tabs`,`PageTabs`,`navigation`,`Top-level page tab strip for route-sized sections.`),e.component(`stepper-tabs`,`StepperTabs`,`navigation`,`Step-like tabs for setup and onboarding progress.`),e.component(`password-input`,`PasswordInput`,`inputs`,`Password field with visibility toggle and secure autocomplete defaults.`),e.component(`number-input`,`NumberInput`,`inputs`,`Numeric entry for counts, thresholds, and reporting controls.`),e.component(`phone-input`,`PhoneInput`,`inputs`,`Phone input with stable raw and masked value handling.`),e.component(`money-input`,`MoneyInput`,`inputs`,`Currency entry for billing, finance and KPI editing flows.`),e.component(`simple-select`,`SimpleSelect`,`inputs`,`Static local-option select for dashboards and settings forms.`),e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote-loaded select for large server-backed option sets.`),e.component(`combobox`,`Combobox`,`inputs`,`Searchable local choice input for reassignment and command-like selection.`),e.component(`slider`,`Slider`,`inputs`,`Single value range control for density, threshold, and score tuning.`),e.component(`range-slider`,`RangeSlider`,`inputs`,`Two-handle slider for min/max filtering.`),e.component(`rating`,`Rating`,`inputs`,`Compact score input for feedback and review flows.`),e.component(`otp-input`,`OtpInput`,`inputs`,`One-time code entry with fixed-length slots.`),e.component(`inline-editable`,`InlineEditable`,`inputs`,`Inline editing primitive for dense tables and configuration rows.`),e.component(`tag-input`,`TagInput`,`inputs`,`Tokenized text input for labels, skills, and quick filters.`),e.component(`progress`,`Progress`,`display`,`Linear progress with label, value formatter, tone and indeterminate state.`),e.component(`progress-circle`,`ProgressCircle`,`display`,`Compact circular progress for sidebars and status cards.`),e.component(`timeline`,`Timeline`,`display`,`Vertical or horizontal event stream for workflow history.`),e.component(`status-dot`,`StatusDot`,`display`,`Tiny live status indicator with optional pulse animation.`),e.component(`user-card`,`UserCard`,`display`,`User summary row with avatar, metadata and actions.`),e.component(`notification-center`,`NotificationCenter`,`display`,`Compact activity and notifications stream.`),e.component(`data-list`,`DataList`,`display`,`Readable title and description rows for compact operational lists.`),e.component(`status-legend`,`StatusLegend`,`display`,`Explain status meaning and counts in a compact legend.`),e.component(`trend-card`,`TrendCard`,`display`,`Metric summary card with trend context.`),e.component(`action-menu`,`ActionMenu`,`actions`,`Compact dropdown action menu for rows and cards.`),e.component(`button-group`,`ButtonGroup`,`actions`,`Grouped action buttons for view switching and compact controls.`),e.component(`quick-action-grid`,`QuickActionGrid`,`actions`,`Action launcher grid for dense dashboard shortcuts.`),e.component(`filter-bar`,`FilterBar`,`actions`,`Search, filters, active-count and reset actions in one toolbar.`),e.component(`app-header`,`AppHeader`,`layout`,`Sticky product header with left, center and right slots.`),e.component(`section-header`,`SectionHeader`,`layout`,`Reusable section title block with actions and metadata.`),e.component(`stat-card`,`StatCard`,`layout`,`Dashboard stat card for KPI, trend and helper text.`),e.component(`alert`,`Alert`,`feedback`,`Inline feedback banner for success, warning, info, and error states.`),e.component(`page-state`,`PageState`,`feedback`,`Full-page completion or blocked state with next actions.`),e.component(`calendar`,`Calendar`,`calendar`,`Single month calendar surface for date picker and scheduling flows.`),e.component(`file-upload`,`FileUpload`,`upload`,`Full file upload surface with dropzone, action button and helper text.`),e.component(`image-upload`,`ImageUpload`,`upload`,`Image upload pattern with preview-oriented copy.`),e.component(`file-dropzone`,`FileDropzone`,`upload`,`Lightweight file dropzone primitive for custom upload flows.`),e.component(`stepper`,`Stepper`,`wizard`,`Clickable step navigation for multi-step forms.`),e.component(`wizard`,`Wizard`,`wizard`,`Stepper, content and footer controls combined into one workflow.`),e.component(`resource-page`,`ResourcePage`,`patterns`,`Full resource index page shell for admin dashboards.`),e.component(`resource-detail-page`,`ResourceDetailPage`,`patterns`,`Detail page shell with title, metadata and sections.`)]);exports.registryQualityDemoRegistry=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`button`,`Button`,`actions`,`Primary action surface for clicks, submit, and quick triggers in dashboard workflows.`),e.component(`input`,`Input`,`inputs`,`Single-line text input for quick edits, queries, and form fields.`),e.component(`select`,`Select`,`inputs`,`Select component with menu-driven single choice workflows.`),e.component(`dialog`,`Dialog`,`overlay`,`Modal surface for confirmation, forms, and contextual workflows.`),e.component(`data-table`,`DataTable`,`data-table`,`High density table with search, filters, rows, actions and pagination context.`),e.component(`date-picker`,`DatePicker`,`calendar`,`Date picker surface for period and event selection.`),e.component(`form-input`,`FormInput`,`form`,`Input wrapper with RHF-ready metadata and helper text.`),e.component(`form-select`,`FormSelect`,`form`,`Select wrapper for controlled local and async choice fields.`),e.component(`form-textarea`,`FormTextarea`,`form`,`Textarea wrapper with helper, validation and consistent spacing.`),e.component(`form-switch`,`FormSwitch`,`form`,`Boolean form control with shell-level label and hint handling.`),e.component(`form-date-picker`,`FormDatePicker`,`form`,`Popover date picker wrapper with RHF integration.`),e.component(`form-date-range-picker`,`FormDateRangePicker`,`form`,`Range date picker wrapper for planning and reporting flows.`),e.component(`alert-dialog`,`AlertDialog`,`overlay`,`Destructive confirmation dialog with loading-ready action states.`),e.component(`drawer`,`Drawer`,`overlay`,`Side panel for contextual details without leaving the page.`),e.component(`pagination`,`Pagination`,`navigation`,`Controlled page navigation with edge buttons and active state.`),e.component(`nav-tabs`,`NavTabs`,`navigation`,`Navigation tabs for switching related document sections.`),e.component(`page-tabs`,`PageTabs`,`navigation`,`Top-level page tab strip for route-sized sections.`),e.component(`stepper-tabs`,`StepperTabs`,`navigation`,`Step-like tabs for setup and onboarding progress.`),e.component(`password-input`,`PasswordInput`,`inputs`,`Password field with visibility toggle and secure autocomplete defaults.`),e.component(`number-input`,`NumberInput`,`inputs`,`Numeric entry for counts, thresholds, and reporting controls.`),e.component(`phone-input`,`PhoneInput`,`inputs`,`Phone input with stable raw and masked value handling.`),e.component(`money-input`,`MoneyInput`,`inputs`,`Currency entry for billing, finance and KPI editing flows.`),e.component(`simple-select`,`SimpleSelect`,`inputs`,`Static local-option select for dashboards and settings forms.`),e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote-loaded select for large server-backed option sets.`),e.component(`combobox`,`Combobox`,`inputs`,`Searchable local choice input for reassignment and command-like selection.`),e.component(`slider`,`Slider`,`inputs`,`Single value range control for density, threshold, and score tuning.`),e.component(`range-slider`,`RangeSlider`,`inputs`,`Two-handle slider for min/max filtering.`),e.component(`rating`,`Rating`,`inputs`,`Compact score input for feedback and review flows.`),e.component(`otp-input`,`OtpInput`,`inputs`,`One-time code entry with fixed-length slots.`),e.component(`inline-editable`,`InlineEditable`,`inputs`,`Inline editing primitive for dense tables and configuration rows.`),e.component(`tag-input`,`TagInput`,`inputs`,`Tokenized text input for labels, skills, and quick filters.`),e.component(`progress`,`Progress`,`display`,`Linear progress with label, value formatter, tone and indeterminate state.`),e.component(`progress-circle`,`ProgressCircle`,`display`,`Compact circular progress for sidebars and status cards.`),e.component(`timeline`,`Timeline`,`display`,`Vertical or horizontal event stream for workflow history.`),e.component(`status-dot`,`StatusDot`,`display`,`Tiny live status indicator with optional pulse animation.`),e.component(`user-card`,`UserCard`,`display`,`User summary row with avatar, metadata and actions.`),e.component(`notification-center`,`NotificationCenter`,`display`,`Compact activity and notifications stream.`),e.component(`data-list`,`DataList`,`display`,`Readable title and description rows for compact operational lists.`),e.component(`status-legend`,`StatusLegend`,`display`,`Explain status meaning and counts in a compact legend.`),e.component(`trend-card`,`TrendCard`,`display`,`Metric summary card with trend context.`),e.component(`action-menu`,`ActionMenu`,`actions`,`Compact dropdown action menu for rows and cards.`),e.component(`button-group`,`ButtonGroup`,`actions`,`Grouped action buttons for view switching and compact controls.`),e.component(`quick-action-grid`,`QuickActionGrid`,`actions`,`Action launcher grid for dense dashboard shortcuts.`),e.component(`filter-bar`,`FilterBar`,`actions`,`Search, filters, active-count and reset actions in one toolbar.`),e.component(`app-header`,`AppHeader`,`layout`,`Sticky product header with left, center and right slots.`),e.component(`app-shell`,`AppShell`,`layout`,`Responsive application shell with sidebar, header and content regions.`),e.component(`section-header`,`SectionHeader`,`layout`,`Reusable section title block with actions and metadata.`),e.component(`stat-card`,`StatCard`,`layout`,`Dashboard stat card for KPI, trend and helper text.`),e.component(`alert`,`Alert`,`feedback`,`Inline feedback banner for success, warning, info, and error states.`),e.component(`page-state`,`PageState`,`feedback`,`Full-page completion or blocked state with next actions.`),e.component(`calendar`,`Calendar`,`calendar`,`Single month calendar surface for date picker and scheduling flows.`),e.component(`file-upload`,`FileUpload`,`upload`,`Full file upload surface with dropzone, action button and helper text.`),e.component(`image-upload`,`ImageUpload`,`upload`,`Image upload pattern with preview-oriented copy.`),e.component(`file-dropzone`,`FileDropzone`,`upload`,`Lightweight file dropzone primitive for custom upload flows.`),e.component(`stepper`,`Stepper`,`wizard`,`Clickable step navigation for multi-step forms.`),e.component(`wizard`,`Wizard`,`wizard`,`Stepper, content and footer controls combined into one workflow.`),e.component(`resource-page`,`ResourcePage`,`patterns`,`Full resource index page shell for admin dashboards.`),e.component(`resource-detail-page`,`ResourceDetailPage`,`patterns`,`Detail page shell with title, metadata and sections.`)]);exports.registryQualityDemoRegistry=t;

package/dist/showcase/registry-quality.js

@@ -46,6 +46,7 @@ var n = t([
 	e("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
 	e("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 	e("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
+	e("app-shell", "AppShell", "layout", "Responsive application shell with sidebar, header and content regions."),
 	e("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
 	e("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
 	e("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),