tembro 3.1.17 → 4.0.0

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

@@ -1,221 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { badgeDemoItems as n } from "./data.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/badge/showcase.tsx
-var o = "border-t border-[color:var(--aui-divider)] py-6";
-function s({ state: s, setState: c, mode: l }) {
-	let u = [
-		"default",
-		"secondary",
-		"soft",
-		"destructive",
-		"outline",
-		"ghost",
-		"link"
-	], d = n.find((e) => e.variant === s.badgeVariant) ?? n[0], [f, p] = r.useState(!0);
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-0",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "pb-6",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-end 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: "Status"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Badges should stay secondary"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 text-sm leading-6 aui-text-muted",
-								children: "Use them for metadata and state, not as the main content block."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
-						children: [
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Variant"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: s.badgeVariant
-								})]
-							}),
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Current"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: d.label
-								})]
-							}),
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Samples"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: n.length
-								})]
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ a("div", {
-					className: "space-y-5",
-					children: [
-						/* @__PURE__ */ i("div", {
-							className: "flex flex-wrap gap-2",
-							children: u.map((t) => /* @__PURE__ */ i(e, {
-								type: "button",
-								size: "sm",
-								variant: s.badgeVariant === t ? "default" : "secondary",
-								onClick: () => c({ badgeVariant: t }),
-								children: t
-							}, t))
-						}),
-						/* @__PURE__ */ i("div", {
-							className: "flex flex-wrap items-center gap-3",
-							children: n.map((e, n) => /* @__PURE__ */ i(t, {
-								variant: n === 0 ? s.badgeVariant : e.variant,
-								status: n === 0 ? "success" : void 0,
-								count: n === 1 ? 12 : void 0,
-								children: e.label
-							}, e.label))
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]",
-							children: [/* @__PURE__ */ a("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ a("div", {
-										className: "flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4",
-										children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-											className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-											children: "Live example"
-										}), /* @__PURE__ */ i("p", {
-											className: "mt-2 text-lg font-semibold aui-text-strong",
-											children: "Customer workspace"
-										})] }), /* @__PURE__ */ i(t, {
-											variant: s.badgeVariant,
-											status: "success",
-											label: d.label
-										})]
-									}),
-									/* @__PURE__ */ i("div", {
-										className: "flex flex-wrap gap-2",
-										children: [
-											["Plan", "Growth"],
-											["Owner", "Azamat"],
-											["Last sync", "2 min ago"]
-										].map(([e, t]) => /* @__PURE__ */ a("div", {
-											className: "inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2",
-											children: [/* @__PURE__ */ i("span", {
-												className: "text-xs aui-text-muted",
-												children: e
-											}), /* @__PURE__ */ i("span", {
-												className: "text-sm font-medium aui-text-strong",
-												children: t
-											})]
-										}, e))
-									}),
-									/* @__PURE__ */ a("div", {
-										className: "flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4",
-										children: [
-											/* @__PURE__ */ i(t, {
-												variant: "secondary",
-												label: "Customers",
-												count: 18
-											}),
-											/* @__PURE__ */ i(t, {
-												variant: "soft",
-												tone: "info",
-												label: "Synced",
-												dot: !0
-											}),
-											/* @__PURE__ */ i(t, {
-												status: "warning",
-												label: "Pending approval"
-											}),
-											f ? /* @__PURE__ */ i(t, {
-												variant: "outline",
-												label: "Design owner",
-												removable: !0,
-												onRemove: () => p(!1)
-											}) : /* @__PURE__ */ i(e, {
-												size: "sm",
-												variant: "secondary",
-												onClick: () => p(!0),
-												children: "Restore chip"
-											})
-										]
-									})
-								]
-							}), /* @__PURE__ */ i("div", {
-								className: "border-y border-[color:var(--aui-divider)]",
-								children: n.map((e) => /* @__PURE__ */ a("div", {
-									className: "flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0",
-									children: [/* @__PURE__ */ a("div", {
-										className: "min-w-0",
-										children: [/* @__PURE__ */ i("p", {
-											className: "text-sm font-semibold aui-text-strong",
-											children: e.label
-										}), /* @__PURE__ */ i("p", {
-											className: "mt-1 text-sm leading-6 aui-text-muted",
-											children: e.note
-										})]
-									}), /* @__PURE__ */ i(t, {
-										variant: e.variant,
-										status: e.label === "Live" ? "success" : e.label === "Review" ? "warning" : void 0,
-										label: e.label
-									})]
-								}, e.label))
-							})]
-						})
-					]
-				})
-			}),
-			l === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i("div", {
-					className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
-					children: n.map((e) => /* @__PURE__ */ a("div", {
-						className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-						children: [/* @__PURE__ */ a("div", {
-							className: "flex items-center justify-between gap-3",
-							children: [/* @__PURE__ */ i(t, {
-								variant: e.variant,
-								label: e.label,
-								count: e.label === "Queued" ? 4 : void 0
-							}), /* @__PURE__ */ i("span", {
-								className: "text-[11px] uppercase tracking-[0.2em] aui-text-muted",
-								children: "sample"
-							})]
-						}), /* @__PURE__ */ i("p", {
-							className: "mt-3 text-sm leading-6 aui-text-muted",
-							children: e.note
-						})]
-					}, e.label))
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { s as BadgeShowcase };

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Breadcrumbs } from "tembro"
-
-const items = [
-  { key: "home", label: "Home", href: "/" },
-  { key: "products", label: "Products", href: "/products" },
-  { key: "active", label: "Overview", current: true },
-]
-
-export function Example() {
-  return <Breadcrumbs items={items} separator="/" />
-}`,highlights:[`Readable route context`,`Current route flagging`,`Custom separator support`,`Custom link rendering hook`],scenarios:[{title:`Deep navigation`,description:`Render nested routes with one-line context breadcrumbs.`},{title:`Router links`,description:`Provide hrefs for SPA links or custom render for router primitives.`},{title:`Page headings`,description:`Use with PageHeader when users need location confirmation.`}],capabilityNotes:[`Keep the last item marked as current so focus and navigation patterns stay consistent.`,`Custom separators can match your design language without breaking semantics.`,"Inject router-specific links through `renderLink` for framework compatibility."]};exports.breadcrumbsMock=e;

package/dist/src/showcase/premium/breadcrumbs/mock.js

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/breadcrumbs/mock.ts
-var e = {
-	code: "import { Breadcrumbs } from \"tembro\"\n\nconst items = [\n  { key: \"home\", label: \"Home\", href: \"/\" },\n  { key: \"products\", label: \"Products\", href: \"/products\" },\n  { key: \"active\", label: \"Overview\", current: true },\n]\n\nexport function Example() {\n  return <Breadcrumbs items={items} separator=\"/\" />\n}",
-	highlights: [
-		"Readable route context",
-		"Current route flagging",
-		"Custom separator support",
-		"Custom link rendering hook"
-	],
-	scenarios: [
-		{
-			title: "Deep navigation",
-			description: "Render nested routes with one-line context breadcrumbs."
-		},
-		{
-			title: "Router links",
-			description: "Provide hrefs for SPA links or custom render for router primitives."
-		},
-		{
-			title: "Page headings",
-			description: "Use with PageHeader when users need location confirmation."
-		}
-	],
-	capabilityNotes: [
-		"Keep the last item marked as current so focus and navigation patterns stay consistent.",
-		"Custom separators can match your design language without breaking semantics.",
-		"Inject router-specific links through `renderLink` for framework compatibility."
-	]
-};
-//#endregion
-export { e as breadcrumbsMock };

package/dist/src/showcase/premium/breadcrumbs/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/ui/badge/index.cjs"),r=require("../../../components/layout/breadcrumbs.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`home`,label:`Home`,href:`/`},{key:`apps`,label:`Apps`,href:`/apps`},{key:`workspace`,label:`Workspace`,href:`/apps/workspace`},{key:`team`,label:`Team settings`,href:`/apps/workspace/team`},{key:`security`,label:`Security`,href:`/apps/workspace/team/security`},{key:`overview`,label:`Overview`,current:!0}],s=[{key:`home`,label:`Home`,href:`/`},{key:`dashboard`,label:`Dashboard`,current:!0}];function c({mode:e}){let[c,l]=i.useState(`full`),u=i.useMemo(()=>c===`full`?o:s,[c]);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:`Path context`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Breadcrumbs should answer where the user is`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Full path`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact path`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c===`full`?`default`:`outline`,onClick:()=>l(`full`),children:`Full path`}),(0,a.jsx)(t.Button,{size:`sm`,variant:c===`compact`?`default`:`outline`,onClick:()=>l(`compact`),children:`Compact path`})]}):null,(0,a.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3`,children:(0,a.jsx)(r.Breadcrumbs,{items:u,separator:c===`full`?`/`:(0,a.jsx)(`span`,{className:`px-1 aui-text-muted`,children:`→`}),maxItems:c===`full`?4:void 0})})]})}exports.BreadcrumbsShowcase=c;

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

@@ -1,115 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Breadcrumbs as n } from "../../../components/layout/breadcrumbs.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/breadcrumbs/showcase.tsx
-var o = [
-	{
-		key: "home",
-		label: "Home",
-		href: "/"
-	},
-	{
-		key: "apps",
-		label: "Apps",
-		href: "/apps"
-	},
-	{
-		key: "workspace",
-		label: "Workspace",
-		href: "/apps/workspace"
-	},
-	{
-		key: "team",
-		label: "Team settings",
-		href: "/apps/workspace/team"
-	},
-	{
-		key: "security",
-		label: "Security",
-		href: "/apps/workspace/team/security"
-	},
-	{
-		key: "overview",
-		label: "Overview",
-		current: !0
-	}
-], s = [{
-	key: "home",
-	label: "Home",
-	href: "/"
-}, {
-	key: "dashboard",
-	label: "Dashboard",
-	current: !0
-}];
-function c({ mode: c }) {
-	let [l, u] = r.useState("full"), d = r.useMemo(() => l === "full" ? o : s, [l]);
-	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: "Path context"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Breadcrumbs should answer where the user is"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Full path"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Compact path"
-						})]
-					})]
-				})
-			}),
-			c === "playground" ? /* @__PURE__ */ a("div", {
-				className: "flex flex-wrap gap-3",
-				children: [/* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: l === "full" ? "default" : "outline",
-					onClick: () => u("full"),
-					children: "Full path"
-				}), /* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: l === "compact" ? "default" : "outline",
-					onClick: () => u("compact"),
-					children: "Compact path"
-				})]
-			}) : null,
-			/* @__PURE__ */ i("div", {
-				className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3",
-				children: /* @__PURE__ */ i(n, {
-					items: d,
-					separator: l === "full" ? "/" : /* @__PURE__ */ i("span", {
-						className: "px-1 aui-text-muted",
-						children: "→"
-					}),
-					maxItems: l === "full" ? 4 : void 0
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { c as BreadcrumbsShowcase };

package/dist/src/showcase/premium/button/data.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Variant coverage`,actions:[{label:`Primary`,variant:`default`},{label:`Secondary`,variant:`secondary`},{label:`Outline`,variant:`outline`},{label:`Destructive`,variant:`destructive`},{label:`Ghost`,variant:`ghost`}]},{title:`Button sizes`,actions:[{label:`Small`,variant:`outline`,size:`sm`},{label:`Default`,variant:`outline`},{label:`Large`,variant:`outline`,size:`lg`},{label:`Icon only`,variant:`default`,size:`icon`,icon:`download`}]},{title:`Icon and state actions`,actions:[{label:`Download`,variant:`outline`,icon:`download`},{label:`Continue`,variant:`default`,icon:`arrow`},{label:`Loading`,variant:`default`,loading:!0},{label:`Disabled`,variant:`secondary`,disabled:!0}]},{title:`Link behavior`,actions:[{label:`Inline link`,variant:`link`},{label:`Link as button`,variant:`outline`,asLink:!0},{label:`Route button`,variant:`default`,asLink:!0,size:`sm`}]}];exports.buttonDemoRows=e;

