tembro 3.0.0 → 3.1.5

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

@@ -1,115 +1,158 @@
 import * as React from "react"
-import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, SettingsIcon } from "lucide-react"
-
-import { AppSidebar, Badge, Button } from "@/index"
-import { cn } from "@/lib/utils"
-
-import type { ComponentDemoProps } from "../types"
-
-const navItems = [
-  { key: "overview", label: "Overview", href: "/overview", icon: <HomeIcon className="size-4" /> },
-  { key: "projects", label: "Projects", href: "/projects", icon: <FolderIcon className="size-4" />, badge: "8" },
-  { key: "reports", label: "Reports", href: "/reports", icon: <BarChart3Icon className="size-4" /> },
-  { key: "billing", label: "Billing", href: "/billing", icon: <CreditCardIcon className="size-4" />, badge: "2" },
-  { key: "settings", label: "Settings", href: "/settings", icon: <SettingsIcon className="size-4" />, disabled: true },
-]
-
-const panelClass = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
+import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, LifeBuoyIcon, SettingsIcon, UsersIcon } from "lucide-react"
+
+import { Badge, Button, Sidebar } from "@/index"
+import { cn } from "@/lib/utils"
+
+import type { ComponentDemoProps } from "../types"
+
+const navItems = [
+  { key: "overview", label: "Overview", href: "/overview", icon: <HomeIcon className="size-4" />, sectionLabel: "Core" },
+  {
+    key: "projects",
+    label: "Projects",
+    icon: <FolderIcon className="size-4" />,
+    badge: "8",
+    defaultExpanded: true,
+    items: [
+      { key: "active-projects", label: "Active projects", href: "/components/app-sidebar?view=active" },
+      { key: "archived-projects", label: "Archived", href: "/components/app-sidebar?view=archived", badge: "3" },
+    ],
+  },
+  { key: "reports", label: "Reports", href: "/reports", icon: <BarChart3Icon className="size-4" />, sectionLabel: "Insights" },
+  { key: "billing", label: "Billing", href: "/billing", icon: <CreditCardIcon className="size-4" />, badge: "2" },
+  { key: "settings", label: "Settings", href: "/settings", icon: <SettingsIcon className="size-4" />, disabled: true },
+]
+
+const panelClass = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
   const [activeKey, setActiveKey] = React.useState("overview")
   const [collapsed, setCollapsed] = React.useState(mode === "playground")
   const [previewSurface, setPreviewSurface] = React.useState<"desktop" | "mobile">("desktop")
-
-  const items = React.useMemo(
-    () =>
-      navItems.map((item) => ({
-        ...item,
-        active: item.key === activeKey,
-        onSelect: () => setActiveKey(item.key),
-      })),
-    [activeKey],
-  )
-
-  const activeItem = navItems.find((item) => item.key === activeKey)
-  const mobilePreview = previewSurface === "mobile"
-
-  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">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.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Header slot</Badge>
-            <Badge variant="outline" className="rounded-full">Badges</Badge>
-            <Badge variant="outline" className="rounded-full">Mobile drawer</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-3">
-          <Button size="sm" variant={collapsed ? "outline" : "default"} onClick={() => setCollapsed((value) => !value)}>
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => setActiveKey("reports")}>
-            Jump to reports
-          </Button>
-          <Button size="sm" variant={mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("mobile")}>
-            Mobile drawer
-          </Button>
-          <Button size="sm" variant={!mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("desktop")}>
-            Desktop rail
-          </Button>
-        </div>
-      ) : null}
-
-      <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
-        <section className={cn(panelClass, mobilePreview && "mx-auto w-full max-w-[420px]")}>
-          <AppSidebar
+  const [showSections, setShowSections] = React.useState(true)
+  const [itemSize, setItemSize] = React.useState<"sm" | "md" | "lg">("md")
+  const [activeIndicator, setActiveIndicator] = React.useState<"bar" | "pill" | "none">("bar")
+  const [accountClicks, setAccountClicks] = React.useState(0)
+
+  const items = React.useMemo(
+    () =>
+      navItems.map((item) => ({
+        ...item,
+        active: item.key === activeKey,
+        onSelect: () => setActiveKey(item.key),
+      })),
+    [activeKey],
+  )
+
+  const activeItem = navItems.find((item) => item.key === activeKey)
+  const mobilePreview = previewSurface === "mobile"
+
+  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">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.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Header slot</Badge>
+            <Badge variant="outline" className="rounded-full">Badges</Badge>
+            <Badge variant="outline" className="rounded-full">Mobile drawer</Badge>
+          </div>
+        </div>
+      </section>
+
+      {mode === "playground" ? (
+        <div className="flex flex-wrap gap-3">
+          <Button size="sm" variant={collapsed ? "outline" : "default"} onClick={() => setCollapsed((value) => !value)}>
+            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          </Button>
+          <Button size="sm" variant="outline" onClick={() => setActiveKey("reports")}>
+            Jump to reports
+          </Button>
+          <Button size="sm" variant={mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("mobile")}>
+            Mobile drawer
+          </Button>
+          <Button size="sm" variant={!mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("desktop")}>
+            Desktop rail
+          </Button>
+        </div>
+      ) : null}
+
+      <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
+        <section className={cn(panelClass, mobilePreview && "mx-auto w-full max-w-[420px]")}>
+          <Sidebar
             collapsed={collapsed}
             items={items}
