tembro 3.1.9 → 3.1.11

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

@@ -1,5 +1,45 @@
+import { useMemo } from "react"
+import {
+  CalendarDaysIcon,
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  CommandIcon,
+  FolderIcon,
+  LayoutDashboardIcon,
+  ListChecksIcon,
+  SearchIcon,
+  SettingsIcon,
+  SparklesIcon,
+  UsersIcon,
+} from "lucide-react"
+
+import { KanbanBoard, type KanbanColumn } from "@/components/display/kanban"
+import { Progress, ProgressCard } from "@/components/display/progress"
+import { StatusLegend } from "@/components/display/status-legend"
+import { Tag, TagGroup } from "@/components/display/tag"
+import { Timeline } from "@/components/display/timeline"
+import { Alert } from "@/components/feedback/alert"
+import { LoadingState } from "@/components/feedback/loading-state"
+import { Pagination } from "@/components/navigation/pagination"
+import { EmptyState } from "@/components/patterns/empty-state"
 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 { Divider } from "@/components/ui/divider"
+import { Input } from "@/components/ui/input"
+import { Kbd } from "@/components/ui/kbd"
+import { RadioGroup } from "@/components/ui/radio-group"
+import { ScrollBox } from "@/components/ui/scroll-box"
+import { SegmentedControl } from "@/components/ui/segmented-control"
+import { Select } from "@/components/ui/select"
+import { Skeleton, SkeletonCard, SkeletonText } from "@/components/ui/skeleton"
+import { Spinner } from "@/components/ui/spinner"
+import { Switch } from "@/components/ui/switch"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { Sidebar } from "@/components/layout/app-sidebar"
 import type { RegistryComponent, RegistryGroup } from "@/showcase/data/registry"
 import { CalendarSection } from "@/showcase/sections/CalendarSection"
 import { CoreUiSection } from "@/showcase/sections/CoreUiSection"
@@ -15,17 +55,239 @@ type ComponentLivePreviewProps = {
   component: RegistryComponent
 }
 
