tembro 1.0.0

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

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

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

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

@@ -0,0 +1,148 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ToastProvider as n, useToast as r } from "../../../components/notifications/toast.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/toast/showcase.tsx
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function c({ mode: n }) {
+	let [c, l] = i.useState(0), { addToast: u, success: d, warning: f, error: p, clearToasts: m, toasts: h, dismissToast: g } = r();
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ o("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ o("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Transient feedback"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Toasts should report short-lived outcomes"
+							}),
+							/* @__PURE__ */ a("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."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Success"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Warning"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Error"
+							})
+						]
+					})]
+				}), /* @__PURE__ */ o("div", {
+					className: "mt-6 flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							onClick: () => {
+								l((e) => e + 1), u({
+									title: "Sync started",
+									description: `Sync run ${c + 1} has started.`,
+									tone: "info"
+								});
+							},
+							children: "Add toast"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), d({
+									title: "Saved",
+									description: "Project updated successfully.",
+									tone: "success"
+								});
+							},
+							children: "Success"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), f("Please confirm required metadata before publish.");
+							},
+							children: "Warning"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), p({
+									title: "Request failed",
+									description: `Failure occurred while saving item #${c + 1}`
+								});
+							},
+							children: "Error"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: m,
+							children: "Clear all"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: s,
+				children: [/* @__PURE__ */ o("p", {
+					className: "mb-2 text-sm aui-text-muted",
+					children: ["Active toasts: ", h.length]
+				}), /* @__PURE__ */ a("div", {
+					className: "grid gap-2",
+					children: h.length === 0 ? /* @__PURE__ */ a("div", {
+						className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted",
+						children: "No active toasts"
+					}) : h.map((t) => /* @__PURE__ */ o("div", {
+						className: "flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm",
+						children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+							className: "font-medium aui-text-strong",
+							children: t.title ?? "Untitled"
+						}), /* @__PURE__ */ a("p", {
+							className: "aui-text-muted",
+							children: t.description
+						})] }), /* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => g(t.id),
+							children: "Dismiss"
+						})]
+					}, t.id))
+				})]
+			}),
+			null
+		]
+	});
+}
+function l({ mode: e }) {
+	return /* @__PURE__ */ a(n, {
+		position: "top-right",
+		defaultDuration: 3e3,
+		maxToasts: 5,
+		pauseOnHover: e === "playground",
+		children: /* @__PURE__ */ a(c, { mode: e })
+	});
+}
+//#endregion
+export { l as ToastShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Tooltip } from "tembro"
+
+export function Example() {
+  return (
+    <div className="flex gap-3">
+      <Tooltip content="Copies the current code snippet to clipboard.">
+        <Button variant="outline">Copy code</Button>
+      </Tooltip>
+
+      <Tooltip content="Only owners can publish this release." side="bottom">
+        <Button>Publish</Button>
+      </Tooltip>
+    </div>
+  )
+}`,htmlCode:`<span data-slot="tooltip">Hover or focus to reveal hint</span>`,cliCommand:`npx tembro add tooltip`,highlights:[`Short helper copy`,`Hover + focus states`,`Placement control`,`Low-noise guidance`],relatedBlockSlugs:[`settings-form`,`dashboard-starter`,`crm-dashboard`],scenarios:[{title:`Action clarification`,description:`Clarify compact buttons without adding full inline helper text.`},{title:`Permission hint`,description:`Explain why a control matters before users commit.`},{title:`Dense data tables`,description:`Keep labels short while still exposing supporting context on focus.`}],capabilityNotes:[`Keep tooltip copy to one short sentence.`,`Use focus-safe triggers so keyboard users get the same guidance.`,`Do not place critical instructions only inside a tooltip.`,`If the content needs actions or long text, switch to Popover instead.`]};exports.tooltipMock=e;

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

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

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

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/tooltip/mock.ts
+var e = {
+	code: "import { Button, Tooltip } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"flex gap-3\">\n      <Tooltip content=\"Copies the current code snippet to clipboard.\">\n        <Button variant=\"outline\">Copy code</Button>\n      </Tooltip>\n\n      <Tooltip content=\"Only owners can publish this release.\" side=\"bottom\">\n        <Button>Publish</Button>\n      </Tooltip>\n    </div>\n  )\n}",
+	htmlCode: "<span data-slot=\"tooltip\">Hover or focus to reveal hint</span>",
+	cliCommand: "npx tembro add tooltip",
+	highlights: [
+		"Short helper copy",
+		"Hover + focus states",
+		"Placement control",
+		"Low-noise guidance"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"dashboard-starter",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Action clarification",
+			description: "Clarify compact buttons without adding full inline helper text."
+		},
+		{
+			title: "Permission hint",
+			description: "Explain why a control matters before users commit."
+		},
+		{
+			title: "Dense data tables",
+			description: "Keep labels short while still exposing supporting context on focus."
+		}
+	],
+	capabilityNotes: [
+		"Keep tooltip copy to one short sentence.",
+		"Use focus-safe triggers so keyboard users get the same guidance.",
+		"Do not place critical instructions only inside a tooltip.",
+		"If the content needs actions or long text, switch to Popover instead."
+	]
+};
+//#endregion
+export { e as tooltipMock };

package/dist/showcase/premium/tooltip/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/ui/tooltip/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`top`,`right`,`bottom`,`left`],o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=r.useState(`top`),[c,l]=r.useState(!1);return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Tooltip`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Explain quickly, then get out`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Tooltip should answer one short question near the trigger without interrupting the screen.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Side`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong capitalize`,children:e})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c?`Disabled`:`Enabled`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Use for`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Short hints`})]})]})]})}),(0,i.jsx)(`section`,{className:o,children:(0,i.jsx)(`div`,{className:`flex min-h-48 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5`,children:(0,i.jsx)(n.Tooltip,{content:`Copies the current docs example to your clipboard.`,side:e,disabled:c,children:(0,i.jsx)(t.Button,{type:`button`,variant:`outline`,children:`Hover or focus me`})})})}),(0,i.jsx)(`section`,{className:o,children:(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[a.map(n=>(0,i.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>s(n),children:n},n)),(0,i.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>l(e=>!e),children:c?`Enable`:`Disable`})]})})]})}exports.TooltipShowcase=s;

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

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

package/dist/showcase/premium/tooltip/showcase.js

@@ -0,0 +1,113 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Tooltip as t } from "../../../components/ui/tooltip/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/tooltip/showcase.tsx
+var a = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], o = "border-t border-[color:var(--aui-divider)] py-6";
+function s() {
+	let [s, c] = n.useState("top"), [l, u] = n.useState(!1);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end 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: "Tooltip"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Explain quickly, then get out"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Tooltip should answer one short question near the trigger without interrupting the screen."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Side"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong capitalize",
+									children: s
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "State"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: l ? "Disabled" : "Enabled"
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Use for"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Short hints"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: o,
+				children: /* @__PURE__ */ r("div", {
+					className: "flex min-h-48 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5",
+					children: /* @__PURE__ */ r(t, {
+						content: "Copies the current docs example to your clipboard.",
+						side: s,
+						disabled: l,
+						children: /* @__PURE__ */ r(e, {
+							type: "button",
+							variant: "outline",
+							children: "Hover or focus me"
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: o,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: [a.map((t) => /* @__PURE__ */ r(e, {
+						type: "button",
+						size: "sm",
+						variant: s === t ? "default" : "secondary",
+						onClick: () => c(t),
+						children: t
+					}, t)), /* @__PURE__ */ r(e, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						onClick: () => u((e) => !e),
+						children: l ? "Enable" : "Disable"
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as TooltipShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Tour } from "@/index"
+import { useState } from "react"
+
+export function Example() {
+  const [open, setOpen] = useState(true)
+  const [index, setIndex] = useState(0)
+
+  return (
+    <Tour
+      steps={[
+        { title: "Welcome", description: "Intro your app flow." },
+        { title: "Next", description: "Continue to another key step." },
+      ]}
+      index={index}
+      onIndexChange={setIndex}
+      onClose={() => setOpen(false)}
+    />
+  )
+}`,cliCommand:`npx tembro add tour`,highlights:[`Controlled tour state with index-driven steps`,`Built-in close handling`],scenarios:[{title:`Product onboarding`,description:`Guide new users through first-time workflow.`},{title:`Release tours`,description:`Attach temporary walkthroughs to feature releases.`}]};exports.tourMock=e;

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

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

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

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/tour/mock.ts
+var e = {
+	code: "import { Button, Tour } from \"@/index\"\nimport { useState } from \"react\"\n\nexport function Example() {\n  const [open, setOpen] = useState(true)\n  const [index, setIndex] = useState(0)\n\n  return (\n    <Tour\n      steps={[\n        { title: \"Welcome\", description: \"Intro your app flow.\" },\n        { title: \"Next\", description: \"Continue to another key step.\" },\n      ]}\n      index={index}\n      onIndexChange={setIndex}\n      onClose={() => setOpen(false)}\n    />\n  )\n}",
+	cliCommand: "npx tembro add tour",
+	highlights: ["Controlled tour state with index-driven steps", "Built-in close handling"],
+	scenarios: [{
+		title: "Product onboarding",
+		description: "Guide new users through first-time workflow."
+	}, {
+		title: "Release tours",
+		description: "Attach temporary walkthroughs to feature releases."
+	}]
+};
+//#endregion
+export { e as tourMock };

