tembro 1.0.0

package/packages/cli/vendor/src/showcase/premium/search-input/showcase.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+
+import { Badge, Kbd, SearchInput } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+const sourceRows = [
+  "Acme Growth workspace",
+  "Invoice 2048 approval",
+  "Northwind billing route",
+  "Customer retention dashboard",
+  "Workspace member access",
+  "Export usage report",
+]
+
+export function SearchInputShowcase({ mode }: ComponentDemoProps) {
+  const [value, setValue] = React.useState("")
+  const [debouncedValue, setDebouncedValue] = React.useState("")
+
+  const filtered = React.useMemo(() => {
+    const normalized = debouncedValue.trim().toLowerCase()
+    if (!normalized) return sourceRows
+    return sourceRows.filter((row) => row.toLowerCase().includes(normalized))
+  }, [debouncedValue])
+
+  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">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Search control</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">SearchInput should shorten finding, not add interface noise</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Debounced</Badge>
+            <Badge variant="outline" className="rounded-full">Shortcut aware</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <SearchInput
+          value={value}
+          onValueChange={setValue}
+          onDebouncedValueChange={setDebouncedValue}
+          placeholder="Search customers, invoices, or routes..."
+          resultCount={filtered.length}
+          shortcut={<Kbd>Ctrl+K</Kbd>}
+          debounceMs={250}
+        />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Resolved query</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{debouncedValue || "No active query"}</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">The debounced value represents what should usually drive remote or expensive filters.</p>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Preview results</p>
+          <div className="mt-4 space-y-2 text-sm">
+            {filtered.map((row) => (
+              <div key={row} className="rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted">
+                {row}
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <p className="text-sm aui-text-muted">Try searching for `invoice`, `workspace`, or `billing`.</p>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { sectionMock } from "./mock"
+export { SectionShowcase } from "./showcase"

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

@@ -0,0 +1,25 @@
+import type { ComponentDemoMock } from "../types"
+
+export const sectionMock: ComponentDemoMock = {
+  code: `import { Button, Section } from "@/index"
+
+export function Example() {
+  return (
+    <Section
+      title="Team members"
+      description="Manage who sees this workspace."
+      bordered
+      actions={<Button size="sm">Manage</Button>}
+    >
+      <div>Row content</div>
+    </Section>
+  )
+}`,
+  cliCommand: "npx tembro add section",
+  highlights: ["Header, description and actions in one wrapper", "Bordered mode for page sections", "Reusable container semantics"],
+  scenarios: [
+    { title: "Overview", description: "Use as dashboard section shell." },
+    { title: "Settings", description: "Keep section title and actions aligned." },
+    { title: "Detail pages", description: "Consistent structure across multiple blocks." },
+  ],
+}

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

@@ -0,0 +1,25 @@
+import { Button, Section } from "@/index"
+
+export function SectionShowcase() {
+  return (
+    <div className="space-y-4">
+      <Section
+        title="Team workspace"
+        description="Keep each block self-explanatory and easy to scan."
+        bordered
+        actions={<Button size="sm">Edit settings</Button>}
+      >
+        <p className="text-sm text-muted-foreground">Use bordered sections for dashboards with many clusters.</p>
+      </Section>
+
+      <Section
+        title="No header mode"
+        padded={false}
+      >
+        <div className="rounded-lg border border-border bg-background p-4">
+          <p className="text-sm text-foreground">You can also use it as a simple content wrapper.</p>
+        </div>
+      </Section>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { segmentedControlMock } from "./mock"
+export { SegmentedControlShowcase } from "./showcase"

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

@@ -0,0 +1,34 @@
+import type { ComponentDemoMock } from "../types"
+
+export const segmentedControlMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { LayoutGridIcon, Rows3Icon, Table2Icon } from "lucide-react"
+import { SegmentedControl } from "@/index"
+
+const options = [
+  { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },
+  { value: "list", label: "List", icon: <Rows3Icon className="size-4" /> },
+  { value: "table", label: "Table", icon: <Table2Icon className="size-4" /> },
+]
+
+export function Example() {
+  const [value, setValue] = React.useState("board")
+
+  return <SegmentedControl value={value} onValueChange={setValue} options={options} />
+}`,
+  htmlCode: `<div data-slot="segmented-control">
+  <button role="radio" aria-checked="true">Board</button>
+  <button role="radio" aria-checked="false">List</button>
+</div>`,
+  cliCommand: "npx tembro add segmented-control",
+  highlights: [
+    "Controlled or uncontrolled value handling",
+    "Icon + label segments with size tokens",
+    "Good for view switching, density, and mode changes",
+  ],
+  scenarios: [
+    { title: "View mode", description: "Switch between board, list, and table without opening a menu." },
+    { title: "Density", description: "Let users change compactness inline inside the header." },
+    { title: "Filter mode", description: "Keep small mutually-exclusive states visible at a glance." },
+  ],
+}

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

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { LayoutGridIcon, Rows3Icon, SlidersHorizontalIcon, Table2Icon } from "lucide-react"
+
+import { Badge, SegmentedControl } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function SegmentedControlShowcase() {
+  const [view, setView] = React.useState("board")
+  const [density, setDensity] = React.useState("comfortable")
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed primitive</p>
+        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">SegmentedControl is the inline mode switch</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Workspace view switch</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The primary use-case is a visible view toggle for board, list, or table layouts.
+            </p>
+            <div className="mt-5">
+              <SegmentedControl
+                value={view}
+                onValueChange={setView}
+                options={[
+                  { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },
+                  { value: "list", label: "List", icon: <Rows3Icon className="size-4" /> },
+                  { value: "table", label: "Table", icon: <Table2Icon className="size-4" /> },
+                ]}
+              />
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-sm font-semibold aui-text-strong">Current surface</p>
+                <p className="mt-1 text-xs aui-text-muted">Controlled selection is ready for route state or URL sync.</p>
+              </div>
+              <Badge variant="secondary">{view}</Badge>
+            </div>
+            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
+              <p>Prefer segmented controls for 2 to 4 options that should stay visible together.</p>
+              <p>Once the list grows larger or becomes searchable, move to Select instead.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <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">Density and size tokens</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Compact admin pages often need a second segmented row for density or behavior mode.
+            </p>
+            <div className="mt-5 space-y-4">
+              <SegmentedControl
+                size="sm"
+                value={density}
+                onValueChange={setDensity}
+                options={[
+                  { value: "compact", label: "Compact" },
+                  { value: "comfortable", label: "Comfortable" },
+                  { value: "spacious", label: "Spacious" },
+                ]}
+              />
+              <SegmentedControl
+                size="lg"
+                fullWidth
+                defaultValue="filters"
+                options={[
+                  { value: "filters", label: "Filters", icon: <SlidersHorizontalIcon className="size-4" /> },
+                  { value: "views", label: "Views", icon: <Rows3Icon className="size-4" /> },
+                ]}
+              />
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
+            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
+              <p>Use one sentence labels. Long phrases make the rail heavy and unstable.</p>
+              <p>Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row.</p>
+              <p>If a segment triggers navigation instead of state, route tabs may be the better primitive.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type { SelectDemoGroup } from "./types"
+
+export const selectDemoGroups: SelectDemoGroup[] = [
+  {
+    title: "Plan picker",
+    options: [
+      { value: "starter", label: "Starter" },
+      { value: "growth", label: "Growth" },
+      { value: "enterprise", label: "Enterprise" },
+    ],
+  },
+  {
+    title: "Status filter",
+    size: "sm",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "review", label: "Review" },
+      { value: "draft", label: "Draft" },
+    ],
+  },
+]

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

@@ -0,0 +1,4 @@
+export { SelectShowcase } from "./showcase"
+export { selectMock } from "./mock"
+export { selectDemoGroups } from "./data"
+export type { SelectDemoGroup, SelectDemoOption } from "./types"

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

@@ -0,0 +1,22 @@
+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"],
+  relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],
+  scenarios: [
+    { title: "Plan picker", description: "Switch between starter, growth and enterprise plans." },
+    { title: "Status filter", description: "Use select inside dashboards and reporting toolbars." },
+    { title: "Compact trigger", description: "Render small controls in dense admin layouts." },
+    { title: "Grouped options", description: "Present structured choices without overwhelming the form." },
+  ],
+  capabilityNotes: [
+    "Start here for most static single-choice flows before reaching for helper members.",
+    "Supports controlled and uncontrolled selected values plus 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

@@ -0,0 +1,147 @@
+import * as React from "react"
+
+import { Badge, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { selectDemoGroups } from "./data"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+type SelectMode = "plan" | "density"
+
+export function SelectShowcase({ state, setState }: ComponentDemoProps) {
+  const planOptions = selectDemoGroups[0].options
+  const compactOptions = selectDemoGroups[1].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 summaryRows =
+    selectedPlan.value === "enterprise"
+      ? [["Seats", "Unlimited"], ["Support", "Dedicated"], ["SLA", "Priority"]]
+      : selectedPlan.value === "growth"
+        ? [["Seats", "25"], ["Support", "Shared"], ["SLA", "Same day"]]
+        : [["Seats", "5"], ["Support", "Email"], ["SLA", "Standard"]]
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Selection</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">One clean select surface first</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Show the default trigger, controlled value, and summary update in one place.</p>
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Choice</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{selectedPlan.label}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Mode</p>
+              <p className="mt-2 text-lg font-semibold capitalize aui-text-strong">{surface}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Options</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{surface === "plan" ? planOptions.length : compactOptions.length}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 flex flex-wrap gap-2">
+          <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")}>
+            Compact trigger
+          </Button>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Primary select</p>
+              <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">
+                {surface === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"}
+              </h4>
+            </div>
+
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
+              <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 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>
+                )}
+              </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">
+                  <p className="text-xs aui-text-muted">{label}</p>
+                  <p className="mt-1 text-sm font-medium aui-text-strong">{value}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Controlled result</p>
+                <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">{selectedPlan.label}</h4>
+              </div>
+              <Badge variant="outline" className="rounded-full">{selectedPlan.value}</Badge>
+            </div>
+
+            <div className="border-y border-[color:var(--aui-divider)]">
+              {[
+                "Base Select should cover normal forms and static choices first.",
+                "Async and searchable variants should be documented as upgrades, not parallel defaults.",
+                "Controlled value must update nearby product UI immediately.",
+              ].map((note) => (
+                <div key={note} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
+                  {note}
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" size="sm" onClick={() => setState({ selectValue: highlightedPlan.value })}>
+                Choose {highlightedPlan.label}
+              </Button>
+              <Button type="button" size="sm" variant="secondary" onClick={() => setState({ selectValue: planOptions[0].value })}>
+                Reset
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+export type SelectDemoOption = {
+  value: string
+  label: string
+}
+
+export type SelectDemoGroup = {
+  title: string
+  size?: "default" | "sm"
+  options: SelectDemoOption[]
+}

package/packages/cli/vendor/src/showcase/premium/sheet-shell/index.ts

@@ -0,0 +1,3 @@
+export { SheetShellShowcase } from "./showcase"
+export { sheetShellMock } from "./mock"
+

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

@@ -0,0 +1,59 @@
+import type { ComponentDemoMock } from "../types"
+
+export const sheetShellMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { Button, SheetShell } from "@/index"
+
+export function Example() {
+  const [openRight, setOpenRight] = useState(false)
+  const [openBottom, setOpenBottom] = useState(false)
+
+  return (
+    <div className="space-y-3">
+      <Button onClick={() => setOpenRight(true)}>Open right sheet</Button>
+      <Button variant="outline" onClick={() => setOpenBottom(true)}>Open bottom sheet</Button>
+      <SheetShell
+        open={openRight}
+        onOpenChange={setOpenRight}
+        side="right"
+        title="Workspace editor"
+        description="Use a sheet for dense action rows without taking full screen."
+        footer={<Button onClick={() => setOpenRight(false)}>Done</Button>}
+      >
+        <p className="text-sm aui-text-muted">Compact editor surface stays close to the source context.</p>
+      </SheetShell>
+      <SheetShell
+        open={openBottom}
+        onOpenChange={setOpenBottom}
+        side="bottom"
+        title="Mobile actions"
+        description="Use mobile-friendly sheet for quick row actions."
+        footer={<Button variant="outline" onClick={() => setOpenBottom(false)}>Close</Button>}
+      >
+        <p className="text-sm aui-text-muted">Bottom sheets fit long lists and quick actions on narrow viewports.</p>
+      </SheetShell>
+    </div>
+  )
+}`,
+  htmlCode: `<button data-slot="sheet-shell-trigger">Open sheet</button>`,
+  cliCommand: "npx tembro add sheet-shell",
+  highlights: [
+    "Side-based drawer behavior",
+    "Right and bottom anchors",
+    "Footer action slot",
+    "Contextual edit pattern",
+  ],
+  relatedBlockSlugs: ["dashboard-starter", "users-table", "settings-form"],
+  scenarios: [
+    { title: "Desktop quick editor", description: "Keep row-level actions next to data without leaving page context." },
+    { title: "Mobile action panel", description: "Use bottom sheets for compact action drawers on small screens." },
+    { title: "Controlled sheet", description: "Parent owns open state and navigation-related side effects." },
+    { title: "Action footer", description: "Include explicit Done/Submit for consistent close behavior." },
+  ],
+  capabilityNotes: [
+    "SheetShell should replace full modals when interaction is contextual and task-scoped.",
+    "Use side controls based on flow density (right for editors, bottom for mobile actions).",
+    "Keep state/validation outside the sheet to prevent focus and mount side effects.",
+    "Avoid loading-heavy forms directly in sheets unless the sheet is intentionally a workflow container.",
+  ],
+}

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

@@ -0,0 +1,87 @@
+import * as React from "react"
+
+import { Badge, Button, SheetShell } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function SheetShellShowcase() {
+  const [side, setSide] = React.useState<"right" | "left" | "top" | "bottom">("right")
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Sheet shell</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Keep the page visible while editing</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Sheet is for context-preserving edits and side details that should not fully block the screen.</p>
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Side</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong capitalize">{side}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Use for</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">Quick edits</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Fallback</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">Dialog</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-wrap gap-3">
+          <Button onClick={() => setOpen(true)}>Open sheet</Button>
+          <Button
+            variant="outline"
+            onClick={() =>
+              setSide((current) => (current === "right" ? "left" : current === "left" ? "top" : current === "top" ? "bottom" : "right"))
+            }
+          >
+            Cycle side
+          </Button>
+          <Badge variant="outline">Context edit</Badge>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="border-y border-[color:var(--aui-divider)]">
+          {[
+            "Use a sheet when returning to the same page context matters.",
+            "Keep the body focused on one task or one record.",
+            "If the interaction becomes global or destructive, switch to a stronger surface.",
+          ].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>
+      </section>
+
+      <SheetShell
+        open={open}
+        onOpenChange={setOpen}
+        side={side}
+        title="Quick edit"
+        description="Side sheets are best for quick updates and row actions."
+        footer={
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button onClick={() => setOpen(false)}>Save</Button>
+          </div>
+        }
+      >
+        <div className="space-y-2">
+          <p className="text-sm aui-text-muted">Use this panel for quick edit actions and context-aware updates.</p>
+          <p className="text-xs uppercase tracking-[0.22em] aui-text-muted">Keep the main page visible while editing.</p>
+        </div>
+      </SheetShell>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/index.ts

@@ -0,0 +1,2 @@
+export { SidebarNavShowcase } from "./showcase"
+export { sidebarNavMock } from "./mock"