-function getPreviewLabel(groupName: string, componentName: string) {
-  if (componentName === "kanban") return "KanbanBoard"
-  if (componentName === "data-table") return "DataTable"
-  if (["calendar", "date-picker", "date-range-picker"].includes(componentName)) return "Calendar and date pickers"
-  if (["drawer", "confirm-dialog", "alert-dialog", "dialog"].includes(componentName)) return "Overlay controls"
-  if (["stepper", "wizard"].includes(componentName)) return "Stepper and Wizard"
-  if (["rating", "slider", "tag-input", "async-select", "color-picker", "signature-pad", "json-input", "time-picker"].includes(componentName)) return "Advanced input controls"
-  if (groupName === "ui") return "UI primitive controls"
-  if (groupName === "display") return "Display and status components"
-  if (groupName === "patterns") return "Pattern components"
-  return `${componentName} live surface`
+function SourcePill({ component }: { component: RegistryComponent }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/35 px-3 py-2 text-xs text-muted-foreground">
+      <span className="font-medium text-foreground">Direct local import</span>
+      <code className="rounded bg-background px-1.5 py-0.5">{component.sourcePath}</code>
+    </div>
+  )
+}
+
+function ButtonPreview() {
+  return (
+    <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 loading loadingLabel="Loading" />
+      <Button iconOnly aria-label="Command">
+        <CommandIcon className="size-4" />
+      </Button>
+    </div>
+  )
+}
+
+function InputPreview() {
+  return (
+    <div className="grid gap-3 md:grid-cols-2">
+      <Input placeholder="Text input" defaultValue="Tembro input" />
+      <Input kind="search" placeholder="Search input" searchIcon={<SearchIcon className="size-4" />} />
+      <Input kind="password" placeholder="Password input" defaultValue="secret" />
+      <Input kind="number" aria-label="Number input" defaultValue={42} />
+    </div>
+  )
+}
+
+function SelectPreview() {
+  return (
+    <Select
+      placeholder="Select component"
+      searchable
+      clearable
+      options={[
+        { label: "Button", value: "button", description: "ui/button" },
+        { label: "Kanban", value: "kanban", description: "display/kanban" },
+        { label: "DataTable", value: "data-table", description: "data-table/data-table" },
+      ]}
+    />
+  )
+}
+
+function TablePreview() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Component</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Group</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {[
+          ["sidebar", "stable", "layout"],
+          ["kanban", "preview", "display"],
+          ["button", "stable", "ui"],
+        ].map(([name, status, group]) => (
+          <TableRow key={name}>
+            <TableCell>{name}</TableCell>
+            <TableCell>
+              <Badge label={status} status={status === "stable" ? "success" : "info"} />
+            </TableCell>
+            <TableCell>{group}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+function TabsPreview() {
+  return (
+    <Tabs defaultValue="preview">
+      <TabsList>
+        <TabsTrigger value="preview">Preview</TabsTrigger>
+        <TabsTrigger value="props">Props</TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview" className="rounded-lg border bg-muted/25 p-4">
+        TabsContent rendered from local tabs component.
+      </TabsContent>
+      <TabsContent value="props" className="rounded-lg border bg-muted/25 p-4">
+        Root, List, Trigger and Content exports are active.
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+function KanbanPreview() {
+  const columns = useMemo<KanbanColumn[]>(
+    () => [
+      {
+        key: "todo",
+        title: "Todo",
+        count: 2,
+        cards: [
+          { key: "button", title: "Button", description: "variants, size, iconOnly", meta: <Badge label="ui" /> },
+          { key: "sidebar", title: "Sidebar", description: "navigation surface", meta: <Badge label="layout" /> },
+        ],
+      },
+      {
+        key: "testing",
+        title: "Testing",
+        count: 2,
+        cards: [
+          { key: "kanban", title: "KanbanBoard", description: "drag and drop columns", meta: <Badge status="info" label="dnd" /> },
+          { key: "datatable", title: "DataTable", description: "search and pagination", meta: <Badge status="warning" label="table" /> },
+        ],
+      },
+      {
+        key: "ready",
+        title: "Ready",
+        count: 1,
+        cards: [{ key: "theme", title: "Theme tokens", description: "local styles loaded", meta: <Badge status="success" label="ready" /> }],
+      },
+    ],
+    []
+  )
+
+  return <KanbanBoard defaultColumns={columns} />
+}
+
+function SidebarPreview() {
+  return (
+    <div className="min-h-[430px] overflow-hidden rounded-xl border bg-background">
+      <Sidebar
+        responsive={false}
+        width="18rem"
+        header={
+          <div className="grid gap-1 px-1">
+            <div className="font-semibold">Tembro</div>
+            <div className="text-xs text-muted-foreground">Local sidebar component</div>
+          </div>
+        }
+        items={[
+          {
+            key: "workspace",
+            label: "Workspace",
+            sectionLabel: "Main",
+            icon: <LayoutDashboardIcon className="size-4" />,
+            active: true,
+            badge: <Badge label="live" status="success" />,
+          },
+          { key: "components", label: "Components", icon: <FolderIcon className="size-4" />, defaultExpanded: true, items: [
+            { key: "button", label: "button", icon: <CheckCircle2Icon className="size-4" /> },
+            { key: "kanban", label: "kanban", icon: <ListChecksIcon className="size-4" /> },
+            { key: "data-table", label: "data-table", icon: <UsersIcon className="size-4" /> },
+          ] },
+          { key: "calendar", label: "Calendar", icon: <CalendarDaysIcon className="size-4" /> },
+          { key: "settings", label: "Settings", icon: <SettingsIcon className="size-4" /> },
+        ]}
+        footerAccount={{
+          label: "Azamat",
+          description: "QA workspace",
+        }}
+      />
+    </div>
+  )
+}
+
+function DisplayPreview() {
+  return (
+    <div className="grid items-start gap-4 lg:grid-cols-2">
+      <ProgressCard title="ProgressCard" description="display/progress" value={72} tone="success" />
+      <StatusLegend
+        title="StatusLegend"
+        items={[
+          { key: "ready", label: "Ready", tone: "success" },
+          { key: "testing", label: "Testing", tone: "info" },
+          { key: "blocked", label: "Blocked", tone: "danger" },
+        ]}
+      />
+      <Timeline
+        items={[
+          { key: "init", title: "Init", description: "CLI scaffold", tone: "success" },
+          { key: "add", title: "Add components", description: "Registry copied", tone: "info" },
+          { key: "test", title: "Browser test", description: "Screenshot validation", tone: "warning" },
+        ]}
+      />
+      <TagGroup>
+        <Tag tone="success" selected>selected</Tag>
+        <Tag tone="info">info</Tag>
+        <Tag tone="warning" removable>removable</Tag>
+      </TagGroup>
+    </div>
+  )
+}
+
+function UiPreview({ name }: { name: string }) {
+  if (name === "button") return <ButtonPreview />
+  if (name === "input") return <InputPreview />
+  if (name === "textarea") return <Textarea defaultValue="Textarea component with helper text and character count." helperText="helperText prop" maxLength={120} showCharacterCount />
+  if (name === "checkbox") return <label className="flex items-center gap-3 text-sm"><Checkbox defaultChecked />Checkbox checked state</label>
+  if (name === "switch") return <Switch defaultChecked label="Switch enabled" description="Switch label and description props." />
+  if (name === "badge") return <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>
+  if (name === "card") return <Card variant="elevated" tone="info" title="Card title prop" description="Card description prop" badge={<Badge label="badge" />} action={<Button size="sm" variant="outline" rightIcon={<ChevronRightIcon className="size-4" />}>Action</Button>} content={<Progress value={64} label="Card content" showValue />} footer="Card footer prop" />
+  if (name === "skeleton") return <div className="grid gap-3 md:grid-cols-2"><SkeletonCard /><div className="grid content-start gap-3"><Skeleton className="h-10 w-40" /><SkeletonText rows={4} /></div></div>
+  if (name === "tabs") return <TabsPreview />
+  if (name === "select") return <SelectPreview />
+  if (name === "table") return <TablePreview />
+  if (name === "segmented-control") return <SegmentedControl defaultValue="desktop" options={[{ label: "Desktop", value: "desktop" }, { label: "Tablet", value: "tablet" }, { label: "Mobile", value: "mobile" }]} />
+  if (name === "radio-group") return <RadioGroup defaultValue="stable" options={[{ label: "Stable", value: "stable" }, { label: "Preview", value: "preview" }, { label: "Experimental", value: "experimental" }]} />
+  if (name === "kbd") return <div className="flex flex-wrap gap-2"><Kbd>Ctrl</Kbd><Kbd>K</Kbd><Kbd>Enter</Kbd></div>
+  if (name === "scroll-box") return <ScrollBox className="h-36 rounded-lg border p-4">{Array.from({ length: 12 }, (_, index) => <p key={index} className="text-sm">Scrollable local row {index + 1}</p>)}</ScrollBox>
+  if (name === "divider") return <div className="grid gap-4"><span>Above divider</span><Divider /><span>Below divider</span></div>
+  if (name === "spinner") return <div className="flex items-center gap-3"><Spinner /><span className="text-sm text-muted-foreground">Spinner component</span></div>
+  return <CoreUiSection />
+}
+
+function DirectComponentSurface({ group, component }: ComponentLivePreviewProps) {
+  if (component.name === "kanban") return <KanbanPreview />
+  if (component.name === "data-table") return <DataTableSection />
+  if (component.name === "sidebar") return <SidebarPreview />
+  if (group.name === "ui") return <UiPreview name={component.name} />
+  if (group.name === "inputs") return <FormsSection />
+  if (group.name === "form") return <FormsSection />
+  if (group.name === "display") return <DisplayPreview />
+  if (group.name === "calendar" || group.name === "navigation") return group.name === "navigation" ? <Pagination page={2} pageCount={8} onPageChange={() => undefined} /> : <CalendarSection />
+  if (group.name === "feedback") return component.name === "alert" ? <Alert tone="success" title="Alert component" description="Rendered from feedback/alert." /> : <LoadingState label="LoadingState" description="Rendered from feedback/loading-state." />
+  if (group.name === "patterns") return <EmptyState title="EmptyState component" description="Rendered from patterns/empty-state." primaryAction={{ label: "Create item" }} secondaryAction={{ label: "Reset" }} />
+  if (group.name === "wizard") return <WizardSection />
+  if (group.name === "overlay") return <OverlaySection />
+  return <PatternsSection />
 }
 
 function RenderLiveSurface({ group, component }: ComponentLivePreviewProps) {
@@ -46,8 +308,8 @@ export function ComponentLivePreview({ group, component }: ComponentLivePreviewP
         <CardHeader>
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div>
-              <CardTitle>Live preview: {component.name}</CardTitle>
-              <CardDescription>{getPreviewLabel(group.name, component.name)} rendered from copied local source.</CardDescription>
+              <CardTitle>Component preview: {component.name}</CardTitle>
+              <CardDescription>{component.name} is rendered from the copied local component file.</CardDescription>
             </div>
             <div className="flex flex-wrap gap-2">
               <Badge label={group.name} status="info" />
@@ -55,6 +317,17 @@ export function ComponentLivePreview({ group, component }: ComponentLivePreviewP
             </div>
           </div>
         </CardHeader>
+        <CardContent className="grid gap-4">
+          <SourcePill component={component} />
+          <DirectComponentSurface group={group} component={component} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Related group surface</CardTitle>
+          <CardDescription>Same installed local components used together inside a full section.</CardDescription>
+        </CardHeader>
         <CardContent>
           <RenderLiveSurface group={group} component={component} />
         </CardContent>

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

@@ -16,7 +16,7 @@ import { registryGroups } from "@/showcase/data/registry"
 
 export function CoreUiSection() {
   return (
-    <div className="grid gap-4 xl:grid-cols-[1.35fr_0.65fr]">
+    <div className="grid items-start gap-4 xl:grid-cols-[1.35fr_0.65fr]">
       <Card>
         <CardHeader>
           <CardTitle>UI controls and variants</CardTitle>
@@ -53,7 +53,7 @@ export function CoreUiSection() {
               }))}
             />
           </div>
-          <div className="grid gap-4 md:grid-cols-2">
+          <div className="grid items-start 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" />

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

@@ -7,7 +7,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 
 export function FormsSection() {
   return (
-    <div className="grid gap-4 lg:grid-cols-3">
+    <div className="grid items-start gap-4 lg:grid-cols-3">
       <Card>
         <CardHeader>
           <CardTitle>Advanced inputs</CardTitle>

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

@@ -12,7 +12,7 @@ export function OverlaySection() {
   const [confirmOpen, setConfirmOpen] = useState(false)
 
   return (
-    <div className="grid gap-4 lg:grid-cols-3">
+    <div className="grid items-start gap-4 lg:grid-cols-3">
       <Card>
         <CardHeader>
           <CardTitle>Drawer</CardTitle>

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

@@ -4,7 +4,7 @@ import { EmptyState } from "@/components/patterns/empty-state"
 
 export function PatternsSection() {
   return (
-    <div className="grid gap-4 lg:grid-cols-3">
+    <div className="grid items-start 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."

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

@@ -8,7 +8,7 @@ export function VerificationSection() {
   return (
     <section>
       <SectionTitle title="Verification" description="Package va project setup holati." />
-      <div className="grid gap-4 md:grid-cols-3">
+      <div className="grid items-start 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" />

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

@@ -9,7 +9,7 @@ export function WizardSection() {
   const [step, setStep] = useState("test")
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[1fr_0.8fr]">
+    <div className="grid items-start gap-4 lg:grid-cols-[1fr_0.8fr]">
       <Card>
         <CardHeader>
           <CardTitle>Stepper</CardTitle>

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.9",
+  "version": "3.1.11",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [
@@ -161,7 +161,10 @@
       "wizard-kit",
       "all"
     ],
-    "charts": []
+    "charts": [
+      "charts",
+      "progress-circle"
+    ]
   },
   "recommended": [
     "button",