tembro 3.1.5 → 3.1.7

package/packages/cli/vendor/src/showcase/fallback.tsx

@@ -1,47 +1,56 @@
 import {
-  Alert,
-  Avatar,
-  AvatarGroup,
-  Badge,
-  Button,
-  ButtonGroup,
-  CalendarScheduler,
-  Card,
-  CardContent,
+  Alert,
+  Accordion,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  ButtonGroup,
+  CalendarScheduler,
+  Card,
+  CardContent,
   CodeBlock,
+  ColorPicker,
+  CommandPalette,
   CopyButton,
   DataState,
-  Divider,
-  DualListPicker,
+  Divider,
+  DualListPicker,
   FilterBar,
-  Input,
-  JsonInput,
-  KanbanBoard,
+  Input,
+  ImageCropper,
+  JsonInput,
+  KanbanBoard,
   List,
   OtpInput,
   PageState,
+  QRCode,
   QuickActionGrid,
   RangeSlider,
-  Rating,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-  SavedFilterSelect,
-  Section,
-  SegmentedControl,
-  Skeleton,
-  SkeletonCard,
-  SkeletonText,
-  Slider,
+  Rating,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  RichTextEditor,
+  SavedFilterSelect,
+  Section,
+  SegmentedControl,
+  SignaturePad,
+  Skeleton,
+  SkeletonCard,
+  SkeletonText,
+  Slider,
   Spinner,
   Statistic,
   StatisticCard,
   StatisticGrid,
   StatusLegend,
-  TagInput,
-  TimePicker,
-  TimeRangePicker,
-  TreeView,
+  SortableList,
+  TagInput,
+  TimePicker,
+  TimeRangePicker,
+  TreeView,
+  VirtualList,
 } from "@/index"
 import { Carousel, CarouselItem } from "@/components/display/carousel"
 import { Tag, TagGroup } from "@/components/display/tag"
