tembro 3.1.16 → 4.0.0

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

@@ -1,14 +0,0 @@
-export type ButtonDemoAction = {
-  label: string
-  variant: "default" | "secondary" | "outline" | "destructive" | "ghost" | "link"
-  size?: "default" | "sm" | "lg" | "icon"
-  loading?: boolean
-  disabled?: boolean
-  icon?: "download" | "arrow" | "none"
-  asLink?: boolean
-}
-
-export type ButtonDemoRow = {
-  title: string
-  actions: ButtonDemoAction[]
-}

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

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

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

@@ -1,31 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const buttonGroupMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { ButtonGroup } from "tembro"
-
-export function Example() {
-  const [view, setView] = React.useState("list")
-
-  return (
-    <ButtonGroup
-      items={[
-        { key: "list", label: "List", variant: view === "list" ? "default" : "outline", onClick: () => setView("list") },
-        { key: "board", label: "Board", variant: view === "board" ? "default" : "outline", onClick: () => setView("board") },
-        { key: "timeline", label: "Timeline", variant: view === "timeline" ? "default" : "outline", onClick: () => setView("timeline") },
-      ]}
-    />
-  )
-}`,
-  highlights: ["Attached or separated button layouts", "Good for view switching", "Compact grouped controls", "Uses the same button API as the rest of the system"],
-  scenarios: [
-    { title: "View switcher", description: "Toggle list, board, and timeline modes with a compact control." },
-    { title: "Segmented admin actions", description: "Group related operations without building a custom segmented component." },
-    { title: "Toolbar compactness", description: "Save horizontal space in filter and table toolbars." },
-  ],
-  capabilityNotes: [
-    "ButtonGroup works best when options are closely related and mutually understandable together.",
-    "Active state should remain obvious without overwhelming the rest of the toolbar.",
-    "If the choices represent route navigation, tabs may be a better semantic fit.",
-  ],
-}

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

@@ -1,71 +0,0 @@
-import * as React from "react"
-
-import { Badge, ButtonGroup } 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 ButtonGroupShowcase({ mode }: ComponentDemoProps) {
-  const [view, setView] = React.useState<"list" | "board" | "timeline">("list")
-  const [density, setDensity] = React.useState<"compact" | "comfortable">("comfortable")
-
-  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">Grouped control</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">ButtonGroup should make adjacent choices feel like one control set</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use it for closely related toggles like view mode or density. It should reduce toolbar noise, not create another visual cluster.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">View switching</Badge>
-            <Badge variant="outline" className="rounded-full">Toolbar compactness</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <ButtonGroup
-            value={view}
-            onValueChange={(next) => setView(next as typeof view)}
-            items={[
-              { key: "list", label: "List", description: "Rows first" },
-              { key: "board", label: "Board", description: "Kanban view" },
-              { key: "timeline", label: "Timeline", description: "Chronology" },
-            ]}
-          />
-          <div className="mt-4">
-            <ButtonGroup
-              value={density}
-              onValueChange={(next) => setDensity(next as typeof density)}
-              size="xs"
-              activeVariant="secondary"
-              allowDeselect
-              items={[
-                { key: "comfortable", label: "Comfortable" },
-                { key: "compact", label: "Compact" },
-              ]}
-            />
-          </div>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Selected view</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{view}</p>
-          <p className="mt-2 text-sm aui-text-muted">Density: {density || "none"}</p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">ButtonGroup list/board/timeline kabi yaqin tanlovlar uchun yaxshi ishlaydi.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

@@ -1,33 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const calendarMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Calendar } from "tembro"
-
-export function Example() {
-  const [range, setRange] = React.useState({ from: "2026-07-10", to: "2026-07-15" })
-
-  return (
-    <Calendar
-      mode="range"
-      range={range}
-      onRangeChange={setRange}
-      numberOfMonths={2}
-      min="2026-07-01"
-      max="2026-08-31"
-      disabledDates={["2026-07-18", "2026-07-19"]}
-    />
-  )
-}`,
-  highlights: ["Single and range selection", "Multiple month viewport", "Disabled, min, and max date rules", "Keyboard-friendly navigation"],
-  scenarios: [
-    { title: "Booking window", description: "Pick an available range while blocked dates stay non-interactive." },
-    { title: "Reporting period", description: "Show two months at once for dashboard and export filters." },
-    { title: "Approval deadline", description: "Constrain selection to operational dates with min/max bounds." },
-  ],
-  capabilityNotes: [
-    "Use `numberOfMonths={2}` when the user compares short windows across month boundaries.",
-    "Prefer disabled dates for business rules like blackout periods and full-capacity days.",
-    "Keep range mode close to the workflow that depends on it.",
-  ],
-}

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

