tembro 3.1.1 → 3.1.5

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
+All notable changes to this project will be documented in this file.
+
+## 3.1.5 - 2026-07-13
+
+### Changed
+
+- published the consolidated canonical component surface, reusable showcase architecture, centralized theme styling, and expanded interactive documentation
+- synchronized package, CLI, registry, showcase metadata, build output, and npm release versions
+
+## 3.1.4 - 2026-07-13
+
+### Changed
+
+- consolidated Input, Sidebar, Statistic, PageState, and FileUpload documentation around their canonical public APIs with interactive states and production-oriented code samples
+- expanded Sidebar documentation with nested routes, React Router rendering, density controls, active indicators, collapsed rail actions, mobile navigation, and account interaction
+- expanded FileUpload documentation with controlled progress, retry, validation, rejection messages, sample files, remove, and clear flows
+- added compact InlineState coverage and interactive route-level PageState outcomes
+- moved Statistic, PageState, and FileUpload visual states into the shared init-managed theme through semantic data slots and light/dark tokens
+- improved loading, status, and upload rejection accessibility semantics
+
+### Removed
+
+- removed deprecated duplicate registry aliases and stale showcase routes in favor of the canonical component surfaces
 
 ## 3.1.0 - 2026-07-10
 

package/dist/components/actions/index.d.ts

@@ -1,5 +1,4 @@
 export * from './action-menu';
 export * from './copy-button';
-export * from './copy-field';
 export * from './button-group';
 export * from './quick-action-grid';

package/dist/components/actions/public.d.ts

@@ -1,5 +1,4 @@
 export * from "./action-menu";
 export * from "./button-group";
 export * from "./copy-button";
-export * from "./copy-field";
 export * from "./quick-action-grid";

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

@@ -1,4 +1,2 @@
 export * from './charts';
-export * from './kpi';
-export * from './progress-ring';
-export * from './horizontal-bar-chart';
+export * from './progress-circle';

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

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

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

@@ -0,0 +1,4 @@
+import { ProgressRing, type ProgressRingProps } from "@/components/charts/progress-ring";
+export type ProgressCircleProps = ProgressRingProps;
+declare const ProgressCircle: typeof ProgressRing;
+export { ProgressCircle };

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

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

package/dist/components/data-table/public.d.ts

@@ -1,6 +1 @@
 export * from "./data-table";
-export * from "./data-table-pagination";
-export * from "./data-table-bulk-actions";
-export * from "./data-table-column-visibility-menu";
-export * from "./data-table-sortable-header";
-export * from "./data-table-view-presets";

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

@@ -1,25 +1,19 @@
 export * from "./description-list";
-export * from "./data-list";
 export * from "./activity-feed";
 export * from "./avatar";
-export * from "./descriptions";
 export * from "./kanban";
 export * from "./code-block";
 export * from "./data-state";
 export * from "./list";
-export * from "./metric-grid";
 export * from "./progress";
-export * from "./progress-circle";
-export * from "./property-grid";
-export * from "./result";
 export * from "./statistic";
 export * from "./status-dot";
 export * from "./status-legend";
 export * from "./timeline";
 export * from "./tree-view";
-export * from "./user-card";
-export * from "./trend-card";
-export * from "./comparison-card";
-export * from "./delta-badge";
 export * from "./info-card";
 export * from "./virtual-list";
+export * from "./qr-code";
+export * from "./carousel";
+export * from "./tag";
+export * from "./typography";

package/dist/components/display/qr-code.cjs

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

package/dist/components/display/qr-code.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { QRCodeErrorCorrectionLevel } from "qrcode";
+export type QRCodeProps = Omit<React.ComponentProps<"div">, "children"> & {
+    value: string;
+    src?: string;
+    alt?: string;
+    size?: number;
+    margin?: number;
+    errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+    foreground?: string;
+    background?: string;
+    loadingFallback?: React.ReactNode;
+    errorFallback?: React.ReactNode;
+    onError?: (error: Error) => void;
+};
+declare function QRCode({ value, src, alt, size, margin, errorCorrectionLevel, foreground, background, loadingFallback, errorFallback, onError, className, ...props }: QRCodeProps): React.JSX.Element;
+declare const QRCodeSvg: typeof QRCode;
+export { QRCode, QRCodeSvg };

package/dist/components/display/qr-code.js

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

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

@@ -9,10 +9,11 @@ export type VirtualListRenderContext = {
     index: number;
     virtualItem: VirtualItem;
 };
