tembro 3.1.16 → 4.0.0

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const skeletonMock: ComponentDemoMock = {
-  code: `import { Skeleton, SkeletonCard, SkeletonText } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-4">
-      <Skeleton className="h-10 w-48" />
-      <SkeletonText rows={3} />
-      <SkeletonCard avatar rows={4} />
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add skeleton",
-  highlights: [
-    "Base line/block placeholder plus text and card presets",
-    "Useful while data shape is known but content is still loading",
-    "Keeps layout stable before real content arrives",
-  ],
-  scenarios: [
-    { title: "Header loading", description: "Reserve title and toolbar space before the API resolves." },
-    { title: "List row loading", description: "Prevent layout jump inside dense operational screens." },
-    { title: "Card loading", description: "Show content shape without implying final values yet." },
-  ],
-}

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

@@ -1,77 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Skeleton, SkeletonCard, SkeletonText } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SkeletonShowcase() {
-  const [loading, setLoading] = React.useState(true)
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Skeleton preserves shape before real data arrives</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use skeletons only when the destination layout is already known. Otherwise prefer a simpler loading state.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Dashboard summary loading</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Toggle the preview to compare loading shape and resolved content.</p>
-          </div>
-          <Button variant="outline" size="sm" onClick={() => setLoading((value) => !value)}>
-            {loading ? "Show resolved state" : "Show loading state"}
-          </Button>
-        </div>
-
-        <div className="mt-5 grid gap-4 xl:grid-cols-3">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-              {loading ? (
-                <>
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="mt-4 h-9 w-32" />
-                  <Skeleton className="mt-4 h-3 w-20" />
-                </>
-              ) : (
-                <>
-                  <p className="text-sm aui-text-muted">Metric {index + 1}</p>
-                  <p className="mt-4 text-3xl font-semibold aui-text-strong">{["24.8k", "91.4%", "128"][index]}</p>
-                  <Badge className="mt-4" variant="secondary">Live</Badge>
-                </>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Text and card presets</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Use the base primitive for custom shapes, then reach for `SkeletonText` or `SkeletonCard` when the pattern repeats often.
-            </p>
-            <div className="mt-5 space-y-4">
-              <SkeletonText rows={4} />
-              <SkeletonCard avatar rows={4} />
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Do not animate huge full-page skeleton walls if a calmer page-level loading state would do the job.</p>
-              <p>Keep placeholder geometry close to the final layout. A misleading shape is worse than no skeleton at all.</p>
-              <p>When the loading state is long or uncertain, switch to a clearer status surface with explanation.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sliderMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { RangeSlider, Slider } from "tembro"
-
-export function Example() {
-  const [score, setScore] = React.useState(72)
-  const [windowRange, setWindowRange] = React.useState<[number, number]>([20, 80])
-
-  return (
-    <div className="space-y-4">
-      <Slider label="Alert threshold" value={score} onValueChange={setScore} showValue />
-      <RangeSlider label="Accepted window" value={windowRange} onValueChange={setWindowRange} showValue />
-    </div>
-  )
-}`,
-  highlights: ["Single and range sliders", "Inline value surfaces", "Great for tuning thresholds and windows", "Controlled usage without extra wrapper boilerplate"],
-  scenarios: [
-    { title: "Risk threshold", description: "Tune alert cutoff for operational monitoring." },
-    { title: "Accepted score window", description: "Set min and max limits for review, fraud, or quality flows." },
-    { title: "Preference controls", description: "Expose density, volume, or sensitivity adjustments with visible values." },
-  ],
-  capabilityNotes: [
-    "Use a slider only when a continuous range is easier than direct typing.",
-    "Always label the meaning of the number, not just the number itself.",
-    "Range sliders are best for constraints and filters, not for arbitrary dual inputs.",
-  ],
-}

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

