tembro 3.1.1 → 3.1.6

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

@@ -10,17 +10,16 @@ export * from './components/ui/tabs'
 export * from './components/ui/dialog'
 export * from './components/ui/dropdown-menu'
 export * from './components/ui/popover'
-export * from './components/ui/select'
-export * from './components/ui/table'
-export * from './components/ui/collapse'
-export * from './components/ui/accordion'
+export * from './components/ui/select'
+export * from './components/ui/table'
+export * from './components/ui/accordion'
+export * from './components/ui/collapse'
 export * from './components/ui/skeleton'
 export * from './components/ui/divider'
 export * from './components/ui/segmented-control'
-export * from './components/ui/spinner'
-export * from './components/ui/tooltip'
-export * from './components/ui/hover-card'
-export * from './components/ui/kbd'
+export * from './components/ui/spinner'
+export * from './components/ui/tooltip'
+export * from './components/ui/kbd'
 export * from './components/ui/radio-group'
 export * from './components/ui/scroll-box'
 export * from './components/ui/right-click-menu'
@@ -41,8 +40,9 @@ export * from './components/notifications'
 export * from './components/command'
 export * from './components/calendar'
 export * from './components/upload'
-export * from './components/charts'
-export * from './components/wizard'
+export * from './components/charts'
+export * from './components/patterns/public'
+export * from './components/wizard'
 export * from './components/dnd'
 
 // Meta and helpers

package/packages/cli/vendor/src/public-component-surface.ts

@@ -23,25 +23,34 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "progress", registryName: "progress", surface: "documented" },
 ] as const
 
-export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
-  { slug: "accordion", registryName: "accordion", surface: "standalone" },
-  { slug: "divider", registryName: "divider", surface: "standalone" },
+export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
+  { slug: "accordion", registryName: "accordion", surface: "standalone" },
+  { slug: "divider", registryName: "divider", surface: "standalone" },
   { slug: "segmented-control", registryName: "segmented-control", surface: "standalone" },
   { slug: "skeleton", registryName: "skeleton", surface: "standalone" },
   { slug: "spinner", registryName: "spinner", surface: "standalone" },
