tembro 1.0.0

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

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

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/patterns/form-builder.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("react-hook-form");function o({mode:e}){let o=(0,a.useForm)({defaultValues:{workspace:`Azamat UI`,ownerPhone:`+998 90 123 45 67`,notes:`Connected sections and submit/reset wiring.`,isLive:!0}}),s=r.useMemo(()=>[n.formSection({id:`main`,title:`Workspace settings`,description:`Schema-driven form builder with explicit submit and reset controls.`,fields:[n.inputField({id:`workspace`,props:{name:`workspace`,label:`Workspace`,required:!0}}),n.phoneField({id:`ownerPhone`,props:{name:`ownerPhone`,label:`Owner phone`}}),n.textareaField({id:`notes`,colSpan:`full`,props:{name:`notes`,label:`Notes`,rows:3}}),n.switchField({id:`isLive`,colSpan:`full`,props:{name:`isLive`,label:`Publish workspace`,description:`Visible only when record is active.`}})]})],[]);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[(0,i.jsx)(n.FormBuilder,{control:o.control,sections:s,columns:1,submitLabel:e===`playground`?`Save workspace`:void 0}),(0,i.jsx)(t.Button,{type:`button`,variant:`outline`,onClick:()=>o.reset(),children:`Reset form`})]})}exports.FormBuilderShowcase=o;

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

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

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

@@ -0,0 +1,69 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { FormBuilder as t, formSection as n, inputField as r, phoneField as i, switchField as a, textareaField as o } from "../../../components/patterns/form-builder.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useForm as u } from "react-hook-form";
+//#region src/showcase/premium/form-builder/showcase.tsx
+function d({ mode: d }) {
+	let f = u({ defaultValues: {
+		workspace: "Azamat UI",
+		ownerPhone: "+998 90 123 45 67",
+		notes: "Connected sections and submit/reset wiring.",
+		isLive: !0
+	} }), p = s.useMemo(() => [n({
+		id: "main",
+		title: "Workspace settings",
+		description: "Schema-driven form builder with explicit submit and reset controls.",
+		fields: [
+			r({
+				id: "workspace",
+				props: {
+					name: "workspace",
+					label: "Workspace",
+					required: !0
+				}
+			}),
+			i({
+				id: "ownerPhone",
+				props: {
+					name: "ownerPhone",
+					label: "Owner phone"
+				}
+			}),
+			o({
+				id: "notes",
+				colSpan: "full",
+				props: {
+					name: "notes",
+					label: "Notes",
+					rows: 3
+				}
+			}),
+			a({
+				id: "isLive",
+				colSpan: "full",
+				props: {
+					name: "isLive",
+					label: "Publish workspace",
+					description: "Visible only when record is active."
+				}
+			})
+		]
+	})], []);
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ c(t, {
+			control: f.control,
+			sections: p,
+			columns: 1,
+			submitLabel: d === "playground" ? "Save workspace" : void 0
+		}), /* @__PURE__ */ c(e, {
+			type: "button",
+			variant: "outline",
+			onClick: () => f.reset(),
+			children: "Reset form"
+		})]
+	});
+}
+//#endregion
+export { d as FormBuilderShowcase };

package/dist/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.formAsyncSelectMock=t.formAsyncSelectMock,exports.formRHFWrapperMock=t.formRHFWrapperMock,exports.formSelectMock=t.formSelectMock;

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

@@ -0,0 +1,2 @@
+export { FormWrapperShowcase } from "./showcase";
+export { formAsyncSelectMock, formRHFWrapperMock, formSelectMock } from "./mock";

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

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

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

@@ -0,0 +1,140 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useForm } from "react-hook-form"
+import { Button, FormFieldShell, FormInput, FormSwitch, FormTextarea } from "@/index"
+
+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">
+      <FormFieldShell label="Workspace name" required>
+        <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" },
+          }}
+        />
+      </FormFieldShell>
+
+      <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-wrapper`,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" },
+]
+
+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.`]},n={code:`import { useForm } from "react-hook-form"
+import { Button, FormAsyncSelect } from "tembro"
+
+export function Example() {
+  const form = useForm({
+    defaultValues: {
+      ownerId: "workspace-alpha",
+    },
+  })
+
+  return (
+    <form className="space-y-4">
+      <FormAsyncSelect
+        control={form.control}
+        name="ownerId"
+        label="Linked workspace"
+        loadOptions={loadWorkspaces}
+        loadSelectedOption={loadWorkspace}
+      />
+
+      <Button type="submit">Save</Button>
+    </form>
+  )
+}
+
+// New work should prefer:
+// <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.`]};exports.formAsyncSelectMock=n,exports.formRHFWrapperMock=e,exports.formSelectMock=t;

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

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

