tembro 3.1.17 → 4.0.0

package/dist/src/showcase/premium/async-select/showcase.js

@@ -1,248 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { AsyncSelect as n } from "../../../components/inputs/async-select.js";
-import { routeWorkspaceOptions as r } from "../../component-route-data.js";
-import { useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/showcase/premium/async-select/showcase.tsx
-var s = r, c = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", l = async (e) => {
-	await new Promise((e) => setTimeout(e, 260));
-	let t = e.trim().toLowerCase();
-	if (t === "error") throw Error("Unable to load regions");
-	return t ? s.filter((e) => String(e.label ?? "").toLowerCase().includes(t)) : s;
-}, u = async (e) => (await new Promise((e) => setTimeout(e, 120)), s.find((t) => t.value === e) ?? null), d = async (e) => (await new Promise((e) => setTimeout(e, 120)), s.filter((t) => e.includes(String(t.value)))), f = async (e) => (await new Promise((e) => setTimeout(e, 180)), {
-	value: e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "custom-region",
-	label: e.trim(),
-	description: "Created from the current search query"
-});
-function p() {
-	let [p, m] = i(""), [h, g] = i(["north", "west"]), _ = r.find((e) => e.value === p), v = r.filter((e) => h.includes(String(e.value)));
-	return /* @__PURE__ */ a("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: "Remote selection"
-						}),
-						/* @__PURE__ */ a("h3", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: "AsyncSelect is the remote member of the Select family"
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-							children: "Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware."
-						})
-					]
-				}), /* @__PURE__ */ o("div", {
-					className: "flex flex-wrap gap-2",
-					children: [
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Async"
-						}),
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Search"
-						}),
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Clearable"
-						})
-					]
-				})]
-			}), /* @__PURE__ */ o("div", {
-				className: "mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]",
-				children: [/* @__PURE__ */ o("div", {
-					className: c,
-					children: [
-						/* @__PURE__ */ a("p", {
-							className: "text-sm font-medium aui-text-muted",
-							children: "Assign service region"
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "mt-3",
-							children: /* @__PURE__ */ a(n, {
-								value: p,
-								onValueChange: (e) => m(e ?? ""),
-								loadOptions: l,
-								loadSelectedOption: u,
-								defaultOptions: s,
-								minSearchLength: 1,
-								clearable: !0,
-								showSelectedDescription: !0,
-								debounceMs: 220,
-								onCreateOption: f,
-								createOptionLabel: (e) => `Create region "${e.trim()}"`,
-								labels: {
-									placeholder: "Choose service region",
-									searchPlaceholder: "Search regions...",
-									error: "Could not load regions. Try another query."
-								}
-							})
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "mt-5",
-							children: [/* @__PURE__ */ a("p", {
-								className: "text-sm font-medium aui-text-muted",
-								children: "Multi select uses the same component"
-							}), /* @__PURE__ */ a("div", {
-								className: "mt-3",
-								children: /* @__PURE__ */ a(n, {
-									isMulti: !0,
-									value: h,
-									onValueChange: (e) => g(e),
-									loadOptions: l,
-									loadSelectedOptions: d,
-									defaultOptions: s,
-									minSearchLength: 1,
-									clearable: !0,
-									showSelectAll: !0,
-									maxSelected: 3,
-									maxVisibleTags: 2,
-									showSelectedDescription: !0,
-									debounceMs: 220,
-									onCreateOption: f,
-									createOptionLabel: (e) => `Create team "${e.trim()}"`,
-									labels: {
-										multiPlaceholder: "Choose team coverage",
-										searchPlaceholder: "Search team regions...",
-										error: "Could not load teams. Try another query.",
-										selectedCount: (e) => `${e} regions selected`,
-										hiddenSelected: (e) => `+${e} more`,
-										maxSelected: (e) => `Maximum ${e} regions`
-									}
-								})
-							})]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "mt-4 flex flex-wrap gap-2",
-							children: [
-								/* @__PURE__ */ a(e, {
-									size: "sm",
-									variant: "secondary",
-									onClick: () => m("south"),
-									children: "Hydrate South"
-								}),
-								/* @__PURE__ */ a(e, {
-									size: "sm",
-									variant: "secondary",
-									onClick: () => g([
-										"north",
-										"west",
-										"central"
-									]),
-									children: "Fill max selected"
-								}),
-								/* @__PURE__ */ a(e, {
-									size: "sm",
-									variant: "outline",
-									onClick: () => {
-										m(""), g([]);
-									},
-									children: "Clear all"
-								})
-							]
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "mt-4 grid gap-3 md:grid-cols-3",
-							children: [
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ a("p", {
-										className: "font-medium aui-text-strong",
-										children: "Type to query"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 leading-6 aui-text-muted",
-										children: "Minimum search length keeps remote requests intentional. Type error to test failure state."
-									})]
-								}),
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ a("p", {
-										className: "font-medium aui-text-strong",
-										children: "Clear safely"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 leading-6 aui-text-muted",
-										children: "Clear action is isolated from the trigger surface."
-									})]
-								}),
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ a("p", {
-										className: "font-medium aui-text-strong",
-										children: "Create and hydrate"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 leading-6 aui-text-muted",
-										children: "Create missing options and restore selected labels from ID-first edit state."
-									})]
-								})
-							]
-						})
-					]
-				}), /* @__PURE__ */ o("div", {
-					className: c,
-					children: [
-						/* @__PURE__ */ a("p", {
-							className: "text-sm font-medium aui-text-muted",
-							children: "Selected result"
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: _?.label || "No region selected"
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: "Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model."
-						}),
-						/* @__PURE__ */ o("div", {
-							className: "mt-4 space-y-3",
-							children: [
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ a("p", {
-										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
-										children: "Value"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: p || "none"
-									})]
-								}),
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ a("p", {
-										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
-										children: "Team"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: _ ? r.find((e) => e.value === _.value)?.team : "No team"
-									})]
-								}),
-								/* @__PURE__ */ o("div", {
-									className: "rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ a("p", {
-										className: "text-xs uppercase tracking-[0.2em] aui-text-muted",
-										children: "Multi mode"
-									}), /* @__PURE__ */ a("p", {
-										className: "mt-2 text-sm font-medium aui-text-strong",
-										children: v.length ? v.map((e) => e.label).join(", ") : "No teams selected"
-									})]
-								})
-							]
-						})
-					]
-				})]
-			})]
-		})
-	});
-}
-//#endregion
-export { p as AsyncSelectShowcase };

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

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

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

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

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

