tembro 3.1.17 → 4.0.1

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

@@ -1,22 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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"
-type BadgeVariant = ComponentDemoProps["state"]["badgeVariant"]
-
-export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
-  const variants: BadgeVariant[] = ["default", "secondary", "soft", "destructive", "outline", "ghost", "link"]
-  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" as const) : ("secondary" as const)}
-                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 variant="soft" tone="info" label="Synced" dot />
-                <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

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

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

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

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

@@ -1,27 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const breadcrumbsMock: ComponentDemoMock = {
-  code: `import { Breadcrumbs } from "tembro"
-
-const items = [
-  { key: "home", label: "Home", href: "/" },
-  { key: "products", label: "Products", href: "/products" },
-  { key: "active", label: "Overview", current: true },
-]
-
-export function Example() {
-  return <Breadcrumbs items={items} separator="/" />
-}`,
-  highlights: ["Readable route context", "Current route flagging", "Custom separator support", "Custom link rendering hook"],
-  scenarios: [
-    { title: "Deep navigation", description: "Render nested routes with one-line context breadcrumbs." },
-    { title: "Router links", description: "Provide hrefs for SPA links or custom render for router primitives." },
-    { title: "Page headings", description: "Use with PageHeader when users need location confirmation." },
-  ],
-  capabilityNotes: [
-    "Keep the last item marked as current so focus and navigation patterns stay consistent.",
-    "Custom separators can match your design language without breaking semantics.",
-    "Inject router-specific links through `renderLink` for framework compatibility.",
-  ],
-}
-

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

@@ -1,61 +0,0 @@
-import * as React from "react"
-
-import { Badge, Breadcrumbs, Button } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const pages = [
-  { key: "home", label: "Home", href: "/" },
-  { key: "apps", label: "Apps", href: "/apps" },
-  { key: "workspace", label: "Workspace", href: "/apps/workspace" },
-  { key: "team", label: "Team settings", href: "/apps/workspace/team" },
-  { key: "security", label: "Security", href: "/apps/workspace/team/security" },
-  { key: "overview", label: "Overview", current: true },
-]
-
-const compactPages = [
-  { key: "home", label: "Home", href: "/" },
-  { key: "dashboard", label: "Dashboard", current: true },
-]
-
-export function BreadcrumbsShowcase({ mode }: ComponentDemoProps) {
-  const [activeMode, setActiveMode] = React.useState<"full" | "compact">("full")
-
-  const selectedItems = React.useMemo(() => (activeMode === "full" ? pages : compactPages), [activeMode])
-  const separator = activeMode === "full" ? "/" : <span className="px-1 aui-text-muted">→</span>
-
-  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">Path context</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Breadcrumbs should answer where the user is</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Full path</Badge>
-            <Badge variant="outline" className="rounded-full">Compact path</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-3">
-          <Button size="sm" variant={activeMode === "full" ? "default" : "outline"} onClick={() => setActiveMode("full")}>
-            Full path
-          </Button>
-          <Button size="sm" variant={activeMode === "compact" ? "default" : "outline"} onClick={() => setActiveMode("compact")}>
-            Compact path
-          </Button>
-        </div>
-      ) : null}
-
-      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3">
-        <Breadcrumbs items={selectedItems} separator={separator} maxItems={activeMode === "full" ? 4 : undefined} />
-      </div>
-    </div>
-  )
-}

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

@@ -1,40 +0,0 @@
-import type { ButtonDemoRow } from "./types"
-
-export const buttonDemoRows: ButtonDemoRow[] = [
-  {
-    title: "Variant coverage",
-    actions: [
-      { label: "Primary", variant: "default" },
-      { label: "Secondary", variant: "secondary" },
-      { label: "Outline", variant: "outline" },
-      { label: "Destructive", variant: "destructive" },
-      { label: "Ghost", variant: "ghost" },
-    ],
-  },
-  {
-    title: "Button sizes",
-    actions: [
-      { label: "Small", variant: "outline", size: "sm" },
-      { label: "Default", variant: "outline" },
-      { label: "Large", variant: "outline", size: "lg" },
-      { label: "Icon only", variant: "default", size: "icon", icon: "download" },
-    ],
-  },
-  {
-    title: "Icon and state actions",
-    actions: [
-      { label: "Download", variant: "outline", icon: "download" },
-      { label: "Continue", variant: "default", icon: "arrow" },
-      { label: "Loading", variant: "default", loading: true },
-      { label: "Disabled", variant: "secondary", disabled: true },
-    ],
-  },
-  {
-    title: "Link behavior",
-    actions: [
-      { label: "Inline link", variant: "link" },
-      { label: "Link as button", variant: "outline", asLink: true },
-      { label: "Route button", variant: "default", asLink: true, size: "sm" },
-    ],
-  },
-]

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

@@ -1,4 +0,0 @@
-export { ButtonShowcase } from "./showcase"
-export { buttonMock } from "./mock"
-export { buttonDemoRows } from "./data"
-export type { ButtonDemoAction, ButtonDemoRow } from "./types"

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

