tembro 3.1.6 → 3.1.7

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

@@ -4,7 +4,7 @@ import { JsonInput } from "@/index"
 
 export function JsonInputShowcase() {
   const [value, setValue] = React.useState(`{
-  "name": "Azamat UI",
+  "name": "Tembro",
   "version": 1
 }`)
 

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

@@ -113,6 +113,27 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
               </div>
             </div>
 
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
+              <p className="text-sm font-medium aui-text-muted">Custom option renderer without duplicate check icons</p>
+              <div className="mt-3">
+                <Select
+                  defaultValue={planOptions[1].value}
+                  options={planOptions}
+                  showSelectedIndicator={false}
+                  renderOption={(option, optionState) => (
+                    <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                      <span className="min-w-0">
+                        <span className="block truncate font-medium">{option.label}</span>
+                        {option.description ? <span className="block truncate text-xs aui-text-muted">{option.description}</span> : null}
+                      </span>
+                      {optionState.selected ? <span className="rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold">Selected</span> : null}
+                    </span>
+                  )}
+                  triggerClassName="w-full"
+                />
+              </div>
+            </div>
+
             <div className="grid gap-3 sm:grid-cols-3">
               {summaryRows.map(([label, value]) => (
                 <div key={label} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
@@ -152,6 +173,23 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
                 Reset
               </Button>
             </div>
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <Select
+                value="invalid"
+                onValueChange={() => undefined}
+                options={[{ value: "invalid", label: "Invalid selection" }]}
+                invalid
+                triggerClassName="w-full"
+              />
+              <Select
+                value="loading"
+                onValueChange={() => undefined}
+                options={[{ value: "loading", label: "Loading options" }]}
+                loading
+                triggerClassName="w-full"
+              />
+            </div>
           </div>
         </div>
       </section>

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

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const tableMock: ComponentDemoMock = {
-  code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "tembro"\n\nexport function Example() {\n  return (\n    <Table>\n      <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n      <TableBody><TableRow><TableCell>Azamat UI</TableCell></TableRow></TableBody>\n    </Table>\n  )\n}`,
+  code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "tembro"\n\nexport function Example() {\n  return (\n    <Table>\n      <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n      <TableBody><TableRow><TableCell>Tembro</TableCell></TableRow></TableBody>\n    </Table>\n  )\n}`,
   htmlCode: `<table data-slot="table">\n  <thead><tr><th>Name</th><th>Status</th><th>Revenue</th></tr></thead>\n  <tbody><tr><td>Acme Dashboard</td><td>Live</td><td>$24,780</td></tr></tbody>\n</table>`,
   cliCommand: "npx tembro add table",
   highlights: ["Header rows", "Body rows", "Hover states", "Compact reporting"],

package/packages/cli/vendor/src/showcase/premium/types.ts

@@ -36,7 +36,7 @@ export type ComponentDemoBundle = {
 }
 
 export const defaultComponentDemoState: ComponentDemoState = {
-  textValue: "Azamat UI",
+  textValue: "Tembro",
   textareaValue: "Controlled preview content for the selected component.",
   checked: true,
   switchOn: true,

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

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

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

@@ -0,0 +1,41 @@
+import type { ComponentDemoMock } from "../types"
+
+export const wizardMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { Wizard } from "tembro"
+
+const steps = [
+  { id: "profile", title: "Profile", description: "Basic account" },
+  { id: "team", title: "Team", description: "Invite members" },
+  { id: "finish", title: "Finish", description: "Review setup" },
+]
+
+export function Example() {
+  const [step, setStep] = React.useState("profile")
+
+  return (
+    <Wizard
+      steps={steps}
+      currentStep={step}
+      onStepChange={setStep}
+      onNext={() => setStep(step === "profile" ? "team" : "finish")}
+      onPrevious={() => setStep(step === "finish" ? "team" : "profile")}
+      onFinish={() => console.log("complete")}
+    >
+      <div>Current step: {step}</div>
+    </Wizard>
+  )
+}`,
+  cliCommand: "npx tembro add wizard",
+  highlights: ["Stepper and footer controls in one workflow", "Controlled current step", "Clickable step navigation", "Custom content slots"],
+  scenarios: [
+    { title: "Onboarding", description: "Guide users through profile, team and confirmation screens." },
+    { title: "Multi-step forms", description: "Keep form sections small while preserving progress context." },
+    { title: "Setup flows", description: "Review final state before enabling the submit action." },
+  ],
+  capabilityNotes: [
+    "Keep currentStep controlled so route or form state can persist.",
+    "Disable future steps when the user must complete validation first.",
+    "Keep the footer action labels specific to the workflow.",
+  ],
+}

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

@@ -0,0 +1,88 @@
+import * as React from "react"
+
+import { Badge, Button, Wizard } from "@/index"
+
+const steps = [
+  { id: "profile", title: "Profile", description: "Basic account" },
+  { id: "team", title: "Team", description: "Invite members" },
+  { id: "finish", title: "Finish", description: "Review setup" },
+]
+
+const contentByStep: Record<string, { title: string; description: string; checks: string[] }> = {
+  profile: {
+    title: "Workspace profile",
+    description: "Collect the public name, default role and workspace context before moving forward.",
+    checks: ["Name added", "Default role selected", "Timezone confirmed"],
+  },
+  team: {
+    title: "Invite the team",
+    description: "Add collaborators and decide who can manage billing, releases and support queues.",
+    checks: ["Owner invited", "Support role ready", "Billing access limited"],
+  },
+  finish: {
+    title: "Review and launch",
+    description: "Confirm the setup summary and finish only when required details are complete.",
+    checks: ["Profile verified", "Team access reviewed", "Launch checklist complete"],
+  },
+}
+
+export function WizardShowcase() {
+  const [currentStep, setCurrentStep] = React.useState("profile")
+  const [finished, setFinished] = React.useState(false)
+  const currentIndex = Math.max(steps.findIndex((step) => step.id === currentStep), 0)
+  const content = contentByStep[currentStep] ?? contentByStep.profile
+
+  return (
+    <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
+      <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Guided workflow</p>
+          <h3 className="mt-2 text-2xl font-semibold tracking-tight aui-text-strong">Wizard with controlled progress</h3>
+        </div>
+        <Badge variant={finished ? "soft" : "outline"}>{finished ? "Finished" : `Step ${currentIndex + 1} of ${steps.length}`}</Badge>
+      </div>
+
+      <Wizard
+        steps={steps.map((step, index) => ({ ...step, completed: index < currentIndex }))}
+        currentStep={currentStep}
+        onStepChange={(stepId) => {
+          setCurrentStep(stepId)
+          setFinished(false)
+        }}
+        onNext={() => {
+          const next = steps[Math.min(currentIndex + 1, steps.length - 1)]
+          setCurrentStep(next.id)
+          setFinished(false)
+        }}
+        onPrevious={() => {
+          const previous = steps[Math.max(currentIndex - 1, 0)]
+          setCurrentStep(previous.id)
+          setFinished(false)
+        }}
+        onFinish={() => setFinished(true)}
+        finishLabel="Launch"
+      >
+        <section className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+          <h4 className="text-lg font-semibold aui-text-strong">{content.title}</h4>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">{content.description}</p>
+          <div className="mt-4 grid gap-2 sm:grid-cols-3">
+            {content.checks.map((check) => (
+              <div key={check} className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2 text-sm aui-text-muted">
+                {check}
+              </div>
+            ))}
+          </div>
+        </section>
+      </Wizard>
+
+      <div className="mt-5 flex flex-wrap gap-2">
+        <Button size="sm" variant="outline" onClick={() => { setCurrentStep("profile"); setFinished(false) }}>
+          Reset flow
+        </Button>
+        <Button size="sm" variant="outline" onClick={() => setCurrentStep("finish")}>
+          Jump to review
+        </Button>
+      </div>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/preview-registry.tsx

@@ -29,10 +29,10 @@ const dashboardMetrics = [
 ]
 
 const dashboardRows = [
-  ["AZ-001", "Acme Dashboard", "Live", "$8,240"],
-  ["AZ-002", "CRM Workspace", "Review", "$5,180"],
-  ["AZ-003", "Store Command", "Draft", "$3,740"],
-  ["AZ-004", "Finance Dock", "Live", "$7,620"],
+  ["TM-001", "Acme Dashboard", "Live", "$8,240"],
+  ["TM-002", "CRM Workspace", "Review", "$5,180"],
+  ["TM-003", "Store Command", "Draft", "$3,740"],
+  ["TM-004", "Finance Dock", "Live", "$7,620"],
 ]
 
 const tableRows = [
@@ -91,7 +91,7 @@ function PreviewSurfaceRenderer({ tone }: { tone: PreviewSurfaceTone }) {
             <div className="mb-6 flex items-center gap-3">
               <PreviewLogo />
               <div>
-                <p className="font-semibold">Azamat UI</p>
+                <p className="font-semibold">Tembro</p>
                 <p className={`text-sm ${mutedTextClassName}`}>Dashboard shell</p>
               </div>
             </div>
@@ -251,7 +251,7 @@ function PreviewSurfaceRenderer({ tone }: { tone: PreviewSurfaceTone }) {
                 <div className="flex size-8 items-center justify-center rounded-xl border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:var(--aui-page-bg)] text-xs font-semibold tracking-[0.22em] text-[color:var(--aui-page-foreground)]">
                   AZ
                 </div>
-                <span className="text-sm font-medium">Azamat UI</span>
+                <span className="text-sm font-medium">Tembro</span>
               </div>
               <h1 className="mt-8 max-w-lg text-5xl font-semibold tracking-tight">Production sign in flow for modern product surfaces.</h1>
               <p className={`mt-4 max-w-md text-base leading-7 ${softWhiteTextClassName}`}>Preview a reusable auth block inside the docs system without leaving the library site.</p>

package/packages/cli/vendor/src/showcase/registry-quality.ts

@@ -4,9 +4,14 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("button", "Button", "actions", "Primary action surface for clicks, submit, and quick triggers in dashboard workflows."),
   component("input", "Input", "inputs", "Single-line text input for quick edits, queries, and form fields."),
   component("select", "Select", "inputs", "Select component with menu-driven single choice workflows."),
+  component("card", "Card", "display", "Container surface for dense dashboard sections, summaries, and interactive panels."),
+  component("badge", "Badge", "display", "Compact status and category label with tone, variant, and inline usage states."),
+  component("checkbox", "Checkbox", "inputs", "Boolean selection control for forms, tables, and filter groups."),
   component("dialog", "Dialog", "overlay", "Modal surface for confirmation, forms, and contextual workflows."),
+  component("sidebar", "Sidebar", "layout", "Application navigation shell with active states, account area, and responsive collapse."),
   component("data-table", "DataTable", "data-table", "High density table with search, filters, rows, actions and pagination context."),
   component("date-picker", "DatePicker", "calendar", "Date picker surface for period and event selection."),
+  component("date-range-picker", "DateRangePicker", "calendar", "Range picker surface for reporting windows and planning flows."),
   component("form-input", "FormInput", "form", "Input wrapper with RHF-ready metadata and helper text."),
   component("form-select", "FormSelect", "form", "Select wrapper for controlled local and async choice fields."),
   component("form-textarea", "FormTextarea", "form", "Textarea wrapper with helper, validation and consistent spacing."),

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -331,7 +331,7 @@ function OverlayPreview({ slug }: { slug: string }) {
         <DescriptionList
           items={[
             { key: "plan", label: "Plan", value: "Scale" },
-            { key: "owner", label: "Owner", value: "Azamat UI" },
+            { key: "owner", label: "Owner", value: "Tembro" },
           ]}
         />
       </Drawer>
@@ -622,7 +622,7 @@ function DataTablePartsPreview({ slug }: { slug: string }) {
         <span>Status</span>
         <span>Actions</span>
       </div>
-      {["Azamat UI", "Registry", "Dashboard"].map((row, index) => (
+      {["Tembro", "Registry", "Dashboard"].map((row, index) => (
         <div key={row} className="grid grid-cols-[40px_1fr_120px_72px] items-center border-b border-[color:var(--aui-divider)] px-3 py-3 last:border-b-0">
           <span><input type="checkbox" aria-label={`Select ${row}`} defaultChecked={index === 0} /></span>
           <span className="font-medium aui-text-strong">{row}</span>

package/packages/cli/vendor/src/showcase/render-registry-preview.tsx

@@ -185,7 +185,7 @@ function OverlayPreview({ slug }: { slug: string }) {
         <DescriptionList
           items={[
             { key: "plan", label: "Plan", value: "Scale" },
-            { key: "owner", label: "Owner", value: "Azamat UI" },
+            { key: "owner", label: "Owner", value: "Tembro" },
           ]}
         />
       </Drawer>
@@ -517,7 +517,7 @@ function DataTablePartsPreview({ slug }: { slug: string }) {
         <span>Status</span>
         <span>Actions</span>
       </div>
-      {["Azamat UI", "Registry", "Dashboard"].map((row, index) => (
+      {["Tembro", "Registry", "Dashboard"].map((row, index) => (
         <div key={row} className="grid grid-cols-[40px_1fr_120px_72px] items-center border-b border-[color:var(--aui-divider)] px-3 py-3 last:border-b-0">
           <span><input type="checkbox" aria-label={`Select ${row}`} defaultChecked={index === 0} /></span>
           <span className="font-medium text-[color:var(--aui-page-foreground)]">{row}</span>

package/packages/cli/vendor/src/showcase/site-data.tsx

@@ -28,7 +28,7 @@ import {
   ToggleLeftIcon,
   WorkflowIcon,
 } from "lucide-react"
-import azamatKitRegistry from "./tembro-registry.json"
+import tembroRegistry from "./tembro-registry.json"
 import {
   PACKAGE_LATEST_RELEASE_DATE,
   PACKAGE_LATEST_VERSION,
@@ -254,7 +254,7 @@ export type ComponentDetailSidebarSection = {
 export const PACKAGE_NAME = "tembro"
 export const CLI_PACKAGE_NAME = "tembro"
 export const PACKAGE_IMPORT = "tembro"
-export const DOCS_APP_NAME = "azamat-ui"
+export const DOCS_APP_NAME = "tembro"
 export const CLI_INIT_NEXT_COMMAND = `npx ${CLI_PACKAGE_NAME} init --template next --defaults`
 export const CLI_INIT_VITE_COMMAND = `npx ${CLI_PACKAGE_NAME} init --template vite --defaults`
 export const CLI_ADD_COMMAND = `npx ${CLI_PACKAGE_NAME} add button input`
@@ -262,9 +262,9 @@ export const PACKAGE_INSTALL_COMMAND = `${CLI_INIT_NEXT_COMMAND}\n${CLI_ADD_COMM
 export const CLI_INSTALL_COMMAND = `npx ${CLI_PACKAGE_NAME} --help`
 export const CLI_THEME_COMMAND = `npx ${CLI_PACKAGE_NAME} theme`
 export const PACKAGE_NPM_URL = "https://www.npmjs.com/package/tembro"
-export const PACKAGE_GITHUB_URL = "https://github.com/AzamatJurayev-dev/tembro"
-export const PACKAGE_GITHUB_RELEASES_URL = `${PACKAGE_GITHUB_URL}/releases`
-export const DOCS_REPO_URL = "https://github.com/AzamatJurayev-dev/azamat-ui"
+export const PACKAGE_GITHUB_URL = "https://github.com/AzamatJurayev-dev/azamat-ui-kit"
+export const PACKAGE_GITHUB_RELEASES_URL = `${PACKAGE_GITHUB_URL}/releases`
+export const DOCS_REPO_URL = PACKAGE_GITHUB_URL
 export const PACKAGE_RELEASES_URL = PACKAGE_GITHUB_RELEASES_URL
 export const DOCS_RELEASES_URL = `${DOCS_REPO_URL}/releases`
 export const DOCS_ROOT_PATH = "/docs"
@@ -1529,7 +1529,7 @@ type KitRegistryFile = {
   recommended?: string[]
 }
 
-const kitRegistry = azamatKitRegistry as KitRegistryFile
+const kitRegistry = tembroRegistry as KitRegistryFile
 const kitGroups = kitRegistry?.groups ?? {}
 const kitRecommendedSlugs = new Set((kitRegistry?.recommended ?? []).map((slug) => slug))
 const kitMigrationAliases = kitRegistry?.migrationAliases ?? {}
@@ -1594,17 +1594,72 @@ const fallbackRegistryIconByGroup: Record<string, LucideIcon> = {
   hooks: SmartphoneIcon,
 }
 
-function slugToTitle(value: string) {
-  return value
-    .split("-")
-    .filter(Boolean)
-    .map((piece) => piece.charAt(0).toUpperCase() + piece.slice(1))
-    .join(" ")
-}
-
-const baseComponentSlugs = new Set(baseComponentCatalog.map((item) => item.slug))
-const generatedComponentCatalog = new Map<string, ComponentCatalogItem>()
-for (const [group, groupSlugs] of Object.entries(kitGroups)) {
+function slugToTitle(value: string) {
+  return value
+    .split("-")
+    .filter(Boolean)
+    .map((piece) => piece.charAt(0).toUpperCase() + piece.slice(1))
+    .join(" ")
+}
+
+const fallbackRegistryFeaturesByGroup: Record<string, string[]> = {
+  ui: ["Composable primitive", "Variant-ready styling", "Keyboard and focus-friendly defaults", "Local source-copy customization"],
+  actions: ["Action composition", "Icon and label pairing", "Keyboard and focus-friendly defaults", "Dense toolbar usage"],
+  feedback: ["Inline status messaging", "Loading, empty or error context", "Accessible status copy", "Actionable recovery guidance"],
+  display: ["Structured content display", "Empty and loading state support", "Accessible reading order", "Responsive data presentation"],
+  overlay: ["Focused overlay behavior", "Escape and outside-click handling", "Accessible focus management", "Compact action footer"],
+  inputs: ["Controlled value support", "Validation-ready states", "Keyboard and focus-friendly defaults", "Form-friendly composition"],
+  form: ["Form shell integration", "Validation and error states", "Accessible label contract", "Reusable field composition"],
+  dataTable: ["Data workflow composition", "Sorting/filtering integration", "Accessible row and header semantics", "Responsive operator surfaces"],
+  data_table: ["Data workflow composition", "Sorting/filtering integration", "Accessible row and header semantics", "Responsive operator surfaces"],
+  layout: ["Route-level structure", "Navigation-aware composition", "Responsive shell behavior", "Reusable product framing"],
+  navigation: ["Section navigation", "Current state support", "Keyboard and focus-friendly defaults", "Route-friendly links"],
+  filters: ["Search and filter composition", "Saved or reusable filter state", "Accessible control labels", "Data-table integration"],
+  calendar: ["Date selection workflow", "Boundary and disabled-date support", "Keyboard and focus-friendly defaults", "Scheduling-ready layout"],
+  upload: ["File interaction workflow", "Preview and progress states", "Accessible upload guidance", "Validation-ready constraints"],
+  wizard: ["Step flow composition", "Progress and completion state", "Keyboard and focus-friendly defaults", "Guided form workflow"],
+  notifications: ["Transient status messaging", "Unread and dismiss flows", "Accessible notification copy", "Async completion feedback"],
+  command: ["Keyboard-first discovery", "Search and grouped actions", "Accessible command labels", "Route or action execution"],
+  patterns: ["Composed product workflow", "Reusable screen section", "Accessible structure", "Production layout starting point"],
+}
+
+const fallbackRegistryDescriptionByGroup: Record<string, string> = {
+  ui: "Reusable primitive for product interfaces with source-copy styling and predictable focus behavior.",
+  actions: "Action surface for dense product workflows, toolbar controls and copy-friendly command areas.",
+  feedback: "Status surface for communicating loading, empty, success, warning or error context with a clear next step.",
+  display: "Read-oriented surface for presenting operational content, metadata, timelines or structured records.",
+  overlay: "Focused overlay pattern for short decisions, contextual actions and contained editing flows.",
+  inputs: "Input surface for controlled values, validation states and form-ready interaction patterns.",
+  form: "Form composition helper for labels, validation, controlled values and repeatable field structure.",
+  dataTable: "Data workflow helper for reusable tables, row actions, filtering, selection and responsive records.",
+  data_table: "Data workflow helper for reusable tables, row actions, filtering, selection and responsive records.",
+  layout: "Layout helper for route-level structure, navigation context and reusable application shells.",
+  navigation: "Navigation helper for route-aware sections, current state and keyboard-friendly movement.",
+  filters: "Filter composition helper for search, chips, saved views and data narrowing workflows.",
+  calendar: "Date and schedule surface for reporting, planning, disabled-date rules and calendar-style selection.",
+  upload: "Upload workflow surface for files, images, preview states, progress and validation guidance.",
+  wizard: "Guided workflow surface for multi-step forms, progress state and step-by-step completion.",
+  notifications: "Notification surface for async status, unread activity, dismiss behavior and transient updates.",
+  command: "Command surface for keyboard-first search, grouped actions and fast route or action discovery.",
+  patterns: "Composed product pattern that combines primitives into reusable production screen sections.",
+}
+
+function getFallbackFeatures(group: string) {
+  return fallbackRegistryFeaturesByGroup[group] ?? [
+    "Source-copy component",
+    "Composable product usage",
+    "Keyboard and focus-friendly defaults",
+    "Local customization",
+  ]
+}
+
+function getFallbackDescription(group: string, title: string) {
+  return `${title}. ${fallbackRegistryDescriptionByGroup[group] ?? "Reusable source-copy surface for production product interfaces."}`
+}
+
+const baseComponentSlugs = new Set(baseComponentCatalog.map((item) => item.slug))
+const generatedComponentCatalog = new Map<string, ComponentCatalogItem>()
+for (const [group, groupSlugs] of Object.entries(kitGroups)) {
   if (hiddenKitGroups.has(group) || skippedKitGroups.has(group)) continue
 
   for (const slug of groupSlugs) {
@@ -1619,21 +1674,23 @@ for (const [group, groupSlugs] of Object.entries(kitGroups)) {
       const category = fallbackRegistryCategoryByGroup[group] ?? "Data Display"
       const icon = fallbackRegistryIconByGroup[group] ?? SparklesIcon
 
-    generatedComponentCatalog.set(effectiveSlug, {
-      slug: effectiveSlug,
-      title: aliasTarget ? slugToTitle(aliasTarget) : slugToTitle(effectiveSlug),
-      description: `${slugToTitle(effectiveSlug)} surfaced from package registry group "${group}".`,
-      icon,
-      category,
-      status: kitRecommendedSlugs.has(effectiveSlug) ? "Stable" : "Preview",
-      installCommand: PACKAGE_INSTALL_COMMAND,
-      propsRows: [
-        ["className", "string", "-", "Additional classes for wrapper element."],
-      ],
-      features: [group],
-    })
-  }
-}
+    generatedComponentCatalog.set(effectiveSlug, {
+      slug: effectiveSlug,
+      title: aliasTarget ? slugToTitle(aliasTarget) : slugToTitle(effectiveSlug),
+      description: getFallbackDescription(group, slugToTitle(effectiveSlug)),
+      icon,
+      category,
+      status: kitRecommendedSlugs.has(effectiveSlug) ? "Stable" : "Preview",
+      installCommand: PACKAGE_INSTALL_COMMAND,
+      propsRows: [
+        ["className", "string", "-", "Additional classes for wrapper element."],
+        ["children", "ReactNode", "-", "Optional composed content or custom slots when the component supports composition."],
+        ["aria-label", "string", "-", "Accessible label for icon-only, compact, or non-text usage."],
+      ],
+      features: getFallbackFeatures(group),
+    })
+  }
+}
 
 const fallbackComponentCatalog = [...generatedComponentCatalog.values()]
 export const componentCatalog: ComponentCatalogItem[] = [...baseComponentCatalog, ...fallbackComponentCatalog].filter(

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/src/showcase/types.ts

@@ -36,7 +36,7 @@ export type ShowcaseDemoBundle = {
 }
 
 export const defaultShowcaseDemoState: ShowcaseDemoState = {
-  textValue: "Azamat UI",
+  textValue: "Tembro",
   textareaValue: "Controlled preview content for the selected component.",
   checked: true,
   switchOn: true,

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [