tembro 1.0.0

package/dist/showcase/premium/dual-list-picker/mock.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DualListPicker } from "@/index"
+
+const items = [
+  { label: "Analytics", value: "analytics" },
+  { label: "Reports", value: "reports" },
+]
+
+export function Example() {
+  const [picked, setPicked] = useState(["analytics"])
+
+  return (
+    <DualListPicker
+      items={items}
+      picked={picked}
+      onPickedChange={setPicked}
+      availableTitle="Available"
+      pickedTitle="Selected"
+    />
+  )
+}`,cliCommand:`npx tembro add dual-list-picker`,highlights:[`Move items between available/selected lists`,`Supports disabled choices`,`Simple controlled value pattern`],scenarios:[{title:`Role permissions`,description:`Select which modules are available for a user role.`},{title:`Feature toggles`,description:`Move capabilities between disabled and enabled buckets.`}]};exports.dualListPickerMock=e;

package/dist/showcase/premium/dual-list-picker/mock.d.ts

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

package/dist/showcase/premium/dual-list-picker/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/dual-list-picker/mock.ts
+var e = {
+	code: "import { DualListPicker } from \"@/index\"\n\nconst items = [\n  { label: \"Analytics\", value: \"analytics\" },\n  { label: \"Reports\", value: \"reports\" },\n]\n\nexport function Example() {\n  const [picked, setPicked] = useState([\"analytics\"])\n\n  return (\n    <DualListPicker\n      items={items}\n      picked={picked}\n      onPickedChange={setPicked}\n      availableTitle=\"Available\"\n      pickedTitle=\"Selected\"\n    />\n  )\n}",
+	cliCommand: "npx tembro add dual-list-picker",
+	highlights: [
+		"Move items between available/selected lists",
+		"Supports disabled choices",
+		"Simple controlled value pattern"
+	],
+	scenarios: [{
+		title: "Role permissions",
+		description: "Select which modules are available for a user role."
+	}, {
+		title: "Feature toggles",
+		description: "Move capabilities between disabled and enabled buckets."
+	}]
+};
+//#endregion
+export { e as dualListPickerMock };

package/dist/showcase/premium/dual-list-picker/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/dual-list-picker.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{label:`Analytics`,value:`analytics`},{label:`Reports`,value:`reports`},{label:`Integrations`,value:`integrations`},{label:`Billing`,value:`billing`},{label:`Notifications`,value:`notifications`,disabled:!0}];function a(){let[e,a]=n.useState([`analytics`]);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Selected: `,e.join(`, `)||`None`]}),(0,r.jsx)(t.DualListPicker,{items:i,picked:e,onPickedChange:a,availableTitle:`All modules`,pickedTitle:`Enabled modules`}),(0,r.jsx)(`button`,{type:`button`,className:`rounded-md border px-3 py-1.5 text-sm`,onClick:()=>a([]),children:`Clear selection`})]})}exports.DualListPickerShowcase=a;

package/dist/showcase/premium/dual-list-picker/showcase.d.ts

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

package/dist/showcase/premium/dual-list-picker/showcase.js

@@ -0,0 +1,54 @@
+import { DualListPicker as e } from "../../../components/modern/dual-list-picker.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/dual-list-picker/showcase.tsx
+var i = [
+	{
+		label: "Analytics",
+		value: "analytics"
+	},
+	{
+		label: "Reports",
+		value: "reports"
+	},
+	{
+		label: "Integrations",
+		value: "integrations"
+	},
+	{
+		label: "Billing",
+		value: "billing"
+	},
+	{
+		label: "Notifications",
+		value: "notifications",
+		disabled: !0
+	}
+];
+function a() {
+	let [a, o] = t.useState(["analytics"]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("p", {
+				className: "text-sm text-muted-foreground",
+				children: ["Selected: ", a.join(", ") || "None"]
+			}),
+			/* @__PURE__ */ n(e, {
+				items: i,
+				picked: a,
+				onPickedChange: o,
+				availableTitle: "All modules",
+				pickedTitle: "Enabled modules"
+			}),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				className: "rounded-md border px-3 py-1.5 text-sm",
+				onClick: () => o([]),
+				children: "Clear selection"
+			})
+		]
+	});
+}
+//#endregion
+export { a as DualListPickerShowcase };

