tembro 3.1.1 → 3.1.5

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.1",
+  "version": "3.1.5",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [
@@ -33,16 +33,10 @@
     "overlay": [
       "alert-dialog",
       "confirm-dialog",
-      "drawer",
-      "modal-shell",
-      "sheet-shell"
+      "drawer"
     ],
     "navigation": [
-      "nav-tabs",
-      "page-tabs",
-      "pagination",
-      "stepper-tabs",
-      "command-bar"
+      "pagination"
     ],
     "inputs": [
       "async-select",
@@ -50,7 +44,11 @@
       "rating",
       "slider",
       "tag-input",
-      "inline-editable"
+      "inline-editable",
+      "color-picker",
+      "signature-pad",
+      "json-input",
+      "time-picker"
     ],
     "form": [
       "form-date-picker",
@@ -72,24 +70,23 @@
       "activity-feed",
       "avatar",
       "code-block",
-      "data-list",
+      "description-list",
       "data-state",
       "info-card",
       "kanban",
+      "qr-code",
       "virtual-list",
       "list",
-      "metric-grid",
       "progress",
       "progress-circle",
-      "property-grid",
-      "result",
       "statistic",
       "status-dot",
       "status-legend",
       "timeline",
       "tree-view",
-      "user-card",
-      "trend-card"
+      "carousel",
+      "tag",
+      "typography"
     ],
     "actions": [
       "action-menu",
@@ -129,20 +126,26 @@
       "toast",
       "notification-center"
     ],
-    "command": [],
+    "command": [
+      "command-palette"
+    ],
     "patterns": [
+      "form-builder",
       "resource-page",
-      "resource-detail-page"
+      "resource-detail-page",
+      "empty-state",
+      "page-toolbar",
+      "bulk-action-bar",
+      "detail-layout",
+      "settings-page",
+      "data-view"
     ],
     "modern": [
       "calendar-scheduler",
       "dual-list-picker",
       "resizable-panel",
-      "tag",
-      "carousel",
-      "typography",
-      "json-input",
-      "time-picker"
+      "rich-text-editor",
+      "image-cropper"
     ],
     "hooks": [
       "use-session-storage-state",
@@ -157,7 +160,8 @@
       "calendar-kit",
       "wizard-kit",
       "all"
-    ]
+    ],
+    "charts": []
   },
   "recommended": [
     "button",
@@ -185,15 +189,14 @@
     "loading-state",
     "progress",
     "progress-circle",
-    "metric-grid",
     "activity-feed",
-    "data-list",
-    "user-card",
     "action-menu",
     "filter-bar",
-    "trend-card",
     "notification-center",
-    "command-bar"
+    "command-palette",
+    "list",
+    "empty-state",
+    "page-toolbar"
   ],
   "recommendedByMode": {
     "foundation": [
@@ -219,9 +222,7 @@
       "data-state",
       "loading-state",
       "progress-circle",
-      "metric-grid",
       "activity-feed",
-      "user-card",
       "action-menu",
       "filter-bar",
       "date-picker",
@@ -229,11 +230,18 @@
       "file-upload",
       "use-data-table-view-state",
       "data-table",
-      "trend-card",
       "notification-center",
-      "command-bar",
       "sortable-list",
-      "virtual-list"
+      "virtual-list",
+      "color-picker",
+      "signature-pad",
+      "qr-code",
+      "rich-text-editor",
+      "image-cropper",
+      "command-palette",
+      "empty-state",
+      "page-toolbar",
+      "data-view"
     ],
     "system": [
       "data-table",
@@ -265,18 +273,27 @@
       "segmented-control",
       "skeleton",
       "spinner",
-      "command-bar",
+      "command-palette",
       "inline-editable",
       "avatar",
       "code-block",
       "data-state",
       "kanban",
       "list",
-      "property-grid",
+      "description-list",
       "statistic",
       "tree-view",
       "copy-button",
       "section",
+      "form-builder",
+      "empty-state",
+      "page-toolbar",
+      "bulk-action-bar",
+      "detail-layout",
+      "settings-page",
+      "data-view",
+      "resource-page",
+      "resource-detail-page",
       "calendar-scheduler",
       "dual-list-picker",
       "resizable-panel",
@@ -286,7 +303,12 @@
       "json-input",
       "time-picker",
       "sortable-list",
-      "virtual-list"
+      "virtual-list",
+      "color-picker",
+      "signature-pad",
+      "qr-code",
+      "rich-text-editor",
+      "image-cropper"
     ]
   },
   "migrationAliases": {
@@ -302,6 +324,12 @@
     "date-range-input": "input",
     "simple-select": "select",
     "combobox": "select",
+    "hover-card": "popover",
+    "copy-field": "copy-button",
+    "comparison-card": "card",
+    "delta-badge": "badge",
+    "trend-card": "statistic",
+    "user-card": "avatar",
     "form-async-select": "form-select",
     "app-sidebar": "sidebar",
     "smart-card": "info-card",
@@ -309,7 +337,7 @@
     "page-container": "sidebar",
     "section-header": "section",
     "sidebar-nav": "sidebar",
-    "stat-card": "metric-grid",
+    "stat-card": "statistic",
     "sticky-footer-bar": "sidebar",
     "input-decorator": "input",
     "input-value": "input",
@@ -325,6 +353,21 @@
     "data-table-toolbar": "data-table",
     "data-table-view-presets": "data-table",
     "table-export-menu": "data-table",
-    "table-import-button": "data-table"
+    "table-import-button": "data-table",
+    "sheet-shell": "drawer",
+    "nav-tabs": "tabs",
+    "page-tabs": "tabs",
+    "stepper-tabs": "stepper",
+    "command-bar": "command-palette",
+    "data-list": "list",
+    "property-grid": "description-list",
+    "result": "page-state",
+    "app-header": "sidebar",
+    "page-header": "section",
+    "kpi": "statistic",
+    "progress-ring": "progress-circle",
+    "dialog-actions": "dialog",
+    "modal-shell": "dialog",
+    "horizontal-bar-chart": "data-view"
   }
 }

