tembro 3.1.7 → 3.1.8

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>
+  )
+}

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

@@ -0,0 +1,45 @@
+import type { ColumnDef } from "@tanstack/react-table"
+
+import { DataTable } from "@/components/data-table/data-table"
+import { Badge } from "@/components/ui/badge"
+import { componentRows, type ComponentRow } from "@/showcase/data/registry"
+
+const columns: ColumnDef<ComponentRow>[] = [
+  { accessorKey: "component", header: "Component" },
+  { accessorKey: "category", header: "Category" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      const status = row.original.status
+      return (
+        <Badge
+          status={status === "Ready" ? "success" : status === "Testing" ? "info" : "warning"}
+          label={status}
+          variant="soft"
+        />
+      )
+    },
+  },
+  { accessorKey: "props", header: "Props shown" },
+]
+
+export function DataTableSection() {
+  return (
+    <DataTable
+      columns={columns}
+      data={componentRows}
+      title="Component audit"
+      description="DataTable with search, column visibility, row actions, refresh, export and pagination features."
+      features={{ search: true, columnVisibility: true, rowActions: true, refresh: true, export: true }}
+      search={{ placeholder: "Search table", clearable: true }}
+      pagination={{ pageIndex: 0, pageSize: 5, rowCount: componentRows.length, showPageSize: true }}
+      rowActions={() => [
+        { key: "inspect", label: "Inspect", onSelect: () => undefined },
+        { key: "mark-ready", label: "Mark ready", onSelect: () => undefined },
+      ]}
+      onRefresh={() => undefined}
+      onExport={() => undefined}
+    />
+  )
+}

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