package/dist/showcase/premium/tour/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/modern/tour.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{title:`Welcome`,description:`Use this for quick onboarding overlays.`},{title:`Key actions`,description:`Guide users through essential workflows.`},{title:`Done`,description:`Save and share the tour flow with the team.`}];function o(){let[e,o]=r.useState(0),[s,c]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,onClick:()=>c(!0),children:`Open tour`}),(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>o(e=>(e+1)%a.length),children:`Next step`})]}),s?(0,i.jsx)(n.Tour,{steps:a,index:e,onIndexChange:o,onClose:()=>c(!1)}):null]})}exports.TourShowcase=o;

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

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

package/dist/showcase/premium/tour/showcase.js

@@ -0,0 +1,45 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Tour as t } from "../../../components/modern/tour.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/tour/showcase.tsx
+var a = [
+	{
+		title: "Welcome",
+		description: "Use this for quick onboarding overlays."
+	},
+	{
+		title: "Key actions",
+		description: "Guide users through essential workflows."
+	},
+	{
+		title: "Done",
+		description: "Save and share the tour flow with the team."
+	}
+];
+function o() {
+	let [o, s] = n.useState(0), [c, l] = n.useState(!0);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ r(e, {
+				size: "sm",
+				onClick: () => l(!0),
+				children: "Open tour"
+			}), /* @__PURE__ */ r(e, {
+				size: "sm",
+				variant: "outline",
+				onClick: () => s((e) => (e + 1) % a.length),
+				children: "Next step"
+			})]
+		}), c ? /* @__PURE__ */ r(t, {
+			steps: a,
+			index: o,
+			onIndexChange: s,
+			onClose: () => l(!1)
+		}) : null]
+	});
+}
+//#endregion
+export { o as TourShowcase };

