tembro 3.1.16 → 4.0.0

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

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

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

@@ -1 +0,0 @@
-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/src/showcase/premium/tag/index.js

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

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

@@ -1,13 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Tag } from "tembro"
-
-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/src/showcase/premium/tag/mock.js

@@ -1,26 +0,0 @@
-//#region src/showcase/premium/tag/mock.ts
-var e = {
-	code: "import { Tag } from \"tembro\"\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/src/showcase/premium/tag/showcase.cjs

@@ -1 +0,0 @@
-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:`Design team`,tone:`info`},{key:`ready`,label:`Ready`,tone:`success`},{key:`warn`,label:`Needs review`,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.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-5 lg:flex-row lg:items-start lg:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Metadata`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Tags should stay compact and removable`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use tags for filters, topics, and lightweight status metadata where the user may need to remove a single token.`})]}),(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>o(e),children:`Reset`})]}),(0,i.jsxs)(`div`,{className:`mt-6 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 aui-text-muted`,children:`No filters`}):null]})]}),(0,i.jsxs)(`section`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,i.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Sizes`}),(0,i.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,i.jsx)(n.Tag,{size:`sm`,children:`Small`}),(0,i.jsx)(n.Tag,{children:`Default`}),(0,i.jsx)(n.Tag,{size:`lg`,children:`Large`}),(0,i.jsx)(n.Tag,{selected:!0,children:`Selected`})]})]}),(0,i.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Tones`}),(0,i.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,i.jsx)(n.Tag,{tone:`neutral`,children:`Neutral`}),(0,i.jsx)(n.Tag,{tone:`info`,children:`Info`}),(0,i.jsx)(n.Tag,{tone:`success`,children:`Success`}),(0,i.jsx)(n.Tag,{tone:`warning`,children:`Warning`}),(0,i.jsx)(n.Tag,{tone:`danger`,children:`Danger`})]})]})]})]})}exports.TagShowcase=a;

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

@@ -1,129 +0,0 @@
-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: "Design team",
-			tone: "info"
-		},
-		{
-			key: "ready",
-			label: "Ready",
-			tone: "success"
-		},
-		{
-			key: "warn",
-			label: "Needs review",
-			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__ */ i("div", {
-		className: "space-y-5",
-		children: [/* @__PURE__ */ i("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-5 lg:flex-row lg:items-start lg:justify-between",
-				children: [/* @__PURE__ */ i("div", {
-					className: "max-w-xl",
-					children: [
-						/* @__PURE__ */ r("p", {
-							className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-							children: "Metadata"
-						}),
-						/* @__PURE__ */ r("h3", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: "Tags should stay compact and removable"
-						}),
-						/* @__PURE__ */ r("p", {
-							className: "mt-3 text-sm leading-6 aui-text-muted",
-							children: "Use tags for filters, topics, and lightweight status metadata where the user may need to remove a single token."
-						})
-					]
-				}), /* @__PURE__ */ r(e, {
-					size: "sm",
-					variant: "outline",
-					onClick: () => s(a),
-					children: "Reset"
-				})]
-			}), /* @__PURE__ */ i("div", {
-				className: "mt-6 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 aui-text-muted",
-					children: "No filters"
-				}) : null]
-			})]
-		}), /* @__PURE__ */ i("section", {
-			className: "grid gap-4 md:grid-cols-2",
-			children: [/* @__PURE__ */ i("div", {
-				className: "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
-				children: [/* @__PURE__ */ r("p", {
-					className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-					children: "Sizes"
-				}), /* @__PURE__ */ i("div", {
-					className: "mt-4 flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ r(t, {
-							size: "sm",
-							children: "Small"
-						}),
-						/* @__PURE__ */ r(t, { children: "Default" }),
-						/* @__PURE__ */ r(t, {
-							size: "lg",
-							children: "Large"
-						}),
-						/* @__PURE__ */ r(t, {
-							selected: !0,
-							children: "Selected"
-						})
-					]
-				})]
-			}), /* @__PURE__ */ i("div", {
-				className: "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
-				children: [/* @__PURE__ */ r("p", {
-					className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-					children: "Tones"
-				}), /* @__PURE__ */ i("div", {
-					className: "mt-4 flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ r(t, {
-							tone: "neutral",
-							children: "Neutral"
-						}),
-						/* @__PURE__ */ r(t, {
-							tone: "info",
-							children: "Info"
-						}),
-						/* @__PURE__ */ r(t, {
-							tone: "success",
-							children: "Success"
-						}),
-						/* @__PURE__ */ r(t, {
-							tone: "warning",
-							children: "Warning"
-						}),
-						/* @__PURE__ */ r(t, {
-							tone: "danger",
-							children: "Danger"
-						})
-					]
-				})]
-			})]
-		})]
-	});
-}
-//#endregion
-export { a as TagShowcase };

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

@@ -1 +0,0 @@
-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/src/showcase/premium/tag-input/index.js

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

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

@@ -1,14 +0,0 @@
-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/src/showcase/premium/tag-input/mock.js

@@ -1,31 +0,0 @@
-//#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/src/showcase/premium/tag-input/showcase.cjs

@@ -1 +0,0 @@
-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/src/showcase/premium/tag-input/showcase.js

@@ -1,87 +0,0 @@
-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/src/showcase/premium/textarea/data.cjs

@@ -1 +0,0 @@
-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/src/showcase/premium/textarea/data.js

@@ -1,24 +0,0 @@
-//#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/src/showcase/premium/textarea/index.cjs

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

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

@@ -1,4 +0,0 @@
-import { textareaDemoFields as e } from "./data.js";
-import { TextareaShowcase as t } from "./showcase.js";
-import { textareaMock as n } from "./mock.js";
-export { t as TextareaShowcase, e as textareaDemoFields, n as textareaMock };

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

@@ -1,30 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { FormEvent, useState } from "react"
-import { Textarea } from "tembro"
-
-export function Example() {
-  const [note, setNote] = useState("")
-  const [error, setError] = useState(false)
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setError(note.trim().length < 10)
-  }
-
-  return (
-    <form onSubmit={submit} className="space-y-3">
-      <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>
-    </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/src/showcase/premium/textarea/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/textarea/mock.ts
-var e = {
-	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: [
-		"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."
-	]
-};
-//#endregion
-export { e as textareaMock };

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

@@ -1 +0,0 @@
-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/src/showcase/premium/textarea/showcase.js

@@ -1,169 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Textarea as t } from "../../../components/ui/textarea/index.js";
-import { Badge as n } from "../../../components/ui/badge/index.js";
-import { textareaDemoFields as r } from "./data.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/textarea/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function s({ state: s, setState: c }) {
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ a("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: [/* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ a("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Long-form entry"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Textarea should feel calm and readable"
-							}),
-							/* @__PURE__ */ i("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."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [
-							/* @__PURE__ */ i(n, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Editable"
-							}),
-							/* @__PURE__ */ i(n, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Read-only"
-							}),
-							/* @__PURE__ */ i(n, {
-								variant: "outline",
-								className: "rounded-full",
-								children: "Resizable"
-							})
-						]
-					})]
-				}), /* @__PURE__ */ a("div", {
-					className: "mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]",
-					children: [/* @__PURE__ */ a("div", {
-						className: o,
-						children: [/* @__PURE__ */ i("p", {
-							className: "text-sm font-medium aui-text-muted",
-							children: "Internal note"
-						}), /* @__PURE__ */ i("div", {
-							className: "mt-3",
-							children: /* @__PURE__ */ i(t, {
-								value: s.textareaValue,
-								onChange: (e) => c({ textareaValue: e.target.value }),
-								rows: r[0].rows,
-								className: `${r[0].minHeight} resize-y`,
-								placeholder: r[0].placeholder,
-								helperText: "Visible helper copy keeps instructions outside the placeholder.",
-								maxLength: 240,
-								showCharacterCount: !0
-							})
-						})]
-					}), /* @__PURE__ */ a("div", {
-						className: o,
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-sm font-medium aui-text-muted",
-								children: "Current length"
-							}),
-							/* @__PURE__ */ a("p", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: [s.textareaValue.length, " chars"]
-							}),
-							/* @__PURE__ */ i("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."
-							})
-						]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				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", {
-							className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-							children: "Live state"
-						}),
-						/* @__PURE__ */ a("h4", {
-							className: "mt-2 text-lg font-semibold aui-text-strong",
-							children: [
-								"Draft length: ",
-								s.textareaValue.length,
-								" characters"
-							]
-						}),
-						/* @__PURE__ */ i("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."
-						})
-					] }), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(e, {
-							type: "button",
-							size: "sm",
-							onClick: () => c({ textareaValue: "Customer prefers weekly status updates and a shorter approval cycle." }),
-							children: "Fill sample"
-						}), /* @__PURE__ */ i(e, {
-							type: "button",
-							size: "sm",
-							variant: "secondary",
-							onClick: () => c({ textareaValue: "" }),
-							children: "Clear"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Pre-filled draft"
-					}), /* @__PURE__ */ i("div", {
-						className: "mt-3",
-						children: /* @__PURE__ */ i(t, {
-							defaultValue: r[1].defaultValue,
-							rows: r[1].rows,
-							className: `${r[1].minHeight} resize-none`,
-							helperText: "Uncontrolled draft with stable helper spacing."
-						})
-					})]
-				}), /* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Read-only copy"
-					}), /* @__PURE__ */ a("div", {
-						className: "mt-3 space-y-3",
-						children: [/* @__PURE__ */ i(t, {
-							value: r[2].defaultValue,
-							readOnly: r[2].readOnly,
-							rows: r[2].rows,
-							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."
-						})]
-					})]
-				})]
-			})
-		]
-	});
-}
-//#endregion
-export { s as TextareaShowcase };

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

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

package/dist/src/showcase/premium/time-picker/index.cjs

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