-  { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
+  { slug: "command-palette", registryName: "command-palette", surface: "standalone" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
   { slug: "avatar", registryName: "avatar", surface: "standalone" },
   { slug: "code-block", registryName: "code-block", surface: "standalone" },
-  { slug: "data-state", registryName: "data-state", surface: "standalone" },
-  { slug: "kanban", registryName: "kanban", surface: "standalone" },
-  { slug: "list", registryName: "list", surface: "standalone" },
-  { slug: "property-grid", registryName: "property-grid", surface: "standalone" },
+  { slug: "data-state", registryName: "data-state", surface: "standalone" },
+  { slug: "kanban", registryName: "kanban", surface: "standalone" },
+  { slug: "list", registryName: "list", surface: "standalone" },
+  { slug: "description-list", registryName: "description-list", surface: "standalone" },
   { slug: "statistic", registryName: "statistic", surface: "standalone" },
   { slug: "tree-view", registryName: "tree-view", surface: "standalone" },
-  { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
-  { slug: "section", registryName: "section", surface: "standalone" },
-  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
+  { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
+  { slug: "section", registryName: "section", surface: "standalone" },
+  { slug: "form-builder", registryName: "form-builder", surface: "standalone" },
+  { slug: "empty-state", registryName: "empty-state", surface: "standalone" },
+  { slug: "page-toolbar", registryName: "page-toolbar", surface: "standalone" },
+  { slug: "bulk-action-bar", registryName: "bulk-action-bar", surface: "standalone" },
+  { slug: "detail-layout", registryName: "detail-layout", surface: "standalone" },
+  { slug: "settings-page", registryName: "settings-page", surface: "standalone" },
+  { slug: "data-view", registryName: "data-view", surface: "standalone" },
+  { slug: "resource-page", registryName: "resource-page", surface: "standalone" },
+  { slug: "resource-detail-page", registryName: "resource-detail-page", surface: "standalone" },
+  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
   { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "standalone" },
   { slug: "resizable-panel", registryName: "resizable-panel", surface: "standalone" },
   { slug: "tag", registryName: "tag", surface: "standalone" },
@@ -50,8 +59,13 @@ export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "json-input", registryName: "json-input", surface: "standalone" },
   { slug: "time-picker", registryName: "time-picker", surface: "standalone" },
   { slug: "sortable-list", registryName: "sortable-list", surface: "standalone" },
-  { slug: "virtual-list", registryName: "virtual-list", surface: "standalone" },
-] as const
+  { slug: "virtual-list", registryName: "virtual-list", surface: "standalone" },
+  { slug: "color-picker", registryName: "color-picker", surface: "standalone" },
+  { slug: "signature-pad", registryName: "signature-pad", surface: "standalone" },
+  { slug: "qr-code", registryName: "qr-code", surface: "standalone" },
+  { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "standalone" },
+  { slug: "image-cropper", registryName: "image-cropper", surface: "standalone" },
+] as const
 
 export const publicComponentSurfaceEntries = [
   ...documentedPublicComponentSurfaces,

package/packages/cli/vendor/src/showcase/demo-snippets/actions/index.ts

@@ -41,15 +41,15 @@ export function Demo() {
     />
   )
 }`,
-  "dialog-actions": `import { DialogActionButton, DialogActions } from "tembro"
+  "dialog-actions": `import { Button, ButtonGroup } from "tembro"
 
 export function Demo() {
   return (
-    <DialogActions align="end">
-      <DialogActionButton variant="ghost">Cancel</DialogActionButton>
-      <DialogActionButton variant="outline">Save draft</DialogActionButton>
-      <DialogActionButton>Publish</DialogActionButton>
-    </DialogActions>
+    <ButtonGroup attached={false}>
+      <Button variant="ghost">Cancel</Button>
+      <Button variant="outline">Save draft</Button>
+      <Button>Publish</Button>
+    </ButtonGroup>
   )
 }`,
   stepper: `import { Stepper } from "tembro"

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

@@ -1,5 +1,4 @@
 import {
-  Accordion,
   Alert,
   Avatar,
   AvatarGroup,
@@ -9,26 +8,18 @@ import {
   CalendarScheduler,
   Card,
   CardContent,
-  Carousel,
-  CarouselItem,
-  CodeBlock,
-  CopyButton,
-  CopyField,
-  DataState,
-  Descriptions,
+  CodeBlock,
+  CopyButton,
+  DataState,
   Divider,
   DualListPicker,
   FilterBar,
-  Heading,
   Input,
   JsonInput,
   KanbanBoard,
-  List,
-  Mark,
-  OtpInput,
-  PageState,
-  PageTabs,
-  PropertyGrid,
+  List,
+  OtpInput,
+  PageState,
   QuickActionGrid,
   RangeSlider,
   Rating,
@@ -42,22 +33,19 @@ import {
   SkeletonCard,
   SkeletonText,
   Slider,
-  Spinner,
-  StepperTabs,
-  Statistic,
+  Spinner,
+  Statistic,
   StatisticCard,
   StatisticGrid,
-  StickyFooterBar,
-  StatusLegend,
-  Tag,
+  StatusLegend,
   TagInput,
-  TagGroup,
-  Text,
   TimePicker,
   TimeRangePicker,
   TreeView,
-} from "@/index"
-import { StatCard } from "@/components/layout/stat-card"
+} from "@/index"
+import { Carousel, CarouselItem } from "@/components/display/carousel"
+import { Tag, TagGroup } from "@/components/display/tag"
+import { Heading, Mark, Text } from "@/components/display/typography"
 
 import type { ShowcaseDemoBundle, ShowcaseDemoProps } from "./types"
 
@@ -155,19 +143,6 @@ function renderGenericPreviewSurface(
   setState: ShowcaseDemoProps["setState"],
   mode: ShowcaseDemoProps["mode"]
 ) {
-  if (item.slug === "accordion") {
-    return (
-      <Accordion
-        type="single"
-        defaultValue="api"
-        items={[
-          { key: "api", title: "Single open section", description: "Open one section at a time.", content: "Use one expanded panel when the page needs compact disclosure." },
-          { key: "states", title: "State handling", description: "Controlled or uncontrolled usage.", content: "Use one expanded section for FAQs, settings clusters, and compact disclosure flows." },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "avatar") {
     return (
       <div className="flex flex-wrap items-center gap-4">
@@ -234,16 +209,6 @@ function renderGenericPreviewSurface(
     return <CopyButton value="npx tembro add button">Copy command</CopyButton>
   }
 
-  if (item.slug === "copy-field") {
-    return (
-      <CopyField
-        label="CLI command"
-        description="Quick source-copy command"
-        value="npx tembro add input"
-      />
-    )
-  }
-
   if (item.slug === "data-state") {
     return (
       <DataState
@@ -255,20 +220,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "descriptions") {
-    return (
-      <Descriptions
-        title="Workspace details"
-        columns={3}
-        items={[
-          { key: "owner", label: "Owner", value: "Azamat UI" },
-          { key: "plan", label: "Plan", value: "Scale" },
-          { key: "renewal", label: "Renewal", value: "Jul 14, 2026" },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "divider") {
     return (
       <div className="grid gap-3">
@@ -341,15 +292,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "sticky-footer-bar") {
-    return (
-      <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
-        <div className="p-4 text-sm text-muted-foreground">Scrollable page content</div>
-        <StickyFooterBar start={<div className="text-sm font-medium">2 unsaved changes</div>} end={<><Button size="sm" variant="outline">Discard</Button><Button size="sm">Save</Button></>} />
-      </div>
-    )
-  }
-
   if (item.slug === "tag") {
     return (
       <TagGroup>
@@ -438,12 +380,11 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "quick-action-grid" || item.slug === "command-bar") {
-    return (
-      <QuickActionGrid
-        columns={item.slug === "command-bar" ? 4 : 3}
-        compact={item.slug === "command-bar"}
-        items={[
+  if (item.slug === "quick-action-grid") {
+    return (
+      <QuickActionGrid
+        columns={3}
+        items={[
           { key: "new", label: "New invoice", description: "Create a fresh billing row.", badge: "N" },
           { key: "import", label: "Import CSV", description: "Bring finance data into the table.", badge: "I" },
           { key: "share", label: "Share workspace", description: "Invite team members to the route.", badge: "S" },
@@ -476,33 +417,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "page-tabs") {
-    return (
-      <PageTabs
-        value="overview"
-        variant="pills"
-        items={[
-          { value: "overview", label: "Overview" },
-          { value: "usage", label: "Usage" },
-          { value: "api", label: "API", badge: "3" },
-        ]}
-      />
-    )
-  }
-
-  if (item.slug === "stepper-tabs") {
-    return (
-      <StepperTabs
-        value="billing"
-        items={[
-          { value: "profile", label: "Profile", description: "Team and owner details", completed: true },
-          { value: "billing", label: "Billing", description: "Payment and invoices" },
-          { value: "review", label: "Review", description: "Confirm release" },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "alert") {
     return <Alert tone="warning" title="Review needed" description="Billing rules changed and one approval is pending." action={<Button size="sm">Open</Button>} />
   }
@@ -518,7 +432,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "data-list" || item.slug === "list") {
+  if (item.slug === "list") {
     return (
       <List
         items={[
@@ -543,21 +457,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "trend-card" || item.slug === "comparison-card") {
-    return <StatCard title={item.slug === "trend-card" ? "Weekly revenue" : "Current vs previous"} value="$84.2k" description="Compared with last month" trend={{ value: "+12.4%", tone: "success" }} />
-  }
-
-  if (item.slug === "delta-badge") {
-    return (
-      <div className="flex flex-wrap gap-2">
-        <Badge variant="secondary">+12.4%</Badge>
-        <Badge variant="outline">-3.1%</Badge>
-        <Badge variant="destructive">Risk</Badge>
-      </div>
-    )
-  }
-
-  if (item.slug === "notification-center") {
+  if (item.slug === "notification-center") {
     return (
       <List
         items={[
@@ -628,23 +528,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "property-grid") {
-    return (
-      <PropertyGrid
-        columns={3}
-        items={[
-          { key: "framework", label: "Framework", value: "Next.js", description: "App Router setup" },
-          { key: "theme", label: "Theme", value: "Light / Dark", description: "CSS tokens ready" },
-          { key: "mode", label: "Mode", value: "Source-copy", description: "Editable local files" },
-        ]}
-      />
-    )
-  }
-
-  if (item.slug === "quantity-stepper") {
-    return <Input kind="quantity" value={3} min={1} max={10} showControls aria-label="Quantity" />
-  }
-
   if (item.slug === "resizable-panel") {
     return (
       <ResizablePanelGroup>

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

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.0"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 10, 2026"
+export const PACKAGE_LATEST_VERSION = "3.1.6"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 13, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
 

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

@@ -1,25 +1,44 @@
 import type { ComponentDemoMock } from "../types"
 
 export const appSidebarMock: ComponentDemoMock = {
-  code: `import { Sidebar } from "@/components/layout/app-sidebar"
+  code: `import { Sidebar } from "tembro"
 
 const items = [
-  { key: "overview", label: "Overview", href: "/overview", active: true },
-  { key: "customers", label: "Customers", href: "/customers", badge: "12" },
-  { key: "billing", label: "Billing", href: "/billing" },
+  { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
+  {
+    key: "customers",
+    label: "Customers",
+    badge: "12",
+    defaultExpanded: true,
+    items: [
+      { key: "active", label: "Active", href: "/customers/active" },
+      { key: "archived", label: "Archived", href: "/customers/archived" },
+    ],
+  },
+  { key: "billing", label: "Billing", href: "/billing", sectionLabel: "Manage" },
   { key: "settings", label: "Settings", href: "/settings", disabled: true },
 ]
 
 export function Example() {
   return (
     <Sidebar
-      items={items}
-      header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-      footer={<div className="px-3 py-2 text-xs text-muted-foreground">Starter plan</div>}
+      items={items}
+      navigationLabel="Workspace navigation"
+      itemSize="md"
+      activeIndicator="bar"
+      showSectionLabels
+      responsive
+      renderLink={({ item: _item, href = "/", ...props }) => (
+        <a {...props} href={href} />
+      )}
+      header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
+      footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}
+      secondaryActions={[{ key: "support", label: "Support", href: "/support" }]}
+      onItemSelect={(item) => console.log(item.key)}
     />
   )
 }`,
-  highlights: ["Header and footer slots", "Active and disabled items", "Collapsed rail support", "Custom link rendering for routers"],
+  highlights: ["Nested and collapsible route groups", "Three density modes", "Bar, pill and minimal active indicators", "Responsive mobile navigation", "Custom link rendering"],
   scenarios: [
     { title: "Workspace shell", description: "Use one sidebar contract across dashboards, settings and dense internal tools." },
     { title: "Router integration", description: "Swap anchors with framework links through renderLink without rewriting item state." },
@@ -28,7 +47,8 @@ export function Example() {
   capabilityNotes: [
     "Keep one items array as the source of truth for label, badge, disabled and active route state.",
     "Use the header slot for workspace identity, not for unrelated page actions.",
-    "Collapsed mode works best when icons stay distinctive and current route is still obvious.",
+    "Collapsed mode works best when icons stay distinctive and current route is still obvious.",
+    "Use navigationLabel and the mobile labels when the product language is not English.",
     "Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.",
   ],
 }

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

@@ -1,5 +1,5 @@
-import * as React from "react"
-import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, SettingsIcon } from "lucide-react"
+import * as React from "react"
+import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, LifeBuoyIcon, SettingsIcon, UsersIcon } from "lucide-react"
 
 import { Badge, Button, Sidebar } from "@/index"
 import { cn } from "@/lib/utils"
@@ -7,9 +7,19 @@ 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: "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 },
 ]
@@ -17,9 +27,13 @@ const navItems = [
 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 [activeKey, setActiveKey] = React.useState("overview")
+  const [collapsed, setCollapsed] = React.useState(mode === "playground")
+  const [previewSurface, setPreviewSurface] = React.useState<"desktop" | "mobile">("desktop")
+  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(
     () =>
@@ -72,10 +86,26 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
 
       <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}
-            responsive
+          <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."
@@ -94,7 +124,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
             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="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>
@@ -107,9 +137,22 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
               <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>
-        </section>
-      </div>
-    </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/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." },