package/dist/components/actions/copy-field.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/actions/copy-field.cjs")

package/dist/components/actions/copy-field.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { type CopyButtonProps } from "@/components/actions/copy-button";
-export type CopyFieldProps = React.ComponentProps<"div"> & {
-    value: string;
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-    copyButtonProps?: Omit<CopyButtonProps, "value">;
-    monospace?: boolean;
-};
-declare function CopyField({ value, label, description, copyButtonProps, monospace, className, ...props }: CopyFieldProps): React.JSX.Element;
-export { CopyField };

package/dist/components/actions/copy-field.js

@@ -1 +0,0 @@
-export * from "../../src/components/actions/copy-field.js"

package/dist/components/charts/horizontal-bar-chart.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/charts/horizontal-bar-chart.cjs")

package/dist/components/charts/horizontal-bar-chart.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-export type HorizontalBarDatum = {
-    key: string;
-    label: React.ReactNode;
-    value: number;
-    description?: React.ReactNode;
-    color?: string;
-};
-export type HorizontalBarChartProps = React.ComponentProps<"div"> & {
-    data: HorizontalBarDatum[];
-    max?: number;
-    showValue?: boolean;
-    emptyLabel?: React.ReactNode;
-    valueFormatter?: (value: number) => React.ReactNode;
-};
-declare function HorizontalBarChart({ data, max, showValue, emptyLabel, valueFormatter, className, ...props }: HorizontalBarChartProps): React.JSX.Element;
-export { HorizontalBarChart };

package/dist/components/charts/horizontal-bar-chart.js

@@ -1 +0,0 @@
-export * from "../../src/components/charts/horizontal-bar-chart.js"

package/dist/components/charts/kpi.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/charts/kpi.cjs")

