tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/components/patterns/form-builder.tsx

@@ -1,443 +0,0 @@
-import * as React from "react"
-import type { Control, FieldPath, FieldValues } from "react-hook-form"
-
-import { Button } from "@/components/ui/button"
-import { FormInput, type FormInputProps } from "@/components/form/form-input"
-import { FormTextarea, type FormTextareaProps } from "@/components/form/form-textarea"
-import { FormSelect, type FormSelectProps } from "@/components/form/form-select"
-import { FormAsyncSelect, type FormAsyncSelectProps } from "@/components/form/form-async-select"
-import { FormSwitch, type FormSwitchProps } from "@/components/form/form-switch"
-import { FormNumberInput, type FormNumberInputProps } from "@/components/form/form-number-input"
-import { FormPhoneInput, type FormPhoneInputProps } from "@/components/form/form-phone-input"
-import { FormDateInput, type FormDateInputProps } from "@/components/form/form-date-input"
-import {
-  FormDateRangeInput,
-  type FormDateRangeInputProps,
-} from "@/components/form/form-date-range-input"
-import { cn } from "@/lib/utils"
-
-export type FormBuilderLayout = "grid" | "stack"
-export type FormBuilderDensity = "compact" | "default" | "comfortable"
-
-export type FormBuilderFieldRenderContext<TFieldValues extends FieldValues> = {
-  control: Control<TFieldValues>
-  disabled?: boolean
-  readOnly?: boolean
-}
-
-type BaseFormBuilderField = {
-  id: string
-  hidden?: boolean
-  className?: string
-  colSpan?: 1 | 2 | 3 | 4 | "full"
-}
-
-export type FormBuilderCustomField<TFieldValues extends FieldValues> = BaseFormBuilderField & {
-  type: "custom"
-  render: (context: FormBuilderFieldRenderContext<TFieldValues>) => React.ReactNode
-}
-
-export type FormBuilderInputField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "input"
-  props: Omit<FormInputProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderTextareaField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "textarea"
-  props: Omit<FormTextareaProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderSelectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "select"
-  props: Omit<FormSelectProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderAsyncSelectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "async-select"
-  props: Omit<FormAsyncSelectProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderSwitchField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "switch"
-  props: Omit<FormSwitchProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderNumberField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "number"
-  props: Omit<FormNumberInputProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderPhoneField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "phone"
-  props: Omit<FormPhoneInputProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderDateField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "date"
-  props: Omit<FormDateInputProps<TFieldValues, TName>, "control">
-}
-
-export type FormBuilderDateRangeField<
-  TFieldValues extends FieldValues,
-  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = BaseFormBuilderField & {
-  type: "date-range"
-  props: Omit<FormDateRangeInputProps<TFieldValues, TFromName, TToName>, "control">
-}
-
-export type FormBuilderField<TFieldValues extends FieldValues> =
-  | FormBuilderCustomField<TFieldValues>
-  | FormBuilderInputField<TFieldValues>
-  | FormBuilderTextareaField<TFieldValues>
-  | FormBuilderSelectField<TFieldValues>
-  | FormBuilderAsyncSelectField<TFieldValues>
-  | FormBuilderSwitchField<TFieldValues>
-  | FormBuilderNumberField<TFieldValues>
-  | FormBuilderPhoneField<TFieldValues>
-  | FormBuilderDateField<TFieldValues>
-  | FormBuilderDateRangeField<TFieldValues>
-
-export type FormBuilderSection<TFieldValues extends FieldValues> = {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  hidden?: boolean
-  className?: string
-  fields: FormBuilderField<TFieldValues>[]
-}
-
-export type FormBuilderProps<TFieldValues extends FieldValues> = Omit<
-  React.ComponentProps<"form">,
-  "children"
-> & {
-  control: Control<TFieldValues>
-  fields?: FormBuilderField<TFieldValues>[]
-  sections?: FormBuilderSection<TFieldValues>[]
-  layout?: FormBuilderLayout
-  density?: FormBuilderDensity
-  columns?: 1 | 2 | 3 | 4
-  disabled?: boolean
-  readOnly?: boolean
-  footer?: React.ReactNode
-  submitLabel?: React.ReactNode
-  resetLabel?: React.ReactNode
-  onResetClick?: () => void
-  isSubmitting?: boolean
-  sectionClassName?: string
-  fieldClassName?: string
-  footerClassName?: string
-}
-
-const densityClassName: Record<FormBuilderDensity, string> = {
-  compact: "gap-3",
-  default: "gap-4",
-  comfortable: "gap-6",
-}
-
-const columnsClassName: Record<1 | 2 | 3 | 4, string> = {
-  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",
-}
-
-const colSpanClassName: Record<NonNullable<BaseFormBuilderField["colSpan"]>, string> = {
-  1: "col-span-1",
-  2: "md:col-span-2",
-  3: "xl:col-span-3",
-  4: "xl:col-span-4",
-  full: "col-span-full",
-}
-
-type FieldPresetOptions<TProps> = BaseFormBuilderField & {
-  props: TProps
-}
-
-function splitFieldOptions<TProps>(options: FieldPresetOptions<TProps>) {
-  const { id, hidden, className, colSpan, props } = options
-  return { base: { id, hidden, className, colSpan }, props }
-}
-
-function inputField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderInputField<TFieldValues, TName>["props"]>): FormBuilderInputField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "input", props }
-}
-
-function textareaField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderTextareaField<TFieldValues, TName>["props"]>): FormBuilderTextareaField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "textarea", props }
-}
-
-function selectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderSelectField<TFieldValues, TName>["props"]>): FormBuilderSelectField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "select", props }
-}
-
-function asyncSelectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderAsyncSelectField<TFieldValues, TName>["props"]>): FormBuilderAsyncSelectField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "async-select", props }
-}
-
-function switchField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderSwitchField<TFieldValues, TName>["props"]>): FormBuilderSwitchField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "switch", props }
-}
-
-function numberField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderNumberField<TFieldValues, TName>["props"]>): FormBuilderNumberField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "number", props }
-}
-
-function phoneField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderPhoneField<TFieldValues, TName>["props"]>): FormBuilderPhoneField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "phone", props }
-}
-
-function dateField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderDateField<TFieldValues, TName>["props"]>): FormBuilderDateField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "date", props }
-}
-
-function dateRangeField<
-  TFieldValues extends FieldValues,
-  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderDateRangeField<TFieldValues, TFromName, TToName>["props"]>): FormBuilderDateRangeField<TFieldValues, TFromName, TToName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "date-range", props }
-}
-
-function customField<TFieldValues extends FieldValues>(
-  options: BaseFormBuilderField & Pick<FormBuilderCustomField<TFieldValues>, "render">
-): FormBuilderCustomField<TFieldValues> {
-  const { id, hidden, className, colSpan, render } = options
-  return { id, hidden, className, colSpan, type: "custom", render }
-}
-
-function formSection<TFieldValues extends FieldValues>(
-  section: FormBuilderSection<TFieldValues>
-): FormBuilderSection<TFieldValues> {
-  return section
-}
-
-function renderFormBuilderField<TFieldValues extends FieldValues>(
-  field: FormBuilderField<TFieldValues>,
-  context: FormBuilderFieldRenderContext<TFieldValues>
-) {
-  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
-  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
-
-  switch (field.type) {
-    case "custom":
-      return field.render(context)
-    case "input":
-      return React.createElement(FormInputComponent, {
-        control: context.control,
-        disabled: context.disabled,
-        readOnly: context.readOnly,
-        ...(field.props as Omit<FormInputProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
-      })
-    case "textarea":
-      return <FormTextarea control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
-    case "select":
-      return React.createElement(FormSelectComponent, {
-        control: context.control,
-        disabled: context.disabled,
-        ...(field.props as Omit<FormSelectProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
-      })
-    case "async-select":
-      return <FormAsyncSelect control={context.control} disabled={context.disabled} {...field.props} />
-    case "switch":
-      return <FormSwitch control={context.control} disabled={context.disabled} {...field.props} />
-    case "number":
-      return <FormNumberInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
-    case "phone":
-      return <FormPhoneInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
-    case "date":
-      return <FormDateInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
-    case "date-range":
-      return (
-        <FormDateRangeInput
-          control={context.control}
-          fromInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          toInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          {...field.props}
-        />
-      )
-    default:
-      return null
-  }
-}
-
-function normalizeSections<TFieldValues extends FieldValues>({
-  fields,
-  sections,
-}: Pick<FormBuilderProps<TFieldValues>, "fields" | "sections">): FormBuilderSection<TFieldValues>[] {
-  if (sections?.length) return sections
-  return [{ id: "default", fields: fields ?? [] }]
-}
-
-function FormBuilder<TFieldValues extends FieldValues>({
-  className,
-  control,
-  fields,
-  sections,
-  layout = "grid",
-  density = "default",
-  columns = 2,
-  disabled,
-  readOnly,
-  footer,
-  submitLabel,
-  resetLabel,
-  onResetClick,
-  isSubmitting,
-  sectionClassName,
-  fieldClassName,
-  footerClassName,
-  ...props
-}: FormBuilderProps<TFieldValues>) {
-  const normalizedSections = normalizeSections({ fields, sections })
-  const context = React.useMemo(
-    () => ({ control, disabled, readOnly }),
-    [control, disabled, readOnly]
-  )
-
-  return (
-    <form data-slot="form-builder" className={cn("grid", densityClassName[density], className)} {...props}>
-      {normalizedSections
-        .filter((section) => !section.hidden)
-        .map((section) => (
-          <section
-            key={section.id}
-            data-slot="form-builder-section"
-            className={cn("grid gap-4", section.className, sectionClassName)}
-          >
-            {(section.title || section.description || section.actions) && (
-              <div
-                data-slot="form-builder-section-header"
-                className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-              >
-                <div className="min-w-0 space-y-1">
-                  {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
-                  {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
-                </div>
-                {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
-              </div>
-            )}
-
-            <div
-              data-slot="form-builder-fields"
-              data-layout={layout}
-              className={cn(
-                "grid",
-                densityClassName[density],
-                layout === "grid" ? columnsClassName[columns] : "grid-cols-1"
-              )}
-            >
-              {section.fields
-                .filter((field) => !field.hidden)
-                .map((field) => (
-                  <div
-                    key={field.id}
-                    data-slot="form-builder-field"
-                    className={cn(
-                      field.colSpan && colSpanClassName[field.colSpan],
-                      field.className,
-                      fieldClassName
-                    )}
-                  >
-                    {renderFormBuilderField(field, context)}
-                  </div>
-                ))}
-            </div>
-          </section>
-        ))}
-
-      {(footer || submitLabel || resetLabel) && (
-        <div data-slot="form-builder-footer" className={cn("flex flex-wrap items-center justify-end gap-2", footerClassName)}>
-          {footer ?? (
-            <>
-              {resetLabel && (
-                <Button type="button" variant="outline" disabled={disabled || isSubmitting} onClick={onResetClick}>
-                  {resetLabel}
-                </Button>
-              )}
-              {submitLabel && (
-                <Button type="submit" disabled={disabled || isSubmitting}>
-                  {submitLabel}
-                </Button>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </form>
-  )
-}
-
-export {
-  FormBuilder,
-  asyncSelectField,
-  customField,
-  dateField,
-  dateRangeField,
-  formSection,
-  inputField,
-  numberField,
-  phoneField,
-  renderFormBuilderField,
-  selectField,
-  switchField,
-  textareaField,
-}

package/packages/cli/vendor/src/showcase/premium/empty-state/index.ts

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

package/packages/cli/vendor/src/showcase/premium/empty-state/mock.ts

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const emptyStateMock: ComponentDemoMock = {
-  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.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/empty-state/showcase.tsx

@@ -1,65 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, EmptyState } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function EmptyStateShowcase({ mode }: ComponentDemoProps) {
-  const [actionCount, setActionCount] = React.useState(0)
-  const [showEmptyFeedback, setShowEmptyFeedback] = React.useState(true)
-
-  return (
-    <div className="space-y-5">
-      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">No-content state</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Empty state should unblock the next step</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">No data</Badge>
-            <Badge variant="outline" className="rounded-full">One next action</Badge>
-          </div>
-        </div>
-      </section>
-
-      {showEmptyFeedback ? (
-        <EmptyState
-          title="No results found"
-          description="There is nothing to show yet. Create one item to continue."
-          actionLabel="Create first item"
-          onAction={() => setActionCount((value) => value + 1)}
-        />
-      ) : (
-        <EmptyState title="Empty state intentionally hidden" description="Use a custom fallback only when needed." />
-      )}
-
-      <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Interaction count</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{actionCount}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Use the primary CTA only for the most direct recovery path.</p>
-        </section>
-        {mode === "playground" ? (
-          <section className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Preview controls</p>
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Button size="sm" variant={showEmptyFeedback ? "default" : "outline"} onClick={() => setShowEmptyFeedback((value) => !value)}>
-                Toggle feedback
-              </Button>
-              <Button size="sm" variant="outline" onClick={() => setActionCount(0)}>
-                Reset actions
-              </Button>
-            </div>
-          </section>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/form-builder/index.ts

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

package/packages/cli/vendor/src/showcase/premium/form-builder/mock.ts

@@ -1,79 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const formBuilderMock: ComponentDemoMock = {
-  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.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/form-builder/showcase.tsx

@@ -1,55 +0,0 @@
-import * as React from "react"
-import { useForm } from "react-hook-form"
-
-import { Button } from "@/index"
-import { FormBuilder, formSection, inputField, phoneField, switchField, textareaField } from "@/components/patterns/form-builder"
-
-import type { ComponentDemoProps } from "../types"
-
-type DemoValues = {
-  workspace: string
-  ownerPhone: string
-  notes: string
-  isLive: boolean
-}
-
-export function FormBuilderShowcase({ mode }: ComponentDemoProps) {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      workspace: "Azamat UI",
-      ownerPhone: "+998 90 123 45 67",
-      notes: "Connected sections and submit/reset wiring.",
-      isLive: true,
-    },
-  })
-
-  const sections = React.useMemo(
-    () => [
-      formSection<DemoValues>({
-        id: "main",
-        title: "Workspace settings",
-        description: "Schema-driven form builder with explicit submit and reset controls.",
-        fields: [
-          inputField<DemoValues>({ id: "workspace", props: { name: "workspace", label: "Workspace", 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: "Visible only when record is active." },
-          }),
-        ],
-      }),
-    ],
-    []
-  )
-
-  return (
-    <div className="space-y-4">
-      <FormBuilder control={form.control} sections={sections} columns={1} submitLabel={mode === "playground" ? "Save workspace" : undefined} />
-      <Button type="button" variant="outline" onClick={() => form.reset()}>
-        Reset form
-      </Button>
-    </div>
-  )
-}