tembro 1.0.0

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

@@ -0,0 +1,105 @@
+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
+            />
+          </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}
+              />
+            </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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const calendarSchedulerMock: ComponentDemoMock = {
+  code: `import { CalendarScheduler } from "@/index"
+
+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

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

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

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

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

@@ -0,0 +1,76 @@
+import { Badge, 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"}
+            title={primaryProject.title}
+            description={primaryProject.description}
+            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"
+            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>
+      </section>
+    </div>
+  )
+}

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

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

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

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

@@ -0,0 +1,26 @@
+import type { ComponentDemoMock } from "../types"
+
+export const carouselMock: ComponentDemoMock = {
+  code: `import { Carousel, CarouselItem } from "@/index"
+
+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

@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { Button, Carousel, CarouselItem } from "@/index"
+
+const steps = [
+  { title: "Onboarding", text: "Guide quickly from first login." },
+  { title: "Components", text: "Review ready-made dashboard patterns." },
+  { title: "Release", text: "Publish, test, and iterate faster." },
+]
+
+export function CarouselShowcase() {
+  const [showArrows, setShowArrows] = React.useState(true)
+  const [showDots, setShowDots] = React.useState(true)
+  const [index, setIndex] = React.useState(0)
+
+  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>
+      </div>
+
+      <Carousel
+        index={index}
+        loop
+        showArrows={showArrows}
+        showDots={showDots}
+        onIndexChange={(next) => setIndex(next)}
+        previousLabel="Previous slide"
+        nextLabel="Next slide"
+      >
+        {steps.map((step, slideIndex) => (
+          <CarouselItem key={step.title}>
+            <div className="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-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>
+            </div>
+          </CarouselItem>
+        ))}
+      </Carousel>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,24 @@
+import type { ComponentDemoMock } from "../types"
+
+export const cascaderMock: ComponentDemoMock = {
+  code: `import { Cascader } from "@/index"
+
+const options = [{ value: "eu", label: "Europe", children: [{ value: "uk", label: "United Kingdom", children: [{ value: "london", label: "London" }] }] }]
+
+export function Example() {
+  const [value, setValue] = useState<string[]>([])
+
+  return <Cascader options={options} value={value} onValueChange={setValue} />
+}`,
+  cliCommand: "npx tembro add cascader",
+  highlights: [
+    "Three-level dependency selects",
+    "Controlled by string path value",
+    "Disabled states for unavailable levels",
+  ],
+  scenarios: [
+    { title: "Location selector", description: "Choose region / country / city in one compact control." },
+    { title: "Category trees", description: "Pick nested taxonomy in forms." },
+  ],
+}
+

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

@@ -0,0 +1,20 @@
+import * as React from "react"
+
+import { Cascader, type CascaderOption } from "@/index"
+
+const locations: CascaderOption[] = [
+  { value: "eu", label: "Europe", children: [{ value: "uk", label: "United Kingdom", children: [{ value: "london", label: "London" }] }] },
+  { value: "us", label: "United States", children: [{ value: "ca", label: "California", children: [{ value: "sf", label: "San Francisco" }] }] },
+]
+
+export function CascaderShowcase() {
+  const [value, setValue] = React.useState<string[]>([])
+
+  return (
+    <div className="space-y-3">
+      <Cascader options={locations} value={value} onValueChange={setValue} />
+      <p className="text-sm text-muted-foreground">Selected path: {value.length ? value.join(" / ") : "Not selected"}</p>
+    </div>
+  )
+}
+

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

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

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

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

@@ -0,0 +1,21 @@
+import type { ComponentDemoMock } from "../types"
+
+export const checkboxMock: ComponentDemoMock = {
+  code: `import * as React from "react"\nimport { Checkbox } from "tembro"\n\nexport function Example() {\n  const [termsAccepted, setTermsAccepted] = React.useState(false)\n\n  return (\n    <div className="space-y-3">\n      <label className="flex items-center gap-2">\n        <Checkbox\n          checked={termsAccepted}\n          onCheckedChange={(checked) => setTermsAccepted(Boolean(checked))}\n        />\n        <span>Accept terms and conditions</span>\n      </label>\n      <label className="flex items-center gap-2">\n        <Checkbox id="indeterminate" indeterminate />\n        <span>Parent selection (mixed state)</span>\n      </label>\n      <label className="flex items-center gap-2">\n        <Checkbox id="readonly" readOnly checked />\n        <span>Read-only state example</span>\n      </label>\n    </div>\n  )\n}\n`,
+  cliCommand: "npx tembro add checkbox",
+  highlights: ["Checked state", "Indeterminate-ready API", "Task lists", "Permission groups"],
+  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
+  scenarios: [
+    { title: "Release checklist", description: "Track deployment readiness with simple binary controls." },
+    { title: "Permissions", description: "Apply checkbox groups in role and access screens." },
+    { title: "Bulk selection", description: "Use in table rows and mass-action workflows." },
+    { title: "Task confirmation", description: "Represent short check sequences inside setup and review screens." },
+  ],
+  capabilityNotes: [
+    "Supports checked, disabled and indeterminate-ready API usage patterns.",
+    "Pair each checkbox with label elements for accessible toggles.",
+    "Use checked/unchecked states for workflows, not custom state machines.",
+    "For mixed selections, compute parent indeterminate state from child selections.",
+  ],
+}
+

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

@@ -0,0 +1,72 @@
+import { Badge, Button, Checkbox } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { checkboxDemoItems } from "./data"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function CheckboxShowcase({ 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">Binary lists</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Checkboxes should read like a checklist</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Controlled</Badge>
+            <Badge variant="outline" className="rounded-full">Default checked</Badge>
+            <Badge variant="outline" className="rounded-full">Disabled</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {checkboxDemoItems.map((item, index) => (
+            <label key={item.label} htmlFor={item.id} className={`${panelClass} flex items-start gap-3`}>
+              <Checkbox
+                id={item.id}
+                checked={index === 0 ? state.checked : item.checked}
+                disabled={item.disabled}
+                onCheckedChange={index === 0 ? (checked) => setState({ checked: Boolean(checked) }) : undefined}
+                defaultChecked={index > 0 ? item.checked : undefined}
+              />
+              <div>
+                <p className="text-sm font-medium aui-text-strong">{item.label}</p>
+                <p className="mt-1 text-sm aui-text-muted">{item.description}</p>
+              </div>
+            </label>
+          ))}
+        </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">
+              Release checklist is {state.checked ? "enabled" : "disabled"}
+            </h4>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Toggle the first row or use these actions to verify controlled checkbox behavior.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" size="sm" onClick={() => setState({ checked: true })}>
+              Enable
+            </Button>
+            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ checked: false })}>
+              Disable
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+export type CheckboxDemoItem = {
+  label: string
+  description: string
+  id: string
+  checked?: boolean
+  disabled?: boolean
+}

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

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

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

@@ -0,0 +1,30 @@
+import type { ComponentDemoMock } from "../types"
+
+export const clearableInputMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { ClearableInput } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState("workspace token")
+
+  return (
+    <ClearableInput
+      value={value}
+      onValueChange={setValue}
+      placeholder="Filter or paste value..."
+      clearOnEscape
+    />
+  )
+}`,
+  highlights: ["Inline clear action", "Escape-to-clear support", "Focus restore after clearing", "Small but high-frequency utility input"],
+  scenarios: [
+    { title: "Filter reset", description: "Let users clear a short filter without hunting for an extra reset button." },
+    { title: "Token paste", description: "Remove a pasted value quickly and stay focused in the same field." },
+    { title: "Toolbar utility", description: "Use in dense admin bars where compact cleanup matters." },
+  ],
+  capabilityNotes: [
+    "Clearable input is strongest for short-lived values like filters and quick entry.",
+    "Escape clear is useful only when the input is frequently changed.",
+    "Keep the field visually quiet so the clear action feels secondary.",
+  ],
+}