package/dist/components/charts/kpi.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { Card } from "@/components/ui/card";
-export type KpiTone = "neutral" | "success" | "warning" | "danger";
-export type KpiCardProps = React.ComponentProps<typeof Card> & {
-    label: React.ReactNode;
-    value: React.ReactNode;
-    description?: React.ReactNode;
-    change?: React.ReactNode;
-    tone?: KpiTone;
-    values?: number[];
-    icon?: React.ReactNode;
-};
-declare function KpiCard({ label, value, description, change, tone, values, icon, className, ...props }: KpiCardProps): React.JSX.Element;
-export type KpiGridProps = React.ComponentProps<"div"> & {
-    columns?: 1 | 2 | 3 | 4;
-};
-declare function KpiGrid({ columns, className, ...props }: KpiGridProps): React.JSX.Element;
-export { KpiCard, KpiGrid };

package/dist/components/charts/kpi.js

@@ -1 +0,0 @@
-export * from "../../src/components/charts/kpi.js"

package/dist/components/display/comparison-card.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/comparison-card.cjs")

package/dist/components/display/comparison-card.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { StatCard } from "@/components/layout/stat-card";
-export type ComparisonCardItem = {
-    label: React.ReactNode;
-    value: React.ReactNode;
-    change?: React.ReactNode;
-    trend?: "up" | "down" | "neutral";
-};
-export type ComparisonCardProps = Omit<React.ComponentProps<typeof StatCard>, "comparisonItems" | "comparisonColumns"> & {
-    title?: React.ReactNode;
-    items: ComparisonCardItem[];
-    columns?: 2 | 3 | 4;
-};
-declare function ComparisonCard({ title, items, columns, ...props }: ComparisonCardProps): React.JSX.Element;
-export { ComparisonCard };

package/dist/components/display/comparison-card.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/comparison-card.js"

package/dist/components/display/data-list.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/data-list.cjs")

package/dist/components/display/data-list.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-export type DataListItem = {
-    key: string;
-    label: React.ReactNode;
-    value?: React.ReactNode;
-    description?: React.ReactNode;
-    meta?: React.ReactNode;
-    icon?: React.ReactNode;
-    href?: string;
-    disabled?: boolean;
-    onClick?: () => void;
-};
-export type DataListProps = React.ComponentProps<"div"> & {
-    items: DataListItem[];
-    density?: "compact" | "default" | "comfortable";
-    showDividers?: boolean;
-};
-declare function DataList({ items, density, showDividers, className, ...props }: DataListProps): React.JSX.Element;
-export type DataListRowProps = React.ComponentProps<"div"> & {
-    item: DataListItem;
-    density?: DataListProps["density"];
-    showDivider?: boolean;
-};
-declare function DataListRow({ item, density, showDivider, className, ...props }: DataListRowProps): React.JSX.Element;
-export { DataList, DataListRow };

package/dist/components/display/data-list.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/data-list.js"

package/dist/components/display/delta-badge.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/delta-badge.cjs")

package/dist/components/display/delta-badge.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { type BadgeProps } from "@/components/ui/badge";
-export type DeltaBadgeProps = Omit<BadgeProps, "children" | "label" | "tone" | "status" | "leftIcon" | "variant" | "size"> & {
-    value: React.ReactNode;
-    trend?: "up" | "down" | "neutral";
-    size?: "sm" | "default";
-    icon?: boolean;
-};
-declare function DeltaBadge({ value, trend, size, icon, className, ...props }: DeltaBadgeProps): React.JSX.Element;
-export { DeltaBadge };

package/dist/components/display/delta-badge.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/delta-badge.js"

package/dist/components/display/descriptions.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/descriptions.cjs")

