tembro 3.1.17 → 4.0.1

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

@@ -1,21 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const checkboxMock: ComponentDemoMock = {
-  code: `import * as React from "react"\nimport { Checkbox } from "tembro"\n\nexport function Example() {\n  const [termsAccepted, setTermsAccepted] = React.useState(false)\n\n  return (\n    <div className="space-y-3">\n      <label className="flex items-center gap-2">\n        <Checkbox\n          checked={termsAccepted}\n          onCheckedChange={(checked) => setTermsAccepted(Boolean(checked))}\n        />\n        <span>Accept terms and conditions</span>\n      </label>\n      <label className="flex items-center gap-2">\n        <Checkbox id="indeterminate" indeterminate />\n        <span>Parent selection (mixed state)</span>\n      </label>\n      <label className="flex items-center gap-2">\n        <Checkbox id="readonly" readOnly checked />\n        <span>Read-only state example</span>\n      </label>\n    </div>\n  )\n}\n`,
-  cliCommand: "npx tembro add checkbox",
-  highlights: ["Checked state", "Indeterminate-ready API", "Task lists", "Permission groups"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Release checklist", description: "Track deployment readiness with simple binary controls." },
-    { title: "Permissions", description: "Apply checkbox groups in role and access screens." },
-    { title: "Bulk selection", description: "Use in table rows and mass-action workflows." },
-    { title: "Task confirmation", description: "Represent short check sequences inside setup and review screens." },
-  ],
-  capabilityNotes: [
-    "Supports checked, disabled and indeterminate-ready API usage patterns.",
-    "Pair each checkbox with label elements for accessible toggles.",
-    "Use checked/unchecked states for workflows, not custom state machines.",
-    "For mixed selections, compute parent indeterminate state from child selections.",
-  ],
-}
-

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

@@ -1,115 +0,0 @@
-import { Badge, Button, Checkbox } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { checkboxDemoItems } from "./data"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
-  const triState = state.checked ? "checked" : state.textValue === "mixed" ? "mixed" : "unchecked"
-
-  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">Binary lists</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Checkboxes should read like a checklist</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Controlled</Badge>
-            <Badge variant="outline" className="rounded-full">Default checked</Badge>
-            <Badge variant="outline" className="rounded-full">Disabled</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-3 md:grid-cols-3">
-          <div className={`${panelClass} flex items-start gap-3`}>
-            <Checkbox
-              size="lg"
-              allowIndeterminate
-              checked={triState === "mixed" ? "indeterminate" : triState === "checked"}
-              onCheckedStateChange={(checked) => {
-                if (checked === "indeterminate") {
-                  setState({ checked: false, textValue: "mixed" })
-                } else if (checked) {
-                  setState({ checked: true, textValue: "checked" })
-                } else {
-                  setState({ checked: false, textValue: "unchecked" })
-                }
-              }}
-            />
-            <div>
-              <p className="text-sm font-medium aui-text-strong">Approval state</p>
-              <p className="mt-1 text-sm aui-text-muted">Use `indeterminate` when not all child tasks are complete.</p>
-            </div>
-          </div>
-          <div className={`${panelClass} flex items-start gap-3`}>
-            <Checkbox size="lg" checked="indeterminate" />
-            <div>
-              <p className="text-sm font-medium aui-text-strong">Indeterminate</p>
-              <p className="mt-1 text-sm aui-text-muted">Useful for parent rows and bulk selection summaries.</p>
-            </div>
-          </div>
-          <div className={`${panelClass} flex items-start gap-3`}>
-            <Checkbox size="lg" checked disabled />
-            <div>
-              <p className="text-sm font-medium aui-text-strong">Disabled selected</p>
-              <p className="mt-1 text-sm aui-text-muted">Shows permission-locked completion without becoming clickable.</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-3 grid gap-3">
-          {checkboxDemoItems.map((item, index) => (
-            <label key={item.label} htmlFor={item.id} className={`${panelClass} flex items-start gap-3`}>
-              <Checkbox
-                id={item.id}
-                checked={index === 0 ? state.checked : item.checked}
-                disabled={item.disabled}
-                invalid={index === 0 && triState === "unchecked"}
-                onCheckedChange={index === 0 ? (checked) => setState({ checked: Boolean(checked) }) : undefined}
-                defaultChecked={index > 0 ? item.checked : undefined}
-              />
-              <div>
-                <p className="text-sm font-medium aui-text-strong">{item.label}</p>
-                <p className="mt-1 text-sm aui-text-muted">{item.description}</p>
-              </div>
-            </label>
-          ))}
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
-            <h4 className="mt-2 text-lg font-semibold aui-text-strong">
-              Release checklist is {triState}
-            </h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Toggle the first row or use these actions to verify controlled tri-state checkbox behavior.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" size="sm" onClick={() => setState({ checked: true })}>
-              Enable
-            </Button>
-            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ checked: false })}>
-              Disable
-            </Button>
-            <Button type="button" size="sm" variant="outline" onClick={() => setState({ checked: false, textValue: "mixed" })}>
-              Set mixed
-            </Button>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-export type CheckboxDemoItem = {
-  label: string
-  description: string
-  id: string
-  checked?: boolean
-  disabled?: boolean
-}

