tembro 2.0.3 → 2.0.5

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" },

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

@@ -17,7 +17,9 @@ const loadOptions = async (query: string): Promise<typeof workspaceOptions> => {
 
 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">
@@ -49,9 +51,39 @@ export function AsyncSelectShowcase() {
                 defaultOptions={workspaceOptions}
                 minSearchLength={1}
                 clearable
+                showSelectedDescription
                 debounceMs={220}
+                labels={{
+                  placeholder: "Choose service region",
+                  searchPlaceholder: "Search regions...",
+                }}
               />
             </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}
+                  defaultOptions={workspaceOptions}
+                  minSearchLength={1}
+                  clearable
+                  showSelectAll
+                  maxSelected={3}
+                  maxVisibleTags={2}
+                  showSelectedDescription
+                  debounceMs={220}
+                  labels={{
+                    multiPlaceholder: "Choose team coverage",
+                    searchPlaceholder: "Search team regions...",
+                    selectedCount: (count) => `${count} regions selected`,
+                    hiddenSelected: (count) => `+${count} more`,
+                  }}
+                />
+              </div>
+            </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>
@@ -83,6 +115,10 @@ export function AsyncSelectShowcase() {
                 <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>

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

@@ -55,11 +55,12 @@ function StateButton({
   }
 
   return (
-    <Button
-      variant={variant}
-      disabled={state === "Disabled"}
-      className={state === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : undefined}
-    >
+        <Button
+          variant={variant}
+          pressed={state === "Focus"}
+          disabled={state === "Disabled"}
+          className={state === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : undefined}
+        >
       {state}
     </Button>
   )
@@ -127,6 +128,7 @@ export function ButtonShowcase() {
               <Button variant="outline">Preview</Button>
               <Button
                 variant={selectedVariant}
+                fullWidth
                 loading={approvalState === "saving"}
                 loadingLabel="Approving"
                 onClick={approveInvoice}
@@ -136,6 +138,25 @@ export function ButtonShowcase() {
             </div>
           </div>
         </div>
+
+        <div className="mt-6 grid gap-3 md:grid-cols-4">
+          <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">Primary</p>
+            <p className="mt-2 leading-6 aui-text-muted">Main action with filled emphasis.</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">Secondary</p>
+            <p className="mt-2 leading-6 aui-text-muted">Alternative action without stealing focus.</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">Outline</p>
+            <p className="mt-2 leading-6 aui-text-muted">Low-emphasis action for previews and neutral workflows.</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">Destructive</p>
+            <p className="mt-2 leading-6 aui-text-muted">Reserved for archive, delete, or dangerous transitions.</p>
+          </div>
+        </div>
       </section>
 
       <section className={panelClass}>

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

@@ -9,6 +9,7 @@ const panelClass =
 
 export function ButtonGroupShowcase({ mode }: ComponentDemoProps) {
   const [view, setView] = React.useState<"list" | "board" | "timeline">("list")
+  const [density, setDensity] = React.useState<"compact" | "comfortable">("comfortable")
 
   return (
     <div className="space-y-5">
@@ -31,16 +32,32 @@ export function ButtonGroupShowcase({ mode }: ComponentDemoProps) {
       <div className="grid gap-4 xl:grid-cols-2">
         <section className={panelClass}>
           <ButtonGroup
+            value={view}
+            onValueChange={(next) => setView(next as typeof view)}
             items={[
-              { key: "list", label: "List", variant: view === "list" ? "default" : "outline", onClick: () => setView("list") },
-              { key: "board", label: "Board", variant: view === "board" ? "default" : "outline", onClick: () => setView("board") },
-              { key: "timeline", label: "Timeline", variant: view === "timeline" ? "default" : "outline", onClick: () => setView("timeline") },
+              { key: "list", label: "List", description: "Rows first" },
+              { key: "board", label: "Board", description: "Kanban view" },
+              { key: "timeline", label: "Timeline", description: "Chronology" },
             ]}
           />
+          <div className="mt-4">
+            <ButtonGroup
+              value={density}
+              onValueChange={(next) => setDensity(next as typeof density)}
+              size="xs"
+              activeVariant="secondary"
+              allowDeselect
+              items={[
+                { key: "comfortable", label: "Comfortable" },
+                { key: "compact", label: "Compact" },
+              ]}
+            />
+          </div>
         </section>
         <section className={panelClass}>
           <p className="text-sm font-medium aui-text-muted">Selected view</p>
           <p className="mt-3 text-base font-medium aui-text-strong">{view}</p>
+          <p className="mt-2 text-sm aui-text-muted">Density: {density || "none"}</p>
         </section>
       </div>
 

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

@@ -48,6 +48,9 @@ export function CalendarShowcase({ mode }: ComponentDemoProps) {
               disabledDates={blockedDates}
               numberOfMonths={monthCount}
               pagedNavigation
+              showClearShortcut
+              showTodayShortcut
+              showSelectionSummary
             />
           </div>
         </section>
@@ -63,6 +66,8 @@ export function CalendarShowcase({ mode }: ComponentDemoProps) {
                 min="2026-07-01"
                 max="2026-07-31"
                 disabledDates={blockedDates}
+                showClearShortcut
+                showSelectionSummary
               />
             </div>
           </section>

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

@@ -3,15 +3,17 @@ import * as React from "react"
 import { Button, Carousel, CarouselItem } from "@/index"
 
 const steps = [
-  { title: "Onboarding", text: "Guide quickly from first login." },
-  { title: "Components", text: "Review ready-made dashboard patterns." },
-  { title: "Release", text: "Publish, test, and iterate faster." },
+  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch" },
+  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library" },
+  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship" },
 ]
 
 export function CarouselShowcase() {
   const [showArrows, setShowArrows] = React.useState(true)
   const [showDots, setShowDots] = React.useState(true)
+  const [autoplay, setAutoplay] = React.useState(false)
   const [index, setIndex] = React.useState(0)
+  const [playing, setPlaying] = React.useState(false)
 
   return (
     <div className="space-y-5">
@@ -22,6 +24,23 @@ export function CarouselShowcase() {
         <Button size="sm" variant={showDots ? "default" : "outline"} onClick={() => setShowDots((value) => !value)}>
           {showDots ? "Hide" : "Show"} dots
         </Button>
+        <Button size="sm" variant={autoplay ? "default" : "outline"} onClick={() => setAutoplay((value) => !value)}>
+          {autoplay ? "Stop" : "Start"} autoplay
+        </Button>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        {steps.map((step, slideIndex) => (
+          <Button
+            key={step.title}
+            type="button"
+            variant={index === slideIndex ? "default" : "outline"}
+            className="justify-start"
+            onClick={() => setIndex(slideIndex)}
+          >
+            {slideIndex + 1}. {step.title}
+          </Button>
+        ))}
       </div>
 
       <Carousel
@@ -29,24 +48,33 @@ export function CarouselShowcase() {
         loop
         showArrows={showArrows}
         showDots={showDots}
+        autoplay={autoplay}
+        autoplayInterval={2200}
+        showPlaybackControl
         onIndexChange={(next) => setIndex(next)}
+        onAutoplayChange={setPlaying}
         previousLabel="Previous slide"
         nextLabel="Next slide"
       >
         {steps.map((step, slideIndex) => (
           <CarouselItem key={step.title}>
-            <div className="rounded-xl border border-border bg-card p-8">
-                <div className="flex items-start justify-between gap-3">
+            <div className="min-h-56 rounded-xl border border-border bg-card p-8">
+              <div className="flex items-start justify-between gap-3">
                 <div className="grid gap-2">
+                  <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-primary">{step.tone}</p>
                   <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">{`Slide ${slideIndex + 1}`}</p>
                   <h3 className="text-lg font-semibold text-foreground">{step.title}</h3>
                   <p className="text-sm text-muted-foreground">{step.text}</p>
                 </div>
+                <div className="rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground">
+                  {slideIndex + 1}/{steps.length}
+                </div>
               </div>
             </div>
           </CarouselItem>
         ))}
       </Carousel>
+      <div className="text-sm text-muted-foreground">Playback: {playing || autoplay ? "active" : "paused"}</div>
     </div>
   )
 }

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

@@ -8,6 +8,8 @@ const panelClass =
   "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
 
 export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
+  const triState = state.checked ? "checked" : state.textValue === "mixed" ? "mixed" : "unchecked"
+
   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">
@@ -27,13 +29,51 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
           </div>
         </div>
 
-        <div className="mt-6 grid gap-3">
+        <div className="mt-6 grid gap-3 md:grid-cols-3">
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox
+              size="lg"
+              allowIndeterminate
+              checked={triState === "mixed" ? "indeterminate" : triState === "checked"}
+              onCheckedStateChange={(checked) => {
+                if (checked === "indeterminate") {
+                  setState({ checked: false, textValue: "mixed" })
+                } else if (checked) {
+                  setState({ checked: true, textValue: "checked" })
+                } else {
+                  setState({ checked: false, textValue: "unchecked" })
+                }
+              }}
+            />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Approval state</p>
+              <p className="mt-1 text-sm aui-text-muted">Use `indeterminate` when not all child tasks are complete.</p>
+            </div>
+          </div>
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox size="lg" checked="indeterminate" />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Indeterminate</p>
+              <p className="mt-1 text-sm aui-text-muted">Useful for parent rows and bulk selection summaries.</p>
+            </div>
+          </div>
+          <div className={`${panelClass} flex items-start gap-3`}>
+            <Checkbox size="lg" checked disabled />
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Disabled selected</p>
+              <p className="mt-1 text-sm aui-text-muted">Shows permission-locked completion without becoming clickable.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-3 grid gap-3">
           {checkboxDemoItems.map((item, index) => (
             <label key={item.label} htmlFor={item.id} className={`${panelClass} flex items-start gap-3`}>
               <Checkbox
                 id={item.id}
                 checked={index === 0 ? state.checked : item.checked}
                 disabled={item.disabled}
+                invalid={index === 0 && triState === "unchecked"}
                 onCheckedChange={index === 0 ? (checked) => setState({ checked: Boolean(checked) }) : undefined}
                 defaultChecked={index > 0 ? item.checked : undefined}
               />
@@ -51,10 +91,10 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
           <div>
             <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
             <h4 className="mt-2 text-lg font-semibold aui-text-strong">
-              Release checklist is {state.checked ? "enabled" : "disabled"}
+              Release checklist is {triState}
             </h4>
             <p className="mt-2 text-sm leading-6 aui-text-muted">
-              Toggle the first row or use these actions to verify controlled checkbox behavior.
+              Toggle the first row or use these actions to verify controlled tri-state checkbox behavior.
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
@@ -64,6 +104,9 @@ export function CheckboxShowcase({ state, setState }: ComponentDemoProps) {
             <Button type="button" size="sm" variant="secondary" onClick={() => setState({ checked: false })}>
               Disable
             </Button>
+            <Button type="button" size="sm" variant="outline" onClick={() => setState({ checked: false, textValue: "mixed" })}>
+              Set mixed
+            </Button>
           </div>
         </div>
       </section>

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

@@ -2,20 +2,22 @@ import type { ComponentDemoMock } from "../types"
 
 export const clearableInputMock: ComponentDemoMock = {
   code: `import * as React from "react"
-import { ClearableInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = React.useState("workspace token")
 
   return (
-    <ClearableInput
+    <Input
       value={value}
       onValueChange={setValue}
       placeholder="Filter or paste value..."
+      clearable
       clearOnEscape
     />
   )
 }`,
+  cliCommand: "npx tembro add input",
   highlights: ["Inline clear action", "Escape-to-clear support", "Focus restore after clearing", "Small but high-frequency utility input"],
   scenarios: [
     { title: "Filter reset", description: "Let users clear a short filter without hunting for an extra reset button." },
@@ -23,7 +25,7 @@ export function Example() {
     { title: "Toolbar utility", description: "Use in dense admin bars where compact cleanup matters." },
   ],
   capabilityNotes: [
-    "Clearable input is strongest for short-lived values like filters and quick entry.",
+    "Prefer `Input clearable` for short-lived values like filters and quick entry.",
     "Escape clear is useful only when the input is frequently changed.",
     "Keep the field visually quiet so the clear action feels secondary.",
   ],

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, ClearableInput } from "@/index"
+import { Badge, Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -29,11 +29,14 @@ export function ClearableInputShowcase({ mode }: ComponentDemoProps) {
       </section>
 
       <section className={panelClass}>
-        <ClearableInput
+        <Input
           value={value}
           onValueChange={setValue}
           placeholder="Filter or paste value..."
+          clearable
           clearOnEscape
+          trailingAction={<span className="text-xs aui-text-muted">Live filter</span>}
+          replaceTrailingWhenClear={false}
         />
       </section>
 

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

@@ -9,6 +9,7 @@ const collapseItems = [
   {
     key: "permissions",
     title: "Permissions",
+    badge: <Badge variant="secondary">Core</Badge>,
     description: "Who can publish, archive, and rename library surfaces.",
     content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.",
   },
@@ -16,12 +17,15 @@ const collapseItems = [
     key: "release",
     title: "Release notes",
     description: "What changed in the current package cycle.",
+    meta: "July",
     content: "This release opened more public docs coverage for interactive form and overlay surfaces.",
   },
   {
     key: "handoff",
     title: "Handoff checklist",
     description: "What must be checked before a public release.",
+    disabled: true,
+    disabledReason: "Unlock after release branch is cut.",
     content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.",
   },
 ] as const