tembro 2.1.13 → 3.1.1

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

@@ -1,7 +1,7 @@
 import {
-  Accordion,
-  Alert,
-  Avatar,
+  Accordion,
+  Alert,
+  Avatar,
   AvatarGroup,
   Badge,
   Button,
@@ -13,39 +13,28 @@ import {
   CarouselItem,
   CodeBlock,
   CopyButton,
-  CopyField,
-  DataState,
-  Descriptions,
-  Divider,
-  DualListPicker,
-  FilterBar,
+  CopyField,
+  DataState,
+  Descriptions,
+  Divider,
+  DualListPicker,
+  FilterBar,
   Heading,
   Input,
   JsonInput,
   KanbanBoard,
   List,
   Mark,
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarTrigger,
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
   OtpInput,
   PageState,
   PageTabs,
-  PropertyGrid,
-  QuickActionGrid,
-  QRCode,
-  RangeSlider,
+  PropertyGrid,
+  QuickActionGrid,
+  RangeSlider,
   Rating,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-  RichTextEditor,
   SavedFilterSelect,
   Section,
   SegmentedControl,
@@ -66,7 +55,6 @@ import {
   Text,
   TimePicker,
   TimeRangePicker,
-  Tour,
   TreeView,
 } from "@/index"
 import { StatCard } from "@/components/layout/stat-card"
@@ -382,19 +370,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 +418,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") {
@@ -477,31 +452,31 @@ 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 (
+      <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") {
     return (
       <PageTabs
         value="overview"
@@ -643,38 +618,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">
@@ -698,12 +641,8 @@ function renderGenericPreviewSurface(
     )
   }
 
-  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 === "quantity-stepper") {
+    return <Input kind="quantity" value={3} min={1} max={10} showControls aria-label="Quantity" />
   }
 
   if (item.slug === "resizable-panel") {
@@ -722,10 +661,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 +703,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 +769,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.0"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 10, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
 

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

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const appShellMock: ComponentDemoMock = {
-  code: `import { AppHeader, AppSidebar, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, SidebarNav, Button } from "tembro"
+  code: `import { AppHeader, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, Sidebar, SidebarNav, Button } from "tembro"
 
 const navItems = [
   { key: "overview", label: "Overview", href: "/overview", active: true },
@@ -21,12 +21,12 @@ export function Example() {
       sidebarWidth="default"
       mainClassName="p-4"
       sidebar={
-        <AppSidebar
+        <Sidebar
           header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
           footer={<div className="px-3 py-2 text-xs aui-text-muted">v1.2.0</div>}
         >
           <SidebarNav items={navItems} />
-        </AppSidebar>
+        </Sidebar>
       }
       header={<AppHeader left="Admin Console" right={<Button variant="outline">Open command</Button>} />}
       aside={<InfoCard title="Workspace" description="Metrics, alerts, and quick access cards." compact>Aside slot keeps secondary context near main content.</InfoCard>}
@@ -64,4 +64,3 @@ export function Example() {
     "Avoid overloading the aside region in mobile contexts; hide non-essential context when needed.",
   ],
 }
-

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

@@ -1,114 +1,114 @@
-import * as React from "react"
-
-import { Badge, Breadcrumbs, Button, InfoCard, MetricGrid, PageContainer, SidebarNav } from "@/index"
-import { AppHeader } from "@/components/layout/app-header"
-import { AppSidebar } from "@/components/layout/app-sidebar"
-import { PageHeader } from "@/components/layout/page-header"
-
-import type { ComponentDemoProps } from "../types"
-
-const navigationItems = [
-  { key: "overview", label: "Overview", href: "#overview" },
-  { key: "products", label: "Products", href: "#products" },
-  { key: "billing", label: "Billing", href: "#billing" },
-  { key: "settings", label: "Settings", href: "#settings" },
-]
-
-const metrics = [
-  { key: "mrr", label: "MRR", value: "$64k", description: "11% vs last week", tone: "success" as const },
-  { key: "users", label: "Users", value: "1,020", description: "3% churn risk", tone: "warning" as const },
-  { key: "tasks", label: "Tasks", value: "58", description: "5 in progress", tone: "info" as const },
-  { key: "response", label: "Latency", value: "1.2s", description: "P95 API response", tone: "default" as const },
-]
-
-export function AppShellShowcase({ mode }: ComponentDemoProps) {
-  const [active, setActive] = React.useState("overview")
-  const [collapsed, setCollapsed] = React.useState(false)
-
-  const navItems = navigationItems.map((item) => ({
-    ...item,
-    active: item.key === active,
-    onSelect: () => setActive(item.key),
-  }))
-
-  const activeLabel = navigationItems.find((item) => item.key === active)?.label ?? "Overview"
-
-  return (
-    <div className="space-y-5">
-      <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Application frame</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Reusable shell preview</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">
-              Header, sidebar, main content and aside should feel like one predictable route frame.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Header</Badge>
-            <Badge variant="outline" className="rounded-full">Sidebar</Badge>
-            <Badge variant="outline" className="rounded-full">Aside</Badge>
-          </div>
-        </div>
-      </div>
-
-      {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>
-        </div>
-      ) : null}
-
-      <div className="overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
-        <AppHeader
-          className="border-b border-[color:var(--aui-divider)] px-4 py-3"
-          left="Product shell"
-          right={<Button size="sm" variant="outline">Profile</Button>}
-        />
-
-        <div className="grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]">
-          <AppSidebar
-            responsive
-            mobileTitle="Workspace navigation"
-            mobileDescription="Open the shell menu first, then move through app routes without squeezing the main content."
-            header={<div className="px-3 py-2 text-sm font-semibold">AZA Studio</div>}
-            footer={<div className="aui-text-muted px-3 py-2 text-xs">Shell footer</div>}
-            className={collapsed ? "lg:w-[92px]" : ""}
-            collapsed={collapsed}
-          >
-            <SidebarNav items={navItems} />
-          </AppSidebar>
-
-          <div className="min-w-0 border-x border-[color:var(--aui-divider)] p-4">
-            <PageContainer size="lg">
-              <PageHeader
-                eyebrow="Workspace"
-                title={activeLabel}
-                description="Use shared shell primitives to keep regions stable across routes."
-                breadcrumbs={
-                  <Breadcrumbs
-                    items={[
-                      { key: "home", label: "Home", href: "/" },
-                      { key: "components", label: "Components", href: "/components" },
-                      { key: "active", label: activeLabel, current: true },
-                    ]}
-                  />
-                }
-                actions={<Button size="sm">Manage</Button>}
-              />
-
-              <div className="mt-4">
-                <MetricGrid items={metrics} columns={2} compact />
-              </div>
-            </PageContainer>
-          </div>
-
-          <aside className="hidden p-4 lg:block">
-            <InfoCard title="Quick actions" description="Support content can live in the aside." compact />
-          </aside>
-        </div>
-      </div>
-    </div>
-  )
-}
+import * as React from "react"
+
+import { Badge, Breadcrumbs, Button, InfoCard, MetricGrid, PageContainer, SidebarNav } from "@/index"
+import { AppHeader } from "@/components/layout/app-header"
+import { Sidebar } from "@/components/layout/app-sidebar"
+import { PageHeader } from "@/components/layout/page-header"
+
+import type { ComponentDemoProps } from "../types"
+
+const navigationItems = [
+  { key: "overview", label: "Overview", href: "#overview" },
+  { key: "products", label: "Products", href: "#products" },
+  { key: "billing", label: "Billing", href: "#billing" },
+  { key: "settings", label: "Settings", href: "#settings" },
+]
+
+const metrics = [
+  { key: "mrr", label: "MRR", value: "$64k", description: "11% vs last week", tone: "success" as const },
+  { key: "users", label: "Users", value: "1,020", description: "3% churn risk", tone: "warning" as const },
+  { key: "tasks", label: "Tasks", value: "58", description: "5 in progress", tone: "info" as const },
+  { key: "response", label: "Latency", value: "1.2s", description: "P95 API response", tone: "default" as const },
+]
+
+export function AppShellShowcase({ mode }: ComponentDemoProps) {
+  const [active, setActive] = React.useState("overview")
+  const [collapsed, setCollapsed] = React.useState(false)
+
+  const navItems = navigationItems.map((item) => ({
+    ...item,
+    active: item.key === active,
+    onSelect: () => setActive(item.key),
+  }))
+
+  const activeLabel = navigationItems.find((item) => item.key === active)?.label ?? "Overview"
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Application frame</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Reusable shell preview</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">
+              Header, sidebar, main content and aside should feel like one predictable route frame.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Header</Badge>
+            <Badge variant="outline" className="rounded-full">Sidebar</Badge>
+            <Badge variant="outline" className="rounded-full">Aside</Badge>
+          </div>
+        </div>
+      </div>
+
+      {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>
+        </div>
+      ) : null}
+
+      <div className="overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
+        <AppHeader
+          className="border-b border-[color:var(--aui-divider)] px-4 py-3"
+          left="Product shell"
+          right={<Button size="sm" variant="outline">Profile</Button>}
+        />
+
+        <div className="grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]">
+          <Sidebar
+            responsive
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open the shell menu first, then move through app routes without squeezing the main content."
+            header={<div className="px-3 py-2 text-sm font-semibold">AZA Studio</div>}
+            footer={<div className="aui-text-muted px-3 py-2 text-xs">Shell footer</div>}
+            className={collapsed ? "lg:w-[92px]" : ""}
+            collapsed={collapsed}
+          >
+            <SidebarNav items={navItems} />
+          </Sidebar>
+
+          <div className="min-w-0 border-x border-[color:var(--aui-divider)] p-4">
+            <PageContainer size="lg">
+              <PageHeader
+                eyebrow="Workspace"
+                title={activeLabel}
+                description="Use shared shell primitives to keep regions stable across routes."
+                breadcrumbs={
+                  <Breadcrumbs
+                    items={[
+                      { key: "home", label: "Home", href: "/" },
+                      { key: "components", label: "Components", href: "/components" },
+                      { key: "active", label: activeLabel, current: true },
+                    ]}
+                  />
+                }
+                actions={<Button size="sm">Manage</Button>}
+              />
+
+              <div className="mt-4">
+                <MetricGrid items={metrics} columns={2} compact />
+              </div>
+            </PageContainer>
+          </div>
+
+          <aside className="hidden p-4 lg:block">
+            <InfoCard title="Quick actions" description="Support content can live in the aside." compact />
+          </aside>
+        </div>
+      </div>
+    </div>
+  )
+}