package/packages/cli/vendor/src/showcase/premium/code-block/index.ts

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

package/packages/cli/vendor/src/showcase/premium/code-block/mock.ts

@@ -1,22 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const codeBlockMock: ComponentDemoMock = {
-  code: `import { CodeBlock } from "tembro"
-
-const snippet = \`npx tembro add button select\`
-
-export function Example() {
-  return <CodeBlock title="CLI" language="bash" code={snippet} />
-}`,
-  cliCommand: "npx tembro add code-block",
-  highlights: [
-    "Header with title, language and built-in copy action",
-    "Supports long wrapped snippets or horizontal scroll",
-    "Useful for CLI, config and docs snippets",
-  ],
-  scenarios: [
-    { title: "CLI docs", description: "Show install or add commands with fast copy action." },
-    { title: "Config snippet", description: "Render small code samples without building a syntax highlighter." },
-    { title: "Response sample", description: "Present payload examples in compact technical docs." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/code-block/showcase.tsx

@@ -1,45 +0,0 @@
-import { Badge, CodeBlock } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const installSnippet = `npx tembro init
-npx tembro add button input data-table`
-
-const cssSnippet = `:root {
-  --aui-card-radius: 18px;
-  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
-}`
-
-export function CodeBlockShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CodeBlock keeps docs snippets clean and copyable</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it for short technical snippets where product docs need clean framing, title, language label and inline copy.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div className="space-y-4">
-            <CodeBlock title="Install" language="bash" code={installSnippet} />
-            <CodeBlock title="Token override" language="css" code={cssSnippet} wrap />
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <div className="flex items-center justify-between gap-3">
-              <p className="text-sm font-semibold aui-text-strong">Use when</p>
-              <Badge variant="secondary">Docs</Badge>
-            </div>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel.</p>
-              <p>For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,40 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const collapseMock: ComponentDemoMock = {
-  code: `import { CollapseGroup } from "tembro"
-
-const sections = [
-  {
-    key: "permissions",
-    title: "Permissions",
-    description: "Who can publish and archive components.",
-    content: "Owners can publish. Editors can update docs. Viewers can inspect previews only.",
-  },
-  {
-    key: "release",
-    title: "Release notes",
-    description: "What changed in this version.",
-    content: "Added Tooltip, Combobox and Collapse public docs surfaces.",
-  },
-]
-
-export function Example() {
-  return <CollapseGroup items={sections} type="single" defaultValue="permissions" />
-}`,
-  htmlCode: `<details data-slot="collapse"><summary>Open details</summary></details>`,
-  cliCommand: "npx tembro add collapse",
-  highlights: ["Progressive disclosure", "Single or multiple open items", "Dense settings layout", "Controlled group state"],
-  relatedBlockSlugs: ["settings-form", "dashboard-starter", "crm-dashboard"],
-  scenarios: [
-    { title: "FAQ and settings", description: "Reveal more detail without turning the page into a long wall of text." },
-    { title: "Release notes", description: "Show secondary information only when the user asks for it." },
-    { title: "Admin sections", description: "Useful in compact pages where every line of space matters." },
-  ],
-  capabilityNotes: [
-    "Use Collapse when the default page should stay compact but details must remain nearby.",
-    "For one-open-at-a-time behavior, prefer `CollapseGroup` with `type=\"single\"`.",
-    "Do not hide critical validation or destructive warnings inside collapsed content.",
-    "Keep titles scannable so users know what each section reveals before opening it.",
-  ],
-}
-

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

@@ -1,111 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Collapse, CollapseContent, CollapseGroup, CollapseTrigger } from "@/index"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const collapseItems = [
-  {
-    key: "permissions",
-    title: "Permissions",
-    badge: <Badge variant="secondary">Core</Badge>,
-    description: "Who can publish, archive, and rename library surfaces.",
-    content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.",
-  },
-  {
-    key: "release",
-    title: "Release notes",
-    description: "What changed in the current package cycle.",
-    meta: "July",
-    content: "This release opened more public docs coverage for interactive form and overlay surfaces.",
-  },
-  {
-    key: "handoff",
-    title: "Handoff checklist",
-    description: "What must be checked before a public release.",
-    disabled: true,
-    disabledReason: "Unlock after release branch is cut.",
-    content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.",
-  },
-] as const
-
-export function CollapseShowcase() {
-  const [open, setOpen] = React.useState(false)
-  const [groupValue, setGroupValue] = React.useState<string | string[]>("permissions")
-
-  const normalizedGroupValue = Array.isArray(groupValue) ? groupValue.join(", ") || "none" : groupValue || "none"
-
-  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">Progressive disclosure</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Collapse should reduce page noise first</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Single item</Badge>
-            <Badge variant="outline" className="rounded-full">Grouped items</Badge>
-            <Badge variant="outline" className="rounded-full">Controlled state</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Single disclosure</p>
-            <div className="mt-3">
-              <Collapse open={open} onOpenChange={setOpen}>
-                <CollapseTrigger>Publish access rules</CollapseTrigger>
-                <CollapseContent>
-                  Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state.
-                </CollapseContent>
-              </Collapse>
-            </div>
-          </div>
-
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Grouped disclosure</p>
-            <div className="mt-3">
-              <CollapseGroup
-                items={collapseItems.map((item) => ({ ...item }))}
-                type="single"
-                value={groupValue}
-                onValueChange={setGroupValue}
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
-            <h4 className="mt-2 text-lg font-semibold aui-text-strong">
-              Single item: {open ? "open" : "closed"} | Group: {normalizedGroupValue}
-            </h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Use quick actions to verify controlled open state without relying only on the disclosure click target.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" size="sm" onClick={() => setOpen(true)}>
-              Open single
-            </Button>
-            <Button type="button" size="sm" variant="secondary" onClick={() => setOpen(false)}>
-              Close single
-            </Button>
-            <Button type="button" size="sm" variant="outline" onClick={() => setGroupValue("release")}>
-              Open release
-            </Button>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/color-picker/index.ts

@@ -1,2 +0,0 @@
-export * from "./mock"
-export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/color-picker/mock.ts

@@ -1,21 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const colorPickerMock: ComponentDemoMock = {
-  code: `import { ColorPicker } from "tembro"
-
-export function Example() {
-  return (
-    <ColorPicker
-      label="Brand color"
-      defaultValue="#2563ebcc"
-      showAlpha
-    />
-  )
-}`,
-  cliCommand: "npx tembro add color-picker",
-  highlights: ["Controlled HEX and alpha value", "Keyboard-editable input and accessible swatches"],
-  scenarios: [
-    { title: "Brand settings", description: "Choose and validate theme colors with reusable presets." },
-    { title: "Design tools", description: "Edit opaque or alpha-aware colors through one value contract." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/color-picker/showcase.tsx

@@ -1,14 +0,0 @@
-import * as React from "react"
-
-import { ColorPicker } from "@/index"
-
-export function ColorPickerShowcase() {
-  const [color, setColor] = React.useState("#2563ebcc")
-
-  return (
-    <div className="mx-auto grid w-full max-w-sm gap-3">
-      <ColorPicker label="Brand color" value={color} onValueChange={setColor} showAlpha />
-      <code className="text-sm text-muted-foreground">{color}</code>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/command-palette/index.ts

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

package/packages/cli/vendor/src/showcase/premium/command-palette/mock.ts

@@ -1,39 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const commandPaletteMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { CommandPalette, Kbd } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = React.useState(true)
-
-  return (
-    <CommandPalette
-      open={open}
-      onOpenChange={setOpen}
-      placeholder="Search routes and actions..."
-      groups={[
-        {
-          id: "routes",
-          label: "Routes",
-          items: [
-            { id: "overview", label: "Open overview", shortcut: <Kbd>G O</Kbd> },
-            { id: "billing", label: "Open billing", shortcut: <Kbd>G B</Kbd> },
-          ],
-        },
-      ]}
-    />
-  )
-}`,
-  highlights: ["Grouped commands", "Recent items", "Async load support", "Keyboard-first global navigation surface"],
-  scenarios: [
-    { title: "Route jump", description: "Move between product areas without reaching for sidebar navigation." },
-    { title: "Quick action", description: "Trigger create, invite, export, or sync flows from one searchable surface." },
-    { title: "Large workspace", description: "Merge static routes and async results into one command layer." },
-  ],
-  capabilityNotes: [
-    "Keep labels verb-led and searchable.",
-    "Use async groups for remote entities such as customers or projects.",
-    "Recent commands help repeated admin workflows feel much faster.",
-  ],
-}

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

@@ -1,160 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, CommandPalette, Kbd } from "@/index"
-
-import type { CommandPaletteGroup, CommandPaletteItem } from "@/components/command/command-palette"
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-function wait(ms: number) {
-  return new Promise((resolve) => window.setTimeout(resolve, ms))
-}
-
-export function CommandPaletteShowcase({ mode }: ComponentDemoProps) {
-  const [open, setOpen] = React.useState(false)
-  const [lastAction, setLastAction] = React.useState("Nothing selected yet")
-
-  const groups = React.useMemo<CommandPaletteGroup[]>(
-    () => [
-      {
-        id: "routes",
-        label: "Routes",
-        items: [
-          {
-            id: "overview",
-            label: "Open overview",
-            description: "Jump to the workspace summary route.",
-            shortcut: <Kbd>G O</Kbd>,
-            onSelect: async () => {
-              await wait(220)
-              setLastAction("Opened overview route")
-            },
-          },
-          {
-            id: "billing",
-            label: "Open billing",
-            description: "Inspect invoices, methods, and workspace usage.",
-            shortcut: <Kbd>G B</Kbd>,
-            onSelect: async () => {
-              await wait(220)
-              setLastAction("Opened billing route")
-            },
-          },
-        ],
-      },
-      {
-        id: "actions",
-        label: "Actions",
-        items: [
-          {
-            id: "invite",
-            label: "Invite teammate",
-            description: "Start workspace access flow.",
-            shortcut: <Kbd>⌘I</Kbd>,
-            onSelect: async () => {
-              await wait(220)
-              setLastAction("Invite flow started")
-            },
-          },
-          {
-            id: "export",
-            label: "Export report",
-            description: "Download usage summary as CSV.",
-            shortcut: <Kbd>⌘E</Kbd>,
-            onSelect: async () => {
-              await wait(220)
-              setLastAction("Export requested")
-            },
-          },
-        ],
-      },
-      {
-        id: "workspace",
-        label: "Workspace search",
-        loadingLabel: "Searching workspace...",
-        emptyLabel: "No matching workspace entities.",
-        loadItems: async (search) => {
-          await wait(260)
-          const base: CommandPaletteItem[] = [
-            { id: "acme", label: "Acme Growth", description: "Customer workspace", value: "acme growth customer workspace" },
-            { id: "north", label: "Northwind Ops", description: "Operations team", value: "northwind ops operations team" },
-            { id: "invoice", label: "Invoice 2048", description: "Billing entity", value: "invoice 2048 billing entity" },
-          ]
-          const normalized = search.trim().toLowerCase()
-          return normalized ? base.filter((item) => String(item.value ?? item.label).toLowerCase().includes(normalized)) : base
-        },
-      },
-    ],
-    []
-  )
-
-  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">Global actions</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Command palette should collapse navigation and actions into one fast surface</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Good command UX combines routes, actions, and async workspace search without looking like a giant modal form.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Recent-aware</Badge>
-            <Badge variant="outline" className="rounded-full">Async search</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-sm font-medium aui-text-muted">Try the live surface</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Open the palette, trigger route jumps, or type to load workspace entities.</p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button onClick={() => setOpen(true)}>Open palette</Button>
-            <Badge variant="outline" className="rounded-full"><Kbd>Ctrl</Kbd> + <Kbd>K</Kbd></Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Last action</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Command results should feel immediate and operational.</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Design rule</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Keep command labels short, searchable, and verb-first. Async groups should behave like results, not like a second UI inside the modal.
-          </p>
-        </section>
-      </div>
-
-      <CommandPalette
-        open={open}
-        onOpenChange={setOpen}
-        placeholder="Search routes and actions..."
-        groups={groups}
-        recent
-      />
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <div className="flex flex-wrap gap-2">
-            <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
-              Reopen palette
-            </Button>
-            <Button size="sm" variant="outline" onClick={() => setLastAction("Nothing selected yet")}>
-              Reset output
-            </Button>
-          </div>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/index.ts

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