@@ -1,16 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Avatar, AvatarGroup } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-4">
-      <Avatar name="Azamat Jurayev" status="online" />
-      <AvatarGroup
-        items={[
-          { key: "az", name: "Azamat Jurayev", status: "online" },
-          { key: "su", name: "Suhrob Karimov", status: "busy" },
-          { key: "na", name: "Nargiza Saidova", status: "away" },
-        ]}
-      />
-    </div>
-  )
-}`,cliCommand:`npx tembro add avatar`,highlights:[`Single avatar plus stacked group export`,`Fallback initials, shape, size, and status dot support`,`Useful in tables, comments, assignee chips, and team headers`],scenarios:[{title:`Assignee`,description:`Show the current owner with initials fallback and live status.`},{title:`Team rail`,description:`Stack a small team summary without creating a full user card.`},{title:`Review feed`,description:`Attach person identity to comments or event rows.`}]};exports.avatarMock=e;

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

@@ -1,26 +0,0 @@
-//#region src/showcase/premium/avatar/mock.ts
-var e = {
-	code: "import { Avatar, AvatarGroup } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Avatar name=\"Azamat Jurayev\" status=\"online\" />\n      <AvatarGroup\n        items={[\n          { key: \"az\", name: \"Azamat Jurayev\", status: \"online\" },\n          { key: \"su\", name: \"Suhrob Karimov\", status: \"busy\" },\n          { key: \"na\", name: \"Nargiza Saidova\", status: \"away\" },\n        ]}\n      />\n    </div>\n  )\n}",
-	cliCommand: "npx tembro add avatar",
-	highlights: [
-		"Single avatar plus stacked group export",
-		"Fallback initials, shape, size, and status dot support",
-		"Useful in tables, comments, assignee chips, and team headers"
-	],
-	scenarios: [
-		{
-			title: "Assignee",
-			description: "Show the current owner with initials fallback and live status."
-		},
-		{
-			title: "Team rail",
-			description: "Stack a small team summary without creating a full user card."
-		},
-		{
-			title: "Review feed",
-			description: "Attach person identity to comments or event rows."
-		}
-	]
-};
-//#endregion
-export { e as avatarMock };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/avatar.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`,i=[{key:`az`,name:`Azamat Jurayev`,status:`online`},{key:`sa`,name:`Saida Karimova`,status:`busy`},{key:`um`,name:`Umid Rakhimov`,status:`away`},{key:`ni`,name:`Nigor Akhmedova`,status:`online`},{key:`ja`,name:`Jasur Tursunov`,status:`offline`}];function a(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Avatar handles identity without heavy cards`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Assignee row`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The component should stay readable in compact operational lists, not only inside profile layouts.`}),(0,n.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,n.jsx)(t.Avatar,{name:`Azamat Jurayev`,size:`lg`,status:`online`}),(0,n.jsxs)(`div`,{className:`min-w-0`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Azamat Jurayev`}),(0,n.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Release owner for the current component pass`})]}),(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Online`})]})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Size and shape`}),(0,n.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-3`,children:[(0,n.jsx)(t.Avatar,{name:`TM`,size:`xs`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`sm`,shape:`rounded`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`default`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`lg`,shape:`square`}),(0,n.jsx)(t.Avatar,{name:`TM`,size:`xl`,shape:`rounded`})]})]})]})}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Team summary`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Grouped avatars work best as a compact cue, not a replacement for a full people management panel.`})]}),(0,n.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,n.jsx)(t.AvatarGroup,{items:i,max:4})})]})})]})}exports.AvatarShowcase=a;

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

