tembro 1.0.0

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

@@ -0,0 +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;

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

@@ -0,0 +1,2 @@
+import type { ComponentDemoProps } from "../types";
+export declare function TabsShowcase({ state, setState }: ComponentDemoProps): import("react").JSX.Element;

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

@@ -0,0 +1,133 @@
+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";
+//#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", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ s("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", {
+						className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+						children: "View switching"
+					}),
+					/* @__PURE__ */ o("h3", {
+						className: "aui-text-strong mt-3 text-2xl font-semibold tracking-tight",
+						children: "Tabs should read like page sections"
+					}),
+					/* @__PURE__ */ o("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", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: c,
+						children: [
+							/* @__PURE__ */ o("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+								children: "Current tab"
+							}),
+							/* @__PURE__ */ o("p", {
+								className: "mt-3 text-lg font-semibold aui-text-strong",
+								children: d?.label
+							}),
+							/* @__PURE__ */ o("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,
+						children: [
+							/* @__PURE__ */ o("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+								children: "Sections"
+							}),
+							/* @__PURE__ */ s("p", {
+								className: "mt-3 text-lg font-semibold aui-text-strong",
+								children: [a.length, " surfaces"]
+							}),
+							/* @__PURE__ */ o("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,
+						children: [
+							/* @__PURE__ */ o("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+								children: "Pattern"
+							}),
+							/* @__PURE__ */ o("p", {
+								className: "mt-3 text-lg font-semibold aui-text-strong",
+								children: "Page sections"
+							}),
+							/* @__PURE__ */ o("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."
+							})
+						]
+					})
+				]
+			}),
+			/* @__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, {
+						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", {
+					className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ s("div", { children: [
+						/* @__PURE__ */ o("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+							children: "Live state"
+						}),
+						/* @__PURE__ */ s("h4", {
+							className: "mt-2 text-lg font-semibold aui-text-strong",
+							children: ["Active tab: ", d?.label]
+						}),
+						/* @__PURE__ */ o("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", {
+						className: "flex flex-wrap gap-2",
+						children: a.map((t) => /* @__PURE__ */ o(e, {
+							type: "button",
+							size: "sm",
+							variant: l.activeTab === t.value ? "default" : "secondary",
+							onClick: () => u({ activeTab: t.value }),
+							children: t.label
+						}, t.value))
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { l as TabsShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

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

@@ -0,0 +1,5 @@
+export type TabsDemoPanel = {
+    value: "overview" | "activity" | "settings";
+    label: string;
+    content: string;
+};

package/dist/showcase/premium/tag/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.TagShowcase=t.TagShowcase,exports.tagMock=e.tagMock;

package/dist/showcase/premium/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { tagMock } from "./mock";
+export { TagShowcase } from "./showcase";

package/dist/showcase/premium/tag/index.js

@@ -0,0 +1,3 @@
+import { tagMock as e } from "./mock.js";
+import { TagShowcase as t } from "./showcase.js";
+export { t as TagShowcase, e as tagMock };

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Tag } from "@/index"
+
+export function Example() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Tag tone="success">Online</Tag>
+      <Tag tone="warning">Review</Tag>
+      <Tag tone="danger" removable>
+        Remove me
+      </Tag>
+    </div>
+  )
+}`,cliCommand:`npx tembro add tag`,highlights:[`Semantic tones for state and status information`,`Selectable and removable tags`,`Works in compact metadata strips`],scenarios:[{title:`Statuses`,description:`Represent task lifecycle with tone variants.`},{title:`Filters`,description:`Display and clear active filters quickly.`},{title:`Topics`,description:`Render labels without overloading metadata cards.`}]};exports.tagMock=e;

package/dist/showcase/premium/tag/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const tagMock: ComponentDemoMock;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/tag/mock.ts
+var e = {
+	code: "import { Tag } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Tag tone=\"success\">Online</Tag>\n      <Tag tone=\"warning\">Review</Tag>\n      <Tag tone=\"danger\" removable>\n        Remove me\n      </Tag>\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add tag",
+	highlights: [
+		"Semantic tones for state and status information",
+		"Selectable and removable tags",
+		"Works in compact metadata strips"
+	],
+	scenarios: [
+		{
+			title: "Statuses",
+			description: "Represent task lifecycle with tone variants."
+		},
+		{
+			title: "Filters",
+			description: "Display and clear active filters quickly."
+		},
+		{
+			title: "Topics",
+			description: "Render labels without overloading metadata cards."
+		}
+	]
+};
+//#endregion
+export { e as tagMock };

package/dist/showcase/premium/tag/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/tag.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(){let e=[{key:`team`,label:`Team`,tone:`info`},{key:`ready`,label:`Ready`,tone:`success`},{key:`warn`,label:`Warn`,tone:`warning`},{key:`block`,label:`Blocked`,tone:`danger`}],[a,o]=r.useState(e),s=e=>o(t=>t.filter(t=>t.key!==e));return(0,i.jsx)(`div`,{className:`space-y-4`,children:(0,i.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-4`,children:[(0,i.jsxs)(`div`,{className:`mb-4 flex items-center justify-between gap-3`,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:`Filter tags`}),(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>o(e),children:`Reset`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[a.map(e=>(0,i.jsx)(n.Tag,{tone:e.tone,removable:!0,onRemove:()=>s(e.key),children:e.label},e.key)),a.length===0?(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`No filters`}):null]})]})})}exports.TagShowcase=a;

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

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function TagShowcase(): React.JSX.Element;

