tembro 3.1.17 → 4.0.0

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

@@ -1,112 +0,0 @@
-import type { ChangeEvent } from "react"
-
-import { Badge, Button, Textarea } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { textareaDemoFields } from "./data"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
-  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">Long-form entry</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Textarea should feel calm and readable</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use it for notes, summaries, and message bodies. The preview should focus on readability, resize behavior, and passive states instead of raw field duplication.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Editable</Badge>
-            <Badge variant="outline" className="rounded-full">Read-only</Badge>
-            <Badge variant="outline" className="rounded-full">Resizable</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">Internal note</p>
-            <div className="mt-3">
-              <Textarea
-                value={state.textareaValue}
-                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setState({ textareaValue: event.target.value })}
-                rows={textareaDemoFields[0].rows}
-                className={`${textareaDemoFields[0].minHeight} resize-y`}
-                placeholder={textareaDemoFields[0].placeholder}
-                helperText="Visible helper copy keeps instructions outside the placeholder."
-                maxLength={240}
-                showCharacterCount
-              />
-            </div>
-          </div>
-
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Current length</p>
-            <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{state.textareaValue.length} chars</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Long text surfaces should stay readable before they become decorative. Keep line-height, contrast, and padding stable as content grows.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
-            <h4 className="mt-2 text-lg font-semibold aui-text-strong">
-              Draft length: {state.textareaValue.length} characters
-            </h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Fill or clear the note to verify controlled textarea behavior and visual density.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" size="sm" onClick={() => setState({ textareaValue: "Customer prefers weekly status updates and a shorter approval cycle." })}>
-              Fill sample
-            </Button>
-            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ textareaValue: "" })}>
-              Clear
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Pre-filled draft</p>
-          <div className="mt-3">
-            <Textarea
-              defaultValue={textareaDemoFields[1].defaultValue}
-              rows={textareaDemoFields[1].rows}
-              className={`${textareaDemoFields[1].minHeight} resize-none`}
-              helperText="Uncontrolled draft with stable helper spacing."
-            />
-          </div>
-        </section>
-
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Read-only copy</p>
-          <div className="mt-3 space-y-3">
-            <Textarea
-              value={textareaDemoFields[2].defaultValue}
-              readOnly={textareaDemoFields[2].readOnly}
-              rows={textareaDemoFields[2].rows}
-              className={`${textareaDemoFields[2].minHeight} resize-none opacity-70`}
-              errorText={state.textareaValue.trim().length > 0 && state.textareaValue.trim().length < 10 ? "Draft needs at least 10 characters." : undefined}
-            />
-            <p className="text-sm leading-6 aui-text-muted">
-              Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.
-            </p>
-          </div>
-        </section>
-      </div>
-    </div>
-  )
-}

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

@@ -1,9 +0,0 @@
-export type TextareaDemoField = {
-  title: string
-  defaultValue?: string
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  rows?: number
-  minHeight: string
-}

package/packages/cli/vendor/src/showcase/premium/time-picker/index.ts