@@ -143,10 +152,10 @@ function renderGenericPreviewSurface(
   setState: ShowcaseDemoProps["setState"],
   mode: ShowcaseDemoProps["mode"]
 ) {
-  if (item.slug === "avatar") {
+  if (item.slug === "avatar") {
     return (
       <div className="flex flex-wrap items-center gap-4">
-        <Avatar name="Azamat UI" />
+        <Avatar name="Tembro" />
         <Avatar fallback="AJ" shape="rounded" />
         <AvatarGroup
           items={[
@@ -158,7 +167,30 @@ function renderGenericPreviewSurface(
         />
       </div>
     )
-  }
+  }
+
+  if (item.slug === "accordion") {
+    return (
+      <Accordion
+        type="single"
+        defaultValue="install"
+        items={[
+          {
+            key: "install",
+            title: "Install with CLI",
+            description: "Copy source into your app.",
+            content: "Run `npx tembro add accordion`, then edit the local component source.",
+          },
+          {
+            key: "compose",
+            title: "Compose route content",
+            description: "Use it for settings, FAQ and dense docs groups.",
+            content: "Accordion items keep title, description, meta, badges and disabled states together.",
+          },
+        ]}
+      />
+    )
+  }
 
   if (item.slug === "calendar-scheduler") {
     return (
@@ -195,7 +227,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "code-block") {
+  if (item.slug === "code-block") {
     return (
       <CodeBlock
         title="Install"
@@ -203,13 +235,37 @@ function renderGenericPreviewSurface(
         code={`npx tembro init --template next\nnpx tembro add button`}
       />
     )
-  }
+  }
+
+  if (item.slug === "command-palette") {
+    return (
+      <CommandPalette
+        open
+        onOpenChange={() => undefined}
+        title="Preview command palette"
+        description="Command palette preview with grouped actions."
+        placeholder="Search commands..."
+        groups={[
+          {
+            id: "components",
+            label: "Components",
+            items: [
+              { id: "button", label: "Button", description: "Open button docs", shortcut: "B" },
+              { id: "input", label: "Input", description: "Open input docs", shortcut: "I" },
+              { id: "data-table", label: "DataTable", description: "Open table docs", shortcut: "T" },
+            ],
+          },
+        ]}
+        contentClassName="relative inset-auto translate-x-0 translate-y-0 shadow-none"
+      />
+    )
+  }
 
   if (item.slug === "copy-button") {
     return <CopyButton value="npx tembro add button">Copy command</CopyButton>
   }
 
-  if (item.slug === "data-state") {
+  if (item.slug === "data-state") {
     return (
       <DataState
         status="empty"
@@ -218,7 +274,18 @@ function renderGenericPreviewSurface(
         actions={<Button size="sm">Import CSV</Button>}
       />
     )
-  }
+  }
+
+  if (item.slug === "color-picker") {
+    return (
+      <ColorPicker
+        label="Brand accent"
+        defaultValue="#2563ebcc"
+        showAlpha
+        swatches={["#0f172a", "#2563eb", "#059669", "#d97706", "#dc2626", "#7c3aed"]}
+      />
+    )
+  }
 
   if (item.slug === "divider") {
     return (
@@ -478,15 +545,111 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "json-input") {
+  if (item.slug === "json-input") {
     return (
       <JsonInput
-        value={`{\n  "workspace": "azamat-ui",\n  "theme": "dashboard"\n}`}
+        value={`{\n  "workspace": "tembro",\n  "theme": "dashboard"\n}`}
         onValueChange={() => undefined}
         rows={7}
       />
     )
-  }
+  }
+
+  if (item.slug === "sortable-list") {
+    const tasks = [
+      { id: "docs", title: "Docs polish", meta: "Ready" },
+      { id: "api", title: "API table", meta: "Review" },
+      { id: "preview", title: "Live preview", meta: "Live" },
+    ]
+
+    return (
+      <SortableList
+        defaultItems={tasks}
+        getItemId={(task) => task.id}
+        getItemLabel={(task) => task.title}
+        renderItem={(task) => (
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <span className="truncate text-sm font-medium">{task.title}</span>
+            <Badge variant="outline">{task.meta}</Badge>
+          </div>
+        )}
+      />
+    )
+  }
+
+  if (item.slug === "virtual-list") {
+    const rows = Array.from({ length: 80 }, (_, index) => ({
+      id: `row-${index + 1}`,
+      name: `Virtual record ${index + 1}`,
+      status: index % 3 === 0 ? "Review" : "Live",
+    }))
+
+    return (
+      <VirtualList
+        items={rows}
+        height={280}
+        estimateSize={56}
+        getItemKey={(row) => row.id}
+        renderItem={(row) => (
+          <div className="mx-1 flex items-center justify-between rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-3">
+            <span className="text-sm font-medium">{row.name}</span>
+            <Badge variant={row.status === "Live" ? "secondary" : "outline"}>{row.status}</Badge>
+          </div>
+        )}
+      />
+    )
+  }
+
+  if (item.slug === "signature-pad") {
+    return (
+      <SignaturePad
+        defaultValue={[
+          [
+            { x: 0.16, y: 0.58, pressure: 0.5 },
+            { x: 0.26, y: 0.38, pressure: 0.5 },
+            { x: 0.38, y: 0.62, pressure: 0.5 },
+            { x: 0.54, y: 0.42, pressure: 0.5 },
+            { x: 0.72, y: 0.56, pressure: 0.5 },
+          ],
+        ]}
+        labels={{ canvas: "Signature preview", undo: "Undo", clear: "Clear" }}
+      />
+    )
+  }
+
+  if (item.slug === "qr-code") {
+    return (
+      <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
+        <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-white p-4">
+          <QRCode value="https://tembro.dev/components" size={148} alt="Tembro components QR" />
+        </div>
+        <div>
+          <p className="font-semibold aui-text-strong">QR code</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">Generates SVG output, supports custom colors, error fallback and async loading.</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (item.slug === "rich-text-editor") {
+    return (
+      <RichTextEditor
+        defaultValue="<h2>Release notes</h2><p>Write rich product copy with toolbar actions, links and placeholder support.</p>"
+        minHeight={180}
+        onLinkRequest={() => "https://tembro.dev"}
+      />
+    )
+  }
+
+  if (item.slug === "image-cropper") {
+    const cropperImage =
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 420"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#0f172a"/><stop offset="1" stop-color="#22c55e"/></linearGradient></defs><rect width="640" height="420" fill="url(#g)"/><circle cx="460" cy="150" r="88" fill="#ffffff" opacity=".22"/><rect x="70" y="245" width="310" height="64" rx="20" fill="#fff" opacity=".88"/><text x="95" y="287" font-family="Arial" font-size="28" font-weight="700" fill="#0f172a">Tembro crop</text></svg>`
+      )
+
+    return <ImageCropper src={cropperImage} aspect={16 / 9} defaultZoom={1.15} defaultRotation={-2} />
+  }
 
   if (item.slug === "kanban") {
     return (

package/packages/cli/vendor/src/showcase/index.ts

@@ -44,12 +44,12 @@ export const showcaseDemoRegistry = {
   ...overlayShowcaseDemoRegistry,
   ...patternsShowcaseDemoRegistry,
   ...uploadShowcaseDemoRegistry,
-  ...wizardShowcaseDemoRegistry,
-  ...registrySpecificDemoRegistry,
-  ...supplementalShowcaseDemoRegistry,
-  ...premiumShowcaseDemoRegistry,
-  ...registryQualityDemoRegistry,
-}
+  ...wizardShowcaseDemoRegistry,
+  ...registrySpecificDemoRegistry,
+  ...supplementalShowcaseDemoRegistry,
+  ...registryQualityDemoRegistry,
+  ...premiumShowcaseDemoRegistry,
+}
 
 export { defaultComponentDemoState }
 export const componentDemoRegistry = showcaseDemoRegistry

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.5"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 13, 2026"
-export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
+export const PACKAGE_LATEST_VERSION = "3.1.7"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
+export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

package/packages/cli/vendor/src/showcase/premium/app-sidebar/mock.ts

@@ -1,7 +1,8 @@
 import type { ComponentDemoMock } from "../types"
 
 export const appSidebarMock: ComponentDemoMock = {
-  code: `import { Sidebar } from "tembro"
+  code: `import { Link } from "react-router-dom"
+import { Sidebar } from "tembro"
 
 const items = [
   { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
@@ -29,7 +30,7 @@ export function Example() {
       showSectionLabels
       responsive
       renderLink={({ item: _item, href = "/", ...props }) => (
-        <a {...props} href={href} />
+        <Link {...props} to={href} />
       )}
       header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
       footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}

package/packages/cli/vendor/src/showcase/premium/app-sidebar/showcase.tsx

@@ -56,7 +56,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
             <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Navigation shell</p>
             <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Sidebar should feel install-ready on its own</h3>
             <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.
+              This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states, section labels, active indicators and collapsed behavior.
             </p>
           </div>
           <div className="flex flex-wrap gap-2">

package/packages/cli/vendor/src/showcase/premium/async-select/showcase.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { AsyncSelect, Badge, type AsyncSelectOption } from "@/index"
+import { AsyncSelect, Badge, Button, type AsyncSelectOption } from "@/index"
 import { routeWorkspaceOptions } from "@/showcase/component-route-data"
 
 const workspaceOptions: AsyncSelectOption[] = routeWorkspaceOptions
@@ -11,10 +11,33 @@ const panelClass =
 const loadOptions = async (query: string): Promise<typeof workspaceOptions> => {
   await new Promise((resolve) => setTimeout(resolve, 260))
   const normalized = query.trim().toLowerCase()
+  if (normalized === "error") {
+    throw new Error("Unable to load regions")
+  }
   if (!normalized) return workspaceOptions
   return workspaceOptions.filter((item) => String(item.label ?? "").toLowerCase().includes(normalized))
 }
 
+const loadSelectedOption = async (selectedValue: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  return workspaceOptions.find((item) => item.value === selectedValue) ?? null
+}
+
+const loadSelectedOptions = async (selectedValues: string[]) => {
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  return workspaceOptions.filter((item) => selectedValues.includes(String(item.value)))
+}
+
+const createWorkspaceOption = async (search: string): Promise<AsyncSelectOption> => {
+  await new Promise((resolve) => setTimeout(resolve, 180))
+  const value = search.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")
+  return {
+    value: value || "custom-region",
+    label: search.trim(),
+    description: "Created from the current search query",
+  }
+}
+
 export function AsyncSelectShowcase() {
   const [value, setValue] = useState("")
   const [teamValues, setTeamValues] = useState<string[]>(["north", "west"])
@@ -48,14 +71,18 @@ export function AsyncSelectShowcase() {
                 value={value}
                 onValueChange={(nextValue) => setValue(nextValue ?? "")}
                 loadOptions={loadOptions}
+                loadSelectedOption={loadSelectedOption}
                 defaultOptions={workspaceOptions}
                 minSearchLength={1}
                 clearable
                 showSelectedDescription
                 debounceMs={220}
+                onCreateOption={createWorkspaceOption}
+                createOptionLabel={(search) => `Create region "${search.trim()}"`}
                 labels={{
                   placeholder: "Choose service region",
                   searchPlaceholder: "Search regions...",
+                  error: "Could not load regions. Try another query.",
                 }}
               />
             </div>
@@ -67,6 +94,7 @@ export function AsyncSelectShowcase() {
                   value={teamValues}
                   onValueChange={(nextValue) => setTeamValues(nextValue)}
                   loadOptions={loadOptions}
+                  loadSelectedOptions={loadSelectedOptions}
                   defaultOptions={workspaceOptions}
                   minSearchLength={1}
                   clearable
@@ -75,27 +103,45 @@ export function AsyncSelectShowcase() {
                   maxVisibleTags={2}
                   showSelectedDescription
                   debounceMs={220}
+                  onCreateOption={createWorkspaceOption}
+                  createOptionLabel={(search) => `Create team "${search.trim()}"`}
                   labels={{
                     multiPlaceholder: "Choose team coverage",
                     searchPlaceholder: "Search team regions...",
+                    error: "Could not load teams. Try another query.",
                     selectedCount: (count) => `${count} regions selected`,
                     hiddenSelected: (count) => `+${count} more`,
+                    maxSelected: (count) => `Maximum ${count} regions`,
                   }}
                 />
               </div>
             </div>
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Button size="sm" variant="secondary" onClick={() => setValue("south")}>
+                Hydrate South
+              </Button>
+              <Button size="sm" variant="secondary" onClick={() => setTeamValues(["north", "west", "central"])}>
+                Fill max selected
+              </Button>
+              <Button size="sm" variant="outline" onClick={() => {
+                setValue("")
+                setTeamValues([])
+              }}>
+                Clear all
+              </Button>
+            </div>
             <div className="mt-4 grid gap-3 md:grid-cols-3">
               <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
                 <p className="font-medium aui-text-strong">Type to query</p>
-                <p className="mt-2 leading-6 aui-text-muted">Minimum search length keeps remote requests intentional.</p>
+                <p className="mt-2 leading-6 aui-text-muted">Minimum search length keeps remote requests intentional. Type error to test failure state.</p>
               </div>
               <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
                 <p className="font-medium aui-text-strong">Clear safely</p>
                 <p className="mt-2 leading-6 aui-text-muted">Clear action is isolated from the trigger surface.</p>
               </div>
               <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
-                <p className="font-medium aui-text-strong">Hydrate selection</p>
-                <p className="mt-2 leading-6 aui-text-muted">Selected value can be restored from ID-first edit state.</p>
+                <p className="font-medium aui-text-strong">Create and hydrate</p>
+                <p className="mt-2 leading-6 aui-text-muted">Create missing options and restore selected labels from ID-first edit state.</p>
               </div>
             </div>
           </div>

package/packages/cli/vendor/src/showcase/premium/avatar/showcase.tsx

@@ -41,11 +41,11 @@ export function AvatarShowcase() {
           <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
             <p className="text-sm font-semibold aui-text-strong">Size and shape</p>
             <div className="mt-4 flex flex-wrap items-center gap-3">
-              <Avatar name="AZ" size="xs" />
-              <Avatar name="AZ" size="sm" shape="rounded" />
-              <Avatar name="AZ" size="default" />
-              <Avatar name="AZ" size="lg" shape="square" />
-              <Avatar name="AZ" size="xl" shape="rounded" />
+              <Avatar name="TM" size="xs" />
+              <Avatar name="TM" size="sm" shape="rounded" />
+              <Avatar name="TM" size="default" />
+              <Avatar name="TM" size="lg" shape="square" />
+              <Avatar name="TM" size="xl" shape="rounded" />
             </div>
           </div>
         </div>

package/packages/cli/vendor/src/showcase/premium/dialog/mock.ts

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const dialogMock: ComponentDemoMock = {
   code: `import * as React from "react"
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
+import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
 
 export function Example() {
   const [open, setOpen] = React.useState(false)
@@ -17,6 +17,11 @@ export function Example() {
             Confirm that these notes are final before moving to production.
           </DialogDescription>
         </DialogHeader>
+        <DialogBody>
+          <p className="text-sm text-muted-foreground">
+            The body scrolls independently when content is long, while the footer stays usable.
+          </p>
+        </DialogBody>
         <DialogFooter>
           <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
           <Button>Publish</Button>

package/packages/cli/vendor/src/showcase/premium/dialog/showcase.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/index"
+import { Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/index"
 
 import { dialogDemoItems } from "./data"
 
@@ -34,6 +34,11 @@ export function DialogShowcase() {
                       <DialogTitle>{item.title}</DialogTitle>
                       <DialogDescription>{item.description}</DialogDescription>
                     </DialogHeader>
+                    <DialogBody>
+                      <div className="rounded-[16px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 aui-text-muted">
+                        This body area scrolls independently when content becomes long. Footer actions stay visible and aligned.
+                      </div>
+                    </DialogBody>
                     <DialogFooter showCloseButton>
                       <Button variant={item.confirmVariant}>{item.confirmLabel}</Button>
                     </DialogFooter>
@@ -45,6 +50,53 @@ export function DialogShowcase() {
         </div>
       </section>
 
+      <section className={panelClass}>
+        <div className="grid gap-4 xl:grid-cols-2">
+          <Dialog>
+            <DialogTrigger render={<Button variant="outline" />}>Open form dialog</DialogTrigger>
+            <DialogContent size="lg">
+              <DialogHeader>
+                <DialogTitle>Create staff member</DialogTitle>
+                <DialogDescription>Use focused form dialogs for short admin tasks with stable footer actions.</DialogDescription>
+              </DialogHeader>
+              <DialogBody>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  {["Full name", "Phone", "Role", "Status", "Branch", "Temporary password"].map((label) => (
+                    <label key={label} className="grid gap-2 text-sm font-medium aui-text-strong">
+                      {label}
+                      <input className="h-10 rounded-xl border border-[color:var(--aui-input-border)] bg-[color:var(--aui-input-bg)] px-3 text-sm outline-none focus-visible:border-[color:var(--aui-ring)]" placeholder={label} />
+                    </label>
+                  ))}
+                </div>
+              </DialogBody>
+              <DialogFooter>
+                <Button variant="outline">Cancel</Button>
+                <Button>Create staff</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          <Dialog>
+            <DialogTrigger render={<Button variant="destructive" />}>Open destructive dialog</DialogTrigger>
+            <DialogContent size="sm">
+              <DialogHeader>
+                <DialogTitle>Deactivate restaurant</DialogTitle>
+                <DialogDescription>This action pauses public ordering and hides active shifts from the restaurant.</DialogDescription>
+              </DialogHeader>
+              <DialogBody>
+                <div className="rounded-[16px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-700">
+                  Operators can reactivate it later, but active customer sessions will be interrupted.
+                </div>
+              </DialogBody>
+              <DialogFooter>
+                <Button variant="outline">Keep active</Button>
+                <Button variant="destructive">Deactivate</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
       <section className={panelClass}>
         <div className="grid gap-3">
           {[

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

@@ -15,7 +15,7 @@ type DemoValues = {
 export function Example() {
   const form = useForm<DemoValues>({
     defaultValues: {
-      name: "Azamat UI",
+      name: "Tembro",
       ownerPhone: "+998 90 123 45 67",
       price: 120,
       notes: "Use control, name, rules, error, and required labels.",
@@ -75,7 +75,7 @@ export function Example() {
     </form>
   )`
 ,
-  htmlCode: '<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>',
+  htmlCode: '<form><label for="workspace">Workspace</label><input id="workspace" value="Tembro" /></form>',
   cliCommand: "npx tembro add form-input form-textarea form-switch",
   highlights: ["control + name contract", "Universal `kind` variants", "Error display and required markers", "Consistent wrapper shell behavior"],
   relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],

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

@@ -52,7 +52,7 @@ function loadSelectedWorkspace(value: string) {
 export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
   const form = useForm<DemoValues>({
     defaultValues: {
-      name: "Azamat UI",
+      name: "Tembro",
       ownerPhone: "+998 90 123 45 67",
       budget: 120,
       notes: "RHF wrapper coverage for control, name, and validation.",

package/packages/cli/vendor/src/showcase/premium/index.ts

@@ -79,7 +79,8 @@ import { tooltipMock, TooltipShowcase } from "./tooltip"
 import { fileUploadMock, FileUploadShowcase } from "./file-upload"
 import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
 import { ratingMock, RatingShowcase } from "./rating"
-import { virtualListMock, VirtualListShowcase } from "./virtual-list"
+import { virtualListMock, VirtualListShowcase } from "./virtual-list"
+import { wizardMock, WizardShowcase } from "./wizard"
 
 export { defaultComponentDemoState } from "./types"
 export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, ComponentDemoState } from "./types"
@@ -174,5 +175,6 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
   timeline: { mock: timelineMock, Showcase: TimelineShowcase },
   toast: { mock: toastMock, Showcase: ToastShowcase },
-  "virtual-list": { mock: virtualListMock, Showcase: VirtualListShowcase },
-}
+  "virtual-list": { mock: virtualListMock, Showcase: VirtualListShowcase },
+  wizard: { mock: wizardMock, Showcase: WizardShowcase },
+}

package/packages/cli/vendor/src/showcase/premium/input/showcase.tsx

@@ -22,7 +22,7 @@ export function InputShowcase({ state, setState }: ComponentDemoProps) {
   const [quantityValue, setQuantityValue] = React.useState<number | null>(3)
   const [phoneValue, setPhoneValue] = React.useState("+998 90 123 45 67")
   const [dateValue, setDateValue] = React.useState("2026-07-13")
-  const [clearableValue, setClearableValue] = React.useState("Azamat UI")
+  const [clearableValue, setClearableValue] = React.useState("Tembro")
 
   return (
     <div className="space-y-0">