tembro 3.0.0 → 3.1.5

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

@@ -1,43 +1 @@
-//#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 };
+export * from "../../../src/showcase/premium/textarea/mock.js"

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,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;
+module.exports = require("../../../src/showcase/premium/textarea/showcase.cjs")

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

@@ -1,169 +1 @@
-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 };
+export * from "../../../src/showcase/premium/textarea/showcase.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});
+module.exports = require("../../../src/showcase/premium/textarea/types.cjs")

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

@@ -0,0 +1 @@
+export * from "../../../src/showcase/premium/textarea/types.js"

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

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

package/dist/showcase/premium/time-picker/index.js

@@ -1,3 +1 @@
-import { timePickerMock as e } from "./mock.js";
-import { TimePickerShowcase as t } from "./showcase.js";
-export { t as TimePickerShowcase, e as timePickerMock };
+export * from "../../../src/showcase/premium/time-picker/index.js"

package/dist/showcase/premium/time-picker/mock.cjs

@@ -1,11 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DateTimePicker, TimePicker, TimeRangePicker } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-2">
-      <TimePicker label="Start" value="08:30" />
-      <DateTimePicker label="Planned at" value="2026-07-07T08:30" />
-      <TimeRangePicker from="09:00" to="17:00" />
-    </div>
-  )
-}`,cliCommand:`npx tembro add time-picker`,highlights:[`Time, datetime, and range pickers in one family`,`Native input controls with consistent style`],scenarios:[{title:`Planning UI`,description:`Define working hours and event time.`},{title:`Appointment form`,description:`Capture precise temporal inputs for calendars and logs.`}]};exports.timePickerMock=e;
+module.exports = require("../../../src/showcase/premium/time-picker/mock.cjs")

package/dist/showcase/premium/time-picker/mock.js

@@ -1,15 +1 @@
-//#region src/showcase/premium/time-picker/mock.ts
-var e = {
-	code: "import { DateTimePicker, TimePicker, TimeRangePicker } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <TimePicker label=\"Start\" value=\"08:30\" />\n      <DateTimePicker label=\"Planned at\" value=\"2026-07-07T08:30\" />\n      <TimeRangePicker from=\"09:00\" to=\"17:00\" />\n    </div>\n  )\n}",
-	cliCommand: "npx tembro add time-picker",
-	highlights: ["Time, datetime, and range pickers in one family", "Native input controls with consistent style"],
-	scenarios: [{
-		title: "Planning UI",
-		description: "Define working hours and event time."
-	}, {
-		title: "Appointment form",
-		description: "Capture precise temporal inputs for calendars and logs."
-	}]
-};
-//#endregion
-export { e as timePickerMock };
+export * from "../../../src/showcase/premium/time-picker/mock.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/time-picker.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`09:30`),[a,o]=n.useState(`2026-07-07T09:30`),[s,c]=n.useState(`08:00`),[l,u]=n.useState(`18:00`);return(0,r.jsxs)(`div`,{className:`grid gap-4`,children:[(0,r.jsxs)(`div`,{className:`grid gap-2`,children:[(0,r.jsx)(t.TimePicker,{label:`Start time`,value:e,onChange:e=>i(e.target.value)}),(0,r.jsx)(t.DateTimePicker,{label:`Event datetime`,value:a,onChange:e=>o(e.target.value)})]}),(0,r.jsxs)(`div`,{className:`space-y-2`,children:[(0,r.jsx)(t.TimeRangePicker,{from:s,to:l,onFromChange:c,onToChange:u}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Range: `,s,` → `,l]})]}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Time: `,e,`, Datetime: `,a]})]})}exports.TimePickerShowcase=i;
+module.exports = require("../../../src/showcase/premium/time-picker/showcase.cjs")

package/dist/showcase/premium/time-picker/showcase.js

@@ -1,52 +1 @@
-import { DateTimePicker as e, TimePicker as t, TimeRangePicker as n } from "../../../components/inputs/time-picker.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/time-picker/showcase.tsx
-function o() {
-	let [o, s] = r.useState("09:30"), [c, l] = r.useState("2026-07-07T09:30"), [u, d] = r.useState("08:00"), [f, p] = r.useState("18:00");
-	return /* @__PURE__ */ a("div", {
-		className: "grid gap-4",
-		children: [
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-2",
-				children: [/* @__PURE__ */ i(t, {
-					label: "Start time",
-					value: o,
-					onChange: (e) => s(e.target.value)
-				}), /* @__PURE__ */ i(e, {
-					label: "Event datetime",
-					value: c,
-					onChange: (e) => l(e.target.value)
-				})]
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "space-y-2",
-				children: [/* @__PURE__ */ i(n, {
-					from: u,
-					to: f,
-					onFromChange: d,
-					onToChange: p
-				}), /* @__PURE__ */ a("p", {
-					className: "text-sm text-muted-foreground",
-					children: [
-						"Range: ",
-						u,
-						" → ",
-						f
-					]
-				})]
-			}),
-			/* @__PURE__ */ a("p", {
-				className: "text-sm text-muted-foreground",
-				children: [
-					"Time: ",
-					o,
-					", Datetime: ",
-					c
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { o as TimePickerShowcase };
+export * from "../../../src/showcase/premium/time-picker/showcase.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.TimelineShowcase=e.TimelineShowcase,exports.timelineMock=t.timelineMock;
+module.exports = require("../../../src/showcase/premium/timeline/index.cjs")

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

@@ -1,3 +1 @@
-import { TimelineShowcase as e } from "./showcase.js";
-import { timelineMock as t } from "./mock.js";
-export { e as TimelineShowcase, t as timelineMock };
+export * from "../../../src/showcase/premium/timeline/index.js"

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

@@ -1,13 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Timeline } from "tembro"
-
-export function Example() {
-  return (
-    <Timeline
-      items={[
-        { key: "1", title: "Workspace created", time: "09:12", tone: "success" },
-        { key: "2", title: "Billing approved", time: "09:30", tone: "info" },
-        { key: "3", title: "Deployment scheduled", time: "10:00", tone: "warning" },
-      ]}
-    />
-  )
-}`,highlights:[`Vertical and horizontal modes`,`Tone-aware event dots`,`Time, description, and action support`,`Good for workflow history and release tracking`],scenarios:[{title:`Approval history`,description:`Explain what happened, in which order, and who needs to act next.`},{title:`Deployment events`,description:`Track release milestones and pending steps clearly.`},{title:`Support resolution`,description:`Show a readable event stream instead of scattered comments.`}],capabilityNotes:[`Timelines work best when the sequence matters to the user decision.`,`Use tone to communicate event state, not decoration.`,`Horizontal mode is better for short, high-level milestone sets.`]};exports.timelineMock=e;
+module.exports = require("../../../src/showcase/premium/timeline/mock.cjs")

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