@@ -1,3 +0,0 @@
-export { timePickerMock } from "./mock"
-export { TimePickerShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/time-picker/mock.ts

@@ -1,22 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const timePickerMock: ComponentDemoMock = {
-  code: `import { DateTimePicker, TimePicker, TimeRangePicker } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-2">
-      <TimePicker label="Start" value="08:30" />
-      <DateTimePicker label="Planned at" value="2026-07-07T08:30" />
-      <TimeRangePicker from="09:00" to="17:00" />
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add time-picker",
-  highlights: ["Time, datetime, and range pickers in one family", "Native input controls with consistent style"],
-  scenarios: [
-    { title: "Planning UI", description: "Define working hours and event time." },
-    { title: "Appointment form", description: "Capture precise temporal inputs for calendars and logs." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/time-picker/showcase.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-
-import { DateTimePicker, TimePicker, TimeRangePicker } from "@/index"
-
-export function TimePickerShowcase() {
-  const [time, setTime] = React.useState("09:30")
-  const [dateTime, setDateTime] = React.useState("2026-07-07T09:30")
-  const [from, setFrom] = React.useState("08:00")
-  const [to, setTo] = React.useState("18:00")
-
-  return (
-    <div className="grid gap-4">
-      <div className="grid gap-2">
-        <TimePicker label="Start time" value={time} onChange={(event) => setTime(event.target.value)} />
-        <DateTimePicker label="Event datetime" value={dateTime} onChange={(event) => setDateTime(event.target.value)} />
-      </div>
-      <div className="space-y-2">
-        <TimeRangePicker from={from} to={to} onFromChange={setFrom} onToChange={setTo} />
-        <p className="text-sm text-muted-foreground">Range: {from} → {to}</p>
-      </div>
-      <p className="text-sm text-muted-foreground">Time: {time}, Datetime: {dateTime}</p>
-    </div>
-  )
-}
-

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

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

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

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const timelineMock: ComponentDemoMock = {
-  code: `import { Timeline } from "tembro"
-
-export function Example() {
-  return (
-    <Timeline
-      items={[
-        { key: "1", title: "Workspace created", time: "09:12", tone: "success" },
-        { key: "2", title: "Billing approved", time: "09:30", tone: "info" },
-        { key: "3", title: "Deployment scheduled", time: "10:00", tone: "warning" },
-      ]}
-    />
-  )
-}`,
-  highlights: ["Vertical and horizontal modes", "Tone-aware event dots", "Time, description, and action support", "Good for workflow history and release tracking"],
-  scenarios: [
-    { title: "Approval history", description: "Explain what happened, in which order, and who needs to act next." },
-    { title: "Deployment events", description: "Track release milestones and pending steps clearly." },
-    { title: "Support resolution", description: "Show a readable event stream instead of scattered comments." },
-  ],
-  capabilityNotes: [
-    "Timelines work best when the sequence matters to the user decision.",
-    "Use tone to communicate event state, not decoration.",
-    "Horizontal mode is better for short, high-level milestone sets.",
-  ],
-}

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

@@ -1,50 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Timeline } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const items = [
-  { key: "workspace", title: "Workspace created", description: "Initial billing and member sync finished.", time: "09:12", tone: "success" as const },
-  { key: "review", title: "Compliance review", description: "Policy verification is in progress.", time: "09:30", tone: "info" as const },
-  { key: "deploy", title: "Deployment scheduled", description: "Promotion waits for final approval.", time: "10:00", tone: "warning" as const },
-]
-
-export function TimelineShowcase({ mode }: ComponentDemoProps) {
-  const [horizontal, setHorizontal] = React.useState(false)
-
-  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">Sequence view</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Timeline should make process history legible at a glance</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              If order matters, timeline is stronger than generic cards. Users should see what happened, what is pending, and what comes next.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Vertical</Badge>
-            <Badge variant="outline" className="rounded-full">Horizontal</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <Timeline items={items} orientation={horizontal ? "horizontal" : "vertical"} pending pendingLabel="Approval pending" />
-      </section>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <Button size="sm" variant="outline" onClick={() => setHorizontal((current) => !current)}>
-            Toggle orientation
-          </Button>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

@@ -1,44 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const toastMock: ComponentDemoMock = {
-  code: `import { Button, ToastProvider, useToast } from "tembro"
-
-function Demo() {
-  const { addToast, clearToasts, success, warning } = useToast()
-
-  return (
-    <div className="grid gap-2 sm:grid-cols-2">
-      <Button onClick={() => addToast({ title: "Saving", description: "Draft is being saved." })}>Add toast</Button>
-      <Button variant="outline" onClick={() => success({ title: "Saved", description: "All changes are synced." })}>
-        Success
-      </Button>
-      <Button variant="outline" onClick={() => warning("Please review your inputs.")}>
-        Warning
-      </Button>
-      <Button variant="outline" onClick={clearToasts}>
-        Clear all
-      </Button>
-    </div>
-  )
-}
-
-export function Example() {
-  return (
-    <ToastProvider defaultDuration={2500} position="top-right">
-      <Demo />
-    </ToastProvider>
-  )
-}`,
-  highlights: ["Provider required for hook usage", "Global addToast API", "Tone helpers for common outcomes", "Dismiss and clear control"],
-  scenarios: [
-    { title: "Save feedback", description: "Show confirmation after async form submit." },
-    { title: "Validation warning", description: "Surface form validation warnings near input." },
-    { title: "Async operations", description: "Keep users informed during background actions." },
-  ],
-  capabilityNotes: [
-    "Always wrap usage with `ToastProvider` close to app root or feature boundary.",
-    "Use `position` consistently across app.",
-    "Prefer small toast counts (`maxToasts`) for stable layout.",
-  ],
-}
-

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

@@ -1,126 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, ToastProvider, useToast } 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"
-
-function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
-  const [seed, setSeed] = React.useState(0)
-  const { addToast, success, warning, error, promise, clearToasts, toasts, dismissToast } = useToast()
-
-  const addSimple = () => {
-    setSeed((value) => value + 1)
-    addToast({
-      title: "Sync started",
-      description: `Sync run ${seed + 1} has started.`,
-      tone: "info",
-    })
-  }
-
-  const addSuccess = () => {
-    setSeed((value) => value + 1)
-    success({
-      title: "Saved",
-      description: "Project updated successfully.",
-      tone: "success",
-    })
-  }
-
-  const addWarning = () => {
-    setSeed((value) => value + 1)
-    warning("Please confirm required metadata before publish.")
-  }
-
-  const addError = () => {
-    setSeed((value) => value + 1)
-    error({ title: "Request failed", description: `Failure occurred while saving item #${seed + 1}` })
-  }
-
-  const runPromiseToast = () => {
-    void promise(
-      new Promise<string>((resolve) => {
-        window.setTimeout(() => resolve("Export ready"), 1200)
-      }),
-      {
-        loading: { title: "Preparing export", description: "Building CSV package.", group: "Export" },
-        success: (message) => ({ title: message, description: "Download can start now.", group: "Export" }),
-        error: () => ({ title: "Export failed", description: "Retry after refreshing.", group: "Export" }),
-      }
-    )
-  }
-
-  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">Transient feedback</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Toasts should report short-lived outcomes</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use them for short confirmations and lightweight warnings. Critical blocking states should remain on the page, not vanish into transient notifications.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Success</Badge>
-            <Badge variant="outline" className="rounded-full">Warning</Badge>
-            <Badge variant="outline" className="rounded-full">Error</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 flex flex-wrap gap-2">
-          <Button size="sm" onClick={addSimple}>
-            Add toast
-          </Button>
-          <Button size="sm" variant="outline" onClick={addSuccess}>
-            Success
-          </Button>
-          <Button size="sm" variant="outline" onClick={addWarning}>
-            Warning
-          </Button>
-          <Button size="sm" variant="outline" onClick={addError}>
-            Error
-          </Button>
-          <Button size="sm" variant="outline" onClick={runPromiseToast}>
-            Promise
-          </Button>
-          <Button size="sm" variant="outline" onClick={clearToasts}>
-            Clear all
-          </Button>
-        </div>
-      </section>
-
-      <div className={panelClass}>
-        <p className="mb-2 text-sm aui-text-muted">Active toasts: {toasts.length}</p>
-        <div className="grid gap-2">
-          {toasts.length === 0 ? (
-            <div className="rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted">No active toasts</div>
-          ) : (
-            toasts.map((toast) => (
-              <div key={toast.id} className="flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm">
-                <div>
-                  <p className="font-medium aui-text-strong">{toast.title ?? "Untitled"}</p>
-                  <p className="aui-text-muted">{toast.description}</p>
-                </div>
-                <Button size="sm" variant="outline" onClick={() => dismissToast(toast.id)}>
-                  Dismiss
-                </Button>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-      {mode === "playground" ? null : null}
-    </div>
-  )
-}
-
-export function ToastShowcase({ mode }: ComponentDemoProps) {
-  return (
-    <ToastProvider position="top-right" defaultDuration={3000} maxToasts={5} pauseOnHover={mode === "playground"}>
-      <ToastPlayground mode={mode} />
-    </ToastProvider>
-  )
-}

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

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

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

@@ -1,35 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tooltipMock: ComponentDemoMock = {
-  code: `import { Button, Tooltip } from "tembro"
-
-export function Example() {
-  return (
-    <div className="flex gap-3">
-      <Tooltip content="Copies the current code snippet to clipboard.">
-        <Button variant="outline">Copy code</Button>
-      </Tooltip>
-
-      <Tooltip content="Only owners can publish this release." side="bottom">
-        <Button>Publish</Button>
-      </Tooltip>
-    </div>
-  )
-}`,
-  htmlCode: `<span data-slot="tooltip">Hover or focus to reveal hint</span>`,
-  cliCommand: "npx tembro add tooltip",
-  highlights: ["Short helper copy", "Hover + focus states", "Placement control", "Low-noise guidance"],
-  relatedBlockSlugs: ["settings-form", "dashboard-starter", "crm-dashboard"],
-  scenarios: [
-    { title: "Action clarification", description: "Clarify compact buttons without adding full inline helper text." },
-    { title: "Permission hint", description: "Explain why a control matters before users commit." },
-    { title: "Dense data tables", description: "Keep labels short while still exposing supporting context on focus." },
-  ],
-  capabilityNotes: [
-    "Keep tooltip copy to one short sentence.",
-    "Use focus-safe triggers so keyboard users get the same guidance.",
-    "Do not place critical instructions only inside a tooltip.",
-    "If the content needs actions or long text, switch to Popover instead.",
-  ],
-}
-

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

@@ -1,67 +0,0 @@
-import * as React from "react"
-
-import { Button, Tooltip } from "@/index"
-
-const tooltipSides = ["top", "right", "bottom", "left"] as const
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function TooltipShowcase() {
-  const [side, setSide] = React.useState<(typeof tooltipSides)[number]>("top")
-  const [disabled, setDisabled] = React.useState(false)
-
-  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">Tooltip</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Explain quickly, then get out</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Tooltip should answer one short question near the trigger without interrupting the screen.</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">Side</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong capitalize">{side}</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">State</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{disabled ? "Disabled" : "Enabled"}</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">Use for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Short hints</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex min-h-48 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5">
-          <Tooltip content="Copies the current docs example to your clipboard." side={side} disabled={disabled}>
-            <Button type="button" variant="outline">Hover or focus me</Button>
-          </Tooltip>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-2">
-          {tooltipSides.map((entry) => (
-            <Button
-              key={entry}
-              type="button"
-              size="sm"
-              variant={side === entry ? "default" : "secondary"}
-              onClick={() => setSide(entry)}
-            >
-              {entry}
-            </Button>
-          ))}
-          <Button type="button" size="sm" variant="outline" onClick={() => setDisabled((value) => !value)}>
-            {disabled ? "Enable" : "Disable"}
-          </Button>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/tree-view/index.ts

@@ -1,3 +0,0 @@
-export { treeViewMock } from "./mock"
-export { TreeViewShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/tree-view/mock.ts

@@ -1,34 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const treeViewMock: ComponentDemoMock = {
-  code: `import { TreeView } from "tembro"
-
-export function Example() {
-  return (
-    <TreeView
-      items={[
-        {
-          key: "ui",
-          label: "UI",
-          children: [
-            { key: "buttons", label: "Buttons" },
-            { key: "inputs", label: "Inputs" },
-          ],
-        },
-      ]}
-      defaultExpandedKeys={["ui"]}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add tree-view",
-  highlights: [
-    "Tree data model with nested children",
-    "Controlled and uncontrolled expand state support",
-    "Selectable nodes with active visual states",
-  ],
-  scenarios: [
-    { title: "Navigation map", description: "Use for quick nested navigation structures." },
-    { title: "Docs sections", description: "Represent nested headings and details." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/tree-view/showcase.tsx

@@ -1,51 +0,0 @@
-import * as React from "react"
-
-import { TreeView } from "@/index"
-import { File, FolderOpen, Folder } from "lucide-react"
-
-const catalogItems = [
-  {
-    key: "design",
-    label: "Design",
-    icon: <FolderOpen className="size-4" />,
-    children: [
-      { key: "components", label: "Components", icon: <Folder className="size-4" /> },
-      { key: "tokens", label: "Tokens", icon: <File className="size-4" /> },
-    ],
-  },
-  {
-    key: "dev",
-    label: "Development",
-    icon: <Folder className="size-4" />,
-    children: [
-      { key: "docs", label: "Docs", icon: <File className="size-4" /> },
-      {
-        key: "release",
-        label: "Release",
-        icon: <Folder className="size-4" />,
-        children: [{ key: "notes", label: "Notes", icon: <File className="size-4" /> }],
-      },
-    ],
-  },
-]
-
-export function TreeViewShowcase() {
-  const [selected, setSelected] = React.useState("components")
-  const [expandedKeys, setExpandedKeys] = React.useState(["design", "dev"])
-  const handleSelect = React.useCallback((item: { key: string }) => {
-    setSelected(item.key)
-  }, [])
-
-  return (
-    <div className="space-y-3">
-      <TreeView
-        items={catalogItems}
-        selectedKey={selected}
-        expandedKeys={expandedKeys}
-        onExpandedKeysChange={setExpandedKeys}
-        onSelect={handleSelect}
-      />
-      <div className="rounded-md border px-3 py-2 text-sm text-muted-foreground">Selected: {selected}</div>
-    </div>
-  )
-}