+            showSectionLabels={showSections}
+            itemSize={itemSize}
+            activeIndicator={activeIndicator}
+            renderLink={({ item: _item, href = "/components/app-sidebar", ...linkProps }) => (
+              <a {...linkProps} href={href} />
+            )}
+            secondaryActions={[
+              { key: "support", label: "Support", icon: <LifeBuoyIcon className="size-4" />, onSelect: () => setActiveKey("reports") },
+            ]}
+            railItems={[{ key: "members", label: "Members", icon: <UsersIcon className="size-4" />, onSelect: () => setActiveKey("projects") }]}
+            footerAccount={{
+              label: "Azamat Workspace",
+              description: accountClicks ? `Account opened ${accountClicks}x` : "Starter plan",
+              avatar: "AW",
+              onSelect: () => setAccountClicks((value) => value + 1),
+            }}
             responsive
-            mobileBreakpoint={mobilePreview ? 10000 : 0}
-            mobileTitle="Workspace navigation"
-            mobileDescription="Open routes, check badges, and move between sections from one compact drawer."
-            mobileToggleLabel="Open workspace menu"
-            header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-            footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
-            footerClassName="bg-[color:var(--aui-page-bg-alt)]/55"
-            className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
-          />
-        </section>
-
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current route</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{activeItem?.label ?? "Overview"}</p>
-          <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-            Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.
-          </p>
-
+            mobileBreakpoint={mobilePreview ? 10000 : 0}
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open routes, check badges, and move between sections from one compact drawer."
+            mobileToggleLabel="Open workspace menu"
+            header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
+            footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
+            footerClassName="bg-[color:var(--aui-page-bg-alt)]/55"
+            className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
+          />
+        </section>
+
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Current route</p>
+          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{activeItem?.label ?? "Overview"}</p>
+          <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+            Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.
+          </p>
+
           <div className="mt-6 grid gap-3 sm:grid-cols-3">
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Shell</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{mobilePreview ? "Mobile drawer" : (collapsed ? "Collapsed" : "Expanded")}</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Visible items</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{items.length}</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Disabled</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">1 route</p>
-            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Shell</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{mobilePreview ? "Mobile drawer" : (collapsed ? "Collapsed" : "Expanded")}</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Visible items</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{items.length}</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Disabled</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">1 route</p>
+            </div>
           </div>
+          {mode === "playground" ? (
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Button size="sm" variant={showSections ? "default" : "outline"} onClick={() => setShowSections((value) => !value)}>
+                {showSections ? "Hide section labels" : "Show section labels"}
+              </Button>
+              <Button size="sm" variant={itemSize === "sm" ? "default" : "outline"} onClick={() => setItemSize("sm")}>Compact</Button>
+              <Button size="sm" variant={itemSize === "md" ? "default" : "outline"} onClick={() => setItemSize("md")}>Default</Button>
+              <Button size="sm" variant={itemSize === "lg" ? "default" : "outline"} onClick={() => setItemSize("lg")}>Comfortable</Button>
+              <Button size="sm" variant={activeIndicator === "bar" ? "default" : "outline"} onClick={() => setActiveIndicator("bar")}>Bar active</Button>
+              <Button size="sm" variant={activeIndicator === "pill" ? "default" : "outline"} onClick={() => setActiveIndicator("pill")}>Pill active</Button>
+              <Button size="sm" variant={activeIndicator === "none" ? "default" : "outline"} onClick={() => setActiveIndicator("none")}>Minimal active</Button>
+            </div>
+          ) : null}
         </section>
       </div>
     </div>
