tembro 3.1.17 → 4.0.1

package/packages/cli/vendor/src/showcase/premium/scroll-box/index.ts

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

package/packages/cli/vendor/src/showcase/premium/scroll-box/mock.ts

@@ -1,33 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const scrollBoxMock: ComponentDemoMock = {
-  code: `import { ScrollBox } from "tembro"
-
-const items = ["Queue item 1", "Queue item 2", "Queue item 3", "Queue item 4", "Queue item 5"]
-
-export function Example() {
-  return (
-    <ScrollBox maxHeight={220} className="rounded-2xl border border-border bg-card p-3">
-      <div className="grid gap-2">
-        {items.map((item) => <div key={item} className="rounded-xl border border-border/70 px-3 py-2">{item}</div>)}
-      </div>
-    </ScrollBox>
-  )
-}`,
-  htmlCode: `<div data-slot="scroll-box"></div>`,
-  cliCommand: "npx tembro add scroll-box",
-  highlights: ["Bounded scroll", "Axis control", "Dense lists", "Panel content"],
-  relatedBlockSlugs: ["users-table", "crm-dashboard", "dashboard-starter"],
-  scenarios: [
-    { title: "Queue panel", description: "Keep long lists inside a bounded surface instead of stretching the page." },
-    { title: "Side panel", description: "Useful when a drawer or sidebar must scroll independently." },
-    { title: "Dense admin lists", description: "Preserve surrounding layout while still exposing all records." },
-  ],
-  capabilityNotes: [
-    "Use ScrollBox when only one region should scroll, not the whole page.",
-    "Set a clear height boundary so users understand why the area scrolls.",
-    "Avoid nesting many independent scroll regions unless necessary.",
-    "Keep internal spacing readable; scroll should not become visual punishment.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/scroll-box/showcase.tsx

@@ -1,75 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, ScrollBox } from "@/index"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const items = Array.from({ length: 12 }, (_, index) => ({
-  id: `queue-${index + 1}`,
-  title: `Queue item ${index + 1}`,
-  text: index % 2 === 0 ? "Waiting for review and release notes approval." : "Needs design check before public docs sync.",
-}))
-
-export function ScrollBoxShowcase() {
-  const [maxHeight, setMaxHeight] = React.useState(220)
-
-  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">Bounded scroll</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Scroll box should contain density without breaking page rhythm</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use it when one region must scroll independently while the rest of the page stays stable.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Independent region</Badge>
-            <Badge variant="outline" className="rounded-full">Height bound</Badge>
-            <Badge variant="outline" className="rounded-full">Dense lists</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1fr_0.9fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Review queue</p>
-            <div className="mt-3">
-              <ScrollBox maxHeight={maxHeight} className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-3">
-                <div className="grid gap-2">
-                  {items.map((item) => (
-                    <div key={item.id} className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-3 py-3">
-                      <p className="font-medium aui-text-strong">{item.title}</p>
-                      <p className="mt-1 text-sm aui-text-muted">{item.text}</p>
-                    </div>
-                  ))}
-                </div>
-              </ScrollBox>
-            </div>
-          </div>
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Current max height</p>
-            <p className="mt-3 text-lg font-semibold aui-text-strong">{maxHeight}px</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">Scroll height: {maxHeight}px</h4>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {[160, 220, 320].map((value) => (
-              <Button key={value} type="button" size="sm" variant={maxHeight === value ? "default" : "secondary"} onClick={() => setMaxHeight(value)}>
-                {value}px
-              </Button>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,25 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sectionMock: ComponentDemoMock = {
-  code: `import { Button, Section } from "tembro"
-
-export function Example() {
-  return (
-    <Section
-      title="Team members"
-      description="Manage who sees this workspace."
-      bordered
-      actions={<Button size="sm">Manage</Button>}
-    >
-      <div>Row content</div>
-    </Section>
-  )
-}`,
-  cliCommand: "npx tembro add section",
-  highlights: ["Header, description and actions in one wrapper", "Bordered mode for page sections", "Reusable container semantics"],
-  scenarios: [
-    { title: "Overview", description: "Use as dashboard section shell." },
-    { title: "Settings", description: "Keep section title and actions aligned." },
-    { title: "Detail pages", description: "Consistent structure across multiple blocks." },
-  ],
-}

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

@@ -1,25 +0,0 @@
-import { Button, Section } from "@/index"
-
-export function SectionShowcase() {
-  return (
-    <div className="space-y-4">
-      <Section
-        title="Team workspace"
-        description="Keep each block self-explanatory and easy to scan."
-        bordered
-        actions={<Button size="sm">Edit settings</Button>}
-      >
-        <p className="text-sm text-muted-foreground">Use bordered sections for dashboards with many clusters.</p>
-      </Section>
-
-      <Section
-        title="No header mode"
-        padded={false}
-      >
-        <div className="rounded-lg border border-border bg-background p-4">
-          <p className="text-sm text-foreground">You can also use it as a simple content wrapper.</p>
-        </div>
-      </Section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/segmented-control/index.ts

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

package/packages/cli/vendor/src/showcase/premium/segmented-control/mock.ts

@@ -1,34 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const segmentedControlMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { LayoutGridIcon, Rows3Icon, Table2Icon } from "lucide-react"
-import { SegmentedControl } from "tembro"
-
-const options = [
-  { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },
-  { value: "list", label: "List", icon: <Rows3Icon className="size-4" /> },
-  { value: "table", label: "Table", icon: <Table2Icon className="size-4" /> },
-]
-
-export function Example() {
-  const [value, setValue] = React.useState("board")
-
-  return <SegmentedControl value={value} onValueChange={setValue} options={options} />
-}`,
-  htmlCode: `<div data-slot="segmented-control">
-  <button role="radio" aria-checked="true">Board</button>
-  <button role="radio" aria-checked="false">List</button>
-</div>`,
-  cliCommand: "npx tembro add segmented-control",
-  highlights: [
-    "Controlled or uncontrolled value handling",
-    "Icon + label segments with size tokens",
-    "Good for view switching, density, and mode changes",
-  ],
-  scenarios: [
-    { title: "View mode", description: "Switch between board, list, and table without opening a menu." },
-    { title: "Density", description: "Let users change compactness inline inside the header." },
-    { title: "Filter mode", description: "Keep small mutually-exclusive states visible at a glance." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/segmented-control/showcase.tsx

@@ -1,101 +0,0 @@
-import * as React from "react"
-import { LayoutGridIcon, Rows3Icon, SlidersHorizontalIcon, Table2Icon } from "lucide-react"
-
-import { Badge, SegmentedControl } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SegmentedControlShowcase() {
-  const [view, setView] = React.useState("board")
-  const [density, setDensity] = React.useState("comfortable")
-
-  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">SegmentedControl is the inline mode switch</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it when the user should compare mutually-exclusive states immediately, not open a dropdown first.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Workspace view switch</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              The primary use-case is a visible view toggle for board, list, or table layouts.
-            </p>
-            <div className="mt-5">
-              <SegmentedControl
-                value={view}
-                onValueChange={setView}
-                options={[
-                  { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },
-                  { value: "list", label: "List", icon: <Rows3Icon className="size-4" /> },
-                  { value: "table", label: "Table", icon: <Table2Icon className="size-4" /> },
-                ]}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="text-sm font-semibold aui-text-strong">Current surface</p>
-                <p className="mt-1 text-xs aui-text-muted">Controlled selection is ready for route state or URL sync.</p>
-              </div>
-              <Badge variant="secondary">{view}</Badge>
-            </div>
-            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Prefer segmented controls for 2 to 4 options that should stay visible together.</p>
-              <p>Once the list grows larger or becomes searchable, move to Select instead.</p>
-            </div>
-          </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">Density and size tokens</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Compact admin pages often need a second segmented row for density or behavior mode.
-            </p>
-            <div className="mt-5 space-y-4">
-              <SegmentedControl
-                size="sm"
-                value={density}
-                onValueChange={setDensity}
-                options={[
-                  { value: "compact", label: "Compact" },
-                  { value: "comfortable", label: "Comfortable" },
-                  { value: "spacious", label: "Spacious" },
-                ]}
-              />
-              <SegmentedControl
-                size="lg"
-                fullWidth
-                equalWidth
-                defaultValue="filters"
-                options={[
-                  { value: "filters", label: "Filters", icon: <SlidersHorizontalIcon className="size-4" /> },
-                  { value: "views", label: "Views", icon: <Rows3Icon className="size-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>Use one sentence labels. Long phrases make the rail heavy and unstable.</p>
-              <p>Keep the selected segment visually stronger than neighboring options, but do not turn it into a full button row.</p>
-              <p>If a segment triggers navigation instead of state, route tabs may be the better primitive.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,30 +0,0 @@
-import type { SelectDemoGroup } from "./types"
-
-export const selectDemoGroups: SelectDemoGroup[] = [
-  {
-    title: "Plan picker",
-    options: [
-      { value: "starter", label: "Starter" },
-      { value: "growth", label: "Growth", description: "25 seats and shared support" },
-      { value: "enterprise", label: "Enterprise", description: "Unlimited seats and priority support" },
-    ],
-  },
-  {
-    title: "Status filter",
-    size: "sm",
-    options: [
-      { value: "active", label: "Active" },
-      { value: "review", label: "Review" },
-      { value: "draft", label: "Draft" },
-    ],
-  },
-  {
-    title: "Grouped workspace routing",
-    options: [
-      { value: "north", label: "North Region", description: "Sales operations", keywords: ["sales"] },
-      { value: "south", label: "South Region", description: "Support queue", keywords: ["support"] },
-      { value: "billing", label: "Billing Desk", description: "Finance team", keywords: ["finance"] },
-      { value: "archive", label: "Archive", description: "Read-only records", disabled: true, keywords: ["disabled"] },
-    ],
-  },
-]

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

@@ -1,4 +0,0 @@
-export { SelectShowcase } from "./showcase"
-export { selectMock } from "./mock"
-export { selectDemoGroups } from "./data"
-export type { SelectDemoGroup, SelectDemoOption } from "./types"

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

@@ -1,22 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const selectMock: ComponentDemoMock = {
-  code: `import { Select } from "tembro"\n\nconst planGroups = [\n  {\n    label: "Plans",\n    options: [\n      { value: "starter", label: "Starter" },\n      { value: "growth", label: "Growth", description: "25 seats" },\n      { value: "enterprise", label: "Enterprise", description: "Priority support" },\n    ],\n  },\n]\n\nexport function Example() {\n  return (\n    <Select\n      defaultValue="starter"\n      groups={planGroups}\n      searchable\n      clearable\n      emptyMessage="No plan matched"\n    />\n  )\n}`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Grouped option support", "Compact trigger options"],
-  relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],
-  scenarios: [
-    { title: "Plan picker", description: "Switch between starter, growth and enterprise plans." },
-    { title: "Status filter", description: "Use select inside dashboards and reporting toolbars." },
-    { title: "Compact trigger", description: "Render small controls in dense admin layouts." },
-    { title: "Grouped options", description: "Present structured choices without overwhelming the form." },
-  ],
-  capabilityNotes: [
-    "Start here for most static single-choice flows before reaching for helper members.",
-    "Supports controlled and uncontrolled selected values, grouped options, clearable state, and searchable local filtering.",
-    "Includes trigger sizing for compact or default density layouts.",
-    "AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.",
-  ],
-}
-
-

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

@@ -1,198 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Select } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { selectDemoGroups } from "./data"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-type SelectMode = "plan" | "density"
-
-export function SelectShowcase({ state, setState }: ComponentDemoProps) {
-  const planOptions = selectDemoGroups[0].options
-  const compactOptions = selectDemoGroups[1].options
-  const groupedOptions = selectDemoGroups[2].options
-  const selectedValue = state.selectValue ?? planOptions[0].value
-  const selectedPlan = planOptions.find((option) => option.value === selectedValue) ?? planOptions[0]
-  const highlightedPlan = planOptions[1] ?? planOptions[0]
-  const [surface, setSurface] = React.useState<SelectMode>("plan")
-  const [workspace, setWorkspace] = React.useState("north")
-
-  const summaryRows =
-    selectedPlan.value === "enterprise"
-      ? [["Seats", "Unlimited"], ["Support", "Dedicated"], ["SLA", "Priority"]]
-      : selectedPlan.value === "growth"
-        ? [["Seats", "25"], ["Support", "Shared"], ["SLA", "Same day"]]
-        : [["Seats", "5"], ["Support", "Email"], ["SLA", "Standard"]]
-
-  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">Selection</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">One clean select surface first</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Show the default trigger, controlled value, and summary update in one place.</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">Choice</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{selectedPlan.label}</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">Mode</p>
-              <p className="mt-2 text-lg font-semibold capitalize aui-text-strong">{surface}</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">Options</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{surface === "plan" ? planOptions.length : compactOptions.length}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6 flex flex-wrap gap-2">
-          <Button size="sm" variant={surface === "plan" ? "default" : "outline"} onClick={() => setSurface("plan")}>
-            Default trigger
-          </Button>
-              <Button size="sm" variant={surface === "density" ? "default" : "outline"} onClick={() => setSurface("density")}>
-            Compact trigger
-          </Button>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
-          <div className="space-y-4">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Primary select</p>
-              <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">
-                {surface === "plan" ? "Standard choice trigger" : "Compact toolbar trigger"}
-              </h4>
-            </div>
-
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
-              <p className="text-sm font-medium aui-text-muted">{surface === "plan" ? "Workspace plan" : "Toolbar density"}</p>
-              <div className="mt-3">
-                {surface === "plan" ? (
-                  <Select
-                    value={selectedValue}
-                    onValueChange={(value) => setState({ selectValue: value ?? planOptions[0].value })}
-                    options={planOptions}
-                    triggerClassName="w-full"
-                  />
-                ) : (
-                  <Select
-                    defaultValue={compactOptions[0].value}
-                    options={compactOptions}
-                    size="sm"
-                    triggerClassName="w-full"
-                  />
-                )}
-              </div>
-            </div>
-
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
-              <p className="text-sm font-medium aui-text-muted">Grouped searchable select</p>
-              <div className="mt-3">
-                <Select
-                  value={workspace}
-                  onValueChange={(value) => setWorkspace(value ?? "north")}
-                  searchable
-                  clearable
-                  placeholder="Choose workspace"
-                  emptyMessage="No workspace matched"
-                  groups={[
-                    { label: "Regions", options: groupedOptions.slice(0, 2) },
-                    { label: "Operations", options: groupedOptions.slice(2) },
-                  ]}
-                  triggerClassName="w-full"
-                />
-              </div>
-            </div>
-
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
-              <p className="text-sm font-medium aui-text-muted">Custom option renderer without duplicate check icons</p>
-              <div className="mt-3">
-                <Select
-                  defaultValue={planOptions[1].value}
-                  options={planOptions}
-                  showSelectedIndicator={false}
-                  renderOption={(option, optionState) => (
-                    <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
-                      <span className="min-w-0">
-                        <span className="block truncate font-medium">{option.label}</span>
-                        {option.description ? <span className="block truncate text-xs aui-text-muted">{option.description}</span> : null}
-                      </span>
-                      {optionState.selected ? <span className="rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold">Selected</span> : null}
-                    </span>
-                  )}
-                  triggerClassName="w-full"
-                />
-              </div>
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-3">
-              {summaryRows.map(([label, value]) => (
-                <div key={label} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-                  <p className="text-xs aui-text-muted">{label}</p>
-                  <p className="mt-1 text-sm font-medium aui-text-strong">{value}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Controlled result</p>
-                <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">{selectedPlan.label}</h4>
-              </div>
-              <Badge variant="outline" className="rounded-full">{selectedPlan.value}</Badge>
-            </div>
-
-            <div className="border-y border-[color:var(--aui-divider)]">
-              {[
-                "Base Select should cover normal forms and static choices first.",
-                "Async and searchable variants should be documented as upgrades, not parallel defaults.",
-                "Controlled value must update nearby product UI immediately.",
-              ].map((note) => (
-                <div key={note} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-                  {note}
-                </div>
-              ))}
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <Button type="button" size="sm" onClick={() => setState({ selectValue: highlightedPlan.value })}>
-                Choose {highlightedPlan.label}
-              </Button>
-              <Button type="button" size="sm" variant="secondary" onClick={() => setState({ selectValue: planOptions[0].value })}>
-                Reset
-              </Button>
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-2">
-              <Select
-                value="invalid"
-                onValueChange={() => undefined}
-                options={[{ value: "invalid", label: "Invalid selection" }]}
-                invalid
-                triggerClassName="w-full"
-              />
-              <Select
-                value="loading"
-                onValueChange={() => undefined}
-                options={[{ value: "loading", label: "Loading options" }]}
-                loading
-                triggerClassName="w-full"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,13 +0,0 @@
-export type SelectDemoOption = {
-  value: string
-  label: string
-  description?: string
-  disabled?: boolean
-  keywords?: string[]
-}
-
-export type SelectDemoGroup = {
-  title: string
-  size?: "default" | "sm"
-  options: SelectDemoOption[]
-}

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

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

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

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

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

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

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

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