tembro 3.1.1 → 3.1.5

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

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

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

@@ -1,66 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const appShellMock: ComponentDemoMock = {
-  code: `import { AppHeader, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, Sidebar, SidebarNav, Button } from "tembro"
-
-const navItems = [
-  { key: "overview", label: "Overview", href: "/overview", active: true },
-  { key: "products", label: "Products", href: "/products" },
-  { key: "settings", label: "Settings", href: "/settings" },
-]
-
-const metrics = [
-  { key: "mrr", label: "MRR", value: "$84k", description: "+14% vs last month", trend: "up" },
-  { key: "sessions", label: "Active sessions", value: "1,240", description: "12% live growth" },
-  { key: "issues", label: "Open issues", value: "23", description: "3 priority", trend: "down" },
-]
-
-export function Example() {
-  return (
-    <AppShell
-      sidebarWidth="default"
-      mainClassName="p-4"
-      sidebar={
-        <Sidebar
-          header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-          footer={<div className="px-3 py-2 text-xs aui-text-muted">v1.2.0</div>}
-        >
-          <SidebarNav items={navItems} />
-        </Sidebar>
-      }
-      header={<AppHeader left="Admin Console" right={<Button variant="outline">Open command</Button>} />}
-      aside={<InfoCard title="Workspace" description="Metrics, alerts, and quick access cards." compact>Aside slot keeps secondary context near main content.</InfoCard>}
-    >
-      <PageContainer size="lg">
-        <PageHeader
-          eyebrow="Product dashboard"
-          title="Teams and activity"
-          description="Use shell slots for consistent layout and mobile-safe nav control."
-          breadcrumbs={<Breadcrumbs items={[
-            { key: "home", label: "Home", href: "/" },
-            { key: "dashboard", label: "Dashboard", current: true },
-          ]} />}
-          actions={<Button variant="outline" size="sm">Manage</Button>}
-        />
-        <div className="mt-4">
-          <MetricGrid items={metrics} compact />
-        </div>
-      </PageContainer>
-    </AppShell>
-  )
-}`,
-  cliCommand: "npx tembro add app-shell",
-  highlights: ["Shell slots (header, sidebar, aside)", "Static and mobile sidebar behavior", "Breadcrumbs inside page header", "Metric block composition"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
-  scenarios: [
-    { title: "Dashboard shell", description: "Build an app frame with reusable header, sidebar and aside areas." },
-    { title: "Router-aware layout", description: "Keep navigation and route content separated by region for SPA and SSR pages." },
-    { title: "Mobile fallback", description: "Toggle mobile menu and keep aside optional for narrow screens." },
-  ],
-  capabilityNotes: [
-    "Use AppShell when every page shares a stable structure: header, sidebar, main and optional aside.",
-    "Keep sidebar composition explicit so route-level content stays predictable and testable.",
-    "Pass controlled `sidebarCollapsed` and `mobileSidebarOpen` when app state is owned by a global layout manager.",
-    "Avoid overloading the aside region in mobile contexts; hide non-essential context when needed.",
-  ],
-}

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

@@ -1,114 +0,0 @@
-import * as React from "react"
-
-import { Badge, Breadcrumbs, Button, InfoCard, MetricGrid, PageContainer, SidebarNav } from "@/index"
-import { AppHeader } from "@/components/layout/app-header"
-import { Sidebar } from "@/components/layout/app-sidebar"
-import { PageHeader } from "@/components/layout/page-header"
-
-import type { ComponentDemoProps } from "../types"
-
-const navigationItems = [
-  { key: "overview", label: "Overview", href: "#overview" },
-  { key: "products", label: "Products", href: "#products" },
-  { key: "billing", label: "Billing", href: "#billing" },
-  { key: "settings", label: "Settings", href: "#settings" },
-]
-
-const metrics = [
-  { key: "mrr", label: "MRR", value: "$64k", description: "11% vs last week", tone: "success" as const },
-  { key: "users", label: "Users", value: "1,020", description: "3% churn risk", tone: "warning" as const },
-  { key: "tasks", label: "Tasks", value: "58", description: "5 in progress", tone: "info" as const },
-  { key: "response", label: "Latency", value: "1.2s", description: "P95 API response", tone: "default" as const },
-]
-
-export function AppShellShowcase({ mode }: ComponentDemoProps) {
-  const [active, setActive] = React.useState("overview")
-  const [collapsed, setCollapsed] = React.useState(false)
-
-  const navItems = navigationItems.map((item) => ({
-    ...item,
-    active: item.key === active,
-    onSelect: () => setActive(item.key),
-  }))
-
-  const activeLabel = navigationItems.find((item) => item.key === active)?.label ?? "Overview"
-
-  return (
-    <div className="space-y-5">
-      <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Application frame</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Reusable shell preview</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">
-              Header, sidebar, main content and aside should feel like one predictable route frame.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Header</Badge>
-            <Badge variant="outline" className="rounded-full">Sidebar</Badge>
-            <Badge variant="outline" className="rounded-full">Aside</Badge>
-          </div>
-        </div>
-      </div>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-3">
-          <Button size="sm" variant={collapsed ? "outline" : "default"} onClick={() => setCollapsed((value) => !value)}>
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          </Button>
-        </div>
-      ) : null}
-
-      <div className="overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
-        <AppHeader
-          className="border-b border-[color:var(--aui-divider)] px-4 py-3"
-          left="Product shell"
-          right={<Button size="sm" variant="outline">Profile</Button>}
-        />
-
-        <div className="grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]">
-          <Sidebar
-            responsive
-            mobileTitle="Workspace navigation"
-            mobileDescription="Open the shell menu first, then move through app routes without squeezing the main content."
-            header={<div className="px-3 py-2 text-sm font-semibold">AZA Studio</div>}
-            footer={<div className="aui-text-muted px-3 py-2 text-xs">Shell footer</div>}
-            className={collapsed ? "lg:w-[92px]" : ""}
-            collapsed={collapsed}
-          >
-            <SidebarNav items={navItems} />
-          </Sidebar>
-
-          <div className="min-w-0 border-x border-[color:var(--aui-divider)] p-4">
-            <PageContainer size="lg">
-              <PageHeader
-                eyebrow="Workspace"
-                title={activeLabel}
-                description="Use shared shell primitives to keep regions stable across routes."
-                breadcrumbs={
-                  <Breadcrumbs
-                    items={[
-                      { key: "home", label: "Home", href: "/" },
-                      { key: "components", label: "Components", href: "/components" },
-                      { key: "active", label: activeLabel, current: true },
-                    ]}
-                  />
-                }
-                actions={<Button size="sm">Manage</Button>}
-              />
-
-              <div className="mt-4">
-                <MetricGrid items={metrics} columns={2} compact />
-              </div>
-            </PageContainer>
-          </div>
-
-          <aside className="hidden p-4 lg:block">
-            <InfoCard title="Quick actions" description="Support content can live in the aside." compact />
-          </aside>
-        </div>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,32 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const clearableInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("workspace token")
-
-  return (
-    <Input
-      value={value}
-      onValueChange={setValue}
-      placeholder="Filter or paste value..."
-      clearable
-      clearOnEscape
-    />
-  )
-}`,
-  cliCommand: "npx tembro add input",
-  highlights: ["Inline clear action", "Escape-to-clear support", "Focus restore after clearing", "Small but high-frequency utility input"],
-  scenarios: [
-    { title: "Filter reset", description: "Let users clear a short filter without hunting for an extra reset button." },
-    { title: "Token paste", description: "Remove a pasted value quickly and stay focused in the same field." },
-    { title: "Toolbar utility", description: "Use in dense admin bars where compact cleanup matters." },
-  ],
-  capabilityNotes: [
-    "Prefer `Input clearable` for short-lived values like filters and quick entry.",
-    "Escape clear is useful only when the input is frequently changed.",
-    "Keep the field visually quiet so the clear action feels secondary.",
-  ],
-}

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

@@ -1,63 +0,0 @@
-import * as React from "react"
-
-import { Badge, Input } 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"
-
-export function ClearableInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = React.useState("workspace token")
-
-  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">Utility input</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">ClearableInput should remove friction from repetitive short entry</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Escape clear</Badge>
-            <Badge variant="outline" className="rounded-full">Focus restore</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <Input
-          value={value}
-          onValueChange={setValue}
-          placeholder="Filter or paste value..."
-          clearable
-          clearOnEscape
-          trailingAction={<span className="text-xs aui-text-muted">Live filter</span>}
-          replaceTrailingWhenClear={false}
-        />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current value</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{value || "Empty"}</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Usage note</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text.
-          </p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">`Escape` bosib ham clear bo‘lishini sinab ko‘ring.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

@@ -1,48 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const comboboxMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, Select } from "tembro"
-
-const teammateOptions = [
-  { value: "azamat", label: "Azamat", description: "Design system owner" },
-  { value: "nodira", label: "Nodira", description: "Operations lead" },
-  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
-]
-
-export function Example() {
-  const [value, setValue] = useState("azamat")
-
-  return (
-    <div className="space-y-3">
-      <Select
-        value={value}
-        onValueChange={(nextValue) => setValue(nextValue ?? "azamat")}
-        options={teammateOptions}
-        placeholder="Assign owner"
-        searchPlaceholder="Search teammate..."
-        searchable
-      />
-      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
-        Current owner: <strong>{value}</strong>
-      </div>
-      <Button variant="outline" onClick={() => setValue("nodira")}>Pick Nodira</Button>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="combobox-trigger">Open combobox</button>`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Search-led selection", "Controlled value", "Description rows", "Fast reassignment flow"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Owner assignment", description: "Use combobox when the list is local but still benefits from search." },
-    { title: "Dense admin forms", description: "Keep reassignment fast without opening a full modal." },
-    { title: "Command-like search", description: "Useful when discoverability matters more than plain select semantics." },
-  ],
-  capabilityNotes: [
-    "Use Combobox when users need type-to-find behavior on a local option set.",
-    "Keep option labels and descriptions short to avoid noisy dropdown rows.",
-    "Prefer controlled value in admin workflows so state stays explicit.",
-    "If options come from the server, move to AsyncSelect instead of overloading Combobox.",
-  ],
-}

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

