tembro 1.0.0

package/packages/cli/vendor/src/showcase/premium/aspect-ratio/mock.ts

@@ -0,0 +1,26 @@
+import type { ComponentDemoMock } from "../types"
+
+export const aspectRatioMock: ComponentDemoMock = {
+  code: `import { AspectRatio } from "@/index"
+
+export function Example() {
+  return (
+    <AspectRatio ratio={16 / 9} className="rounded-xl border bg-muted">
+      <div className="grid size-full place-items-center text-sm font-medium text-foreground">
+        16:9 media slot
+      </div>
+    </AspectRatio>
+  )
+}`,
+  cliCommand: "npx tembro add aspect-ratio",
+  highlights: [
+    "Controls media card proportions in one place",
+    "Works for images, iframes, and any fixed-ratio container",
+    "Stable in dashboard and content-heavy layouts",
+  ],
+  scenarios: [
+    { title: "Media hero", description: "Reserve consistent 16:9 ratio for previews." },
+    { title: "Card media", description: "Keep media and text alignment predictable." },
+    { title: "Document preview", description: "Prevent jumpy layouts while content loads." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/aspect-ratio/showcase.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+const ratioLabels: Array<{ label: string; ratio: number }> = [
+  { label: "16:9", ratio: 16 / 9 },
+  { label: "4:3", ratio: 4 / 3 },
+  { label: "1:1", ratio: 1 },
+  { label: "3:4", ratio: 3 / 4 },
+]
+
+import { Button, AspectRatio } from "@/index"
+export function AspectRatioShowcase() {
+  const [active, setActive] = React.useState(0)
+
+  return (
+    <div className="space-y-5">
+      <section className="flex flex-wrap gap-3">
+        {ratioLabels.map((item, index) => (
+          <Button
+            key={item.label}
+            variant={active === index ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActive(index)}
+          >
+            {item.label}
+          </Button>
+        ))}
+      </section>
+
+      <AspectRatio ratio={ratioLabels[active].ratio} className="rounded-2xl border border-border bg-card">
+        <div className="grid h-full place-items-center bg-[linear-gradient(135deg,color-mix(in_oklch,var(--aui-page-bg),transparent_75%),transparent)] p-6 text-center">
+          <p className="text-sm text-muted-foreground">{ratioLabels[active].label}</p>
+          <p className="text-xl font-semibold text-foreground">Adaptive ratio surface</p>
+        </div>
+      </AspectRatio>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,61 @@
+import type { ComponentDemoMock } from "../types"
+
+export const asyncMultiSelectMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { AsyncMultiSelect } from "@/index"
+
+const projectOptions = [
+  { value: "analytics", label: "Analytics", description: "Dashboards and reports" },
+  { value: "billing", label: "Billing", description: "Invoices and subscriptions" },
+  { value: "support", label: "Support", description: "Customer tickets" },
+  { value: "security", label: "Security", description: "Permissions and audit" },
+  { value: "search", label: "Search", description: "Discovery and recommendations" },
+  { value: "archive", label: "Archive", description: "Legacy read-only project", disabled: true },
+]
+
+const loadProjectOptions = async (search: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  const query = search.trim().toLowerCase()
+  if (!query) return projectOptions
+  return projectOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
+}
+
+export function Example() {
+  const [selected, setSelected] = useState<string[]>(["analytics"])
+
+  return (
+    <div className="space-y-3">
+      <AsyncMultiSelect
+        value={selected}
+        onValueChange={(values) => setSelected(values)}
+        loadOptions={loadProjectOptions}
+        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}
+        maxSelected={3}
+        closeOnSelect={false}
+        showSelectAll
+        clearable
+      />
+      <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">
+        Modules: <strong>{selected.length}</strong> selected
+      </div>
+    </div>
+  )
+}`
+  ,
+  htmlCode: `<button data-slot="async-multiselect-trigger">Choose modules</button>`,
+  cliCommand: "npx tembro add async-multi-select",
+  highlights: ["Multiple selected tags", "maxSelected guard", "select-all action", "remove by tag/checkbox"],
+  relatedBlockSlugs: ["users-table", "crm-dashboard", "settings-form"],
+  scenarios: [
+    { title: "Project scope", description: "Attach multiple modules to one workspace or permission set." },
+    { title: "Max selected", description: "Limit selections to keep downstream payloads predictable." },
+    { title: "Keyboard remove", description: "Support tag cleanup for power users in dense inputs." },
+    { title: "Async updates", description: "Keep tags synced with changing remote data." },
+  ],
+  capabilityNotes: [
+    "Use `AsyncMultiSelect` for sparse multi-select forms where dataset changes over time.",
+    "Show clear limits with `maxSelected` and help text from validation.",
+    "`onValueChange` returns both ids and resolved options when custom payloads are needed.",
+    "Disable close-on-select when users are likely to make batch picks.",
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/async-multi-select/showcase.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react"
+
+import { AsyncMultiSelect, type AsyncSelectOption } from "@/index"
+
+const moduleOptions: AsyncSelectOption[] = [
+  { value: "inbox", label: "Inbox" },
+  { value: "analytics", label: "Analytics" },
+  { value: "billing", label: "Billing" },
+  { value: "support", label: "Support" },
+]
+
+const loadModules = async (query: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 240))
+  if (!query) return moduleOptions
+  return moduleOptions.filter((item) => String(item.label ?? "").toLowerCase().includes(query.toLowerCase()))
+}
+
+export function AsyncMultiSelectShowcase() {
+  const [selected, setSelected] = useState<string[]>(["analytics"])
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+        <p className="text-sm font-medium aui-text-strong">AsyncMultiSelect is the multi-value remote member</p>
+        <p className="mt-2 text-sm leading-6 aui-text-muted">
+          Reach for it only when one Select surface must support remote search, visible tags, and multiple chosen values together.
+        </p>
+      </div>
+      <AsyncMultiSelect
+        value={selected}
+        onValueChange={(values) => setSelected(values)}
+        loadOptions={loadModules}
+        maxSelected={3}
+        showSelectAll
+      />
+      <p className="aui-text-muted text-sm">Selected count: {selected.length}</p>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,81 @@
+import type { ComponentDemoMock } from "../types"
+
+export const asyncSelectMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { AsyncSelect, type AsyncSelectOption } from "@/index"
+
+const seedOptions: AsyncSelectOption[] = [
+  { value: "acme", label: "ACME", description: "Core product line" },
+  { value: "nova", label: "Nova", description: "Enterprise clients" },
+  { value: "spark", label: "Spark", description: "Growth workspace" },
+  { value: "atlas", label: "Atlas", description: "Billing team" },
+  { value: "zen", label: "Zen", description: "Ops and support" },
+  { value: "legacy", label: "Legacy", description: "Deprecated workspace", disabled: true },
+]
+
+const loadWorkspaces = async (search: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 420))
+  const query = search.trim().toLowerCase()
+  if (query === "error") {
+    throw new Error("Unable to fetch options for the current query.")
+  }
+
+  if (query.length < 2) return []
+  return seedOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
+}
+
+export function Example() {
+  const [value, setValue] = useState("")
+  const [label, setLabel] = useState("Select workspace")
+
+  return (
+    <div className="space-y-3">
+      <AsyncSelect
+        value={value}
+        onValueChange={(nextValue, option) => {
+          setValue(nextValue ?? "")
+          setLabel(option?.label ? String(option.label) : "Select workspace")
+        }}
+        loadOptions={loadWorkspaces}
+        loadSelectedOption={async (selectedValue) => {
+          await new Promise((resolve) => setTimeout(resolve, 40))
+          return seedOptions.find((option) => option.value === selectedValue) ?? null
+        }}
+        clearable
+        debounceMs={250}
+        minSearchLength={2}
+        defaultOptions={seedOptions}
+      />
+      <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">
+        Selected: <strong>{value || "none"}</strong> — {label}
+      </div>
+      <p className="text-sm aui-text-muted">
+        Set search to <code>error</code> to preview empty/error handling paths.
+      </p>
+      <p className="text-sm aui-text-muted">Disabled items are rendered non-selectable in the list.</p>
+    </div>
+  )
+}`
+,
+  htmlCode: `<button data-slot="async-select-trigger">Choose workspace</button>`,
+  cliCommand: "npx tembro add async-select",
+  highlights: [
+    "Asynchronous loadOptions and loading state support",
+    "Debounced search requests",
+    "Empty/min-search behavior",
+    "Error state handling in query flow",
+  ],
+  relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],
+  scenarios: [
+    { title: "Remote lookup", description: "Search in remote datasets and keep selected value in state." },
+    { title: "Loading state", description: "Let users understand network delay with pending feedback." },
+    { title: "Error fallback", description: "Surface and recoverable errors when option loading fails." },
+    { title: "Minimum query", description: "Avoid noisy requests with `minSearchLength`." },
+  ],
+  capabilityNotes: [
+    "Prefer `AsyncSelect` for datasets that change often, have many rows, or need server filtering.",
+    "Use `loadSelectedOption` when navigating back to preselected rows from an ID-only payload.",
+    "Keep selected value controlled so parent forms can validate and persist immediately.",
+    "Avoid embedding heavy logic in `loadOptions`; return normalized value objects with stable labels.",
+  ],
+}

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

@@ -0,0 +1,92 @@
+import { useState } from "react"
+
+import { AsyncSelect, Badge, type AsyncSelectOption } from "@/index"
+import { routeWorkspaceOptions } from "@/showcase/component-route-data"
+
+const workspaceOptions: AsyncSelectOption[] = routeWorkspaceOptions
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+const loadOptions = async (query: string): Promise<typeof workspaceOptions> => {
+  await new Promise((resolve) => setTimeout(resolve, 260))
+  const normalized = query.trim().toLowerCase()
+  if (!normalized) return workspaceOptions
+  return workspaceOptions.filter((item) => String(item.label ?? "").toLowerCase().includes(normalized))
+}
+
+export function AsyncSelectShowcase() {
+  const [value, setValue] = useState("")
+  const activeOption = routeWorkspaceOptions.find((item) => item.value === value)
+
+  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">Remote selection</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">AsyncSelect is the remote member of the Select family</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Async</Badge>
+            <Badge variant="outline" className="rounded-full">Search</Badge>
+            <Badge variant="outline" className="rounded-full">Clearable</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]">
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Assign service region</p>
+            <div className="mt-3">
+              <AsyncSelect
+                value={value}
+                onValueChange={(nextValue) => setValue(nextValue ?? "")}
+                loadOptions={loadOptions}
+                defaultOptions={workspaceOptions}
+                minSearchLength={1}
+                clearable
+                debounceMs={220}
+              />
+            </div>
+            <div className="mt-4 grid gap-3 md:grid-cols-3">
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+                <p className="font-medium aui-text-strong">Type to query</p>
+                <p className="mt-2 leading-6 aui-text-muted">Minimum search length keeps remote requests intentional.</p>
+              </div>
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+                <p className="font-medium aui-text-strong">Clear safely</p>
+                <p className="mt-2 leading-6 aui-text-muted">Clear action is isolated from the trigger surface.</p>
+              </div>
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
+                <p className="font-medium aui-text-strong">Hydrate selection</p>
+                <p className="mt-2 leading-6 aui-text-muted">Selected value can be restored from ID-first edit state.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Selected result</p>
+            <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{activeOption?.label || "No region selected"}</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.
+            </p>
+            <div className="mt-4 space-y-3">
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Value</p>
+                <p className="mt-2 text-sm font-medium aui-text-strong">{value || "none"}</p>
+              </div>
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Team</p>
+                <p className="mt-2 text-sm font-medium aui-text-strong">{activeOption ? routeWorkspaceOptions.find((item) => item.value === activeOption.value)?.team : "No team"}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,31 @@
+import type { ComponentDemoMock } from "../types"
+
+export const avatarMock: ComponentDemoMock = {
+  code: `import { Avatar, AvatarGroup } from "@/index"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Avatar name="Azamat Jurayev" status="online" />
+      <AvatarGroup
+        items={[
+          { key: "az", name: "Azamat Jurayev", status: "online" },
+          { key: "su", name: "Suhrob Karimov", status: "busy" },
+          { key: "na", name: "Nargiza Saidova", status: "away" },
+        ]}
+      />
+    </div>
+  )
+}`,
+  cliCommand: "npx tembro add avatar",
+  highlights: [
+    "Single avatar plus stacked group export",
+    "Fallback initials, shape, size, and status dot support",
+    "Useful in tables, comments, assignee chips, and team headers",
+  ],
+  scenarios: [
+    { title: "Assignee", description: "Show the current owner with initials fallback and live status." },
+    { title: "Team rail", description: "Stack a small team summary without creating a full user card." },
+    { title: "Review feed", description: "Attach person identity to comments or event rows." },
+  ],
+}

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

@@ -0,0 +1,70 @@
+import { Avatar, AvatarGroup, Badge } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+const team = [
+  { key: "az", name: "Azamat Jurayev", status: "online" as const },
+  { key: "sa", name: "Saida Karimova", status: "busy" as const },
+  { key: "um", name: "Umid Rakhimov", status: "away" as const },
+  { key: "ni", name: "Nigor Akhmedova", status: "online" as const },
+  { key: "ja", name: "Jasur Tursunov", status: "offline" as const },
+]
+
+export function AvatarShowcase() {
+  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">Avatar handles identity without heavy cards</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed.
+        </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">Assignee row</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The component should stay readable in compact operational lists, not only inside profile layouts.
+            </p>
+            <div className="mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+              <Avatar name="Azamat Jurayev" size="lg" status="online" />
+              <div className="min-w-0">
+                <p className="text-sm font-semibold aui-text-strong">Azamat Jurayev</p>
+                <p className="mt-1 text-sm aui-text-muted">Release owner for the current component pass</p>
+              </div>
+              <Badge variant="secondary">Online</Badge>
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <p className="text-sm font-semibold aui-text-strong">Size and shape</p>
+            <div className="mt-4 flex flex-wrap items-center gap-3">
+              <Avatar name="AZ" size="xs" />
+              <Avatar name="AZ" size="sm" shape="rounded" />
+              <Avatar name="AZ" size="default" />
+              <Avatar name="AZ" size="lg" shape="square" />
+              <Avatar name="AZ" size="xl" shape="rounded" />
+            </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">Team summary</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Grouped avatars work best as a compact cue, not a replacement for a full people management panel.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+            <AvatarGroup items={team} max={4} />
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+import type { BadgeDemoItem } from "./types"
+
+export const badgeDemoItems: BadgeDemoItem[] = [
+  { label: "Current", variant: "default", note: "Primary state badge" },
+  { label: "Secondary", variant: "secondary", note: "Supportive metadata" },
+  { label: "Outline", variant: "outline", note: "Light emphasis" },
+  { label: "Alert", variant: "destructive", note: "Critical state" },
+  { label: "Ghost", variant: "ghost", note: "Soft inline state" },
+  { label: "Inline link", variant: "link", note: "Navigational text badge" },
+]

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

@@ -0,0 +1,4 @@
+export { BadgeShowcase } from "./showcase"
+export { badgeMock } from "./mock"
+export { badgeDemoItems } from "./data"
+export type { BadgeDemoItem } from "./types"

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

@@ -0,0 +1,22 @@
+import type { ComponentDemoMock } from "../types"
+
+export const badgeMock: ComponentDemoMock = {
+  code: `import { Badge } from "tembro"\n\nexport function Example() {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Badge status="success" label="Active" />\n      <Badge status="warning" label="Needs review" />\n      <Badge variant="secondary" label="Invoices" count={12} />\n      <Badge variant="outline" label="Design" removable onRemove={() => console.log("remove")} />\n    </div>\n  )\n}\n`,
+  htmlCode: `<span data-slot="badge" data-variant="secondary">New</span>`,
+  cliCommand: "npx tembro add badge",
+  highlights: ["Status props", "Count chip", "Removable chip", "Compact metadata"],
+  relatedBlockSlugs: ["users-table", "crm-dashboard", "dashboard-starter"],
+  scenarios: [
+    { title: "Release status", description: "Show current lifecycle state beside titles and cards." },
+    { title: "Filter metadata", description: "Use badges to display chips and selected states." },
+    { title: "Count surfaces", description: "Embed small counters in headers and toolbars." },
+    { title: "Inline annotations", description: "Tag records, table rows and templates with short metadata." },
+  ],
+  capabilityNotes: [
+    "Use status for ready-made semantic tones instead of manually picking every badge color.",
+    "Use count when the chip also needs a compact number bubble.",
+    "Use removable with onRemove for filter chips and selected metadata.",
+    "Avoid using badges as primary interactive controls; pair with buttons or links when action needed.",
+  ],
+}
+

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

@@ -0,0 +1,148 @@
+import * as React from "react"
+import { Badge, Button } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { badgeDemoItems } from "./data"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
+  const variants = ["default", "secondary", "destructive", "outline", "ghost", "link"] as const
+  const activeItem = badgeDemoItems.find((item) => item.variant === state.badgeVariant) ?? badgeDemoItems[0]
+  const [chipVisible, setChipVisible] = React.useState(true)
+
+  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">Status</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Badges should stay secondary</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Use them for metadata and state, not as the main content block.</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">Variant</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{state.badgeVariant}</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">Current</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{activeItem.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">Samples</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{badgeDemoItems.length}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="space-y-5">
+          <div className="flex flex-wrap gap-2">
+            {variants.map((variant) => (
+              <Button
+                key={variant}
+                type="button"
+                size="sm"
+                variant={state.badgeVariant === variant ? "default" : "secondary"}
+                onClick={() => setState({ badgeVariant: variant })}
+              >
+                {variant}
+              </Button>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            {badgeDemoItems.map((item, index) => (
+              <Badge
+                key={item.label}
+                variant={index === 0 ? state.badgeVariant : item.variant}
+                status={index === 0 ? "success" : undefined}
+                count={index === 1 ? 12 : undefined}
+              >
+                {item.label}
+              </Badge>
+            ))}
+          </div>
+
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]">
+            <div className="space-y-4">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Live example</p>
+                  <p className="mt-2 text-lg font-semibold aui-text-strong">Customer workspace</p>
+                </div>
+                <Badge variant={state.badgeVariant} status="success" label={activeItem.label} />
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                {[
+                  ["Plan", "Growth"],
+                  ["Owner", "Azamat"],
+                  ["Last sync", "2 min ago"],
+                ].map(([label, value]) => (
+                  <div key={label} className="inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2">
+                    <span className="text-xs aui-text-muted">{label}</span>
+                    <span className="text-sm font-medium aui-text-strong">{value}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4">
+                <Badge variant="secondary" label="Customers" count={18} />
+                <Badge status="warning" label="Pending approval" />
+                {chipVisible ? (
+                  <Badge
+                    variant="outline"
+                    label="Design owner"
+                    removable
+                    onRemove={() => setChipVisible(false)}
+                  />
+                ) : (
+                  <Button size="sm" variant="secondary" onClick={() => setChipVisible(true)}>
+                    Restore chip
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            <div className="border-y border-[color:var(--aui-divider)]">
+              {badgeDemoItems.map((item) => (
+                <div key={item.label} className="flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0">
+                  <div className="min-w-0">
+                    <p className="text-sm font-semibold aui-text-strong">{item.label}</p>
+                    <p className="mt-1 text-sm leading-6 aui-text-muted">{item.note}</p>
+                  </div>
+                  <Badge
+                    variant={item.variant}
+                    status={item.label === "Live" ? "success" : item.label === "Review" ? "warning" : undefined}
+                    label={item.label}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {badgeDemoItems.map((item) => (
+              <div key={item.label} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+                <div className="flex items-center justify-between gap-3">
+                  <Badge variant={item.variant} label={item.label} count={item.label === "Queued" ? 4 : undefined} />
+                  <span className="text-[11px] uppercase tracking-[0.2em] aui-text-muted">sample</span>
+                </div>
+                <p className="mt-3 text-sm leading-6 aui-text-muted">{item.note}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export type BadgeDemoItem = {
+  label: string
+  variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  note: string
+}