tembro 1.0.0

package/packages/cli/vendor/src/showcase/premium/kanban-board/mock.ts

@@ -0,0 +1,38 @@
+import type { ComponentDemoMock } from "../types"
+
+export const kanbanBoardMock: ComponentDemoMock = {
+  code: `import { KanbanBoard } from "@/index"
+
+export function Example() {
+  return (
+    <KanbanBoard
+      columns={[
+        {
+          key: "todo",
+          title: "To Do",
+          cards: [
+            { key: "a", title: "Prototype", description: "Build initial modal flow." },
+            { key: "b", title: "Audit", description: "Review token contrast." },
+          ],
+        },
+        {
+          key: "progress",
+          title: "In progress",
+          cards: [{ key: "c", title: "Implement", description: "Add demo variants." }],
+        },
+      ]}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add kanban",
+  highlights: [
+    "Horizontal scrollable board layout",
+    "Custom column metadata and counts",
+    "Composable card rendering and click handlers",
+  ],
+  scenarios: [
+    { title: "Task board", description: "Keep tasks in grouped lanes with minimal state." },
+    { title: "Issue triage", description: "Simple draggable-ready board structure (UI only)." },
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/kanban-board/showcase.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+
+import { Button, KanbanBoard } from "@/index"
+import type { KanbanColumn } from "@/components/display/kanban"
+
+const baseColumns = [
+  {
+    key: "todo",
+    title: "To do",
+    description: "Incoming tasks",
+    cards: [
+      { key: "a", title: "Audit inputs", description: "Collect edge cases", meta: "high" },
+      { key: "b", title: "Review docs", description: "Ensure API completeness", meta: "medium" },
+    ],
+  },
+  {
+    key: "inProgress",
+    title: "In progress",
+    description: "Current sprint",
+    cards: [{ key: "c", title: "Add demos", description: "Finish missing routes", meta: "urgent" }],
+  },
+]
+
+export function KanbanBoardShowcase() {
+  const [columns, setColumns] = React.useState<KanbanColumn[]>(baseColumns)
+  const [selected, setSelected] = React.useState<string | undefined>(undefined)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Button size="sm" onClick={() => setColumns((current) => [...current, { key: `new-${Date.now()}`, title: "New", cards: [] }])}>
+          Add lane
+        </Button>
+      </div>
+      <KanbanBoard
+        columns={columns}
+        onCardClick={(card) => setSelected(String(card.key))}
+        renderCard={(card) => (
+          <div
+            key={card.key}
+            className="rounded-lg border bg-card p-3"
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") setSelected(card.key)
+            }}
+            onClick={() => setSelected(card.key)}
+          >
+            <div className="font-medium text-sm">{card.title}</div>
+            <div className="mt-1 text-xs text-muted-foreground">{card.description}</div>
+            {card.meta && <div className="mt-2 text-xs text-foreground/80">{card.meta}</div>}
+          </div>
+        )}
+      />
+      {selected && <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">Selected card: {selected}</div>}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const kbdMock: ComponentDemoMock = {
+  code: `import { Kbd } from "tembro"
+
+export function Example() {
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open command search.
+    </div>
+  )
+}`,
+  htmlCode: `<kbd data-slot="kbd">Ctrl</kbd>`,
+  cliCommand: "npx tembro add kbd",
+  highlights: ["Shortcut tokens", "Size variants", "Inline hints", "Command palette labels"],
+  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
+  scenarios: [
+    { title: "Command palette", description: "Show shortcuts inline without turning them into bulky badges." },
+    { title: "Toolbar hints", description: "Useful in dense product actions where key combos speed up frequent tasks." },
+    { title: "Inline docs", description: "Clarify keyboard-driven paths near the action itself." },
+  ],
+  capabilityNotes: [
+    "Use Kbd for short shortcut tokens only.",
+    "Keep key labels consistent with platform guidance when possible.",
+    "Avoid using Kbd as a general-purpose badge replacement.",
+    "Inline command hints should stay secondary to the main action label.",
+  ],
+}
+

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

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { Badge, Button, Kbd } from "@/index"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+const variants = ["default", "outline", "ghost"] as const
+
+export function KbdShowcase() {
+  const [variant, setVariant] = React.useState<(typeof variants)[number]>("default")
+
+  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">Keyboard hints</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Kbd should make shortcuts readable at a glance</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Keep shortcut tokens compact and subordinate to the action they describe.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Inline token</Badge>
+            <Badge variant="outline" className="rounded-full">Variants</Badge>
+            <Badge variant="outline" className="rounded-full">Command hint</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[1fr_1fr]">
+          <div className={`${panelClass} space-y-4`}>
+            <p className="text-sm font-medium aui-text-muted">Command pattern</p>
+            <p className="aui-text-strong text-sm">Press <Kbd variant={variant}>Ctrl</Kbd> + <Kbd variant={variant}>K</Kbd> to open global search.</p>
+            <p className="aui-text-strong text-sm">Press <Kbd variant={variant}>G</Kbd> then <Kbd variant={variant}>C</Kbd> to jump to components.</p>
+          </div>
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Current variant</p>
+            <p className="mt-3 text-lg font-semibold aui-text-strong">{variant}</p>
+          </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">Active variant: {variant}</h4>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {variants.map((entry) => (
+              <Button key={entry} type="button" size="sm" variant={variant === entry ? "default" : "secondary"} onClick={() => setVariant(entry)}>
+                {entry}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/index.ts

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

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/mock.ts

@@ -0,0 +1,20 @@
+import type { ComponentDemoMock } from "../types"
+
+export const keyboardShortcutMock: ComponentDemoMock = {
+  code: `import { KeyboardShortcut } from "@/index"
+
+export function Example() {
+  return <KeyboardShortcut keys={["Ctrl", "K"]} />
+}`,
+  cliCommand: "npx tembro add keyboard-shortcut",
+  highlights: [
+    "Compact visual hint for one or many keys",
+    "Accepts key arrays or raw children",
+    "Useful inside command palette, docs hints and action toolbars",
+  ],
+  scenarios: [
+    { title: "Search hint", description: "Show the command palette trigger beside a search action." },
+    { title: "Editor help", description: "Reveal save or publish shortcuts close to the action." },
+    { title: "Docs legend", description: "Document power-user flows without adding a heavy table." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/showcase.tsx

@@ -0,0 +1,42 @@
+import { Button, KeyboardShortcut } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function KeyboardShortcutShowcase() {
+  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">KeyboardShortcut shows power-user hints without noise</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Keep shortcut chips short and nearby to the action they describe. They should reinforce real behavior, not decorative text.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+            <div className="flex flex-wrap items-center gap-3">
+              <Button variant="outline">Search routes</Button>
+              <KeyboardShortcut keys={["Ctrl", "K"]} />
+            </div>
+            <div className="mt-4 flex flex-wrap items-center gap-3">
+              <Button variant="secondary">Save draft</Button>
+              <KeyboardShortcut keys={["Ctrl", "S"]} />
+              <Button>Publish</Button>
+              <KeyboardShortcut keys={["Shift", "Enter"]} />
+            </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>Show shortcuts only where the action is relevant. Repeating the same hint everywhere weakens it.</p>
+              <p>Use concise labels like `Ctrl`, `Cmd`, `Shift`, `Enter`, not long prose inside the chip.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,32 @@
+import type { ComponentDemoMock } from "../types"
+
+export const listMock: ComponentDemoMock = {
+  code: `import { Avatar, Badge, List } from "@/index"
+
+export function Example() {
+  return (
+    <List
+      items={[
+        {
+          key: "invoice",
+          title: "Invoice review",
+          description: "Pending finance approval",
+          avatar: <Avatar name="Finance" size="sm" />,
+          extra: <Badge variant="outline">Pending</Badge>,
+        },
+      ]}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add list",
+  highlights: [
+    "Compact title/description rows with optional avatar and extra slot",
+    "Clickable row pattern without building a table",
+    "Useful for inboxes, activity queues, and settings menus",
+  ],
+  scenarios: [
+    { title: "Queue", description: "Show work items in a compact operational stack." },
+    { title: "Settings list", description: "Present navigable options without a heavy sidebar." },
+    { title: "Recent activity", description: "Render quick summaries with status and person context." },
+  ],
+}

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

@@ -0,0 +1,62 @@
+import { Avatar, Badge, List } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+const rows = [
+  {
+    key: "invoice",
+    title: "Invoice #4821 review",
+    description: "Finance approval is still waiting on updated tax evidence.",
+    avatar: <Avatar name="Finance Team" size="sm" shape="rounded" />,
+    extra: <Badge variant="outline">Pending</Badge>,
+  },
+  {
+    key: "deploy",
+    title: "Release publish window",
+    description: "Documentation and component demo checks passed for the next deploy.",
+    avatar: <Avatar name="Release Ops" size="sm" />,
+    extra: <Badge variant="secondary">Ready</Badge>,
+  },
+  {
+    key: "design",
+    title: "Design audit feedback",
+    description: "Spacing and token inconsistencies were reduced across the public catalog.",
+    avatar: <Avatar name="Design" size="sm" />,
+    extra: <Badge variant="outline">3 notes</Badge>,
+  },
+]
+
+export function ListShowcase() {
+  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">List is for compact operational rows</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use it when a full table would be too heavy, but a simple stack of cards would waste space.
+        </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">Operational queue</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The exported List keeps title, context and status aligned without forcing table columns.
+            </p>
+            <List className="mt-5" items={rows} />
+          </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 List when content is read top-to-bottom and each row can tolerate flexible height.</p>
+              <p>If sorting, bulk actions, or stable columns become important, move up to DataTable.</p>
+              <p>The `extra` slot should stay compact so the title remains the strongest visual anchor.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,21 @@
+import type { ComponentDemoMock } from "../types"
+
+export const loadingStateMock: ComponentDemoMock = {
+  code: `import { LoadingState } from "tembro"
+
+export function Example() {
+  return <LoadingState label="Loading metrics" description="Preparing dashboard widgets and chart data." />
+}`,
+  highlights: ["Simple loading copy", "Section-level placeholder", "Can be combined with skeletons", "Suitable for overlay and inline usage"],
+  scenarios: [
+    { title: "Data fetch", description: "Show while loading table or card-level content." },
+    { title: "Background sync", description: "Display while async actions are in progress." },
+    { title: "Upload wait", description: "Use between step transitions in wizards." },
+  ],
+  capabilityNotes: [
+    "Keep descriptions specific to what users are waiting for.",
+    "Use one source of truth for loading copy across sections.",
+    "Prefer replacing entire section with loading state over mixing partial stale data.",
+  ],
+}
+

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+import { Badge, Button, LoadingState } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const labels: string[] = ["Loading metrics", "Loading table", "Loading details", "Loading export"]
+const descriptions = [
+  "Preparing dashboard widgets and chart data.",
+  "Fetching list rows with filters applied.",
+  "Waiting for content details from the API.",
+  "Generating a local export file.",
+]
+
+export function LoadingStateShowcase({ mode }: ComponentDemoProps) {
+  const [index, setIndex] = React.useState(0)
+  const [showSecondary, setShowSecondary] = React.useState(mode === "playground")
+
+  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">Pending work</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Loading state should explain what is happening</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Scoped loading</Badge>
+            <Badge variant="outline" className="rounded-full">Clear label</Badge>
+          </div>
+        </div>
+      </section>
+
+      {mode === "playground" ? (
+        <div className="flex flex-wrap gap-2">
+          <Button size="sm" variant="outline" onClick={() => setShowSecondary((value) => !value)}>
+            {showSecondary ? "Hide secondary" : "Show secondary"}
+          </Button>
+          {labels.map((entry, idx) => (
+            <Button key={entry} size="sm" variant={index === idx ? "default" : "outline"} onClick={() => setIndex(idx)}>
+              {entry}
+            </Button>
+          ))}
+        </div>
+      ) : 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}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/masked-input/index.ts

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

package/packages/cli/vendor/src/showcase/premium/masked-input/mock.ts

@@ -0,0 +1,41 @@
+import type { ComponentDemoMock } from "../types"
+
+export const maskedInputMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { MaskedInput } from "@/index"
+
+export function Example() {
+  const [value, setValue] = useState("AA-123")
+
+  return (
+    <MaskedInput
+      value={value}
+      onValueChange={(nextValue) => setValue(nextValue)}
+      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
+      placeholder="AA-123"
+    />
+  )
+}
+`,
+  htmlCode: '<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />',
+  cliCommand: "npx tembro add masked-input",
+  highlights: [
+    "Mask callback runs on each edit",
+    "Uppercase and slicing are explicit formatting assumptions",
+    "Raw value assumptions should be mirrored in validation and submit payloads",
+    "Use a deterministic placeholder that matches the mask contract",
+  ],
+  relatedBlockSlugs: ["settings-form", "crm-dashboard", "auth-sign-in"],
+  scenarios: [
+    { title: "Referral codes", description: "Use fixed pattern for short identifiers while typing." },
+    { title: "License keys", description: "Apply grouping with a strict uppercase format and controlled length." },
+    { title: "Display normalization", description: "Normalize display while preserving form-level expectations." },
+    { title: "Validation gate", description: "Reject submission when value shape does not match mask contract." },
+  ],
+  capabilityNotes: [
+    "Document whether callback receives raw text or already masked text.",
+    "If you need raw payload, sanitize before submit and keep canonical storage layer separate.",
+    "Use one mask function source for both form and API submission paths.",
+    "Treat partially typed values as invalid until user completion conditions are met.",
+  ],
+}

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

@@ -0,0 +1,24 @@
+import { useState } from "react"
+
+import { MaskedInput } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+export function MaskedInputShowcase({ mode }: ComponentDemoProps) {
+  const [value, setValue] = useState("AA-123")
+
+  return (
+    <div className="space-y-4">
+      <MaskedInput
+        value={value}
+        onValueChange={(nextValue: string) => setValue(nextValue)}
+        mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
+        placeholder="AA-123"
+      />
+      <p className="aui-text-subtle text-sm">Display value: {value || "—"}</p>
+      <p className="aui-text-muted text-sm">Task focus: fixed-format field where raw/display value assumptions should be documented.</p>
+      <p className="aui-text-muted text-sm">Mode: {mode}</p>
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/premium/mention-input/index.ts

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

package/packages/cli/vendor/src/showcase/premium/mention-input/mock.ts

@@ -0,0 +1,26 @@
+import type { ComponentDemoMock } from "../types"
+
+export const mentionInputMock: ComponentDemoMock = {
+  code: `import { MentionInput } from "@/index"
+
+export function Example() {
+  return (
+    <MentionInput
+      value="Assign @alice and @bob."
+      options={[{ label: "Alice", value: "alice" }, { label: "Bob", value: "bob" }]}
+      onValueChange={(value) => console.log(value)}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add mention-input",
+  highlights: [
+    "Trigger-based suggestion filtering",
+    "Keyboard navigation for suggestions",
+    "Auto insert with controlled value",
+  ],
+  scenarios: [
+    { title: "Comments", description: "Mention teammates in internal notes." },
+    { title: "Chat input", description: "Add quick user references while composing." },
+  ],
+}
+

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

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import { MentionInput } from "@/index"
+
+const defaultOptions = [
+  { label: "Alice", value: "alice" },
+  { label: "Bob", value: "bob" },
+  { label: "Charlie", value: "charlie" },
+]
+
+export function MentionInputShowcase() {
+  const [value, setValue] = React.useState("Hi @alice, please review this task.")
+  const [mentions, setMentions] = React.useState<string[]>([])
+
+  return (
+    <div className="space-y-3">
+      <MentionInput
+        value={value}
+        options={defaultOptions}
+        onValueChange={setValue}
+        onMentionSelect={(selected) => setMentions((current) => [...new Set([...current, selected])])}
+      />
+      <p className="text-sm text-muted-foreground">Inserted mentions: {mentions.join(", ") || "None"}</p>
+    </div>
+  )
+}
+

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

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

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

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const menubarMock: ComponentDemoMock = {
+  code: `import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@/index"
+
+export function Example() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New project</MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}`,
+  cliCommand: "npx tembro add menubar",
+  highlights: [
+    "Composable menubar surfaces with grouped actions",
+    "Trigger + content + item primitives",
+  ],
+  scenarios: [
+    { title: "Editor top bar", description: "Display grouped app actions in one compact area." },
+    { title: "Admin tools", description: "Expose grouped controls without full menu system overhead." },
+  ],
+}
+

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

@@ -0,0 +1,30 @@
+import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@/index"
+
+export function MenubarShowcase() {
+  return (
+    <div className="space-y-3">
+      <Menubar className="w-fit">
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New project</MenubarItem>
+            <MenubarItem>Open</MenubarItem>
+            <MenubarItem>Save</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>Undo</MenubarItem>
+            <MenubarItem>Redo</MenubarItem>
+            <MenubarItem>Find</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+      <p className="text-sm text-muted-foreground">
+        Menubar is a non-dropdown primitive. Use it as a command surface for quick contextual actions.
+      </p>
+    </div>
+  )
+}
+

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

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