tembro 3.0.0 → 3.1.5

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

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

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

@@ -1,19 +1,22 @@
 import type { ComponentDemoMock } from "../types"
 
 export const pageStateMock: ComponentDemoMock = {
-  code: `import { Button, PageState } from "tembro"
+  code: `import { Button, InlineState, PageState } from "tembro"
 
 export function Example() {
   return (
-    <PageState
-      tone="error"
-      title="Connection failed"
-      description="We could not sync workspace usage. Retry after restoring the API token."
-      action={<Button variant="outline">Retry sync</Button>}
-    />
+    <>
+      <PageState
+        tone="error"
+        title="Connection failed"
+        description="We could not sync workspace usage. Retry after restoring the API token."
+        action={<Button variant="outline">Retry sync</Button>}
+      />
+      <InlineState tone="empty" title="No comments" onRetry={() => refetch()} />
+    </>
   )
 }`,
-  highlights: ["Full-page status surface", "Built for empty, loading, success, info, and error flows", "Single decisive CTA", "Works as route-level fallback or section state"],
+  highlights: ["Full-page and compact inline surfaces", "Empty, loading, success, info, and error flows", "Retry and custom action support", "Accessible status and alert roles"],
   scenarios: [
     { title: "No data yet", description: "Guide the first useful action when a route has no content." },
     { title: "Load failed", description: "Keep retry and explanation visible without dropping the user into confusion." },

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, PageState } from "@/index"
+import { Badge, Button, InlineState, PageState } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -11,6 +11,8 @@ const tones = ["empty", "loading", "error", "success", "info"] as const
 
 export function PageStateShowcase({ mode }: ComponentDemoProps) {
   const [toneIndex, setToneIndex] = React.useState(2)
+  const [actionMessage, setActionMessage] = React.useState("No action triggered yet")
+  const [retryCount, setRetryCount] = React.useState(0)
   const tone = tones[toneIndex] ?? "error"
 
   return (
@@ -49,14 +51,33 @@ export function PageStateShowcase({ mode }: ComponentDemoProps) {
         }
         action={
           tone === "loading" ? undefined : (
-            <Button variant={tone === "error" ? "outline" : "default"}>
+            <Button variant={tone === "error" ? "outline" : "default"} onClick={() => setActionMessage(`${tone} action completed`)}>
               {tone === "empty" ? "Create invoice" : tone === "error" ? "Retry sync" : tone === "success" ? "Open dashboard" : "View progress"}
             </Button>
           )
         }
-        extra={tone === "error" ? <Button variant="ghost">Open logs</Button> : undefined}
+        extra={tone === "error" ? <Button variant="ghost" onClick={() => setActionMessage("Logs opened")}>Open logs</Button> : undefined}
       />
 
+      <section className={panelClass}>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <InlineState
+            tone="error"
+            title="Widget unavailable"
+            description={`Compact retry state. Attempts: ${retryCount}`}
+            retryLabel="Retry widget"
+            onRetry={() => setRetryCount((value) => value + 1)}
+          />
+          <InlineState
+            tone="success"
+            title="Changes published"
+            description="Use the compact surface inside a section without replacing the whole route."
+            action={<Button size="sm" onClick={() => setActionMessage("Published changes opened")}>View changes</Button>}
+          />
+        </div>
+        <p aria-live="polite" className="mt-4 text-sm aui-text-muted">{actionMessage}</p>
+      </section>
+
       {mode === "playground" ? (
         <section className={panelClass}>
           <div className="flex flex-wrap gap-2">

package/packages/cli/vendor/src/showcase/premium/qr-code/index.ts

@@ -1,3 +1,2 @@
-export { qrCodeMock } from "./mock"
-export { QRCodeShowcase } from "./showcase"
-
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/qr-code/mock.ts

@@ -4,17 +4,12 @@ export const qrCodeMock: ComponentDemoMock = {
   code: `import { QRCode } from "tembro"
 
 export function Example() {
-  return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />
+  return <QRCode value="https://example.com/invoices/INV-2048" errorCorrectionLevel="H" size={180} />
 }`,
   cliCommand: "npx tembro add qr-code",
-  highlights: [
-    "Fallback SVG renderer if no image is provided",
-    "Configurable size and module density",
-    "Works with plain strings and long URLs",
-  ],
+  highlights: ["Real standards-compliant QR encoding", "SVG output with configurable error correction and colors"],
   scenarios: [
-    { title: "Marketing", description: "Expose links in campaigns and materials." },
-    { title: "Apps", description: "Generate codes for sharing deep links in dashboards." },
+    { title: "Payment links", description: "Encode checkout or invoice URLs into scan-ready symbols." },
+    { title: "Device pairing", description: "Share connection payloads with stronger error correction." },
   ],
 }
-

package/packages/cli/vendor/src/showcase/premium/qr-code/showcase.tsx

@@ -1,23 +1,12 @@
 import * as React from "react"
-
-import { Button, QRCode } from "@/index"
-
-const urls = ["https://azamat-ui.vercel.app", "https://github.com", "mailto:hello@example.com"]
+import { QRCode } from "@/index"
 
 export function QRCodeShowcase() {
-  const [index, setIndex] = React.useState(0)
-  const value = urls[index % urls.length]
-
+  const [value, setValue] = React.useState("https://tembro.dev/components/qr-code")
   return (
-    <div className="space-y-3">
-      <div className="flex gap-2">
-        <Button size="sm" onClick={() => setIndex((value) => (value + 1) % urls.length)}>
-          Next payload
-        </Button>
-      </div>
-      <QRCode value={value} alt={value} size={176} />
-      <p className="text-xs text-muted-foreground">Payload: {value}</p>
+    <div className="mx-auto grid max-w-sm justify-items-center gap-4">
+      <QRCode value={value} size={184} errorCorrectionLevel="H" />
+      <input aria-label="QR code value" value={value} className="h-10 w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" onChange={(event) => setValue(event.target.value)} />
     </div>
   )
 }
-

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/index.ts

@@ -1,3 +1,2 @@
-export { richTextEditorMock } from "./mock"
-export { RichTextEditorShowcase } from "./showcase"
-
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/mock.ts

@@ -4,19 +4,12 @@ export const richTextEditorMock: ComponentDemoMock = {
   code: `import { RichTextEditor } from "tembro"
 
 export function Example() {
-  const [value, setValue] = useState("<p>Start writing...</p>")
-
-  return <RichTextEditor value={value} onValueChange={setValue} />
+  return <RichTextEditor defaultValue="<p>Write the release notes...</p>" onValueChange={console.log} />
 }`,
   cliCommand: "npx tembro add rich-text-editor",
-  highlights: [
-    "Inline editable content block",
-    "Simple toolbar actions for basic formatting",
-    "Controlled value with value/onValueChange",
-  ],
+  highlights: ["TipTap and ProseMirror editing engine", "HTML/text output with formatting, history, lists, quotes, and links"],
   scenarios: [
-    { title: "CMS blocks", description: "Capture short rich-text snippets for card descriptions." },
-    { title: "Internal notes", description: "Attach lightweight WYSIWYG content to records." },
+    { title: "Knowledge base", description: "Author structured support and documentation content." },
+    { title: "Product updates", description: "Create formatted release notes with controlled persistence." },
   ],
 }
-

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/showcase.tsx

@@ -1,15 +1,12 @@
 import * as React from "react"
-
 import { RichTextEditor } from "@/index"
 
 export function RichTextEditorShowcase() {
-  const [value, setValue] = React.useState("<p>Type <strong>formatted</strong> text here.</p>")
-
+  const [value, setValue] = React.useState("<h2>Release notes</h2><p>Describe what changed for customers.</p>")
   return (
-    <div className="space-y-3">
-      <RichTextEditor value={value} onValueChange={setValue} placeholder="Write product notes..." />
-      <p className="text-sm text-muted-foreground">Current HTML length: {value.length}</p>
+    <div className="grid gap-3">
+      <RichTextEditor value={value} onValueChange={setValue} onLinkRequest={() => "https://tembro.dev"} />
+      <p className="text-xs text-muted-foreground">{value.length} HTML characters</p>
     </div>
   )
 }
-

package/packages/cli/vendor/src/showcase/premium/signature-pad/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/signature-pad/mock.ts

@@ -0,0 +1,20 @@
+import type { ComponentDemoMock } from "../types"
+
+export const signaturePadMock: ComponentDemoMock = {
+  code: `import { SignaturePad } from "tembro"
+
+export function Example() {
+  return (
+    <SignaturePad
+      onValueChange={(strokes) => console.log(strokes)}
+      onStrokeEnd={(stroke) => console.log(stroke)}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add signature-pad",
+  highlights: ["Controlled normalized stroke data", "Undo, clear, pointer capture, and PNG export API"],
+  scenarios: [
+    { title: "Approval flow", description: "Capture a signature without coupling form state to canvas pixels." },
+    { title: "Delivery proof", description: "Store normalized strokes or export the rendered signature as PNG." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/signature-pad/showcase.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+import { SignaturePad, type SignatureStroke } from "@/index"
+
+export function SignaturePadShowcase() {
+  const [strokes, setStrokes] = React.useState<SignatureStroke[]>([])
+
+  return (
+    <div className="mx-auto grid w-full max-w-xl gap-3">
+      <SignaturePad value={strokes} onValueChange={setStrokes} />
+      <p className="text-sm text-muted-foreground">{strokes.length} stroke{strokes.length === 1 ? "" : "s"} captured</p>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,36 @@
+import type { ComponentDemoMock } from "../types"
+
+export const sortableListMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { SortableList } from "tembro"
+
+const initialItems = [
+  { id: "brief", label: "Product brief" },
+  { id: "design", label: "Design review" },
+  { id: "release", label: "Release checklist" },
+]
+
+export function Example() {
+  const [items, setItems] = React.useState(initialItems)
+
+  return (
+    <SortableList
+      items={items}
+      getItemId={(item) => item.id}
+      getItemLabel={(item) => item.label}
+      renderItem={(item) => item.label}
+      onItemsChange={setItems}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add sortable-list",
+  highlights: [
+    "Pointer, touch and keyboard sorting",
+    "Controlled and uncontrolled state",
+    "Drag overlay and screen-reader instructions",
+  ],
+  scenarios: [
+    { title: "Priority queue", description: "Reorder work while keeping the resulting array in application state." },
+    { title: "Form sections", description: "Let users arrange configurable fields with an explicit drag handle." },
+  ],
+}

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

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { Badge, Button, SortableList } from "@/index"
+
+const initialItems = [
+  { id: "brief", label: "Product brief", owner: "Azamat", tone: "Ready" },
+  { id: "design", label: "Design review", owner: "Madina", tone: "Review" },
+  { id: "release", label: "Release checklist", owner: "Jasur", tone: "Blocked" },
+  { id: "docs", label: "Documentation", owner: "Nodira", tone: "Draft" },
+]
+
+export function SortableListShowcase() {
+  const [items, setItems] = React.useState(initialItems)
+  const [lastMove, setLastMove] = React.useState("No moves yet")
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm text-muted-foreground">{lastMove}</p>
+        <Button type="button" size="sm" variant="outline" onClick={() => setItems(initialItems)}>
+          Reset order
+        </Button>
+      </div>
+      <SortableList
+        items={items}
+        getItemId={(item) => item.id}
+        getItemLabel={(item) => item.label}
+        onItemsChange={(nextItems, change) => {
+          setItems(nextItems)
+          setLastMove(`${change.item.label}: ${change.oldIndex + 1} → ${change.newIndex + 1}`)
+        }}
+        renderItem={(item) => (
+          <div className="flex min-w-0 items-center justify-between gap-3 px-1 py-1.5">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">{item.label}</div>
+              <div className="text-xs text-muted-foreground">Owner: {item.owner}</div>
+            </div>
+            <Badge variant="outline">{item.tone}</Badge>
+          </div>
+        )}
+      />
+    </div>
+  )
+}

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

@@ -6,9 +6,9 @@ export const statisticMock: ComponentDemoMock = {
 export function Example() {
   return (
     <StatisticGrid columns={3}>
-      <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" />
+      <StatisticCard label="Revenue" prefix="$" value="24.8k" change="+12.4%" trend="up" />
       <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" />
-      <StatisticCard label="Conversion" value="6.3%" description="vs last 30 days" />
+      <StatisticCard label="Conversion" value="6.3" suffix="%" loading={false} description="vs last 30 days" />
     </StatisticGrid>
   )
 }`,

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

@@ -1,8 +1,13 @@
-import { Badge, ProgressRing, Statistic, StatisticCard, StatisticGrid, TrendCard } from "@/index"
+import * as React from "react"
+
+import { Badge, Button, ProgressCircle, Statistic, StatisticCard, StatisticGrid } from "@/index"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
 
 export function StatisticShowcase() {
+  const [loading, setLoading] = React.useState(false)
+  const [columns, setColumns] = React.useState<1 | 2 | 3 | 4>(3)
+
   return (
     <div className="space-y-0">
       <section className="pb-6">
@@ -14,10 +19,20 @@ export function StatisticShowcase() {
       </section>
 
       <section className={panelClass}>
-        <StatisticGrid columns={3}>
-          <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" description="vs last 30 days" />
-          <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" description="production incidents" />
-          <StatisticCard label="Adoption" value="86%" description="workspace activation rate" action={<Badge variant="secondary">Live</Badge>} />
+        <div className="mb-4 flex flex-wrap gap-2">
+          <Button size="sm" variant={loading ? "default" : "outline"} onClick={() => setLoading((value) => !value)}>
+            {loading ? "Resolve data" : "Show loading"}
+          </Button>
+          {([1, 2, 3, 4] as const).map((value) => (
+            <Button key={value} size="sm" variant={columns === value ? "default" : "outline"} onClick={() => setColumns(value)}>
+              {value} column{value > 1 ? "s" : ""}
+            </Button>
+          ))}
+        </div>
+        <StatisticGrid columns={columns}>
+          <StatisticCard loading={loading} label="Revenue" prefix="$" value="24.8k" change="+12.4%" trend="up" description="vs last 30 days" />
+          <StatisticCard loading={loading} label="Errors" value="14" change="-3.1%" trend="down" description="production incidents" />
+          <StatisticCard loading={loading} label="Adoption" value="86" suffix="%" change="No change" trend="neutral" description="workspace activation rate" action={<Badge variant="secondary">Live</Badge>} />
         </StatisticGrid>
       </section>
 
@@ -46,9 +61,9 @@ export function StatisticShowcase() {
 
       <section className={panelClass}>
         <div className="grid gap-6 xl:grid-cols-[1fr_240px]">
-          <TrendCard title="Release velocity" value="24" change="+3" trend="up" description="completed this sprint" sparkline={[8, 10, 9, 14, 18, 19, 24]} />
+          <StatisticCard label="Release velocity" value="24" change="+3" trend="up" description="completed this sprint" />
           <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <ProgressRing value={76} label="76%" description="coverage" tone="success" />
+            <ProgressCircle value={76} label="76%" description="coverage" tone="success" />
           </div>
         </div>
       </section>

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

@@ -1,12 +1,13 @@
 import * as React from "react"
 
-import { Button, Tag } from "@/index"
+import { Button } from "@/index"
+import { Tag } from "@/components/display/tag"
 
 export function TagShowcase() {
   const all = [
-    { key: "team", label: "Team", tone: "info" as const },
+    { key: "team", label: "Design team", tone: "info" as const },
     { key: "ready", label: "Ready", tone: "success" as const },
-    { key: "warn", label: "Warn", tone: "warning" 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)
@@ -15,23 +16,53 @@ export function TagShowcase() {
   const reset = () => setItems(all)
 
   return (
-    <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-card p-4">
-        <div className="mb-4 flex items-center justify-between gap-3">
-          <p className="text-sm font-medium text-foreground">Filter tags</p>
+    <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="flex flex-wrap gap-2">
+
+        <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 text-muted-foreground">No filters</span> : null}
+          {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>
-      </div>
+      </section>
     </div>
   )
 }

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

@@ -1,4 +1,4 @@
-import { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text } from "@/index"
+import { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text } from "@/components/display/typography"
 
 export function TypographyShowcase() {
   return (

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

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