tembro 3.0.0 → 3.1.5

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

@@ -1,49 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const quantityInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [quantity, setQuantity] = useState<number | null>(3)
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="quantity"
-        value={quantity}
-        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}
-        min={0}
-        max={10}
-        step={1}
-        showControls
-      />
-      <p className="text-sm aui-text-subtle">
-        Items: <strong>{quantity ?? "unset"}</strong>
-      </p>
-      <p className="text-sm aui-text-muted">
-        Controls should stay aligned with adjacent action columns in compact table rows.
-      </p>
-      <p className="text-sm aui-text-muted">
-        Try increment/decrement at bounds to validate guardrails.
-      </p>
-    </div>
-  )
-}`,
-  htmlCode: `<label for="qty">Quantity</label><input id="qty" type="text" inputmode="numeric" />`,
-  cliCommand: "npx tembro add input",
-  highlights: ["Stepper controls", "min/max boundaries", "controlled usage", "compact row compatibility"],
-  relatedBlockSlugs: ["crm-dashboard", "users-table", "settings-form"],
-  scenarios: [
-    { title: "Line item quantity", description: "Use in carts and order forms with strict bounds." },
-    { title: "Inventory controls", description: "Keep increments aligned with backend-stock constraints." },
-    { title: "Form tables", description: "Compact control rendering works well in inline editable rows." },
-    { title: "Bounded values", description: "Reject edits below zero and above maximum." },
-  ],
-  capabilityNotes: [
-    "Show inline controls for quick adjustments when quantity edits are frequent.",
-    "Set `min`/`max` to protect impossible states in business rules.",
-    "Use controlled flow to persist updates across rows and validation passes.",
-    "Disable controls when quantity is not editable to avoid inconsistent states.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/quantity-input/showcase.tsx

@@ -1,21 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-export function QuantityInputShowcase() {
-  const [value, setValue] = useState<number | null>(2)
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="quantity"
-        value={value}
-        onValueChange={setValue}
-        min={0}
-        max={12}
-        showControls
-      />
-      <p className="aui-text-subtle text-sm">Quantity: {value ?? "unset"}</p>
-    </div>
-  )
-}

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

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

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

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const resultMock: ComponentDemoMock = {
-  code: `import { Result } from "tembro"
-
-export function Example() {
-  return (
-    <Result
-      status="success"
-      title="Project created"
-      description="Your new workspace is ready and all checks passed."
-      compact
-    />
-  )
-}`,
-  highlights: ["Semantic statuses", "Inline action block", "Compact and full variants", "Reusable result states for non-page flows"],
-  scenarios: [
-    { title: "Create success", description: "Use after successful create/update actions." },
-    { title: "Error outcome", description: "Show clear recovery action and short guidance." },
-    { title: "Not found state", description: "Use for invalid entity pages and missing route scenarios." },
-  ],
-  capabilityNotes: [
-    "Align status text with backend outcomes.",
-    "Pair each state with primary and optional secondary actions.",
-    "Keep `description` short and specific to user intent.",
-  ],
-}
-

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

@@ -1,67 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Result } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const resultStatuses = ["success", "error", "warning", "info", "not-found", "forbidden", "server-error"] as const
-const descriptions = {
-  success: "The requested action completed.",
-  error: "The action failed. Review the message and try again.",
-  warning: "The request completed with warnings. Verify details before proceed.",
-  info: "An additional state is available for neutral communication.",
-  "not-found": "The requested resource could not be found.",
-  forbidden: "You do not have permission to perform this action.",
-  "server-error": "The server returned an unexpected response.",
-}
-
-type ResultStatus = (typeof resultStatuses)[number]
-
-export function ResultShowcase({ mode }: ComponentDemoProps) {
-  const [status, setStatus] = React.useState<ResultStatus>("success")
-  const [compact, setCompact] = React.useState(mode === "playground")
-
-  const title = status === "success" ? "Operation complete" : "Attention required"
-
-  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">Outcome state</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Result should explain what happened next</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use result for decisive page outcomes: success, failure, missing access, or blocked states. It should never read like a decorative alert.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Success</Badge>
-            <Badge variant="outline" className="rounded-full">Failure</Badge>
-            <Badge variant="outline" className="rounded-full">Blocked access</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          <button className="rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted" onClick={() => setCompact((value) => !value)}>
-            {compact ? "Use roomy mode" : "Use compact mode"}
-          </button>
-          {resultStatuses.map((entry) => (
-            <button key={entry} className={`rounded-full px-4 py-2 text-sm ${status === entry ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`} onClick={() => setStatus(entry)}>
-              {entry}
-            </button>
-          ))}
-        </div>
-      ) : null}
-
-      <Result
-        status={status}
-        title={title}
-        compact={compact}
-        description={descriptions[status]}
-        actions={<Button size="sm" variant={status === "success" ? "outline" : "default"}>{status === "success" ? "Continue" : "Try again"}</Button>}
-      />
-    </div>
-  )
-}

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

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

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

@@ -1,33 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const searchInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Input, Kbd } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Input
-      kind="search"
-      value={value}
-      onValueChange={setValue}
-      placeholder="Search customers, invoices, or routes..."
-      resultCount={18}
-      shortcut={<Kbd>Ctrl+K</Kbd>}
-      debounceMs={250}
-    />
-  )
-}`,
-  highlights: ["Search icon, result count, and shortcut support", "Debounced value callback", "Clear action inheritance", "Good fit for toolbars and command launchers"],
-  scenarios: [
-    { title: "Data table search", description: "Filter customers, invoices, or events without leaving the current view." },
-    { title: "Global search bar", description: "Pair result count and shortcut hint in a compact top-level surface." },
-    { title: "Settings search", description: "Reduce long preferences pages into one searchable control." },
-  ],
-  capabilityNotes: [
-    "Keep search placeholder specific to the entities users can actually find.",
-    "Use debounced callbacks for remote or expensive filtering.",
-    "Only show result count when the number helps the user decide the next step.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/search-input/showcase.tsx

@@ -1,85 +0,0 @@
-import * as React from "react"
-
-import { Badge, Input, Kbd } 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"
-
-const sourceRows = [
-  "Acme Growth workspace",
-  "Invoice 2048 approval",
-  "Northwind billing route",
-  "Customer retention dashboard",
-  "Workspace member access",
-  "Export usage report",
-]
-
-export function SearchInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = React.useState("")
-  const [debouncedValue, setDebouncedValue] = React.useState("")
-
-  const filtered = React.useMemo(() => {
-    const normalized = debouncedValue.trim().toLowerCase()
-    if (!normalized) return sourceRows
-    return sourceRows.filter((row) => row.toLowerCase().includes(normalized))
-  }, [debouncedValue])
-
-  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">Search control</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">SearchInput should shorten finding, not add interface noise</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Debounced</Badge>
-            <Badge variant="outline" className="rounded-full">Shortcut aware</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <Input
-          kind="search"
-          value={value}
-          onValueChange={setValue}
-          onDebouncedValueChange={setDebouncedValue}
-          placeholder="Search customers, invoices, or routes..."
-          resultCount={filtered.length}
-          shortcut={<Kbd>Ctrl+K</Kbd>}
-          debounceMs={250}
-        />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Resolved query</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{debouncedValue || "No active query"}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">The debounced value represents what should usually drive remote or expensive filters.</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Preview results</p>
-          <div className="mt-4 space-y-2 text-sm">
-            {filtered.map((row) => (
-              <div key={row} className="rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted">
-                {row}
-              </div>
-            ))}
-          </div>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Try searching for `invoice`, `workspace`, or `billing`.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/sheet-shell/index.ts

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

package/packages/cli/vendor/src/showcase/premium/sheet-shell/mock.ts

@@ -1,59 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sheetShellMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, SheetShell } from "tembro"
-
-export function Example() {
-  const [openRight, setOpenRight] = useState(false)
-  const [openBottom, setOpenBottom] = useState(false)
-
-  return (
-    <div className="space-y-3">
-      <Button onClick={() => setOpenRight(true)}>Open right sheet</Button>
-      <Button variant="outline" onClick={() => setOpenBottom(true)}>Open bottom sheet</Button>
-      <SheetShell
-        open={openRight}
-        onOpenChange={setOpenRight}
-        side="right"
-        title="Workspace editor"
-        description="Use a sheet for dense action rows without taking full screen."
-        footer={<Button onClick={() => setOpenRight(false)}>Done</Button>}
-      >
-        <p className="text-sm aui-text-muted">Compact editor surface stays close to the source context.</p>
-      </SheetShell>
-      <SheetShell
-        open={openBottom}
-        onOpenChange={setOpenBottom}
-        side="bottom"
-        title="Mobile actions"
-        description="Use mobile-friendly sheet for quick row actions."
-        footer={<Button variant="outline" onClick={() => setOpenBottom(false)}>Close</Button>}
-      >
-        <p className="text-sm aui-text-muted">Bottom sheets fit long lists and quick actions on narrow viewports.</p>
-      </SheetShell>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="sheet-shell-trigger">Open sheet</button>`,
-  cliCommand: "npx tembro add sheet-shell",
-  highlights: [
-    "Side-based drawer behavior",
-    "Right and bottom anchors",
-    "Footer action slot",
-    "Contextual edit pattern",
-  ],
-  relatedBlockSlugs: ["dashboard-starter", "users-table", "settings-form"],
-  scenarios: [
-    { title: "Desktop quick editor", description: "Keep row-level actions next to data without leaving page context." },
-    { title: "Mobile action panel", description: "Use bottom sheets for compact action drawers on small screens." },
-    { title: "Controlled sheet", description: "Parent owns open state and navigation-related side effects." },
-    { title: "Action footer", description: "Include explicit Done/Submit for consistent close behavior." },
-  ],
-  capabilityNotes: [
-    "SheetShell should replace full modals when interaction is contextual and task-scoped.",
-    "Use side controls based on flow density (right for editors, bottom for mobile actions).",
-    "Keep state/validation outside the sheet to prevent focus and mount side effects.",
-    "Avoid loading-heavy forms directly in sheets unless the sheet is intentionally a workflow container.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/sheet-shell/showcase.tsx

@@ -1,87 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, SheetShell } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SheetShellShowcase() {
-  const [side, setSide] = React.useState<"right" | "left" | "top" | "bottom">("right")
-  const [open, setOpen] = React.useState(false)
-
-  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">Sheet shell</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Keep the page visible while editing</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Sheet is for context-preserving edits and side details that should not fully block the screen.</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">Side</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong capitalize">{side}</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">Use for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Quick edits</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">Fallback</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Dialog</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-3">
-          <Button onClick={() => setOpen(true)}>Open sheet</Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              setSide((current) => (current === "right" ? "left" : current === "left" ? "top" : current === "top" ? "bottom" : "right"))
-            }
-          >
-            Cycle side
-          </Button>
-          <Badge variant="outline">Context edit</Badge>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Use a sheet when returning to the same page context matters.",
-            "Keep the body focused on one task or one record.",
-            "If the interaction becomes global or destructive, switch to a stronger surface.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <SheetShell
-        open={open}
-        onOpenChange={setOpen}
-        side={side}
-        title="Quick edit"
-        description="Side sheets are best for quick updates and row actions."
-        footer={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save</Button>
-          </div>
-        }
-      >
-        <div className="space-y-2">
-          <p className="text-sm aui-text-muted">Use this panel for quick edit actions and context-aware updates.</p>
-          <p className="text-xs uppercase tracking-[0.22em] aui-text-muted">Keep the main page visible while editing.</p>
-        </div>
-      </SheetShell>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/index.ts

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

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sidebarNavMock: ComponentDemoMock = {
-  code: `import { SidebarNav } from "tembro"
-
-const items = [
-  { key: "overview", label: "Overview", href: "/overview" },
-  { key: "resources", label: "Resources", href: "/resources", active: true },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-]
-
-export function Example() {
-  return <SidebarNav items={items} />
-}`,
-  highlights: ["Compact and active states", "Disabled route handling", "Render hooks for custom link and item", "Works with controlled active item"],
-  scenarios: [
-    { title: "Left navigation", description: "Use SidebarNav for primary route anchors and command links." },
-    { title: "Custom links", description: "Render each link through Next/React Router integration." },
-    { title: "Collapsed rail", description: "Use compact mode on narrow sidebars and drawers." },
-  ],
-  capabilityNotes: [
-    "Keep `items` as source of truth for route and badge metadata.",
-    "Preserve keys and active state consistency across re-renders.",
-    "For keyboard users, keep labels human-readable and non-empty.",
-    "Disabled items should still show intent but block interaction clearly.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/showcase.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-
-import { Badge, SidebarNav } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const baseItems = [
-  { key: "overview", label: "Overview", href: "/overview" },
-  { key: "products", label: "Products", href: "/products" },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-  { key: "billing", label: "Billing", href: "/billing" },
-]
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SidebarNavShowcase({ mode }: ComponentDemoProps) {
-  const [activeKey, setActiveKey] = React.useState(baseItems[0]?.key ?? "overview")
-  const [collapsed, setCollapsed] = React.useState(mode === "playground")
-
-  const items = React.useMemo(
-    () =>
-      baseItems.map((item) => ({
-        ...item,
-        active: item.key === activeKey,
-        onSelect: () => setActiveKey(item.key),
-      })),
-    [activeKey],
-  )
-
-  const selectedLabel = baseItems.find((item) => item.key === activeKey)?.label ?? "Overview"
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-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">Route navigation</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Sidebar nav should orient the page fast</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Show active route, disabled destination, and collapsed behavior in one calm preview instead of a standalone toy sidebar.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Active route</Badge>
-            <Badge variant="outline" className="rounded-full">Disabled item</Badge>
-            <Badge variant="outline" className="rounded-full">Collapsed</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className={`${panelClass} grid gap-4 xl:grid-cols-[0.92fr_1.08fr]`}>
-        <section>
-          <p className="text-sm font-medium aui-text-muted">Workspace navigation</p>
-          <div className="mt-3 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-3">
-            <SidebarNav items={items} collapsed={collapsed} />
-          </div>
-        </section>
-
-        <section>
-          <p className="text-sm font-medium aui-text-muted">Current context</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{selectedLabel}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">
-            Collapsed mode is useful only when the shell still leaves enough context elsewhere. Do not collapse navigation if labels are the only orientation cue on the page.
-          </p>
-          {mode === "playground" ? (
-            <button
-              type="button"
-              onClick={() => setCollapsed((value) => !value)}
-              className="mt-4 rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted transition hover:text-[color:var(--aui-fg)]"
-            >
-              {collapsed ? "Expand nav" : "Collapse nav"}
-            </button>
-          ) : null}
-        </section>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,49 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const simpleSelectMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, Select } from "tembro"
-
-const selectOptions = [
-  { value: "public", label: "Public", disabled: false },
-  { value: "private", label: "Private", disabled: false },
-  { value: "internal", label: "Internal", disabled: false },
-  { value: "archived", label: "Archived", disabled: true },
-]
-
-export function Example() {
-  const [value, setValue] = useState("private")
-
-  return (
-    <div className="space-y-3">
-      <Select
-        options={selectOptions}
-        value={value}
-        onValueChange={(nextValue) => setValue(nextValue ?? "private")}
-        placeholder="Visibility"
-        size="sm"
-      />
-      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
-        Current visibility: <strong>{value}</strong>
-      </div>
-      <Button variant="outline" onClick={() => setValue("public")}>Reset public</Button>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="simple-select-trigger">Open options</button>`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Controlled usage", "Static options", "Clear default value", "Disabled option handling"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Controlled visibility", description: "Use controlled `value` when parent flow tracks visibility state." },
-    { title: "Static catalog", description: "Use fixed options for status and tier fields." },
-    { title: "Clear/reset flow", description: "Expose a reset path before destructive transitions." },
-    { title: "Compact trigger", description: "Use small size in dense row or toolbar layouts." },
-  ],
-  capabilityNotes: [
-    "SimpleSelect is best for local option lists that don't require async loading.",
-    "Avoid rebuilding options each render; memoize if options are computed.",
-    "Use disabled options to communicate temporarily unavailable targets.",
-    "Always keep selected value in a controlled parent when used in complex forms.",
-  ],
-}