@@ -1,110 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Calendar } from "@/index"
-
-import type { CalendarDateRange } from "@/components/calendar/calendar"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const blockedDates = ["2026-07-18", "2026-07-19", "2026-07-25"]
-
-export function CalendarShowcase({ mode }: ComponentDemoProps) {
-  const [singleValue, setSingleValue] = React.useState("2026-07-14")
-  const [rangeValue, setRangeValue] = React.useState<CalendarDateRange>({ from: "2026-07-10", to: "2026-07-15" })
-  const [monthCount, setMonthCount] = React.useState<1 | 2>(2)
-
-  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">Date control</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Calendar should feel precise, not decorative</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Real usage needs visible range selection, disabled business dates, and month comparison without clutter. This surface shows all three.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Range mode</Badge>
-            <Badge variant="outline" className="rounded-full">Blocked dates</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Range selection</p>
-          <div className="mt-4 overflow-x-auto pb-1">
-            <Calendar
-              mode="range"
-              range={rangeValue}
-              onRangeChange={setRangeValue}
-              defaultMonth="2026-07-01"
-              min="2026-07-01"
-              max="2026-08-31"
-              disabledDates={blockedDates}
-              numberOfMonths={monthCount}
-              pagedNavigation
-              showClearShortcut
-              showTodayShortcut
-              showSelectionSummary
-            />
-          </div>
-        </section>
-
-        <div className="space-y-4">
-          <section className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Single date</p>
-            <div className="mt-4 overflow-x-auto pb-1">
-              <Calendar
-                value={singleValue}
-                onValueChange={setSingleValue}
-                defaultMonth="2026-07-01"
-                min="2026-07-01"
-                max="2026-07-31"
-                disabledDates={blockedDates}
-                showClearShortcut
-                showSelectionSummary
-              />
-            </div>
-          </section>
-
-          <section className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Selection summary</p>
-            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Single: <span className="font-medium aui-text-strong">{singleValue}</span></p>
-              <p>Range start: <span className="font-medium aui-text-strong">{rangeValue.from ?? "not selected"}</span></p>
-              <p>Range end: <span className="font-medium aui-text-strong">{rangeValue.to ?? "not selected"}</span></p>
-            </div>
-          </section>
-        </div>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <div className="flex flex-wrap gap-2">
-            <Button size="sm" variant={monthCount === 1 ? "default" : "outline"} onClick={() => setMonthCount(1)}>
-              1 month
-            </Button>
-            <Button size="sm" variant={monthCount === 2 ? "default" : "outline"} onClick={() => setMonthCount(2)}>
-              2 months
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                setSingleValue("2026-07-14")
-                setRangeValue({ from: "2026-07-10", to: "2026-07-15" })
-              }}
-            >
-              Reset selection
-            </Button>
-          </div>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/index.ts

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

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const calendarSchedulerMock: ComponentDemoMock = {
-  code: `import { CalendarScheduler } from "tembro"
-
-export function Example() {
-  return (
-    <CalendarScheduler
-      days={["Mon, Jul 6", "Tue, Jul 7"]}
-      events={[
-        { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-        { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
-      ]}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add calendar-scheduler",
-  highlights: [
-    "Compact scheduler timeline by day",
-    "Tone variants for different event priorities",
-    "Works with custom day labels",
-  ],
-  scenarios: [
-    { title: "Ops dashboard", description: "Show day tasks by lane without heavy calendar widgets." },
-    { title: "Sprint board", description: "Keep event density low and readable." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/showcase.tsx

@@ -1,35 +0,0 @@
-import * as React from "react"
-import { type CalendarSchedulerEvent } from "@/components/modern/calendar-scheduler"
-
-import { CalendarScheduler } from "@/index"
-
-const defaultDays = ["Mon, Jul 6", "Tue, Jul 7", "Wed, Jul 8"]
-
-export function CalendarSchedulerShowcase() {
-  const [showWarning, setShowWarning] = React.useState(true)
-
-  const events = React.useMemo(
-    () => ([
-      { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-      { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
-      { id: "3", title: "Daily standup", date: "Wed, Jul 8", time: "09:30", tone: "default" },
-      ...(showWarning ? [{ id: "4", title: "Priority follow-up", date: "Mon, Jul 6", time: "16:00", tone: "warning" }] : []),
-    ] as CalendarSchedulerEvent[]),
-    [showWarning]
-  )
-
-  return (
-    <div className="space-y-3">
-      <div className="flex gap-2">
-        <button
-          type="button"
-          className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm"
-          onClick={() => setShowWarning((value) => !value)}
-        >
-          {showWarning ? "Hide warning" : "Show warning"}
-        </button>
-      </div>
-      <CalendarScheduler days={defaultDays} events={events} />
-    </div>
-  )
-}

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

@@ -1,18 +0,0 @@
-import type { CardDemoProject } from "./types"
-
-export const cardDemoProjects: CardDemoProject[] = [
-  {
-    title: "Project rollout",
-    description: "Track release readiness across modules and teams.",
-    metrics: ["Design review: Passed", "QA coverage: 84%"],
-    badges: ["secondary", "outline"],
-    footer: "Updated 12 minutes ago",
-  },
-  {
-    title: "Publish queue",
-    description: "3 items waiting for review",
-    metrics: ["Docs", "QA", "Blocking"],
-    badges: ["secondary", "outline", "destructive"],
-    footer: "Escalate if overdue",
-  },
-]

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

@@ -1,4 +0,0 @@
-export { CardShowcase } from "./showcase"
-export { cardMock } from "./mock"
-export { cardDemoProjects } from "./data"
-export type { CardDemoProject } from "./types"

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

@@ -1,22 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const cardMock: ComponentDemoMock = {
-  code: `import { Badge, Card } from "tembro"\n\nexport function Example() {\n  return (\n    <Card\n      title="Project status"\n      description="Release readiness and team alignment"\n      content={\n        <div className="space-y-2">\n          <p>Design review complete. QA pass: 84%.</p>\n          <Badge variant="secondary">Dashboard module</Badge>\n        </div>\n      }\n      footer="Updated 12 minutes ago"\n    />\n  )\n}\n`,
-  cliCommand: "npx tembro add card",
-  highlights: ["Prop-driven surface", "Compact density", "Dashboard modules", "Token-ready styling"],
-  relatedBlockSlugs: ["dashboard-starter", "sidebar-layout", "users-table"],
-  scenarios: [
-    { title: "Status module", description: "Show dense KPI or project status summaries." },
-    { title: "Feature card", description: "Use cards for marketing sections and blocks." },
-    { title: "Compact card", description: "Switch density for tighter dashboard layouts." },
-    { title: "Composed content shell", description: "Assemble headers, media and metadata in one consistent surface." },
-  ],
-  capabilityNotes: [
-    "Use title, description, content and footer props for the default ready-made card API.",
-    "Header/content/footer slot exports stay available only for advanced custom layouts.",
-    "Use size='sm' for dense dashboards and default for richer content blocks.",
-    "Avoid nesting cards; compose with sections, stacks, or lists instead.",
-    "Great as wrapper for forms, metric summaries and preview surfaces.",
-  ],
-}
-

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

@@ -1,101 +0,0 @@
-import { Badge, Button, Card } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { cardDemoProjects } from "./data"
-
-const badgeVariants = ["secondary", "outline", "destructive"] as const
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function CardShowcase({ state }: ComponentDemoProps) {
-  const primaryProject = cardDemoProjects[0]
-  const compactProject = cardDemoProjects[1]
-
-  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">Container</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">One card should hold the whole story</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Show one rich card and one compact card, not extra chrome around them.</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">Primary</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{primaryProject.title}</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">Compact</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{state.cardCompact ? "Small" : "Default"}</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">Metrics</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{primaryProject.metrics.length}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]">
-          <Card
-            size={state.cardCompact ? "sm" : "default"}
-            eyebrow="Content"
-            title={primaryProject.title}
-            description={primaryProject.description}
-            badge={<Badge tone="success" variant="soft">Live</Badge>}
-            action={<Button type="button" size="xs" variant="outline">Open</Button>}
-            content={
-              <div className="grid gap-3 sm:grid-cols-3">
-                {primaryProject.metrics.map((metric) => (
-                  <div key={metric} className="rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong">
-                    {metric}
-                  </div>
-                ))}
-              </div>
-            }
-            footer={primaryProject.footer}
-          />
-
-          <Card
-            size="sm"
-            interactive
-            selected
-            eyebrow="Selectable"
-            title={compactProject.title}
-            description={compactProject.description}
-            content={
-              <div className="flex flex-wrap gap-2">
-                {compactProject.metrics.map((metric, index) => (
-                  <Badge key={metric} variant={badgeVariants[index]}>{metric}</Badge>
-                ))}
-              </div>
-            }
-            footer={compactProject.footer}
-          />
-        </div>
-        <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
-          <Card
-            orientation="horizontal"
-            mediaAspect="square"
-            title="Media card"
-            description="The same Card primitive owns image, copy, action and footer slots."
-            media={<div className="h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]" />}
-            action={<Button type="button" size="xs">View</Button>}
-            content={<p className="text-sm leading-6 aui-text-muted">Use media slots for previews, thumbnails, charts, or product visuals without creating another card component.</p>}
-          />
-          <Card
-            size="sm"
-            density="compact"
-            title="Compact action card"
-            description="Dense layouts still use the same header, content and footer anatomy."
-            content={<div className="text-sm aui-text-strong">12 files ready for review</div>}
-            footer={<Button type="button" size="xs" variant="secondary">Review files</Button>}
-          />
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-export type CardDemoProject = {
-  title: string
-  description: string
-  metrics: string[]
-  badges: Array<"secondary" | "outline" | "destructive">
-  footer: string
-}

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

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

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const carouselMock: ComponentDemoMock = {
-  code: `import { Carousel, CarouselItem } from "tembro"
-
-export function Example() {
-  return (
-    <Carousel defaultIndex={0} showDots showArrows>
-      <CarouselItem><div className="rounded-xl bg-card p-4">Card 1</div></CarouselItem>
-      <CarouselItem><div className="rounded-xl bg-card p-4">Card 2</div></CarouselItem>
-      <CarouselItem><div className="rounded-xl bg-card p-4">Card 3</div></CarouselItem>
-    </Carousel>
-  )
-}`,
-  cliCommand: "npx tembro add carousel",
-  highlights: [
-    "Keyboard and control-aware slider",
-    "Works with any slide content",
-    "Useful for onboarding and feature snippets",
-  ],
-  scenarios: [
-    { title: "Feature tour", description: "Move users through short product highlights." },
-    { title: "Feature cards", description: "Show a compact stack of feature cards without heavy tabs." },
-    { title: "Promo strip", description: "Rotate content in dashboard marketing blocks." },
-  ],
-}

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

@@ -1,97 +0,0 @@
-import * as React from "react"
-
-import { Button } from "@/index"
-import { Carousel, CarouselItem } from "@/components/display/carousel"
-import { cn } from "@/lib/utils"
-
-const steps = [
-  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch", detail: "Hero slider for product onboarding and release tours." },
-  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library", detail: "Card rail, docs previews, and swipe-ready gallery states." },
-  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship", detail: "Active slide details stay below the main frame for context." },
-]
-
-export function CarouselShowcase() {
-  const [showArrows, setShowArrows] = React.useState(true)
-  const [showDots, setShowDots] = React.useState(true)
-  const [autoplay, setAutoplay] = React.useState(false)
-  const [index, setIndex] = React.useState(0)
-  const [playing, setPlaying] = React.useState(false)
-
-  return (
-    <div className="space-y-5">
-      <div className="flex flex-wrap gap-3">
-        <Button size="sm" variant={showArrows ? "default" : "outline"} onClick={() => setShowArrows((value) => !value)}>
-          {showArrows ? "Hide" : "Show"} arrows
-        </Button>
-        <Button size="sm" variant={showDots ? "default" : "outline"} onClick={() => setShowDots((value) => !value)}>
-          {showDots ? "Hide" : "Show"} dots
-        </Button>
-        <Button size="sm" variant={autoplay ? "default" : "outline"} onClick={() => setAutoplay((value) => !value)}>
-          {autoplay ? "Stop" : "Start"} autoplay
-        </Button>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-3">
-        {steps.map((step, slideIndex) => (
-          <Button
-            key={step.title}
-            type="button"
-            variant={index === slideIndex ? "default" : "outline"}
-            className="justify-start"
-            onClick={() => setIndex(slideIndex)}
-          >
-            {slideIndex + 1}. {step.title}
-          </Button>
-        ))}
-      </div>
-
-      <Carousel
-        index={index}
-        loop
-        showArrows={showArrows}
-        showDots={showDots}
-        showStatus
-        showThumbnails
-        autoplay={autoplay}
-        autoplayInterval={2200}
-        showPlaybackControl
-        aspectRatio="16 / 9"
-        onIndexChange={(next) => setIndex(next)}
-        onAutoplayChange={setPlaying}
-        previousLabel="Previous slide"
-        nextLabel="Next slide"
-        renderThumbnail={(_, itemIndex, active) => (
-          <div className={cn("grid gap-1 p-3", active && "bg-primary/5")}>
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">0{itemIndex + 1}</div>
-            <div className="text-sm font-medium text-foreground">{steps[itemIndex]?.title}</div>
-          </div>
-        )}
-        renderActiveDetail={(_, activeIndex) => (
-          <div className="rounded-[20px] border border-border/70 bg-card/80 p-4">
-            <p className="text-sm font-semibold text-foreground">{steps[activeIndex]?.title}</p>
-            <p className="mt-1 text-sm text-muted-foreground">{steps[activeIndex]?.detail}</p>
-          </div>
-        )}
-      >
-        {steps.map((step, slideIndex) => (
-          <CarouselItem key={step.title}>
-            <div className="min-h-56 rounded-xl border border-border bg-card p-8">
-              <div className="flex items-start justify-between gap-3">
-                <div className="grid gap-2">
-                  <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-primary">{step.tone}</p>
-                  <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">{`Slide ${slideIndex + 1}`}</p>
-                  <h3 className="text-lg font-semibold text-foreground">{step.title}</h3>
-                  <p className="text-sm text-muted-foreground">{step.text}</p>
-                </div>
-                <div className="rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground">
-                  {slideIndex + 1}/{steps.length}
-                </div>
-              </div>
-            </div>
-          </CarouselItem>
-        ))}
-      </Carousel>
-      <div className="text-sm text-muted-foreground">Playback: {playing || autoplay ? "active" : "paused"}</div>
-    </div>
-  )
-}

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

@@ -1,8 +0,0 @@
-import type { CheckboxDemoItem } from "./types"
-
-export const checkboxDemoItems: CheckboxDemoItem[] = [
-  { id: "release", label: "Enable release checklist", description: "Primary controlled state", checked: true },
-  { id: "ship", label: "Ship docs update", description: "Default checked example", checked: true },
-  { id: "locked", label: "Locked permission", description: "Disabled access item", disabled: true },
-  { id: "notify", label: "Notify stakeholders", description: "Unchecked follow-up action" },
-]

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

@@ -1,4 +0,0 @@
-export { CheckboxShowcase } from "./showcase"
-export { checkboxMock } from "./mock"
-export { checkboxDemoItems } from "./data"
-export type { CheckboxDemoItem } from "./types"