+export type VirtualListItemKey = string | number;
 export type VirtualListProps<TItem> = Omit<React.ComponentProps<"div">, "children"> & {
     items: TItem[];
     renderItem: (item: TItem, context: VirtualListRenderContext) => React.ReactNode;
-    getItemKey?: (item: TItem, index: number) => React.Key;
+    getItemKey?: (item: TItem, index: number) => VirtualListItemKey;
     estimateSize?: number | ((index: number) => number);
     overscan?: number;
     height?: number | string;

package/dist/components/inputs/color-picker.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/inputs/color-picker.cjs")

package/dist/components/inputs/color-picker.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+declare function normalizeHexColor(value: string, fallback?: string): string;
+declare function getAlphaPercent(value: string): number;
+declare function withAlpha(value: string, alpha: number, includeAlpha: boolean): string;
+export type ColorPickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    swatches?: string[];
+    showAlpha?: boolean;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    labels?: {
+        color?: string;
+        hex?: string;
+        alpha?: string;
+    };
+};
+declare function ColorPicker({ value, defaultValue, onValueChange, swatches, showAlpha, disabled, label, labels, className, ...props }: ColorPickerProps): React.JSX.Element;
+export { ColorPicker, getAlphaPercent, normalizeHexColor, withAlpha };

package/dist/components/inputs/color-picker.js

@@ -0,0 +1 @@
+export * from "../../src/components/inputs/color-picker.js"

package/dist/components/inputs/index.d.ts

@@ -6,3 +6,5 @@ export * from "./time-picker";
 export * from "./slider";
 export * from "./tag-input";
 export * from "./inline-editable";
+export * from "./color-picker";
+export * from "./signature-pad";

package/dist/components/inputs/public.d.ts

@@ -6,3 +6,5 @@ export * from "./tag-input";
 export * from "./inline-editable";
 export * from "./json-input";
 export * from "./time-picker";
+export * from "./color-picker";
+export * from "./signature-pad";

package/dist/components/inputs/signature-pad.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/inputs/signature-pad.cjs")

package/dist/components/inputs/signature-pad.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type SignaturePoint = {
+    x: number;
+    y: number;
+    pressure: number;
+};
+export type SignatureStroke = SignaturePoint[];
+export type SignaturePadHandle = {
+    clear: () => void;
+    undo: () => void;
+    toDataURL: (type?: string, quality?: number) => string;
+};
+export type SignaturePadProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+    value?: SignatureStroke[];
+    defaultValue?: SignatureStroke[];
+    onValueChange?: (strokes: SignatureStroke[]) => void;
+    onStrokeEnd?: (stroke: SignatureStroke) => void;
+    width?: number;
+    height?: number;
+    lineWidth?: number;
+    color?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    labels?: {
+        canvas?: string;
+        undo?: string;
+        clear?: string;
+    };
+};
+declare function drawSignature(canvas: HTMLCanvasElement, strokes: SignatureStroke[], options: {
+    color: string;
+    lineWidth: number;
+    backgroundColor: string;
+}): void;
+declare const SignaturePad: React.ForwardRefExoticComponent<Omit<SignaturePadProps, "ref"> & React.RefAttributes<SignaturePadHandle>>;
+export { SignaturePad, drawSignature };

package/dist/components/inputs/signature-pad.js

@@ -0,0 +1 @@
+export * from "../../src/components/inputs/signature-pad.js"

package/dist/components/layout/app-sidebar.d.ts

