tembro 3.1.17 → 4.0.0

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

@@ -1,164 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { FileUpload as n } from "../../../components/upload/file-upload.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/file-upload/showcase.tsx
-function o() {
-	let [o, s] = r.useState([]), [c, l] = r.useState({}), [u, d] = r.useState({});
-	return r.useEffect(() => {
-		l((e) => {
-			let t = { ...e };
-			return o.forEach((e, n) => {
-				let r = `${e.name}-${e.size}-${e.lastModified}`;
-				t[r] ??= n === 0 ? "uploading" : n === 1 ? "error" : "success";
-			}), t;
-		});
-	}, [o]), /* @__PURE__ */ a("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ a("div", {
-				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-				children: [
-					/* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [
-							/* @__PURE__ */ i(t, {
-								variant: "outline",
-								children: "Dropzone"
-							}),
-							/* @__PURE__ */ i(t, {
-								variant: "outline",
-								children: "Rejected files"
-							}),
-							/* @__PURE__ */ i(t, {
-								variant: "outline",
-								children: "Clearable"
-							})
-						]
-					}),
-					/* @__PURE__ */ i("p", {
-						className: "mt-3 text-sm font-medium aui-text-strong",
-						children: "FileUpload is the production file surface"
-					}),
-					/* @__PURE__ */ i("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__ */ a("div", {
-				className: "flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ i(e, {
-					size: "sm",
-					onClick: () => {
-						let e = Date.now(), t = [
-							new File(["release notes"], "release-notes.pdf", {
-								type: "application/pdf",
-								lastModified: e
-							}),
-							new File(["contract draft"], "contract.docx", {
-								type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-								lastModified: e + 1
-							}),
-							new File(["preview image"], "preview.png", {
-								type: "image/png",
-								lastModified: e + 2
-							})
-						], n = t.map((e) => `${e.name}-${e.size}-${e.lastModified}`);
-						s(t), l({
-							[n[0]]: "uploading",
-							[n[1]]: "error",
-							[n[2]]: "success"
-						}), d({
-							[n[0]]: 46,
-							[n[1]]: 72,
-							[n[2]]: 100
-						});
-					},
-					children: "Load sample files"
-				}), /* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: "outline",
-					disabled: o.length === 0,
-					onClick: () => {
-						s([]), l({}), d({});
-					},
-					children: "Clear demo"
-				})]
-			}),
-			/* @__PURE__ */ i(n, {
-				files: o,
-				onFilesChange: s,
-				status: c,
-				accept: ".pdf,.docx,.png",
-				maxFiles: 4,
-				maxSize: 4 * 1024 * 1024,
-				progress: u,
-				dropzoneLabel: "Upload release assets",
-				dropzoneDescription: "Drag files here or choose from your device.",
-				helperText: "Supports PDF, DOCX and PNG up to 4 MB. Filenames containing private are rejected.",
-				validateFile: (e) => e.name.toLowerCase().includes("private") ? "Private files cannot be uploaded here." : null,
-				rejectionMessages: {
-					"max-files": ({ maxFiles: e }) => `Only ${e} release assets are allowed.`,
-					"max-size": "This asset exceeds the 4 MB release limit."
-				},
-				onRetryFile: (e) => {
-					let t = `${e.name}-${e.size}-${e.lastModified}`;
-					l((e) => ({
-						...e,
-						[t]: "uploading"
-					})), d((e) => ({
-						...e,
-						[t]: 35
-					})), window.setTimeout(() => {
-						l((e) => ({
-							...e,
-							[t]: "success"
-						})), d((e) => ({
-							...e,
-							[t]: 100
-						}));
-					}, 900);
-				}
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-3 md:grid-cols-3",
-				children: [
-					/* @__PURE__ */ a("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__ */ i("p", {
-							className: "font-medium aui-text-strong",
-							children: "Attached files"
-						}), /* @__PURE__ */ i("p", {
-							className: "mt-2 aui-text-muted",
-							children: o.length
-						})]
-					}),
-					/* @__PURE__ */ a("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__ */ i("p", {
-							className: "font-medium aui-text-strong",
-							children: "Interaction model"
-						}), /* @__PURE__ */ i("p", {
-							className: "mt-2 aui-text-muted",
-							children: "Uploading, success and retry-ready error rows all stay isolated from the parent dropzone click."
-						})]
-					}),
-					/* @__PURE__ */ a("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__ */ i("p", {
-							className: "font-medium aui-text-strong",
-							children: "Use case"
-						}), /* @__PURE__ */ i("p", {
-							className: "mt-2 aui-text-muted",
-							children: "Contracts, invoices, release assets and admin attachments."
-						})]
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { o as FileUploadShowcase };