@@ -1,92 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const buttonMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { ArrowRightIcon, DownloadIcon } from "lucide-react"
-import { Button, buttonVariants } from "tembro"
-
-export function BasicExamples() {
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-3">
-        <Button variant="default">Primary</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="destructive">Destructive</Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <Button size="sm">Small</Button>
-        <Button iconOnly aria-label="Download">
-          <DownloadIcon className="size-4" />
-        </Button>
-        <Button>
-          Continue
-          <ArrowRightIcon className="ml-2 size-4" />
-        </Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <Button variant="outline" size="sm" disabled>
-          Disabled
-        </Button>
-        <Button variant="default" loading>
-          Loading
-        </Button>
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
-          Link styled as button
-        </a>
-      </div>
-    </div>
-  )
-}
-
-export function ControlledButton() {
-  const [loading, setLoading] = React.useState(false)
-
-  return (
-    <Button
-      variant="default"
-      onClick={() => {
-        setLoading(true)
-        window.setTimeout(() => setLoading(false), 1800)
-      }}
-      loading={loading}
-    >
-      Submit
-    </Button>
-  )
-}
-
-// Don't overuse buttonVariants for every button instance.
-// Use Button's own variant/size props by default, and keep buttonVariants
-// only for styling non-button elements (a, Link) with shared look.`,
-  htmlCode: `<button data-slot="button" data-variant="primary">
-  Continue
-</button>`,
-  cliCommand: "npx tembro add button",
-  highlights: [
-    "Primary/secondary/outline/destructive/ghost/link and size tokens",
-    "Icon slots with helper text and compact icon-only variant",
-    "Loading and disabled interactive states",
-    "buttonVariants utility usage for link-like elements",
-  ],
-  relatedBlockSlugs: ["auth-sign-in", "settings-form", "sidebar-layout"],
-  scenarios: [
-    { title: "Primary CTA", description: "Lead users toward the highest-priority action." },
-    { title: "Utility action", description: "Use compact outline buttons for secondary workflows." },
-    { title: "Destructive confirm", description: "Use strong color contrast for irreversible actions." },
-    { title: "Link behavior", description: "Prefer semantic <a> when navigation is required." },
-    { title: "When not to use variants", description: "Avoid using variants as a general utility class system for custom markup; use native controls/components instead." },
-  ],
-  capabilityNotes: [
-    "Supports primary, secondary, outline, ghost, link and destructive visual styles.",
-    "Supports size tokens: sm, default, lg and icon.",
-    "Works in inline rows, full-width action areas and dense toolbars.",
-    "Supports focus, disabled and loading states for safe async interactions.",
-    "Use buttonVariants for non-button elements, but keep Button variant props for real button usage.",
-  ],
-}

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