package/dist/showcase/premium/tree-view/index.cjs

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

package/dist/showcase/premium/tree-view/index.d.ts

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

package/dist/showcase/premium/tree-view/index.js

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

package/dist/showcase/premium/tree-view/mock.cjs

@@ -0,0 +1,19 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { TreeView } from "@/index"
+
+export function Example() {
+  return (
+    <TreeView
+      items={[
+        {
+          key: "ui",
+          label: "UI",
+          children: [
+            { key: "buttons", label: "Buttons" },
+            { key: "inputs", label: "Inputs" },
+          ],
+        },
+      ]}
+      defaultExpandedKeys={["ui"]}
+    />
+  )
+}`,cliCommand:`npx tembro add tree-view`,highlights:[`Tree data model with nested children`,`Controlled and uncontrolled expand state support`,`Selectable nodes with active visual states`],scenarios:[{title:`Navigation map`,description:`Use for quick nested navigation structures.`},{title:`Docs sections`,description:`Represent nested headings and details.`}]};exports.treeViewMock=e;

package/dist/showcase/premium/tree-view/mock.d.ts

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

package/dist/showcase/premium/tree-view/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/tree-view/mock.ts
+var e = {
+	code: "import { TreeView } from \"@/index\"\n\nexport function Example() {\n  return (\n    <TreeView\n      items={[\n        {\n          key: \"ui\",\n          label: \"UI\",\n          children: [\n            { key: \"buttons\", label: \"Buttons\" },\n            { key: \"inputs\", label: \"Inputs\" },\n          ],\n        },\n      ]}\n      defaultExpandedKeys={[\"ui\"]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add tree-view",
+	highlights: [
+		"Tree data model with nested children",
+		"Controlled and uncontrolled expand state support",
+		"Selectable nodes with active visual states"
+	],
+	scenarios: [{
+		title: "Navigation map",
+		description: "Use for quick nested navigation structures."
+	}, {
+		title: "Docs sections",
+		description: "Represent nested headings and details."
+	}]
+};
+//#endregion
+export { e as treeViewMock };

package/dist/showcase/premium/tree-view/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/tree-view.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=[{key:`design`,label:`Design`,icon:(0,i.jsx)(r.FolderOpen,{className:`size-4`}),children:[{key:`components`,label:`Components`,icon:(0,i.jsx)(r.Folder,{className:`size-4`})},{key:`tokens`,label:`Tokens`,icon:(0,i.jsx)(r.File,{className:`size-4`})}]},{key:`dev`,label:`Development`,icon:(0,i.jsx)(r.Folder,{className:`size-4`}),children:[{key:`docs`,label:`Docs`,icon:(0,i.jsx)(r.File,{className:`size-4`})},{key:`release`,label:`Release`,icon:(0,i.jsx)(r.Folder,{className:`size-4`}),children:[{key:`notes`,label:`Notes`,icon:(0,i.jsx)(r.File,{className:`size-4`})}]}]}];function o(){let[e,r]=n.useState(`components`),[o,s]=n.useState([`design`,`dev`]);return(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsx)(t.TreeView,{items:a,selectedKey:e,expandedKeys:o,onExpandedKeysChange:s,onSelect:n.useCallback(e=>{r(e.key)},[])}),(0,i.jsxs)(`div`,{className:`rounded-md border px-3 py-2 text-sm text-muted-foreground`,children:[`Selected: `,e]})]})}exports.TreeViewShowcase=o;

package/dist/showcase/premium/tree-view/showcase.d.ts

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

package/dist/showcase/premium/tree-view/showcase.js

@@ -0,0 +1,57 @@
+import { TreeView as e } from "../../../components/display/tree-view.js";
+import * as t from "react";
+import { File as n, Folder as r, FolderOpen as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/tree-view/showcase.tsx
+var s = [{
+	key: "design",
+	label: "Design",
+	icon: /* @__PURE__ */ a(i, { className: "size-4" }),
+	children: [{
+		key: "components",
+		label: "Components",
+		icon: /* @__PURE__ */ a(r, { className: "size-4" })
+	}, {
+		key: "tokens",
+		label: "Tokens",
+		icon: /* @__PURE__ */ a(n, { className: "size-4" })
+	}]
+}, {
+	key: "dev",
+	label: "Development",
+	icon: /* @__PURE__ */ a(r, { className: "size-4" }),
+	children: [{
+		key: "docs",
+		label: "Docs",
+		icon: /* @__PURE__ */ a(n, { className: "size-4" })
+	}, {
+		key: "release",
+		label: "Release",
+		icon: /* @__PURE__ */ a(r, { className: "size-4" }),
+		children: [{
+			key: "notes",
+			label: "Notes",
+			icon: /* @__PURE__ */ a(n, { className: "size-4" })
+		}]
+	}]
+}];
+function c() {
+	let [n, r] = t.useState("components"), [i, c] = t.useState(["design", "dev"]);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ a(e, {
+			items: s,
+			selectedKey: n,
+			expandedKeys: i,
+			onExpandedKeysChange: c,
+			onSelect: t.useCallback((e) => {
+				r(e.key);
+			}, [])
+		}), /* @__PURE__ */ o("div", {
+			className: "rounded-md border px-3 py-2 text-sm text-muted-foreground",
+			children: ["Selected: ", n]
+		})]
+	});
+}
+//#endregion
+export { c as TreeViewShowcase };

package/dist/showcase/premium/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={textValue:`Azamat UI`,textareaValue:`Controlled preview content for the selected component.`,checked:!0,switchOn:!0,selectValue:`starter`,badgeVariant:`default`,cardCompact:!1,activeTab:`overview`};exports.defaultComponentDemoState=e;

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

@@ -0,0 +1,33 @@
+import type * as React from "react";
+export type ComponentDemoState = {
+    textValue: string;
+    textareaValue: string;
+    checked: boolean;
+    switchOn: boolean;
+    selectValue: string;
+    badgeVariant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+    cardCompact: boolean;
+    activeTab: "overview" | "activity" | "settings";
+};
+export type ComponentDemoMock = {
+    code: string;
+    htmlCode?: string;
+    cliCommand?: string;
+    highlights: string[];
+    relatedBlockSlugs?: string[];
+    scenarios: Array<{
+        title: string;
+        description: string;
+    }>;
+    capabilityNotes?: string[];
+};
+export type ComponentDemoProps = {
+    state: ComponentDemoState;
+    setState: (patch: Partial<ComponentDemoState>) => void;
+    mode: "docs" | "playground" | "components";
+};
+export type ComponentDemoBundle = {
+    mock: ComponentDemoMock;
+    Showcase: (props: ComponentDemoProps) => React.ReactNode;
+};
+export declare const defaultComponentDemoState: ComponentDemoState;

package/dist/showcase/premium/types.js

@@ -0,0 +1,13 @@
+//#region src/showcase/premium/types.ts
+var e = {
+	textValue: "Azamat UI",
+	textareaValue: "Controlled preview content for the selected component.",
+	checked: !0,
+	switchOn: !0,
+	selectValue: "starter",
+	badgeVariant: "default",
+	cardCompact: !1,
+	activeTab: "overview"
+};
+//#endregion
+export { e as defaultComponentDemoState };