tembro 3.1.6 → 3.1.8

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.6",
+  "version": "3.1.8",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [