tembro 3.1.17 → 4.0.0

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

@@ -1,158 +0,0 @@
-import * as React from "react"
-import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, LifeBuoyIcon, SettingsIcon, UsersIcon } from "lucide-react"
-
-import { Badge, Button, Sidebar } from "@/index"
-import { cn } from "@/lib/utils"
-
-import type { ComponentDemoProps } from "../types"
-
-const navItems = [
-  { key: "overview", label: "Overview", href: "/overview", icon: <HomeIcon className="size-4" />, sectionLabel: "Core" },
-  {
-    key: "projects",
-    label: "Projects",
-    icon: <FolderIcon className="size-4" />,
-    badge: "8",
-    defaultExpanded: true,
-    items: [
-      { key: "active-projects", label: "Active projects", href: "/components/app-sidebar?view=active" },
-      { key: "archived-projects", label: "Archived", href: "/components/app-sidebar?view=archived", badge: "3" },
-    ],
-  },
-  { key: "reports", label: "Reports", href: "/reports", icon: <BarChart3Icon className="size-4" />, sectionLabel: "Insights" },
-  { key: "billing", label: "Billing", href: "/billing", icon: <CreditCardIcon className="size-4" />, badge: "2" },
-  { key: "settings", label: "Settings", href: "/settings", icon: <SettingsIcon className="size-4" />, disabled: true },
-]
-
-const panelClass = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
-  const [activeKey, setActiveKey] = React.useState("overview")
-  const [collapsed, setCollapsed] = React.useState(mode === "playground")
-  const [previewSurface, setPreviewSurface] = React.useState<"desktop" | "mobile">("desktop")
-  const [showSections, setShowSections] = React.useState(true)
-  const [itemSize, setItemSize] = React.useState<"sm" | "md" | "lg">("md")
-  const [activeIndicator, setActiveIndicator] = React.useState<"bar" | "pill" | "none">("bar")
-  const [accountClicks, setAccountClicks] = React.useState(0)
-
-  const items = React.useMemo(
-    () =>
-      navItems.map((item) => ({
-        ...item,
-        active: item.key === activeKey,
-        onSelect: () => setActiveKey(item.key),
-      })),
-    [activeKey],
-  )
-
-  const activeItem = navItems.find((item) => item.key === activeKey)
-  const mobilePreview = previewSurface === "mobile"
-
-  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">Navigation shell</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Sidebar should feel install-ready on its own</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states, section labels, active indicators and collapsed behavior.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Header slot</Badge>
-            <Badge variant="outline" className="rounded-full">Badges</Badge>
-            <Badge variant="outline" className="rounded-full">Mobile drawer</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-3">
-          <Button size="sm" variant={collapsed ? "outline" : "default"} onClick={() => setCollapsed((value) => !value)}>
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => setActiveKey("reports")}>
-            Jump to reports
-          </Button>
-          <Button size="sm" variant={mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("mobile")}>
-            Mobile drawer
-          </Button>
-          <Button size="sm" variant={!mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("desktop")}>
-            Desktop rail
-          </Button>
-        </div>
-      ) : null}
-
-      <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
-        <section className={cn(panelClass, mobilePreview && "mx-auto w-full max-w-[420px]")}>
-          <Sidebar
-            collapsed={collapsed}
-            items={items}
-            showSectionLabels={showSections}
-            itemSize={itemSize}
-            activeIndicator={activeIndicator}
-            renderLink={({ item: _item, href = "/components/app-sidebar", ...linkProps }) => (
-              <a {...linkProps} href={href} />
-            )}
-            secondaryActions={[
-              { key: "support", label: "Support", icon: <LifeBuoyIcon className="size-4" />, onSelect: () => setActiveKey("reports") },
-            ]}
-            railItems={[{ key: "members", label: "Members", icon: <UsersIcon className="size-4" />, onSelect: () => setActiveKey("projects") }]}
-            footerAccount={{
-              label: "Azamat Workspace",
-              description: accountClicks ? `Account opened ${accountClicks}x` : "Starter plan",
-              avatar: "AW",
-              onSelect: () => setAccountClicks((value) => value + 1),
-            }}
-            responsive
-            mobileBreakpoint={mobilePreview ? 10000 : 0}
-            mobileTitle="Workspace navigation"
-            mobileDescription="Open routes, check badges, and move between sections from one compact drawer."
-            mobileToggleLabel="Open workspace menu"
-            header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-            footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
-            footerClassName="bg-[color:var(--aui-page-bg-alt)]/55"
-            className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
-          />
-        </section>
-
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current route</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{activeItem?.label ?? "Overview"}</p>
-          <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-            Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.
-          </p>
-
-          <div className="mt-6 grid gap-3 sm:grid-cols-3">
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Shell</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{mobilePreview ? "Mobile drawer" : (collapsed ? "Collapsed" : "Expanded")}</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Visible items</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{items.length}</p>
-            </div>
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Disabled</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">1 route</p>
-            </div>
-          </div>
-          {mode === "playground" ? (
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Button size="sm" variant={showSections ? "default" : "outline"} onClick={() => setShowSections((value) => !value)}>
-                {showSections ? "Hide section labels" : "Show section labels"}
-              </Button>
-              <Button size="sm" variant={itemSize === "sm" ? "default" : "outline"} onClick={() => setItemSize("sm")}>Compact</Button>
-              <Button size="sm" variant={itemSize === "md" ? "default" : "outline"} onClick={() => setItemSize("md")}>Default</Button>
-              <Button size="sm" variant={itemSize === "lg" ? "default" : "outline"} onClick={() => setItemSize("lg")}>Comfortable</Button>
-              <Button size="sm" variant={activeIndicator === "bar" ? "default" : "outline"} onClick={() => setActiveIndicator("bar")}>Bar active</Button>
-              <Button size="sm" variant={activeIndicator === "pill" ? "default" : "outline"} onClick={() => setActiveIndicator("pill")}>Pill active</Button>
-              <Button size="sm" variant={activeIndicator === "none" ? "default" : "outline"} onClick={() => setActiveIndicator("none")}>Minimal active</Button>
-            </div>
-          ) : null}
-        </section>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,62 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const asyncMultiSelectMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { AsyncSelect } from "tembro"
-
-const projectOptions = [
-  { value: "analytics", label: "Analytics", description: "Dashboards and reports" },
-  { value: "billing", label: "Billing", description: "Invoices and subscriptions" },
-  { value: "support", label: "Support", description: "Customer tickets" },
-  { value: "security", label: "Security", description: "Permissions and audit" },
-  { value: "search", label: "Search", description: "Discovery and recommendations" },
-  { value: "archive", label: "Archive", description: "Legacy read-only project", disabled: true },
-]
-
-const loadProjectOptions = async (search: string) => {
-  await new Promise((resolve) => setTimeout(resolve, 300))
-  const query = search.trim().toLowerCase()
-  if (!query) return projectOptions
-  return projectOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
-}
-
-export function Example() {
-  const [selected, setSelected] = useState<string[]>(["analytics"])
-
-  return (
-    <div className="space-y-3">
-      <AsyncSelect
-        isMulti
-        value={selected}
-        onValueChange={(values) => setSelected(values)}
-        loadOptions={loadProjectOptions}
-        loadSelectedOptions={async (values) => projectOptions.filter((item) => values.includes(item.value))}
-        maxSelected={3}
-        closeOnSelect={false}
-        showSelectAll
-        clearable
-      />
-      <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">
-        Modules: <strong>{selected.length}</strong> selected
-      </div>
-    </div>
-  )
-}`
-  ,
-  htmlCode: `<button data-slot="async-multiselect-trigger">Choose modules</button>`,
-  cliCommand: "npx tembro add async-select",
-  highlights: ["Multi-value remote tags", "maxSelected guard", "select-all action", "canonical isMulti flow"],
-  relatedBlockSlugs: ["users-table", "crm-dashboard", "settings-form"],
-  scenarios: [
-    { title: "Project scope", description: "Attach multiple modules to one workspace or permission set." },
-    { title: "Max selected", description: "Limit selections to keep downstream payloads predictable." },
-    { title: "Keyboard remove", description: "Support tag cleanup for power users in dense inputs." },
-    { title: "Async updates", description: "Keep tags synced with changing remote data." },
-  ],
-  capabilityNotes: [
-    "Prefer `AsyncSelect isMulti` for sparse multi-select forms where dataset changes over time.",
-    "Show clear limits with `maxSelected` and help text from validation.",
-    "`onValueChange` returns both ids and resolved options when custom payloads are needed.",
-    "Disable close-on-select when users are likely to make batch picks.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/async-multi-select/showcase.tsx

@@ -1,40 +0,0 @@
-import { useState } from "react"
-
-import { AsyncSelect, type AsyncSelectOption } from "@/index"
-
-const moduleOptions: AsyncSelectOption[] = [
-  { value: "inbox", label: "Inbox" },
-  { value: "analytics", label: "Analytics" },
-  { value: "billing", label: "Billing" },
-  { value: "support", label: "Support" },
-]
-
-const loadModules = async (query: string) => {
-  await new Promise((resolve) => setTimeout(resolve, 240))
-  if (!query) return moduleOptions
-  return moduleOptions.filter((item) => String(item.label ?? "").toLowerCase().includes(query.toLowerCase()))
-}
-
-export function AsyncMultiSelectShowcase() {
-  const [selected, setSelected] = useState<string[]>(["analytics"])
-
-  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">
-        <p className="text-sm font-medium aui-text-strong">Use AsyncSelect with isMulti for remote multi-value flows</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">
-          Keep the Select family centered on one remote surface. This route documents the multi-value mode, but new code should stay on AsyncSelect.
-        </p>
-      </div>
-      <AsyncSelect
-        isMulti
-        value={selected}
-        onValueChange={(values) => setSelected(values)}
-        loadOptions={loadModules}
-        maxSelected={3}
-        showSelectAll
-      />
-      <p className="aui-text-muted text-sm">Selected count: {selected.length}</p>
-    </div>
-  )
-}

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

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

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

@@ -1,81 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const asyncSelectMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { AsyncSelect, type AsyncSelectOption } from "tembro"
-
-const seedOptions: AsyncSelectOption[] = [
-  { value: "acme", label: "ACME", description: "Core product line" },
-  { value: "nova", label: "Nova", description: "Enterprise clients" },
-  { value: "spark", label: "Spark", description: "Growth workspace" },
-  { value: "atlas", label: "Atlas", description: "Billing team" },
-  { value: "zen", label: "Zen", description: "Ops and support" },
-  { value: "legacy", label: "Legacy", description: "Deprecated workspace", disabled: true },
-]
-
-const loadWorkspaces = async (search: string) => {
-  await new Promise((resolve) => setTimeout(resolve, 420))
-  const query = search.trim().toLowerCase()
-  if (query === "error") {
-    throw new Error("Unable to fetch options for the current query.")
-  }
-
-  if (query.length < 2) return []
-  return seedOptions.filter((option) => String(option.label ?? "").toLowerCase().includes(query))
-}
-
-export function Example() {
-  const [value, setValue] = useState("")
-  const [label, setLabel] = useState("Select workspace")
-
-  return (
-    <div className="space-y-3">
-      <AsyncSelect
-        value={value}
-        onValueChange={(nextValue, option) => {
-          setValue(nextValue ?? "")
-          setLabel(option?.label ? String(option.label) : "Select workspace")
-        }}
-        loadOptions={loadWorkspaces}
-        loadSelectedOption={async (selectedValue) => {
-          await new Promise((resolve) => setTimeout(resolve, 40))
-          return seedOptions.find((option) => option.value === selectedValue) ?? null
-        }}
-        clearable
-        debounceMs={250}
-        minSearchLength={2}
-        defaultOptions={seedOptions}
-      />
-      <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">
-        Selected: <strong>{value || "none"}</strong> — {label}
-      </div>
-      <p className="text-sm aui-text-muted">
-        Set search to <code>error</code> to preview empty/error handling paths.
-      </p>
-      <p className="text-sm aui-text-muted">Disabled items are rendered non-selectable in the list.</p>
-    </div>
-  )
-}`
-,
-  htmlCode: `<button data-slot="async-select-trigger">Choose workspace</button>`,
-  cliCommand: "npx tembro add async-select",
-  highlights: [
-    "Asynchronous loadOptions and loading state support",
-    "Debounced search requests",
-    "Empty/min-search behavior",
-    "Error state handling in query flow",
-  ],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Remote lookup", description: "Search in remote datasets and keep selected value in state." },
-    { title: "Loading state", description: "Let users understand network delay with pending feedback." },
-    { title: "Error fallback", description: "Surface and recoverable errors when option loading fails." },
-    { title: "Minimum query", description: "Avoid noisy requests with `minSearchLength`." },
-  ],
-  capabilityNotes: [
-    "Prefer `AsyncSelect` for datasets that change often, have many rows, or need server filtering.",
-    "Use `loadSelectedOption` when navigating back to preselected rows from an ID-only payload.",
-    "Keep selected value controlled so parent forms can validate and persist immediately.",
-    "Avoid embedding heavy logic in `loadOptions`; return normalized value objects with stable labels.",
-  ],
-}

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

