tembro 3.1.10 → 3.1.11

package/packages/cli/vendor/src/components/charts/demo.tsx

@@ -0,0 +1,5 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const chartsShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("charts", "ChartFrame", "display", "Chart primitives for dashboard metrics, distribution and trend views.", "ChartFrame"),
+])

package/packages/cli/vendor/src/components/data-table/data-table.tsx

@@ -28,9 +28,10 @@ import { DataTablePagination, type DataTablePaginationProps } from "@/components
 import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
 import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
 import { DataState, type DataStateProps } from "@/components/display/data-state"
-import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
-import { Button } from "@/components/ui/button"
-import { Input, type InputSearchProps } from "@/components/ui/input"
+import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
+import { Button } from "@/components/ui/button"
+import { Input, type InputSearchProps } from "@/components/ui/input"
+import { useIsMobile } from "@/hooks/use-is-mobile"
 import {
   Table,
   TableBody,
@@ -42,7 +43,8 @@ import {
 import { cn } from "@/lib/utils"
 
 export type DataTableDensity = "compact" | "default" | "comfortable"
-export type DataTableLoadingVariant = "skeleton" | "state"
+export type DataTableLoadingVariant = "skeleton" | "state"
+export type DataTableMobileLayout = "auto" | "cards" | "scroll"
 
 export type DataTableVirtualizationRange = {
   startIndex: number
@@ -139,9 +141,10 @@ export type DataTableProps<TData, TValue = unknown> = Omit<
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>
   rowSelection?: RowSelectionState
   onRowSelectionChange?: OnChangeFn<RowSelectionState>
-  enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
-  renderMobileCard?: (row: Row<TData>) => React.ReactNode
-  onRowClick?: (row: Row<TData>) => void
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
+  renderMobileCard?: (row: Row<TData>) => React.ReactNode
+  mobileLayout?: DataTableMobileLayout
+  onRowClick?: (row: Row<TData>) => void
   onRowDoubleClick?: (row: Row<TData>) => void
   getRowDisabled?: (row: Row<TData>) => boolean
   density?: DataTableDensity
@@ -200,9 +203,18 @@ function getCellClassName<TData>(
   return typeof cellClassName === "function" ? cellClassName(cell) : cellClassName
 }
 
-function isEmptyCellContent(content: React.ReactNode) {
-  return content === null || content === undefined || content === ""
-}
+function isEmptyCellContent(content: React.ReactNode) {
+  return content === null || content === undefined || content === ""
+}
+
+function getMobileCellLabel<TData>(cell: Cell<TData, unknown>) {
+  const header = cell.column.columnDef.header
+
+  if (typeof header === "string") return header
+  if (typeof header === "number") return String(header)
+
+  return cell.column.id === "actions" ? "Actions" : cell.column.id
+}
 
 function DataTable<TData, TValue = unknown>({
   className,
@@ -237,9 +249,10 @@ function DataTable<TData, TValue = unknown>({
   onColumnVisibilityChange,
   rowSelection,
   onRowSelectionChange,
-  enableRowSelection,
-  renderMobileCard,
-  onRowClick,
+  enableRowSelection,
+  renderMobileCard,
+  mobileLayout = "auto",
+  onRowClick,
   onRowDoubleClick,
   getRowDisabled,
   density = "default",
@@ -449,8 +462,10 @@ function DataTable<TData, TValue = unknown>({
       defaultSelectionActions
   )
   const hasToolbar = Boolean(resolvedToolbar || resolvedToolbarProps || hasDefaultToolbarContent)
-  const showPagination = Boolean(paginationConfig && !paginationConfig.hidden)
-  const shouldRenderSkeleton = isLoading && loadingVariant === "skeleton"
+  const showPagination = Boolean(paginationConfig && !paginationConfig.hidden)
+  const shouldRenderSkeleton = isLoading && loadingVariant === "skeleton"
+  const isMobileViewport = useIsMobile()
+  const shouldUseMobileCards = mobileLayout !== "scroll" && isMobileViewport
 
   const renderVirtualSpacer = (key: string, height: number) =>
     height > 0 ? (
@@ -503,7 +518,7 @@ function DataTable<TData, TValue = unknown>({
     <DataState status="empty" variant="plain" {...emptyState} />
   ) : null
 
-  const renderDataRow = (row: Row<TData>, rowIndex: number, virtualRow?: VirtualItem) => {
+  const renderDataRow = (row: Row<TData>, rowIndex: number, virtualRow?: VirtualItem) => {
     const rowDisabled = getRowDisabled?.(row) ?? false
 
     return (
@@ -566,7 +581,58 @@ function DataTable<TData, TValue = unknown>({
         ) : null}
       </React.Fragment>
     )
-  }
+  }
+
+  const renderDefaultMobileCard = (row: Row<TData>) => {
+    const rowDisabled = getRowDisabled?.(row) ?? false
+    const cells = row.getVisibleCells()
+
+    return (
+      <article
+        key={row.id}
+        data-slot="data-table-mobile-card"
+        data-state={row.getIsSelected() ? "selected" : undefined}
+        data-disabled={rowDisabled || undefined}
+        className={cn(
+          "grid gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-3 shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))]",
+          onRowClick && !rowDisabled && "cursor-pointer transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)]",
+          rowDisabled && "pointer-events-none opacity-55",
+          getRowClassName(row, rowClassName)
+        )}
+        role={onRowClick && !rowDisabled ? "button" : undefined}
+        tabIndex={onRowClick && !rowDisabled ? 0 : undefined}
+        onClick={() => {
+          if (!rowDisabled) onRowClick?.(row)
+        }}
+        onKeyDown={(event) => {
+          if (event.target !== event.currentTarget || rowDisabled || !onRowClick) return
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault()
+            onRowClick(row)
+          }
+        }}
+      >
+        {cells.map((cell) => {
+          const renderedCell = flexRender(cell.column.columnDef.cell, cell.getContext())
+
+          return (
+            <div
+              key={cell.id}
+              data-slot="data-table-mobile-cell"
+              className="grid grid-cols-[minmax(7rem,0.42fr)_minmax(0,1fr)] items-start gap-3 text-sm"
+            >
+              <span className="min-w-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                {getMobileCellLabel(cell)}
+              </span>
+              <div className="min-w-0 text-right text-foreground/92 [&>*]:ml-auto">
+                {isEmptyCellContent(renderedCell) ? cellFallback : renderedCell}
+              </div>
+            </div>
+          )
+        })}
+      </article>
+    )
+  }
 
   return (
     <div data-slot="data-table" className={cn("grid gap-3", className)} {...props}>
@@ -587,29 +653,33 @@ function DataTable<TData, TValue = unknown>({
           />
         ))}
 
-      {renderMobileCard && (
-        <div className="grid gap-3 md:hidden">
-          {stateContent ??
-            (shouldRenderSkeleton ? (
-              <LoadingState label="Loading data..." {...loadingState} />
-            ) : (
-              rows.map((row) => <React.Fragment key={row.id}>{renderMobileCard(row)}</React.Fragment>)
-            ))}
-        </div>
-      )}
-
-      <div
-        data-slot="data-table-wrapper"
-        data-density={density}
-        data-striped={striped || undefined}
-        data-bordered={bordered || undefined}
-        data-virtualized={virtualizationEnabled || undefined}
-        className={cn(
-          "overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur",
-          renderMobileCard && "hidden md:block",
-          tableWrapperClassName
-        )}
-      >
+      {shouldUseMobileCards && (
+        <div className="grid gap-3">
+          {stateContent ??
+            (shouldRenderSkeleton ? (
+              <LoadingState label="Loading data..." {...loadingState} />
+            ) : (
+              rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  {renderMobileCard ? renderMobileCard(row) : renderDefaultMobileCard(row)}
+                </React.Fragment>
+              ))
+            ))}
+        </div>
+      )}
+
+      {!shouldUseMobileCards && (
+      <div
+        data-slot="data-table-wrapper"
+        data-density={density}
+        data-striped={striped || undefined}
+        data-bordered={bordered || undefined}
+        data-virtualized={virtualizationEnabled || undefined}
+        className={cn(
+          "overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur",
+          tableWrapperClassName
+        )}
+      >
         <Table
           containerRef={tableScrollRef}
           containerStyle={
@@ -691,7 +761,8 @@ function DataTable<TData, TValue = unknown>({
             onPageSizeChange={paginationConfig.onPageSizeChange}
           />
         )}
-      </div>
+      </div>
+      )}
     </div>
   )
 }

package/packages/cli/vendor/src/components/display/kanban.tsx

@@ -413,10 +413,10 @@ function KanbanBoard({
         role="group"
         aria-label={ariaLabel}
         data-slot="kanban-board"
-        className={cn(
-          "grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2",
-          className
-        )}
+        className={cn(
+          "grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2",
+          className
+        )}
       >
         {renderedColumns.map((column) => (
           <KanbanColumnView

package/packages/cli/vendor/src/showcase/index.ts

@@ -1,6 +1,7 @@
 import { actionsShowcaseDemoRegistry } from "@/components/actions/demo"
-import { calendarShowcaseDemoRegistry } from "@/components/calendar/demo"
-import { dataTableShowcaseDemoRegistry } from "@/components/data-table/demo"
+import { calendarShowcaseDemoRegistry } from "@/components/calendar/demo"
+import { chartsShowcaseDemoRegistry } from "@/components/charts/demo"
+import { dataTableShowcaseDemoRegistry } from "@/components/data-table/demo"
 import { displayShowcaseDemoRegistry } from "@/components/display/demo"
 import { feedbackShowcaseDemoRegistry } from "@/components/feedback/demo"
 import { filtersShowcaseDemoRegistry } from "@/components/filters/demo"
@@ -32,8 +33,9 @@ export * from "./supplemental"
 
 export const showcaseDemoRegistry = {
   ...actionsShowcaseDemoRegistry,
-  ...calendarShowcaseDemoRegistry,
-  ...dataTableShowcaseDemoRegistry,
+  ...calendarShowcaseDemoRegistry,
+  ...chartsShowcaseDemoRegistry,
+  ...dataTableShowcaseDemoRegistry,
   ...displayShowcaseDemoRegistry,
   ...feedbackShowcaseDemoRegistry,
   ...filtersShowcaseDemoRegistry,

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.10"
+export const PACKAGE_LATEST_VERSION = "3.1.11"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

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

@@ -2,6 +2,7 @@ import type { ReactElement } from "react"
 
 import { actionsShowcaseDemoRegistry } from "@/components/actions/demo"
 import { calendarShowcaseDemoRegistry } from "@/components/calendar/demo"
+import { chartsShowcaseDemoRegistry } from "@/components/charts/demo"
 import { dataTableShowcaseDemoRegistry } from "@/components/data-table/demo"
 import { displayShowcaseDemoRegistry } from "@/components/display/demo"
 import { feedbackShowcaseDemoRegistry } from "@/components/feedback/demo"
@@ -57,6 +58,7 @@ const darkPanelClassName =
 const componentPreviewRegistry = {
   ...actionsShowcaseDemoRegistry,
   ...calendarShowcaseDemoRegistry,
+  ...chartsShowcaseDemoRegistry,
   ...dataTableShowcaseDemoRegistry,
   ...displayShowcaseDemoRegistry,
   ...feedbackShowcaseDemoRegistry,

package/packages/cli/vendor/src/showcase/render-registry-preview.tsx

@@ -16,11 +16,15 @@ import {
   Alert,
   AlertDialog,
   Badge,
+  BarChart,
   Button,
   ButtonGroup,
   Calendar,
+  ChartFrame,
+  ChartLegend,
   CommandPalette,
   DescriptionList,
+  DonutChart,
   Drawer,
   FileUpload,
   FilterBar,
@@ -333,6 +337,38 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
+  if (slug === "charts") {
+    const channelData = [
+      { label: "Organic", value: 42, color: "var(--aui-brand)" },
+      { label: "Paid", value: 28, color: "var(--aui-success)" },
+      { label: "Referral", value: 18, color: "var(--aui-warning)" },
+      { label: "Direct", value: 12, color: "var(--aui-danger)" },
+    ]
+
+    return (
+      <div className="grid items-start gap-4 lg:grid-cols-[1.2fr_0.8fr]">
+        <ChartFrame title="Pipeline by week" description="BarChart inside the shared chart frame.">
+          <BarChart
+            data={[
+              { label: "Mon", value: 18 },
+              { label: "Tue", value: 26 },
+              { label: "Wed", value: 21 },
+              { label: "Thu", value: 34 },
+              { label: "Fri", value: 29 },
+            ]}
+            valueFormatter={(value) => `$${value}k`}
+          />
+        </ChartFrame>
+        <ChartFrame title="Traffic mix" description="DonutChart with legend and center value.">
+          <div className="grid justify-items-center gap-4">
+            <DonutChart data={channelData} centerValue="88k" centerLabel="Visitors" />
+            <ChartLegend data={channelData} />
+          </div>
+        </ChartFrame>
+      </div>
+    )
+  }
+
   return (
     <InfoCard
       title="Azamat Jurayev"

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.10",
+  "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",

package/packages/cli/vendor/templates/showcase/src/App.tsx

@@ -84,7 +84,7 @@ function App() {
         <div className="min-w-0">
           <HeroSection />
 
-          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-10 lg:px-8">
+          <div className="grid w-full gap-10 px-6 py-10 lg:px-8 2xl:px-10">
             {selection.type === "overview" ? <OverviewContent /> : null}
             {selection.type === "category" ? (
               <CategorySection group={selection.group} onSelect={setSelectedKey} />

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

@@ -9,7 +9,7 @@ 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="w-full px-6 py-8 lg:px-8 2xl:px-10">
         <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">
@@ -25,7 +25,7 @@ export function HeroSection() {
           <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.10 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@3.1.11 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <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.10" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.11" />
         </StatisticGrid>
       </div>
     </section>

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

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@3.1.10",
+          label: "tembro@3.1.11",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

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

@@ -10,7 +10,7 @@ export function CalendarSection() {
   const [page, setPage] = useState(2)
 
   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>Calendar</CardTitle>

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

@@ -227,7 +227,7 @@ function SidebarPreview() {
 
 function DisplayPreview() {
   return (
-    <div className="grid gap-4 lg:grid-cols-2">
+    <div className="grid items-start gap-4 lg:grid-cols-2">
       <ProgressCard title="ProgressCard" description="display/progress" value={72} tone="success" />
       <StatusLegend
         title="StatusLegend"

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.10",
+  "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",