@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Select } 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 teammateOptions = [
-  { value: "azamat", label: "Azamat", description: "Design system owner" },
-  { value: "nodira", label: "Nodira", description: "Operations lead" },
-  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
-  { value: "kamola", label: "Kamola", description: "Product manager" },
-] as const
-
-export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
-  const currentValue = teammateOptions.some((option) => option.value === state.selectValue) ? state.selectValue : "azamat"
-  const currentOption = teammateOptions.find((option) => option.value === currentValue) ?? teammateOptions[0]
-  const [searchValue, setSearchValue] = React.useState("")
-
-  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 selection</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Combobox is the keyboard-first local member</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Searchable</Badge>
-            <Badge variant="outline" className="rounded-full">Controlled</Badge>
-            <Badge variant="outline" className="rounded-full">Local options</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Assign component owner</p>
-            <div className="mt-3">
-              <Select
-                value={currentValue}
-                options={teammateOptions.map((option) => ({ ...option }))}
-                onValueChange={(value) => setState({ selectValue: value ?? "azamat" })}
-                placeholder="Choose teammate"
-                searchPlaceholder="Search teammate..."
-                searchable
-                clearable
-                showSelectedDescription
-                onSearchChange={setSearchValue}
-              />
-            </div>
-          </div>
-
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Selection summary</p>
-            <p className="mt-3 text-lg font-semibold aui-text-strong">{currentOption.label}</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">{currentOption.description}</p>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">
-              Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead.
-            </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">Current owner: {currentOption.label}</h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Use quick actions below to verify that the value stays controlled outside the dropdown itself.
-            </p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Search query: {searchValue || "empty"}</p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" size="sm" onClick={() => setState({ selectValue: "nodira" })}>
-              Pick Nodira
-            </Button>
-            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ selectValue: "azamat" })}>
-              Reset
-            </Button>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const commandBarMock: ComponentDemoMock = {
-  code: `import { CommandBar, Kbd, Button } from "tembro"
-
-export function Example() {
-  return (
-    <CommandBar>
-      <Kbd>G</Kbd>
-      <Button size="sm" variant="ghost">Go to dashboard</Button>
-      <Button size="sm">Publish</Button>
-    </CommandBar>
-  )
-}`,
-  cliCommand: "npx tembro add command-bar",
-  highlights: [
-    "Floating action rail for global shortcuts or workflow actions",
-    "Top or bottom positioning",
-    "Useful when a few persistent actions should stay reachable",
-  ],
-  scenarios: [
-    { title: "Global actions", description: "Keep a small set of route-level actions always reachable." },
-    { title: "Keyboard hints", description: "Pair actions with shortcuts inside the same persistent rail." },
-    { title: "Review flow", description: "Float approve, reject, and comment actions over long content." },
-  ],
-}

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

