tembro 2.0.4 → 2.0.6

package/dist/components/patterns/form-builder.js

@@ -1,263 +0,0 @@
-import { cn as e } from "../../lib/utils.js";
-import { Button as t } from "../ui/button/index.js";
-import { FormInput as n } from "../form/form-input.js";
-import { FormSelect as r } from "../form/form-select.js";
-import { FormSwitch as i } from "../form/form-switch.js";
-import { FormTextarea as a } from "../form/form-textarea.js";
-import { FormAsyncSelect as o } from "../form/form-async-select.js";
-import { FormDateInput as s } from "../form/form-date-input.js";
-import { FormDateRangeInput as c } from "../form/form-date-range-input.js";
-import { FormNumberInput as l } from "../form/form-number-input.js";
-import { FormPhoneInput as u } from "../form/form-phone-input.js";
-import * as d from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/patterns/form-builder.tsx
-var h = {
-	compact: "gap-3",
-	default: "gap-4",
-	comfortable: "gap-6"
-}, g = {
-	1: "grid-cols-1",
-	2: "grid-cols-1 md:grid-cols-2",
-	3: "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-	4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"
-}, _ = {
-	1: "col-span-1",
-	2: "md:col-span-2",
-	3: "xl:col-span-3",
-	4: "xl:col-span-4",
-	full: "col-span-full"
-};
-function v(e) {
-	let { id: t, hidden: n, className: r, colSpan: i, props: a } = e;
-	return {
-		base: {
-			id: t,
-			hidden: n,
-			className: r,
-			colSpan: i
-		},
-		props: a
-	};
-}
-function y(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "input",
-		props: n
-	};
-}
-function b(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "textarea",
-		props: n
-	};
-}
-function x(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "select",
-		props: n
-	};
-}
-function S(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "async-select",
-		props: n
-	};
-}
-function C(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "switch",
-		props: n
-	};
-}
-function w(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "number",
-		props: n
-	};
-}
-function T(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "phone",
-		props: n
-	};
-}
-function E(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "date",
-		props: n
-	};
-}
-function D(e) {
-	let { base: t, props: n } = v(e);
-	return {
-		...t,
-		type: "date-range",
-		props: n
-	};
-}
-function O(e) {
-	let { id: t, hidden: n, className: r, colSpan: i, render: a } = e;
-	return {
-		id: t,
-		hidden: n,
-		className: r,
-		colSpan: i,
-		type: "custom",
-		render: a
-	};
-}
-function k(e) {
-	return e;
-}
-function A(e, t) {
-	let f = n, m = r;
-	switch (e.type) {
-		case "custom": return e.render(t);
-		case "input": return d.createElement(f, {
-			control: t.control,
-			disabled: t.disabled,
-			readOnly: t.readOnly,
-			...e.props
-		});
-		case "textarea": return /* @__PURE__ */ p(a, {
-			control: t.control,
-			disabled: t.disabled,
-			readOnly: t.readOnly,
-			...e.props
-		});
-		case "select": return d.createElement(m, {
-			control: t.control,
-			disabled: t.disabled,
-			...e.props
-		});
-		case "async-select": return /* @__PURE__ */ p(o, {
-			control: t.control,
-			disabled: t.disabled,
-			...e.props
-		});
-		case "switch": return /* @__PURE__ */ p(i, {
-			control: t.control,
-			disabled: t.disabled,
-			...e.props
-		});
-		case "number": return /* @__PURE__ */ p(l, {
-			control: t.control,
-			disabled: t.disabled,
-			readOnly: t.readOnly,
-			...e.props
-		});
-		case "phone": return /* @__PURE__ */ p(u, {
-			control: t.control,
-			disabled: t.disabled,
-			readOnly: t.readOnly,
-			...e.props
-		});
-		case "date": return /* @__PURE__ */ p(s, {
-			control: t.control,
-			disabled: t.disabled,
-			readOnly: t.readOnly,
-			...e.props
-		});
-		case "date-range": return /* @__PURE__ */ p(c, {
-			control: t.control,
-			fromInputProps: {
-				disabled: t.disabled,
-				readOnly: t.readOnly
-			},
-			toInputProps: {
-				disabled: t.disabled,
-				readOnly: t.readOnly
-			},
-			...e.props
-		});
-		default: return null;
-	}
-}
-function j({ fields: e, sections: t }) {
-	return t?.length ? t : [{
-		id: "default",
-		fields: e ?? []
-	}];
-}
-function M({ className: n, control: r, fields: i, sections: a, layout: o = "grid", density: s = "default", columns: c = 2, disabled: l, readOnly: u, footer: v, submitLabel: y, resetLabel: b, onResetClick: x, isSubmitting: S, sectionClassName: C, fieldClassName: w, footerClassName: T, ...E }) {
-	let D = j({
-		fields: i,
-		sections: a
-	}), O = d.useMemo(() => ({
-		control: r,
-		disabled: l,
-		readOnly: u
-	}), [
-		r,
-		l,
-		u
-	]);
-	return /* @__PURE__ */ m("form", {
-		"data-slot": "form-builder",
-		className: e("grid", h[s], n),
-		...E,
-		children: [D.filter((e) => !e.hidden).map((t) => /* @__PURE__ */ m("section", {
-			"data-slot": "form-builder-section",
-			className: e("grid gap-4", t.className, C),
-			children: [(t.title || t.description || t.actions) && /* @__PURE__ */ m("div", {
-				"data-slot": "form-builder-section-header",
-				className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-				children: [/* @__PURE__ */ m("div", {
-					className: "min-w-0 space-y-1",
-					children: [t.title && /* @__PURE__ */ p("h2", {
-						className: "text-base font-semibold leading-none tracking-tight",
-						children: t.title
-					}), t.description && /* @__PURE__ */ p("p", {
-						className: "text-sm text-muted-foreground",
-						children: t.description
-					})]
-				}), t.actions && /* @__PURE__ */ p("div", {
-					className: "flex shrink-0 flex-wrap items-center gap-2",
-					children: t.actions
-				})]
-			}), /* @__PURE__ */ p("div", {
-				"data-slot": "form-builder-fields",
-				"data-layout": o,
-				className: e("grid", h[s], o === "grid" ? g[c] : "grid-cols-1"),
-				children: t.fields.filter((e) => !e.hidden).map((t) => /* @__PURE__ */ p("div", {
-					"data-slot": "form-builder-field",
-					className: e(t.colSpan && _[t.colSpan], t.className, w),
-					children: A(t, O)
-				}, t.id))
-			})]
-		}, t.id)), (v || y || b) && /* @__PURE__ */ p("div", {
-			"data-slot": "form-builder-footer",
-			className: e("flex flex-wrap items-center justify-end gap-2", T),
-			children: v ?? /* @__PURE__ */ m(f, { children: [b && /* @__PURE__ */ p(t, {
-				type: "button",
-				variant: "outline",
-				disabled: l || S,
-				onClick: x,
-				children: b
-			}), y && /* @__PURE__ */ p(t, {
-				type: "submit",
-				disabled: l || S,
-				children: y
-			})] })
-		})]
-	});
-}
-//#endregion
-export { M as FormBuilder, S as asyncSelectField, O as customField, E as dateField, D as dateRangeField, k as formSection, y as inputField, w as numberField, T as phoneField, A as renderFormBuilderField, x as selectField, C as switchField, b as textareaField };