@@ -1,244 +0,0 @@
-import * as React from "react"
-import { ArrowRightIcon, DownloadIcon, Trash2Icon } from "lucide-react"
-
-import { Badge, Button, buttonVariants } from "@/index"
-
-const variants = [
-  ["Default", "default"],
-  ["Secondary", "secondary"],
-  ["Outline", "outline"],
-  ["Ghost", "ghost"],
-  ["Destructive", "destructive"],
-] as const
-
-const states = ["Ready", "Focus", "Loading", "Disabled"] as const
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-function VariantRow({
-  label,
-  variant,
-}: {
-  label: string
-  variant: (typeof variants)[number][1]
-}) {
-  return (
-    <div className="grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center">
-      <div>
-        <p className="aui-text-strong text-sm font-semibold">{label}</p>
-        <p className="aui-text-muted mt-1 text-xs">npm package variant</p>
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        <Button variant={variant}>{label}</Button>
-        <Button variant={variant} size="sm">Small</Button>
-        <Button variant={variant} iconOnly aria-label={`${label} icon button`}>
-          <ArrowRightIcon className="size-4" />
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-function StateButton({
-  state,
-  variant,
-}: {
-  state: (typeof states)[number]
-  variant: (typeof variants)[number][1]
-}) {
-  if (state === "Loading") {
-    return (
-      <Button variant={variant} loading loadingLabel="Saving">
-        Save
-      </Button>
-    )
-  }
-
-  return (
-        <Button
-          variant={variant}
-          pressed={state === "Focus"}
-          disabled={state === "Disabled"}
-          className={state === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : undefined}
-        >
-      {state}
-    </Button>
-  )
-}
-
-export function ButtonShowcase() {
-  const [selectedVariant, setSelectedVariant] = React.useState<(typeof variants)[number][1]>("default")
-  const [approvalState, setApprovalState] = React.useState<"idle" | "saving" | "done">("idle")
-  const [clickCount, setClickCount] = React.useState(0)
-
-  const approveInvoice = () => {
-    setClickCount((value) => value + 1)
-    setApprovalState("saving")
-    window.setTimeout(() => setApprovalState("done"), 850)
-  }
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed from npm</p>
-        <h3 className="aui-text-strong mt-3 text-2xl font-semibold tracking-tight">Real tembro buttons</h3>
-        <p className="aui-text-muted mt-3 max-w-2xl text-sm leading-6">
-          This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start">
-          <div>
-            <p className="aui-text-strong text-lg font-semibold">Approval action row</p>
-            <p className="aui-text-muted mt-2 max-w-xl text-sm leading-6">
-              Primary, secondary and outline actions should read clearly without custom wrapper styles.
-            </p>
-
-            <div className="mt-5 flex flex-wrap gap-2">
-              {variants.map(([label, variant]) => (
-                <Button
-                  key={variant}
-                  type="button"
-                  size="sm"
-                  variant={selectedVariant === variant ? "default" : "outline"}
-                  onClick={() => setSelectedVariant(variant)}
-                >
-                  {label}
-                </Button>
-              ))}
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="aui-text-strong text-sm font-semibold">Invoice #4821</p>
-                <p className="aui-text-muted mt-1 text-xs">Requires finance approval</p>
-              </div>
-              <Badge variant={approvalState === "done" ? "secondary" : "outline"}>
-                {approvalState === "idle" ? "Pending" : approvalState === "saving" ? "Saving" : "Approved"}
-              </Badge>
-            </div>
-
-            <div className="mt-4 flex flex-wrap items-center gap-2">
-              <Button variant="secondary" onClick={() => setClickCount((value) => value + 1)}>
-                Save draft
-              </Button>
-              <Button variant="outline">Preview</Button>
-              <Button
-                variant={selectedVariant}
-                fullWidth
-                loading={approvalState === "saving"}
-                loadingLabel="Approving"
-                onClick={approveInvoice}
-              >
-                {approvalState === "done" ? "Approved" : "Approve invoice"}
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-3 md:grid-cols-4">
-          <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">Primary</p>
-            <p className="mt-2 leading-6 aui-text-muted">Main action with filled emphasis.</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">Secondary</p>
-            <p className="mt-2 leading-6 aui-text-muted">Alternative action without stealing focus.</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">Outline</p>
-            <p className="mt-2 leading-6 aui-text-muted">Low-emphasis action for previews and neutral workflows.</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">Destructive</p>
-            <p className="mt-2 leading-6 aui-text-muted">Reserved for archive, delete, or dangerous transitions.</p>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
-          <div>
-            <p className="aui-text-strong text-lg font-semibold">Interaction states</p>
-            <p className="aui-text-muted mt-2 max-w-xl text-sm leading-6">
-              Keep the important states visible without a heavy table or nested card matrix.
-            </p>
-            <div className="mt-5 grid gap-3 sm:grid-cols-2">
-              {states.map((state) => (
-                <div key={state} className="flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3">
-                  <span className="aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]">{state}</span>
-                  <StateButton state={state} variant={selectedVariant} />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div>
-            <p className="aui-text-strong text-lg font-semibold">Variant rail</p>
-            <p className="aui-text-muted mt-2 max-w-xl text-sm leading-6">
-              All variants use the same exported Button API.
-            </p>
-            <div className="mt-2">
-              {variants.map(([label, variant]) => (
-                <VariantRow key={variant} label={label} variant={variant} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-5 xl:grid-cols-[1fr_1fr]">
-          <div>
-            <p className="aui-text-strong text-lg font-semibold">Production footer</p>
-            <p className="aui-text-muted mt-2 max-w-xl text-sm leading-6">
-              A compact footer pattern for forms, settings pages and dashboard actions.
-            </p>
-            <div className="mt-5 flex flex-wrap items-center gap-2">
-              <Button variant="secondary">Save draft</Button>
-              <Button variant="outline">Preview</Button>
-              <Button>
-                Continue
-                <ArrowRightIcon className="ml-2 size-4" />
-              </Button>
-            </div>
-          </div>
-
-          <div>
-            <p className="aui-text-strong text-lg font-semibold">Icon, async and danger</p>
-            <p className="aui-text-muted mt-2 max-w-xl text-sm leading-6">
-              Loading and disabled states stay readable; destructive actions remain visually distinct.
-            </p>
-            <div className="mt-5 flex flex-wrap items-center gap-2">
-              <Button variant="destructive">
-                <Trash2Icon className="mr-2 size-4" />
-                Delete
-              </Button>
-              <Button loading loadingLabel="Publishing">
-                Publish
-              </Button>
-              <Button variant="outline" iconOnly aria-label="Download">
-                <DownloadIcon className="size-4" />
-              </Button>
-              <a href="#" className={buttonVariants({ variant: "link" })}>
-                Text link
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap items-center gap-3 text-sm">
-          <span className="aui-text-muted">Interaction count:</span>
-          <Badge variant="secondary">{clickCount}</Badge>
-          <span className="aui-text-muted">Selected variant:</span>
-          <Badge variant="outline">{selectedVariant}</Badge>
-        </div>
-      </section>
-    </div>
-  )
-}