tembro 1.0.2 → 2.0.0

package/packages/cli/vendor/src/showcase/families/inputs/data.ts

@@ -1,40 +0,0 @@
-export type WorkspaceOption = {
-  value: string
-  label: string
-  description: string
-  data: {
-    team: string
-    status: "Live" | "Draft" | "Review"
-  }
-}
-
-export const workspaceOptions: WorkspaceOption[] = [
-  { value: "acme-dashboard", label: "Acme Dashboard", description: "Core analytics workspace", data: { team: "Growth", status: "Live" } },
-  { value: "crm-workspace", label: "CRM Workspace", description: "Deals and pipeline control", data: { team: "Sales", status: "Review" } },
-  { value: "store-command", label: "Store Command", description: "Commerce operations shell", data: { team: "Commerce", status: "Live" } },
-  { value: "finance-dock", label: "Finance Dock", description: "Billing and payout center", data: { team: "Finance", status: "Draft" } },
-  { value: "creator-hub", label: "Creator Hub", description: "Content and campaign surface", data: { team: "Marketing", status: "Live" } },
-  { value: "ops-center", label: "Ops Center", description: "Internal service operations", data: { team: "Operations", status: "Review" } },
-]
-
-export const defaultWorkspaceGroups = [
-  {
-    label: "Pinned",
-    options: workspaceOptions.slice(0, 2),
-  },
-  {
-    label: "All workspaces",
-    options: workspaceOptions.slice(2),
-  },
-]
-
-export const environmentOptions = [
-  { value: "production", label: "Production", description: "Public customer-facing traffic", keywords: ["prod", "live"] },
-  { value: "staging", label: "Staging", description: "Pre-release QA and review", keywords: ["preview", "qa"] },
-  { value: "development", label: "Development", description: "Internal local build flow", keywords: ["dev", "sandbox"] },
-]
-
-export const densityOptions = [
-  { value: "comfortable", label: "Comfortable" },
-  { value: "compact", label: "Compact" },
-]

package/packages/cli/vendor/src/showcase/families/inputs/index.ts

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