package/dist/showcase/premium/empty-state/index.cjs

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

package/dist/showcase/premium/empty-state/index.d.ts

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

package/dist/showcase/premium/empty-state/index.js

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

package/dist/showcase/premium/empty-state/mock.cjs

@@ -1,14 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { EmptyState } from "tembro"
-
-export function Example() {
-  return (
-    <EmptyState
-      title="No results yet"
-      description="Create your first item to unlock actions and charts."
-      actionLabel="Create item"
-      onAction={() => {
-        console.log("Create action triggered")
-      }}
-    />
-  )
-}`,highlights:[`No-content user messaging`,`Built-in action callback`,`Lightweight onboarding placeholder`,`Reusable for any resource list`],scenarios:[{title:`First launch`,description:`Guide users to create first entity in a clean state.`},{title:`Filtered empty`,description:`Tell users what changed filters removed all items.`},{title:`Error fallback`,description:`Use with loading and retry controls when data fetch fails.`}],capabilityNotes:[`Always provide a clear next action to recover from empty state.`,`Keep titles short and outcome oriented.`,`Prefer one primary action + short explanation for fastest user decision.`]};exports.emptyStateMock=e;

package/dist/showcase/premium/empty-state/mock.d.ts

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

package/dist/showcase/premium/empty-state/mock.js

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/empty-state/mock.ts
-var e = {
-	code: "import { EmptyState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <EmptyState\n      title=\"No results yet\"\n      description=\"Create your first item to unlock actions and charts.\"\n      actionLabel=\"Create item\"\n      onAction={() => {\n        console.log(\"Create action triggered\")\n      }}\n    />\n  )\n}",
-	highlights: [
-		"No-content user messaging",
-		"Built-in action callback",
-		"Lightweight onboarding placeholder",
-		"Reusable for any resource list"
-	],
-	scenarios: [
-		{
-			title: "First launch",
-			description: "Guide users to create first entity in a clean state."
-		},
-		{
-			title: "Filtered empty",
-			description: "Tell users what changed filters removed all items."
-		},
-		{
-			title: "Error fallback",
-			description: "Use with loading and retry controls when data fetch fails."
-		}
-	],
-	capabilityNotes: [
-		"Always provide a clear next action to recover from empty state.",
-		"Keep titles short and outcome oriented.",
-		"Prefer one primary action + short explanation for fastest user decision."
-	]
-};
-//#endregion
-export { e as emptyStateMock };

package/dist/showcase/premium/empty-state/showcase.cjs

@@ -1 +0,0 @@
-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/feedback/empty-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(0),[l,u]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start 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:`No-content state`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Empty state should unblock the next step`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`No data`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`One next action`})]})]})}),l?(0,a.jsx)(r.EmptyState,{title:`No results found`,description:`There is nothing to show yet. Create one item to continue.`,actionLabel:`Create first item`,onAction:()=>c(e=>e+1)}):(0,a.jsx)(r.EmptyState,{title:`Empty state intentionally hidden`,description:`Use a custom fallback only when needed.`}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Interaction count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:s}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use the primary CTA only for the most direct recovery path.`})]}),e===`playground`?(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Preview controls`}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:l?`default`:`outline`,onClick:()=>u(e=>!e),children:`Toggle feedback`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>c(0),children:`Reset actions`})]})]}):null]})]})}exports.EmptyStateShowcase=s;