package/dist/src/showcase/premium/button/data.js

@@ -1,100 +0,0 @@
-//#region src/showcase/premium/button/data.ts
-var e = [
-	{
-		title: "Variant coverage",
-		actions: [
-			{
-				label: "Primary",
-				variant: "default"
-			},
-			{
-				label: "Secondary",
-				variant: "secondary"
-			},
-			{
-				label: "Outline",
-				variant: "outline"
-			},
-			{
-				label: "Destructive",
-				variant: "destructive"
-			},
-			{
-				label: "Ghost",
-				variant: "ghost"
-			}
-		]
-	},
-	{
-		title: "Button sizes",
-		actions: [
-			{
-				label: "Small",
-				variant: "outline",
-				size: "sm"
-			},
-			{
-				label: "Default",
-				variant: "outline"
-			},
-			{
-				label: "Large",
-				variant: "outline",
-				size: "lg"
-			},
-			{
-				label: "Icon only",
-				variant: "default",
-				size: "icon",
-				icon: "download"
-			}
-		]
-	},
-	{
-		title: "Icon and state actions",
-		actions: [
-			{
-				label: "Download",
-				variant: "outline",
-				icon: "download"
-			},
-			{
-				label: "Continue",
-				variant: "default",
-				icon: "arrow"
-			},
-			{
-				label: "Loading",
-				variant: "default",
-				loading: !0
-			},
-			{
-				label: "Disabled",
-				variant: "secondary",
-				disabled: !0
-			}
-		]
-	},
-	{
-		title: "Link behavior",
-		actions: [
-			{
-				label: "Inline link",
-				variant: "link"
-			},
-			{
-				label: "Link as button",
-				variant: "outline",
-				asLink: !0
-			},
-			{
-				label: "Route button",
-				variant: "default",
-				asLink: !0,
-				size: "sm"
-			}
-		]
-	}
-];
-//#endregion
-export { e as buttonDemoRows };

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

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

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

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

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