package/dist/components/display/descriptions.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-export type DescriptionItem = {
-    key: string;
-    label: React.ReactNode;
-    value: React.ReactNode;
-    span?: 1 | 2 | 3 | 4;
-};
-export type DescriptionsProps = React.ComponentProps<"div"> & {
-    items: DescriptionItem[];
-    title?: React.ReactNode;
-    extra?: React.ReactNode;
-    bordered?: boolean;
-    columns?: 1 | 2 | 3 | 4;
-    size?: "sm" | "md" | "lg";
-    labelClassName?: string;
-    valueClassName?: string;
-};
-declare function Descriptions({ items, title, extra, bordered, columns, size, labelClassName, valueClassName, className, ...props }: DescriptionsProps): React.JSX.Element;
-export { Descriptions };

package/dist/components/display/descriptions.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/descriptions.js"

package/dist/components/display/metric-grid.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/metric-grid.cjs")

package/dist/components/display/metric-grid.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-export type MetricTone = "default" | "success" | "warning" | "danger" | "info" | "muted";
-export type MetricGridColumn = 1 | 2 | 3 | 4;
-export type MetricItem = {
-    key: string;
-    label: React.ReactNode;
-    value: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    trend?: React.ReactNode;
-    tone?: MetricTone;
-    hidden?: boolean;
-    className?: string;
-    loading?: boolean;
-};
-export type MetricGridProps = React.ComponentProps<"div"> & {
-    items: MetricItem[];
-    columns?: MetricGridColumn;
-    compact?: boolean;
-    itemClassName?: string;
-};
-declare function MetricGrid({ className, items, columns, compact, itemClassName, ...props }: MetricGridProps): React.JSX.Element;
-export { MetricGrid };

package/dist/components/display/metric-grid.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/metric-grid.js"

package/dist/components/display/progress-circle.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/progress-circle.cjs")

package/dist/components/display/progress-circle.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-export type ProgressCircleProps = React.ComponentProps<"div"> & {
-    value?: number;
-    max?: number;
-    label?: React.ReactNode;
-};
-declare function ProgressCircle({ value, max, label, className, ...props }: ProgressCircleProps): React.JSX.Element;
-export { ProgressCircle };

package/dist/components/display/progress-circle.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/progress-circle.js"

package/dist/components/display/property-grid.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/property-grid.cjs")

package/dist/components/display/property-grid.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export type PropertyGridItem = {
-    key: string;
-    label: React.ReactNode;
-    value: React.ReactNode;
-    description?: React.ReactNode;
-    span?: 1 | 2 | 3 | 4;
-};
-export type PropertyGridProps = React.ComponentProps<"div"> & {
-    items: PropertyGridItem[];
-    columns?: 1 | 2 | 3 | 4;
-    bordered?: boolean;
-};
-declare function PropertyGrid({ items, columns, bordered, className, ...props }: PropertyGridProps): React.JSX.Element;
-export { PropertyGrid };

package/dist/components/display/property-grid.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/property-grid.js"

package/dist/components/display/result.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/result.cjs")

package/dist/components/display/result.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { Button } from "@/components/ui/button";
-export type ResultStatus = "success" | "error" | "warning" | "info" | "not-found" | "forbidden" | "server-error";
-export type ResultProps = React.ComponentProps<"div"> & {
-    status?: ResultStatus;
-    icon?: React.ReactNode;
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    actions?: React.ReactNode;
-    extra?: React.ReactNode;
-    compact?: boolean;
-    iconClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-};
-declare function Result({ status, icon, title, description, actions, extra, compact, iconClassName, titleClassName, descriptionClassName, className, ...props }: ResultProps): React.JSX.Element;
-declare function ResultAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-export { Result, ResultAction };

package/dist/components/display/result.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/result.js"

package/dist/components/display/trend-card.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/trend-card.cjs")

package/dist/components/display/trend-card.d.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { Card } from "@/components/ui/card";
-export type TrendCardProps = React.ComponentProps<typeof Card> & {
-    title: React.ReactNode;
-    value: React.ReactNode;
-    change?: React.ReactNode;
-    trend?: "up" | "down" | "neutral";
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    sparkline?: number[];
-};
-declare function TrendCard({ title, value, change, trend, description, icon, sparkline, className, ...props }: TrendCardProps): React.JSX.Element;
-export { TrendCard };

