tembro 2.0.4 → 2.0.6

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const phoneInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { PhoneInput } from "@/index"
+import { PhoneInput } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("+998 90 123 45 67")

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const quantityInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { QuantityInput } from "@/index"
+import { QuantityInput } from "tembro"
 
 export function Example() {
   const [quantity, setQuantity] = useState<number | null>(3)

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

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const selectMock: ComponentDemoMock = {
-  code: `import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "tembro"\n\nexport function Example() {\n  return (\n    <Select defaultValue="starter">\n      <SelectTrigger><SelectValue /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value="starter">Starter</SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}`,
+  code: `import { Select } from "tembro"\n\nconst planOptions = [\n  { value: "starter", label: "Starter" },\n  { value: "growth", label: "Growth" },\n  { value: "enterprise", label: "Enterprise" },\n]\n\nexport function Example() {\n  return <Select defaultValue="starter" options={planOptions} />\n}`,
   cliCommand: "npx tembro add select",
   highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Compact trigger options"],
   relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/index"
+import { Badge, Button, Select } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -75,27 +75,19 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
               <p className="text-sm font-medium aui-text-muted">{surface === "plan" ? "Workspace plan" : "Toolbar density"}</p>
               <div className="mt-3">
                 {surface === "plan" ? (
-                  <Select value={selectedValue} onValueChange={(value: string | null | undefined) => setState({ selectValue: value ?? planOptions[0].value })}>
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {planOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    value={selectedValue}
+                    onValueChange={(value) => setState({ selectValue: value ?? planOptions[0].value })}
+                    options={planOptions}
+                    triggerClassName="w-full"
+                  />
                 ) : (
-                  <Select defaultValue={compactOptions[0].value}>
-                    <SelectTrigger size="sm" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {compactOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    defaultValue={compactOptions[0].value}
+                    options={compactOptions}
+                    size="sm"
+                    triggerClassName="w-full"
+                  />
                 )}
               </div>
             </div>

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const simpleSelectMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { Button, SimpleSelect } from "@/index"
+import { Button, SimpleSelect } from "tembro"
 
 const selectOptions = [
   { value: "public", label: "Public", disabled: false },

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

@@ -31,6 +31,7 @@ export function SimpleSelectShowcase({ mode }: ComponentDemoProps) {
         placeholder="Visibility"
         searchable
         clearable
+        showSelectedDescription
       />
       <div className="grid gap-3 md:grid-cols-3">
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
@@ -46,7 +47,7 @@ export function SimpleSelectShowcase({ mode }: ComponentDemoProps) {
           <p className="mt-2 aui-text-muted">Choose this for local option lists before moving to AsyncSelect.</p>
         </div>
       </div>
-      <SimpleSelect key={uncontrolledKey} defaultValue="public" options={options} />
+      <SimpleSelect key={uncontrolledKey} defaultValue="public" options={options} showSelectedDescription />
       <div className="flex flex-wrap gap-2">
         <Button variant="outline" size="sm" onClick={() => setValue(undefined)}>
           Clear controlled

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

@@ -13,49 +13,49 @@ export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
     slug: "dashboard-01",
     title: "Dashboard with sidebar",
     command: "npx tembro init --template next --defaults\nnpx tembro add app-sidebar metric-grid data-table",
-    code: `import { AppSidebar } from "@/components/layout/app-sidebar"\nimport { MetricGrid } from "@/components/display/metric-grid"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
+    code: `import { AppSidebar, MetricGrid } from "tembro"\n\nexport function Dashboard01() {\n  return <AppSidebar />\n}`,
     tone: "dashboard",
   },
   {
     slug: "table-01",
     title: "Advanced invoice table",
     command: "npx tembro add data-table",
-    code: `import { DataTable } from "@/components/data-table/data-table"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
+    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
     tone: "table",
   },
   {
     slug: "auth-01",
     title: "Authentication screen",
     command: "npx tembro add input button",
-    code: `import { Button } from "@/components/ui/button"\nimport { Input } from "@/components/ui/input"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
+    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
     tone: "auth",
   },
   {
     slug: "product-01",
     title: "Commerce product detail",
     command: "npx tembro add badge button",
-    code: `import { Badge } from "@/components/ui/badge"\nimport { Button } from "@/components/ui/button"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
+    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
     tone: "product",
   },
   {
     slug: "command-01",
     title: "Command palette",
     command: "npx tembro add command-palette",
-    code: `import { CommandPalette } from "@/components/command/command-palette"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
+    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
     tone: "command",
   },
   {
     slug: "calendar-01",
     title: "Calendar and date picker",
     command: "npx tembro add calendar date-picker",
-    code: `import { Calendar } from "@/components/calendar/calendar"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
+    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
     tone: "calendar",
   },
   {
     slug: "upload-01",
     title: "Upload workspace",
     command: "npx tembro add file-upload image-upload",
-    code: `import { FileUpload } from "@/components/upload/file-upload"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
+    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
     tone: "upload",
   },
 ]

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

@@ -13,13 +13,11 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("form-switch", "FormSwitch", "form", "Boolean form control with shell-level label and hint handling."),
   component("form-date-picker", "FormDatePicker", "form", "Popover date picker wrapper with RHF integration."),
   component("form-date-range-picker", "FormDateRangePicker", "form", "Range date picker wrapper for planning and reporting flows."),
-  component("dialog-actions", "DialogActions", "overlay", "Modal footer action row with cancel, secondary and primary actions."),
   component("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
   component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
 
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
   component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
   component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
   component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
 
@@ -27,8 +25,6 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("number-input", "NumberInput", "inputs", "Numeric entry for counts, thresholds, and reporting controls."),
   component("phone-input", "PhoneInput", "inputs", "Phone input with stable raw and masked value handling."),
   component("money-input", "MoneyInput", "inputs", "Currency entry for billing, finance and KPI editing flows."),
-  component("date-input", "DateInput", "inputs", "Single-date field for compact forms and filter bars."),
-  component("date-range-input", "DateRangeInput", "inputs", "Date range surface for reporting and booking windows."),
   component("simple-select", "SimpleSelect", "inputs", "Static local-option select for dashboards and settings forms."),
   component("async-select", "AsyncSelect", "inputs", "Remote-loaded select for large server-backed option sets."),
   component("combobox", "Combobox", "inputs", "Searchable local choice input for reassignment and command-like selection."),
@@ -36,33 +32,23 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
   component("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
-  component("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
   component("inline-editable", "InlineEditable", "inputs", "Inline editing primitive for dense tables and configuration rows."),
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
 
-  component("description-list", "DescriptionList", "display", "Structured key-value details for entity, invoice and profile pages."),
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
   component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
   component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
-  component("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-  component("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
-  component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-  component("file-card", "FileCard", "display", "Compact file summary with state and actions."),
+  component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
   component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
-  component("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card."),
+  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
 
   component("action-menu", "ActionMenu", "actions", "Compact dropdown action menu for rows and cards."),
   component("button-group", "ButtonGroup", "actions", "Grouped action buttons for view switching and compact controls."),
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
-  component("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
-  component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
-  component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("command-palette", "CommandPalette", "actions", "Keyboard command surface for global navigation and actions."),
+  component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 
   component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
   component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
@@ -71,17 +57,7 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
   component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
 
-  component("data-table-pagination", "DataTablePagination", "data-table", "Pagination control used by DataTable pages."),
-  component("data-table-toolbar", "DataTableToolbar", "data-table", "Toolbar surface for DataTable search, filters and actions."),
-  component("data-table-column-visibility-menu", "DataTableColumnVisibilityMenu", "data-table", "Column visibility menu pattern for table views."),
-  component("data-table-select-column", "DataTableSelectColumn", "data-table", "Selection column pattern for bulk table workflows."),
-  component("data-table-sortable-header", "DataTableSortableHeader", "data-table", "Sortable header trigger with clear visual state."),
-  component("data-table-row-actions", "DataTableRowActions", "data-table", "Row action menu for inspect, duplicate and archive operations."),
-  component("data-table-actions-column", "DataTableActionsColumn", "data-table", "Reusable actions column for DataTable definitions."),
-  component("data-table-bulk-actions", "DataTableBulkActions", "data-table", "Bulk action bar for selected rows."),
-  component("data-table-view-presets", "DataTableViewPresets", "data-table", "Saved table view presets for operational dashboards."),
-
-  component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
+  component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
 
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy."),