tembro 3.1.17 → 4.0.1

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

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const progressMock: ComponentDemoMock = {
-  code: `import { Progress, ProgressCard } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-4">
-      <Progress label="Migration status" value={72} showValue />
-      <ProgressCard
-        title="Workspace import"
-        description="Current completion state"
-        value={58}
-        tone="info"
-      />
-    </div>
-  )
-}`,
-  highlights: ["Linear progress with contextual label", "Value formatting", "Tone support for risk and success states", "Card wrapper for dashboard surfaces"],
-  scenarios: [
-    { title: "Import flow", description: "Show users how much data sync or onboarding remains." },
-    { title: "Release readiness", description: "Track operational completion state in dashboards." },
-    { title: "Background jobs", description: "Expose live or indeterminate processing in a compact way." },
-  ],
-  capabilityNotes: [
-    "Progress is strongest when tied to a real milestone or measurable completion state.",
-    "Use indeterminate only when precise completion cannot be known yet.",
-    "Label the meaning of the progress, not just the percent.",
-  ],
-}

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

@@ -1,65 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Progress, ProgressCard } 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 ProgressShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = React.useState(58)
-  const [indeterminate, setIndeterminate] = React.useState(false)
-
-  return (
-    <div className="space-y-5">
-      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Completion signal</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Progress should explain movement, not just paint a bar</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              A useful progress surface ties completion to a concrete workflow like sync, rollout, approval, or onboarding.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Deterministic</Badge>
-            <Badge variant="outline" className="rounded-full">Indeterminate</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <Progress
-            label="Workspace import"
-            description="Records indexed and validated"
-            value={value}
-            tone="info"
-            showValue
-            indeterminate={indeterminate}
-          />
-        </section>
-        <ProgressCard
-          title="Release readiness"
-          description="Checks passed before public rollout"
-          value={value}
-          tone={value >= 80 ? "success" : value >= 50 ? "info" : "warning"}
-          footer={<p className="text-xs aui-text-muted">Promote only when all gates are green.</p>}
-        />
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <div className="flex flex-wrap gap-2">
-            <Button size="sm" variant="outline" onClick={() => setValue((current) => Math.max(0, current - 10))}>-10</Button>
-            <Button size="sm" variant="outline" onClick={() => setValue((current) => Math.min(100, current + 10))}>+10</Button>
-            <Button size="sm" variant="outline" onClick={() => setIndeterminate((current) => !current)}>
-              Toggle indeterminate
-            </Button>
-          </div>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/qr-code/index.ts

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

package/packages/cli/vendor/src/showcase/premium/qr-code/mock.ts

@@ -1,15 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const qrCodeMock: ComponentDemoMock = {
-  code: `import { QRCode } from "tembro"
-
-export function Example() {
-  return <QRCode value="https://example.com/invoices/INV-2048" errorCorrectionLevel="H" size={180} />
-}`,
-  cliCommand: "npx tembro add qr-code",
-  highlights: ["Real standards-compliant QR encoding", "SVG output with configurable error correction and colors"],
-  scenarios: [
-    { title: "Payment links", description: "Encode checkout or invoice URLs into scan-ready symbols." },
-    { title: "Device pairing", description: "Share connection payloads with stronger error correction." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/qr-code/showcase.tsx

@@ -1,12 +0,0 @@
-import * as React from "react"
-import { QRCode } from "@/index"
-
-export function QRCodeShowcase() {
-  const [value, setValue] = React.useState("https://tembro.dev/components/qr-code")
-  return (
-    <div className="mx-auto grid max-w-sm justify-items-center gap-4">
-      <QRCode value={value} size={184} errorCorrectionLevel="H" />
-      <input aria-label="QR code value" value={value} className="h-10 w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" onChange={(event) => setValue(event.target.value)} />
-    </div>
-  )
-}

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

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

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

@@ -1,33 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const radioGroupMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { RadioGroup } from "tembro"
-
-const planOptions = [
-  { value: "starter", label: "Starter", description: "Good for single workspace setup." },
-  { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
-  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support." },
-]
-
-export function Example() {
-  const [value, setValue] = useState("growth")
-
-  return <RadioGroup value={value} onValueChange={setValue} options={planOptions} />
-}`,
-  htmlCode: `<div data-slot="radio-group" role="radiogroup"></div>`,
-  cliCommand: "npx tembro add radio-group",
-  highlights: ["Single choice", "Description rows", "Controlled value", "Plan selection"],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "dashboard-starter"],
-  scenarios: [
-    { title: "Plan choice", description: "Use when only one option can stay active." },
-    { title: "Density mode", description: "Useful for settings that must remain mutually exclusive." },
-    { title: "Form clarity", description: "Descriptions reduce ambiguity between similar choices." },
-  ],
-  capabilityNotes: [
-    "Prefer RadioGroup over Select when all choices should remain visible.",
-    "Use descriptions only when options are close enough to need clarification.",
-    "Keep the selected value controlled in settings or pricing flows.",
-    "Switch to Checkbox only when multiple answers can be true at once.",
-  ],
-}

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

@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, RadioGroup } from "@/index"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const planOptions = [
-  { value: "starter", label: "Starter", description: "Good for single workspace setup." },
-  { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
-  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support.", disabled: true },
-] as const
-
-export function RadioGroupShowcase() {
-  const [value, setValue] = React.useState("growth")
-
-  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">Single choice</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Radio group should make one active choice obvious</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Keep all options visible when users should compare them before selecting one final answer.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Visible choices</Badge>
-            <Badge variant="outline" className="rounded-full">Single answer</Badge>
-            <Badge variant="outline" className="rounded-full">Controlled</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Workspace plan</p>
-            <div className="mt-3">
-              <RadioGroup value={value} onValueChange={setValue} options={planOptions.map((option) => ({ ...option }))} />
-            </div>
-          </div>
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Selection summary</p>
-            <p className="mt-3 text-lg font-semibold aui-text-strong">{planOptions.find((option) => option.value === value)?.label}</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">{planOptions.find((option) => option.value === value)?.description}</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">Current plan: {value}</h4>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {planOptions.map((option) => (
-              <Button key={option.value} type="button" size="sm" variant={value === option.value ? "default" : "secondary"} onClick={() => setValue(option.value)}>
-                {option.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-        <div className="mt-5">
-          <RadioGroup
-            invalid
-            defaultValue="card"
-            orientation="horizontal"
-            options={[
-              { value: "card", label: "Card" },
-              { value: "bank", label: "Bank" },
-              { value: "invoice", label: "Invoice", disabled: true },
-            ]}
-          />
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const ratingMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Rating } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState(4)
-
-  return (
-    <Rating
-      value={value}
-      onValueChange={setValue}
-      labels={{ rate: (score) => \`Rate \${score}\` }}
-    />
-  )
-}`,
-  highlights: ["Compact score input", "Hover and clear behavior", "Accessible label support", "Good for reviews, QA, and lightweight feedback"],
-  scenarios: [
-    { title: "QA handoff", description: "Capture a quick confidence score before shipping a change." },
-    { title: "Support satisfaction", description: "Collect a lightweight post-resolution rating." },
-    { title: "Internal review", description: "Use a compact score where a full form would slow people down." },
-  ],
-  capabilityNotes: [
-    "Use rating when relative sentiment matters more than exact numeric entry.",
-    "Allow clear when revising feedback is a normal part of the flow.",
-    "Keep the label around the score context outside the stars themselves.",
-  ],
-}

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

@@ -1,59 +0,0 @@
-import * as React from "react"
-
-import { Badge, Rating } 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 RatingShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = React.useState(4)
-
-  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">Feedback input</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Rating should capture quick sentiment without turning into a full form</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This control is best when people need a fast qualitative score and should not be distracted by extra layout or wrapper UI.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Quick score</Badge>
-            <Badge variant="outline" className="rounded-full">Clearable</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <Rating
-          value={value}
-          onValueChange={setValue}
-          labels={{ rate: (score) => `Rate ${score}`, clear: "Reset score" }}
-        />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current score</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{value || "No score"}</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Typical usage</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Good for support resolution, QA confidence, compact reviews, and places where a full textarea would slow the task down.
-          </p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Yulduzlar ustiga olib borib hover holatini va shu scorega yana bosib clear bo‘lishini sinab ko‘ring.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/resizable-panel/index.ts

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

package/packages/cli/vendor/src/showcase/premium/resizable-panel/mock.ts

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const resizablePanelMock: ComponentDemoMock = {
-  code: `import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "tembro"
-
-export function Example() {
-  return (
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={30}>Catalog</ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={70}>Details</ResizablePanel>
-    </ResizablePanelGroup>
-  )
-}`,
-  cliCommand: "npx tembro add resizable-panel",
-  highlights: [
-    "Declarative split layout with customizable handles",
-    "Supports horizontal and vertical directions",
-    "Keyboard-accessible resize interactions",
-  ],
-  scenarios: [
-    { title: "Code editors", description: "Split file tree and editor panes." },
-    { title: "Dashboards", description: "Resize nav and detail panels interactively." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/resizable-panel/showcase.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/index"
-
-export function ResizablePanelShowcase() {
-  const [vertical, setVertical] = React.useState(false)
-
-  return (
-    <div className="space-y-4">
-      <button type="button" className="inline-flex rounded-md border px-3 py-1.5 text-sm" onClick={() => setVertical((value) => !value)}>
-        Direction: {vertical ? "Vertical" : "Horizontal"}
-      </button>
-      <ResizablePanelGroup direction={vertical ? "vertical" : "horizontal"} className="h-56">
-        <ResizablePanel defaultSize={35} className="grid place-items-center">
-          <span className="text-sm text-muted-foreground">Navigation</span>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={65} className="grid place-items-center">
-          <span className="text-sm text-muted-foreground">Details</span>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/index.ts

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

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/mock.ts

@@ -1,15 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const richTextEditorMock: ComponentDemoMock = {
-  code: `import { RichTextEditor } from "tembro"
-
-export function Example() {
-  return <RichTextEditor defaultValue="<p>Write the release notes...</p>" onValueChange={console.log} />
-}`,
-  cliCommand: "npx tembro add rich-text-editor",
-  highlights: ["TipTap and ProseMirror editing engine", "HTML/text output with formatting, history, lists, quotes, and links"],
-  scenarios: [
-    { title: "Knowledge base", description: "Author structured support and documentation content." },
-    { title: "Product updates", description: "Create formatted release notes with controlled persistence." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/showcase.tsx

@@ -1,12 +0,0 @@
-import * as React from "react"
-import { RichTextEditor } from "@/index"
-
-export function RichTextEditorShowcase() {
-  const [value, setValue] = React.useState("<h2>Release notes</h2><p>Describe what changed for customers.</p>")
-  return (
-    <div className="grid gap-3">
-      <RichTextEditor value={value} onValueChange={setValue} onLinkRequest={() => "https://tembro.dev"} />
-      <p className="text-xs text-muted-foreground">{value.length} HTML characters</p>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/right-click-menu/index.ts

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

package/packages/cli/vendor/src/showcase/premium/right-click-menu/mock.ts

@@ -1,37 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const rightClickMenuMock: ComponentDemoMock = {
-  code: `import { RightClickMenu } from "tembro"
-
-export function Example() {
-  return (
-    <RightClickMenu
-      items={[
-        { label: "Rename" },
-        { label: "Duplicate" },
-        { label: "Archive" },
-      ]}
-    >
-      <div className="rounded-2xl border border-border bg-card px-4 py-8 text-sm">
-        Right click this surface
-      </div>
-    </RightClickMenu>
-  )
-}`,
-  htmlCode: `<div data-slot="right-click-menu"></div>`,
-  cliCommand: "npx tembro add right-click-menu",
-  highlights: ["Context actions", "Pointer workflow", "Compact menus", "Workspace interactions"],
-  relatedBlockSlugs: ["users-table", "crm-dashboard", "dashboard-starter"],
-  scenarios: [
-    { title: "File-like actions", description: "Useful where users expect desktop-style context menus." },
-    { title: "Dense workspaces", description: "Expose secondary row actions without cluttering the default UI." },
-    { title: "Power-user flow", description: "Keep advanced actions one right-click away instead of always visible." },
-  ],
-  capabilityNotes: [
-    "Use RightClickMenu only where pointer-first interaction is expected.",
-    "Always keep a visible fallback path for touch and keyboard users.",
-    "Keep labels short so menus remain scannable.",
-    "Reserve it for secondary actions, not the only way to complete a task.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/right-click-menu/showcase.tsx

@@ -1,74 +0,0 @@
-import * as React from "react"
-
-import { ArchiveIcon, CopyIcon, PencilIcon, Trash2Icon } from "lucide-react"
-
-import { Badge, Button, RightClickMenu } from "@/index"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function RightClickMenuShowcase() {
-  const [lastAction, setLastAction] = React.useState("Rename")
-
-  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">Context actions</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Right click menu should hide secondary actions until they are needed</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use it for workspace-style surfaces where always-visible row actions would create too much noise.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Secondary actions</Badge>
-            <Badge variant="outline" className="rounded-full">Pointer workflow</Badge>
-            <Badge variant="outline" className="rounded-full">Compact menu</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Interactive surface</p>
-            <div className="mt-3">
-              <RightClickMenu
-                items={[
-                  { label: "Rename", icon: <PencilIcon />, shortcut: "R", onSelect: () => setLastAction("Rename") },
-                  { label: "Duplicate", icon: <CopyIcon />, shortcut: "D", onSelect: () => setLastAction("Duplicate") },
-                  { label: "Archive", icon: <ArchiveIcon />, onSelect: () => setLastAction("Archive") },
-                  { label: "Remove", icon: <Trash2Icon />, variant: "destructive", onSelect: () => setLastAction("Remove") },
-                ]}
-              >
-                <div className="rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted" tabIndex={0}>
-                  Right click, use Shift+F10, or press the context-menu key in this area
-                </div>
-              </RightClickMenu>
-            </div>
-          </div>
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Last action</p>
-            <p className="mt-3 text-lg font-semibold aui-text-strong">{lastAction}</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Keep a visible fallback action path for keyboard and touch users.</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">Selected action: {lastAction}</h4>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {["Rename", "Duplicate", "Archive"].map((action) => (
-              <Button key={action} type="button" size="sm" variant={lastAction === action ? "default" : "secondary"} onClick={() => setLastAction(action)}>
-                {action}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,43 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const savedFilterSelectMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { SavedFilterSelect } from "tembro"
-
-const filters = [
-  { value: "billing", label: "Billing", description: "Invoices and payment status" },
-  { value: "ops", label: "Operations", description: "Queues and workload" },
-  { value: "owners", label: "Owner: Azamat", description: "Assigned records only" },
-]
-
-export function Example() {
-  const [value, setValue] = useState("billing")
-
-  return (
-    <SavedFilterSelect
-      value={value}
-      onValueChange={setValue}
-      filters={filters}
-      onSave={() => undefined}
-      onDelete={() => undefined}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add saved-filter-select",
-  highlights: [
-    "Named view switching",
-    "Nested delete action behavior",
-    "Toolbar-friendly control",
-    "Controlled active view API",
-  ],
-  scenarios: [
-    { title: "Saved table states", description: "Restore common operational filter sets quickly." },
-    { title: "Named views", description: "Expose billing, ops or owner-specific modes in one control." },
-    { title: "Managed delete", description: "Keep delete and apply interactions separated inside the same list row." },
-  ],
-  capabilityNotes: [
-    "Use SavedFilterSelect where operators revisit the same filter combinations repeatedly.",
-    "Keep the active view controlled so tables and filters stay synchronized.",
-    "Nested delete actions are isolated from parent selection to avoid accidental view switching.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/saved-filter-select/showcase.tsx

@@ -1,47 +0,0 @@
-import * as React from "react"
-
-import { Badge, SavedFilterSelect } from "@/index"
-import { routeSavedViews } from "@/showcase/component-route-data"
-
-export function SavedFilterSelectShowcase() {
-  const [value, setValue] = React.useState<string | undefined>("billing")
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-        <div className="flex flex-wrap gap-2">
-          <Badge variant="outline">Saved views</Badge>
-          <Badge variant="outline">Delete action</Badge>
-          <Badge variant="outline">Toolbar-ready</Badge>
-        </div>
-        <p className="mt-3 text-sm font-medium aui-text-strong">SavedFilterSelect is the named-view control</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">
-          Use it when operators need to restore common table states quickly instead of rebuilding every filter combination manually.
-        </p>
-      </div>
-
-      <SavedFilterSelect
-        value={value}
-        onValueChange={setValue}
-        filters={routeSavedViews}
-        onSave={() => undefined}
-        onDelete={() => undefined}
-      />
-
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Active view</p>
-          <p className="mt-2 aui-text-muted">{routeSavedViews.find((item) => item.value === value)?.label ?? "No saved view"}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Delete actions stay isolated from the parent list item selection.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Use case</p>
-          <p className="mt-2 aui-text-muted">Operational tables, finance queues and admin list views.</p>
-        </div>
-      </div>
-    </div>
-  )
-}