tembro 3.0.0 → 3.1.1

package/packages/cli/vendor/src/showcase/premium/kanban-board/showcase.tsx

@@ -1,58 +1,61 @@
-import * as React from "react"
-
-import { Button, KanbanBoard } from "@/index"
-import type { KanbanColumn } from "@/components/display/kanban"
-
-const baseColumns = [
-  {
-    key: "todo",
-    title: "To do",
-    description: "Incoming tasks",
-    cards: [
-      { key: "a", title: "Audit inputs", description: "Collect edge cases", meta: "high" },
-      { key: "b", title: "Review docs", description: "Ensure API completeness", meta: "medium" },
-    ],
-  },
-  {
-    key: "inProgress",
-    title: "In progress",
-    description: "Current sprint",
-    cards: [{ key: "c", title: "Add demos", description: "Finish missing routes", meta: "urgent" }],
-  },
-]
-
-export function KanbanBoardShowcase() {
-  const [columns, setColumns] = React.useState<KanbanColumn[]>(baseColumns)
-  const [selected, setSelected] = React.useState<string | undefined>(undefined)
-
-  return (
-    <div className="space-y-4">
-      <div className="flex gap-2">
-        <Button size="sm" onClick={() => setColumns((current) => [...current, { key: `new-${Date.now()}`, title: "New", cards: [] }])}>
-          Add lane
-        </Button>
-      </div>
-      <KanbanBoard
-        columns={columns}
-        onCardClick={(card) => setSelected(String(card.key))}
-        renderCard={(card) => (
-          <div
-            key={card.key}
-            className="rounded-lg border bg-card p-3"
-            role="button"
-            tabIndex={0}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") setSelected(card.key)
-            }}
-            onClick={() => setSelected(card.key)}
-          >
-            <div className="font-medium text-sm">{card.title}</div>
-            <div className="mt-1 text-xs text-muted-foreground">{card.description}</div>
-            {card.meta && <div className="mt-2 text-xs text-foreground/80">{card.meta}</div>}
-          </div>
-        )}
-      />
-      {selected && <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">Selected card: {selected}</div>}
-    </div>
-  )
-}
+import * as React from "react"
+
+import { Button, KanbanBoard } from "@/index"
+import type { KanbanColumn } from "@/components/display/kanban"
+
+const baseColumns = [
+  {
+    key: "todo",
+    title: "To do",
+    description: "Incoming tasks",
+    cards: [
+      { key: "a", title: "Audit inputs", description: "Collect edge cases", meta: "high" },
+      { key: "b", title: "Review docs", description: "Ensure API completeness", meta: "medium" },
+    ],
+  },
+  {
+    key: "done",
+    title: "Done",
+    description: "Completed work",
+    cards: [],
+  },
+  {
+    key: "inProgress",
+    title: "In progress",
+    description: "Current sprint",
+    cards: [{ key: "c", title: "Add demos", description: "Finish missing routes", meta: "urgent" }],
+  },
+]
+
+export function KanbanBoardShowcase() {
+  const [columns, setColumns] = React.useState<KanbanColumn[]>(baseColumns)
+  const [selected, setSelected] = React.useState<string | undefined>(undefined)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Button size="sm" onClick={() => setColumns((current) => [...current, { key: `new-${Date.now()}`, title: "New", cards: [] }])}>
+          Add lane
+        </Button>
+      </div>
+      <KanbanBoard
+        columns={columns}
+        onColumnsChange={setColumns}
+        onCardClick={(card) => setSelected(String(card.key))}
+        renderCard={(card, _column, { handle }) => (
+          <div
+            className="rounded-lg border bg-card p-3"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <div className="font-medium text-sm">{card.title}</div>
+              {handle}
+            </div>
+            <div className="mt-1 text-xs text-muted-foreground">{card.description}</div>
+            {card.meta && <div className="mt-2 text-xs text-foreground/80">{card.meta}</div>}
+          </div>
+        )}
+      />
+      {selected && <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">Selected card: {selected}</div>}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/sortable-list/index.ts

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

package/packages/cli/vendor/src/showcase/premium/sortable-list/mock.ts

@@ -0,0 +1,36 @@
+import type { ComponentDemoMock } from "../types"
+
+export const sortableListMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { SortableList } from "tembro"
+
+const initialItems = [
+  { id: "brief", label: "Product brief" },
+  { id: "design", label: "Design review" },
+  { id: "release", label: "Release checklist" },
+]
+
+export function Example() {
+  const [items, setItems] = React.useState(initialItems)
+
+  return (
+    <SortableList
+      items={items}
+      getItemId={(item) => item.id}
+      getItemLabel={(item) => item.label}
+      renderItem={(item) => item.label}
+      onItemsChange={setItems}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add sortable-list",
+  highlights: [
+    "Pointer, touch and keyboard sorting",
+    "Controlled and uncontrolled state",
+    "Drag overlay and screen-reader instructions",
+  ],
+  scenarios: [
+    { title: "Priority queue", description: "Reorder work while keeping the resulting array in application state." },
+    { title: "Form sections", description: "Let users arrange configurable fields with an explicit drag handle." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/sortable-list/showcase.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { Badge, Button, SortableList } from "@/index"
+
+const initialItems = [
+  { id: "brief", label: "Product brief", owner: "Azamat", tone: "Ready" },
+  { id: "design", label: "Design review", owner: "Madina", tone: "Review" },
+  { id: "release", label: "Release checklist", owner: "Jasur", tone: "Blocked" },
+  { id: "docs", label: "Documentation", owner: "Nodira", tone: "Draft" },
+]
+
+export function SortableListShowcase() {
+  const [items, setItems] = React.useState(initialItems)
+  const [lastMove, setLastMove] = React.useState("No moves yet")
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm text-muted-foreground">{lastMove}</p>
+        <Button type="button" size="sm" variant="outline" onClick={() => setItems(initialItems)}>
+          Reset order
+        </Button>
+      </div>
+      <SortableList
+        items={items}
+        getItemId={(item) => item.id}
+        getItemLabel={(item) => item.label}
+        onItemsChange={(nextItems, change) => {
+          setItems(nextItems)
+          setLastMove(`${change.item.label}: ${change.oldIndex + 1} → ${change.newIndex + 1}`)
+        }}
+        renderItem={(item) => (
+          <div className="flex min-w-0 items-center justify-between gap-3 px-1 py-1.5">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">{item.label}</div>
+              <div className="text-xs text-muted-foreground">Owner: {item.owner}</div>
+            </div>
+            <Badge variant="outline">{item.tone}</Badge>
+          </div>
+        )}
+      />
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/virtual-list/index.ts

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

package/packages/cli/vendor/src/showcase/premium/virtual-list/mock.ts

@@ -0,0 +1,32 @@
+import type { ComponentDemoMock } from "../types"
+
+export const virtualListMock: ComponentDemoMock = {
+  code: `import { VirtualList } from "tembro"
+
+const events = Array.from({ length: 10000 }, (_, index) => ({
+  id: index + 1,
+  title: \`Audit event \${index + 1}\`,
+}))
+
+export function Example() {
+  return (
+    <VirtualList
+      items={events}
+      height={420}
+      estimateSize={56}
+      getItemKey={(event) => event.id}
+      renderItem={(event) => <div>{event.title}</div>}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add virtual-list",
+  highlights: [
+    "Renders only visible DOM nodes",
+    "Dynamic row measurement and overscan",
+    "Stable item keys and accessible set metadata",
+  ],
+  scenarios: [
+    { title: "Audit log", description: "Keep tens of thousands of events responsive in a fixed viewport." },
+    { title: "Search results", description: "Render large result sets without mounting every result card." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/virtual-list/showcase.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { Badge, VirtualList } from "@/index"
+
+const events = Array.from({ length: 10_000 }, (_, index) => ({
+  id: index + 1,
+  title: `Audit event ${index + 1}`,
+  actor: ["Azamat", "Madina", "Jasur", "Nodira"][index % 4],
+  tone: index % 7 === 0 ? "Review" : "Completed",
+}))
+
+export function VirtualListShowcase() {
+  const [range, setRange] = React.useState("Calculating visible range…")
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+        <span>10,000 records</span>
+        <span>{range}</span>
+      </div>
+      <VirtualList
+        items={events}
+        height={420}
+        estimateSize={58}
+        getItemKey={(event) => event.id}
+        onRangeChange={({ startIndex, endIndex }) => {
+          setRange(`Mounted window: ${startIndex + 1}–${endIndex + 1}`)
+        }}
+        renderItem={(event) => (
+          <div className="flex min-h-14 items-center justify-between gap-3 rounded-lg border bg-card px-4 py-2.5 shadow-sm">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">{event.title}</div>
+              <div className="text-xs text-muted-foreground">Actor: {event.actor}</div>
+            </div>
+            <Badge variant={event.tone === "Review" ? "outline" : "secondary"}>{event.tone}</Badge>
+          </div>
+        )}
+      />
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/preview-catalog.tsx

@@ -1,65 +1,65 @@
-export type PreviewSurfaceTone = "dashboard" | "table" | "auth" | "product" | "command" | "calendar" | "upload"
-
-export type PreviewSurfaceRecord = {
-  slug: string
-  title: string
-  command: string
-  code: string
-  tone: PreviewSurfaceTone
-}
-
-export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
-  {
-    slug: "dashboard-01",
-    title: "Dashboard with sidebar",
-    command: "npx tembro init --template next --defaults\nnpx tembro add app-sidebar metric-grid data-table",
-    code: `import { AppSidebar, MetricGrid } from "tembro"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
-    tone: "dashboard",
-  },
-  {
-    slug: "table-01",
-    title: "Advanced invoice table",
-    command: "npx tembro add data-table",
-    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
-    tone: "table",
-  },
-  {
-    slug: "auth-01",
-    title: "Authentication screen",
-    command: "npx tembro add input button",
-    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
-    tone: "auth",
-  },
-  {
-    slug: "product-01",
-    title: "Commerce product detail",
-    command: "npx tembro add badge button",
-    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
-    tone: "product",
-  },
-  {
-    slug: "command-01",
-    title: "Command palette",
-    command: "npx tembro add command-palette",
-    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
-    tone: "command",
-  },
-  {
-    slug: "calendar-01",
-    title: "Calendar and date picker",
-    command: "npx tembro add calendar date-picker",
-    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
-    tone: "calendar",
-  },
-  {
-    slug: "upload-01",
-    title: "Upload workspace",
-    command: "npx tembro add file-upload image-upload",
-    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
-    tone: "upload",
-  },
-]
-
-export function getPreviewSurface(slug: string) {
-  return previewSurfaceCatalog.find((item) => item.slug === slug) ?? null
-}
+export type PreviewSurfaceTone = "dashboard" | "table" | "auth" | "product" | "command" | "calendar" | "upload"
+
+export type PreviewSurfaceRecord = {
+  slug: string
+  title: string
+  command: string
+  code: string
+  tone: PreviewSurfaceTone
+}
+
+export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
+  {
+    slug: "dashboard-01",
+    title: "Dashboard with sidebar",
+    command: "npx tembro init --template next --defaults\nnpx tembro add sidebar metric-grid data-table",
+    code: `import { Sidebar } from "@/components/layout/sidebar"\nimport { MetricGrid } from "@/components/display/metric-grid"\n\nexport function Dashboard01() {\n  return <Sidebar />\n}`,
+    tone: "dashboard",
+  },
+  {
+    slug: "table-01",
+    title: "Advanced invoice table",
+    command: "npx tembro add data-table",
+    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
+    tone: "table",
+  },
+  {
+    slug: "auth-01",
+    title: "Authentication screen",
+    command: "npx tembro add input button",
+    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
+    tone: "auth",
+  },
+  {
+    slug: "product-01",
+    title: "Commerce product detail",
+    command: "npx tembro add badge button",
+    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
+    tone: "product",
+  },
+  {
+    slug: "command-01",
+    title: "Command palette",
+    command: "npx tembro add command-palette",
+    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
+    tone: "command",
+  },
+  {
+    slug: "calendar-01",
+    title: "Calendar and date picker",
+    command: "npx tembro add calendar date-picker",
+    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
+    tone: "calendar",
+  },
+  {
+    slug: "upload-01",
+    title: "Upload workspace",
+    command: "npx tembro add file-upload image-upload",
+    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
+    tone: "upload",
+  },
+]
+
+export function getPreviewSurface(slug: string) {
+  return previewSurfaceCatalog.find((item) => item.slug === slug) ?? null
+}

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -53,8 +53,10 @@ import {
 } from "@/index"
 import { AppHeader } from "@/components/layout/app-header"
 import { StatCard } from "@/components/layout/stat-card"
+import { FormBuilder, customField, formSection } from "@/components/patterns/form-builder"
 import { ResourceDetailPage } from "@/components/patterns/resource-detail-page"
 import { ResourcePage, ResourcePageSection } from "@/components/patterns/resource-page"
+import { useForm } from "react-hook-form"
 
 import type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps } from "./premium/types"
 
@@ -116,6 +118,7 @@ const registryDemoDefinitions = [
   component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
   component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
   component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
+  component("form-builder", "FormBuilder", "patterns", "Declarative form scaffold with sections and reusable field presets."),
   component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy.", "ImageUpload"),
@@ -124,6 +127,7 @@ const registryDemoDefinitions = [
   component("wizard", "Wizard", "wizard", "Stepper, content and footer controls combined into one workflow."),
   component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
   component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
+  component("quantity-stepper", "Input", "inputs", "Bounded quantity input with +/- controls and fast editing."),
 ] satisfies RegistryDemoDefinition[]
 
 export const registrySpecificDemoRegistry: Record<string, ComponentDemoBundle> = Object.fromEntries(
@@ -271,6 +275,10 @@ function InputPreview({
     return <OtpInput value={value.replace(/\D/g, "").slice(0, 6)} onValueChange={onValueChange} />
   }
 
+  if (slug === "quantity-stepper") {
+    return <Input kind="quantity" value={3} min={1} max={10} showControls aria-label="Quantity" />
+  }
+
   if (slug === "tag-input") {
     return <TagInput defaultValue={["dashboard", "beta", "ops"]} placeholder="Add label" />
   }
@@ -794,6 +802,10 @@ function WizardPreview({ slug }: { slug: string }) {
 }
 
 function PatternsPreview({ slug }: { slug: string }) {
+  if (slug === "form-builder") {
+    return <FormBuilderPreview />
+  }
+
   if (slug === "resource-detail-page") {
     return (
       <ResourceDetailPage
@@ -833,6 +845,62 @@ function PatternsPreview({ slug }: { slug: string }) {
   )
 }
 
+function FormBuilderPreview() {
+  type FormBuilderDemoValues = {
+    name: string
+    email: string
+    notes: string
+    marketing: boolean
+  }
+
+  const form = useForm<FormBuilderDemoValues>({
+    defaultValues: {
+      name: "Azamat Jurayev",
+      email: "azamat@example.com",
+      notes: "Release gate is ready.",
+      marketing: true,
+    },
+  })
+
+  const sections = [
+    formSection<FormBuilderDemoValues>({
+      id: "profile",
+      title: "Profile",
+      description: "Core account and contact fields.",
+      fields: [
+        customField<FormBuilderDemoValues>({
+          id: "profile-summary",
+          colSpan: "full",
+          render: () => (
+            <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4">
+              <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">Reusable section shell</p>
+              <p className="mt-1 text-sm text-[color:var(--aui-page-muted)]">
+                FormBuilder groups controls, helper copy and actions without scattering layout logic.
+              </p>
+            </div>
+          ),
+        }),
+      ],
+    }),
+  ]
+
+  return (
+    <FormBuilder<FormBuilderDemoValues>
+      control={form.control}
+      sections={sections}
+      columns={1}
+      submitLabel="Save changes"
+      resetLabel="Reset"
+      onResetClick={() => form.reset()}
+      footer={
+        <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm text-[color:var(--aui-page-muted)]">
+          Use the builder for real form routes, then replace this preview with your own field presets.
+        </div>
+      }
+    />
+  )
+}
+
 function toTitle(slug: string) {
   return slug
     .split("-")