package/dist/showcase/premium/empty-state/showcase.d.ts

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

package/dist/showcase/premium/empty-state/showcase.js

@@ -1,99 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { EmptyState as n } from "../../../components/feedback/empty-state.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/empty-state/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function s({ mode: s }) {
-	let [c, l] = r.useState(0), [u, d] = r.useState(!0);
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start 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: "No-content state"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Empty state should unblock the next step"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "No data"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "One next action"
-						})]
-					})]
-				})
-			}),
-			u ? /* @__PURE__ */ i(n, {
-				title: "No results found",
-				description: "There is nothing to show yet. Create one item to continue.",
-				actionLabel: "Create first item",
-				onAction: () => l((e) => e + 1)
-			}) : /* @__PURE__ */ i(n, {
-				title: "Empty state intentionally hidden",
-				description: "Use a custom fallback only when needed."
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-4 xl:grid-cols-[0.9fr_1.1fr]",
-				children: [/* @__PURE__ */ a("section", {
-					className: o,
-					children: [
-						/* @__PURE__ */ i("p", {
-							className: "text-sm font-medium aui-text-muted",
-							children: "Interaction count"
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: c
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: "Use the primary CTA only for the most direct recovery path."
-						})
-					]
-				}), s === "playground" ? /* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Preview controls"
-					}), /* @__PURE__ */ a("div", {
-						className: "mt-4 flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(e, {
-							size: "sm",
-							variant: u ? "default" : "outline",
-							onClick: () => d((e) => !e),
-							children: "Toggle feedback"
-						}), /* @__PURE__ */ i(e, {
-							size: "sm",
-							variant: "outline",
-							onClick: () => l(0),
-							children: "Reset actions"
-						})]
-					})]
-				}) : null]
-			})
-		]
-	});
-}
-//#endregion
-export { s as EmptyStateShowcase };

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

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

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

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

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

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

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

@@ -1,57 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useForm } from "react-hook-form"
-import {
-  FormBuilder,
-  formSection,
-  inputField,
-  phoneField,
-  switchField,
-  textareaField,
-} from "tembro"
-
-type DemoValues = {
-  workspace: string
-  ownerPhone: string
-  notes: string
-  isLive: boolean
-}
-
-const sections = [
-  formSection<DemoValues>({
-    id: "main",
-    title: "Workspace settings",
-    description: "Field schema, sections and disabled/readOnly behavior all live in FormBuilder config.",
-    fields: [
-      inputField<DemoValues>({ id: "workspace", props: { name: "workspace", label: "Workspace name", required: true } }),
-      phoneField<DemoValues>({ id: "ownerPhone", props: { name: "ownerPhone", label: "Owner phone" } }),
-      textareaField<DemoValues>({ id: "notes", colSpan: "full", props: { name: "notes", label: "Notes", rows: 3 } }),
-      switchField<DemoValues>({
-        id: "isLive",
-        colSpan: "full",
-        props: { name: "isLive", label: "Publish workspace", description: "Toggle public availability" },
-      }),
-    ],
-  }),
-]
-
-export function Example() {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      workspace: "Azamat UI",
-      ownerPhone: "+998 90 123 45 67",
-      notes: "Connected form sections with submit and reset lifecycle.",
-      isLive: true,
-    },
-  })
-
-  return (
-    <FormBuilder
-      control={form.control}
-      sections={sections}
-      columns={1}
-      submitLabel="Save"
-      resetLabel="Reset"
-      disabled={false}
-      readOnly={false}
-    />
-  )
-}`,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."]};exports.formBuilderMock=e;

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

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

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

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

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

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

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