@@ -11,6 +11,8 @@ type AppSidebarNavItem = {
     hidden?: boolean;
     sectionLabel?: React.ReactNode;
     defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
     current?: React.AriaAttributes["aria-current"];
     tooltip?: React.ReactNode;
     onSelect?: () => void;
@@ -23,7 +25,7 @@ type AppSidebarFooterAccount = {
     tooltip?: React.ReactNode;
     onSelect?: () => void;
 };
-type AppSidebarProps = React.ComponentProps<"aside"> & {
+export type AppSidebarProps = React.ComponentProps<"aside"> & {
     header?: React.ReactNode;
     footer?: React.ReactNode;
     items?: AppSidebarNavItem[];
@@ -37,6 +39,10 @@ type AppSidebarProps = React.ComponentProps<"aside"> & {
     secondaryActions?: AppSidebarNavItem[];
     footerSecondary?: React.ReactNode;
     tooltipOnCollapsed?: boolean;
+    showSectionLabels?: boolean;
+    itemSize?: "sm" | "md" | "lg";
+    activeIndicator?: "none" | "bar" | "pill";
+    navigationLabel?: string;
     responsive?: boolean;
     mobileBreakpoint?: number;
     mobileOpen?: boolean;
@@ -45,6 +51,7 @@ type AppSidebarProps = React.ComponentProps<"aside"> & {
     mobileTitle?: React.ReactNode;
     mobileDescription?: React.ReactNode;
     mobileToggleLabel?: string;
+    mobileCloseLabel?: string;
     mobileToggleIcon?: React.ReactNode;
     showMobileToggle?: boolean;
     closeOnSelect?: boolean;
@@ -65,6 +72,6 @@ type AppSidebarProps = React.ComponentProps<"aside"> & {
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function Sidebar({ className, header, footer, items, collapsed, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: AppSidebarProps): React.JSX.Element;
+declare function Sidebar({ className, header, footer, items, collapsed, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, showSectionLabels, itemSize, activeIndicator, navigationLabel, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileCloseLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: AppSidebarProps): React.JSX.Element;
 export { Sidebar };
 export type { AppSidebarFooterAccount as SidebarFooterAccount, AppSidebarNavItem as SidebarItem, AppSidebarProps as SidebarProps, };

package/dist/components/layout/controllable-details.cjs

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

package/dist/components/layout/controllable-details.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+type ControllableDetailsProps = Omit<React.ComponentProps<"details">, "open" | "onToggle"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function ControllableDetails({ open, defaultOpen, onOpenChange, children, ...props }: ControllableDetailsProps): React.JSX.Element;
+export { ControllableDetails };
+export type { ControllableDetailsProps };

package/dist/components/layout/controllable-details.js

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

package/dist/components/layout/index.d.ts

@@ -1,8 +1,4 @@
 export * from "./app-header";
 export * from "./app-sidebar";
-export * from "./stat-card";
-export * from "./sidebar-nav";
 export * from "./breadcrumbs";
-export * from "./page-container";
 export * from "./section";
-export * from "./sticky-footer-bar";

package/dist/components/layout/public.d.ts

@@ -1,7 +1,3 @@
 export * from "./app-sidebar";
 export * from "./breadcrumbs";
-export * from "./page-container";
 export * from "./section";
-export * from "./section-header";
-export * from "./sidebar-nav";
-export * from "./sticky-footer-bar";

package/dist/components/layout/sidebar-nav.d.ts

@@ -12,6 +12,8 @@ export type SidebarNavItem = {
     hidden?: boolean;
     sectionLabel?: React.ReactNode;
     defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
     tooltip?: React.ReactNode;
     onSelect?: () => void;
 };
@@ -20,6 +22,9 @@ export type SidebarNavProps = React.ComponentProps<"nav"> & {
     collapsed?: boolean;
     scrollable?: boolean;
     tooltipOnCollapsed?: boolean;
+    showSectionLabels?: boolean;
+    itemSize?: "sm" | "md" | "lg";
+    activeIndicator?: "none" | "bar" | "pill";
     itemClassName?: string;
     activeItemClassName?: string;
     renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode;
@@ -28,5 +33,5 @@ export type SidebarNavProps = React.ComponentProps<"nav"> & {
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function SidebarNav({ className, items, collapsed, scrollable, itemClassName, activeItemClassName, renderItem, renderLink, ...props }: SidebarNavProps): React.JSX.Element;
+declare function SidebarNav({ className, items, collapsed, scrollable, showSectionLabels, itemSize, activeIndicator, itemClassName, activeItemClassName, renderItem, renderLink, ...props }: SidebarNavProps): React.JSX.Element;
 export { SidebarNav };

package/dist/components/modern/image-cropper.cjs

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

package/dist/components/modern/image-cropper.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type Area, type Point } from "react-easy-crop";
+export declare function createCroppedImageBlob({ src, crop, rotation, type, quality, crossOrigin, }: {
+    src: string;
+    crop: Area;
+    rotation?: number;
+    type?: string;
+    quality?: number;
+    crossOrigin?: string;
+}): Promise<Blob>;
+export type ImageCropperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    src: string;
+    alt?: string;
+    crop?: Point;
+    defaultCrop?: Point;
+    onCropChange?: (crop: Point) => void;
+    zoom?: number;
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    rotation?: number;
+    defaultRotation?: number;
+    onRotationChange?: (rotation: number) => void;
+    onCropComplete?: (area: Area, areaPixels: Area) => void;
+    aspect?: number;
+    cropShape?: "rect" | "round";
+    objectFit?: "contain" | "cover" | "horizontal-cover" | "vertical-cover";
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+    showGrid?: boolean;
+    disabled?: boolean;
+    labels?: {
+        cropper?: string;
+        zoom?: string;
+        rotation?: string;
+    };
+};
+declare function ImageCropper({ src, alt, crop, defaultCrop, onCropChange, zoom, defaultZoom, onZoomChange, rotation, defaultRotation, onRotationChange, onCropComplete, aspect, cropShape, objectFit, minZoom, maxZoom, zoomStep, showGrid, disabled, labels, className, ...props }: ImageCropperProps): React.JSX.Element;
+export { ImageCropper };

package/dist/components/modern/image-cropper.js

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

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

@@ -1,6 +1,5 @@
-export * from "../display/carousel";
-export * from "../display/tag";
-export * from "../display/typography";
 export * from "./calendar-scheduler";
 export * from "./dual-list-picker";
 export * from "./resizable-panel";
+export * from "./rich-text-editor";
+export * from "./image-cropper";

package/dist/components/modern/rich-text-editor.d.ts

@@ -1,10 +1,24 @@
 import * as React from "react";
-export type RichTextEditorProps = React.ComponentProps<"div"> & {
+import { type Editor } from "@tiptap/react";
+export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     output?: "text" | "html";
     placeholder?: string;
+    editable?: boolean;
+    autoFocus?: boolean;
+    minHeight?: number;
+    onLinkRequest?: (currentHref?: string) => string | null | undefined;
+    labels?: {
+        editor?: string;
+        toolbar?: string;
+    };
 };
-declare function RichTextEditor({ value, defaultValue, onValueChange, output: _output, placeholder, className, children, ...props }: RichTextEditorProps): React.JSX.Element;
-export { RichTextEditor };
+declare function EditorToolbar({ editor, onLinkRequest, label }: {
+    editor: Editor;
+    onLinkRequest?: RichTextEditorProps["onLinkRequest"];
+    label: string;
+}): React.JSX.Element;
+declare function RichTextEditor(props: RichTextEditorProps): React.JSX.Element;
+export { EditorToolbar, RichTextEditor };

package/dist/components/navigation/index.d.ts

@@ -1,6 +1 @@
-export * from "./anchor-nav";
-export * from "./nav-tabs";
-export * from "./page-tabs";
 export * from "./pagination";
-export * from "./stepper-tabs";
-export * from "./command-bar";

package/dist/components/overlay/confirm-dialog.d.ts

@@ -1,8 +1,20 @@
 import * as React from "react";
-import { DialogActionButton } from "@/components/overlay/dialog-actions";
-import { type ModalShellProps } from "@/components/overlay/modal-shell";
-type ConfirmVariant = React.ComponentProps<typeof DialogActionButton>["variant"];
-type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
+import { Button } from "@/components/ui/button";
+type ConfirmVariant = React.ComponentProps<typeof Button>["variant"];
+type ConfirmDialogSize = "sm" | "md" | "lg" | "xl" | "full";
+type ConfirmDialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    size?: ConfirmDialogSize;
+    showCloseButton?: boolean;
+    contentClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
     cancelText?: React.ReactNode;
     confirmText?: React.ReactNode;
     confirmVariant?: ConfirmVariant;
@@ -14,6 +26,6 @@ type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
     onCancel?: () => void;
     onConfirm?: () => void | Promise<void>;
 };
-declare function ConfirmDialog({ cancelText, confirmText, confirmVariant, confirmDisabled, cancelDisabled, isLoading, closeOnConfirm, onConfirmError, onCancel, onConfirm, onOpenChange, ...props }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ open, defaultOpen, trigger, title, description, children, size, showCloseButton, contentClassName, headerClassName, bodyClassName, cancelText, confirmText, confirmVariant, confirmDisabled, cancelDisabled, isLoading, closeOnConfirm, onConfirmError, onCancel, onConfirm, onOpenChange, }: ConfirmDialogProps): React.JSX.Element;
 export { ConfirmDialog };
 export type { ConfirmDialogProps };

package/dist/components/overlay/index.d.ts

@@ -1,6 +1,3 @@
 export * from "./alert-dialog";
 export * from "./confirm-dialog";
-export * from "./dialog-actions";
 export * from "./drawer";
-export * from "./modal-shell";
-export * from "./sheet-shell";

package/dist/components/patterns/bulk-action-bar.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/patterns/bulk-action-bar.cjs")

package/dist/components/patterns/bulk-action-bar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type BulkActionBarProps = React.ComponentProps<"div"> & {
+    selectedCount: number;
+    selectedLabel?: (count: number) => React.ReactNode;
+    actions?: React.ReactNode;
+    clearLabel?: React.ReactNode;
+    onClear?: () => void;
+};
+declare function BulkActionBar({ className, selectedCount, selectedLabel, actions, clearLabel, onClear, children, ...props }: BulkActionBarProps): React.JSX.Element | null;
+export { BulkActionBar };

package/dist/components/patterns/bulk-action-bar.js

@@ -0,0 +1 @@
+export * from "../../src/components/patterns/bulk-action-bar.js"

package/dist/components/patterns/data-view.cjs

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

package/dist/components/patterns/data-view.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type DataTableProps } from "@/components/data-table/data-table";
+import { PageToolbar } from "@/components/patterns/page-toolbar";
+export type DataViewProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    toolbar?: React.ComponentProps<typeof PageToolbar>;
+    table?: DataTableProps<TData, TValue>;
+    count?: number;
+    loading?: boolean;
+    error?: React.ReactNode;
+    emptyTitle?: React.ReactNode;
+    emptyDescription?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare function DataView<TData, TValue = unknown>({ className, title, description, toolbar, table, count, loading, error, emptyTitle, emptyDescription, children, ...props }: DataViewProps<TData, TValue>): React.JSX.Element;
+export { DataView };

package/dist/components/patterns/data-view.js

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

package/dist/components/patterns/detail-layout.cjs

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

package/dist/components/patterns/detail-layout.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type DetailLayoutProps = React.ComponentProps<"div"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    actions?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
+    summary?: React.ReactNode;
+    aside?: React.ReactNode;
+    footer?: React.ReactNode;
+    headerClassName?: string;
+    contentClassName?: string;
+    asideClassName?: string;
+};
+declare function DetailLayout({ className, title, description, eyebrow, actions, breadcrumbs, summary, aside, footer, headerClassName, contentClassName, asideClassName, children, ...props }: DetailLayoutProps): React.JSX.Element;
+export { DetailLayout };

package/dist/components/patterns/detail-layout.js

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

package/dist/components/patterns/empty-state.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/patterns/empty-state.cjs")

package/dist/components/patterns/empty-state.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+export type EmptyStateTone = "empty" | "error" | "info";
+export type EmptyStateAction = {
+    label: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    variant?: React.ComponentProps<typeof Button>["variant"];
+};
+export type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+    tone?: EmptyStateTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    primaryAction?: EmptyStateAction;
+    secondaryAction?: EmptyStateAction;
+    compact?: boolean;
+};
+declare function EmptyState({ className, tone, title, description, icon, primaryAction, secondaryAction, compact, ...props }: EmptyStateProps): React.JSX.Element;
+export type ErrorStateProps = Omit<EmptyStateProps, "tone">;
+declare function ErrorState(props: ErrorStateProps): React.JSX.Element;
+export { EmptyState, ErrorState };

package/dist/components/patterns/empty-state.js

@@ -0,0 +1 @@
+export * from "../../src/components/patterns/empty-state.js"

package/dist/components/patterns/index.d.ts

@@ -1,2 +1,9 @@
+export * from './form-builder';
 export * from './resource-page';
 export * from './resource-detail-page';
+export * from "./empty-state";
+export * from "./page-toolbar";
+export * from "./bulk-action-bar";
+export * from "./detail-layout";
+export * from "./settings-page";
+export * from "./data-view";

package/dist/components/patterns/page-toolbar.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/patterns/page-toolbar.cjs")

package/dist/components/patterns/page-toolbar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type PageToolbarProps = React.ComponentProps<"div"> & {
+    search?: React.ReactNode;
+    filters?: React.ReactNode;
+    viewOptions?: React.ReactNode;
+    actions?: React.ReactNode;
+    summary?: React.ReactNode;
+    sticky?: boolean;
+};
+declare function PageToolbar({ className, search, filters, viewOptions, actions, summary, sticky, children, ...props }: PageToolbarProps): React.JSX.Element | null;
+export { PageToolbar };

package/dist/components/patterns/page-toolbar.js

@@ -0,0 +1 @@
+export * from "../../src/components/patterns/page-toolbar.js"

package/dist/components/patterns/public.d.ts

@@ -1,2 +1,9 @@
+export * from "./form-builder";
 export * from "./resource-page";
 export * from "./resource-detail-page";
+export * from "./empty-state";
+export * from "./page-toolbar";
+export * from "./bulk-action-bar";
+export * from "./detail-layout";
+export * from "./settings-page";
+export * from "./data-view";

package/dist/components/patterns/settings-page.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/patterns/settings-page.cjs")