tembro 3.1.17 → 4.0.0

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

@@ -1,23 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tableMock: ComponentDemoMock = {
-  code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "tembro"\n\nexport function Example() {\n  return (\n    <Table>\n      <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n      <TableBody><TableRow><TableCell>Tembro</TableCell></TableRow></TableBody>\n    </Table>\n  )\n}`,
-  htmlCode: `<table data-slot="table">\n  <thead><tr><th>Name</th><th>Status</th><th>Revenue</th></tr></thead>\n  <tbody><tr><td>Acme Dashboard</td><td>Live</td><td>$24,780</td></tr></tbody>\n</table>`,
-  cliCommand: "npx tembro add table",
-  highlights: ["Header rows", "Body rows", "Hover states", "Compact reporting"],
-  relatedBlockSlugs: ["users-table", "invoices-page", "dashboard-starter"],
-  scenarios: [
-    { title: "User lists", description: "Render compact admin tables with readable structure." },
-    { title: "Invoice reports", description: "Present transactional rows with aligned totals." },
-    { title: "Revenue summaries", description: "Use table layouts in dashboards and exports." },
-    { title: "Mobile stacking strategy", description: "Document how rows and columns should degrade in narrow layouts." },
-  ],
-  capabilityNotes: [
-    "Provides semantic table structure with header, row and cell helpers.",
-    "Targets reporting, finance and admin list use cases.",
-    "Needs explicit responsive guidance for tablet and mobile layouts.",
-    "Should document hover, dense row and aligned numeric column usage.",
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/premium/table/rows.json

@@ -1,6 +0,0 @@
-[
-  { "id": "tbl-001", "name": "Acme Dashboard", "status": "Live", "revenue": "$24,780", "owner": "Azamat", "device": "Desktop" },
-  { "id": "tbl-002", "name": "CRM Workspace", "status": "Review", "revenue": "$12,420", "owner": "Nodira", "device": "Tablet" },
-  { "id": "tbl-003", "name": "Store Command", "status": "Draft", "revenue": "$8,190", "owner": "Sardor", "device": "Mobile" },
-  { "id": "tbl-004", "name": "Finance Dock", "status": "Live", "revenue": "$31,040", "owner": "Malika", "device": "Desktop" }
-]

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

@@ -1,161 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { tableDemoRows, tableDemoStats } from "./data"
-
-export function TableShowcase({ mode }: ComponentDemoProps) {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([tableDemoRows[0]?.id ?? ""])
-  const [activeRowId, setActiveRowId] = React.useState<string>(tableDemoRows[0]?.id ?? "")
-
-  function toggleRow(id: string) {
-    setSelectedIds((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]))
-  }
-
-  const activeRow = tableDemoRows.find((row) => row.id === activeRowId) ?? tableDemoRows[0]
-
-  return (
-    <div className="space-y-5">
-      {mode === "playground" ? (
-        <div className="grid gap-3 md:grid-cols-3">
-          {tableDemoStats.map((item) => (
-            <div key={item.label} className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-              <p className="aui-text-muted text-sm">{item.label}</p>
-              <p className="aui-text-strong mt-2 text-lg font-semibold">{item.value}</p>
-              <p className="aui-text-subtle mt-2 text-sm leading-6">{item.note}</p>
-            </div>
-          ))}
-        </div>
-      ) : null}
-
-      <div className="rounded-[24px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline">{selectedIds.length} selected</Badge>
-            <Badge variant="outline">Row click enabled</Badge>
-            <Badge variant="outline">Mobile cards ready</Badge>
-          </div>
-          {mode === "playground" ? (
-            <div className="flex gap-2">
-              <Button variant="outline" size="sm" onClick={() => setSelectedIds(tableDemoRows.slice(0, 2).map((row) => row.id))}>Select top 2</Button>
-              <Button variant="outline" size="sm" onClick={() => setSelectedIds([])}>Clear</Button>
-            </div>
-          ) : null}
-        </div>
-
-        <div className="hidden overflow-x-auto md:block">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-14">Pick</TableHead>
-                <TableHead>Project</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Owner</TableHead>
-                <TableHead>Device</TableHead>
-                <TableHead className="text-right">Revenue</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {tableDemoRows.map((row) => {
-                const selected = selectedIds.includes(row.id)
-                const active = activeRowId === row.id
-
-                return (
-                  <TableRow
-                    key={row.id}
-                    className={active ? "bg-[color:var(--aui-surface-muted)]" : undefined}
-                    onClick={() => setActiveRowId(row.id)}
-                  >
-                    <TableCell>
-                      <button
-                        type="button"
-                        onClick={(event) => {
-                          event.stopPropagation()
-                          toggleRow(row.id)
-                        }}
-                        className={selected ? "rounded-lg aui-surface-strong px-2.5 py-1 text-xs" : "aui-text-strong rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-xs"}
-                      >
-                        {selected ? "On" : "Off"}
-                      </button>
-                    </TableCell>
-                    <TableCell className="font-medium">{row.name}</TableCell>
-                    <TableCell>
-                      <Badge variant={row.status === "Live" ? "default" : row.status === "Review" ? "secondary" : "outline"}>{row.status}</Badge>
-                    </TableCell>
-                    <TableCell>{row.owner}</TableCell>
-                    <TableCell>{row.device}</TableCell>
-                    <TableCell className="text-right">{row.revenue}</TableCell>
-                  </TableRow>
-                )
-              })}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="grid gap-3 md:hidden">
-          {tableDemoRows.map((row) => {
-            const selected = selectedIds.includes(row.id)
-            const active = activeRowId === row.id
-
-            return (
-              <button
-                key={row.id}
-                type="button"
-                onClick={() => setActiveRowId(row.id)}
-                className={active ? "rounded-[20px] aui-surface-strong border-[color:var(--aui-surface-strong)] p-4 text-left" : "rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4 text-left"}
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <p className="font-medium">{row.name}</p>
-                    <p className={active ? "mt-1 text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]" : "aui-text-muted mt-1 text-sm"}>{row.owner} • {row.device}</p>
-                  </div>
-                  <Badge variant={active ? "secondary" : row.status === "Live" ? "default" : row.status === "Review" ? "secondary" : "outline"}>{row.status}</Badge>
-                </div>
-                <div className="mt-4 flex items-center justify-between">
-                  <span className={active ? "text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]" : "aui-text-muted text-sm"}>Revenue</span>
-                  <span className="font-semibold">{row.revenue}</span>
-                </div>
-                <div className="mt-4">
-                  <button
-                    type="button"
-                    onClick={(event) => {
-                      event.stopPropagation()
-                      toggleRow(row.id)
-                    }}
-                    className={selected ? "aui-text-strong rounded-xl bg-[color:var(--aui-surface)] px-3 py-2 text-sm" : active ? "rounded-xl border border-[color:var(--aui-surface-border)] px-3 py-2 text-sm text-[color:var(--aui-surface-strong-foreground)]" : "aui-text-subtle rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm"}
-                  >
-                    {selected ? "Selected" : "Select row"}
-                  </button>
-                </div>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-
-      <div className="rounded-[24px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-        <p className="aui-text-strong text-sm font-medium">Active row details</p>
-        <div className="mt-3 grid gap-3 md:grid-cols-4">
-          <div className="rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-            <p className="aui-text-muted text-xs uppercase tracking-[0.2em]">Project</p>
-            <p className="aui-text-strong mt-2 text-sm font-medium">{activeRow?.name}</p>
-          </div>
-          <div className="rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-            <p className="aui-text-muted text-xs uppercase tracking-[0.2em]">Owner</p>
-            <p className="aui-text-strong mt-2 text-sm font-medium">{activeRow?.owner}</p>
-          </div>
-          <div className="rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-            <p className="aui-text-muted text-xs uppercase tracking-[0.2em]">Device</p>
-            <p className="aui-text-strong mt-2 text-sm font-medium">{activeRow?.device}</p>
-          </div>
-          <div className="rounded-2xl bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-            <p className="aui-text-muted text-xs uppercase tracking-[0.2em]">Revenue</p>
-            <p className="aui-text-strong mt-2 text-sm font-medium">{activeRow?.revenue}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,14 +0,0 @@
-export type TableDemoRow = {
-  id: string
-  name: string
-  status: "Live" | "Review" | "Draft"
-  revenue: string
-  owner: string
-  device: "Desktop" | "Tablet" | "Mobile"
-}
-
-export type TableDemoStat = {
-  label: string
-  value: string
-  note: string
-}

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

@@ -1,7 +0,0 @@
-import type { TabsDemoPanel } from "./types"
-
-export const tabsDemoPanels: TabsDemoPanel[] = [
-  { value: "overview", label: "Overview", content: "Overview panel with KPIs and summary cards." },
-  { value: "activity", label: "Activity", content: "Activity timeline with notifications and recent edits." },
-  { value: "settings", label: "Settings", content: "Settings controls and preferences for the current workspace." },
-]

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

@@ -1,4 +0,0 @@
-export { TabsShowcase } from "./showcase"
-export { tabsMock } from "./mock"
-export { tabsDemoPanels } from "./data"
-export type { TabsDemoPanel } from "./types"

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

@@ -1,21 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tabsMock: ComponentDemoMock = {
-  code: `import { useState } from "react"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from "tembro"\n\nexport function Example() {\n  const [value, setValue] = useState("overview")\n\n  return (\n    <Tabs value={value} onValueChange={setValue} defaultValue="overview">\n      <TabsList>\n        <TabsTrigger value="overview">Overview</TabsTrigger>\n        <TabsTrigger value="activity">Activity</TabsTrigger>\n        <TabsTrigger value="settings">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value="overview">Overview panel with KPIs.</TabsContent>\n      <TabsContent value="activity">Activity timeline and history.</TabsContent>\n      <TabsContent value="settings">Settings controls and workspace preferences.</TabsContent>\n    </Tabs>\n  )\n}\n\n// Use Tabs for local content sections.\n// For route transitions, prefer router-based tabs to persist deep links.`,
-  cliCommand: "npx tembro add tabs",
-  highlights: ["Segmented navigation", "Panel switching", "Controlled value", "Settings sections", "Keyboard interaction"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
-  scenarios: [
-    { title: "Sectioned detail page", description: "Swap content panels without navigating away." },
-    { title: "Settings layout", description: "Split preferences into clear topical groups." },
-    { title: "Reporting pages", description: "Use tabs for overview, activity and settings views." },
-    { title: "Template detail route", description: "Keep multiple previews in one route with explicit sections." },
-  ],
-  capabilityNotes: [
-    "Supports segmented triggers and controlled content panels.",
-    "Fits settings, reporting and detail-page information architecture.",
-    "Show default selected state and content swaps clearly.",
-    "Use with local content sections; use route tabs when deep-linking is required.",
-  ],
-}
-

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

@@ -1,129 +0,0 @@
-import { ActivityIcon, BellIcon, FileTextIcon, SettingsIcon, ShieldIcon, UsersIcon } from "lucide-react"
-
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { tabsDemoPanels } from "./data"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function TabsShowcase({ state, setState }: ComponentDemoProps) {
-  const activePanel = tabsDemoPanels.find((panel) => panel.value === state.activeTab)
-
-  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">
-        <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">View switching</p>
-        <h3 className="aui-text-strong mt-3 text-2xl font-semibold tracking-tight">Tabs should read like page sections</h3>
-        <p className="aui-text-muted mt-3 max-w-2xl text-sm leading-6">Overview, activity and settings stay separated without turning the screen into a navigation maze.</p>
-      </section>
-
-      <section className="grid gap-3 md:grid-cols-3">
-        <div className={panelClass}>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Current tab</p>
-          <p className="mt-3 text-lg font-semibold aui-text-strong">{activePanel?.label}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">The selected view should feel like a real section change, not a tiny state toggle.</p>
-        </div>
-        <div className={panelClass}>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Sections</p>
-          <p className="mt-3 text-lg font-semibold aui-text-strong">{tabsDemoPanels.length} surfaces</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Use a small number of high-signal tabs so the layout stays readable.</p>
-        </div>
-        <div className={panelClass}>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Pattern</p>
-          <p className="mt-3 text-lg font-semibold aui-text-strong">Page sections</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Tabs work best when each panel owns a distinct slice of the workflow.</p>
-        </div>
-      </section>
-
-      <div className={panelClass}>
-        <Tabs value={state.activeTab} onValueChange={(value: string) => setState({ activeTab: value as ComponentDemoProps["state"]["activeTab"] })}>
-          <TabsList overflow="scroll">
-            {tabsDemoPanels.map((panel) => (
-              <TabsTrigger key={panel.value} value={panel.value}>{panel.label}</TabsTrigger>
-            ))}
-          </TabsList>
-          {tabsDemoPanels.map((panel) => (
-            <TabsContent key={panel.value} value={panel.value} className="aui-text-muted mt-4 border-t border-[color:var(--aui-divider)] pt-4 text-sm leading-6">
-              {panel.content}
-            </TabsContent>
-          ))}
-        </Tabs>
-      </div>
-
-      <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">Variants and overflow</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              The same primitive covers underline navigation, compact density, icon labels, and long mobile tab rows.
-            </p>
-          </div>
-          <div className="grid gap-4">
-            <Tabs defaultValue="activity">
-              <TabsList variant="underline" overflow="scroll">
-                <TabsTrigger variant="underline" value="activity"><ActivityIcon />Activity</TabsTrigger>
-                <TabsTrigger variant="underline" value="files"><FileTextIcon />Files</TabsTrigger>
-                <TabsTrigger variant="underline" value="members"><UsersIcon />Members</TabsTrigger>
-                <TabsTrigger variant="underline" value="security"><ShieldIcon />Security</TabsTrigger>
-                <TabsTrigger variant="underline" value="settings"><SettingsIcon />Settings</TabsTrigger>
-              </TabsList>
-            </Tabs>
-            <Tabs defaultValue="compact">
-              <TabsList variant="compact" overflow="wrap">
-                <TabsTrigger variant="compact" value="compact">Compact</TabsTrigger>
-                <TabsTrigger variant="compact" value="alerts"><BellIcon />Alerts</TabsTrigger>
-                <TabsTrigger variant="compact" value="audit">Audit</TabsTrigger>
-              </TabsList>
-            </Tabs>
-            <Tabs defaultValue="vertical" orientation="vertical" className="grid gap-3 sm:grid-cols-[180px_1fr]">
-              <TabsList variant="pills" overflow="wrap" className="grid">
-                <TabsTrigger variant="pills" value="vertical">Vertical</TabsTrigger>
-                <TabsTrigger variant="pills" value="pills">Pills</TabsTrigger>
-                <TabsTrigger variant="pills" value="overflow">Overflow</TabsTrigger>
-              </TabsList>
-              <TabsContent value="vertical" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
-                Vertical tabs keep local settings readable when each panel has a larger form.
-              </TabsContent>
-              <TabsContent value="pills" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
-                Pill tabs carry a stronger selected state for dense dashboards.
-              </TabsContent>
-              <TabsContent value="overflow" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
-                Scroll overflow keeps long labels accessible on small screens.
-              </TabsContent>
-            </Tabs>
-          </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 tab: {activePanel?.label}
-            </h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Change tabs above or jump directly to a common product section.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {tabsDemoPanels.map((panel) => (
-              <Button
-                key={panel.value}
-                type="button"
-                size="sm"
-                variant={state.activeTab === panel.value ? "default" : "secondary"}
-                onClick={() => setState({ activeTab: panel.value })}
-              >
-                {panel.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,5 +0,0 @@
-export type TabsDemoPanel = {
-  value: "overview" | "activity" | "settings"
-  label: string
-  content: string
-}

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

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

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

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tagMock: ComponentDemoMock = {
-  code: `import { Tag } from "tembro"
-
-export function Example() {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Tag tone="success">Online</Tag>
-      <Tag tone="warning">Review</Tag>
-      <Tag tone="danger" removable>
-        Remove me
-      </Tag>
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add tag",
-  highlights: [
-    "Semantic tones for state and status information",
-    "Selectable and removable tags",
-    "Works in compact metadata strips",
-  ],
-  scenarios: [
-    { title: "Statuses", description: "Represent task lifecycle with tone variants." },
-    { title: "Filters", description: "Display and clear active filters quickly." },
-    { title: "Topics", description: "Render labels without overloading metadata cards." },
-  ],
-}

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

@@ -1,68 +0,0 @@
-import * as React from "react"
-
-import { Button } from "@/index"
-import { Tag } from "@/components/display/tag"
-
-export function TagShowcase() {
-  const all = [
-    { key: "team", label: "Design team", tone: "info" as const },
-    { key: "ready", label: "Ready", tone: "success" as const },
-    { key: "warn", label: "Needs review", tone: "warning" as const },
-    { key: "block", label: "Blocked", tone: "danger" as const },
-  ]
-  const [items, setItems] = React.useState(all)
-
-  const remove = (key: string) => setItems((current) => current.filter((item) => item.key !== key))
-  const reset = () => setItems(all)
-
-  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-5 lg:flex-row lg:items-start lg:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Metadata</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Tags should stay compact and removable</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">
-              Use tags for filters, topics, and lightweight status metadata where the user may need to remove a single token.
-            </p>
-          </div>
-          <Button size="sm" variant="outline" onClick={reset}>
-            Reset
-          </Button>
-        </div>
-
-        <div className="mt-6 flex flex-wrap gap-2">
-          {items.map((item) => (
-            <Tag key={item.key} tone={item.tone} removable onRemove={() => remove(item.key)}>
-              {item.label}
-            </Tag>
-          ))}
-          {items.length === 0 ? <span className="text-sm aui-text-muted">No filters</span> : null}
-        </div>
-      </section>
-
-      <section className="grid gap-4 md:grid-cols-2">
-        <div className="rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Sizes</p>
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            <Tag size="sm">Small</Tag>
-            <Tag>Default</Tag>
-            <Tag size="lg">Large</Tag>
-            <Tag selected>Selected</Tag>
-          </div>
-        </div>
-
-        <div className="rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Tones</p>
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            <Tag tone="neutral">Neutral</Tag>
-            <Tag tone="info">Info</Tag>
-            <Tag tone="success">Success</Tag>
-            <Tag tone="warning">Warning</Tag>
-            <Tag tone="danger">Danger</Tag>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tagInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { TagInput } from "tembro"
-
-export function Example() {
-  const [tags, setTags] = React.useState(["billing", "priority"])
-
-  return (
-    <TagInput
-      value={tags}
-      onValueChange={setTags}
-      maxTags={5}
-    />
-  )
-}`,
-  highlights: ["Add/remove tag chips", "Max tag support", "Backspace remove behavior", "Good for labels, filters, and categorization"],
-  scenarios: [
-    { title: "Record labels", description: "Attach operational tags to invoices, tickets, or users." },
-    { title: "Saved filters", description: "Represent multi-value filter state in a compact input." },
-    { title: "Skill lists", description: "Collect short multi-entry labels without building a custom repeater." },
-  ],
-  capabilityNotes: [
-    "TagInput is for short normalized labels, not long rich text tokens.",
-    "Backspace remove is important when the field is keyboard-heavy.",
-    "Use `maxTags` when the domain has a sensible cap.",
-  ],
-}

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

@@ -1,55 +0,0 @@
-import * as React from "react"
-
-import { Badge, TagInput } 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 TagInputShowcase({ mode }: ComponentDemoProps) {
-  const [tags, setTags] = React.useState(["billing", "priority"])
-
-  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">Token input</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">TagInput should make multi-label entry feel lightweight</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Good tag UX means adding, removing, and reviewing short labels without dragging the user into a full form builder.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Multi value</Badge>
-            <Badge variant="outline" className="rounded-full">Keyboard friendly</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <TagInput value={tags} onValueChange={setTags} maxTags={5} />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current tags</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{tags.join(", ") || "No tags"}</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">
-            Bu component label, quick filter va qisqa metadata tokenlari uchun kuchli. Uzun structured input uchun emas.
-          </p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">`Enter` yoki `,` bilan tag qo‘shing. Input bo‘sh bo‘lsa `Backspace` oxirgi tagni o‘chiradi.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-import type { TextareaDemoField } from "./types"
-
-export const textareaDemoFields: TextareaDemoField[] = [
-  { title: "Primary note", placeholder: "Write a detailed note...", minHeight: "min-h-28", rows: 6 },
-  { title: "Internal changelog draft", defaultValue: "Internal changelog draft...", minHeight: "min-h-20", rows: 4 },
-  { title: "Locked review comment", defaultValue: "Locked review comment", readOnly: true, minHeight: "min-h-20", rows: 3 },
-]

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

@@ -1,4 +0,0 @@
-export { TextareaShowcase } from "./showcase"
-export { textareaMock } from "./mock"
-export { textareaDemoFields } from "./data"
-export type { TextareaDemoField } from "./types"

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

@@ -1,50 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const textareaMock: ComponentDemoMock = {
-  code: `import { FormEvent, useState } from "react"
-import { Textarea } from "tembro"
-
-export function Example() {
-  const [note, setNote] = useState("")
-  const [error, setError] = useState(false)
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setError(note.trim().length < 10)
-  }
-
-  return (
-    <form onSubmit={submit} className="space-y-3">
-      <Textarea
-        rows={6}
-        value={note}
-        onValueChange={setNote}
-        placeholder="Write your message..."
-        helperText="Keep instructions visible below the field."
-        errorText={error ? "Please enter at least 10 characters." : undefined}
-        maxLength={240}
-        showCharacterCount
-      />
-      <Textarea rows={4} defaultValue="Internal changelog draft..." helperText="Draft copy" />
-      <Textarea readOnly value="Locked review comment" rows={3} />
-      <button type="submit">Submit</button>
-    </form>
-  )
-}`,
-  htmlCode: `<textarea data-slot="textarea" placeholder="Write your message..." rows="6"></textarea>`,
-  cliCommand: "npx tembro add textarea",
-  highlights: ["Long-form notes", "Multiline forms", "Rows/height control", "Validation-friendly error context"],
-  relatedBlockSlugs: ["settings-form", "auth-sign-in", "pricing-section"],
-  scenarios: [
-    { title: "Support notes", description: "Capture longer messages with 6+ rows without layout shift." },
-    { title: "Release notes", description: "Use multiline fields for changelog and update summaries." },
-    { title: "Review comments", description: "Keep readOnly previews for policy or audit style workflows." },
-    { title: "Internal description editor", description: "Combine rows with validation text and section headers." },
-  ],
-  capabilityNotes: [
-    "Designed for multi-line content with enough vertical rhythm for long text.",
-    "Supports controlled/uncontrolled usage with rows customization.",
-    "Should demonstrate empty, filled and read-only states in form contexts.",
-    "Pairs well with form shells and richer editorial patterns.",
-  ],
-}