tembro 3.0.0 → 3.1.1

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

@@ -1,4 +1,3 @@
 import type { ComponentDemoMock } from "../types";
 export declare const formRHFWrapperMock: ComponentDemoMock;
 export declare const formSelectMock: ComponentDemoMock;
-export declare const formAsyncSelectMock: ComponentDemoMock;

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

@@ -1,110 +1 @@
-//#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."
-	]
-}, n = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormAsyncSelect } from \"tembro\"\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      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormAsyncSelect\n        control={form.control}\n        name=\"ownerId\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}\n\n// New work should prefer:\n// <FormSelect control={form.control} name=\"ownerId\" kind=\"async\" ... />",
-	cliCommand: "npx tembro add form-async-select",
-	highlights: [
-		"Compatibility alias",
-		"Async form selection",
-		"Hydrated remote value support",
-		"Migration-safe route"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"crm-dashboard",
-		"users-table"
-	],
-	scenarios: [
-		{
-			title: "Legacy migration",
-			description: "Keep old async form routes working while teams move to FormSelect kind=\"async\"."
-		},
-		{
-			title: "Remote search fields",
-			description: "Hydrate saved form values back into the same async wrapper contract."
-		},
-		{
-			title: "Alias cleanup path",
-			description: "Use this route to document migration, not as the new primary entry point."
-		}
-	],
-	capabilityNotes: [
-		"Keep FormAsyncSelect only while existing forms still import it directly.",
-		"Point all new docs and new code toward FormSelect kind=\"async\".",
-		"Treat this alias as a migration member inside the wider Select family."
-	]
-};
-//#endregion
-export { n as formAsyncSelectMock, e as formRHFWrapperMock, t as formSelectMock };
+export * from "../../../src/showcase/premium/form-wrapper/mock.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/form/form-input.cjs"),i=require("../../../components/form/form-select.cjs"),a=require("../../../components/form/form-switch.cjs"),o=require("../../../components/form/form-textarea.cjs"),s=require("../../../components/form/form-date-picker.cjs"),c=require("../../../components/form/form-date-range-picker.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime"),d=require("react-hook-form");var f=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],p=[{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 m(e){let t=e.trim().toLowerCase();return Promise.resolve(p.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function h(e){let t=p.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function g({mode:e}){let[g,_]=l.useState(``);l.useEffect(()=>{_(window.location.pathname)},[]);let v=(0,d.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`}}),y=(0,d.useWatch)({control:v.control,name:`active`}),b=g.split(`/`).filter(Boolean).at(-1);return b===`form-select`||b===`form-async-select`?(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(i.FormSelect,{control:v.control,name:`status`,label:`Release status`,options:[...f]}),(0,u.jsx)(i.FormSelect,{control:v.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h})]}):b===`form-search-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`query`,kind:`search`,label:`Search query`,description:`Search wrapper should keep label, hint and result-ready spacing together.`,placeholder:`Search workspaces`}):b===`form-password-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`password`,kind:`password`,label:`Workspace password`,description:`Password wrapper keeps toggle behavior inside the same form shell.`,placeholder:`Enter secure password`}):b===`form-number-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,description:`Numeric wrapper keeps parsed value handling inside the field contract.`,min:0,max:999999}):b===`form-phone-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`,description:`Phone wrapper preserves stable raw value while showing a formatted UI.`}):b===`form-date-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`dueDate`,kind:`date`,label:`Due date`,description:`Use the lightweight date input wrapper when string date entry is enough.`}):b===`form-date-range-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`period`,kind:`date-range`,label:`Reporting period`,description:`Range input wrapper keeps from/to fields under one shell.`}):b===`form-date-picker`?(0,u.jsx)(s.FormDatePicker,{control:v.control,name:`dueDate`,label:`Launch date`,description:`Use the picker wrapper when calendar selection matters more than raw typing.`}):b===`form-date-range-picker`?(0,u.jsx)(c.FormDateRangePicker,{control:v.control,fromName:`periodFrom`,toName:`periodTo`,label:`Launch window`,description:`Popover range picker keeps both fields synchronized inside one wrapper.`}):(0,u.jsxs)(`form`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(r.FormInput,{control:v.control,name:`name`,label:`Workspace name`,description:`Shared shell keeps required marker, helper text and error spacing aligned.`,required:!0}),(0,u.jsx)(r.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,u.jsx)(r.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,u.jsx)(o.FormTextarea,{control:v.control,name:`notes`,label:`Notes`,rows:3})]}),(0,u.jsx)(a.FormSwitch,{control:v.control,name:`active`,label:`Active`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{type:`button`,children:`Save`}),(0,u.jsx)(t.Button,{type:`button`,variant:`outline`,onClick:()=>v.reset(),children:`Reset`}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e===`playground`?`Interactive`:y?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=g;
+module.exports = require("../../../src/showcase/premium/form-wrapper/showcase.cjs")

package/dist/showcase/premium/form-wrapper/showcase.d.ts

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

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

@@ -1,207 +1 @@
-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 { FormDatePicker as o } from "../../../components/form/form-date-picker.js";
-import { FormDateRangePicker as s } from "../../../components/form/form-date-range-picker.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useForm as d, useWatch as f } from "react-hook-form";
-//#region src/showcase/premium/form-wrapper/showcase.tsx
-var p = [
-	{
-		label: "Draft",
-		value: "draft"
-	},
-	{
-		label: "Review",
-		value: "review"
-	},
-	{
-		label: "Live",
-		value: "live"
-	}
-], m = [
-	{
-		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 h(e) {
-	let t = e.trim().toLowerCase();
-	return Promise.resolve(m.filter((e) => !t || e.label.toLowerCase().includes(t)).map((e) => ({ ...e })));
-}
-function g(e) {
-	let t = m.find((t) => t.value === e);
-	return Promise.resolve(t ? { ...t } : null);
-}
-function _({ mode: _ }) {
-	let [v, y] = c.useState("");
-	c.useEffect(() => {
-		y(window.location.pathname);
-	}, []);
-	let b = d({ 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"
-	} }), x = f({
-		control: b.control,
-		name: "active"
-	}), S = v.split("/").filter(Boolean).at(-1);
-	return S === "form-select" || S === "form-async-select" ? /* @__PURE__ */ u("div", {
-		className: "grid gap-4 xl:grid-cols-2",
-		children: [/* @__PURE__ */ l(r, {
-			control: b.control,
-			name: "status",
-			label: "Release status",
-			options: [...p]
-		}), /* @__PURE__ */ l(r, {
-			control: b.control,
-			name: "ownerId",
-			kind: "async",
-			label: "Linked workspace",
-			defaultOptions: m.map((e) => ({ ...e })),
-			loadOptions: h,
-			loadSelectedOption: g
-		})]
-	}) : S === "form-search-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "query",
-		kind: "search",
-		label: "Search query",
-		description: "Search wrapper should keep label, hint and result-ready spacing together.",
-		placeholder: "Search workspaces"
-	}) : S === "form-password-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "password",
-		kind: "password",
-		label: "Workspace password",
-		description: "Password wrapper keeps toggle behavior inside the same form shell.",
-		placeholder: "Enter secure password"
-	}) : S === "form-number-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "budget",
-		kind: "number",
-		label: "Budget",
-		description: "Numeric wrapper keeps parsed value handling inside the field contract.",
-		min: 0,
-		max: 999999
-	}) : S === "form-phone-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "ownerPhone",
-		kind: "phone",
-		label: "Owner phone",
-		description: "Phone wrapper preserves stable raw value while showing a formatted UI."
-	}) : S === "form-date-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "dueDate",
-		kind: "date",
-		label: "Due date",
-		description: "Use the lightweight date input wrapper when string date entry is enough."
-	}) : S === "form-date-range-input" ? /* @__PURE__ */ l(n, {
-		control: b.control,
-		name: "period",
-		kind: "date-range",
-		label: "Reporting period",
-		description: "Range input wrapper keeps from/to fields under one shell."
-	}) : S === "form-date-picker" ? /* @__PURE__ */ l(o, {
-		control: b.control,
-		name: "dueDate",
-		label: "Launch date",
-		description: "Use the picker wrapper when calendar selection matters more than raw typing."
-	}) : S === "form-date-range-picker" ? /* @__PURE__ */ l(s, {
-		control: b.control,
-		fromName: "periodFrom",
-		toName: "periodTo",
-		label: "Launch window",
-		description: "Popover range picker keeps both fields synchronized inside one wrapper."
-	}) : /* @__PURE__ */ u("form", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ u("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [
-					/* @__PURE__ */ l(n, {
-						control: b.control,
-						name: "name",
-						label: "Workspace name",
-						description: "Shared shell keeps required marker, helper text and error spacing aligned.",
-						required: !0
-					}),
-					/* @__PURE__ */ l(n, {
-						control: b.control,
-						name: "ownerPhone",
-						kind: "phone",
-						label: "Owner phone"
-					}),
-					/* @__PURE__ */ l(n, {
-						control: b.control,
-						name: "budget",
-						kind: "number",
-						label: "Budget",
-						min: 0,
-						max: 999999
-					}),
-					/* @__PURE__ */ l(a, {
-						control: b.control,
-						name: "notes",
-						label: "Notes",
-						rows: 3
-					})
-				]
-			}),
-			/* @__PURE__ */ l(i, {
-				control: b.control,
-				name: "active",
-				label: "Active"
-			}),
-			/* @__PURE__ */ u("div", {
-				className: "flex flex-wrap gap-3",
-				children: [
-					/* @__PURE__ */ l(e, {
-						type: "button",
-						children: "Save"
-					}),
-					/* @__PURE__ */ l(e, {
-						type: "button",
-						variant: "outline",
-						onClick: () => b.reset(),
-						children: "Reset"
-					}),
-					/* @__PURE__ */ l(t, {
-						variant: "outline",
-						children: _ === "playground" ? "Interactive" : x ? "Active" : "Paused"
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { _ as FormWrapperShowcase };
+export * from "../../../src/showcase/premium/form-wrapper/showcase.js"

package/dist/showcase/premium/hover-card/index.cjs

@@ -1 +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;
+module.exports = require("../../../src/showcase/premium/hover-card/index.cjs")

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

@@ -1,3 +1 @@
-import { HoverCardShowcase as e } from "./showcase.js";
-import { hoverCardMock as t } from "./mock.js";
-export { e as HoverCardShowcase, t as hoverCardMock };
+export * from "../../../src/showcase/premium/hover-card/index.js"

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

@@ -1,10 +1 @@
-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;
+module.exports = require("../../../src/showcase/premium/hover-card/mock.cjs")

package/dist/showcase/premium/hover-card/mock.js

@@ -1,39 +1 @@
-//#region src/showcase/premium/hover-card/mock.ts
-var e = {
-	code: "import { Avatar, HoverCard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <HoverCard\n      trigger={<Avatar fallback=\"AJ\" />}\n      content={<div className=\"space-y-1\"><p className=\"font-medium\">Azamat</p><p className=\"text-sm text-muted-foreground\">Design system owner</p></div>}\n    />\n  )\n}",
-	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."
-	]
-};
-//#endregion
-export { e as hoverCardMock };
+export * from "../../../src/showcase/premium/hover-card/mock.js"

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/hover-card.cjs"),r=require("../../../components/display/avatar.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`bottom`,`right`,`top`,`left`],s=`border-t border-[color:var(--aui-divider)] py-6`;function c(){let[e,c]=i.useState(`bottom`);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsx)(`section`,{className:`pb-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Hover card`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Richer than tooltip, lighter than popover`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use hover card when one entity preview needs a bit more room but still should feel lightweight.`})]}),(0,a.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Side`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong capitalize`,children:e})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Use for`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Entity preview`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Avoid for`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Heavy actions`})]})]})]})}),(0,a.jsx)(`section`,{className:s,children:(0,a.jsx)(`div`,{className:`flex min-h-52 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5`,children:(0,a.jsx)(n.HoverCard,{side:e,trigger:(0,a.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] p-1`,children:(0,a.jsx)(r.Avatar,{fallback:`AJ`})}),content:(0,a.jsxs)(`div`,{className:`space-y-1`,children:[(0,a.jsx)(`p`,{className:`font-medium`,children:`Azamat Jurayev`}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Design system owner`}),(0,a.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Keeps public components and package releases in sync.`})]})})})}),(0,a.jsx)(`section`,{className:s,children:(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:o.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:n},n))})})]})}exports.HoverCardShowcase=c;
+module.exports = require("../../../src/showcase/premium/hover-card/showcase.cjs")

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

@@ -1,123 +1 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { HoverCard as t } from "../../../components/ui/hover-card.js";
-import { Avatar as n } from "../../../components/display/avatar.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/hover-card/showcase.tsx
-var o = [
-	"bottom",
-	"right",
-	"top",
-	"left"
-], s = "border-t border-[color:var(--aui-divider)] py-6";
-function c() {
-	let [c, l] = r.useState("bottom");
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-0",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "pb-6",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-					children: [/* @__PURE__ */ a("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Hover card"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Richer than tooltip, lighter than popover"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 text-sm leading-6 aui-text-muted",
-								children: "Use hover card when one entity preview needs a bit more room but still should feel lightweight."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
-						children: [
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Side"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong capitalize",
-									children: c
-								})]
-							}),
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Use for"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "Entity preview"
-								})]
-							}),
-							/* @__PURE__ */ a("div", {
-								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ i("p", {
-									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
-									children: "Avoid for"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "Heavy actions"
-								})]
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: s,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex min-h-52 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5",
-					children: /* @__PURE__ */ i(t, {
-						side: c,
-						trigger: /* @__PURE__ */ i("button", {
-							type: "button",
-							className: "rounded-full border border-[color:var(--aui-divider)] p-1",
-							children: /* @__PURE__ */ i(n, { fallback: "AJ" })
-						}),
-						content: /* @__PURE__ */ a("div", {
-							className: "space-y-1",
-							children: [
-								/* @__PURE__ */ i("p", {
-									className: "font-medium",
-									children: "Azamat Jurayev"
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-sm text-muted-foreground",
-									children: "Design system owner"
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-xs text-muted-foreground",
-									children: "Keeps public components and package releases in sync."
-								})
-							]
-						})
-					})
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: s,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-wrap gap-2",
-					children: o.map((t) => /* @__PURE__ */ i(e, {
-						type: "button",
-						size: "sm",
-						variant: c === t ? "default" : "secondary",
-						onClick: () => l(t),
-						children: t
-					}, t))
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { c as HoverCardShowcase };
+export * from "../../../src/showcase/premium/hover-card/showcase.js"

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

@@ -1 +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;
+module.exports = require("../../../src/showcase/premium/image-upload/index.cjs")

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

@@ -1,3 +1 @@
-import { ImageUploadShowcase as e } from "./showcase.js";
-import { imageUploadMock as t } from "./mock.js";
-export { e as ImageUploadShowcase, t as imageUploadMock };
+export * from "../../../src/showcase/premium/image-upload/index.js"

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

@@ -1,15 +1 @@
-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;
+module.exports = require("../../../src/showcase/premium/image-upload/mock.cjs")

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

@@ -1,32 +1 @@
-//#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 };
+export * from "../../../src/showcase/premium/image-upload/mock.js"

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

@@ -1 +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;
+module.exports = require("../../../src/showcase/premium/image-upload/showcase.cjs")