package/dist/components/display/trend-card.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/trend-card.js"

package/dist/components/display/user-card.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/display/user-card.cjs")

package/dist/components/display/user-card.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { Card } from "@/components/ui/card";
-export type UserCardProps = React.ComponentProps<typeof Card> & {
-    name: React.ReactNode;
-    description?: React.ReactNode;
-    src?: string;
-    alt?: string;
-    meta?: React.ReactNode;
-    actions?: React.ReactNode;
-};
-declare function UserCard({ name, description, src, alt, meta, actions, className, ...props }: UserCardProps): React.JSX.Element;
-export { UserCard };

package/dist/components/display/user-card.js

@@ -1 +0,0 @@
-export * from "../../src/components/display/user-card.js"

package/dist/components/layout/stat-card.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/layout/stat-card.cjs")

package/dist/components/layout/stat-card.d.ts

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Card } from "@/components/ui/card";
-export type StatCardTrend = {
-    value: React.ReactNode;
-    tone?: "success" | "warning" | "danger" | "info" | "muted" | "default";
-    label?: React.ReactNode;
-};
-export type StatCardProps = React.ComponentProps<typeof Card> & {
-    title?: React.ReactNode;
-    value?: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-    trend?: StatCardTrend;
-    footer?: React.ReactNode;
-    helperText?: React.ReactNode;
-    comparisonItems?: Array<{
-        label: React.ReactNode;
-        value: React.ReactNode;
-        change?: React.ReactNode;
-        trend?: StatCardTrend["tone"] | "neutral";
-    }>;
-    comparisonColumns?: 2 | 3 | 4;
-    loading?: boolean;
-    valuePrefix?: React.ReactNode;
-    valueSuffix?: React.ReactNode;
-    contentClassName?: string;
-    iconClassName?: string;
-    valueClassName?: string;
-};
-declare function StatCard({ className, title, value, description, icon, action, trend, footer, helperText, comparisonItems, comparisonColumns, loading, valuePrefix, valueSuffix, contentClassName, iconClassName, valueClassName, ...props }: StatCardProps): React.JSX.Element;
-export { StatCard };

package/dist/components/layout/stat-card.js

@@ -1 +0,0 @@
-export * from "../../src/components/layout/stat-card.js"

package/dist/components/modern/tour.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/modern/tour.cjs")

package/dist/components/modern/tour.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-export type TourStep = {
-    title: React.ReactNode;
-    description?: React.ReactNode;
-};
-export type TourProps = React.ComponentProps<"div"> & {
-    steps: TourStep[];
-    onFinish?: () => void;
-    onClose?: () => void;
-    doneLabel?: string;
-    closeLabel?: string;
-};
-declare function Tour({ steps, onFinish, onClose, doneLabel, closeLabel, className, ...props }: TourProps): React.JSX.Element;
-export { Tour };

package/dist/components/modern/tour.js

@@ -1 +0,0 @@
-export * from "../../src/components/modern/tour.js"

package/dist/components/navigation/anchor-nav.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/navigation/anchor-nav.cjs")

package/dist/components/navigation/anchor-nav.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export type AnchorNavItem = {
-    key: string;
-    label: React.ReactNode;
-    href: string;
-    active?: boolean;
-    disabled?: boolean;
-};
-export type AnchorNavProps = React.ComponentProps<"nav"> & {
-    items: AnchorNavItem[];
-    orientation?: "vertical" | "horizontal";
-    title?: React.ReactNode;
-};
-declare function AnchorNav({ items, orientation, title, className, ...props }: AnchorNavProps): React.JSX.Element;
-export { AnchorNav };

package/dist/components/navigation/anchor-nav.js

@@ -1 +0,0 @@
-export * from "../../src/components/navigation/anchor-nav.js"

package/dist/components/navigation/command-bar.cjs

@@ -1 +0,0 @@
-module.exports = require("../../src/components/navigation/command-bar.cjs")