tembro 3.0.0 → 3.1.5

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

@@ -1,7 +1,6 @@
 import {
-  Accordion,
-  Alert,
-  Avatar,
+  Alert,
+  Avatar,
   AvatarGroup,
   Badge,
   Button,
@@ -9,43 +8,24 @@ import {
   CalendarScheduler,
   Card,
   CardContent,
-  Carousel,
-  CarouselItem,
-  CodeBlock,
-  CopyButton,
-  CopyField,
+  CodeBlock,
+  CopyButton,
   DataState,
-  Descriptions,
-  Divider,
-  DualListPicker,
-  FilterBar,
-  Heading,
+  Divider,
+  DualListPicker,
+  FilterBar,
   Input,
   JsonInput,
   KanbanBoard,
-  List,
-  Mark,
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarTrigger,
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  OtpInput,
-  PageState,
-  PageTabs,
-  PropertyGrid,
-  QuickActionGrid,
-  QRCode,
-  RangeSlider,
+  List,
+  OtpInput,
+  PageState,
+  QuickActionGrid,
+  RangeSlider,
   Rating,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-  RichTextEditor,
   SavedFilterSelect,
   Section,
   SegmentedControl,
@@ -53,23 +33,19 @@ import {
   SkeletonCard,
   SkeletonText,
   Slider,
-  Spinner,
-  StepperTabs,
-  Statistic,
+  Spinner,
+  Statistic,
   StatisticCard,
   StatisticGrid,
-  StickyFooterBar,
-  StatusLegend,
-  Tag,
+  StatusLegend,
   TagInput,
-  TagGroup,
-  Text,
   TimePicker,
   TimeRangePicker,
-  Tour,
   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"
 
@@ -167,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">
@@ -246,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
@@ -267,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">
@@ -353,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>
@@ -382,19 +312,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "tour") {
-    return (
-      <Tour
-        index={1}
-        steps={[
-          { title: "Workspace setup", description: "Initialize theme tokens first." },
-          { title: "Component add", description: "Copy only the component you need." },
-          { title: "Detail route", description: "Open docs, API and preview together." },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "tree-view") {
     return (
       <TreeView
@@ -443,8 +360,8 @@ function renderGenericPreviewSurface(
     return <OtpInput value={state.textValue.replace(/\D/g, "").slice(0, 6)} onValueChange={(value) => setState({ textValue: value })} />
   }
 
-  if (item.slug === "color-input") {
-    return <Input type="color" defaultValue="#22c55e" aria-label="Accent color" />
+  if (item.slug === "color-input") {
+    return <Input type="color" defaultValue="#22c55e" aria-label="Accent color" />
   }
 
   if (item.slug === "tag-input") {
@@ -463,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" },
@@ -477,54 +393,27 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "data-table-saved-filters") {
-    return (
-      <div className="grid gap-3">
-        <FilterBar
-          chips={[
-            { key: "status", label: "Status", value: "Active", tone: "success" },
-            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
-            { key: "region", label: "Region", value: "APAC", tone: "info" },
-          ]}
-          onRemoveChip={() => undefined}
-          onReset={() => undefined}
-        />
-        <ButtonGroup
-          attached={false}
-          items={[
-            { key: "default", label: "Default", variant: "secondary" },
-            { key: "billing", label: "Billing" },
-            { key: "ops", label: "Operations" },
-          ]}
-        />
-      </div>
-    )
-  }
-
-  if (item.slug === "page-tabs") {
+  if (item.slug === "data-table-saved-filters") {
     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" },
-        ]}
-      />
+      <div className="grid gap-3">
+        <FilterBar
+          chips={[
+            { key: "status", label: "Status", value: "Active", tone: "success" },
+            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
+            { key: "region", label: "Region", value: "APAC", tone: "info" },
+          ]}
+          onRemoveChip={() => undefined}
+          onReset={() => undefined}
+        />
+        <ButtonGroup
+          attached={false}
+          items={[
+            { key: "default", label: "Default", variant: "secondary" },
+            { key: "billing", label: "Billing" },
+            { key: "ops", label: "Operations" },
+          ]}
+        />
+      </div>
     )
   }
 
@@ -543,7 +432,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "data-list" || item.slug === "list") {
+  if (item.slug === "list") {
     return (
       <List
         items={[
@@ -568,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={[
@@ -643,38 +518,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "menubar") {
-    return (
-      <Menubar>
-        <MenubarMenu>
-          <MenubarTrigger>File</MenubarTrigger>
-          <MenubarContent className="relative mt-2">
-            <MenubarItem>New page</MenubarItem>
-            <MenubarItem>Duplicate</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Edit</MenubarTrigger>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>View</MenubarTrigger>
-        </MenubarMenu>
-      </Menubar>
-    )
-  }
-
-  if (item.slug === "navigation-menu") {
-    return (
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem><NavigationMenuLink href="#" active>Overview</NavigationMenuLink></NavigationMenuItem>
-          <NavigationMenuItem><NavigationMenuLink href="#">Components</NavigationMenuLink></NavigationMenuItem>
-          <NavigationMenuItem><NavigationMenuLink href="#">Docs</NavigationMenuLink></NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-    )
-  }
-
   if (item.slug === "overlay") {
     return (
       <div className="grid gap-3 sm:grid-cols-3">
@@ -685,27 +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 === "qr-code") {
-    return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />
-  }
-
-  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>
@@ -722,10 +544,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "rich-text-editor") {
-    return <RichTextEditor value="<p><strong>Release note</strong> with product details.</p>" onValueChange={() => undefined} />
-  }
-
   if (item.slug === "saved-filter-select") {
     return (
       <SavedFilterSelect
@@ -768,57 +586,57 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.category === "Overlay") {
-    return (
-      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]">
-              Overlay surfaces should stay compact, focused, and secondary to the route behind them.
-            </p>
-          </div>
-          <Badge variant="outline">Overlay</Badge>
-        </div>
-
-        <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-          <div className="flex flex-wrap items-center justify-end gap-2">
-            <Button variant="ghost">Cancel</Button>
-            <Button variant="outline">Save draft</Button>
-            <Button>Confirm</Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (item.category === "Data Display") {
-    return (
-      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            <p className="text-lg font-semibold">{item.title}</p>
-            <p className="mt-1 text-sm text-muted-foreground">Display surfaces should prioritize readable values, compact metadata, and clear scanning order.</p>
-          </div>
-          <Badge variant="outline">{mode}</Badge>
-        </div>
-
-        <div className="grid gap-3 md:grid-cols-3">
-          {[
-            { label: "Primary value", value: "84.2k", note: "Strong first read" },
-            { label: "Supporting meta", value: "12 teams", note: "Context stays secondary" },
-            { label: "Status", value: "Live", note: "One concise badge or tone" },
-          ].map((entry) => (
-            <div key={entry.label} className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{entry.label}</p>
-              <p className="mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]">{entry.value}</p>
-              <p className="mt-1 text-sm text-muted-foreground">{entry.note}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
+  if (item.category === "Overlay") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]">
+              Overlay surfaces should stay compact, focused, and secondary to the route behind them.
+            </p>
+          </div>
+          <Badge variant="outline">Overlay</Badge>
+        </div>
+
+        <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <Button variant="ghost">Cancel</Button>
+            <Button variant="outline">Save draft</Button>
+            <Button>Confirm</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (item.category === "Data Display") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-lg font-semibold">{item.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">Display surfaces should prioritize readable values, compact metadata, and clear scanning order.</p>
+          </div>
+          <Badge variant="outline">{mode}</Badge>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-3">
+          {[
+            { label: "Primary value", value: "84.2k", note: "Strong first read" },
+            { label: "Supporting meta", value: "12 teams", note: "Context stays secondary" },
+            { label: "Status", value: "Live", note: "One concise badge or tone" },
+          ].map((entry) => (
+            <div key={entry.label} className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{entry.label}</p>
+              <p className="mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]">{entry.value}</p>
+              <p className="mt-1 text-sm text-muted-foreground">{entry.note}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
@@ -834,4 +652,3 @@ function renderGenericPreviewSurface(
     </div>
   )
 }
-

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

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "2.1.12"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 9, 2026"
+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}`
 

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

@@ -1,34 +1,54 @@
-import type { ComponentDemoMock } from "../types"
-
-export const appSidebarMock: ComponentDemoMock = {
-  code: `import { AppSidebar } from "@/components/layout/app-sidebar"
-
-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: "settings", label: "Settings", href: "/settings", disabled: true },
-]
-
-export function Example() {
-  return (
-    <AppSidebar
+import type { ComponentDemoMock } from "../types"
+
+export const appSidebarMock: ComponentDemoMock = {
+  code: `import { Sidebar } from "tembro"
+
+const items = [
+  { 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}
+      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>}
-      footer={<div className="px-3 py-2 text-xs text-muted-foreground">Starter plan</div>}
-    />
-  )
-}`,
-  highlights: ["Header and footer slots", "Active and disabled items", "Collapsed rail support", "Custom link rendering for routers"],
-  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." },
-    { title: "Collapsed desktop rail", description: "Keep icons visible when space is tight, but preserve labels in expanded mode." },
-  ],
-  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.",
+      footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}
+      secondaryActions={[{ key: "support", label: "Support", href: "/support" }]}
+      onItemSelect={(item) => console.log(item.key)}
+    />
+  )
+}`,
+  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." },
+    { title: "Collapsed desktop rail", description: "Keep icons visible when space is tight, but preserve labels in expanded mode." },
+  ],
+  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.",
-    "Prefer AppSidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.",
-  ],
-}
+    "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.",
+  ],
+}