@@ -1,31 +1 @@
-//#region src/showcase/premium/timeline/mock.ts
-var e = {
-	code: "import { Timeline } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Timeline\n      items={[\n        { key: \"1\", title: \"Workspace created\", time: \"09:12\", tone: \"success\" },\n        { key: \"2\", title: \"Billing approved\", time: \"09:30\", tone: \"info\" },\n        { key: \"3\", title: \"Deployment scheduled\", time: \"10:00\", tone: \"warning\" },\n      ]}\n    />\n  )\n}",
-	highlights: [
-		"Vertical and horizontal modes",
-		"Tone-aware event dots",
-		"Time, description, and action support",
-		"Good for workflow history and release tracking"
-	],
-	scenarios: [
-		{
-			title: "Approval history",
-			description: "Explain what happened, in which order, and who needs to act next."
-		},
-		{
-			title: "Deployment events",
-			description: "Track release milestones and pending steps clearly."
-		},
-		{
-			title: "Support resolution",
-			description: "Show a readable event stream instead of scattered comments."
-		}
-	],
-	capabilityNotes: [
-		"Timelines work best when the sequence matters to the user decision.",
-		"Use tone to communicate event state, not decoration.",
-		"Horizontal mode is better for short, high-level milestone sets."
-	]
-};
-//#endregion
-export { e as timelineMock };
+export * from "../../../src/showcase/premium/timeline/mock.js"