-  )
-}
+  )
+}

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

@@ -1,6 +1,7 @@
 import * as React from "react"
 
-import { Button, Carousel, CarouselItem } from "@/index"
+import { Button } from "@/index"
+import { Carousel, CarouselItem } from "@/components/display/carousel"
 import { cn } from "@/lib/utils"
 
 const steps = [

package/packages/cli/vendor/src/showcase/premium/color-picker/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/color-picker/mock.ts

@@ -0,0 +1,21 @@
+import type { ComponentDemoMock } from "../types"
+
+export const colorPickerMock: ComponentDemoMock = {
+  code: `import { ColorPicker } from "tembro"
+
+export function Example() {
+  return (
+    <ColorPicker
+      label="Brand color"
+      defaultValue="#2563ebcc"
+      showAlpha
+    />
+  )
+}`,
+  cliCommand: "npx tembro add color-picker",
+  highlights: ["Controlled HEX and alpha value", "Keyboard-editable input and accessible swatches"],
+  scenarios: [
+    { title: "Brand settings", description: "Choose and validate theme colors with reusable presets." },
+    { title: "Design tools", description: "Edit opaque or alpha-aware colors through one value contract." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/color-picker/showcase.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+import { ColorPicker } from "@/index"
+
+export function ColorPickerShowcase() {
+  const [color, setColor] = React.useState("#2563ebcc")
+
+  return (
+    <div className="mx-auto grid w-full max-w-sm gap-3">
+      <ColorPicker label="Brand color" value={color} onValueChange={setColor} showAlpha />
+      <code className="text-sm text-muted-foreground">{color}</code>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/data-table/mock.ts

@@ -1,32 +1,35 @@
 import type { ComponentDemoMock } from "../types"
 
-export const dataTableMock: ComponentDemoMock = {
-  code: `import { DataTable } from "tembro"
-
-export function Example() {
-  return (
-    <DataTable
-      columns={columns}
-      data={rows}
-      title="Customers"
-      description="Search, filter, select, and act on operational rows."
-      search={{ value: query, onValueChange: setQuery, placeholder: "Search rows..." }}
-      filters={<StatusFilter value={status} onValueChange={setStatus} />}
-      toolbarActions={<ExportButton rows={rows} />}
-      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}
-      rowSelection={rowSelection}
-      onRowSelectionChange={setRowSelection}
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}
-      density="comfortable"
-      striped
-      bordered
-      stickyHeader
-    />
-  )
-}`,
-  highlights: ["Toolbar actions", "Bulk actions", "Row click", "Visibility menu", "Density", "Preset-driven views", "Mobile strategy", "Pagination"],
+export const dataTableMock: ComponentDemoMock = {
+  code: `import { DataTable } from "tembro"
+
+export function Example() {
+  return (
+    <DataTable
+      columns={columns}
+      data={rows}
+      title="Customers"
+      description="Search, filter, select, and act on operational rows."
+      search={{ value: query, onValueChange: setQuery, placeholder: "Search rows..." }}
+      filters={<StatusFilter value={status} onValueChange={setStatus} />}
+      toolbarActions={<ExportButton rows={rows} />}
+      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}
+      density="comfortable"
+      striped
+      bordered
+      stickyHeader
+      virtualization={{ height: 480, estimateRowHeight: 52 }}
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+    />
+  )
+}`,
+  highlights: ["Toolbar actions", "Bulk actions", "Row click", "Visibility menu", "Density", "Virtualized rows", "Preset-driven views", "Mobile strategy", "Pagination"],
   scenarios: [
     { title: "Finance operations", description: "Filter, sort and paginate transactional rows with export-ready actions." },
     { title: "Mobile fallback", description: "Collapse rows into cards while preserving click and selection behaviors." },
@@ -35,4 +38,3 @@ export function Example() {
   ],
 }
 
-

package/packages/cli/vendor/src/showcase/premium/data-table/showcase.tsx

@@ -5,11 +5,11 @@ import {
   Badge,
   Button,
   DataTable,
-  DataTableColumnVisibilityMenu,
-  DataTableSortableHeader,
   Select,
 } from "@/index"
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
+import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
+import { DataTableSortableHeader } from "@/components/data-table/data-table-sortable-header"
 import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
 
 type DataTableDemoRow = {

package/packages/cli/vendor/src/showcase/premium/file-upload/mock.ts

@@ -6,6 +6,7 @@ import { FileUpload } from "tembro"
 
 export function Example() {
   const [files, setFiles] = useState<File[]>([])
+  const [progress, setProgress] = useState<Record<string, number>>({})
 
   return (
     <FileUpload
@@ -14,7 +15,11 @@ export function Example() {
       accept=".pdf,.docx,.png"
       maxFiles={4}
       maxSize={4 * 1024 * 1024}
+      progress={progress}
+      status={files.length ? "uploading" : "idle"}
       helperText="Supports PDF, DOCX and PNG up to 4 MB."
+      validateFile={(file) => file.name.includes("private") ? "Private files are not allowed." : null}
+      onRetryFile={(file) => setProgress((value) => ({ ...value, [file.name]: 0 }))}
     />
   )
 }`,
@@ -23,7 +28,8 @@ export function Example() {
     "Reusable dropzone and file list",
     "Rejected state support",
     "Nested clear/remove interactions",
-    "Controlled file array API",
+    "Controlled files, progress and status API",
+    "Custom validation and rejection messages",
   ],
   scenarios: [
     { title: "Admin attachments", description: "Upload contracts, invoices and internal release assets." },

package/packages/cli/vendor/src/showcase/premium/file-upload/showcase.tsx

@@ -1,10 +1,24 @@
 import * as React from "react"
 
-import { Badge, FileUpload } from "@/index"
+import { Badge, Button, FileUpload } from "@/index"
 
 export function FileUploadShowcase() {
   const [files, setFiles] = React.useState<File[]>([])
   const [status, setStatus] = React.useState<Record<string, "idle" | "uploading" | "success" | "error">>({})
+  const [progress, setProgress] = React.useState<Record<string, number>>({})
+
+  const loadSamples = () => {
+    const now = Date.now()
+    const samples = [
+      new File(["release notes"], "release-notes.pdf", { type: "application/pdf", lastModified: now }),
+      new File(["contract draft"], "contract.docx", { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", lastModified: now + 1 }),
+      new File(["preview image"], "preview.png", { type: "image/png", lastModified: now + 2 }),
+    ]
+    const keys = samples.map((file) => `${file.name}-${file.size}-${file.lastModified}`)
+    setFiles(samples)
+    setStatus({ [keys[0]]: "uploading", [keys[1]]: "error", [keys[2]]: "success" })
+    setProgress({ [keys[0]]: 46, [keys[1]]: 72, [keys[2]]: 100 })
+  }
 
   React.useEffect(() => {
     setStatus((current) => {
@@ -31,6 +45,15 @@ export function FileUploadShowcase() {
         </p>
       </div>
 
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" onClick={loadSamples}>Load sample files</Button>
+        <Button size="sm" variant="outline" disabled={files.length === 0} onClick={() => {
+          setFiles([])
+          setStatus({})
+          setProgress({})
+        }}>Clear demo</Button>
+      </div>
+
       <FileUpload
         files={files}
         onFilesChange={setFiles}
@@ -38,14 +61,22 @@ export function FileUploadShowcase() {
         accept=".pdf,.docx,.png"
         maxFiles={4}
         maxSize={4 * 1024 * 1024}
+        progress={progress}
         dropzoneLabel="Upload release assets"
         dropzoneDescription="Drag files here or choose from your device."
-        helperText="Supports PDF, DOCX and PNG up to 4 MB."
+        helperText="Supports PDF, DOCX and PNG up to 4 MB. Filenames containing private are rejected."
+        validateFile={(file) => file.name.toLowerCase().includes("private") ? "Private files cannot be uploaded here." : null}
+        rejectionMessages={{
+          "max-files": ({ maxFiles }) => `Only ${maxFiles} release assets are allowed.`,
+          "max-size": "This asset exceeds the 4 MB release limit.",
+        }}
         onRetryFile={(file) => {
           const key = `${file.name}-${file.size}-${file.lastModified}`
           setStatus((current) => ({ ...current, [key]: "uploading" }))
+          setProgress((current) => ({ ...current, [key]: 35 }))
           window.setTimeout(() => {
             setStatus((current) => ({ ...current, [key]: "success" }))
+            setProgress((current) => ({ ...current, [key]: 100 }))
           }, 900)
         }}
       />

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

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