tembro 2.0.5 → 2.1.0

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

@@ -1,8 +1,7 @@
 import {
-  Accordion,
-  Alert,
-  AnchorNav,
-  Avatar,
+  Accordion,
+  Alert,
+  Avatar,
   AvatarGroup,
   Badge,
   Button,
@@ -504,21 +503,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "anchor-nav") {
-    return (
-      <AnchorNav
-        orientation="horizontal"
-        title="Sections"
-        items={[
-          { key: "overview", label: "Overview", href: "#overview", active: true },
-          { key: "usage", label: "Usage", href: "#usage" },
-          { key: "api", label: "API", href: "#api" },
-        ]}
-      />
-    )
-  }
-
-  if (item.slug === "page-tabs") {
+  if (item.slug === "page-tabs") {
     return (
       <PageTabs
         value="overview"

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

@@ -39,6 +39,7 @@ export function AlertShowcase({ mode }: ComponentDemoProps) {
           tone={tone}
           dismissible
           onDismiss={() => setVisible(false)}
+          actionsAlign={tone === "destructive" ? "start" : "end"}
           title={tone === "success" ? "Workspace synced" : tone === "destructive" ? "Action blocked" : tone === "info" ? "Heads up" : "Review needed"}
           description={
             tone === "success"

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

@@ -82,6 +82,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
             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>

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

@@ -6,9 +6,10 @@ import type { ComponentDemoProps } from "../types"
 import { badgeDemoItems } from "./data"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+type BadgeVariant = ComponentDemoProps["state"]["badgeVariant"]
 
 export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
-  const variants = ["default", "secondary", "destructive", "outline", "ghost", "link"] as const
+  const variants: BadgeVariant[] = ["default", "secondary", "soft", "destructive", "outline", "ghost", "link"]
   const activeItem = badgeDemoItems.find((item) => item.variant === state.badgeVariant) ?? badgeDemoItems[0]
   const [chipVisible, setChipVisible] = React.useState(true)
 
@@ -47,7 +48,7 @@ export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
                 key={variant}
                 type="button"
                 size="sm"
-                variant={state.badgeVariant === variant ? "default" : "secondary"}
+                variant={state.badgeVariant === variant ? ("default" as const) : ("secondary" as const)}
                 onClick={() => setState({ badgeVariant: variant })}
               >
                 {variant}
@@ -93,6 +94,7 @@ export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
 
               <div className="flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4">
                 <Badge variant="secondary" label="Customers" count={18} />
+                <Badge variant="soft" tone="info" label="Synced" dot />
                 <Badge status="warning" label="Pending approval" />
                 {chipVisible ? (
                   <Badge

package/packages/cli/vendor/src/showcase/premium/badge/types.ts

@@ -1,5 +1,5 @@
 export type BadgeDemoItem = {
   label: string
-  variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  variant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
   note: string
 }

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

@@ -8,6 +8,8 @@ const pages = [
   { key: "home", label: "Home", href: "/" },
   { key: "apps", label: "Apps", href: "/apps" },
   { key: "workspace", label: "Workspace", href: "/apps/workspace" },
+  { key: "team", label: "Team settings", href: "/apps/workspace/team" },
+  { key: "security", label: "Security", href: "/apps/workspace/team/security" },
   { key: "overview", label: "Overview", current: true },
 ]
 
@@ -52,7 +54,7 @@ export function BreadcrumbsShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3">
-        <Breadcrumbs items={selectedItems} separator={separator} />
+        <Breadcrumbs items={selectedItems} separator={separator} maxItems={activeMode === "full" ? 4 : undefined} />
       </div>
     </div>
   )

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

@@ -17,7 +17,7 @@ export function BasicExamples() {
 
       <div className="flex flex-wrap gap-3">
         <Button size="sm">Small</Button>
-        <Button size="icon" aria-label="Download">
+        <Button iconOnly aria-label="Download">
           <DownloadIcon className="size-4" />
         </Button>
         <Button>
@@ -36,9 +36,6 @@ export function BasicExamples() {
       </div>
 
       <div className="flex flex-wrap gap-3">
-        <Button asChild>
-          <a href="/docs">Open docs</a>
-        </Button>
         <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
           Link styled as button
         </a>
@@ -92,4 +89,4 @@ export function ControlledButton() {
     "Supports focus, disabled and loading states for safe async interactions.",
     "Use buttonVariants for non-button elements, but keep Button variant props for real button usage.",
   ],
-}
+}

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

@@ -31,7 +31,7 @@ function VariantRow({
       <div className="flex flex-wrap items-center gap-2">
         <Button variant={variant}>{label}</Button>
         <Button variant={variant} size="sm">Small</Button>
-        <Button variant={variant} size="icon" aria-label={`${label} icon button`}>
+        <Button variant={variant} iconOnly aria-label={`${label} icon button`}>
           <ArrowRightIcon className="size-4" />
         </Button>
       </div>
@@ -220,7 +220,7 @@ export function ButtonShowcase() {
               <Button loading loadingLabel="Publishing">
                 Publish
               </Button>
-              <Button variant="outline" size="icon" aria-label="Download">
+              <Button variant="outline" iconOnly aria-label="Download">
                 <DownloadIcon className="size-4" />
               </Button>
               <a href="#" className={buttonVariants({ variant: "link" })}>

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

@@ -1,4 +1,4 @@
-import { Badge, Card } from "@/index"
+import { Badge, Button, Card } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -42,8 +42,11 @@ export function CardShowcase({ state }: ComponentDemoProps) {
         <div className="grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]">
           <Card
             size={state.cardCompact ? "sm" : "default"}
+            eyebrow="Content"
             title={primaryProject.title}
             description={primaryProject.description}
+            badge={<Badge tone="success" variant="soft">Live</Badge>}
+            action={<Button type="button" size="xs" variant="outline">Open</Button>}
             content={
               <div className="grid gap-3 sm:grid-cols-3">
                 {primaryProject.metrics.map((metric) => (
@@ -58,6 +61,9 @@ export function CardShowcase({ state }: ComponentDemoProps) {
 
           <Card
             size="sm"
+            interactive
+            selected
+            eyebrow="Selectable"
             title={compactProject.title}
             description={compactProject.description}
             content={
@@ -70,6 +76,25 @@ export function CardShowcase({ state }: ComponentDemoProps) {
             footer={compactProject.footer}
           />
         </div>
+        <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+          <Card
+            orientation="horizontal"
+            mediaAspect="square"
+            title="Media card"
+            description="The same Card primitive owns image, copy, action and footer slots."
+            media={<div className="h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]" />}
+            action={<Button type="button" size="xs">View</Button>}
+            content={<p className="text-sm leading-6 aui-text-muted">Use media slots for previews, thumbnails, charts, or product visuals without creating another card component.</p>}
+          />
+          <Card
+            size="sm"
+            density="compact"
+            title="Compact action card"
+            description="Dense layouts still use the same header, content and footer anatomy."
+            content={<div className="text-sm aui-text-strong">12 files ready for review</div>}
+            footer={<Button type="button" size="xs" variant="secondary">Review files</Button>}
+          />
+        </div>
       </section>
     </div>
   )

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

@@ -1,11 +1,12 @@
 import * as React from "react"
 
 import { Button, Carousel, CarouselItem } from "@/index"
+import { cn } from "@/lib/utils"
 
 const steps = [
-  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch" },
-  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library" },
-  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship" },
+  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch", detail: "Hero slider for product onboarding and release tours." },
+  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library", detail: "Card rail, docs previews, and swipe-ready gallery states." },
+  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship", detail: "Active slide details stay below the main frame for context." },
 ]
 
 export function CarouselShowcase() {
@@ -48,13 +49,28 @@ export function CarouselShowcase() {
         loop
         showArrows={showArrows}
         showDots={showDots}
+        showStatus
+        showThumbnails
         autoplay={autoplay}
         autoplayInterval={2200}
         showPlaybackControl
+        aspectRatio="16 / 9"
         onIndexChange={(next) => setIndex(next)}
         onAutoplayChange={setPlaying}
         previousLabel="Previous slide"
         nextLabel="Next slide"
+        renderThumbnail={(_, itemIndex, active) => (
+          <div className={cn("grid gap-1 p-3", active && "bg-primary/5")}>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">0{itemIndex + 1}</div>
+            <div className="text-sm font-medium text-foreground">{steps[itemIndex]?.title}</div>
+          </div>
+        )}
+        renderActiveDetail={(_, activeIndex) => (
+          <div className="rounded-[20px] border border-border/70 bg-card/80 p-4">
+            <p className="text-sm font-semibold text-foreground">{steps[activeIndex]?.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">{steps[activeIndex]?.detail}</p>
+          </div>
+        )}
       >
         {steps.map((step, slideIndex) => (
           <CarouselItem key={step.title}>

package/packages/cli/vendor/src/showcase/premium/command-bar/showcase.tsx

@@ -46,7 +46,7 @@ export function CommandBarShowcase() {
               </div>
             </div>
 
-            <CommandBar open={open} position={position} className="max-w-[calc(100%-2rem)]">
+            <CommandBar open={open} position={position} grouped label="Review flow" className="max-w-[calc(100%-2rem)]">
               <Kbd>G</Kbd>
               <Button size="sm" variant="ghost">
                 <MessageSquareIcon className="mr-2 size-4" />

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

@@ -1,30 +1,31 @@
 import type { ComponentDemoMock } from "../types"
 
-export const dataTableMock: ComponentDemoMock = {
-  code: `import {
-  DataTable,
-  DataTableBulkActions,
-  DataTableColumnVisibilityMenu,
-  DataTableSortableHeader,
-  createDataTableActionsColumn,
-  createDataTableSelectColumn,
-} from "tembro"
-
-export function Example() {
-  return (
-    <DataTable
-      columns={columns}
-      data={rows}
-      enableRowSelection
-      density="comfortable"
-      striped
-      bordered
-      stickyHeader
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-    />
-  )
-}`,
+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"],
   scenarios: [
     { title: "Finance operations", description: "Filter, sort and paginate transactional rows with export-ready actions." },

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

@@ -7,7 +7,7 @@ import {
   DataTable,
   DataTableColumnVisibilityMenu,
   DataTableSortableHeader,
-  SimpleSelect,
+  Select,
 } from "@/index"
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
@@ -127,7 +127,7 @@ export function DataTableShowcase() {
         }}
         filters={
           <>
-            <SimpleSelect
+            <Select
               value={statusFilter}
               onValueChange={(value) => setStatusFilter(value ?? "all")}
               options={[
@@ -138,7 +138,7 @@ export function DataTableShowcase() {
               ]}
               triggerClassName="min-w-40"
             />
-            <SimpleSelect
+            <Select
               value={ownerFilter}
               onValueChange={(value) => setOwnerFilter(value ?? "all")}
               options={[

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

@@ -9,7 +9,7 @@ import {
   DataTableColumnVisibilityMenu,
   DataTableSortableHeader,
   DataTableViewPresets,
-  SearchInput,
+  Input,
 } from "@/index"
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { DataTableSavedFilters } from "@/components/data-table/data-table-saved-filters"
@@ -147,7 +147,7 @@ export function DataTablePartShowcase({
               size="sm"
             />
             <div className="w-full max-w-[320px]">
-              <SearchInput value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
+              <Input type="search" value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
             </div>
           </div>
         </div>
@@ -168,7 +168,7 @@ export function DataTablePartShowcase({
         toolbarProps={(table) => ({
           title: "Invoices",
           description: "Premium subroute preview for reusable DataTable parts.",
-          search: <SearchInput value={search} onValueChange={setSearch} placeholder="Search rows..." />,
+          search: <Input type="search" value={search} onValueChange={setSearch} placeholder="Search rows..." />,
           actions: (
             <div className="flex items-center gap-2">
               <DataTableColumnVisibilityMenu table={table} />

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

@@ -4,6 +4,18 @@ import { Badge, FileUpload } from "@/index"
 
 export function FileUploadShowcase() {
   const [files, setFiles] = React.useState<File[]>([])
+  const [status, setStatus] = React.useState<Record<string, "idle" | "uploading" | "success" | "error">>({})
+
+  React.useEffect(() => {
+    setStatus((current) => {
+      const next = { ...current }
+      files.forEach((file, index) => {
+        const key = `${file.name}-${file.size}-${file.lastModified}`
+        next[key] ??= index === 0 ? "uploading" : index === 1 ? "error" : "success"
+      })
+      return next
+    })
+  }, [files])
 
   return (
     <div className="space-y-4">
@@ -22,12 +34,20 @@ export function FileUploadShowcase() {
       <FileUpload
         files={files}
         onFilesChange={setFiles}
+        status={status}
         accept=".pdf,.docx,.png"
         maxFiles={4}
         maxSize={4 * 1024 * 1024}
         dropzoneLabel="Upload release assets"
         dropzoneDescription="Drag files here or choose from your device."
         helperText="Supports PDF, DOCX and PNG up to 4 MB."
+        onRetryFile={(file) => {
+          const key = `${file.name}-${file.size}-${file.lastModified}`
+          setStatus((current) => ({ ...current, [key]: "uploading" }))
+          window.setTimeout(() => {
+            setStatus((current) => ({ ...current, [key]: "success" }))
+          }, 900)
+        }}
       />
 
       <div className="grid gap-3 md:grid-cols-3">
@@ -37,7 +57,7 @@ export function FileUploadShowcase() {
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Remove and clear actions stay isolated from the parent dropzone click.</p>
+          <p className="mt-2 aui-text-muted">Uploading, success and retry-ready error rows all stay isolated from the parent dropzone click.</p>
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Use case</p>

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

@@ -23,6 +23,9 @@ export function ImageUploadShowcase() {
         files={files}
         onFilesChange={setFiles}
         maxFiles={3}
+        minImageWidth={1200}
+        minImageHeight={800}
+        aspectRatio={1.5}
         helperText="Upload hero illustrations or block thumbnails."
       />
 
@@ -33,7 +36,7 @@ export function ImageUploadShowcase() {
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Remove action stays separate from the parent dropzone surface.</p>
+          <p className="mt-2 aui-text-muted">Preview, remove, and ratio validation live inside the same reusable media surface.</p>
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Use case</p>

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

@@ -5,7 +5,6 @@ import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
 import { accordionMock, AccordionShowcase } from "./accordion"
 import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
 import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
-import { appShellMock, AppShellShowcase } from "./app-shell"
 import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
 import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
 import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
@@ -203,7 +202,6 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   table: { mock: tableMock, Showcase: TableShowcase },
   sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
   "app-sidebar": { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  "app-shell": { mock: appShellMock, Showcase: AppShellShowcase },
   "sidebar-nav": { mock: sidebarNavMock, Showcase: SidebarNavShowcase },
   breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
   "page-header": { mock: pageHeaderMock, Showcase: PageHeaderShowcase },

package/packages/cli/vendor/src/showcase/premium/loading-state/showcase.tsx

@@ -48,7 +48,7 @@ export function LoadingStateShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <LoadingState label={labels[index]} description={descriptions[index]} />
-      {showSecondary ? <LoadingState label={`${labels[index]} (compact)`} description="This is a second loading area inside the same page." /> : null}
+      {showSecondary ? <LoadingState variant="progress" progress={68} label={`${labels[index]} (progress)`} description="This is a second loading area inside the same page." /> : null}
     </div>
   )
 }

package/packages/cli/vendor/src/showcase/premium/metric-grid/showcase.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
 
-import { Button, MetricGrid } from "@/index"
+import { BarChart, Button, ChartFrame, ChartLegend, DonutChart, MetricGrid } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
 const items = [
-  { key: "users", label: "Users", value: "2,410", description: "Last 30 days", tone: "success" as const },
-  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month", tone: "info" as const },
+  { key: "users", label: "Users", value: "2,410", description: "Last 30 days", tone: "success" as const, trend: "+12%" },
+  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month", tone: "info" as const, trend: "+8.4%" },
   { key: "errors", label: "Errors", value: "3", description: "Immediate follow up", tone: "danger" as const },
   { key: "churn", label: "Churn", value: "1.8%", description: "Within target", tone: "warning" as const },
 ]
@@ -33,6 +33,38 @@ export function MetricGridShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <MetricGrid items={items} columns={columnCount} compact={compact} />
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ChartFrame title="Category performance" description="Bar chart shares the same token palette.">
+          <BarChart
+            data={[
+              { label: "CRM", value: 42 },
+              { label: "Finance", value: 31 },
+              { label: "Auth", value: -8 },
+              { label: "Forms", value: 26 },
+            ]}
+          />
+        </ChartFrame>
+        <ChartFrame title="Traffic split" description="Donut, legend and KPI blocks stay visually aligned.">
+          <div className="grid justify-items-center gap-4">
+            <DonutChart
+              centerValue="68%"
+              centerLabel="Usage"
+              data={[
+                { label: "Dashboard", value: 42 },
+                { label: "Forms", value: 18 },
+                { label: "Reports", value: 8 },
+              ]}
+            />
+            <ChartLegend
+              data={[
+                { label: "Dashboard", value: 42 },
+                { label: "Forms", value: 18 },
+                { label: "Reports", value: 8 },
+              ]}
+            />
+          </div>
+        </ChartFrame>
+      </div>
     </div>
   )
-}
+}

package/packages/cli/vendor/src/showcase/premium/notification-center/showcase.tsx

@@ -8,9 +8,9 @@ const panelClass =
   "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
 
 const seedItems = [
-  { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false },
-  { id: "2", title: "Deployment ready", description: "Release candidate passed checks and waits for promotion.", time: "12m ago", read: false },
-  { id: "3", title: "Member invited", description: "Operations workspace access was sent to Dilshod.", time: "1h ago", read: true },
+  { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false, group: "Today" },
+  { id: "2", title: "Deployment ready", description: "Release candidate passed checks and waits for promotion.", time: "12m ago", read: false, group: "Today" },
+  { id: "3", title: "Member invited", description: "Operations workspace access was sent to Dilshod.", time: "1h ago", read: true, group: "Earlier" },
 ]
 
 export function NotificationCenterShowcase({ mode }: ComponentDemoProps) {
@@ -44,6 +44,7 @@ export function NotificationCenterShowcase({ mode }: ComponentDemoProps) {
           <NotificationCenter
             notifications={items}
             onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
+            onClearAll={() => setItems([])}
             onNotificationClick={(notification) =>
               setItems((current) => current.map((item) => (item.id === notification.id ? { ...item, read: true } : item)))
             }

package/packages/cli/vendor/src/showcase/premium/page-state/showcase.tsx

@@ -54,6 +54,7 @@ export function PageStateShowcase({ mode }: ComponentDemoProps) {
             </Button>
           )
         }
+        extra={tone === "error" ? <Button variant="ghost">Open logs</Button> : undefined}
       />
 
       {mode === "playground" ? (

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

@@ -11,6 +11,7 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
   const [page, setPage] = React.useState(6)
   const [pageCount, setPageCount] = React.useState(18)
   const [showEdges, setShowEdges] = React.useState(true)
+  const [pageSize, setPageSize] = React.useState(20)
 
   return (
     <div className="space-y-5">
@@ -36,7 +37,17 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
             <p className="text-sm font-medium aui-text-muted">Review queue pages</p>
             <p className="mt-2 text-sm leading-6 aui-text-muted">Showing page <span className="font-medium aui-text-strong">{page}</span> of <span className="font-medium aui-text-strong">{pageCount}</span>.</p>
           </div>
-          <Pagination page={page} pageCount={pageCount} onPageChange={setPage} showEdges={showEdges} />
+          <Pagination
+            page={page}
+            pageCount={pageCount}
+            onPageChange={setPage}
+            showEdges={showEdges}
+            totalCount={pageCount * pageSize}
+            pageSize={pageSize}
+            pageSizeOptions={[10, 20, 50]}
+            onPageSizeChange={setPageSize}
+            showSummary
+          />
         </div>
       </section>
 
@@ -53,6 +64,7 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
           <div className="mt-4 space-y-2 text-sm leading-6 aui-text-muted">
             <p>Page: <span className="font-medium aui-text-strong">{page}</span></p>
             <p>Total pages: <span className="font-medium aui-text-strong">{pageCount}</span></p>
+            <p>Page size: <span className="font-medium aui-text-strong">{pageSize}</span></p>
             <p>Edges: <span className="font-medium aui-text-strong">{showEdges ? "visible" : "hidden"}</span></p>
           </div>
         </section>