package/dist/showcase/premium/empty-state/index.cjs

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

package/dist/showcase/premium/empty-state/index.d.ts

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

package/dist/showcase/premium/empty-state/index.js

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

package/dist/showcase/premium/empty-state/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { EmptyState } from "tembro"
+
+export function Example() {
+  return (
+    <EmptyState
+      title="No results yet"
+      description="Create your first item to unlock actions and charts."
+      actionLabel="Create item"
+      onAction={() => {
+        console.log("Create action triggered")
+      }}
+    />
+  )
+}`,highlights:[`No-content user messaging`,`Built-in action callback`,`Lightweight onboarding placeholder`,`Reusable for any resource list`],scenarios:[{title:`First launch`,description:`Guide users to create first entity in a clean state.`},{title:`Filtered empty`,description:`Tell users what changed filters removed all items.`},{title:`Error fallback`,description:`Use with loading and retry controls when data fetch fails.`}],capabilityNotes:[`Always provide a clear next action to recover from empty state.`,`Keep titles short and outcome oriented.`,`Prefer one primary action + short explanation for fastest user decision.`]};exports.emptyStateMock=e;

package/dist/showcase/premium/empty-state/mock.d.ts

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

package/dist/showcase/premium/empty-state/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/empty-state/mock.ts
+var e = {
+	code: "import { EmptyState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <EmptyState\n      title=\"No results yet\"\n      description=\"Create your first item to unlock actions and charts.\"\n      actionLabel=\"Create item\"\n      onAction={() => {\n        console.log(\"Create action triggered\")\n      }}\n    />\n  )\n}",
+	highlights: [
+		"No-content user messaging",
+		"Built-in action callback",
+		"Lightweight onboarding placeholder",
+		"Reusable for any resource list"
+	],
+	scenarios: [
+		{
+			title: "First launch",
+			description: "Guide users to create first entity in a clean state."
+		},
+		{
+			title: "Filtered empty",
+			description: "Tell users what changed filters removed all items."
+		},
+		{
+			title: "Error fallback",
+			description: "Use with loading and retry controls when data fetch fails."
+		}
+	],
+	capabilityNotes: [
+		"Always provide a clear next action to recover from empty state.",
+		"Keep titles short and outcome oriented.",
+		"Prefer one primary action + short explanation for fastest user decision."
+	]
+};
+//#endregion
+export { e as emptyStateMock };

package/dist/showcase/premium/empty-state/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/feedback/empty-state.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),[l,u]=i.useState(!0);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:`No-content state`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Empty state should unblock the next step`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`No data`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`One next action`})]})]})}),l?(0,a.jsx)(r.EmptyState,{title:`No results found`,description:`There is nothing to show yet. Create one item to continue.`,actionLabel:`Create first item`,onAction:()=>c(e=>e+1)}):(0,a.jsx)(r.EmptyState,{title:`Empty state intentionally hidden`,description:`Use a custom fallback only when needed.`}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Interaction count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:s}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use the primary CTA only for the most direct recovery path.`})]}),e===`playground`?(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Preview controls`}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:l?`default`:`outline`,onClick:()=>u(e=>!e),children:`Toggle feedback`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>c(0),children:`Reset actions`})]})]}):null]})]})}exports.EmptyStateShowcase=s;

package/dist/showcase/premium/empty-state/showcase.d.ts

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

package/dist/showcase/premium/empty-state/showcase.js

