tembro 2.1.13 → 3.1.1

package/dist/src/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/src/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/src/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/src/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 "tembro"
+
+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/src/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 \"tembro\"\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/src/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([]),[o,s]=r.useState({});return r.useEffect(()=>{s(t=>{let n={...t};return e.forEach((e,t)=>{let r=`${e.name}-${e.size}-${e.lastModified}`;n[r]??=t===0?`uploading`:t===1?`error`:`success`}),n})},[e]),(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,status: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.`,onRetryFile:e=>{let t=`${e.name}-${e.size}-${e.lastModified}`;s(e=>({...e,[t]:`uploading`})),window.setTimeout(()=>{s(e=>({...e,[t]:`success`}))},900)}}),(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:`Uploading, success and retry-ready error rows all 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/src/showcase/premium/file-upload/showcase.js

@@ -0,0 +1,111 @@
+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([]), [s, c] = n.useState({});
+	return n.useEffect(() => {
+		c((e) => {
+			let t = { ...e };
+			return a.forEach((e, n) => {
+				let r = `${e.name}-${e.size}-${e.lastModified}`;
+				t[r] ??= n === 0 ? "uploading" : n === 1 ? "error" : "success";
+			}), t;
+		});
+	}, [a]), /* @__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,
+				status: s,
+				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.",
+				onRetryFile: (e) => {
+					let t = `${e.name}-${e.size}-${e.lastModified}`;
+					c((e) => ({
+						...e,
+						[t]: "uploading"
+					})), window.setTimeout(() => {
+						c((e) => ({
+							...e,
+							[t]: "success"
+						}));
+					}, 900);
+				}
+			}),
+			/* @__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: "Uploading, success and retry-ready error rows all 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/src/showcase/premium/form-wrapper/index.cjs

@@ -0,0 +1 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,126 @@
+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: "Azamat UI",
+      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="Azamat UI" /></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

@@ -0,0 +1,77 @@
+//#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: \"Azamat UI\",\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=\"Azamat UI\" /></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

@@ -0,0 +1 @@
+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:`Azamat UI`,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

@@ -0,0 +1,149 @@
+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: "Azamat UI",
+		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/hover-card/index.cjs

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

package/dist/src/showcase/premium/hover-card/index.js

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

package/dist/src/showcase/premium/hover-card/mock.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Avatar, HoverCard } from "tembro"
+
+export function Example() {
+  return (
+    <HoverCard
+      trigger={<Avatar fallback="AJ" />}
+      content={<div className="space-y-1"><p className="font-medium">Azamat</p><p className="text-sm text-muted-foreground">Design system owner</p></div>}
+    />
+  )
+}`,htmlCode:`<div data-slot="hover-card"></div>`,cliCommand:`npx tembro add hover-card`,highlights:[`Entity preview`,`Hover + focus`,`Secondary context`,`Compact detail card`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`settings-form`],scenarios:[{title:`User preview`,description:`Reveal compact profile details without opening a full panel.`},{title:`Card summary`,description:`Useful for metrics and owners in dense dashboard layouts.`},{title:`Secondary context`,description:`Show supporting data only when the user intentionally pauses.`}],capabilityNotes:[`HoverCard is for richer secondary context than Tooltip.`,`Keep content compact; if users need actions, switch to Popover.`,`Always ensure trigger remains meaningful without the reveal card.`,`Support focus states so keyboard users can access the same content.`]};exports.hoverCardMock=e;