@@ -1,73 +0,0 @@
-import * as React from "react"
-
-import { Badge, RangeSlider, Slider } 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 SliderShowcase({ mode }: ComponentDemoProps) {
-  const [threshold, setThreshold] = React.useState(72)
-  const [range, setRange] = React.useState<[number, number]>([20, 80])
-
-  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">Range control</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Slider should make thresholds legible, not vague</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use sliders where a continuous range is easier than manual typing. The control needs a visible meaning and clear current value.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Thresholds</Badge>
-            <Badge variant="outline" className="rounded-full">Range windows</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <Slider
-            label="Alert threshold"
-            description="Raise or lower the score that triggers manual review."
-            value={threshold}
-            onValueChange={setThreshold}
-            showValue
-            formatValue={(value) => `${value}%`}
-          />
-        </section>
-        <section className={panelClass}>
-          <RangeSlider
-            label="Accepted score window"
-            description="Only scores inside this range pass automatic approval."
-            value={range}
-            onValueChange={setRange}
-            showValue
-            formatValue={(value) => `${value[0]}% - ${value[1]}%`}
-          />
-        </section>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current threshold</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{threshold}%</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Approval window</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{range[0]}% - {range[1]}%</p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Thresholdni siljitib, keyin range oynasini toraytirib ko‘ring. Demo mahsulotdagi tuning holatiga yaqin ishlaydi.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

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

@@ -1,44 +0,0 @@
-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/spinner/index.ts

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

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

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const spinnerMock: ComponentDemoMock = {
-  code: `import { LoadingOverlay, Spinner } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-4">
-      <Spinner size="sm" label="Refreshing" />
-
-      <LoadingOverlay loading label="Saving changes">
-        <div className="rounded-xl border p-6">Content under save</div>
-      </LoadingOverlay>
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add spinner",
-  highlights: [
-    "Inline spinner plus overlay mode from the same export",
-    "Size tokens for dense buttons, cards, and page sections",
-    "Useful for short-lived async work",
-  ],
-  scenarios: [
-    { title: "Inline refresh", description: "Show immediate feedback inside a compact action row." },
-    { title: "Section save", description: "Temporarily lock a panel while preserving its layout." },
-    { title: "Background fetch", description: "Signal progress without replacing the whole route." },
-  ],
-}

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

@@ -1,68 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, LoadingOverlay, Spinner } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SpinnerShowcase() {
-  const [saving, setSaving] = React.useState(false)
-
-  const runSave = () => {
-    setSaving(true)
-    window.setTimeout(() => setSaving(false), 1200)
-  }
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Spinner covers short async feedback</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it for quick inline or section-level pending states. If the wait grows, move up to a fuller loading state.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap items-center gap-4">
-          <div className="flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3">
-            <Spinner size="xs" label="Syncing" />
-            <span className="text-sm aui-text-muted">Syncing tokens</span>
-          </div>
-          <div className="flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3">
-            <Spinner size="sm" label="Refreshing" />
-            <span className="text-sm aui-text-muted">Refreshing routes</span>
-          </div>
-          <div className="flex items-center gap-3 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3">
-            <Spinner size="lg" label="Publishing" />
-            <Badge variant="outline">Publishing</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <LoadingOverlay loading={saving} label="Saving configuration">
-            <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-5">
-              <div className="flex items-center justify-between gap-4">
-                <div>
-                  <p className="text-lg font-semibold aui-text-strong">Billing configuration</p>
-                  <p className="mt-2 text-sm leading-6 aui-text-muted">Overlay mode blocks edits briefly while keeping the context visible.</p>
-                </div>
-                <Button onClick={runSave}>{saving ? "Saving..." : "Save changes"}</Button>
-              </div>
-            </div>
-          </LoadingOverlay>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Inline spinners are best when the user already knows what action was triggered.</p>
-              <p>Overlay mode is safer for short locked saves than replacing the whole section with placeholders.</p>
-              <p>Do not leave a spinner alone for long-running uncertain work. Add progress or explanatory copy.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const statisticMock: ComponentDemoMock = {
-  code: `import { Statistic, StatisticCard, StatisticGrid } from "tembro"
-
-export function Example() {
-  return (
-    <StatisticGrid columns={3}>
-      <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" suffix="%" loading={false} description="vs last 30 days" />
-    </StatisticGrid>
-  )
-}`,
-  cliCommand: "npx tembro add statistic",
-  highlights: [
-    "Single statistic, statistic card and grid exports work together",
-    "Trend badge, loading state and description support",
-    "Useful for dashboard headers and KPI summaries",
-  ],
-  scenarios: [
-    { title: "KPI row", description: "Summarize top metrics across a dashboard." },
-    { title: "Module summary", description: "Give a feature area one compact numeric header." },
-    { title: "Loading metric", description: "Reserve metric space while upstream data resolves." },
-  ],
-}

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

@@ -1,72 +0,0 @@
-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">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Statistic is the KPI surface, not a generic card clone</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <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>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <Statistic
-              label="Publish latency"
-              value="1.8s"
-              suffix="avg"
-              change="-0.4s"
-              trend="down"
-              description="from the previous release window"
-            />
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Keep labels short and units clear. Users should understand the value before reading the description.</p>
-              <p>Trend color should reinforce meaning, not carry the whole message alone.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_240px]">
-          <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">
-            <ProgressCircle value={76} label="76%" description="coverage" tone="success" />
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-import type { SwitchDemoRow } from "./types"
-
-export const switchDemoRows: SwitchDemoRow[] = [
-  { title: "Dark mode sync", description: "Mirror theme across all workspaces.", defaultChecked: true },
-  { title: "Email alerts", description: "Send update notifications to team members.", defaultChecked: true },
-  { title: "Beta feature", description: "Expose pre-release UI to internal members only." },
-]

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

@@ -1,4 +0,0 @@
-export { SwitchShowcase } from "./showcase"
-export { switchMock } from "./mock"
-export { switchDemoRows } from "./data"
-export type { SwitchDemoRow } from "./types"

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

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const switchMock: ComponentDemoMock = {
-  code: `import { useState } from "react"\nimport { Switch } from "tembro"\n\nexport function Example() {\n  const [isOn, setIsOn] = useState(true)\n\n  return (\n    <div className="space-y-3">\n      <div className="flex items-center gap-2">\n        <Switch id="workspace-sync" checked={isOn} onCheckedChange={setIsOn} aria-label="Workspace sync" />\n        <label htmlFor="workspace-sync">Workspace sync</label>\n      </div>\n      <Switch id="feature-flag" defaultChecked aria-label="Beta feature" />\n      <Switch id="disabled-switch" disabled aria-label="Disabled switch" />\n    </div>\n  )\n}\n`,
-  highlights: ["Preference toggles", "Settings rows", "Controlled state", "Compact interactions", "Accessible labels"],
-  relatedBlockSlugs: ["settings-form", "sidebar-layout", "dashboard-starter"],
-  scenarios: [
-    { title: "Workspace settings", description: "Use switches for lightweight on/off preferences." },
-    { title: "Environment sync", description: "Mirror behavior across multiple surfaces." },
-    { title: "Feature flags", description: "Represent enabled states without modal confirmation." },
-    { title: "Inline preference rows", description: "Fit tightly within stacked settings content." },
-  ],
-  capabilityNotes: [
-    "Designed for binary preference control in compact form rows.",
-    "Supports controlled checked state, disabled and readOnly-safe patterns.",
-    "Best shown inside settings cards with explanatory copy per row.",
-    "Always include an accessible label (id + htmlFor or aria-label).",
-  ],
-}
-

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

@@ -1,75 +0,0 @@
-import { Badge, Button, Switch } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { switchDemoRows } from "./data"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function SwitchShowcase({ 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">Preferences</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Switches should feel like settings</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This pattern is for single on/off preferences. The preview should read like a settings page, not a stack of anonymous toggles.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Controlled</Badge>
-            <Badge variant="outline" className="rounded-full">Settings</Badge>
-            <Badge variant="outline" className="rounded-full">Single preference</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-3">
-          {switchDemoRows.map((row, index) => (
-            <div key={row.title} className={panelClass}>
-              <Switch
-                label={row.title}
-                description={row.description}
-                checked={index === 0 ? state.switchOn : row.defaultChecked}
-                onCheckedChange={index === 0 ? (switchOn) => setState({ switchOn }) : undefined}
-                defaultChecked={index > 0 ? row.defaultChecked : undefined}
-                size={index === 0 ? "lg" : "md"}
-                labelPlacement="start"
-                className="w-full justify-between"
-              />
-            </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">
-              Dark mode sync is {state.switchOn ? "on" : "off"}
-            </h4>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Switches should show immediate preference feedback without requiring a save button.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" size="sm" onClick={() => setState({ switchOn: true })}>
-              Turn on
-            </Button>
-            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ switchOn: false })}>
-              Turn off
-            </Button>
-          </div>
-        </div>
-        <div className="mt-5 grid gap-3 sm:grid-cols-2">
-          <Switch label="Sync in progress" description="Loading disables the control until the request finishes." loading defaultChecked />
-          <Switch label="Invalid setting" description="Error state keeps the same field layout." invalid />
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,5 +0,0 @@
-export type SwitchDemoRow = {
-  title: string
-  description: string
-  defaultChecked?: boolean
-}

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

@@ -1,14 +0,0 @@
-import type { TableDemoRow, TableDemoStat } from "./types"
-
-export const tableDemoRows: TableDemoRow[] = [
-  { 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" },
-]
-
-export const tableDemoStats: TableDemoStat[] = [
-  { label: "Desktop layout", value: "6 columns", note: "Dense reporting view with aligned numbers." },
-  { label: "Tablet strategy", value: "2 priority cuts", note: "Secondary columns can collapse below the primary row." },
-  { label: "Mobile fallback", value: "Stacked cells", note: "Key labels remain visible when width is constrained." },
-]

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

@@ -1,4 +0,0 @@
-export { TableShowcase } from "./showcase"
-export { tableMock } from "./mock"
-export { tableDemoRows, tableDemoStats } from "./data"
-export type { TableDemoRow, TableDemoStat } from "./types"