@@ -0,0 +1,99 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { EmptyState as n } from "../../../components/feedback/empty-state.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/empty-state/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function s({ mode: s }) {
+	let [c, l] = r.useState(0), [u, d] = r.useState(!0);
+	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: "No-content state"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Empty state should unblock the next step"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "No data"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "One next action"
+						})]
+					})]
+				})
+			}),
+			u ? /* @__PURE__ */ i(n, {
+				title: "No results found",
+				description: "There is nothing to show yet. Create one item to continue.",
+				actionLabel: "Create first item",
+				onAction: () => l((e) => e + 1)
+			}) : /* @__PURE__ */ i(n, {
+				title: "Empty state intentionally hidden",
+				description: "Use a custom fallback only when needed."
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-[0.9fr_1.1fr]",
+				children: [/* @__PURE__ */ a("section", {
+					className: o,
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Interaction count"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: c
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: "Use the primary CTA only for the most direct recovery path."
+						})
+					]
+				}), s === "playground" ? /* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Preview controls"
+					}), /* @__PURE__ */ a("div", {
+						className: "mt-4 flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: u ? "default" : "outline",
+							onClick: () => d((e) => !e),
+							children: "Toggle feedback"
+						}), /* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => l(0),
+							children: "Reset actions"
+						})]
+					})]
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { s as EmptyStateShowcase };

package/dist/showcase/premium/file-upload/index.cjs

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

package/dist/showcase/premium/file-upload/index.d.ts

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

package/dist/showcase/premium/file-upload/index.js

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

package/dist/showcase/premium/file-upload/mock.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { FileUpload } from "@/index"
+
+export function Example() {
+  const [files, setFiles] = useState<File[]>([])
+
+  return (
+    <FileUpload
+      files={files}
+      onFilesChange={setFiles}
+      accept=".pdf,.docx,.png"
+      maxFiles={4}
+      maxSize={4 * 1024 * 1024}
+      helperText="Supports PDF, DOCX and PNG up to 4 MB."
+    />
+  )
+}`,cliCommand:`npx tembro add file-upload`,highlights:[`Reusable dropzone and file list`,`Rejected state support`,`Nested clear/remove interactions`,`Controlled file array API`],scenarios:[{title:`Admin attachments`,description:`Upload contracts, invoices and internal release assets.`},{title:`Controlled state`,description:`Keep file state in the parent route or form container.`},{title:`Validation`,description:`Constrain type, size and count at the component boundary.`}],capabilityNotes:[`Use FileUpload when the route needs a production dropzone rather than a decorative input.`,`The remove and clear actions are isolated from the parent click surface.`,`Keep validation rules close to the component so every route behaves consistently.`]};exports.fileUploadMock=e;

package/dist/showcase/premium/file-upload/mock.d.ts

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

package/dist/showcase/premium/file-upload/mock.js

@@ -0,0 +1,32 @@
+//#region src/showcase/premium/file-upload/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { FileUpload } from \"@/index\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <FileUpload\n      files={files}\n      onFilesChange={setFiles}\n      accept=\".pdf,.docx,.png\"\n      maxFiles={4}\n      maxSize={4 * 1024 * 1024}\n      helperText=\"Supports PDF, DOCX and PNG up to 4 MB.\"\n    />\n  )\n}",
+	cliCommand: "npx tembro add file-upload",
+	highlights: [
+		"Reusable dropzone and file list",
+		"Rejected state support",
+		"Nested clear/remove interactions",
+		"Controlled file array API"
+	],
+	scenarios: [
+		{
+			title: "Admin attachments",
+			description: "Upload contracts, invoices and internal release assets."
+		},
+		{
+			title: "Controlled state",
+			description: "Keep file state in the parent route or form container."
+		},
+		{
+			title: "Validation",
+			description: "Constrain type, size and count at the component boundary."
+		}
+	],
+	capabilityNotes: [
+		"Use FileUpload when the route needs a production dropzone rather than a decorative input.",
+		"The remove and clear actions are isolated from the parent click surface.",
+		"Keep validation rules close to the component so every route behaves consistently."
+	]
+};
+//#endregion
+export { e as fileUploadMock };

package/dist/showcase/premium/file-upload/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/upload/file-upload.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(){let[e,a]=r.useState([]);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[(0,i.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,children:`Dropzone`}),(0,i.jsx)(t.Badge,{variant:`outline`,children:`Rejected files`}),(0,i.jsx)(t.Badge,{variant:`outline`,children:`Clearable`})]}),(0,i.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:`FileUpload is the production file surface`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it when you need one reusable dropzone with helper copy, rejected states, file list and nested remove actions.`})]}),(0,i.jsx)(n.FileUpload,{files:e,onFilesChange:a,accept:`.pdf,.docx,.png`,maxFiles:4,maxSize:4*1024*1024,dropzoneLabel:`Upload release assets`,dropzoneDescription:`Drag files here or choose from your device.`,helperText:`Supports PDF, DOCX and PNG up to 4 MB.`}),(0,i.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Attached files`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:e.length})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction model`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Remove and clear actions stay isolated from the parent dropzone click.`})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Use case`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Contracts, invoices, release assets and admin attachments.`})]})]})]})}exports.FileUploadShowcase=a;

package/dist/showcase/premium/file-upload/showcase.d.ts

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

package/dist/showcase/premium/file-upload/showcase.js

@@ -0,0 +1,90 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { FileUpload as t } from "../../../components/upload/file-upload.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/file-upload/showcase.tsx
+function a() {
+	let [a, o] = n.useState([]);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ r(e, {
+								variant: "outline",
+								children: "Dropzone"
+							}),
+							/* @__PURE__ */ r(e, {
+								variant: "outline",
+								children: "Rejected files"
+							}),
+							/* @__PURE__ */ r(e, {
+								variant: "outline",
+								children: "Clearable"
+							})
+						]
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm font-medium aui-text-strong",
+						children: "FileUpload is the production file surface"
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Use it when you need one reusable dropzone with helper copy, rejected states, file list and nested remove actions."
+					})
+				]
+			}),
+			/* @__PURE__ */ r(t, {
+				files: a,
+				onFilesChange: o,
+				accept: ".pdf,.docx,.png",
+				maxFiles: 4,
+				maxSize: 4 * 1024 * 1024,
+				dropzoneLabel: "Upload release assets",
+				dropzoneDescription: "Drag files here or choose from your device.",
+				helperText: "Supports PDF, DOCX and PNG up to 4 MB."
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Attached files"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: a.length
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Interaction model"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Remove and clear actions stay isolated from the parent dropzone click."
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Use case"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Contracts, invoices, release assets and admin attachments."
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { a as FileUploadShowcase };

package/dist/showcase/premium/float-button/index.cjs

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

package/dist/showcase/premium/float-button/index.d.ts

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

package/dist/showcase/premium/float-button/index.js

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

package/dist/showcase/premium/float-button/mock.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { FloatButton } from "@/index"
+import { Plus } from "lucide-react"
+
+export function Example() {
+  return (
+    <FloatButton placement="bottom-right">
+      <Plus className="size-4" />
+    </FloatButton>
+  )
+}`,cliCommand:`npx tembro add float-button`,highlights:[`Fixed-position shortcut button`,`Placement variants across corners`],scenarios:[{title:`Quick action`,description:`Keep add/create action always reachable.`},{title:`Chat widgets`,description:`Mount floating controls without complex absolute layout.`}]};exports.floatButtonMock=e;

package/dist/showcase/premium/float-button/mock.d.ts

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

package/dist/showcase/premium/float-button/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/float-button/mock.ts
+var e = {
+	code: "import { FloatButton } from \"@/index\"\nimport { Plus } from \"lucide-react\"\n\nexport function Example() {\n  return (\n    <FloatButton placement=\"bottom-right\">\n      <Plus className=\"size-4\" />\n    </FloatButton>\n  )\n}",
+	cliCommand: "npx tembro add float-button",
+	highlights: ["Fixed-position shortcut button", "Placement variants across corners"],
+	scenarios: [{
+		title: "Quick action",
+		description: "Keep add/create action always reachable."
+	}, {
+		title: "Chat widgets",
+		description: "Mount floating controls without complex absolute layout."
+	}]
+};
+//#endregion
+export { e as floatButtonMock };

package/dist/showcase/premium/float-button/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/float-button.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=[`bottom-right`,`bottom-left`,`top-right`,`top-left`];function o(){let[e,o]=n.useState(0),s=a[e%a.length];return(0,i.jsxs)(`div`,{className:`relative h-48 rounded-lg border bg-muted/20 p-6`,children:[(0,i.jsxs)(`p`,{className:`mb-3 text-sm text-muted-foreground`,children:[`Current placement: `,s]}),(0,i.jsx)(t.FloatButton,{onClick:()=>o(e=>e+1),"aria-label":`Open quick actions`,placement:s,children:(0,i.jsx)(r.PlusIcon,{className:`size-5`})})]})}exports.FloatButtonShowcase=o;

package/dist/showcase/premium/float-button/showcase.d.ts

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

package/dist/showcase/premium/float-button/showcase.js

@@ -0,0 +1,28 @@
+import { FloatButton as e } from "../../../components/display/float-button.js";
+import * as t from "react";
+import { PlusIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/float-button/showcase.tsx
+var a = [
+	"bottom-right",
+	"bottom-left",
+	"top-right",
+	"top-left"
+];
+function o() {
+	let [o, s] = t.useState(0), c = a[o % a.length];
+	return /* @__PURE__ */ i("div", {
+		className: "relative h-48 rounded-lg border bg-muted/20 p-6",
+		children: [/* @__PURE__ */ i("p", {
+			className: "mb-3 text-sm text-muted-foreground",
+			children: ["Current placement: ", c]
+		}), /* @__PURE__ */ r(e, {
+			onClick: () => s((e) => e + 1),
+			"aria-label": "Open quick actions",
+			placement: c,
+			children: /* @__PURE__ */ r(n, { className: "size-5" })
+		})]
+	});
+}
+//#endregion
+export { o as FloatButtonShowcase };

package/dist/showcase/premium/form-builder/index.cjs

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

package/dist/showcase/premium/form-builder/index.d.ts

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

package/dist/showcase/premium/form-builder/index.js

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

package/dist/showcase/premium/form-builder/mock.cjs

@@ -0,0 +1,57 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useForm } from "react-hook-form"
+import {
+  FormBuilder,
+  formSection,
+  inputField,
+  phoneField,
+  switchField,
+  textareaField,
+} from "tembro"
+
+type DemoValues = {
+  workspace: string
+  ownerPhone: string
+  notes: string
+  isLive: boolean
+}
+
+const sections = [
+  formSection<DemoValues>({
+    id: "main",
+    title: "Workspace settings",
+    description: "Field schema, sections and disabled/readOnly behavior all live in FormBuilder config.",
+    fields: [
+      inputField<DemoValues>({ id: "workspace", props: { name: "workspace", label: "Workspace name", required: true } }),
+      phoneField<DemoValues>({ id: "ownerPhone", props: { name: "ownerPhone", label: "Owner phone" } }),
+      textareaField<DemoValues>({ id: "notes", colSpan: "full", props: { name: "notes", label: "Notes", rows: 3 } }),
+      switchField<DemoValues>({
+        id: "isLive",
+        colSpan: "full",
+        props: { name: "isLive", label: "Publish workspace", description: "Toggle public availability" },
+      }),
+    ],
+  }),
+]
+
+export function Example() {
+  const form = useForm<DemoValues>({
+    defaultValues: {
+      workspace: "Azamat UI",
+      ownerPhone: "+998 90 123 45 67",
+      notes: "Connected form sections with submit and reset lifecycle.",
+      isLive: true,
+    },
+  })
+
+  return (
+    <FormBuilder
+      control={form.control}
+      sections={sections}
+      columns={1}
+      submitLabel="Save"
+      resetLabel="Reset"
+      disabled={false}
+      readOnly={false}
+    />
+  )
+}`,htmlCode:`<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>`,cliCommand:`npx tembro add form-builder`,highlights:[`Field schema`,`Sections and presets`,`submitLabel / resetLabel wiring`,`Disabled/readOnly passthrough`,`Reusable field helpers`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`],scenarios:[{title:`Field schema validation`,description:"Use typed `formSection` and helper fields for deterministic layout."},{title:`Submit + reset`,description:`Pass submitLabel/resetLabel and rely on RHF formState for disabled transitions.`},{title:`Custom render`,description:`Inject custom field-level props through helper factories.`},{title:`Read-only mode`,description:`Toggle readOnly for inspect-only workflows without changing schema.`}],capabilityNotes:["`sections` gives a single source of truth for layout and required validations.","Use `fields` for precise schema-driven field composition.",`Expose submit and reset labels directly from component props so UX can match product language.`,"Combine `disabled` + `readOnly` for different page states like locked records and review modes."]};exports.formBuilderMock=e;

package/dist/showcase/premium/form-builder/mock.d.ts

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