tembro 2.0.4 → 2.0.5

package/packages/cli/vendor/src/showcase/fallback.tsx

@@ -15,14 +15,12 @@ import {
   CodeBlock,
   ColorInput,
   CopyButton,
-  CopyField,
-  DataState,
-  Descriptions,
-  Divider,
-  DualListPicker,
-  EmptyState,
-  EntityCard,
-  FilterChips,
+  CopyField,
+  DataState,
+  Descriptions,
+  Divider,
+  DualListPicker,
+  FilterBar,
   Heading,
   Input,
   JsonInput,
@@ -482,31 +480,29 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "filter-chips" || item.slug === "data-table-saved-filters") {
-    return (
-      <div className="grid gap-3">
-        <FilterChips
-          chips={[
-            { key: "status", label: "Status", value: "Active", tone: "success" },
-            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
-            { key: "region", label: "Region", value: "APAC", tone: "info" },
-          ]}
-          onRemove={() => undefined}
-          onClear={() => undefined}
-        />
-        {item.slug === "data-table-saved-filters" ? (
-          <ButtonGroup
-            attached={false}
-            items={[
-              { key: "default", label: "Default", variant: "secondary" },
-              { key: "billing", label: "Billing" },
-              { key: "ops", label: "Operations" },
-            ]}
-          />
-        ) : null}
-      </div>
-    )
-  }
+  if (item.slug === "data-table-saved-filters") {
+    return (
+      <div className="grid gap-3">
+        <FilterBar
+          chips={[
+            { key: "status", label: "Status", value: "Active", tone: "success" },
+            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
+            { key: "region", label: "Region", value: "APAC", tone: "info" },
+          ]}
+          onRemoveChip={() => undefined}
+          onReset={() => undefined}
+        />
+        <ButtonGroup
+          attached={false}
+          items={[
+            { key: "default", label: "Default", variant: "secondary" },
+            { key: "billing", label: "Billing" },
+            { key: "ops", label: "Operations" },
+          ]}
+        />
+      </div>
+    )
+  }
 
   if (item.slug === "anchor-nav") {
     return (
@@ -564,16 +560,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "empty-search-state") {
-    return (
-      <EmptyState
-        title="No matching components"
-        description="Try a shorter keyword or switch to a broader family."
-        action={<Button size="sm">Clear search</Button>}
-      />
-    )
-  }
-
   if (item.slug === "data-list" || item.slug === "list") {
     return (
       <List
@@ -586,18 +572,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "entity-card" || item.slug === "file-card") {
-    return (
-      <EntityCard
-        title={item.slug === "file-card" ? "Design-spec.pdf" : "Azamat Workspace"}
-        description={item.slug === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route."}
-        status={<Badge variant="secondary">Live</Badge>}
-        meta={item.slug === "file-card" ? "2.4 MB" : "Updated 8 min ago"}
-        actions={<Button size="sm" variant="outline">Open</Button>}
-      />
-    )
-  }
-
   if (item.slug === "status-legend") {
     return (
       <StatusLegend
@@ -625,26 +599,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "entity-header") {
-    return (
-      <Card>
-        <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-2">
-            <Badge variant="outline">Customer</Badge>
-            <div>
-              <h3 className="text-xl font-semibold">Acme Holdings</h3>
-              <p className="text-sm text-muted-foreground">Enterprise account with billing and admin ownership.</p>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm">Archive</Button>
-            <Button size="sm">Edit</Button>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
   if (item.slug === "notification-center") {
     return (
       <List
@@ -831,30 +785,57 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.category === "Overlay") {
-    return (
-      <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
-        <p className="mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]">
-          This overlay route needs a dedicated interactive demo. The docs fallback avoids rendering a different component as a substitute.
-        </p>
-      </div>
-    )
-  }
-
-  if (item.category === "Data Display") {
-    return (
-      <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            <p className="text-lg font-semibold">{item.title}</p>
-            <p className="mt-1 text-sm text-muted-foreground">Generic display fallback kept neutral until a dedicated showcase is added.</p>
-          </div>
-          <Badge variant="outline">{mode}</Badge>
-        </div>
-      </div>
-    )
-  }
+  if (item.category === "Overlay") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]">
+              Overlay surfaces should stay compact, focused, and secondary to the route behind them.
+            </p>
+          </div>
+          <Badge variant="outline">Overlay</Badge>
+        </div>
+
+        <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <Button variant="ghost">Cancel</Button>
+            <Button variant="outline">Save draft</Button>
+            <Button>Confirm</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (item.category === "Data Display") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-lg font-semibold">{item.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">Display surfaces should prioritize readable values, compact metadata, and clear scanning order.</p>
+          </div>
+          <Badge variant="outline">{mode}</Badge>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-3">
+          {[
+            { label: "Primary value", value: "84.2k", note: "Strong first read" },
+            { label: "Supporting meta", value: "12 teams", note: "Context stays secondary" },
+            { label: "Status", value: "Live", note: "One concise badge or tone" },
+          ].map((entry) => (
+            <div key={entry.label} className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{entry.label}</p>
+              <p className="mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]">{entry.value}</p>
+              <p className="mt-1 text-sm text-muted-foreground">{entry.note}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">

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

@@ -8,12 +8,14 @@ const docsItems = [
   {
     key: "tokens",
     title: "Theme tokens stay in one place",
+    meta: "P0",
     description: "Radius, color and shadow should not be redefined per route.",
     content: "Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.",
   },
   {
     key: "surface",
     title: "One canonical public surface",
+    badge: <Badge variant="secondary">Core</Badge>,
     description: "Teach one entry point before helper members.",
     content: "Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.",
   },
@@ -21,6 +23,7 @@ const docsItems = [
     key: "demo",
     title: "Real demos beat placeholder previews",
     description: "Each route should prove the actual component behavior.",
+    meta: "Docs",
     content: "A docs page should show the real installed component with interactive state, not a generic substitute card.",
   },
 ] as const
@@ -29,12 +32,14 @@ const releaseItems = [
   {
     key: "docs",
     title: "Docs updated",
+    badge: <Badge variant="secondary">Done</Badge>,
     description: "Public route and CLI snippet verified",
     content: "Component detail page, API notes, and install snippet were reviewed together before release.",
   },
   {
     key: "tokens",
     title: "Visual tokens synced",
+    meta: "Review",
     description: "No stray radius, border, or surface overrides",
     content: "The route uses package tokens directly so the result matches what consumers install.",
   },
@@ -42,6 +47,8 @@ const releaseItems = [
     key: "qa",
     title: "QA preview checked",
     description: "Build and interactive preview passed",
+    disabled: true,
+    disabledReason: "Blocked until release candidate is built.",
     content: "The component was verified with type-check and production build before push.",
   },
 ] as const
@@ -49,6 +56,7 @@ const releaseItems = [
 export function AccordionShowcase() {
   const [singleValue, setSingleValue] = React.useState<string | string[]>("surface")
   const [multiValue, setMultiValue] = React.useState<string | string[]>(["docs"])
+  const [variant, setVariant] = React.useState<"default" | "soft" | "ghost">("soft")
 
   return (
     <div className="space-y-0">
@@ -61,13 +69,25 @@ export function AccordionShowcase() {
       </section>
 
       <section className={panelClass}>
+        <div className="mb-5 flex flex-wrap gap-2">
+          {(["soft", "default", "ghost"] as const).map((item) => (
+            <button
+              key={item}
+              type="button"
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium ${variant === item ? "border-primary bg-primary/10 text-foreground" : "border-[color:var(--aui-divider)] text-muted-foreground"}`}
+              onClick={() => setVariant(item)}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
         <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
           <div>
             <p className="text-lg font-semibold aui-text-strong">Documentation flow</p>
             <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
               Single-open mode keeps the user focused on one explanation at a time.
             </p>
-            <Accordion className="mt-5" type="single" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
+            <Accordion className="mt-5" type="single" variant={variant} size="lg" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
           </div>
 
           <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
@@ -100,7 +120,17 @@ export function AccordionShowcase() {
             </div>
           </div>
 
-          <Accordion className="xl:mt-8" type="multiple" value={multiValue} onValueChange={setMultiValue} items={[...releaseItems]} />
+          <Accordion
+            className="xl:mt-8"
+            type="multiple"
+            variant={variant}
+            value={multiValue}
+            onValueChange={setMultiValue}
+            items={releaseItems.map((item, index) => ({
+              ...item,
+              indicatorPosition: index === 0 ? "start" : "end",
+            }))}
+          />
         </div>
       </section>
     </div>

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

@@ -10,6 +10,7 @@ const panelClass =
 
 export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
   const [lastAction, setLastAction] = React.useState("No action selected")
+  const [pinOpen, setPinOpen] = React.useState(false)
 
   return (
     <div className="space-y-5">
@@ -38,10 +39,11 @@ export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
             </div>
             <ActionMenu
               label="Invoice actions"
+              closeOnSelect={!pinOpen}
               actions={[
-                { key: "open", label: "Open details", icon: <ExternalLinkIcon className="size-4" />, onSelect: async () => setLastAction("Opened invoice details") },
-                { key: "duplicate", label: "Duplicate", icon: <CopyIcon className="size-4" />, onSelect: async () => setLastAction("Duplicated invoice workflow") },
-                { key: "archive", label: "Archive", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
+                { key: "open", section: "Primary", label: "Open details", description: "Jump into the full invoice route", icon: <ExternalLinkIcon className="size-4" />, shortcut: "↵", onSelect: async () => setLastAction("Opened invoice details") },
+                { key: "duplicate", section: "Primary", label: "Duplicate", description: "Create a new workflow from this one", icon: <CopyIcon className="size-4" />, keepOpen: pinOpen, onSelect: async () => setLastAction("Duplicated invoice workflow") },
+                { key: "archive", section: "Danger zone", label: "Archive", description: "Hide it from active operational queues", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
               ]}
             />
           </div>
@@ -49,6 +51,13 @@ export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
         <section className={panelClass}>
           <p className="text-sm font-medium aui-text-muted">Last action</p>
           <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
+          <button
+            type="button"
+            className="mt-4 rounded-full border border-[color:var(--aui-divider)] px-3 py-1.5 text-xs font-medium"
+            onClick={() => setPinOpen((value) => !value)}
+          >
+            {pinOpen ? "Close on select off" : "Close on select on"}
+          </button>
         </section>
       </div>
 

package/packages/cli/vendor/src/showcase/premium/activity-feed/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { ActivityFeed } from "@/index"
+import { ActivityFeed, Badge, Button } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -18,6 +18,7 @@ type ToneFilter = (typeof toneFilters)[number]
 export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
   const [compact, setCompact] = React.useState(mode === "playground")
   const [filter, setFilter] = React.useState<ToneFilter>("all")
+  const [selectedId, setSelectedId] = React.useState<string | null>(null)
 
   const visibleItems = React.useMemo(() => {
     if (filter === "all") {
@@ -55,10 +56,22 @@ export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
       <ActivityFeed
         title="Recent activity"
         description="System and team events are grouped into one lightweight feed."
-        items={visibleItems}
+        items={visibleItems.map((item, index) => ({
+          ...item,
+          unread: index === 0,
+          badge: index === 0 ? <Badge variant="secondary">Unread</Badge> : undefined,
+          interactive: true,
+          onSelect: () => setSelectedId(item.id),
+          actions: (
+            <Button size="xs" variant="ghost" onClick={() => setSelectedId(item.id)}>
+              Review
+            </Button>
+          ),
+        }))}
         compact={compact}
         empty={<span className="aui-text-muted text-sm">No matching activity for selected tone.</span>}
       />
+      <div className="aui-text-muted text-sm">Selected item: {selectedId ?? "none"}</div>
     </div>
   )
 }

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

@@ -12,6 +12,7 @@ const tones = ["info", "success", "warning", "destructive"] as const
 export function AlertShowcase({ mode }: ComponentDemoProps) {
   const [toneIndex, setToneIndex] = React.useState(2)
   const [resolvedCount, setResolvedCount] = React.useState(0)
+  const [visible, setVisible] = React.useState(true)
 
   const tone = tones[toneIndex] ?? "warning"
 
@@ -33,24 +34,35 @@ export function AlertShowcase({ mode }: ComponentDemoProps) {
         </div>
       </section>
 
-      <Alert
-        tone={tone}
-        title={tone === "success" ? "Workspace synced" : tone === "destructive" ? "Action blocked" : tone === "info" ? "Heads up" : "Review needed"}
-        description={
-          tone === "success"
-            ? "Changes were saved and the team can continue safely."
-            : tone === "destructive"
-              ? "The release cannot continue until billing permissions are restored."
-              : tone === "info"
-                ? "Usage data refreshed and one metric changed since your last visit."
-                : "Billing rules changed and one approval is pending before publish."
-        }
-        action={
-          <Button size="sm" variant={tone === "destructive" ? "destructive" : "default"} onClick={() => setResolvedCount((value) => value + 1)}>
-            {tone === "success" ? "Continue" : tone === "destructive" ? "Fix access" : tone === "info" ? "Open details" : "Open review"}
+      {visible ? (
+        <Alert
+          tone={tone}
+          dismissible
+          onDismiss={() => setVisible(false)}
+          title={tone === "success" ? "Workspace synced" : tone === "destructive" ? "Action blocked" : tone === "info" ? "Heads up" : "Review needed"}
+          description={
+            tone === "success"
+              ? "Changes were saved and the team can continue safely."
+              : tone === "destructive"
+                ? "The release cannot continue until billing permissions are restored."
+                : tone === "info"
+                  ? "Usage data refreshed and one metric changed since your last visit."
+                  : "Billing rules changed and one approval is pending before publish."
+          }
+          action={
+            <Button size="sm" variant={tone === "destructive" ? "destructive" : "default"} onClick={() => setResolvedCount((value) => value + 1)}>
+              {tone === "success" ? "Continue" : tone === "destructive" ? "Fix access" : tone === "info" ? "Open details" : "Open review"}
+            </Button>
+          }
+        />
+      ) : (
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Alert dismissed</p>
+          <Button className="mt-4" size="sm" variant="outline" onClick={() => setVisible(true)}>
+            Restore alert
           </Button>
-        }
-      />
+        </section>
+      )}
 
       <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
         <section className={panelClass}>
@@ -83,6 +95,9 @@ export function AlertShowcase({ mode }: ComponentDemoProps) {
             <Button size="sm" variant="outline" onClick={() => setResolvedCount(0)}>
               Reset counter
             </Button>
+            <Button size="sm" variant="outline" onClick={() => setVisible(true)}>
+              Show alert
+            </Button>
           </div>
         </section>
       ) : null}

package/packages/cli/vendor/src/showcase/premium/alert-dialog/showcase.tsx

@@ -11,6 +11,9 @@ export function AlertDialogShowcase({ mode }: ComponentDemoProps) {
   const [open, setOpen] = React.useState(false)
   const [loading, setLoading] = React.useState(false)
   const [lastResult, setLastResult] = React.useState("No action confirmed yet")
+  const [strictMode, setStrictMode] = React.useState(true)
+  const [caseSensitive, setCaseSensitive] = React.useState(true)
+  const [shouldFail, setShouldFail] = React.useState(false)
 
   return (
     <div className="space-y-5">
@@ -36,9 +39,20 @@ export function AlertDialogShowcase({ mode }: ComponentDemoProps) {
             <p className="text-sm font-medium aui-text-muted">Live destructive flow</p>
             <p className="mt-2 text-sm leading-6 aui-text-muted">Open the dialog and confirm a risky workspace action.</p>
           </div>
-          <Button variant="destructive" onClick={() => setOpen(true)}>
-            Delete workspace
-          </Button>
+          <div className="flex flex-wrap gap-2">
+            <Button variant={caseSensitive ? "secondary" : "outline"} onClick={() => setCaseSensitive((value) => !value)}>
+              {caseSensitive ? "Case sensitive" : "Case insensitive"}
+            </Button>
+            <Button variant={strictMode ? "secondary" : "outline"} onClick={() => setStrictMode((value) => !value)}>
+              {strictMode ? "Typed confirm on" : "Typed confirm off"}
+            </Button>
+            <Button variant={shouldFail ? "warning" : "outline"} onClick={() => setShouldFail((value) => !value)}>
+              {shouldFail ? "Failure mode on" : "Failure mode off"}
+            </Button>
+            <Button variant="destructive" onClick={() => setOpen(true)}>
+              Delete workspace
+            </Button>
+          </div>
         </div>
       </section>
 
@@ -62,13 +76,24 @@ export function AlertDialogShowcase({ mode }: ComponentDemoProps) {
         title="Delete workspace?"
         description="This removes active billing rules, API tokens, and member access from the selected workspace."
         actionLabel="Delete workspace"
+        confirmValue={strictMode ? "DELETE" : undefined}
+        confirmCaseSensitive={caseSensitive}
+        confirmLabel="High-risk confirmation"
+        confirmDescription="Type DELETE to confirm you want to remove this workspace and its active access."
+        severityNote="Deleting a workspace clears active access, billing rules, and route-level secrets for the current team."
+        errorMessage="Workspace could not be deleted right now. Check dependent billing or retry."
         onAction={async () => {
           setLoading(true)
           await new Promise((resolve) => window.setTimeout(resolve, 450))
+          if (shouldFail) {
+            setLoading(false)
+            throw new Error("dependent billing")
+          }
           setLoading(false)
           setOpen(false)
           setLastResult("Workspace deletion confirmed")
         }}
+        onActionError={() => setLastResult("Workspace deletion failed")}
       />
 
       {mode === "playground" ? (

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const asyncMultiSelectMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { AsyncMultiSelect } from "@/index"
+import { AsyncSelect } from "tembro"
 
 const projectOptions = [
   { value: "analytics", label: "Analytics", description: "Dashboards and reports" },
@@ -25,7 +25,8 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <AsyncMultiSelect
+      <AsyncSelect
+        isMulti
         value={selected}
         onValueChange={(values) => setSelected(values)}
         loadOptions={loadProjectOptions}
@@ -43,8 +44,8 @@ export function Example() {
 }`
   ,
   htmlCode: `<button data-slot="async-multiselect-trigger">Choose modules</button>`,
-  cliCommand: "npx tembro add async-multi-select",
-  highlights: ["Multiple selected tags", "maxSelected guard", "select-all action", "remove by tag/checkbox"],
+  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." },
@@ -53,7 +54,7 @@ export function Example() {
     { title: "Async updates", description: "Keep tags synced with changing remote data." },
   ],
   capabilityNotes: [
-    "Use `AsyncMultiSelect` for sparse multi-select forms where dataset changes over time.",
+    "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,6 +1,6 @@
 import { useState } from "react"
 
-import { AsyncMultiSelect, type AsyncSelectOption } from "@/index"
+import { AsyncSelect, type AsyncSelectOption } from "@/index"
 
 const moduleOptions: AsyncSelectOption[] = [
   { value: "inbox", label: "Inbox" },
@@ -21,12 +21,13 @@ export function AsyncMultiSelectShowcase() {
   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">AsyncMultiSelect is the multi-value remote member</p>
+        <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">
-          Reach for it only when one Select surface must support remote search, visible tags, and multiple chosen values together.
+          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>
-      <AsyncMultiSelect
+      <AsyncSelect
+        isMulti
         value={selected}
         onValueChange={(values) => setSelected(values)}
         loadOptions={loadModules}

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const asyncSelectMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { AsyncSelect, type AsyncSelectOption } from "@/index"
+import { AsyncSelect, type AsyncSelectOption } from "tembro"
 
 const seedOptions: AsyncSelectOption[] = [
   { value: "acme", label: "ACME", description: "Core product line" },