package/packages/cli/vendor/src/showcase/families/inputs/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const inputsFamilyMock: FamilyDemoMock = {
-  code: `import { AsyncSelect, AsyncMultiSelect } from "tembro"\n\nexport function Example() {\n  return <AsyncSelect loadOptions={loadOptions} />\n}`,
-  highlights: ["AsyncSelect hydration", "AsyncMultiSelect limits", "Create option flow", "Grouped remote results"],
-  scenarios: [
-    { title: "Workspace switching", description: "Load large remote workspace lists without blocking the form shell." },
-    { title: "Linked module setup", description: "Attach multiple modules with max selection and select-all rules." },
-    { title: "Editable resource forms", description: "Hydrate saved values back into async inputs on edit routes." },
-  ],
-  metrics: [
-    { label: "Exports", value: "14" },
-    { label: "Async flows", value: "6+" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/inputs/showcase.tsx

@@ -1,294 +0,0 @@
-import * as React from "react"
-
-import {
-  AsyncMultiSelect,
-  AsyncSelect,
-  Badge,
-  Button,
-  SimpleSelect,
-  Textarea,
-} from "@/index"
-
-import type { FamilyDemoProps } from "../types"
-
-import {
-  defaultWorkspaceGroups,
-  densityOptions,
-  environmentOptions,
-  workspaceOptions,
-  type WorkspaceOption,
-} from "./data"
-
-export function InputsFamilyShowcase({ state, setState }: FamilyDemoProps) {
-  const [mode, setMode] = React.useState<"default" | "error" | "strict">("default")
-  const [singleValue, setSingleValue] = React.useState<string | undefined>("acme-dashboard")
-  const [singleOption, setSingleOption] = React.useState<WorkspaceOption | null>(workspaceOptions[0])
-  const [multiValue, setMultiValue] = React.useState<string[]>(["crm-workspace", "store-command"])
-  const [multiOptions, setMultiOptions] = React.useState<WorkspaceOption[]>([workspaceOptions[1], workspaceOptions[2]])
-  const [environment, setEnvironment] = React.useState<string | undefined>("production")
-
-  const loadOptions = React.useCallback(
-    async (search: string) => {
-      await new Promise((resolve) => window.setTimeout(resolve, 320))
-
-      if (mode === "error") {
-        throw new Error("Failed to load")
-      }
-
-      const query = search.trim().toLowerCase()
-      const filtered = workspaceOptions.filter((item) =>
-        [item.label, item.description, item.data.team, item.data.status].join(" ").toLowerCase().includes(query)
-      )
-
-      if (!query) return defaultWorkspaceGroups
-      return [{ label: "Search results", options: filtered }]
-    },
-    [mode]
-  )
-
-  const loadSelectedOption = React.useCallback(async (value: string) => {
-    await new Promise((resolve) => window.setTimeout(resolve, 120))
-    return workspaceOptions.find((item) => item.value === value) ?? null
-  }, [])
-
-  const loadSelectedOptions = React.useCallback(async (values: string[]) => {
-    await new Promise((resolve) => window.setTimeout(resolve, 120))
-    return workspaceOptions.filter((item) => values.includes(item.value))
-  }, [])
-
-  const activeSingle = singleOption ?? workspaceOptions.find((item) => item.value === singleValue) ?? null
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-          <div className="space-y-3">
-            <div className="flex flex-wrap gap-2">
-              <Badge variant="outline">AsyncSelect</Badge>
-              <Badge variant="outline">AsyncMultiSelect</Badge>
-              <Badge variant="outline">SimpleSelect</Badge>
-              <Badge variant="outline">{mode === "strict" ? "Min search 2" : mode === "error" ? "Error mode" : "Default mode"}</Badge>
-            </div>
-            <div>
-              <p className="aui-text-strong text-sm font-medium">Select family coverage</p>
-              <p className="aui-text-muted mt-1 text-sm leading-6">
-                Static select, async search, hydrated edit mode, create flow, multiselect limits, clear actions and selection summaries all stay visible here.
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button variant={mode === "default" ? "default" : "outline"} size="sm" onClick={() => setMode("default")}>Default</Button>
-            <Button variant={mode === "strict" ? "default" : "outline"} size="sm" onClick={() => setMode("strict")}>Strict</Button>
-            <Button variant={mode === "error" ? "default" : "outline"} size="sm" onClick={() => setMode("error")}>Error</Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setMode("default")
-                setSingleValue("acme-dashboard")
-                setSingleOption(workspaceOptions[0])
-                setMultiValue(["crm-workspace", "store-command"])
-                setMultiOptions([workspaceOptions[1], workspaceOptions[2]])
-                setEnvironment("production")
-              }}
-            >
-              Reset
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-[1.12fr_0.88fr]">
-        <div className="space-y-4">
-          <div className="grid gap-4 xl:grid-cols-2">
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-              <p className="aui-text-strong text-sm font-medium">Simple select</p>
-              <p className="aui-text-muted mt-1 text-sm leading-6">Static option set with search and clear action for lightweight forms.</p>
-              <div className="mt-4">
-                <SimpleSelect
-                  value={environment}
-                  onValueChange={(value) => {
-                    setEnvironment(value)
-                    setState({ notes: `${value ?? "No environment"} selected for deploy routing.` })
-                  }}
-                  options={environmentOptions}
-                  placeholder="Choose environment"
-                  searchable
-                  clearable
-                />
-              </div>
-            </div>
-
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-              <p className="aui-text-strong text-sm font-medium">Single async select</p>
-              <p className="aui-text-muted mt-1 text-sm leading-6">Hydrate selected value, search grouped results and create custom workspace.</p>
-              <div className="mt-4">
-                <AsyncSelect<string, WorkspaceOption["data"], WorkspaceOption>
-                  value={singleValue}
-                  selectedOption={singleOption}
-                  onValueChange={(value, option) => {
-                    setSingleValue(value)
-                    setSingleOption(option ?? null)
-                    setState({ notes: `${option?.label ?? "Selection cleared"} connected to downstream workspace flow.` })
-                  }}
-                  loadOptions={loadOptions}
-                  loadSelectedOption={loadSelectedOption}
-                  defaultOptions={defaultWorkspaceGroups}
-                  minSearchLength={mode === "strict" ? 2 : 0}
-                  cacheOptions
-                  clearable
-                  labels={{
-                    placeholder: "Select workspace",
-                    searchPlaceholder: "Search workspaces...",
-                    loading: "Loading workspaces...",
-                    error: "Could not load workspaces",
-                    empty: "No workspace found",
-                    minSearchLength: (length) => `Type at least ${length} characters`,
-                  }}
-                  renderValue={(option) => (
-                    <span className="inline-flex min-w-0 flex-col text-left">
-                      <span className="truncate">{option.label}</span>
-                      <span className="aui-text-muted truncate text-xs">{option.data.team}</span>
-                    </span>
-                  )}
-                  renderOption={(option, optionState) => (
-                    <span className="flex min-w-0 items-start justify-between gap-3">
-                      <span className="min-w-0">
-                        <span className="block truncate font-medium">{option.label}</span>
-                        <span className="aui-text-muted block truncate text-xs">{option.description}</span>
-                      </span>
-                      <span className={optionState.selected ? "rounded-full aui-surface-strong px-2 py-0.5 text-[11px]" : "rounded-full bg-[color:var(--aui-page-bg-alt)] px-2 py-0.5 text-[11px] aui-text-strong"}>
-                        {option.data.status}
-                      </span>
-                    </span>
-                  )}
-                  onCreateOption={(search) => ({
-                    value: search.trim().toLowerCase().replace(/\s+/g, "-"),
-                    label: search.trim(),
-                    description: "Created from the current route",
-                    data: { team: "Custom", status: "Draft" },
-                  })}
-                  createOptionLabel={(search) => `Create workspace "${search}"`}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-            <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-              <div>
-                <p className="aui-text-strong text-sm font-medium">Async multi select</p>
-                <p className="aui-text-muted mt-1 text-sm leading-6">Select all visible options, cap selection count and keep tag removal independent from trigger open state.</p>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Badge variant="outline">{multiValue.length} linked</Badge>
-                <Badge variant="outline">Max 3</Badge>
-                <Badge variant="outline">Select visible</Badge>
-              </div>
-            </div>
-            <div className="mt-4">
-              <AsyncMultiSelect<string, WorkspaceOption["data"], WorkspaceOption>
-                value={multiValue}
-                selectedOptions={multiOptions}
-                onValueChange={(value, options) => {
-                  setMultiValue(value)
-                  setMultiOptions(options)
-                  setState({ notes: `${options.length} linked modules attached to the workspace form.` })
-                }}
-                loadOptions={loadOptions}
-                loadSelectedOptions={loadSelectedOptions}
-                defaultOptions={defaultWorkspaceGroups}
-                minSearchLength={mode === "strict" ? 2 : 0}
-                maxSelected={3}
-                showSelectAll
-                clearable
-                labels={{
-                  placeholder: "Attach modules",
-                  searchPlaceholder: "Search modules...",
-                  loading: "Loading modules...",
-                  error: "Could not load modules",
-                  empty: "No module found",
-                  clearAll: "Clear all",
-                  selectAll: "Select visible",
-                  selectedCount: (count) => `${count} selected`,
-                  maxSelected: (count) => `Maximum ${count} modules`,
-                  minSearchLength: (length) => `Type at least ${length} characters`,
-                }}
-                renderOption={(option) => (
-                  <span className="flex min-w-0 items-start justify-between gap-3">
-                    <span className="min-w-0">
-                      <span className="block truncate font-medium">{option.label}</span>
-                      <span className="aui-text-muted block truncate text-xs">{option.data.team}</span>
-                    </span>
-                    <span className="aui-text-muted text-[11px]">{option.data.status}</span>
-                  </span>
-                )}
-              />
-            </div>
-          </div>
-
-          <div className="grid gap-4 md:grid-cols-3">
-            {[
-              {
-                title: "Row-safe clear",
-                body: "Clear icons and tag remove actions stay isolated from the parent trigger or row click surface.",
-              },
-              {
-                title: "Hydrated edit mode",
-                body: "Selected values can be restored from remote data without forcing the full option list to preload.",
-              },
-              {
-                title: "Large option sets",
-                body: "Use async search when a plain select would overload the route or the user needs remote filtering.",
-              },
-            ].map((item) => (
-              <div key={item.title} className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-                <p className="aui-text-strong text-sm font-medium">{item.title}</p>
-                <p className="aui-text-subtle mt-2 text-sm leading-6">{item.body}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="space-y-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-          <Textarea value={state.notes} onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setState({ notes: event.target.value })} className="min-h-24" />
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-1">
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <p className="aui-text-muted text-sm">Mode</p>
-              <p className="aui-text-strong mt-2 text-lg font-semibold">{mode}</p>
-              <p className="aui-text-strong mt-2 text-sm">
-                {mode === "error" ? "Forces renderError state." : mode === "strict" ? "Requires min search before loading." : "Immediate async search with grouped defaults."}
-              </p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <p className="aui-text-muted text-sm">Selected workspace</p>
-              <p className="aui-text-strong mt-2 text-lg font-semibold">{activeSingle?.label ?? "Nothing selected"}</p>
-              <p className="aui-text-subtle mt-2 text-sm">{activeSingle?.description ?? "Choose a workspace to hydrate its shell."}</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <p className="aui-text-muted text-sm">Linked modules</p>
-              <p className="aui-text-strong mt-2 text-lg font-semibold">{multiValue.length} attached</p>
-              <p className="aui-text-subtle mt-2 text-sm">Tags, clear all and select visible stay synchronized with controlled value state.</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <p className="aui-text-muted text-sm">Environment</p>
-              <p className="aui-text-strong mt-2 text-lg font-semibold">{environmentOptions.find((item) => item.value === environment)?.label ?? "Not selected"}</p>
-              <p className="aui-text-subtle mt-2 text-sm">SimpleSelect covers the static branch of the same select family.</p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {["grouped", "hydration", "create-option", "multi-select", "clearable", "searchable"].map((tag) => (
-              <Badge key={tag} variant="outline">{tag}</Badge>
-            ))}
-          </div>
-          <SimpleSelect
-            value={state.density}
-            onValueChange={(value) => setState({ density: (value as FamilyDemoProps["state"]["density"] | undefined) ?? "comfortable" })}
-            options={densityOptions}
-            placeholder="Preview density"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/families/layout/index.ts

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

package/packages/cli/vendor/src/showcase/families/layout/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const layoutFamilyMock: FamilyDemoMock = {
-  code: `import { AppShell, AppHeader, AppSidebar, PageHeader, StatCard } from "tembro"\n\nexport function Example() {\n  return <AppShell />\n}`,
-  highlights: ["App shell composition", "Sidebar navigation", "Page headers", "Dashboard stat surfaces"],
-  scenarios: [
-    { title: "Admin workspace", description: "Combine shell, sidebar and stat cards into a dense admin product." },
-    { title: "Analytics overview", description: "Use cards and page headers to structure KPI-heavy screens." },
-    { title: "Nested navigation", description: "Keep route context visible with breadcrumbs and section headers." },
-  ],
-  metrics: [
-    { label: "Exports", value: "8" },
-    { label: "Layouts", value: "3" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/layout/showcase.tsx

@@ -1,57 +0,0 @@
-import type { ChangeEvent } from "react"
-
-import { Badge, Button, Input } from "@/index"
-
-import type { FamilyDemoProps } from "../types"
-
-export function LayoutFamilyShowcase({ state, setState }: FamilyDemoProps) {
-  return (
-    <div className="grid gap-4 xl:grid-cols-[0.24fr_1fr]">
-      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4">
-        {["Overview", "Analytics", "Customers", "Orders", "Settings"].map((item, index) => (
-          <div key={item} className={`mb-2 rounded-xl px-3 py-2.5 text-sm ${index === 0 ? "aui-surface-strong" : "bg-[color:var(--aui-surface)] aui-text-muted"}`}>
-            {item}
-          </div>
-        ))}
-      </div>
-      <div className="space-y-4">
-        <div className="flex flex-col gap-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <p className="text-2xl font-semibold tracking-tight">Revenue overview</p>
-            <p className="aui-text-muted text-sm">Structured layout with reusable surface hierarchy.</p>
-          </div>
-          <div className="flex gap-3">
-            <Input value={state.search} onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ search: event.target.value })} placeholder="Search workspace..." className="w-48" />
-            <Button>New report</Button>
-          </div>
-        </div>
-        <div className="grid gap-4 md:grid-cols-3">
-          {[
-            ["Revenue", "$24,780"],
-            ["Active users", "18,390"],
-            ["Conversion", "6.3%"],
-          ].map(([label, value]) => (
-            <div key={label} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-              <p className="aui-text-muted text-sm">{label}</p>
-              <p className="mt-2 text-3xl font-semibold tracking-tight">{value}</p>
-              <Badge className="mt-3 rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50">Live</Badge>
-            </div>
-          ))}
-        </div>
-        <div className="grid gap-4 md:grid-cols-[1fr_0.38fr]">
-          <div className="h-48 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[linear-gradient(180deg,rgba(59,130,246,0.12),transparent),radial-gradient(circle_at_bottom_left,rgba(34,197,94,0.18),transparent_40%)]" />
-          <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-            <p className="font-medium">Recent updates</p>
-            <div className="aui-text-muted mt-4 space-y-3 text-sm">
-              <div>Dashboard tokens synced</div>
-              <div>Sidebar nav refreshed</div>
-              <div>Header metrics updated</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-

package/packages/cli/vendor/src/showcase/families/navigation/index.ts

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

package/packages/cli/vendor/src/showcase/families/navigation/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const navigationFamilyMock: FamilyDemoMock = {
-  code: `import { Pagination, PageTabs, StepperTabs } from "tembro"\n\nexport function Example() {\n  return <Pagination />\n}`,
-  highlights: ["Pagination controls", "Page tabs", "Stepper tabs", "Route-aware segmentation"],
-  scenarios: [
-    { title: "Paged reports", description: "Move through dense result sets with explicit page state." },
-    { title: "Section tabs", description: "Segment detail pages into clear content groups." },
-    { title: "Stepper flow", description: "Represent ordered multi-stage progress in navigation." },
-  ],
-  metrics: [
-    { label: "Exports", value: "3" },
-    { label: "Navigation modes", value: "3" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/navigation/showcase.tsx

@@ -1,31 +0,0 @@
-import { Button } from "@/index"
-
-import type { FamilyDemoProps } from "../types"
-
-export function NavigationFamilyShowcase({ state, setState }: FamilyDemoProps) {
-  const pages = [1, 2, 3, 8]
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-3">
-        {["Overview", "Analytics", "Reports"].map((item, index) => (
-          <button key={item} className={`rounded-2xl border px-5 py-3 text-sm ${index === 0 ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "aui-text-muted border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`}>
-            {item}
-          </button>
-        ))}
-      </div>
-      <div className="flex items-center justify-between rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-4 py-3">
-        <Button variant="outline" size="sm" onClick={() => setState({ step: Math.max(1, state.step - 1) })}>Prev</Button>
-        <div className="flex gap-2">
-          {pages.map((page) => (
-            <button key={page} onClick={() => setState({ step: page === 8 ? 4 : page })} className={`rounded-xl border px-4 py-2 text-sm ${state.step === (page === 8 ? 4 : page) ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "aui-text-muted border-[color:var(--aui-surface-border)]"}`}>
-              {page}
-            </button>
-          ))}
-        </div>
-        <Button size="sm" onClick={() => setState({ step: Math.min(4, state.step + 1) })}>Next</Button>
-      </div>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/families/notifications/index.ts

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

package/packages/cli/vendor/src/showcase/families/notifications/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const notificationsFamilyMock: FamilyDemoMock = {
-  code: `import { Toast } from "tembro"\n\nexport function Example() {\n  return <Toast />\n}`,
-  highlights: ["Toast messages", "Transient feedback", "Success and warning states", "Async completion"],
-  scenarios: [
-    { title: "Success feedback", description: "Acknowledge completed actions without interrupting the user." },
-    { title: "Warning states", description: "Surface short-lived problems or validation reminders." },
-    { title: "Background jobs", description: "Notify users when async tasks finish." },
-  ],
-  metrics: [
-    { label: "Exports", value: "1" },
-    { label: "Modes", value: "Success + warning" },
-    { label: "Status", value: "Preview" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/notifications/showcase.tsx

@@ -1,24 +0,0 @@
-import { Badge, Button } from "@/index"
-
-export function NotificationsFamilyShowcase() {
-  return (
-    <div className="grid gap-4 md:grid-cols-2">
-      <div className="aui-status-success rounded-[22px] p-4">
-        <div className="flex items-center justify-between">
-          <p className="font-medium">Changes saved</p>
-          <Badge variant="secondary">Success</Badge>
-        </div>
-        <p className="mt-2 text-sm">Your workspace updates have been published successfully.</p>
-      </div>
-      <div className="aui-status-warning rounded-[22px] p-4">
-        <div className="flex items-center justify-between">
-          <p className="font-medium">Review needed</p>
-          <Badge variant="outline">Warning</Badge>
-        </div>
-        <p className="mt-2 text-sm">Two components still need accessibility review before release.</p>
-        <Button variant="outline" className="mt-4">Open review queue</Button>
-      </div>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/families/overlay/index.ts

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

package/packages/cli/vendor/src/showcase/families/overlay/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const overlayFamilyMock: FamilyDemoMock = {
-  code: `import { ConfirmDialog, ModalShell, SheetShell } from "tembro"\n\nexport function Example() {\n  return <ConfirmDialog />\n}`,
-  highlights: ["Confirm dialogs", "Sheet surfaces", "Modal actions", "Focused flows"],
-  scenarios: [
-    { title: "Deletion confirm", description: "Protect destructive actions with explicit confirmation." },
-    { title: "Edit sheet", description: "Slide contextual editing surfaces without leaving the page." },
-    { title: "Compact modal", description: "Collect short forms in a focused overlay." },
-  ],
-  metrics: [
-    { label: "Exports", value: "4" },
-    { label: "Surfaces", value: "Dialog + sheet" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/overlay/showcase.tsx

@@ -1,23 +0,0 @@
-import { Badge, Button } from "@/index"
-
-export function OverlayFamilyShowcase() {
-  return (
-    <div className="grid gap-4 md:grid-cols-3">
-      {[
-        ["Confirm dialog", "Irreversible actions with strong intent and footer controls."],
-        ["Edit sheet", "Context-aware panel for quick updates and side tasks."],
-        ["Modal shell", "Focused overlay for short forms and approvals."],
-      ].map(([title, text], index) => (
-        <div key={title} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
-          <div className="flex items-center justify-between">
-            <p className="aui-text-strong text-lg font-semibold">{title}</p>
-            <Badge variant={index === 0 ? "destructive" : "outline"}>{index === 0 ? "Confirm" : "Overlay"}</Badge>
-          </div>
-          <p className="aui-text-muted mt-3 text-sm leading-6">{text}</p>
-          <Button className="mt-4 w-full">{index === 0 ? "Open confirm" : index === 1 ? "Open sheet" : "Open modal"}</Button>
-        </div>
-      ))}
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/families/patterns/index.ts

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

package/packages/cli/vendor/src/showcase/families/patterns/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const patternsFamilyMock: FamilyDemoMock = {
-  code: `import { ResourcePage, ResourceDetailPage, FormBuilder } from "tembro"\n\nexport function Example() {\n  return <ResourcePage />\n}`,
-  highlights: ["Resource pages", "Detail layouts", "Form builder presets", "Composed product patterns"],
-  scenarios: [
-    { title: "CMS resource page", description: "List, filter and inspect resources in a pattern-driven layout." },
-    { title: "Detail view", description: "Break detail screens into overview, activity and settings content." },
-    { title: "Form builder", description: "Generate field structures from reusable form presets." },
-  ],
-  metrics: [
-    { label: "Exports", value: "4" },
-    { label: "Pattern types", value: "Page + builder" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/patterns/showcase.tsx

@@ -1,23 +0,0 @@
-import { Badge, Button } from "@/index"
-
-export function PatternsFamilyShowcase() {
-  return (
-    <div className="grid gap-4 md:grid-cols-3">
-      {[
-        ["Resource page", "List-heavy surface with filters, cards and actions."],
-        ["Detail page", "Focused record view with modular content blocks."],
-        ["Form builder", "Preset-driven field composer for internal tools."],
-      ].map(([title, text], index) => (
-        <div key={title} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
-          <div className="flex items-center justify-between">
-            <p className="aui-text-strong text-lg font-semibold">{title}</p>
-            <Badge variant={index === 2 ? "secondary" : "outline"}>{index === 2 ? "Preset" : "Pattern"}</Badge>
-          </div>
-          <p className="aui-text-muted mt-3 text-sm leading-6">{text}</p>
-          <Button className="mt-4 w-full">{index === 0 ? "Open resources" : index === 1 ? "Open detail" : "Open builder"}</Button>
-        </div>
-      ))}
-    </div>
-  )
-}
-