tembro 3.0.0 → 3.1.5

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/image-cropper/index.cjs

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

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

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

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

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

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

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

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

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

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

@@ -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/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;

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

@@ -0,0 +1,89 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { ImageUpload as t } from "../../../components/upload/image-upload.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/image-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: "Preview"
+							}),
+							/* @__PURE__ */ r(e, {
+								variant: "outline",
+								children: "Image-first"
+							}),
+							/* @__PURE__ */ r(e, {
+								variant: "outline",
+								children: "Removable"
+							})
+						]
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm font-medium aui-text-strong",
+						children: "ImageUpload is the preview-friendly media variant"
+					}),
+					/* @__PURE__ */ r("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."
+					})
+				]
+			}),
+			/* @__PURE__ */ r(t, {
+				files: a,
+				onFilesChange: o,
+				maxFiles: 3,
+				minImageWidth: 1200,
+				minImageHeight: 800,
+				aspectRatio: 1.5,
+				helperText: "Upload hero illustrations or block thumbnails."
+			}),
+			/* @__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 images"
+						}), /* @__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: "Preview, remove, and ratio validation live inside the same reusable media surface."
+						})]
+					}),
+					/* @__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: "Marketing blocks, screenshots, previews and content thumbnails."
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { a as ImageUploadShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require("./data-table/showcase.cjs"),te=require("./data-table/mock.cjs"),ne=require("./alert/showcase.cjs"),re=require("./alert/mock.cjs"),ie=require("./alert-dialog/showcase.cjs"),ae=require("./alert-dialog/mock.cjs"),oe=require("./activity-feed/showcase.cjs"),se=require("./activity-feed/mock.cjs"),e=require("./action-menu/showcase.cjs"),t=require("./action-menu/mock.cjs"),n=require("./app-sidebar/showcase.cjs"),r=require("./app-sidebar/mock.cjs"),i=require("./async-select/showcase.cjs"),a=require("./async-select/mock.cjs"),o=require("./async-multi-select/showcase.cjs"),s=require("./async-multi-select/mock.cjs"),c=require("./avatar/mock.cjs"),l=require("./avatar/showcase.cjs"),u=require("./carousel/mock.cjs"),d=require("./carousel/showcase.cjs"),f=require("./color-picker/mock.cjs"),p=require("./color-picker/showcase.cjs"),m=require("./json-input/mock.cjs"),h=require("./json-input/showcase.cjs"),g=require("./badge/showcase.cjs"),_=require("./badge/mock.cjs"),v=require("./divider/mock.cjs"),y=require("./divider/showcase.cjs"),b=require("./breadcrumbs/showcase.cjs"),x=require("./breadcrumbs/mock.cjs"),S=require("./button/showcase.cjs"),C=require("./button/mock.cjs"),w=require("./button-group/showcase.cjs"),T=require("./button-group/mock.cjs"),E=require("./calendar/showcase.cjs"),D=require("./calendar/mock.cjs"),O=require("./calendar-scheduler/mock.cjs"),k=require("./calendar-scheduler/showcase.cjs"),A=require("./card/showcase.cjs"),j=require("./card/mock.cjs"),M=require("./checkbox/showcase.cjs"),N=require("./checkbox/mock.cjs"),P=require("./code-block/mock.cjs"),F=require("./code-block/showcase.cjs"),I=require("./dual-list-picker/mock.cjs"),L=require("./dual-list-picker/showcase.cjs"),R=require("./collapse/showcase.cjs"),z=require("./collapse/mock.cjs"),B=require("./command-palette/showcase.cjs"),V=require("./command-palette/mock.cjs"),H=require("./confirm-dialog/showcase.cjs"),U=require("./confirm-dialog/mock.cjs"),W=require("./copy-button/mock.cjs"),G=require("./copy-button/showcase.cjs"),K=require("./data-state/mock.cjs"),ce=require("./data-state/showcase.cjs"),le=require("./date-picker/showcase.cjs"),ue=require("./date-picker/mock.cjs"),de=require("./date-range-picker/showcase.cjs"),fe=require("./date-range-picker/mock.cjs"),pe=require("./description-list/showcase.cjs"),me=require("./description-list/mock.cjs"),he=require("./dialog/showcase.cjs"),ge=require("./dialog/mock.cjs"),_e=require("./dropdown-menu/showcase.cjs"),ve=require("./dropdown-menu/mock.cjs"),ye=require("./drawer/showcase.cjs"),be=require("./drawer/mock.cjs"),q=require("./form-wrapper/showcase.cjs"),J=require("./form-wrapper/mock.cjs"),xe=require("./kanban-board/mock.cjs"),Se=require("./kanban-board/showcase.cjs"),Ce=require("./info-card/showcase.cjs"),we=require("./info-card/mock.cjs"),Te=require("./image-cropper/mock.cjs"),Ee=require("./image-cropper/showcase.cjs"),Y=require("./input/showcase.cjs"),X=require("./input/mock.cjs"),De=require("./kbd/showcase.cjs"),Oe=require("./kbd/mock.cjs"),ke=require("./list/mock.cjs"),Ae=require("./list/showcase.cjs"),je=require("./loading-state/showcase.cjs"),Me=require("./loading-state/mock.cjs"),Ne=require("./time-picker/mock.cjs"),Pe=require("./time-picker/showcase.cjs"),Fe=require("./resizable-panel/mock.cjs"),Ie=require("./resizable-panel/showcase.cjs"),Z=require("./notification-center/showcase.cjs"),Le=require("./notification-center/mock.cjs"),Re=require("./otp-input/showcase.cjs"),ze=require("./otp-input/mock.cjs"),Be=require("./section/mock.cjs"),Ve=require("./section/showcase.cjs"),He=require("./page-state/showcase.cjs"),Ue=require("./page-state/mock.cjs"),We=require("./pagination/showcase.cjs"),Ge=require("./pagination/mock.cjs"),Ke=require("./popover/showcase.cjs"),qe=require("./popover/mock.cjs"),Q=require("./progress/showcase.cjs"),$=require("./progress/mock.cjs"),Je=require("./qr-code/mock.cjs"),Ye=require("./qr-code/showcase.cjs"),Xe=require("./radio-group/showcase.cjs"),Ze=require("./radio-group/mock.cjs"),Qe=require("./right-click-menu/showcase.cjs"),$e=require("./right-click-menu/mock.cjs"),et=require("./rich-text-editor/mock.cjs"),tt=require("./rich-text-editor/showcase.cjs"),nt=require("./scroll-box/showcase.cjs"),rt=require("./scroll-box/mock.cjs"),it=require("./saved-filter-select/showcase.cjs"),at=require("./saved-filter-select/mock.cjs"),ot=require("./sortable-list/mock.cjs"),st=require("./sortable-list/showcase.cjs"),ct=require("./signature-pad/mock.cjs"),lt=require("./signature-pad/showcase.cjs"),ut=require("./segmented-control/mock.cjs"),dt=require("./segmented-control/showcase.cjs"),ft=require("./select/showcase.cjs"),pt=require("./select/mock.cjs"),mt=require("./slider/showcase.cjs"),ht=require("./slider/mock.cjs"),gt=require("./skeleton/mock.cjs"),_t=require("./skeleton/showcase.cjs"),vt=require("./spinner/mock.cjs"),yt=require("./spinner/showcase.cjs"),bt=require("./statistic/mock.cjs"),xt=require("./statistic/showcase.cjs"),St=require("./switch/showcase.cjs"),Ct=require("./switch/mock.cjs"),wt=require("./tag-input/showcase.cjs"),Tt=require("./tag-input/mock.cjs"),Et=require("./table/showcase.cjs"),Dt=require("./table/mock.cjs"),Ot=require("./tabs/showcase.cjs"),kt=require("./tabs/mock.cjs"),At=require("./textarea/showcase.cjs"),jt=require("./textarea/mock.cjs"),Mt=require("./timeline/showcase.cjs"),Nt=require("./timeline/mock.cjs"),Pt=require("./tag/mock.cjs"),Ft=require("./tag/showcase.cjs"),It=require("./typography/mock.cjs"),Lt=require("./typography/showcase.cjs"),Rt=require("./tree-view/mock.cjs"),zt=require("./tree-view/showcase.cjs"),Bt=require("./toast/showcase.cjs"),Vt=require("./toast/mock.cjs"),Ht=require("./tooltip/showcase.cjs"),Ut=require("./tooltip/mock.cjs"),Wt=require("./file-upload/showcase.cjs"),Gt=require("./file-upload/mock.cjs"),Kt=require("./image-upload/showcase.cjs"),qt=require("./image-upload/mock.cjs"),Jt=require("./rating/showcase.cjs"),Yt=require("./rating/mock.cjs"),Xt=require("./virtual-list/mock.cjs"),Zt=require("./virtual-list/showcase.cjs"),Qt=require("./types.cjs");var $t={alert:{mock:re.alertMock,Showcase:ne.AlertShowcase},"alert-dialog":{mock:ae.alertDialogMock,Showcase:ie.AlertDialogShowcase},"action-menu":{mock:t.actionMenuMock,Showcase:e.ActionMenuShowcase},button:{mock:C.buttonMock,Showcase:S.ButtonShowcase},"button-group":{mock:T.buttonGroupMock,Showcase:w.ButtonGroupShowcase},calendar:{mock:D.calendarMock,Showcase:E.CalendarShowcase},"calendar-scheduler":{mock:O.calendarSchedulerMock,Showcase:k.CalendarSchedulerShowcase},"command-palette":{mock:V.commandPaletteMock,Showcase:B.CommandPaletteShowcase},carousel:{mock:u.carouselMock,Showcase:d.CarouselShowcase},"color-picker":{mock:f.colorPickerMock,Showcase:p.ColorPickerShowcase},"code-block":{mock:P.codeBlockMock,Showcase:F.CodeBlockShowcase},"dual-list-picker":{mock:I.dualListPickerMock,Showcase:L.DualListPickerShowcase},divider:{mock:v.dividerMock,Showcase:y.DividerShowcase},input:{mock:X.inputMock,Showcase:Y.InputShowcase},"number-input":{mock:X.inputMock,Showcase:Y.InputShowcase},textarea:{mock:jt.textareaMock,Showcase:At.TextareaShowcase},select:{mock:pt.selectMock,Showcase:ft.SelectShowcase},"radio-group":{mock:Ze.radioGroupMock,Showcase:Xe.RadioGroupShowcase},"async-select":{mock:a.asyncSelectMock,Showcase:i.AsyncSelectShowcase},"async-multi-select":{mock:s.asyncMultiSelectMock,Showcase:o.AsyncMultiSelectShowcase},avatar:{mock:c.avatarMock,Showcase:l.AvatarShowcase},"date-picker":{mock:ue.datePickerMock,Showcase:le.DatePickerShowcase},"date-range-picker":{mock:fe.dateRangePickerMock,Showcase:de.DateRangePickerShowcase},"description-list":{mock:me.descriptionListMock,Showcase:pe.DescriptionListShowcase},drawer:{mock:be.drawerMock,Showcase:ye.DrawerShowcase},"json-input":{mock:m.jsonInputMock,Showcase:h.JsonInputShowcase},kanban:{mock:xe.kanbanBoardMock,Showcase:Se.KanbanBoardShowcase},"otp-input":{mock:ze.otpInputMock,Showcase:Re.OtpInputShowcase},"qr-code":{mock:Je.qrCodeMock,Showcase:Ye.QRCodeShowcase},rating:{mock:Yt.ratingMock,Showcase:Jt.RatingShowcase},"signature-pad":{mock:ct.signaturePadMock,Showcase:lt.SignaturePadShowcase},slider:{mock:ht.sliderMock,Showcase:mt.SliderShowcase},"time-picker":{mock:Ne.timePickerMock,Showcase:Pe.TimePickerShowcase},"tag-input":{mock:Tt.tagInputMock,Showcase:wt.TagInputShowcase},"dropdown-menu":{mock:ve.dropdownMenuMock,Showcase:_e.DropdownMenuShowcase},"confirm-dialog":{mock:U.confirmDialogMock,Showcase:H.ConfirmDialogShowcase},checkbox:{mock:N.checkboxMock,Showcase:M.CheckboxShowcase},"copy-button":{mock:W.copyButtonMock,Showcase:G.CopyButtonShowcase},switch:{mock:Ct.switchMock,Showcase:St.SwitchShowcase},badge:{mock:_.badgeMock,Showcase:g.BadgeShowcase},card:{mock:j.cardMock,Showcase:A.CardShowcase},tabs:{mock:kt.tabsMock,Showcase:Ot.TabsShowcase},collapse:{mock:z.collapseMock,Showcase:R.CollapseShowcase},kbd:{mock:Oe.kbdMock,Showcase:De.KbdShowcase},dialog:{mock:ge.dialogMock,Showcase:he.DialogShowcase},popover:{mock:qe.popoverMock,Showcase:Ke.PopoverShowcase},tooltip:{mock:Ut.tooltipMock,Showcase:Ht.TooltipShowcase},"right-click-menu":{mock:$e.rightClickMenuMock,Showcase:Qe.RightClickMenuShowcase},"rich-text-editor":{mock:et.richTextEditorMock,Showcase:tt.RichTextEditorShowcase},"data-table":{mock:te.dataTableMock,Showcase:ee.DataTableShowcase},"saved-filter-select":{mock:at.savedFilterSelectMock,Showcase:it.SavedFilterSelectShowcase},"sortable-list":{mock:ot.sortableListMock,Showcase:st.SortableListShowcase},"form-field":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-field-shell":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-select":{mock:J.formSelectMock,Showcase:q.FormWrapperShowcase},"form-textarea":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-switch":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"segmented-control":{mock:ut.segmentedControlMock,Showcase:dt.SegmentedControlShowcase},skeleton:{mock:gt.skeletonMock,Showcase:_t.SkeletonShowcase},spinner:{mock:vt.spinnerMock,Showcase:yt.SpinnerShowcase},table:{mock:Dt.tableMock,Showcase:Et.TableShowcase},sidebar:{mock:r.appSidebarMock,Showcase:n.AppSidebarShowcase},breadcrumbs:{mock:x.breadcrumbsMock,Showcase:b.BreadcrumbsShowcase},"page-state":{mock:Ue.pageStateMock,Showcase:He.PageStateShowcase},pagination:{mock:Ge.paginationMock,Showcase:We.PaginationShowcase},"notification-center":{mock:Le.notificationCenterMock,Showcase:Z.NotificationCenterShowcase},"info-card":{mock:we.infoCardMock,Showcase:Ce.InfoCardShowcase},"image-cropper":{mock:Te.imageCropperMock,Showcase:Ee.ImageCropperShowcase},list:{mock:ke.listMock,Showcase:Ae.ListShowcase},"activity-feed":{mock:se.activityFeedMock,Showcase:oe.ActivityFeedShowcase},"loading-state":{mock:Me.loadingStateMock,Showcase:je.LoadingStateShowcase},"data-state":{mock:K.dataStateMock,Showcase:ce.DataStateShowcase},progress:{mock:$.progressMock,Showcase:Q.ProgressShowcase},"progress-circle":{mock:$.progressMock,Showcase:Q.ProgressShowcase},"resizable-panel":{mock:Fe.resizablePanelMock,Showcase:Ie.ResizablePanelShowcase},section:{mock:Be.sectionMock,Showcase:Ve.SectionShowcase},statistic:{mock:bt.statisticMock,Showcase:xt.StatisticShowcase},tag:{mock:Pt.tagMock,Showcase:Ft.TagShowcase},typography:{mock:It.typographyMock,Showcase:Lt.TypographyShowcase},"tree-view":{mock:Rt.treeViewMock,Showcase:zt.TreeViewShowcase},"file-upload":{mock:Gt.fileUploadMock,Showcase:Wt.FileUploadShowcase},"image-upload":{mock:qt.imageUploadMock,Showcase:Kt.ImageUploadShowcase},"scroll-box":{mock:rt.scrollBoxMock,Showcase:nt.ScrollBoxShowcase},timeline:{mock:Nt.timelineMock,Showcase:Mt.TimelineShowcase},toast:{mock:Vt.toastMock,Showcase:Bt.ToastShowcase},"virtual-list":{mock:Xt.virtualListMock,Showcase:Zt.VirtualListShowcase}};exports.defaultComponentDemoState=Qt.defaultComponentDemoState,exports.premiumShowcaseDemoRegistry=$t;