@@ -1,69 +0,0 @@
-import * as React from "react"
-import { CheckIcon, MessageSquareIcon, XIcon } from "lucide-react"
-
-import { Button, CommandBar, Kbd } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function CommandBarShowcase() {
-  const [position, setPosition] = React.useState<"bottom" | "top">("bottom")
-  const [open, setOpen] = React.useState(true)
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed navigation helper</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CommandBar keeps a few high-value actions nearby</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          This is not a replacement for every footer or toolbar. Use it when persistent floating actions improve a long reading or review flow.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="rounded-[28px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-6">
-          <div className="flex flex-wrap items-center gap-2">
-            <Button size="sm" variant={open ? "secondary" : "outline"} onClick={() => setOpen((value) => !value)}>
-              {open ? "Hide bar" : "Show bar"}
-            </Button>
-            <Button size="sm" variant={position === "bottom" ? "secondary" : "outline"} onClick={() => setPosition("bottom")}>
-              Bottom
-            </Button>
-            <Button size="sm" variant={position === "top" ? "secondary" : "outline"} onClick={() => setPosition("top")}>
-              Top
-            </Button>
-          </div>
-
-          <div className="relative mt-5 min-h-[320px] overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-            <div className="max-w-2xl">
-              <p className="text-lg font-semibold aui-text-strong">Quarterly release review</p>
-              <p className="mt-3 text-sm leading-6 aui-text-muted">
-                Long content benefits from a small floating action rail when the user must repeatedly approve, reject, or comment without scrolling back to a fixed footer.
-              </p>
-              <div className="mt-6 space-y-3 text-sm leading-6 aui-text-muted">
-                <p>Keep the action set intentionally small. More than three or four actions usually means the bar should become a real toolbar instead.</p>
-                <p>Pair shortcut hints with actions only when the shortcuts are actually supported by the product.</p>
-                <p>The bar should help reading-heavy workflows, not distract from them.</p>
-              </div>
-            </div>
-
-            <CommandBar open={open} position={position} grouped label="Review flow" className="max-w-[calc(100%-2rem)]">
-              <Kbd>G</Kbd>
-              <Button size="sm" variant="ghost">
-                <MessageSquareIcon className="mr-2 size-4" />
-                Comment
-              </Button>
-              <Button size="sm" variant="outline">
-                <XIcon className="mr-2 size-4" />
-                Reject
-              </Button>
-              <Button size="sm">
-                <CheckIcon className="mr-2 size-4" />
-                Approve
-              </Button>
-            </CommandBar>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/copy-field/index.ts

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

package/packages/cli/vendor/src/showcase/premium/copy-field/mock.ts

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const copyFieldMock: ComponentDemoMock = {
-  code: `import { CopyField } from "tembro"
-
-export function Example() {
-  return (
-    <CopyField
-      label="Webhook signing secret"
-      description="Use on the server only."
-      value="whsec_demo_value_123"
-    />
-  )
-}`,
-  cliCommand: "npx tembro add copy-field",
-  highlights: [
-    "Label, helper text, value surface, and copy action in one unit",
-    "Works well for tokens, endpoints, environment values, and invite links",
-    "Monospace value mode for technical strings",
-  ],
-  scenarios: [
-    { title: "Webhook secret", description: "Expose a technical value with safety copy and one clear action." },
-    { title: "Endpoint URL", description: "Share a connection string without making the user select text manually." },
-    { title: "Invite code", description: "Package title and value together inside a settings screen." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/copy-field/showcase.tsx

@@ -1,64 +0,0 @@
-import * as React from "react"
-
-import { Badge, CopyField } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const values = {
-  secret: "whsec_workspace_live_72AJK1P",
-  endpoint: "https://api.tembro.dev/webhooks/events",
-  invite: "ops-release-2026",
-}
-
-export function CopyFieldShowcase() {
-  const [selected, setSelected] = React.useState<keyof typeof values>("secret")
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed action</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CopyField is the complete value + action row</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it when a technical or shareable string needs label, explanation, and copy action together.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div className="space-y-4">
-            <CopyField
-              label="Webhook signing secret"
-              description="Store this on the server only."
-              value={values.secret}
-              copyButtonProps={{ onCopied: () => setSelected("secret") }}
-            />
-            <CopyField
-              label="Event endpoint"
-              description="Public endpoint that receives signed events."
-              value={values.endpoint}
-              copyButtonProps={{ onCopied: () => setSelected("endpoint"), copyLabel: "Copy url" }}
-            />
-            <CopyField
-              label="Invite code"
-              description="Share this with internal release reviewers."
-              value={values.invite}
-              monospace={false}
-              copyButtonProps={{ onCopied: () => setSelected("invite"), variant: "secondary" }}
-            />
-          </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">Recently used row</p>
-              <Badge variant="secondary">{selected}</Badge>
-            </div>
-            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>CopyField is stronger than a naked button because the user never loses context about what will be copied.</p>
-              <p>Prefer it on settings and integration pages. In dense tables, CopyButton alone is usually enough.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}