package/dist/showcase/premium/tag/showcase.js

@@ -0,0 +1,60 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Tag as t } from "../../../components/display/tag.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/tag/showcase.tsx
+function a() {
+	let a = [
+		{
+			key: "team",
+			label: "Team",
+			tone: "info"
+		},
+		{
+			key: "ready",
+			label: "Ready",
+			tone: "success"
+		},
+		{
+			key: "warn",
+			label: "Warn",
+			tone: "warning"
+		},
+		{
+			key: "block",
+			label: "Blocked",
+			tone: "danger"
+		}
+	], [o, s] = n.useState(a), c = (e) => s((t) => t.filter((t) => t.key !== e));
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: /* @__PURE__ */ i("div", {
+			className: "rounded-lg border border-border bg-card p-4",
+			children: [/* @__PURE__ */ i("div", {
+				className: "mb-4 flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-sm font-medium text-foreground",
+					children: "Filter tags"
+				}), /* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => s(a),
+					children: "Reset"
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: "flex flex-wrap gap-2",
+				children: [o.map((e) => /* @__PURE__ */ r(t, {
+					tone: e.tone,
+					removable: !0,
+					onRemove: () => c(e.key),
+					children: e.label
+				}, e.key)), o.length === 0 ? /* @__PURE__ */ r("span", {
+					className: "text-sm text-muted-foreground",
+					children: "No filters"
+				}) : null]
+			})]
+		})
+	});
+}
+//#endregion
+export { a as TagShowcase };

package/dist/showcase/premium/tag-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.TagInputShowcase=e.TagInputShowcase,exports.tagInputMock=t.tagInputMock;

package/dist/showcase/premium/tag-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TagInputShowcase } from "./showcase";
+export { tagInputMock } from "./mock";

package/dist/showcase/premium/tag-input/index.js

@@ -0,0 +1,3 @@
+import { TagInputShowcase as e } from "./showcase.js";
+import { tagInputMock as t } from "./mock.js";
+export { e as TagInputShowcase, t as tagInputMock };

