tembro 2.0.5 → 2.1.0

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

@@ -1,4 +1,4 @@
-import { Button, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/index"
+import { Button, Input, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/index"
 
 import { popoverDemoItems } from "./data"
 
@@ -57,16 +57,32 @@ export function PopoverShowcase() {
       </section>
 
       <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Trigger text should already hint that extra context exists.",
-            "If users need multiple actions or long reading, move up to a heavier surface.",
-            "Popover body should stay compact enough to scan in one glance.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
+        <div className="grid gap-5 xl:grid-cols-[0.85fr_1.15fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Inline settings form</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Short forms fit when they change a local view and can be dismissed without losing page context.
+            </p>
+          </div>
+          <div className="flex justify-start xl:justify-end">
+            <Popover>
+              <PopoverTrigger render={<Button variant="outline" />}>Edit workspace</PopoverTrigger>
+              <PopoverContent align="end" collisionPadding={16}>
+                <PopoverHeader>
+                  <PopoverTitle>Workspace details</PopoverTitle>
+                  <PopoverDescription>Update the label used in local navigation.</PopoverDescription>
+                </PopoverHeader>
+                <div className="grid gap-3">
+                  <Input aria-label="Workspace name" defaultValue="Growth analytics" />
+                  <Input aria-label="Workspace slug" defaultValue="growth" />
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button type="button" variant="secondary" size="sm">Cancel</Button>
+                  <Button type="button" size="sm">Save</Button>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
         </div>
       </section>
     </div>

package/packages/cli/vendor/src/showcase/premium/radio-group/showcase.tsx

@@ -8,7 +8,7 @@ const panelClass =
 const planOptions = [
   { value: "starter", label: "Starter", description: "Good for single workspace setup." },
   { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
-  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support." },
+  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support.", disabled: true },
 ] as const
 
 export function RadioGroupShowcase() {
@@ -61,6 +61,18 @@ export function RadioGroupShowcase() {
             ))}
           </div>
         </div>
+        <div className="mt-5">
+          <RadioGroup
+            invalid
+            defaultValue="card"
+            orientation="horizontal"
+            options={[
+              { value: "card", label: "Card" },
+              { value: "bank", label: "Bank" },
+              { value: "invoice", label: "Invoice", disabled: true },
+            ]}
+          />
+        </div>
       </section>
     </div>
   )

package/packages/cli/vendor/src/showcase/premium/right-click-menu/showcase.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
 
+import { ArchiveIcon, CopyIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
 import { Badge, Button, RightClickMenu } from "@/index"
 
 const panelClass =
@@ -32,13 +34,14 @@ export function RightClickMenuShowcase() {
             <div className="mt-3">
               <RightClickMenu
                 items={[
-                  { label: "Rename", onSelect: () => setLastAction("Rename") },
-                  { label: "Duplicate", onSelect: () => setLastAction("Duplicate") },
-                  { label: "Archive", onSelect: () => setLastAction("Archive") },
+                  { label: "Rename", icon: <PencilIcon />, shortcut: "R", onSelect: () => setLastAction("Rename") },
+                  { label: "Duplicate", icon: <CopyIcon />, shortcut: "D", onSelect: () => setLastAction("Duplicate") },
+                  { label: "Archive", icon: <ArchiveIcon />, onSelect: () => setLastAction("Archive") },
+                  { label: "Remove", icon: <Trash2Icon />, variant: "destructive", onSelect: () => setLastAction("Remove") },
                 ]}
               >
-                <div className="rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted">
-                  Right click anywhere in this area
+                <div className="rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted" tabIndex={0}>
+                  Right click, use Shift+F10, or press the context-menu key in this area
                 </div>
               </RightClickMenu>
             </div>

package/packages/cli/vendor/src/showcase/premium/segmented-control/showcase.tsx

@@ -76,6 +76,7 @@ export function SegmentedControlShowcase() {
               <SegmentedControl
                 size="lg"
                 fullWidth
+                equalWidth
                 defaultValue="filters"
                 options={[
                   { value: "filters", label: "Filters", icon: <SlidersHorizontalIcon className="size-4" /> },

package/packages/cli/vendor/src/showcase/premium/select/data.ts

@@ -5,8 +5,8 @@ export const selectDemoGroups: SelectDemoGroup[] = [
     title: "Plan picker",
     options: [
       { value: "starter", label: "Starter" },
-      { value: "growth", label: "Growth" },
-      { value: "enterprise", label: "Enterprise" },
+      { value: "growth", label: "Growth", description: "25 seats and shared support" },
+      { value: "enterprise", label: "Enterprise", description: "Unlimited seats and priority support" },
     ],
   },
   {
@@ -18,4 +18,13 @@ export const selectDemoGroups: SelectDemoGroup[] = [
       { value: "draft", label: "Draft" },
     ],
   },
-]
+  {
+    title: "Grouped workspace routing",
+    options: [
+      { value: "north", label: "North Region", description: "Sales operations", keywords: ["sales"] },
+      { value: "south", label: "South Region", description: "Support queue", keywords: ["support"] },
+      { value: "billing", label: "Billing Desk", description: "Finance team", keywords: ["finance"] },
+      { value: "archive", label: "Archive", description: "Read-only records", disabled: true, keywords: ["disabled"] },
+    ],
+  },
+]

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

@@ -1,9 +1,9 @@
 import type { ComponentDemoMock } from "../types"
 
 export const selectMock: ComponentDemoMock = {
-  code: `import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "tembro"\n\nexport function Example() {\n  return (\n    <Select defaultValue="starter">\n      <SelectTrigger><SelectValue /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value="starter">Starter</SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Compact trigger options"],
+  code: `import { Select } from "tembro"\n\nconst planGroups = [\n  {\n    label: "Plans",\n    options: [\n      { value: "starter", label: "Starter" },\n      { value: "growth", label: "Growth", description: "25 seats" },\n      { value: "enterprise", label: "Enterprise", description: "Priority support" },\n    ],\n  },\n]\n\nexport function Example() {\n  return (\n    <Select\n      defaultValue="starter"\n      groups={planGroups}\n      searchable\n      clearable\n      emptyMessage="No plan matched"\n    />\n  )\n}`,
+  cliCommand: "npx tembro add select",
+  highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Grouped option support", "Compact trigger options"],
   relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],
   scenarios: [
     { title: "Plan picker", description: "Switch between starter, growth and enterprise plans." },
@@ -13,7 +13,7 @@ export const selectMock: ComponentDemoMock = {
   ],
   capabilityNotes: [
     "Start here for most static single-choice flows before reaching for helper members.",
-    "Supports controlled and uncontrolled selected values plus searchable local filtering.",
+    "Supports controlled and uncontrolled selected values, grouped options, clearable state, and searchable local filtering.",
     "Includes trigger sizing for compact or default density layouts.",
     "AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.",
   ],

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/index"
+import { Badge, Button, Select } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -13,10 +13,12 @@ type SelectMode = "plan" | "density"
 export function SelectShowcase({ state, setState }: ComponentDemoProps) {
   const planOptions = selectDemoGroups[0].options
   const compactOptions = selectDemoGroups[1].options
+  const groupedOptions = selectDemoGroups[2].options
   const selectedValue = state.selectValue ?? planOptions[0].value
   const selectedPlan = planOptions.find((option) => option.value === selectedValue) ?? planOptions[0]
   const highlightedPlan = planOptions[1] ?? planOptions[0]
   const [surface, setSurface] = React.useState<SelectMode>("plan")
+  const [workspace, setWorkspace] = React.useState("north")
 
   const summaryRows =
     selectedPlan.value === "enterprise"
@@ -55,7 +57,7 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
           <Button size="sm" variant={surface === "plan" ? "default" : "outline"} onClick={() => setSurface("plan")}>
             Default trigger
           </Button>
-          <Button size="sm" variant={surface === "density" ? "default" : "outline"} onClick={() => setSurface("density")}>
+              <Button size="sm" variant={surface === "density" ? "default" : "outline"} onClick={() => setSurface("density")}>
             Compact trigger
           </Button>
         </div>
@@ -75,31 +77,42 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
               <p className="text-sm font-medium aui-text-muted">{surface === "plan" ? "Workspace plan" : "Toolbar density"}</p>
               <div className="mt-3">
                 {surface === "plan" ? (
-                  <Select value={selectedValue} onValueChange={(value: string | null | undefined) => setState({ selectValue: value ?? planOptions[0].value })}>
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {planOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    value={selectedValue}
+                    onValueChange={(value) => setState({ selectValue: value ?? planOptions[0].value })}
+                    options={planOptions}
+                    triggerClassName="w-full"
+                  />
                 ) : (
-                  <Select defaultValue={compactOptions[0].value}>
-                    <SelectTrigger size="sm" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {compactOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    defaultValue={compactOptions[0].value}
+                    options={compactOptions}
+                    size="sm"
+                    triggerClassName="w-full"
+                  />
                 )}
               </div>
             </div>
 
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
+              <p className="text-sm font-medium aui-text-muted">Grouped searchable select</p>
+              <div className="mt-3">
+                <Select
+                  value={workspace}
+                  onValueChange={(value) => setWorkspace(value ?? "north")}
+                  searchable
+                  clearable
+                  placeholder="Choose workspace"
+                  emptyMessage="No workspace matched"
+                  groups={[
+                    { label: "Regions", options: groupedOptions.slice(0, 2) },
+                    { label: "Operations", options: groupedOptions.slice(2) },
+                  ]}
+                  triggerClassName="w-full"
+                />
+              </div>
+            </div>
+
             <div className="grid gap-3 sm:grid-cols-3">
               {summaryRows.map(([label, value]) => (
                 <div key={label} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">

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

@@ -1,6 +1,9 @@
 export type SelectDemoOption = {
   value: string
   label: string
+  description?: string
+  disabled?: boolean
+  keywords?: string[]
 }
 
 export type SelectDemoGroup = {

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

@@ -1,4 +1,4 @@
-import { Badge, Statistic, StatisticCard, StatisticGrid } from "@/index"
+import { Badge, ProgressRing, Statistic, StatisticCard, StatisticGrid, TrendCard } from "@/index"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
 
@@ -43,6 +43,15 @@ export function StatisticShowcase() {
           </div>
         </div>
       </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_240px]">
+          <TrendCard title="Release velocity" value="24" change="+3" trend="up" description="completed this sprint" sparkline={[8, 10, 9, 14, 18, 19, 24]} />
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <ProgressRing value={76} label="76%" description="coverage" tone="success" />
+          </div>
+        </div>
+      </section>
     </div>
   )
 }

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

@@ -29,12 +29,17 @@ export function SwitchShowcase({ state, setState }: ComponentDemoProps) {
 
         <div className="mt-6 grid gap-3">
           {switchDemoRows.map((row, index) => (
-            <div key={row.title} className={`${panelClass} flex items-center justify-between gap-4`}>
-              <div>
-                <p className="font-medium aui-text-strong">{row.title}</p>
-                <p className="text-sm aui-text-muted">{row.description}</p>
-              </div>
-              <Switch checked={index === 0 ? state.switchOn : row.defaultChecked} onCheckedChange={index === 0 ? (switchOn) => setState({ switchOn }) : undefined} defaultChecked={index > 0 ? row.defaultChecked : undefined} />
+            <div key={row.title} className={panelClass}>
+              <Switch
+                label={row.title}
+                description={row.description}
+                checked={index === 0 ? state.switchOn : row.defaultChecked}
+                onCheckedChange={index === 0 ? (switchOn) => setState({ switchOn }) : undefined}
+                defaultChecked={index > 0 ? row.defaultChecked : undefined}
+                size={index === 0 ? "lg" : "md"}
+                labelPlacement="start"
+                className="w-full justify-between"
+              />
             </div>
           ))}
         </div>
@@ -60,6 +65,10 @@ export function SwitchShowcase({ state, setState }: ComponentDemoProps) {
             </Button>
           </div>
         </div>
+        <div className="mt-5 grid gap-3 sm:grid-cols-2">
+          <Switch label="Sync in progress" description="Loading disables the control until the request finishes." loading defaultChecked />
+          <Switch label="Invalid setting" description="Error state keeps the same field layout." invalid />
+        </div>
       </section>
     </div>
   )

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

@@ -1,3 +1,5 @@
+import { ActivityIcon, BellIcon, FileTextIcon, SettingsIcon, ShieldIcon, UsersIcon } from "lucide-react"
+
 import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
@@ -38,7 +40,7 @@ export function TabsShowcase({ state, setState }: ComponentDemoProps) {
 
       <div className={panelClass}>
         <Tabs value={state.activeTab} onValueChange={(value: string) => setState({ activeTab: value as ComponentDemoProps["state"]["activeTab"] })}>
-          <TabsList>
+          <TabsList overflow="scroll">
             {tabsDemoPanels.map((panel) => (
               <TabsTrigger key={panel.value} value={panel.value}>{panel.label}</TabsTrigger>
             ))}
@@ -51,6 +53,51 @@ export function TabsShowcase({ state, setState }: ComponentDemoProps) {
         </Tabs>
       </div>
 
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Variants and overflow</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The same primitive covers underline navigation, compact density, icon labels, and long mobile tab rows.
+            </p>
+          </div>
+          <div className="grid gap-4">
+            <Tabs defaultValue="activity">
+              <TabsList variant="underline" overflow="scroll">
+                <TabsTrigger variant="underline" value="activity"><ActivityIcon />Activity</TabsTrigger>
+                <TabsTrigger variant="underline" value="files"><FileTextIcon />Files</TabsTrigger>
+                <TabsTrigger variant="underline" value="members"><UsersIcon />Members</TabsTrigger>
+                <TabsTrigger variant="underline" value="security"><ShieldIcon />Security</TabsTrigger>
+                <TabsTrigger variant="underline" value="settings"><SettingsIcon />Settings</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <Tabs defaultValue="compact">
+              <TabsList variant="compact" overflow="wrap">
+                <TabsTrigger variant="compact" value="compact">Compact</TabsTrigger>
+                <TabsTrigger variant="compact" value="alerts"><BellIcon />Alerts</TabsTrigger>
+                <TabsTrigger variant="compact" value="audit">Audit</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <Tabs defaultValue="vertical" orientation="vertical" className="grid gap-3 sm:grid-cols-[180px_1fr]">
+              <TabsList variant="pills" overflow="wrap" className="grid">
+                <TabsTrigger variant="pills" value="vertical">Vertical</TabsTrigger>
+                <TabsTrigger variant="pills" value="pills">Pills</TabsTrigger>
+                <TabsTrigger variant="pills" value="overflow">Overflow</TabsTrigger>
+              </TabsList>
+              <TabsContent value="vertical" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Vertical tabs keep local settings readable when each panel has a larger form.
+              </TabsContent>
+              <TabsContent value="pills" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Pill tabs carry a stronger selected state for dense dashboards.
+              </TabsContent>
+              <TabsContent value="overflow" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Scroll overflow keeps long labels accessible on small screens.
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+      </section>
+
       <section className={panelClass}>
         <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
           <div>

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const textareaMock: ComponentDemoMock = {
   code: `import { FormEvent, useState } from "react"
-import { Textarea } from "@/index"
+import { Textarea } from "tembro"
 
 export function Example() {
   const [note, setNote] = useState("")
@@ -15,11 +15,19 @@ export function Example() {
 
   return (
     <form onSubmit={submit} className="space-y-3">
-      <Textarea rows={6} value={note} onChange={(event) => setNote(event.target.value)} placeholder="Write your message..." />
-      <Textarea rows={4} defaultValue="Internal changelog draft..." />
+      <Textarea
+        rows={6}
+        value={note}
+        onValueChange={setNote}
+        placeholder="Write your message..."
+        helperText="Keep instructions visible below the field."
+        errorText={error ? "Please enter at least 10 characters." : undefined}
+        maxLength={240}
+        showCharacterCount
+      />
+      <Textarea rows={4} defaultValue="Internal changelog draft..." helperText="Draft copy" />
       <Textarea readOnly value="Locked review comment" rows={3} />
       <button type="submit">Submit</button>
-      {error ? <p className="text-sm text-red-600">Please enter at least 10 characters.</p> : null}
     </form>
   )
 }`,

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

@@ -39,6 +39,9 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
                 rows={textareaDemoFields[0].rows}
                 className={`${textareaDemoFields[0].minHeight} resize-y`}
                 placeholder={textareaDemoFields[0].placeholder}
+                helperText="Visible helper copy keeps instructions outside the placeholder."
+                maxLength={240}
+                showCharacterCount
               />
             </div>
           </div>
@@ -83,6 +86,7 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
               defaultValue={textareaDemoFields[1].defaultValue}
               rows={textareaDemoFields[1].rows}
               className={`${textareaDemoFields[1].minHeight} resize-none`}
+              helperText="Uncontrolled draft with stable helper spacing."
             />
           </div>
         </section>
@@ -95,6 +99,7 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
               readOnly={textareaDemoFields[2].readOnly}
               rows={textareaDemoFields[2].rows}
               className={`${textareaDemoFields[2].minHeight} resize-none opacity-70`}
+              errorText={state.textareaValue.trim().length > 0 && state.textareaValue.trim().length < 10 ? "Draft needs at least 10 characters." : undefined}
             />
             <p className="text-sm leading-6 aui-text-muted">
               Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.

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

@@ -9,7 +9,7 @@ const panelClass =
 
 function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
   const [seed, setSeed] = React.useState(0)
-  const { addToast, success, warning, error, clearToasts, toasts, dismissToast } = useToast()
+  const { addToast, success, warning, error, promise, clearToasts, toasts, dismissToast } = useToast()
 
   const addSimple = () => {
     setSeed((value) => value + 1)
@@ -39,6 +39,19 @@ function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
     error({ title: "Request failed", description: `Failure occurred while saving item #${seed + 1}` })
   }
 
+  const runPromiseToast = () => {
+    void promise(
+      new Promise<string>((resolve) => {
+        window.setTimeout(() => resolve("Export ready"), 1200)
+      }),
+      {
+        loading: { title: "Preparing export", description: "Building CSV package.", group: "Export" },
+        success: (message) => ({ title: message, description: "Download can start now.", group: "Export" }),
+        error: () => ({ title: "Export failed", description: "Retry after refreshing.", group: "Export" }),
+      }
+    )
+  }
+
   return (
     <div className="space-y-5">
       <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
@@ -70,6 +83,9 @@ function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
           <Button size="sm" variant="outline" onClick={addError}>
             Error
           </Button>
+          <Button size="sm" variant="outline" onClick={runPromiseToast}>
+            Promise
+          </Button>
           <Button size="sm" variant="outline" onClick={clearToasts}>
             Clear all
           </Button>

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

@@ -6,7 +6,7 @@ export type ComponentDemoState = {
   checked: boolean
   switchOn: boolean
   selectValue: string
-  badgeVariant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  badgeVariant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
   cardCompact: boolean
   activeTab: "overview" | "activity" | "settings"
 }

package/packages/cli/vendor/src/showcase/registry-quality.ts

@@ -50,8 +50,9 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 
-  component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
+  component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
+  component("app-shell", "AppShell", "layout", "Responsive application shell with sidebar, header and content regions."),
+  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
   component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
 
   component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -40,10 +40,9 @@ import {
   RangeSlider,
   Rating,
   SavedFilterSelect,
-  SearchInput,
   SectionHeader,
-  SimpleSelect,
   Slider,
+  Select,
   StatusDot,
   StatusLegend,
   Stepper,
@@ -250,7 +249,7 @@ function InputPreview({
   const onValueChange = (nextValue: string) => setState({ textValue: nextValue })
 
   if (slug === "search-input") {
-    return <SearchInput value={value} onValueChange={onValueChange} resultCount={12} shortcut="Ctrl K" placeholder="Search customers..." />
+    return <Input type="search" value={value} onValueChange={onValueChange} resultCount={12} shortcut="Ctrl K" placeholder="Search customers..." />
   }
 
   if (slug === "password-input") {
@@ -280,7 +279,7 @@ function InputPreview({
   if (slug === "simple-select") {
     return (
       <div className="grid gap-4">
-        <SimpleSelect
+        <Select
           value="private"
           onValueChange={() => undefined}
           options={[
@@ -350,7 +349,7 @@ function FormPreview({
       </label>
       <label className="grid gap-2">
         <span className="text-sm font-medium aui-text-strong">Status</span>
-        <SearchInput value="Active customers" resultCount={7} readOnly />
+        <Input type="search" value="Active customers" resultCount={7} readOnly />
         <span className="text-xs text-emerald-500">Ready to submit</span>
       </label>
     </div>
@@ -585,7 +584,7 @@ function ActionsPreview({
   if (slug === "filter-bar") {
     return (
       <FilterBar
-        search={<SearchInput value={state.textValue} onValueChange={(value) => setState({ textValue: value })} placeholder="Search invoices..." />}
+        search={<Input type="search" value={state.textValue} onValueChange={(value) => setState({ textValue: value })} placeholder="Search invoices..." />}
         activeCount={2}
         onReset={() => setState({ textValue: "" })}
         filters={<Button variant="outline" size="sm"><FilterIcon data-icon="inline-start" />Status</Button>}
@@ -701,7 +700,7 @@ function DataTablePartsPreview({ slug }: { slug: string }) {
   return (
     <div className="overflow-hidden rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] p-3">
-        <SearchInput value="" placeholder="Search rows..." className="max-w-xs" readOnly />
+        <Input type="search" value="" placeholder="Search rows..." className="max-w-xs" readOnly />
         <div className="flex gap-2">
           <Button variant="outline" size="sm"><FilterIcon data-icon="inline-start" />Filters</Button>
           <Button size="sm">Create</Button>
@@ -821,7 +820,7 @@ function PatternsPreview({ slug }: { slug: string }) {
       description="ResourcePage combines header, stats, filters and sections."
       actions={<Button size="sm">New customer</Button>}
       stats={<div className="grid gap-3 sm:grid-cols-2"><StatCard title="Active" value="2,418" trend={{ value: "+8%", tone: "success" }} /><StatCard title="Health" value="94%" trend={{ value: "Stable", tone: "info" }} /></div>}
-      filters={<FilterBar search={<SearchInput value="" placeholder="Search..." readOnly />} activeCount={1} />}
+      filters={<FilterBar search={<Input type="search" value="" placeholder="Search..." readOnly />} activeCount={1} />}
     >
       <ResourcePageSection title="Recent activity">
         <Timeline