package/dist/src/showcase/premium/form-wrapper/index.cjs

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

package/dist/src/showcase/premium/form-wrapper/index.js

@@ -1,3 +0,0 @@
-import { FormWrapperShowcase as e } from "./showcase.js";
-import { formRHFWrapperMock as t, formSelectMock as n } from "./mock.js";
-export { e as FormWrapperShowcase, t as formRHFWrapperMock, n as formSelectMock };

package/dist/src/showcase/premium/form-wrapper/mock.cjs

@@ -1,126 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useForm } from "react-hook-form"
-import { Button, FormInput, FormSwitch, FormTextarea } from "tembro"
-
-type DemoValues = {
-  name: string
-  ownerPhone: string
-  price: number | null
-  notes: string
-  active: boolean
-}
-
-export function Example() {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      name: "Tembro",
-      ownerPhone: "+998 90 123 45 67",
-      price: 120,
-      notes: "Use control, name, rules, error, and required labels.",
-      active: true,
-    },
-  })
-
-  const onSubmit = form.handleSubmit((values) => {
-    console.log(values)
-  })
-
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      <FormInput
-        control={form.control}
-        name="name"
-        label="Workspace name"
-        required
-        placeholder="Write a workspace title"
-        rules={{
-          required: "Workspace name is required",
-          minLength: { value: 3, message: "At least 3 characters" },
-        }}
-      />
-
-      <FormInput
-        control={form.control}
-        name="ownerPhone"
-        kind="phone"
-        label="Owner phone"
-        description="Use canonical phone value for API payloads."
-        rules={{ required: "Phone number is required" }}
-      />
-
-      <FormInput
-        control={form.control}
-        name="price"
-        kind="number"
-        label="Budget"
-        min={0}
-        max={100000}
-        required
-      />
-
-      <FormTextarea
-        control={form.control}
-        name="notes"
-        label="Notes"
-        required
-        rows={3}
-        description="RHF handles error and required states."
-      />
-
-      <FormSwitch control={form.control} name="active" label="Active" />
-
-      <Button type="submit">Save</Button>
-    </form>
-  )`,htmlCode:`<form><label for="workspace">Workspace</label><input id="workspace" value="Tembro" /></form>`,cliCommand:`npx tembro add form-input form-textarea form-switch`,highlights:[`control + name contract`,"Universal `kind` variants",`Error display and required markers`,`Consistent wrapper shell behavior`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Required validation`,description:"Use `rules` for required and length constraints and show errors in shell."},{title:`Error display`,description:`Inject custom error messages for required and domain checks.`},{title:`Read-only states`,description:`Support locked and disabled states from parent screens.`},{title:`Unified layout`,description:`Keep one shell language for input, select and toggle types without multiplying wrapper names.`}],capabilityNotes:["Use `control` and `name` from a shared `useForm` call for every field wrapper.","Prefer `FormInput kind=...` and `FormSelect kind=...` for new work; keep alias wrappers only for migration.","Pass RHF `rules` or `validate` to each wrapper, instead of inline ad-hoc checks.","`required` should be explicit both in copy (UI marker) and schema.","Render validation messages through wrapper-level `error` or formState errors for consistent spacing."]},t={code:`import { useForm } from "react-hook-form"
-import { Button, FormSelect } from "tembro"
-
-const statusOptions = [
-  { label: "Draft", value: "draft" },
-  { label: "Review", value: "review" },
-  { label: "Live", value: "live" },
-]
-
-const workspaceOptions = [
-  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
-  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
-]
-
-async function loadWorkspaces(search: string) {
-  const query = search.trim().toLowerCase()
-  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
-}
-
-async function loadWorkspace(value: string) {
-  return workspaceOptions.find((option) => option.value === value) ?? null
-}
-
-export function Example() {
-  const form = useForm({
-    defaultValues: {
-      status: "review",
-      ownerId: "workspace-alpha",
-    },
-  })
-
-  return (
-    <form className="space-y-4">
-      <FormSelect
-        control={form.control}
-        name="status"
-        label="Release status"
-        options={statusOptions}
-        placeholder="Choose status"
-      />
-
-      <FormSelect
-        control={form.control}
-        name="ownerId"
-        kind="async"
-        label="Linked workspace"
-        loadOptions={loadWorkspaces}
-        loadSelectedOption={loadWorkspace}
-      />
-
-      <Button type="submit">Save</Button>
-    </form>
-  )
-}`,cliCommand:`npx tembro add form-select`,highlights:[`One RHF select wrapper`,`Simple + async under one API`,`Shared shell labels and errors`,`Preferred select-form entry`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Static form choices`,description:`Use the default FormSelect mode for known statuses, roles, or visibility controls.`},{title:`Remote edit flows`,description:`Switch to kind="async" when the form hydrates saved entity values from remote search results.`},{title:`Shared validation shell`,description:`Keep labels, descriptions, and errors aligned across simple and async field variants.`}],capabilityNotes:[`Prefer FormSelect for new select fields instead of splitting wrappers too early.`,`Use kind="async" only when loading and hydration are remote concerns.`,`Keep the RHF contract identical while the field interaction model changes underneath.`]};exports.formRHFWrapperMock=e,exports.formSelectMock=t;

package/dist/src/showcase/premium/form-wrapper/mock.js

@@ -1,77 +0,0 @@
-//#region src/showcase/premium/form-wrapper/mock.ts
-var e = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormInput, FormSwitch, FormTextarea } from \"tembro\"\n\ntype DemoValues = {\n  name: string\n  ownerPhone: string\n  price: number | null\n  notes: string\n  active: boolean\n}\n\nexport function Example() {\n  const form = useForm<DemoValues>({\n    defaultValues: {\n      name: \"Tembro\",\n      ownerPhone: \"+998 90 123 45 67\",\n      price: 120,\n      notes: \"Use control, name, rules, error, and required labels.\",\n      active: true,\n    },\n  })\n\n  const onSubmit = form.handleSubmit((values) => {\n    console.log(values)\n  })\n\n  return (\n    <form onSubmit={onSubmit} className=\"space-y-4\">\n      <FormInput\n        control={form.control}\n        name=\"name\"\n        label=\"Workspace name\"\n        required\n        placeholder=\"Write a workspace title\"\n        rules={{\n          required: \"Workspace name is required\",\n          minLength: { value: 3, message: \"At least 3 characters\" },\n        }}\n      />\n\n      <FormInput\n        control={form.control}\n        name=\"ownerPhone\"\n        kind=\"phone\"\n        label=\"Owner phone\"\n        description=\"Use canonical phone value for API payloads.\"\n        rules={{ required: \"Phone number is required\" }}\n      />\n\n      <FormInput\n        control={form.control}\n        name=\"price\"\n        kind=\"number\"\n        label=\"Budget\"\n        min={0}\n        max={100000}\n        required\n      />\n\n      <FormTextarea\n        control={form.control}\n        name=\"notes\"\n        label=\"Notes\"\n        required\n        rows={3}\n        description=\"RHF handles error and required states.\"\n      />\n\n      <FormSwitch control={form.control} name=\"active\" label=\"Active\" />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )",
-	htmlCode: "<form><label for=\"workspace\">Workspace</label><input id=\"workspace\" value=\"Tembro\" /></form>",
-	cliCommand: "npx tembro add form-input form-textarea form-switch",
-	highlights: [
-		"control + name contract",
-		"Universal `kind` variants",
-		"Error display and required markers",
-		"Consistent wrapper shell behavior"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"crm-dashboard",
-		"users-table"
-	],
-	scenarios: [
-		{
-			title: "Required validation",
-			description: "Use `rules` for required and length constraints and show errors in shell."
-		},
-		{
-			title: "Error display",
-			description: "Inject custom error messages for required and domain checks."
-		},
-		{
-			title: "Read-only states",
-			description: "Support locked and disabled states from parent screens."
-		},
-		{
-			title: "Unified layout",
-			description: "Keep one shell language for input, select and toggle types without multiplying wrapper names."
-		}
-	],
-	capabilityNotes: [
-		"Use `control` and `name` from a shared `useForm` call for every field wrapper.",
-		"Prefer `FormInput kind=...` and `FormSelect kind=...` for new work; keep alias wrappers only for migration.",
-		"Pass RHF `rules` or `validate` to each wrapper, instead of inline ad-hoc checks.",
-		"`required` should be explicit both in copy (UI marker) and schema.",
-		"Render validation messages through wrapper-level `error` or formState errors for consistent spacing."
-	]
-}, t = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormSelect } from \"tembro\"\n\nconst statusOptions = [\n  { label: \"Draft\", value: \"draft\" },\n  { label: \"Review\", value: \"review\" },\n  { label: \"Live\", value: \"live\" },\n]\n\nconst workspaceOptions = [\n  { value: \"workspace-alpha\", label: \"Workspace Alpha\", description: \"Core design system route\" },\n  { value: \"workspace-beta\", label: \"Workspace Beta\", description: \"CRM rollout workspace\" },\n]\n\nasync function loadWorkspaces(search: string) {\n  const query = search.trim().toLowerCase()\n  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))\n}\n\nasync function loadWorkspace(value: string) {\n  return workspaceOptions.find((option) => option.value === value) ?? null\n}\n\nexport function Example() {\n  const form = useForm({\n    defaultValues: {\n      status: \"review\",\n      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormSelect\n        control={form.control}\n        name=\"status\"\n        label=\"Release status\"\n        options={statusOptions}\n        placeholder=\"Choose status\"\n      />\n\n      <FormSelect\n        control={form.control}\n        name=\"ownerId\"\n        kind=\"async\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}",
-	cliCommand: "npx tembro add form-select",
-	highlights: [
-		"One RHF select wrapper",
-		"Simple + async under one API",
-		"Shared shell labels and errors",
-		"Preferred select-form entry"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"crm-dashboard",
-		"users-table"
-	],
-	scenarios: [
-		{
-			title: "Static form choices",
-			description: "Use the default FormSelect mode for known statuses, roles, or visibility controls."
-		},
-		{
-			title: "Remote edit flows",
-			description: "Switch to kind=\"async\" when the form hydrates saved entity values from remote search results."
-		},
-		{
-			title: "Shared validation shell",
-			description: "Keep labels, descriptions, and errors aligned across simple and async field variants."
-		}
-	],
-	capabilityNotes: [
-		"Prefer FormSelect for new select fields instead of splitting wrappers too early.",
-		"Use kind=\"async\" only when loading and hydration are remote concerns.",
-		"Keep the RHF contract identical while the field interaction model changes underneath."
-	]
-};
-//#endregion
-export { e as formRHFWrapperMock, t as formSelectMock };

package/dist/src/showcase/premium/form-wrapper/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/form/form-input.cjs"),r=require("../../../components/form/form-select.cjs"),i=require("../../../components/form/form-switch.cjs"),a=require("../../../components/form/form-textarea.cjs");let o=require("react/jsx-runtime"),s=require("react-hook-form");var c=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],l=[{value:`workspace-alpha`,label:`Workspace Alpha`,description:`Core design system route`},{value:`workspace-beta`,label:`Workspace Beta`,description:`CRM rollout workspace`},{value:`workspace-gamma`,label:`Workspace Gamma`,description:`Billing and pricing flows`}];function u(e){let t=e.trim().toLowerCase();return Promise.resolve(l.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function d(e){let t=l.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function f({mode:f}){let p=(0,s.useForm)({defaultValues:{name:`Tembro`,ownerPhone:`+998 90 123 45 67`,budget:120,notes:`RHF wrapper coverage for control, name, and validation.`,active:!0,query:`billing`,password:``,dueDate:`2026-07-18`,period:{from:`2026-07-01`,to:`2026-07-14`},periodFrom:`2026-07-01`,periodTo:`2026-07-14`,status:`review`,ownerId:`workspace-alpha`}}),m=(0,s.useWatch)({control:p.control,name:`active`}),h=typeof window>`u`?void 0:window.location.pathname.split(`/`).filter(Boolean).at(-1);return h===`form-select`||h===`form-async-select`?(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(r.FormSelect,{control:p.control,name:`status`,label:`Release status`,options:[...c]}),(0,o.jsx)(r.FormSelect,{control:p.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:l.map(e=>({...e})),loadOptions:u,loadSelectedOption:d})]}):(0,o.jsxs)(`form`,{className:`space-y-5`,children:[(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(n.FormInput,{control:p.control,name:`name`,label:`Workspace name`,description:`Shared shell keeps required marker, helper text and error spacing aligned.`,required:!0}),(0,o.jsx)(n.FormInput,{control:p.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,o.jsx)(n.FormInput,{control:p.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,o.jsx)(a.FormTextarea,{control:p.control,name:`notes`,label:`Notes`,rows:3})]}),(0,o.jsx)(i.FormSwitch,{control:p.control,name:`active`,label:`Active`}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,o.jsx)(e.Button,{type:`button`,children:`Save`}),(0,o.jsx)(e.Button,{type:`button`,variant:`outline`,onClick:()=>p.reset(),children:`Reset`}),(0,o.jsx)(t.Badge,{variant:`outline`,children:f===`playground`?`Interactive`:m?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=f;

package/dist/src/showcase/premium/form-wrapper/showcase.js

@@ -1,149 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { FormInput as n } from "../../../components/form/form-input.js";
-import { FormSelect as r } from "../../../components/form/form-select.js";
-import { FormSwitch as i } from "../../../components/form/form-switch.js";
-import { FormTextarea as a } from "../../../components/form/form-textarea.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useForm as c, useWatch as l } from "react-hook-form";
-//#region src/showcase/premium/form-wrapper/showcase.tsx
-var u = [
-	{
-		label: "Draft",
-		value: "draft"
-	},
-	{
-		label: "Review",
-		value: "review"
-	},
-	{
-		label: "Live",
-		value: "live"
-	}
-], d = [
-	{
-		value: "workspace-alpha",
-		label: "Workspace Alpha",
-		description: "Core design system route"
-	},
-	{
-		value: "workspace-beta",
-		label: "Workspace Beta",
-		description: "CRM rollout workspace"
-	},
-	{
-		value: "workspace-gamma",
-		label: "Workspace Gamma",
-		description: "Billing and pricing flows"
-	}
-];
-function f(e) {
-	let t = e.trim().toLowerCase();
-	return Promise.resolve(d.filter((e) => !t || e.label.toLowerCase().includes(t)).map((e) => ({ ...e })));
-}
-function p(e) {
-	let t = d.find((t) => t.value === e);
-	return Promise.resolve(t ? { ...t } : null);
-}
-function m({ mode: m }) {
-	let h = c({ defaultValues: {
-		name: "Tembro",
-		ownerPhone: "+998 90 123 45 67",
-		budget: 120,
-		notes: "RHF wrapper coverage for control, name, and validation.",
-		active: !0,
-		query: "billing",
-		password: "",
-		dueDate: "2026-07-18",
-		period: {
-			from: "2026-07-01",
-			to: "2026-07-14"
-		},
-		periodFrom: "2026-07-01",
-		periodTo: "2026-07-14",
-		status: "review",
-		ownerId: "workspace-alpha"
-	} }), g = l({
-		control: h.control,
-		name: "active"
-	}), _ = typeof window > "u" ? void 0 : window.location.pathname.split("/").filter(Boolean).at(-1);
-	return _ === "form-select" || _ === "form-async-select" ? /* @__PURE__ */ s("div", {
-		className: "grid gap-4 xl:grid-cols-2",
-		children: [/* @__PURE__ */ o(r, {
-			control: h.control,
-			name: "status",
-			label: "Release status",
-			options: [...u]
-		}), /* @__PURE__ */ o(r, {
-			control: h.control,
-			name: "ownerId",
-			kind: "async",
-			label: "Linked workspace",
-			defaultOptions: d.map((e) => ({ ...e })),
-			loadOptions: f,
-			loadSelectedOption: p
-		})]
-	}) : /* @__PURE__ */ s("form", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ s("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [
-					/* @__PURE__ */ o(n, {
-						control: h.control,
-						name: "name",
-						label: "Workspace name",
-						description: "Shared shell keeps required marker, helper text and error spacing aligned.",
-						required: !0
-					}),
-					/* @__PURE__ */ o(n, {
-						control: h.control,
-						name: "ownerPhone",
-						kind: "phone",
-						label: "Owner phone"
-					}),
-					/* @__PURE__ */ o(n, {
-						control: h.control,
-						name: "budget",
-						kind: "number",
-						label: "Budget",
-						min: 0,
-						max: 999999
-					}),
-					/* @__PURE__ */ o(a, {
-						control: h.control,
-						name: "notes",
-						label: "Notes",
-						rows: 3
-					})
-				]
-			}),
-			/* @__PURE__ */ o(i, {
-				control: h.control,
-				name: "active",
-				label: "Active"
-			}),
-			/* @__PURE__ */ s("div", {
-				className: "flex flex-wrap gap-3",
-				children: [
-					/* @__PURE__ */ o(e, {
-						type: "button",
-						children: "Save"
-					}),
-					/* @__PURE__ */ o(e, {
-						type: "button",
-						variant: "outline",
-						onClick: () => h.reset(),
-						children: "Reset"
-					}),
-					/* @__PURE__ */ o(t, {
-						variant: "outline",
-						children: m === "playground" ? "Interactive" : g ? "Active" : "Paused"
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { m as FormWrapperShowcase };

package/dist/src/showcase/premium/image-cropper/index.cjs

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

package/dist/src/showcase/premium/image-cropper/index.js

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

package/dist/src/showcase/premium/image-cropper/mock.cjs

@@ -1,5 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ImageCropper } from "tembro"
-
-export function Example() {
-  return <ImageCropper src="/profile-photo.jpg" aspect={1} cropShape="round" />
-}`,cliCommand:`npx tembro add image-cropper`,highlights:[`Drag, zoom, rotation, and pixel crop coordinates`,`Canvas helper exports the selected area as a Blob`],scenarios:[{title:`Avatar editor`,description:`Crop profile media into a consistent square or circle.`},{title:`Asset manager`,description:`Prepare upload dimensions before saving media.`}]};exports.imageCropperMock=e;

package/dist/src/showcase/premium/image-cropper/mock.js

@@ -1,15 +0,0 @@
-//#region src/showcase/premium/image-cropper/mock.ts
-var e = {
-	code: "import { ImageCropper } from \"tembro\"\n\nexport function Example() {\n  return <ImageCropper src=\"/profile-photo.jpg\" aspect={1} cropShape=\"round\" />\n}",
-	cliCommand: "npx tembro add image-cropper",
-	highlights: ["Drag, zoom, rotation, and pixel crop coordinates", "Canvas helper exports the selected area as a Blob"],
-	scenarios: [{
-		title: "Avatar editor",
-		description: "Crop profile media into a consistent square or circle."
-	}, {
-		title: "Asset manager",
-		description: "Prepare upload dimensions before saving media."
-	}]
-};
-//#endregion
-export { e as imageCropperMock };

package/dist/src/showcase/premium/image-cropper/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/image-cropper.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=`https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80`;function a(){let[e,a]=n.useState(`Move or zoom the image`);return(0,r.jsxs)(`div`,{className:`grid gap-3`,children:[(0,r.jsx)(t.ImageCropper,{src:i,aspect:16/9,onCropComplete:(e,t)=>a(`${Math.round(t.width)} × ${Math.round(t.height)} px`)}),(0,r.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Crop: `,e]})]})}exports.ImageCropperShowcase=a;

package/dist/src/showcase/premium/image-cropper/showcase.js

@@ -1,21 +0,0 @@
-import { ImageCropper as e } from "../../../components/modern/image-cropper.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/image-cropper/showcase.tsx
-var i = "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80";
-function a() {
-	let [a, o] = t.useState("Move or zoom the image");
-	return /* @__PURE__ */ r("div", {
-		className: "grid gap-3",
-		children: [/* @__PURE__ */ n(e, {
-			src: i,
-			aspect: 16 / 9,
-			onCropComplete: (e, t) => o(`${Math.round(t.width)} × ${Math.round(t.height)} px`)
-		}), /* @__PURE__ */ r("p", {
-			className: "text-xs text-muted-foreground",
-			children: ["Crop: ", a]
-		})]
-	});
-}
-//#endregion
-export { a as ImageCropperShowcase };

package/dist/src/showcase/premium/image-upload/index.cjs

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

package/dist/src/showcase/premium/image-upload/index.js

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

package/dist/src/showcase/premium/image-upload/mock.cjs

@@ -1,15 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { ImageUpload } from "tembro"
-
-export function Example() {
-  const [files, setFiles] = useState<File[]>([])
-
-  return (
-    <ImageUpload
-      files={files}
-      onFilesChange={setFiles}
-      maxFiles={3}
-      helperText="Upload hero illustrations or block thumbnails."
-    />
-  )
-}`,cliCommand:`npx tembro add image-upload`,highlights:[`Image preview support`,`Reusable remove action behavior`,`Controlled file array API`,`Preview-first upload route`],scenarios:[{title:`Template thumbnails`,description:`Preview uploaded images before attaching them to a template.`},{title:`Marketing assets`,description:`Use for screenshots, gallery items and hero illustrations.`},{title:`Media field`,description:`Keep image upload inside a controlled route or form.`}],capabilityNotes:[`Use ImageUpload when visual confirmation is more important than a generic file list.`,`Preview and remove behavior come from the same reusable component surface.`,`Keep image routes consistent across docs, templates and CMS-like forms.`]};exports.imageUploadMock=e;

package/dist/src/showcase/premium/image-upload/mock.js

@@ -1,32 +0,0 @@
-//#region src/showcase/premium/image-upload/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { ImageUpload } from \"tembro\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <ImageUpload\n      files={files}\n      onFilesChange={setFiles}\n      maxFiles={3}\n      helperText=\"Upload hero illustrations or block thumbnails.\"\n    />\n  )\n}",
-	cliCommand: "npx tembro add image-upload",
-	highlights: [
-		"Image preview support",
-		"Reusable remove action behavior",
-		"Controlled file array API",
-		"Preview-first upload route"
-	],
-	scenarios: [
-		{
-			title: "Template thumbnails",
-			description: "Preview uploaded images before attaching them to a template."
-		},
-		{
-			title: "Marketing assets",
-			description: "Use for screenshots, gallery items and hero illustrations."
-		},
-		{
-			title: "Media field",
-			description: "Keep image upload inside a controlled route or form."
-		}
-	],
-	capabilityNotes: [
-		"Use ImageUpload when visual confirmation is more important than a generic file list.",
-		"Preview and remove behavior come from the same reusable component surface.",
-		"Keep image routes consistent across docs, templates and CMS-like forms."
-	]
-};
-//#endregion
-export { e as imageUploadMock };

package/dist/src/showcase/premium/image-upload/showcase.cjs

@@ -1 +0,0 @@
-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/image-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:`Preview`}),(0,i.jsx)(t.Badge,{variant:`outline`,children:`Image-first`}),(0,i.jsx)(t.Badge,{variant:`outline`,children:`Removable`})]}),(0,i.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:`ImageUpload is the preview-friendly media variant`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it for thumbnails, gallery assets, hero illustrations and template screenshots where visual confirmation matters immediately.`})]}),(0,i.jsx)(n.ImageUpload,{files:e,onFilesChange:a,maxFiles:3,minImageWidth:1200,minImageHeight:800,aspectRatio:1.5,helperText:`Upload hero illustrations or block thumbnails.`}),(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 images`}),(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:`Preview, remove, and ratio validation live inside the same reusable media surface.`})]}),(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:`Marketing blocks, screenshots, previews and content thumbnails.`})]})]})]})}exports.ImageUploadShowcase=a;