package/dist/showcase/premium/timeline/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/display/timeline.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[{key:`workspace`,title:`Workspace created`,description:`Initial billing and member sync finished.`,time:`09:12`,tone:`success`},{key:`review`,title:`Compliance review`,description:`Policy verification is in progress.`,time:`09:30`,tone:`info`},{key:`deploy`,title:`Deployment scheduled`,description:`Promotion waits for final approval.`,time:`10:00`,tone:`warning`}];function c({mode:e}){let[c,l]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Sequence view`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Timeline should make process history legible at a glance`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`If order matters, timeline is stronger than generic cards. Users should see what happened, what is pending, and what comes next.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Vertical`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Horizontal`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(r.Timeline,{items:s,orientation:c?`horizontal`:`vertical`,pending:!0,pendingLabel:`Approval pending`})}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>l(e=>!e),children:`Toggle orientation`})}):null]})}exports.TimelineShowcase=c;
+module.exports = require("../../../src/showcase/premium/timeline/showcase.cjs")

package/dist/showcase/premium/timeline/showcase.js

@@ -1,91 +1 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Timeline as n } from "../../../components/display/timeline.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/timeline/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
-	{
-		key: "workspace",
-		title: "Workspace created",
-		description: "Initial billing and member sync finished.",
-		time: "09:12",
-		tone: "success"
-	},
-	{
-		key: "review",
-		title: "Compliance review",
-		description: "Policy verification is in progress.",
-		time: "09:30",
-		tone: "info"
-	},
-	{
-		key: "deploy",
-		title: "Deployment scheduled",
-		description: "Promotion waits for final approval.",
-		time: "10:00",
-		tone: "warning"
-	}
-];
-function c({ mode: c }) {
-	let [l, u] = r.useState(!1);
-	return /* @__PURE__ */ a("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__ */ 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: "Sequence view"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Timeline should make process history legible at a glance"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "If order matters, timeline is stronger than generic cards. Users should see what happened, what is pending, and what comes next."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Vertical"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Horizontal"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i(n, {
-					items: s,
-					orientation: l ? "horizontal" : "vertical",
-					pending: !0,
-					pendingLabel: "Approval pending"
-				})
-			}),
-			c === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: "outline",
-					onClick: () => u((e) => !e),
-					children: "Toggle orientation"
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { c as TimelineShowcase };
+export * from "../../../src/showcase/premium/timeline/showcase.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.ToastShowcase=e.ToastShowcase,exports.toastMock=t.toastMock;
+module.exports = require("../../../src/showcase/premium/toast/index.cjs")

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

@@ -1,3 +1 @@
-import { ToastShowcase as e } from "./showcase.js";
-import { toastMock as t } from "./mock.js";
-export { e as ToastShowcase, t as toastMock };
+export * from "../../../src/showcase/premium/toast/index.js"

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

@@ -1,28 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, ToastProvider, useToast } from "tembro"
-
-function Demo() {
-  const { addToast, clearToasts, success, warning } = useToast()
-
-  return (
-    <div className="grid gap-2 sm:grid-cols-2">
-      <Button onClick={() => addToast({ title: "Saving", description: "Draft is being saved." })}>Add toast</Button>
-      <Button variant="outline" onClick={() => success({ title: "Saved", description: "All changes are synced." })}>
-        Success
-      </Button>
-      <Button variant="outline" onClick={() => warning("Please review your inputs.")}>
-        Warning
-      </Button>
-      <Button variant="outline" onClick={clearToasts}>
-        Clear all
-      </Button>
-    </div>
-  )
-}
-
-export function Example() {
-  return (
-    <ToastProvider defaultDuration={2500} position="top-right">
-      <Demo />
-    </ToastProvider>
-  )
-}`,highlights:[`Provider required for hook usage`,`Global addToast API`,`Tone helpers for common outcomes`,`Dismiss and clear control`],scenarios:[{title:`Save feedback`,description:`Show confirmation after async form submit.`},{title:`Validation warning`,description:`Surface form validation warnings near input.`},{title:`Async operations`,description:`Keep users informed during background actions.`}],capabilityNotes:["Always wrap usage with `ToastProvider` close to app root or feature boundary.","Use `position` consistently across app.","Prefer small toast counts (`maxToasts`) for stable layout."]};exports.toastMock=e;
+module.exports = require("../../../src/showcase/premium/toast/mock.cjs")

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

@@ -1,31 +1 @@
-//#region src/showcase/premium/toast/mock.ts
-var e = {
-	code: "import { Button, ToastProvider, useToast } from \"tembro\"\n\nfunction Demo() {\n  const { addToast, clearToasts, success, warning } = useToast()\n\n  return (\n    <div className=\"grid gap-2 sm:grid-cols-2\">\n      <Button onClick={() => addToast({ title: \"Saving\", description: \"Draft is being saved.\" })}>Add toast</Button>\n      <Button variant=\"outline\" onClick={() => success({ title: \"Saved\", description: \"All changes are synced.\" })}>\n        Success\n      </Button>\n      <Button variant=\"outline\" onClick={() => warning(\"Please review your inputs.\")}>\n        Warning\n      </Button>\n      <Button variant=\"outline\" onClick={clearToasts}>\n        Clear all\n      </Button>\n    </div>\n  )\n}\n\nexport function Example() {\n  return (\n    <ToastProvider defaultDuration={2500} position=\"top-right\">\n      <Demo />\n    </ToastProvider>\n  )\n}",
-	highlights: [
-		"Provider required for hook usage",
-		"Global addToast API",
-		"Tone helpers for common outcomes",
-		"Dismiss and clear control"
-	],
-	scenarios: [
-		{
-			title: "Save feedback",
-			description: "Show confirmation after async form submit."
-		},
-		{
-			title: "Validation warning",
-			description: "Surface form validation warnings near input."
-		},
-		{
-			title: "Async operations",
-			description: "Keep users informed during background actions."
-		}
-	],
-	capabilityNotes: [
-		"Always wrap usage with `ToastProvider` close to app root or feature boundary.",
-		"Use `position` consistently across app.",
-		"Prefer small toast counts (`maxToasts`) for stable layout."
-	]
-};
-//#endregion
-export { e as toastMock };
+export * from "../../../src/showcase/premium/toast/mock.js"

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,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;
+module.exports = require("../../../src/showcase/premium/toast/showcase.cjs")