tembro 3.1.6 → 3.1.8

package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts

@@ -0,0 +1,273 @@
+export type ComponentStatus = "stable" | "preview" | "experimental" | "internal"
+
+export type RegistryComponent = {
+  name: string
+  status: ComponentStatus
+  sourcePath: string
+}
+
+export type RegistryGroup = {
+  name: string
+  components: RegistryComponent[]
+}
+
+export type ComponentRow = {
+  id: string
+  component: string
+  category: string
+  status: "Ready" | "Testing" | "Review"
+  props: number
+}
+
+const component = (name: string, status: ComponentStatus, sourcePath: string): RegistryComponent => ({
+  name,
+  status,
+  sourcePath,
+})
+
+export const registryGroups: RegistryGroup[] = [
+  {
+    name: "ui",
+    components: [
+      component("button", "stable", "src/components/ui/button"),
+      component("input", "stable", "src/components/ui/input"),
+      component("textarea", "stable", "src/components/ui/textarea"),
+      component("checkbox", "stable", "src/components/ui/checkbox"),
+      component("switch", "stable", "src/components/ui/switch"),
+      component("badge", "stable", "src/components/ui/badge"),
+      component("card", "stable", "src/components/ui/card"),
+      component("skeleton", "preview", "src/components/ui/skeleton"),
+      component("tabs", "preview", "src/components/ui/tabs"),
+      component("dialog", "stable", "src/components/ui/dialog"),
+      component("dropdown-menu", "stable", "src/components/ui/dropdown-menu"),
+      component("popover", "stable", "src/components/ui/popover"),
+      component("tooltip", "preview", "src/components/ui/tooltip"),
+      component("select", "stable", "src/components/ui/select"),
+      component("table", "stable", "src/components/ui/table"),
+      component("segmented-control", "preview", "src/components/ui/segmented-control"),
+      component("radio-group", "stable", "src/components/ui/radio-group"),
+      component("accordion", "stable", "src/components/ui/accordion"),
+      component("kbd", "stable", "src/components/ui/kbd"),
+      component("scroll-box", "stable", "src/components/ui/scroll-box"),
+      component("right-click-menu", "stable", "src/components/ui/right-click-menu"),
+      component("collapse", "preview", "src/components/ui/collapse"),
+      component("command", "preview", "src/components/ui/command"),
+      component("divider", "preview", "src/components/ui/divider"),
+      component("spinner", "preview", "src/components/ui/spinner"),
+    ],
+  },
+  {
+    name: "actions",
+    components: [
+      component("action-menu", "stable", "src/components/actions/action-menu.tsx"),
+      component("button-group", "preview", "src/components/actions/button-group.tsx"),
+      component("copy-button", "preview", "src/components/actions/copy-button.tsx"),
+      component("quick-action-grid", "preview", "src/components/actions/quick-action-grid.tsx"),
+    ],
+  },
+  {
+    name: "inputs",
+    components: [
+      component("tag-input", "preview", "src/components/inputs/tag-input.tsx"),
+      component("async-select", "preview", "src/components/inputs/async-select.tsx"),
+      component("otp-input", "preview", "src/components/inputs/otp-input.tsx"),
+      component("color-picker", "stable", "src/components/inputs/color-picker.tsx"),
+      component("signature-pad", "preview", "src/components/inputs/signature-pad.tsx"),
+      component("rating", "preview", "src/components/inputs/rating.tsx"),
+      component("slider", "preview", "src/components/inputs/slider.tsx"),
+      component("inline-editable", "preview", "src/components/inputs/inline-editable.tsx"),
+      component("json-input", "preview", "src/components/inputs/json-input.tsx"),
+      component("time-picker", "preview", "src/components/inputs/time-picker.tsx"),
+    ],
+  },
+  {
+    name: "form",
+    components: [
+      component("form-field-shell", "preview", "src/components/form/form-field-shell.tsx"),
+      component("form-input", "preview", "src/components/form/form-input.tsx"),
+      component("form-select", "preview", "src/components/form/form-select.tsx"),
+      component("form-textarea", "preview", "src/components/form/form-textarea.tsx"),
+      component("form-switch", "preview", "src/components/form/form-switch.tsx"),
+      component("form-date-range-input", "preview", "src/components/form/form-date-range-input.tsx"),
+      component("form-date-picker", "preview", "src/components/form/form-date-picker.tsx"),
+      component("form-date-range-picker", "preview", "src/components/form/form-date-range-picker.tsx"),
+    ],
+  },
+  {
+    name: "display",
+    components: [
+      component("activity-feed", "stable", "src/components/display/activity-feed.tsx"),
+      component("avatar", "preview", "src/components/display/avatar.tsx"),
+      component("code-block", "preview", "src/components/display/code-block.tsx"),
+      component("carousel", "preview", "src/components/display/carousel.tsx"),
+      component("tag", "preview", "src/components/display/tag.tsx"),
+      component("typography", "preview", "src/components/display/typography.tsx"),
+      component("data-state", "preview", "src/components/display/data-state.tsx"),
+      component("description-list", "stable", "src/components/display/description-list.tsx"),
+      component("kanban", "preview", "src/components/display/kanban.tsx"),
+      component("list", "preview", "src/components/display/list.tsx"),
+      component("progress", "stable", "src/components/display/progress.tsx"),
+      component("info-card", "stable", "src/components/display/info-card.tsx"),
+      component("statistic", "preview", "src/components/display/statistic.tsx"),
+      component("status-dot", "preview", "src/components/display/status-dot.tsx"),
+      component("status-legend", "preview", "src/components/display/status-legend.tsx"),
+      component("timeline", "stable", "src/components/display/timeline.tsx"),
+      component("tree-view", "preview", "src/components/display/tree-view.tsx"),
+      component("qr-code", "stable", "src/components/display/qr-code.tsx"),
+      component("virtual-list", "preview", "src/components/display/virtual-list.tsx"),
+    ],
+  },
+  { name: "data-table", components: [component("data-table", "preview", "src/components/data-table/data-table.tsx")] },
+  {
+    name: "calendar",
+    components: [
+      component("calendar", "preview", "src/components/calendar/calendar.tsx"),
+      component("date-picker", "preview", "src/components/calendar/date-picker.tsx"),
+      component("date-range-picker", "preview", "src/components/calendar/date-range-picker.tsx"),
+    ],
+  },
+  {
+    name: "overlay",
+    components: [
+      component("confirm-dialog", "stable", "src/components/overlay/confirm-dialog.tsx"),
+      component("alert-dialog", "stable", "src/components/overlay/alert-dialog.tsx"),
+      component("drawer", "stable", "src/components/overlay/drawer.tsx"),
+    ],
+  },
+  {
+    name: "feedback",
+    components: [
+      component("loading-state", "stable", "src/components/feedback/loading-state.tsx"),
+      component("page-state", "preview", "src/components/feedback/page-state.tsx"),
+      component("alert", "preview", "src/components/feedback/alert.tsx"),
+    ],
+  },
+  {
+    name: "layout",
+    components: [
+      component("sidebar", "stable", "src/components/layout/app-sidebar.tsx"),
+      component("breadcrumbs", "stable", "src/components/layout/breadcrumbs.tsx"),
+      component("section", "preview", "src/components/layout/section.tsx"),
+    ],
+  },
+  {
+    name: "patterns",
+    components: [
+      component("bulk-action-bar", "preview", "src/components/patterns/bulk-action-bar.tsx"),
+      component("data-view", "preview", "src/components/patterns/data-view.tsx"),
+      component("detail-layout", "preview", "src/components/patterns/detail-layout.tsx"),
+      component("empty-state", "preview", "src/components/patterns/empty-state.tsx"),
+      component("form-builder", "preview", "src/components/patterns/form-builder.tsx"),
+      component("resource-detail-page", "preview", "src/components/patterns/resource-detail-page.tsx"),
+      component("resource-page", "preview", "src/components/patterns/resource-page.tsx"),
+      component("page-toolbar", "preview", "src/components/patterns/page-toolbar.tsx"),
+      component("settings-page", "preview", "src/components/patterns/settings-page.tsx"),
+    ],
+  },
+  {
+    name: "modern",
+    components: [
+      component("calendar-scheduler", "preview", "src/components/modern/calendar-scheduler.tsx"),
+      component("dual-list-picker", "preview", "src/components/modern/dual-list-picker.tsx"),
+      component("resizable-panel", "preview", "src/components/modern/resizable-panel.tsx"),
+      component("rich-text-editor", "preview", "src/components/modern/rich-text-editor.tsx"),
+      component("image-cropper", "preview", "src/components/modern/image-cropper.tsx"),
+    ],
+  },
+  {
+    name: "upload",
+    components: [
+      component("file-upload", "preview", "src/components/upload/file-upload.tsx"),
+      component("image-upload", "preview", "src/components/upload/image-upload.tsx"),
+    ],
+  },
+  {
+    name: "filters",
+    components: [
+      component("filter-bar", "stable", "src/components/filters/filter-bar.tsx"),
+      component("saved-filter-select", "preview", "src/components/filters/saved-filter-select.tsx"),
+    ],
+  },
+  { name: "navigation", components: [component("pagination", "stable", "src/components/navigation/pagination.tsx")] },
+  { name: "charts", components: [component("progress-circle", "stable", "src/components/charts/progress-circle.tsx")] },
+  {
+    name: "wizard",
+    components: [
+      component("stepper", "preview", "src/components/wizard/stepper.tsx"),
+      component("wizard", "preview", "src/components/wizard/wizard.tsx"),
+    ],
+  },
+  {
+    name: "notifications",
+    components: [
+      component("toast", "preview", "src/components/notifications/toast.tsx"),
+      component("notification-center", "preview", "src/components/notifications/notification-center.tsx"),
+    ],
+  },
+  { name: "command", components: [component("command-palette", "preview", "src/components/command/command-palette.tsx")] },
+  { name: "dnd", components: [component("sortable-list", "preview", "src/components/dnd/sortable-list.tsx")] },
+]
+
+export const componentRows: ComponentRow[] = [
+  { id: "cmp-001", component: "sidebar", category: "layout", status: "Ready", props: 34 },
+  { id: "cmp-002", component: "kanban", category: "display", status: "Ready", props: 13 },
+  { id: "cmp-003", component: "data-table", category: "data-table", status: "Testing", props: 50 },
+  { id: "cmp-004", component: "calendar", category: "calendar", status: "Ready", props: 22 },
+  { id: "cmp-005", component: "drawer", category: "overlay", status: "Ready", props: 14 },
+  { id: "cmp-006", component: "wizard", category: "wizard", status: "Review", props: 12 },
+  { id: "cmp-007", component: "button", category: "ui", status: "Ready", props: 9 },
+  { id: "cmp-008", component: "input", category: "ui", status: "Ready", props: 11 },
+]
+
+export const wizardSteps = [
+  { id: "setup", title: "Setup", description: "init + theme", completed: true },
+  { id: "add", title: "Add", description: "105 registry components", completed: true },
+  { id: "test", title: "Test", description: "visible workbench" },
+]
+
+export const moduleCount = registryGroups.reduce((sum, group) => sum + group.components.length, 0)
+
+export type WorkbenchSelection =
+  | { type: "overview"; key: "overview" }
+  | { type: "category"; key: string; group: RegistryGroup }
+  | { type: "module"; key: string; group: RegistryGroup; component: RegistryComponent }
+
+export function getCategoryKey(groupName: string) {
+  return `category:${groupName}`
+}
+
+export function getModuleKey(groupName: string, componentName: string) {
+  return `component:${groupName}/${componentName}`
+}
+
+export function getModuleLabel(componentName: string) {
+  return componentName
+}
+
+export function getModuleSourcePath(component: RegistryComponent) {
+  return component.sourcePath
+}
+
+export function resolveWorkbenchSelection(key: string): WorkbenchSelection {
+  if (key === "overview") return { type: "overview", key: "overview" }
+
+  if (key.startsWith("category:")) {
+    const groupName = key.slice("category:".length)
+    const group = registryGroups.find((item) => item.name === groupName)
+    if (group) return { type: "category", key, group }
+  }
+
+  if (key.startsWith("component:")) {
+    const value = key.slice("component:".length)
+    const slashIndex = value.indexOf("/")
+    const groupName = value.slice(0, slashIndex)
+    const componentName = value.slice(slashIndex + 1)
+    const group = registryGroups.find((item) => item.name === groupName)
+    const selectedComponent = group?.components.find((item) => item.name === componentName)
+    if (group && selectedComponent) {
+      return { type: "module", key, group, component: selectedComponent }
+    }
+  }
+
+  return { type: "overview", key: "overview" }
+}

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -0,0 +1,41 @@
+import { PlusIcon, SettingsIcon } from "lucide-react"
+
+import { CopyButton } from "@/components/actions/copy-button"
+import { StatisticCard, StatisticGrid } from "@/components/display/statistic"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { moduleCount, registryGroups } from "@/showcase/data/registry"
+
+export function HeroSection() {
+  return (
+    <section className="border-b bg-card">
+      <div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
+        <div className="flex flex-wrap items-start justify-between gap-6">
+          <div className="max-w-3xl">
+            <div className="mb-3 flex flex-wrap gap-2">
+              <Badge status="success" label="tembro init done" variant="soft" />
+              <Badge status="info" label={`${moduleCount} registry components`} variant="soft" />
+              <Badge status="warning" label="real local components" variant="soft" />
+            </div>
+            <h1 className="text-4xl font-semibold tracking-tight">All Tembro Components Test Surface</h1>
+            <p className="mt-3 text-base leading-7 text-muted-foreground">
+              Vite starter olib tashlandi. Bu ekran `tembro add showcase` orqali o‘rnatilgan aniq registry componentlardan qurildi.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
+            <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
+            <CopyButton value="npx tembro@3.1.8 list --json">Copy list command</CopyButton>
+          </div>
+        </div>
+
+        <StatisticGrid columns={4} className="mt-8">
+          <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
+          <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
+          <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.8" />
+        </StatisticGrid>
+      </div>
+    </section>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -0,0 +1,82 @@
+import {
+  CalendarDaysIcon,
+  ClipboardListIcon,
+  DatabaseIcon,
+  FolderKanbanIcon,
+  Layers3Icon,
+  LayoutDashboardIcon,
+  SparklesIcon,
+  UploadCloudIcon,
+  WandSparklesIcon,
+} from "lucide-react"
+
+import { Sidebar } from "@/components/layout/app-sidebar"
+import { Badge } from "@/components/ui/badge"
+import { getCategoryKey, getModuleKey, getModuleLabel, moduleCount, registryGroups } from "@/showcase/data/registry"
+
+type WorkbenchSidebarProps = {
+  selectedKey: string
+  onSelect: (key: string) => void
+}
+
+export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProps) {
+  return (
+    <aside className="border-r bg-sidebar p-3 lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto">
+      <Sidebar
+        width="100%"
+        header={
+          <div className="flex items-center gap-3 rounded-xl border bg-card p-3">
+            <div className="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              <WandSparklesIcon className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <div className="truncate font-semibold">Tembro Workbench</div>
+              <div className="text-xs text-muted-foreground">local copied components</div>
+            </div>
+          </div>
+        }
+        items={[
+          { key: "overview", label: "Overview", icon: <LayoutDashboardIcon className="size-4" />, active: selectedKey === "overview", badge: <Badge label="live" status="success" />, onSelect: () => onSelect("overview") },
+          ...registryGroups.map((group) => {
+            const categoryKey = getCategoryKey(group.name)
+            return {
+              key: categoryKey,
+              label: group.name,
+              icon: group.name === "ui"
+                ? <SparklesIcon className="size-4" />
+                : group.name === "data-table"
+                  ? <DatabaseIcon className="size-4" />
+                  : group.name === "display"
+                    ? <FolderKanbanIcon className="size-4" />
+                    : group.name === "calendar"
+                      ? <CalendarDaysIcon className="size-4" />
+                      : group.name === "overlay"
+                        ? <Layers3Icon className="size-4" />
+                        : group.name === "upload"
+                          ? <UploadCloudIcon className="size-4" />
+                          : <ClipboardListIcon className="size-4" />,
+              active: selectedKey === categoryKey || selectedKey.startsWith(`component:${group.name}/`),
+              badge: <Badge label={group.components.length} variant="secondary" />,
+              defaultExpanded: ["ui", "display", "data-table", "inputs", "layout", "overlay"].includes(group.name),
+              onSelect: () => onSelect(categoryKey),
+              items: group.components.map((component) => {
+                const moduleKey = getModuleKey(group.name, component.name)
+                return {
+                  key: moduleKey,
+                  label: getModuleLabel(component.name),
+                  active: selectedKey === moduleKey,
+                  onSelect: () => onSelect(moduleKey),
+                }
+              }),
+            }
+          }),
+        ]}
+        footerAccount={{
+          label: "tembro@3.1.8",
+          description: `${moduleCount} registry components`,
+        }}
+        activeIndicator="bar"
+      />
+    </aside>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/sections/CalendarSection.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react"
+
+import { Calendar } from "@/components/calendar/calendar"
+import { DatePicker } from "@/components/calendar/date-picker"
+import { Pagination } from "@/components/navigation/pagination"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export function CalendarSection() {
+  const [date, setDate] = useState("2026-07-15")
+  const [page, setPage] = useState(2)
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_0.8fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Calendar</CardTitle>
+          <CardDescription>Single/range capable calendar module.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Calendar value={date} onValueChange={setDate} showTodayShortcut showClearShortcut showSelectionSummary />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>DatePicker and pagination</CardTitle>
+          <CardDescription>Popover date picker plus navigation pagination.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-5">
+          <DatePicker value={date} onValueChange={setDate} />
+          <Pagination page={page} pageCount={9} onPageChange={setPage} showSummary totalCount={90} pageSize={10} />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/sections/CategorySection.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { getModuleKey, getModuleLabel, getModuleSourcePath, type RegistryGroup } from "@/showcase/data/registry"
+
+type CategorySectionProps = {
+  group: RegistryGroup
+  onSelect: (key: string) => void
+}
+
+export function CategorySection({ group, onSelect }: CategorySectionProps) {
+  return (
+    <section className="grid gap-4">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <CardTitle>{group.name}</CardTitle>
+              <CardDescription>{group.components.length} registry component. Sidebar ichidan bittasini tanlab alohida test qilasiz.</CardDescription>
+            </div>
+            <Badge label={`${group.components.length} components`} variant="secondary" />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {group.components.map((component) => (
+              <button
+                key={component.name}
+                type="button"
+                className="rounded-lg border bg-card p-4 text-left transition hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={() => onSelect(getModuleKey(group.name, component.name))}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="font-medium">{getModuleLabel(component.name)}</div>
+                  <Badge label={component.status} status={component.status === "stable" ? "success" : "info"} variant="soft" />
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">{getModuleSourcePath(component)}</div>
+              </button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      <div className="flex justify-end">
+        <Button variant="outline" onClick={() => onSelect("overview")}>Back to overview</Button>
+      </div>
+    </section>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/sections/ComponentDetailSection.tsx

@@ -0,0 +1,68 @@
+import { FolderOpenIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { getModuleLabel, getModuleSourcePath, type RegistryComponent, type RegistryGroup } from "@/showcase/data/registry"
+import { CalendarSection } from "@/showcase/sections/CalendarSection"
+import { CoreUiSection } from "@/showcase/sections/CoreUiSection"
+import { DataTableSection } from "@/showcase/sections/DataTableSection"
+import { FormsSection } from "@/showcase/sections/FormsSection"
+import { KanbanSection } from "@/showcase/sections/KanbanSection"
+import { OverlaySection } from "@/showcase/sections/OverlaySection"
+import { PatternsSection } from "@/showcase/sections/PatternsSection"
+import { WizardSection } from "@/showcase/sections/WizardSection"
+
+type ComponentDetailSectionProps = {
+  group: RegistryGroup
+  component: RegistryComponent
+}
+
+function RelatedPreview({ groupName, componentName }: { groupName: string; componentName: string }) {
+  if (groupName === "ui" || ["actions", "command"].includes(groupName)) return <CoreUiSection />
+  if (groupName === "inputs" || groupName === "form" || groupName === "feedback") return <FormsSection />
+  if (groupName === "data-table") return <DataTableSection />
+  if (groupName === "display" && componentName === "kanban") return <KanbanSection />
+  if (groupName === "calendar" || groupName === "navigation") return <CalendarSection />
+  if (groupName === "overlay") return <OverlaySection />
+  if (groupName === "wizard") return <WizardSection />
+  if (["patterns", "layout", "modern", "notifications", "filters", "upload", "charts", "dnd", "display"].includes(groupName)) {
+    return <PatternsSection />
+  }
+
+  return <PatternsSection />
+}
+
+export function ComponentDetailSection({ group, component }: ComponentDetailSectionProps) {
+  const sourcePath = getModuleSourcePath(component)
+
+  return (
+    <section className="grid gap-5">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <CardTitle>{getModuleLabel(component.name)}</CardTitle>
+              <CardDescription>Tanlangan registry component test paneli.</CardDescription>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Badge label={group.name} status="info" />
+              <Badge label={component.status} status={component.status === "stable" ? "success" : "info"} />
+              <Badge label="local source" status="success" />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="grid gap-3 text-sm">
+          <div className="flex items-center gap-2 rounded-lg border bg-muted/30 p-3">
+            <FolderOpenIcon className="size-4 text-muted-foreground" />
+            <code className="min-w-0 break-all">{sourcePath}</code>
+          </div>
+          <p className="text-muted-foreground">
+            Sidebar orqali har bir registry component alohida tanlanadi. Quyidagi preview shu component tegishli category test surfaceini ko‘rsatadi.
+          </p>
+        </CardContent>
+      </Card>
+
+      <RelatedPreview groupName={group.name} componentName={component.name} />
+    </section>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/sections/CoreUiSection.tsx

@@ -0,0 +1,100 @@
+import { ChevronRightIcon, CommandIcon, SearchIcon, SparklesIcon } from "lucide-react"
+
+import { AvatarGroup } from "@/components/display/avatar"
+import { Progress } from "@/components/display/progress"
+import { Tag, TagGroup } from "@/components/display/tag"
+import { Alert } from "@/components/feedback/alert"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Select } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { registryGroups } from "@/showcase/data/registry"
+
+export function CoreUiSection() {
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1.35fr_0.65fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle>UI controls and variants</CardTitle>
+          <CardDescription>Button, Badge, Card, Input, Select, Checkbox, Switch, Tabs, Textarea.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-5">
+          <div className="flex flex-wrap gap-2">
+            <Button leftIcon={<SparklesIcon className="size-4" />}>Default</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="warning">Warning</Button>
+            <Button variant="destructive">Destructive</Button>
+            <Button iconOnly aria-label="Command"><CommandIcon className="size-4" /></Button>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge label="default" />
+            <Badge label="info" status="info" />
+            <Badge label="success" status="success" />
+            <Badge label="warning" status="warning" />
+            <Badge label="danger" status="danger" removable />
+          </div>
+          <div className="grid gap-3 md:grid-cols-3">
+            <Input kind="search" placeholder="Search components" searchIcon={<SearchIcon className="size-4" />} />
+            <Input kind="password" placeholder="Password input" />
+            <Select
+              placeholder="Pick category"
+              searchable
+              clearable
+              options={registryGroups.slice(0, 8).map((group) => ({
+                label: group.name,
+                value: group.name,
+                description: `${group.components.length} components`,
+              }))}
+            />
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <Textarea defaultValue="Textarea with helper text, counter and Tembro theme." helperText="Textarea helper text" maxLength={140} showCharacterCount />
+            <div className="grid content-start gap-4 rounded-lg border bg-muted/25 p-4">
+              <Switch defaultChecked label="Enable preview" description="Switch with label and description" />
+              <div className="flex items-center gap-3">
+                <Checkbox defaultChecked />
+                <span className="text-sm">Checkbox selected state</span>
+              </div>
+              <AvatarGroup
+                items={[
+                  { key: "az", name: "Azamat Jurayev", status: "online" },
+                  { key: "qa", name: "QA Tester", status: "busy" },
+                  { key: "ux", name: "UX Review", status: "away" },
+                  { key: "tm", name: "Tembro Maintainer", status: "offline" },
+                ]}
+                max={3}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <Card
+        variant="elevated"
+        tone="info"
+        eyebrow="Card surface props"
+        title="Surface API"
+        description="title, description, badge, action, content, footer props."
+        badge={<Badge label="styled" status="info" />}
+        action={<Button size="sm" variant="outline" rightIcon={<ChevronRightIcon className="size-4" />}>Open</Button>}
+        content={
+          <div className="grid gap-4">
+            <Progress value={78} label="Style coverage" showValue tone="info" />
+            <TagGroup>
+              <Tag tone="success" selected>Selected</Tag>
+              <Tag tone="info">Info</Tag>
+              <Tag tone="warning" removable>Removable</Tag>
+            </TagGroup>
+            <Alert tone="success" title="Styled by Tembro tokens" description="This card uses copied local component code." />
+          </div>
+        }
+        footer={<span className="text-sm text-muted-foreground">No Vite starter component here.</span>}
+      />
+    </div>
+  )
+}