@@ -1,174 +0,0 @@
-import { useState } from "react"
-
-import { AsyncSelect, Badge, Button, type AsyncSelectOption } from "@/index"
-import { routeWorkspaceOptions } from "@/showcase/component-route-data"
-
-const workspaceOptions: AsyncSelectOption[] = routeWorkspaceOptions
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const loadOptions = async (query: string): Promise<typeof workspaceOptions> => {
-  await new Promise((resolve) => setTimeout(resolve, 260))
-  const normalized = query.trim().toLowerCase()
-  if (normalized === "error") {
-    throw new Error("Unable to load regions")
-  }
-  if (!normalized) return workspaceOptions
-  return workspaceOptions.filter((item) => String(item.label ?? "").toLowerCase().includes(normalized))
-}
-
-const loadSelectedOption = async (selectedValue: string) => {
-  await new Promise((resolve) => setTimeout(resolve, 120))
-  return workspaceOptions.find((item) => item.value === selectedValue) ?? null
-}
-
-const loadSelectedOptions = async (selectedValues: string[]) => {
-  await new Promise((resolve) => setTimeout(resolve, 120))
-  return workspaceOptions.filter((item) => selectedValues.includes(String(item.value)))
-}
-
-const createWorkspaceOption = async (search: string): Promise<AsyncSelectOption> => {
-  await new Promise((resolve) => setTimeout(resolve, 180))
-  const value = search.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")
-  return {
-    value: value || "custom-region",
-    label: search.trim(),
-    description: "Created from the current search query",
-  }
-}
-
-export function AsyncSelectShowcase() {
-  const [value, setValue] = useState("")
-  const [teamValues, setTeamValues] = useState<string[]>(["north", "west"])
-  const activeOption = routeWorkspaceOptions.find((item) => item.value === value)
-  const selectedTeams = routeWorkspaceOptions.filter((item) => teamValues.includes(String(item.value)))
-
-  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">Remote selection</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">AsyncSelect is the remote member of the Select family</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use AsyncSelect only when the main Select flow is not enough because the option set is large, remote, or hydration-aware.
-            </p>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Async</Badge>
-            <Badge variant="outline" className="rounded-full">Search</Badge>
-            <Badge variant="outline" className="rounded-full">Clearable</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]">
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Assign service region</p>
-            <div className="mt-3">
-              <AsyncSelect
-                value={value}
-                onValueChange={(nextValue) => setValue(nextValue ?? "")}
-                loadOptions={loadOptions}
-                loadSelectedOption={loadSelectedOption}
-                defaultOptions={workspaceOptions}
-                minSearchLength={1}
-                clearable
-                showSelectedDescription
-                debounceMs={220}
-                onCreateOption={createWorkspaceOption}
-                createOptionLabel={(search) => `Create region "${search.trim()}"`}
-                labels={{
-                  placeholder: "Choose service region",
-                  searchPlaceholder: "Search regions...",
-                  error: "Could not load regions. Try another query.",
-                }}
-              />
-            </div>
-            <div className="mt-5">
-              <p className="text-sm font-medium aui-text-muted">Multi select uses the same component</p>
-              <div className="mt-3">
-                <AsyncSelect
-                  isMulti
-                  value={teamValues}
-                  onValueChange={(nextValue) => setTeamValues(nextValue)}
-                  loadOptions={loadOptions}
-                  loadSelectedOptions={loadSelectedOptions}
-                  defaultOptions={workspaceOptions}
-                  minSearchLength={1}
-                  clearable
-                  showSelectAll
-                  maxSelected={3}
-                  maxVisibleTags={2}
-                  showSelectedDescription
-                  debounceMs={220}
-                  onCreateOption={createWorkspaceOption}
-                  createOptionLabel={(search) => `Create team "${search.trim()}"`}
-                  labels={{
-                    multiPlaceholder: "Choose team coverage",
-                    searchPlaceholder: "Search team regions...",
-                    error: "Could not load teams. Try another query.",
-                    selectedCount: (count) => `${count} regions selected`,
-                    hiddenSelected: (count) => `+${count} more`,
-                    maxSelected: (count) => `Maximum ${count} regions`,
-                  }}
-                />
-              </div>
-            </div>
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Button size="sm" variant="secondary" onClick={() => setValue("south")}>
-                Hydrate South
-              </Button>
-              <Button size="sm" variant="secondary" onClick={() => setTeamValues(["north", "west", "central"])}>
-                Fill max selected
-              </Button>
-              <Button size="sm" variant="outline" onClick={() => {
-                setValue("")
-                setTeamValues([])
-              }}>
-                Clear all
-              </Button>
-            </div>
-            <div className="mt-4 grid gap-3 md:grid-cols-3">
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
-                <p className="font-medium aui-text-strong">Type to query</p>
-                <p className="mt-2 leading-6 aui-text-muted">Minimum search length keeps remote requests intentional. Type error to test failure state.</p>
-              </div>
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
-                <p className="font-medium aui-text-strong">Clear safely</p>
-                <p className="mt-2 leading-6 aui-text-muted">Clear action is isolated from the trigger surface.</p>
-              </div>
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm">
-                <p className="font-medium aui-text-strong">Create and hydrate</p>
-                <p className="mt-2 leading-6 aui-text-muted">Create missing options and restore selected labels from ID-first edit state.</p>
-              </div>
-            </div>
-          </div>
-
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Selected result</p>
-            <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{activeOption?.label || "No region selected"}</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Start typing to simulate remote filtering. This should feel like a specialized extension of Select, not a completely separate mental model.
-            </p>
-            <div className="mt-4 space-y-3">
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Value</p>
-                <p className="mt-2 text-sm font-medium aui-text-strong">{value || "none"}</p>
-              </div>
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Team</p>
-                <p className="mt-2 text-sm font-medium aui-text-strong">{activeOption ? routeWorkspaceOptions.find((item) => item.value === activeOption.value)?.team : "No team"}</p>
-              </div>
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-                <p className="text-xs uppercase tracking-[0.2em] aui-text-muted">Multi mode</p>
-                <p className="mt-2 text-sm font-medium aui-text-strong">{selectedTeams.length ? selectedTeams.map((item) => item.label).join(", ") : "No teams selected"}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,31 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const avatarMock: ComponentDemoMock = {
-  code: `import { Avatar, AvatarGroup } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-4">
-      <Avatar name="Azamat Jurayev" status="online" />
-      <AvatarGroup
-        items={[
-          { key: "az", name: "Azamat Jurayev", status: "online" },
-          { key: "su", name: "Suhrob Karimov", status: "busy" },
-          { key: "na", name: "Nargiza Saidova", status: "away" },
-        ]}
-      />
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add avatar",
-  highlights: [
-    "Single avatar plus stacked group export",
-    "Fallback initials, shape, size, and status dot support",
-    "Useful in tables, comments, assignee chips, and team headers",
-  ],
-  scenarios: [
-    { title: "Assignee", description: "Show the current owner with initials fallback and live status." },
-    { title: "Team rail", description: "Stack a small team summary without creating a full user card." },
-    { title: "Review feed", description: "Attach person identity to comments or event rows." },
-  ],
-}

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

@@ -1,70 +0,0 @@
-import { Avatar, AvatarGroup, Badge } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const team = [
-  { key: "az", name: "Azamat Jurayev", status: "online" as const },
-  { key: "sa", name: "Saida Karimova", status: "busy" as const },
-  { key: "um", name: "Umid Rakhimov", status: "away" as const },
-  { key: "ni", name: "Nigor Akhmedova", status: "online" as const },
-  { key: "ja", name: "Jasur Tursunov", status: "offline" as const },
-]
-
-export function AvatarShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Avatar handles identity without heavy cards</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use Avatar for lightweight identity surfaces. Promote to UserCard only when profile metadata and actions are truly needed.
-        </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">Assignee row</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              The component should stay readable in compact operational lists, not only inside profile layouts.
-            </p>
-            <div className="mt-5 flex flex-wrap items-center gap-4 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <Avatar name="Azamat Jurayev" size="lg" status="online" />
-              <div className="min-w-0">
-                <p className="text-sm font-semibold aui-text-strong">Azamat Jurayev</p>
-                <p className="mt-1 text-sm aui-text-muted">Release owner for the current component pass</p>
-              </div>
-              <Badge variant="secondary">Online</Badge>
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Size and shape</p>
-            <div className="mt-4 flex flex-wrap items-center gap-3">
-              <Avatar name="TM" size="xs" />
-              <Avatar name="TM" size="sm" shape="rounded" />
-              <Avatar name="TM" size="default" />
-              <Avatar name="TM" size="lg" shape="square" />
-              <Avatar name="TM" size="xl" shape="rounded" />
-            </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">Team summary</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Grouped avatars work best as a compact cue, not a replacement for a full people management panel.
-            </p>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <AvatarGroup items={team} max={4} />
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,10 +0,0 @@
-import type { BadgeDemoItem } from "./types"
-
-export const badgeDemoItems: BadgeDemoItem[] = [
-  { label: "Current", variant: "default", note: "Primary state badge" },
-  { label: "Secondary", variant: "secondary", note: "Supportive metadata" },
-  { label: "Outline", variant: "outline", note: "Light emphasis" },
-  { label: "Alert", variant: "destructive", note: "Critical state" },
-  { label: "Ghost", variant: "ghost", note: "Soft inline state" },
-  { label: "Inline link", variant: "link", note: "Navigational text badge" },
-]

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

@@ -1,4 +0,0 @@
-export { BadgeShowcase } from "./showcase"
-export { badgeMock } from "./mock"
-export { badgeDemoItems } from "./data"
-export type { BadgeDemoItem } from "./types"