@@ -0,0 +1,110 @@
+//#region src/showcase/premium/form-wrapper/mock.ts
+var e = {
+	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormFieldShell, FormInput, FormSwitch, FormTextarea } from \"@/index\"\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      <FormFieldShell label=\"Workspace name\" required>\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      </FormFieldShell>\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-wrapper",
+	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\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\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 };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/form/form-field-shell.cjs"),i=require("../../../components/form/form-input.cjs"),a=require("../../../components/form/form-select.cjs"),o=require("../../../components/form/form-switch.cjs"),s=require("../../../components/form/form-textarea.cjs"),c=require("../../../components/form/form-async-select.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,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`?(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(a.FormSelect,{control:v.control,name:`status`,label:`Release status`,options:[...f]}),(0,u.jsx)(a.FormSelect,{control:v.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h})]}):b===`form-async-select`?(0,u.jsx)(c.FormAsyncSelect,{control:v.control,name:`ownerId`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h}):(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.FormFieldShell,{label:`Workspace setup`,description:`Shared shell for required marker, error flow and spacing.`,required:!0,children:(0,u.jsx)(i.FormInput,{control:v.control,name:`name`,label:`Workspace name`,required:!0})}),(0,u.jsx)(i.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,u.jsx)(i.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,u.jsx)(s.FormTextarea,{control:v.control,name:`notes`,label:`Notes`,rows:3})]}),(0,u.jsx)(o.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;

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

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

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

@@ -0,0 +1,158 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { FormFieldShell as n } from "../../../components/form/form-field-shell.js";
+import { FormInput as r } from "../../../components/form/form-input.js";
+import { FormSelect as i } from "../../../components/form/form-select.js";
+import { FormSwitch as a } from "../../../components/form/form-switch.js";
+import { FormTextarea as o } from "../../../components/form/form-textarea.js";
+import { FormAsyncSelect as s } from "../../../components/form/form-async-select.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,
+		status: "review",
+		ownerId: "workspace-alpha"
+	} }), x = f({
+		control: b.control,
+		name: "active"
+	}), S = v.split("/").filter(Boolean).at(-1);
+	return S === "form-select" ? /* @__PURE__ */ u("div", {
+		className: "grid gap-4 xl:grid-cols-2",
+		children: [/* @__PURE__ */ l(i, {
+			control: b.control,
+			name: "status",
+			label: "Release status",
+			options: [...p]
+		}), /* @__PURE__ */ l(i, {
+			control: b.control,
+			name: "ownerId",
+			kind: "async",
+			label: "Linked workspace",
+			defaultOptions: m.map((e) => ({ ...e })),
+			loadOptions: h,
+			loadSelectedOption: g
+		})]
+	}) : S === "form-async-select" ? /* @__PURE__ */ l(s, {
+		control: b.control,
+		name: "ownerId",
+		label: "Linked workspace",
+		defaultOptions: m.map((e) => ({ ...e })),
+		loadOptions: h,
+		loadSelectedOption: g
+	}) : /* @__PURE__ */ u("form", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [
+					/* @__PURE__ */ l(n, {
+						label: "Workspace setup",
+						description: "Shared shell for required marker, error flow and spacing.",
+						required: !0,
+						children: /* @__PURE__ */ l(r, {
+							control: b.control,
+							name: "name",
+							label: "Workspace name",
+							required: !0
+						})
+					}),
+					/* @__PURE__ */ l(r, {
+						control: b.control,
+						name: "ownerPhone",
+						kind: "phone",
+						label: "Owner phone"
+					}),
+					/* @__PURE__ */ l(r, {
+						control: b.control,
+						name: "budget",
+						kind: "number",
+						label: "Budget",
+						min: 0,
+						max: 999999
+					}),
+					/* @__PURE__ */ l(o, {
+						control: b.control,
+						name: "notes",
+						label: "Notes",
+						rows: 3
+					})
+				]
+			}),
+			/* @__PURE__ */ l(a, {
+				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 };

package/dist/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/showcase/premium/hover-card/index.d.ts

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

package/dist/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/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;

package/dist/showcase/premium/hover-card/mock.d.ts

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

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

@@ -0,0 +1,39 @@
+//#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 };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/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;

package/dist/showcase/premium/hover-card/showcase.d.ts

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