package/dist/showcase/premium/tag-input/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { TagInput } from "tembro"
+
+export function Example() {
+  const [tags, setTags] = React.useState(["billing", "priority"])
+
+  return (
+    <TagInput
+      value={tags}
+      onValueChange={setTags}
+      maxTags={5}
+    />
+  )
+}`,highlights:[`Add/remove tag chips`,`Max tag support`,`Backspace remove behavior`,`Good for labels, filters, and categorization`],scenarios:[{title:`Record labels`,description:`Attach operational tags to invoices, tickets, or users.`},{title:`Saved filters`,description:`Represent multi-value filter state in a compact input.`},{title:`Skill lists`,description:`Collect short multi-entry labels without building a custom repeater.`}],capabilityNotes:[`TagInput is for short normalized labels, not long rich text tokens.`,`Backspace remove is important when the field is keyboard-heavy.`,"Use `maxTags` when the domain has a sensible cap."]};exports.tagInputMock=e;

package/dist/showcase/premium/tag-input/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const tagInputMock: ComponentDemoMock;

package/dist/showcase/premium/tag-input/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/tag-input/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { TagInput } from \"tembro\"\n\nexport function Example() {\n  const [tags, setTags] = React.useState([\"billing\", \"priority\"])\n\n  return (\n    <TagInput\n      value={tags}\n      onValueChange={setTags}\n      maxTags={5}\n    />\n  )\n}",
+	highlights: [
+		"Add/remove tag chips",
+		"Max tag support",
+		"Backspace remove behavior",
+		"Good for labels, filters, and categorization"
+	],
+	scenarios: [
+		{
+			title: "Record labels",
+			description: "Attach operational tags to invoices, tickets, or users."
+		},
+		{
+			title: "Saved filters",
+			description: "Represent multi-value filter state in a compact input."
+		},
+		{
+			title: "Skill lists",
+			description: "Collect short multi-entry labels without building a custom repeater."
+		}
+	],
+	capabilityNotes: [
+		"TagInput is for short normalized labels, not long rich text tokens.",
+		"Backspace remove is important when the field is keyboard-heavy.",
+		"Use `maxTags` when the domain has a sensible cap."
+	]
+};
+//#endregion
+export { e as tagInputMock };

package/dist/showcase/premium/tag-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/tag-input.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState([`billing`,`priority`]);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Token input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`TagInput should make multi-label entry feel lightweight`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Good tag UX means adding, removing, and reviewing short labels without dragging the user into a full form builder.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Multi value`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Keyboard friendly`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.TagInput,{value:o,onValueChange:s,maxTags:5})}),(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:`Current tags`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o.join(`, `)||`No tags`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Bu component label, quick filter va qisqa metadata tokenlari uchun kuchli. Uzun structured input uchun emas.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"`Enter` yoki `,` bilan tag qo‘shing. Input bo‘sh bo‘lsa `Backspace` oxirgi tagni o‘chiradi."})}):null]})}exports.TagInputShowcase=o;

package/dist/showcase/premium/tag-input/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function TagInputShowcase({ mode }: ComponentDemoProps): React.JSX.Element;

package/dist/showcase/premium/tag-input/showcase.js

@@ -0,0 +1,87 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { TagInput as t } from "../../../components/inputs/tag-input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/tag-input/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function o({ mode: o }) {
+	let [s, c] = n.useState(["billing", "priority"]);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Token input"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "TagInput should make multi-label entry feel lightweight"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Good tag UX means adding, removing, and reviewing short labels without dragging the user into a full form builder."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Multi value"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Keyboard friendly"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r(t, {
+					value: s,
+					onValueChange: c,
+					maxTags: 5
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current tags"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: s.join(", ") || "No tags"
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Bu component label, quick filter va qisqa metadata tokenlari uchun kuchli. Uzun structured input uchun emas."
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "`Enter` yoki `,` bilan tag qo‘shing. Input bo‘sh bo‘lsa `Backspace` oxirgi tagni o‘chiradi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as TagInputShowcase };

package/dist/showcase/premium/tag-list/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.TagListShowcase=t.TagListShowcase,exports.tagListMock=e.tagListMock;

package/dist/showcase/premium/tag-list/index.d.ts

@@ -0,0 +1,2 @@
+export { tagListMock } from "./mock";
+export { TagListShowcase } from "./showcase";

package/dist/showcase/premium/tag-list/index.js

@@ -0,0 +1,3 @@
+import { tagListMock as e } from "./mock.js";
+import { TagListShowcase as t } from "./showcase.js";
+export { t as TagListShowcase, e as tagListMock };

package/dist/showcase/premium/tag-list/mock.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { TagList } from "@/index"
+
+export function Example() {
+  const [items, setItems] = React.useState([
+    { key: "react", label: "React" },
+    { key: "typescript", label: "TypeScript" },
+    { key: "design-system", label: "Design system" },
+  ])
+
+  return <TagList items={items} removable onRemove={(item) => setItems((list) => list.filter((entry) => entry.key !== item.key))} />
+}`,cliCommand:`npx tembro add tag-list`,highlights:[`Compact badge-based collection of labels`,`Optional remove actions for editable taxonomies`,`Useful for skills, filters, product areas, and metadata chips`],scenarios:[{title:`Skill chips`,description:`Show categorized labels without building a full tag input field.`},{title:`Selected filters`,description:`Summarize active states at the top of a page.`},{title:`Editable metadata`,description:`Allow small remove actions on existing labels.`}]};exports.tagListMock=e;

package/dist/showcase/premium/tag-list/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const tagListMock: ComponentDemoMock;

package/dist/showcase/premium/tag-list/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/tag-list/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { TagList } from \"@/index\"\n\nexport function Example() {\n  const [items, setItems] = React.useState([\n    { key: \"react\", label: \"React\" },\n    { key: \"typescript\", label: \"TypeScript\" },\n    { key: \"design-system\", label: \"Design system\" },\n  ])\n\n  return <TagList items={items} removable onRemove={(item) => setItems((list) => list.filter((entry) => entry.key !== item.key))} />\n}",
+	cliCommand: "npx tembro add tag-list",
+	highlights: [
+		"Compact badge-based collection of labels",
+		"Optional remove actions for editable taxonomies",
+		"Useful for skills, filters, product areas, and metadata chips"
+	],
+	scenarios: [
+		{
+			title: "Skill chips",
+			description: "Show categorized labels without building a full tag input field."
+		},
+		{
+			title: "Selected filters",
+			description: "Summarize active states at the top of a page."
+		},
+		{
+			title: "Editable metadata",
+			description: "Allow small remove actions on existing labels."
+		}
+	]
+};
+//#endregion
+export { e as tagListMock };