@@ -0,0 +1,26 @@
+import { ProgressCard } from "@/components/display/progress"
+import { LoadingState } from "@/components/feedback/loading-state"
+import { Rating } from "@/components/inputs/rating"
+import { RangeSlider, Slider } from "@/components/inputs/slider"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export function FormsSection() {
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Advanced inputs</CardTitle>
+          <CardDescription>Rating and sliders.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-5">
+          <Rating defaultValue={4} />
+          <Slider defaultValue={72} label="Quality" showValue formatValue={(value) => `${value}%`} />
+          <RangeSlider defaultValue={[20, 80]} label="Range" showValue />
+        </CardContent>
+      </Card>
+      <ProgressCard title="Form completeness" description="input, select, switch, textarea" value={86} tone="success" footer={<Badge label="forms" status="success" />} />
+      <LoadingState label="Loading state" description="Spinner/skeleton/progress state component." />
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tag } from "@/components/display/tag"
+import { registryGroups } from "@/showcase/data/registry"
+import { SectionTitle } from "@/showcase/shared/SectionTitle"
+
+export function InventorySection() {
+  return (
+    <section>
+      <SectionTitle
+        title="Complete Registry Component Inventory"
+        description="Bu yerda `tembro add <name>` bilan chaqiriladigan aniq component nomlari ko‘rinadi."
+      />
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        {registryGroups.map((group) => (
+          <Card key={group.name} variant="outline" className="min-w-0">
+            <CardHeader>
+              <div className="flex items-center justify-between gap-3">
+                <CardTitle>{group.name}</CardTitle>
+                <Badge label={group.components.length} variant="secondary" />
+              </div>
+              <CardDescription>src/components/{group.name}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-2">
+                {group.components.map((component) => (
+                  <Tag key={component.name} size="sm" tone="neutral">
+                    {component.name}
+                  </Tag>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { useMemo } from "react"
+
+import { KanbanBoard, type KanbanColumn } from "@/components/display/kanban"
+import { Badge } from "@/components/ui/badge"
+
+export function KanbanSection() {
+  const kanbanColumns = useMemo<KanbanColumn[]>(
+    () => [
+      {
+        key: "todo",
+        title: "Todo",
+        count: 2,
+        cards: [
+          { key: "sidebar", title: "Sidebar", description: "Navigation, badges, collapsed state", meta: <Badge label="layout" /> },
+          { key: "upload", title: "Upload", description: "file-upload and image-upload components", meta: <Badge label="upload" /> },
+        ],
+      },
+      {
+        key: "doing",
+        title: "Doing",
+        count: 2,
+        cards: [
+          { key: "kanban", title: "Kanban board", description: "Drag cards between columns", meta: <Badge status="info" label="dnd" /> },
+          { key: "wizard", title: "Wizard flow", description: "Stepper and wizard controls", meta: <Badge status="warning" label="flow" /> },
+        ],
+      },
+      {
+        key: "done",
+        title: "Done",
+        count: 3,
+        cards: [
+          { key: "ui", title: "UI controls", description: "Button, input, select, tabs, card", meta: <Badge status="success" label="ready" /> },
+          { key: "calendar", title: "Calendar", description: "Calendar and DatePicker", meta: <Badge status="success" label="ready" /> },
+          { key: "table", title: "DataTable", description: "Search, actions, pagination", meta: <Badge status="success" label="ready" /> },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <KanbanBoard defaultColumns={kanbanColumns} />
+}

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

@@ -0,0 +1,62 @@
+import { useState } from "react"
+
+import { StatusLegend } from "@/components/display/status-legend"
+import { Alert } from "@/components/feedback/alert"
+import { ConfirmDialog } from "@/components/overlay/confirm-dialog"
+import { Drawer, DrawerCloseButton } from "@/components/overlay/drawer"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export function OverlaySection() {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Drawer</CardTitle>
+          <CardDescription>Right-side overlay component.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Drawer
+            open={drawerOpen}
+            onOpenChange={setDrawerOpen}
+            trigger={<Button onClick={() => setDrawerOpen(true)}>Open drawer</Button>}
+            title="Drawer preview"
+            description="Overlay/drawer module rendered from local Tembro code."
+            footer={<DrawerCloseButton>Close drawer</DrawerCloseButton>}
+          >
+            <StatusLegend
+              title="Drawer content"
+              items={[
+                { key: "one", label: "Overlay API", count: 3, tone: "info" },
+                { key: "two", label: "Dialog base", count: 1, tone: "success" },
+              ]}
+            />
+          </Drawer>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>ConfirmDialog</CardTitle>
+          <CardDescription>Controlled confirm modal.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ConfirmDialog
+            open={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            trigger={<Button variant="outline" onClick={() => setConfirmOpen(true)}>Open confirm</Button>}
+            title="Confirm action"
+            description="This is a Tembro ConfirmDialog."
+            confirmText="Confirm"
+            cancelText="Cancel"
+          >
+            <p className="text-sm text-muted-foreground">Dialog content area is rendered and styled by the component.</p>
+          </ConfirmDialog>
+        </CardContent>
+      </Card>
+      <Alert tone="warning" title="Overlay components" description="alert-dialog, confirm-dialog and drawer are installed. Dialog primitives are under ui/dialog." />
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { StatusLegend } from "@/components/display/status-legend"
+import { Timeline } from "@/components/display/timeline"
+import { EmptyState } from "@/components/patterns/empty-state"
+
+export function PatternsSection() {
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <EmptyState
+        title="EmptyState pattern"
+        description="Pattern components are installed: resource pages, settings pages, page toolbar, data view and form builder."
+        primaryAction={{ label: "Primary action" }}
+        secondaryAction={{ label: "Secondary action", variant: "outline" }}
+      />
+      <StatusLegend
+        title="StatusLegend"
+        description="Display module with counts."
+        orientation="grid"
+        items={[
+          { key: "ready", label: "Ready", description: "Can be tested", count: 62, tone: "success" },
+          { key: "large", label: "Large components", description: "sidebar, kanban, data-table", count: 8, tone: "info" },
+          { key: "forms", label: "Form components", description: "inputs and shells", count: 18, tone: "warning" },
+          { key: "overlay", label: "Overlay components", description: "dialog, drawer", count: 3, tone: "default" },
+        ]}
+      />
+      <Timeline
+        items={[
+          { key: "init", title: "tembro init", description: "Project initialized", time: "done", tone: "success" },
+          { key: "add", title: "tembro add", description: "All registry entries copied", time: "done", tone: "success" },
+          { key: "show", title: "Workbench", description: "Visible app surface", time: "now", tone: "info" },
+        ]}
+        pending
+        pendingLabel="Manual component QA"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { CheckCircle2Icon, Layers3Icon, ShieldCheckIcon } from "lucide-react"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { moduleCount, registryGroups } from "@/showcase/data/registry"
+import { SectionTitle } from "@/showcase/shared/SectionTitle"
+
+export function VerificationSection() {
+  return (
+    <section>
+      <SectionTitle title="Verification" description="Package va project setup holati." />
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardContent className="flex items-start gap-3 pt-6">
+            <CheckCircle2Icon className="mt-1 size-5 text-emerald-600" />
+            <div>
+              <div className="font-medium">Doctor passed</div>
+              <p className="text-sm text-muted-foreground">Tembro theme tokens recognized.</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="flex items-start gap-3 pt-6">
+            <Layers3Icon className="mt-1 size-5 text-blue-600" />
+            <div>
+              <div className="font-medium">All categories listed</div>
+              <p className="text-sm text-muted-foreground">{registryGroups.length} groups and {moduleCount} registry components.</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="flex items-start gap-3 pt-6">
+            <ShieldCheckIcon className="mt-1 size-5 text-amber-600" />
+            <div>
+              <div className="font-medium">Build checked</div>
+              <p className="text-sm text-muted-foreground">Vite starter screen removed.</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,44 @@
+import { useState } from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Stepper } from "@/components/wizard/stepper"
+import { Wizard } from "@/components/wizard/wizard"
+import { wizardSteps } from "@/showcase/data/registry"
+
+export function WizardSection() {
+  const [step, setStep] = useState("test")
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_0.8fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Stepper</CardTitle>
+          <CardDescription>Horizontal and clickable stepper.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Stepper steps={wizardSteps} currentStep={step} onStepChange={setStep} />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Wizard</CardTitle>
+          <CardDescription>Wizard footer, previous/next and content slot.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Wizard
+            steps={wizardSteps}
+            currentStep={step}
+            onStepChange={setStep}
+            onPrevious={() => setStep("add")}
+            onNext={() => setStep("test")}
+            onFinish={() => setStep("test")}
+          >
+            <div className="rounded-lg border bg-muted/25 p-4 text-sm">
+              Current step: <span className="font-semibold">{step}</span>
+            </div>
+          </Wizard>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/shared/SectionTitle.tsx

@@ -0,0 +1,13 @@
+type SectionTitleProps = {
+  title: string
+  description: string
+}
+
+export function SectionTitle({ title, description }: SectionTitleProps) {
+  return (
+    <div className="mb-4">
+      <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+      <p className="mt-1 max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p>
+    </div>
+  )
+}

package/registry.json

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