@@ -1,65 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { ArrowRightIcon, DownloadIcon } from "lucide-react"
-import { Button, buttonVariants } from "tembro"
-
-export function BasicExamples() {
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-3">
-        <Button variant="default">Primary</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="destructive">Destructive</Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <Button size="sm">Small</Button>
-        <Button iconOnly aria-label="Download">
-          <DownloadIcon className="size-4" />
-        </Button>
-        <Button>
-          Continue
-          <ArrowRightIcon className="ml-2 size-4" />
-        </Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <Button variant="outline" size="sm" disabled>
-          Disabled
-        </Button>
-        <Button variant="default" loading>
-          Loading
-        </Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
-          Link styled as button
-        </a>
-      </div>
-    </div>
-  )
-}
-
-export function ControlledButton() {
-  const [loading, setLoading] = React.useState(false)
-
-  return (
-    <Button
-      variant="default"
-      onClick={() => {
-        setLoading(true)
-        window.setTimeout(() => setLoading(false), 1800)
-      }}
-      loading={loading}
-    >
-      Submit
-    </Button>
-  )
-}
-
-// Don't overuse buttonVariants for every button instance.
-// Use Button's own variant/size props by default, and keep buttonVariants
-// only for styling non-button elements (a, Link) with shared look.`,htmlCode:`<button data-slot="button" data-variant="primary">
-  Continue
-</button>`,cliCommand:`npx tembro add button`,highlights:[`Primary/secondary/outline/destructive/ghost/link and size tokens`,`Icon slots with helper text and compact icon-only variant`,`Loading and disabled interactive states`,`buttonVariants utility usage for link-like elements`],relatedBlockSlugs:[`auth-sign-in`,`settings-form`,`sidebar-layout`],scenarios:[{title:`Primary CTA`,description:`Lead users toward the highest-priority action.`},{title:`Utility action`,description:`Use compact outline buttons for secondary workflows.`},{title:`Destructive confirm`,description:`Use strong color contrast for irreversible actions.`},{title:`Link behavior`,description:`Prefer semantic <a> when navigation is required.`},{title:`When not to use variants`,description:`Avoid using variants as a general utility class system for custom markup; use native controls/components instead.`}],capabilityNotes:[`Supports primary, secondary, outline, ghost, link and destructive visual styles.`,`Supports size tokens: sm, default, lg and icon.`,`Works in inline rows, full-width action areas and dense toolbars.`,`Supports focus, disabled and loading states for safe async interactions.`,`Use buttonVariants for non-button elements, but keep Button variant props for real button usage.`]};exports.buttonMock=e;

package/dist/src/showcase/premium/button/mock.js

@@ -1,48 +0,0 @@
-//#region src/showcase/premium/button/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"tembro\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button iconOnly aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
-	htmlCode: "<button data-slot=\"button\" data-variant=\"primary\">\n  Continue\n</button>",
-	cliCommand: "npx tembro add button",
-	highlights: [
-		"Primary/secondary/outline/destructive/ghost/link and size tokens",
-		"Icon slots with helper text and compact icon-only variant",
-		"Loading and disabled interactive states",
-		"buttonVariants utility usage for link-like elements"
-	],
-	relatedBlockSlugs: [
-		"auth-sign-in",
-		"settings-form",
-		"sidebar-layout"
-	],
-	scenarios: [
-		{
-			title: "Primary CTA",
-			description: "Lead users toward the highest-priority action."
-		},
-		{
-			title: "Utility action",
-			description: "Use compact outline buttons for secondary workflows."
-		},
-		{
-			title: "Destructive confirm",
-			description: "Use strong color contrast for irreversible actions."
-		},
-		{
-			title: "Link behavior",
-			description: "Prefer semantic <a> when navigation is required."
-		},
-		{
-			title: "When not to use variants",
-			description: "Avoid using variants as a general utility class system for custom markup; use native controls/components instead."
-		}
-	],
-	capabilityNotes: [
-		"Supports primary, secondary, outline, ghost, link and destructive visual styles.",
-		"Supports size tokens: sm, default, lg and icon.",
-		"Works in inline rows, full-width action areas and dense toolbars.",
-		"Supports focus, disabled and loading states for safe async interactions.",
-		"Use buttonVariants for non-button elements, but keep Button variant props for real button usage."
-	]
-};
-//#endregion
-export { e as buttonMock };

package/dist/src/showcase/premium/button/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/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,iconOnly:!0,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,pressed:e===`Focus`,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.useState(0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsxs)(`section`,{className:c,children:[(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,fullWidth:!0,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Primary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Main action with filled emphasis.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Secondary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Alternative action without stealing focus.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Outline`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Low-emphasis action for previews and neutral workflows.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Destructive`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Reserved for archive, delete, or dangerous transitions.`})]})]})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,iconOnly:!0,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;