package/dist/showcase/premium/tag-list/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/tag-list.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=`border-t border-[color:var(--aui-divider)] py-6`,a=[{key:`react`,label:`React`},{key:`typescript`,label:`TypeScript`},{key:`dashboard`,label:`Dashboard`},{key:`design-system`,label:`Design system`},{key:`release`,label:`Release`}];function o(){let[e,o]=n.useState(a);return(0,r.jsxs)(`div`,{className:`space-y-0`,children:[(0,r.jsxs)(`section`,{className:`pb-6`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`TagList shows existing labels, not text entry`}),(0,r.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use TagList to display or lightly edit known labels. If the user must type new values, move to TagInput instead.`})]}),(0,r.jsx)(`section`,{className:i,children:(0,r.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Editable metadata chips`}),(0,r.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Remove actions should stay small and secondary so the tags remain readable as content first.`}),(0,r.jsx)(`div`,{className:`mt-5 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,r.jsx)(t.TagList,{items:e,removable:!0,onRemove:e=>o(t=>t.filter(t=>t.key!==e.key))})})]}),(0,r.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,r.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,r.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,r.jsx)(`p`,{children:`TagList is display-first. It should not impersonate a full input when creation is not available.`}),(0,r.jsx)(`p`,{children:"Use `max` when pages need a condensed summary and overflow should collapse into a count chip."})]})]})]})})]})}exports.TagListShowcase=o;

package/dist/showcase/premium/tag-list/showcase.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function TagListShowcase(): React.JSX.Element;

package/dist/showcase/premium/tag-list/showcase.js

@@ -0,0 +1,83 @@
+import { TagList as e } from "../../../components/display/tag-list.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/tag-list/showcase.tsx
+var i = "border-t border-[color:var(--aui-divider)] py-6", a = [
+	{
+		key: "react",
+		label: "React"
+	},
+	{
+		key: "typescript",
+		label: "TypeScript"
+	},
+	{
+		key: "dashboard",
+		label: "Dashboard"
+	},
+	{
+		key: "design-system",
+		label: "Design system"
+	},
+	{
+		key: "release",
+		label: "Release"
+	}
+];
+function o() {
+	let [o, s] = t.useState(a);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ r("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ n("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ n("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "TagList shows existing labels, not text entry"
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use TagList to display or lightly edit known labels. If the user must type new values, move to TagInput instead."
+				})
+			]
+		}), /* @__PURE__ */ n("section", {
+			className: i,
+			children: /* @__PURE__ */ r("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ r("div", { children: [
+					/* @__PURE__ */ n("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Editable metadata chips"
+					}),
+					/* @__PURE__ */ n("p", {
+						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+						children: "Remove actions should stay small and secondary so the tags remain readable as content first."
+					}),
+					/* @__PURE__ */ n("div", {
+						className: "mt-5 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+						children: /* @__PURE__ */ n(e, {
+							items: o,
+							removable: !0,
+							onRemove: (e) => s((t) => t.filter((t) => t.key !== e.key))
+						})
+					})
+				] }), /* @__PURE__ */ r("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ n("p", {
+						className: "text-sm font-semibold aui-text-strong",
+						children: "Guidance"
+					}), /* @__PURE__ */ r("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [/* @__PURE__ */ n("p", { children: "TagList is display-first. It should not impersonate a full input when creation is not available." }), /* @__PURE__ */ n("p", { children: "Use `max` when pages need a condensed summary and overflow should collapse into a count chip." })]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { o as TagListShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Primary note`,placeholder:`Write a detailed note...`,minHeight:`min-h-28`,rows:6},{title:`Internal changelog draft`,defaultValue:`Internal changelog draft...`,minHeight:`min-h-20`,rows:4},{title:`Locked review comment`,defaultValue:`Locked review comment`,readOnly:!0,minHeight:`min-h-20`,rows:3}];exports.textareaDemoFields=e;

package/dist/showcase/premium/textarea/data.d.ts

@@ -0,0 +1,2 @@
+import type { TextareaDemoField } from "./types";
+export declare const textareaDemoFields: TextareaDemoField[];

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

@@ -0,0 +1,24 @@
+//#region src/showcase/premium/textarea/data.ts
+var e = [
+	{
+		title: "Primary note",
+		placeholder: "Write a detailed note...",
+		minHeight: "min-h-28",
+		rows: 6
+	},
+	{
+		title: "Internal changelog draft",
+		defaultValue: "Internal changelog draft...",
+		minHeight: "min-h-20",
+		rows: 4
+	},
+	{
+		title: "Locked review comment",
+		defaultValue: "Locked review comment",
+		readOnly: !0,
+		minHeight: "min-h-20",
+		rows: 3
+	}
+];
+//#endregion
+export { e as textareaDemoFields };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./data.cjs"),t=require("./showcase.cjs"),n=require("./mock.cjs");exports.TextareaShowcase=t.TextareaShowcase,exports.textareaDemoFields=e.textareaDemoFields,exports.textareaMock=n.textareaMock;