@@ -1,149 +0,0 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { Avatar as t, AvatarGroup as n } from "../../../components/display/avatar.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/avatar/showcase.tsx
-var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
-	{
-		key: "az",
-		name: "Azamat Jurayev",
-		status: "online"
-	},
-	{
-		key: "sa",
-		name: "Saida Karimova",
-		status: "busy"
-	},
-	{
-		key: "um",
-		name: "Umid Rakhimov",
-		status: "away"
-	},
-	{
-		key: "ni",
-		name: "Nigor Akhmedova",
-		status: "online"
-	},
-	{
-		key: "ja",
-		name: "Jasur Tursunov",
-		status: "offline"
-	}
-];
-function s() {
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-0",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "pb-6",
-				children: [
-					/* @__PURE__ */ r("p", {
-						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-						children: "Installed display primitive"
-					}),
-					/* @__PURE__ */ r("h3", {
-						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-						children: "Avatar handles identity without heavy cards"
-					}),
-					/* @__PURE__ */ r("p", {
-						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
-						children: "Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed."
-					})
-				]
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ i("div", {
-					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
-					children: [/* @__PURE__ */ i("div", { children: [
-						/* @__PURE__ */ r("p", {
-							className: "text-lg font-semibold aui-text-strong",
-							children: "Assignee row"
-						}),
-						/* @__PURE__ */ r("p", {
-							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-							children: "The component should stay readable in compact operational lists, not only inside profile layouts."
-						}),
-						/* @__PURE__ */ i("div", {
-							className: "mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-							children: [
-								/* @__PURE__ */ r(t, {
-									name: "Azamat Jurayev",
-									size: "lg",
-									status: "online"
-								}),
-								/* @__PURE__ */ i("div", {
-									className: "min-w-0",
-									children: [/* @__PURE__ */ r("p", {
-										className: "text-sm font-semibold aui-text-strong",
-										children: "Azamat Jurayev"
-									}), /* @__PURE__ */ r("p", {
-										className: "mt-1 text-sm aui-text-muted",
-										children: "Release owner for the current component pass"
-									})]
-								}),
-								/* @__PURE__ */ r(e, {
-									variant: "secondary",
-									children: "Online"
-								})
-							]
-						})
-					] }), /* @__PURE__ */ i("div", {
-						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
-						children: [/* @__PURE__ */ r("p", {
-							className: "text-sm font-semibold aui-text-strong",
-							children: "Size and shape"
-						}), /* @__PURE__ */ i("div", {
-							className: "mt-4 flex flex-wrap items-center gap-3",
-							children: [
-								/* @__PURE__ */ r(t, {
-									name: "TM",
-									size: "xs"
-								}),
-								/* @__PURE__ */ r(t, {
-									name: "TM",
-									size: "sm",
-									shape: "rounded"
-								}),
-								/* @__PURE__ */ r(t, {
-									name: "TM",
-									size: "default"
-								}),
-								/* @__PURE__ */ r(t, {
-									name: "TM",
-									size: "lg",
-									shape: "square"
-								}),
-								/* @__PURE__ */ r(t, {
-									name: "TM",
-									size: "xl",
-									shape: "rounded"
-								})
-							]
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ i("div", {
-					className: "grid gap-6 xl:grid-cols-[0.9fr_1.1fr]",
-					children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("p", {
-						className: "text-lg font-semibold aui-text-strong",
-						children: "Team summary"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-						children: "Grouped avatars work best as a compact cue, not a replacement for a full people management panel."
-					})] }), /* @__PURE__ */ r("div", {
-						className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-						children: /* @__PURE__ */ r(n, {
-							items: o,
-							max: 4
-						})
-					})]
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { s as AvatarShowcase };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{label:`Current`,variant:`default`,note:`Primary state badge`},{label:`Secondary`,variant:`secondary`,note:`Supportive metadata`},{label:`Outline`,variant:`outline`,note:`Light emphasis`},{label:`Alert`,variant:`destructive`,note:`Critical state`},{label:`Ghost`,variant:`ghost`,note:`Soft inline state`},{label:`Inline link`,variant:`link`,note:`Navigational text badge`}];exports.badgeDemoItems=e;

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

@@ -1,35 +0,0 @@
-//#region src/showcase/premium/badge/data.ts
-var e = [
-	{
-		label: "Current",
-		variant: "default",
-		note: "Primary state badge"
-	},
-	{
-		label: "Secondary",
-		variant: "secondary",
-		note: "Supportive metadata"
-	},
-	{
-		label: "Outline",
-		variant: "outline",
-		note: "Light emphasis"
-	},
-	{
-		label: "Alert",
-		variant: "destructive",
-		note: "Critical state"
-	},
-	{
-		label: "Ghost",
-		variant: "ghost",
-		note: "Soft inline state"
-	},
-	{
-		label: "Inline link",
-		variant: "link",
-		note: "Navigational text badge"
-	}
-];
-//#endregion
-export { e as badgeDemoItems };

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

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

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

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

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

@@ -1,13 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Badge } from "tembro"
-
-export function Example() {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Badge status="success" label="Active" />
-      <Badge status="warning" label="Needs review" />
-      <Badge variant="secondary" label="Invoices" count={12} />
-      <Badge variant="outline" label="Design" removable onRemove={() => console.log("remove")} />
-    </div>
-  )
-}
-`,htmlCode:`<span data-slot="badge" data-variant="secondary">New</span>`,cliCommand:`npx tembro add badge`,highlights:[`Status props`,`Count chip`,`Removable chip`,`Compact metadata`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`dashboard-starter`],scenarios:[{title:`Release status`,description:`Show current lifecycle state beside titles and cards.`},{title:`Filter metadata`,description:`Use badges to display chips and selected states.`},{title:`Count surfaces`,description:`Embed small counters in headers and toolbars.`},{title:`Inline annotations`,description:`Tag records, table rows and templates with short metadata.`}],capabilityNotes:[`Use status for ready-made semantic tones instead of manually picking every badge color.`,`Use count when the chip also needs a compact number bubble.`,`Use removable with onRemove for filter chips and selected metadata.`,`Avoid using badges as primary interactive controls; pair with buttons or links when action needed.`]};exports.badgeMock=e;

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

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/badge/mock.ts
-var e = {
-	code: "import { Badge } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge status=\"success\" label=\"Active\" />\n      <Badge status=\"warning\" label=\"Needs review\" />\n      <Badge variant=\"secondary\" label=\"Invoices\" count={12} />\n      <Badge variant=\"outline\" label=\"Design\" removable onRemove={() => console.log(\"remove\")} />\n    </div>\n  )\n}\n",
-	htmlCode: "<span data-slot=\"badge\" data-variant=\"secondary\">New</span>",
-	cliCommand: "npx tembro add badge",
-	highlights: [
-		"Status props",
-		"Count chip",
-		"Removable chip",
-		"Compact metadata"
-	],
-	relatedBlockSlugs: [
-		"users-table",
-		"crm-dashboard",
-		"dashboard-starter"
-	],
-	scenarios: [
-		{
-			title: "Release status",
-			description: "Show current lifecycle state beside titles and cards."
-		},
-		{
-			title: "Filter metadata",
-			description: "Use badges to display chips and selected states."
-		},
-		{
-			title: "Count surfaces",
-			description: "Embed small counters in headers and toolbars."
-		},
-		{
-			title: "Inline annotations",
-			description: "Tag records, table rows and templates with short metadata."
-		}
-	],
-	capabilityNotes: [
-		"Use status for ready-made semantic tones instead of manually picking every badge color.",
-		"Use count when the chip also needs a compact number bubble.",
-		"Use removable with onRemove for filter chips and selected metadata.",
-		"Avoid using badges as primary interactive controls; pair with buttons or links when action needed."
-	]
-};
-//#endregion
-export { e as badgeMock };

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