azamat-ui-kit 0.1.0

package/dist/components/actions/action-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type ActionMenuItem = {
+    key: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    destructive?: boolean;
+    hidden?: boolean;
+    onSelect?: () => void | Promise<void>;
+};
+export type ActionMenuProps = {
+    actions: ActionMenuItem[];
+    label?: React.ReactNode;
+    trigger?: React.ReactElement;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    disabled?: boolean;
+    contentClassName?: string;
+    triggerClassName?: string;
+    emptyLabel?: React.ReactNode;
+};
+declare function ActionMenu({ actions, label, trigger, align, side, sideOffset, disabled, contentClassName, triggerClassName, emptyLabel, }: ActionMenuProps): React.JSX.Element;
+export { ActionMenu };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+export type CopyButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick"> & {
+    value: string;
+    copiedLabel?: React.ReactNode;
+    copyLabel?: React.ReactNode;
+    copiedTimeout?: number;
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+    showIcon?: boolean;
+};
+declare function CopyButton({ value, copiedLabel, copyLabel, copiedTimeout, onCopied, onCopyError, showIcon, disabled, children, type, ...props }: CopyButtonProps): React.JSX.Element;
+export { CopyButton };

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

@@ -0,0 +1,3 @@
+export * from "./action-menu";
+export * from "./copy-button";
+export * from "./quick-action-grid";

package/dist/components/actions/quick-action-grid.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type QuickActionGridColumn = 1 | 2 | 3 | 4;
+export type QuickActionGridItem = {
+    key: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    href?: string;
+    external?: boolean;
+    onSelect?: () => void;
+    className?: string;
+};
+export type QuickActionGridProps = React.ComponentProps<"div"> & {
+    items: QuickActionGridItem[];
+    columns?: QuickActionGridColumn;
+    compact?: boolean;
+    itemClassName?: string;
+    renderLink?: (props: React.ComponentProps<"a"> & {
+        item: QuickActionGridItem;
+        [key: `data-${string}`]: string | boolean | undefined;
+    }) => React.ReactNode;
+};
+declare function QuickActionGrid({ items, columns, compact, itemClassName, renderLink, className, ...props }: QuickActionGridProps): React.JSX.Element;
+export { QuickActionGrid };

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type CalendarDateRange = {
+    from?: string | null;
+    to?: string | null;
+};
+export type CalendarLabels = {
+    previousMonth?: string;
+    nextMonth?: string;
+    selectDate?: (date: string) => string;
+};
+export type CalendarProps = React.ComponentProps<"div"> & {
+    value?: string | null;
+    range?: CalendarDateRange;
+    onValueChange?: (value: string) => void;
+    onRangeChange?: (range: CalendarDateRange) => void;
+    mode?: "single" | "range";
+    month?: Date;
+    defaultMonth?: Date | string | null;
+    onMonthChange?: (month: Date) => void;
+    min?: string;
+    max?: string;
+    disabledDates?: string[];
+    locale?: string;
+    weekStartsOn?: 0 | 1;
+    labels?: CalendarLabels;
+};
+declare function Calendar({ className, value, range, onValueChange, onRangeChange, mode, month, defaultMonth, onMonthChange, min, max, disabledDates, locale, weekStartsOn, labels, ...props }: CalendarProps): React.JSX.Element;
+export { Calendar };

package/dist/components/calendar/date-picker.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type CalendarProps } from "@/components/calendar/calendar";
+export type DatePickerLabels = CalendarProps["labels"] & {
+    placeholder?: string;
+};
+export type DatePickerProps = Omit<CalendarProps, "mode" | "range" | "onRangeChange" | "labels"> & {
+    placeholder?: string;
+    labels?: DatePickerLabels;
+    disabled?: boolean;
+    formatValue?: (value: string) => React.ReactNode;
+    triggerClassName?: string;
+    contentClassName?: string;
+};
+declare function DatePicker({ value, onValueChange, placeholder, labels, disabled, formatValue, triggerClassName, contentClassName, className, ...calendarProps }: DatePickerProps): React.JSX.Element;
+export { DatePicker };

package/dist/components/calendar/date-range-picker.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type CalendarDateRange, type CalendarProps } from "@/components/calendar/calendar";
+export type DateRangePickerValue = CalendarDateRange;
+export type DateRangePickerLabels = CalendarProps["labels"] & {
+    placeholder?: string;
+};
+export type DateRangePickerProps = Omit<CalendarProps, "mode" | "value" | "onValueChange" | "range" | "onRangeChange" | "labels"> & {
+    value?: DateRangePickerValue;
+    onValueChange?: (value: DateRangePickerValue) => void;
+    labels?: DateRangePickerLabels;
+    placeholder?: string;
+    disabled?: boolean;
+    formatValue?: (value: string) => React.ReactNode;
+    triggerClassName?: string;
+    contentClassName?: string;
+};
+declare function DateRangePicker({ className, value, onValueChange, labels, placeholder, disabled, formatValue, triggerClassName, contentClassName, ...calendarProps }: DateRangePickerProps): React.JSX.Element;
+export { DateRangePicker };

package/dist/components/calendar/date-utils.d.ts

@@ -0,0 +1,12 @@
+declare function toDateKey(date: Date): string;
+declare function parseDateKey(value?: string | null): Date | null;
+declare function startOfMonth(date: Date): Date;
+declare function addMonths(date: Date, amount: number): Date;
+declare function isSameMonth(left: Date, right: Date): boolean;
+declare function isBeforeDate(left: string, right?: string | null): boolean;
+declare function isAfterDate(left: string, right?: string | null): boolean;
+declare function isWithinRange(date: string, from?: string | null, to?: string | null): boolean;
+declare function getMonthLabel(date: Date, locale?: string): string;
+declare function getWeekdayLabels(locale?: string, weekStartsOn?: 0 | 1): string[];
+declare function getMonthDays(month: Date, weekStartsOn?: 0 | 1): Date[];
+export { addMonths, getMonthDays, getMonthLabel, getWeekdayLabels, isAfterDate, isBeforeDate, isSameMonth, isWithinRange, parseDateKey, startOfMonth, toDateKey, };

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

@@ -0,0 +1,4 @@
+export * from "./date-utils";
+export * from "./calendar";
+export * from "./date-picker";
+export * from "./date-range-picker";

package/dist/components/command/command-palette.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+export type CommandPaletteItem = {
+    id: string;
+    label: React.ReactNode;
+    value?: string;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: React.ReactNode;
+    disabled?: boolean;
+    disabledReason?: React.ReactNode;
+    hidden?: boolean;
+    keywords?: string[];
+    closeOnSelect?: boolean;
+    onSelect?: () => void | Promise<void>;
+};
+export type CommandPaletteGroup = {
+    id: string;
+    label?: React.ReactNode;
+    items?: CommandPaletteItem[];
+    loadItems?: (search: string) => Promise<CommandPaletteItem[]>;
+    loadingLabel?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    hidden?: boolean;
+};
+export type CommandPaletteRecentConfig = {
+    enabled?: boolean;
+    label?: React.ReactNode;
+    limit?: number;
+};
+export type CommandPaletteProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    placeholder?: string;
+    emptyLabel?: React.ReactNode;
+    loadingLabel?: React.ReactNode;
+    groups: CommandPaletteGroup[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    debounceMs?: number;
+    recent?: CommandPaletteRecentConfig | boolean;
+    filterItem?: (item: CommandPaletteItem, search: string) => boolean;
+    renderEmpty?: (search: string) => React.ReactNode;
+    renderLoading?: (search: string) => React.ReactNode;
+    onItemSelect?: (item: CommandPaletteItem, group: CommandPaletteGroup) => void;
+    className?: string;
+    contentClassName?: string;
+    inputClassName?: string;
+    listClassName?: string;
+};
+declare function CommandPalette({ open, onOpenChange, title, description, placeholder, emptyLabel, loadingLabel, groups, value, onValueChange, debounceMs, recent, filterItem, renderEmpty, renderLoading, onItemSelect, className, contentClassName, inputClassName, listClassName, }: CommandPaletteProps): React.JSX.Element;
+declare function useCommandPaletteShortcut(onOpenChange: (open: boolean) => void, enabled?: boolean): void;
+export { CommandPalette, useCommandPaletteShortcut };

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

@@ -0,0 +1 @@
+export * from "./command-palette";

package/dist/components/data-table/data-table-actions-column.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { ColumnDef, Row } from "@tanstack/react-table";
+import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions";
+export type DataTableActionsColumnOptions<TData> = {
+    id?: string;
+    size?: number;
+    header?: React.ReactNode;
+    headerClassName?: string;
+    cellClassName?: string;
+    actions?: DataTableRowAction<TData>[];
+    getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[];
+    label?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+};
+declare function createDataTableActionsColumn<TData>({ id, size, header, headerClassName, cellClassName, actions, getActions, label, emptyLabel, }?: DataTableActionsColumnOptions<TData>): ColumnDef<TData>;
+export { createDataTableActionsColumn };

package/dist/components/data-table/data-table-bulk-actions.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type ActionMenuItem, type ActionMenuProps } from "@/components/actions/action-menu";
+export type DataTableBulkAction<TData> = Omit<ActionMenuItem, "onSelect"> & {
+    onSelect?: (rows: TData[]) => void | Promise<void>;
+};
+export type DataTableBulkActionsProps<TData> = Omit<ActionMenuProps, "actions" | "trigger"> & {
+    rows: TData[];
+    actions: DataTableBulkAction<TData>[];
+    label?: React.ReactNode;
+    selectedLabel?: (count: number) => React.ReactNode;
+    clearLabel?: React.ReactNode;
+    onClearSelection?: () => void;
+    hideWhenEmpty?: boolean;
+    triggerClassName?: string;
+};
+declare function DataTableBulkActions<TData>({ rows, actions, label, selectedLabel, clearLabel, onClearSelection, hideWhenEmpty, triggerClassName, disabled, ...props }: DataTableBulkActionsProps<TData>): React.JSX.Element | null;
+export { DataTableBulkActions };

package/dist/components/data-table/data-table-column-visibility-menu.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { Table as TanStackTable } from "@tanstack/react-table";
+export type DataTableColumnVisibilityMenuProps<TData> = {
+    table: TanStackTable<TData>;
+    label?: React.ReactNode;
+    triggerLabel?: React.ReactNode;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    triggerClassName?: string;
+    contentClassName?: string;
+    getColumnLabel?: (columnId: string) => React.ReactNode;
+};
+declare function DataTableColumnVisibilityMenu<TData>({ table, label, triggerLabel, align, side, triggerClassName, contentClassName, getColumnLabel, }: DataTableColumnVisibilityMenuProps<TData>): React.JSX.Element;
+export { DataTableColumnVisibilityMenu };

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type PaginationLabels } from "@/components/navigation/pagination";
+export type DataTablePaginationLabels = PaginationLabels & {
+    rowsPerPage?: React.ReactNode;
+    pageInfo?: (page: number, pageCount: number, rowCount?: number) => React.ReactNode;
+};
+export type DataTablePaginationProps = React.ComponentProps<"div"> & {
+    pageIndex: number;
+    pageSize: number;
+    pageCount?: number;
+    rowCount?: number;
+    pageSizeOptions?: number[];
+    disabled?: boolean;
+    showPageSize?: boolean;
+    labels?: DataTablePaginationLabels;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+};
+declare function getDataTablePageCount(pageSize: number, pageCount?: number, rowCount?: number): number;
+declare function DataTablePagination({ className, pageIndex, pageSize, pageCount, rowCount, pageSizeOptions, disabled, showPageSize, labels, onPageChange, onPageSizeChange, ...props }: DataTablePaginationProps): React.JSX.Element;
+export { DataTablePagination, getDataTablePageCount };

package/dist/components/data-table/data-table-row-actions.d.ts

@@ -0,0 +1,13 @@
+import type { Row } from "@tanstack/react-table";
+import { type ActionMenuItem, type ActionMenuProps } from "@/components/actions/action-menu";
+export type DataTableRowAction<TData> = Omit<ActionMenuItem, "onSelect"> & {
+    onSelect?: (row: Row<TData>, original: TData) => void | Promise<void>;
+};
+export type DataTableRowActionsProps<TData> = Omit<ActionMenuProps, "actions"> & {
+    row: Row<TData>;
+    actions?: DataTableRowAction<TData>[];
+    getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[];
+};
+declare function resolveRowActions<TData>(row: Row<TData>, actions?: DataTableRowAction<TData>[], getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]): ActionMenuItem[];
+declare function DataTableRowActions<TData>({ row, actions, getActions, ...props }: DataTableRowActionsProps<TData>): import("react").JSX.Element;
+export { DataTableRowActions, resolveRowActions };

package/dist/components/data-table/data-table-select-column.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnDef } from "@tanstack/react-table";
+export type DataTableSelectColumnOptions<TData> = {
+    id?: string;
+    size?: number;
+    headerClassName?: string;
+    cellClassName?: string;
+    ariaLabel?: {
+        selectAll?: string;
+        selectRow?: (row: TData) => string;
+    };
+};
+declare function createDataTableSelectColumn<TData>({ id, size, headerClassName, cellClassName, ariaLabel, }?: DataTableSelectColumnOptions<TData>): ColumnDef<TData>;
+export { createDataTableSelectColumn };

package/dist/components/data-table/data-table-sortable-header.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { Column } from "@tanstack/react-table";
+export type DataTableSortableHeaderProps<TData, TValue> = React.ComponentProps<"div"> & {
+    column: Column<TData, TValue>;
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    buttonClassName?: string;
+};
+declare function DataTableSortableHeader<TData, TValue>({ className, column, children, label, disabled, buttonClassName, ...props }: DataTableSortableHeaderProps<TData, TValue>): React.JSX.Element;
+export { DataTableSortableHeader };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type DataTableToolbarProps = React.ComponentProps<"div"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    search?: React.ReactNode;
+    filters?: React.ReactNode;
+    actions?: React.ReactNode;
+    selectionActions?: React.ReactNode;
+    selectedCount?: number;
+    totalCount?: number;
+    selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode;
+};
+declare function DataTableToolbar({ className, title, description, search, filters, actions, selectionActions, selectedCount, totalCount, selectedLabel, children, ...props }: DataTableToolbarProps): React.JSX.Element;
+export { DataTableToolbar };

package/dist/components/data-table/data-table-view-presets.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type DataTableViewPreset<TValue extends string = string> = {
+    value: TValue;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    count?: React.ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+export type DataTableViewPresetsProps<TValue extends string = string> = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: TValue;
+    presets: DataTableViewPreset<TValue>[];
+    onValueChange?: (value: TValue | undefined, preset?: DataTableViewPreset<TValue>) => void;
+    clearable?: boolean;
+    clearLabel?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    size?: "xs" | "sm" | "default";
+    variant?: "tabs" | "buttons" | "pills";
+    renderPreset?: (preset: DataTableViewPreset<TValue>, state: {
+        active: boolean;
+    }) => React.ReactNode;
+    presetClassName?: string;
+    activePresetClassName?: string;
+};
+declare function DataTableViewPresets<TValue extends string = string>({ className, value, presets, onValueChange, clearable, clearLabel, emptyLabel, size, variant, renderPreset, presetClassName, activePresetClassName, ...props }: DataTableViewPresetsProps<TValue>): React.JSX.Element;
+export { DataTableViewPresets };

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { type Cell, type ColumnDef, type Header, type OnChangeFn, type Row, type RowSelectionState, type SortingState, type Table as TanStackTable, type VisibilityState } from "@tanstack/react-table";
+import { type DataTableBulkAction } from "@/components/data-table/data-table-bulk-actions";
+import { type DataTablePaginationProps } from "@/components/data-table/data-table-pagination";
+import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions";
+import { type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar";
+import { type EmptyStateProps } from "@/components/feedback/empty-state";
+import { type LoadingStateProps } from "@/components/feedback/loading-state";
+export type DataTableDensity = "compact" | "default" | "comfortable";
+export type DataTableLoadingVariant = "skeleton" | "state";
+export type DataTableFeatureConfig = {
+    search?: boolean;
+    columnVisibility?: boolean;
+    rowActions?: boolean;
+    bulkActions?: boolean;
+    refresh?: boolean;
+    export?: boolean;
+};
+export type DataTableSearchConfig = {
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+};
+export type DataTableActionContext<TData> = {
+    table: TanStackTable<TData>;
+    data: TData[];
+    selectedRows: TData[];
+};
+export type DataTablePaginationConfig = Pick<DataTablePaginationProps, "pageIndex" | "pageSize" | "pageCount" | "rowCount" | "pageSizeOptions" | "labels" | "showPageSize"> & {
+    manual?: boolean;
+    hidden?: boolean;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+};
+export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    features?: DataTableFeatureConfig;
+    search?: DataTableSearchConfig;
+    toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode);
+    rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[];
+    bulkActions?: DataTableBulkAction<TData>[];
+    onRefresh?: (context: DataTableActionContext<TData>) => void;
+    onExport?: (context: DataTableActionContext<TData>) => void;
+    refreshLabel?: React.ReactNode;
+    exportLabel?: React.ReactNode;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    isLoading?: boolean;
+    isError?: boolean;
+    emptyState?: EmptyStateProps;
+    errorState?: EmptyStateProps;
+    loadingState?: LoadingStateProps;
+    loadingVariant?: DataTableLoadingVariant;
+    toolbar?: React.ReactNode | ((table: TanStackTable<TData>) => React.ReactNode);
+    toolbarProps?: DataTableToolbarProps | ((table: TanStackTable<TData>) => DataTableToolbarProps);
+    pagination?: DataTablePaginationConfig | false;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    columnVisibility?: VisibilityState;
+    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;
+    onRowDoubleClick?: (row: Row<TData>) => void;
+    getRowDisabled?: (row: Row<TData>) => boolean;
+    density?: DataTableDensity;
+    striped?: boolean;
+    bordered?: boolean;
+    stickyHeader?: boolean;
+    skeletonRows?: number;
+    skeletonCellClassName?: string;
+    cellFallback?: React.ReactNode;
+    tableClassName?: string;
+    tableWrapperClassName?: string;
+    headerCellClassName?: string | ((header: Header<TData, unknown>) => string);
+    cellClassName?: string | ((cell: Cell<TData, unknown>) => string);
+    rowClassName?: string | ((row: Row<TData>) => string);
+};
+declare function DataTable<TData, TValue = unknown>({ className, columns, data, title, description, features, search, toolbarActions, rowActions, bulkActions, onRefresh, onExport, refreshLabel, exportLabel, getRowId, isLoading, isError, emptyState, errorState, loadingState, loadingVariant, toolbar, toolbarProps, pagination, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, rowSelection, onRowSelectionChange, enableRowSelection, renderMobileCard, onRowClick, onRowDoubleClick, getRowDisabled, density, striped, bordered, stickyHeader, skeletonRows, skeletonCellClassName, cellFallback, tableClassName, tableWrapperClassName, headerCellClassName, cellClassName, rowClassName, ...props }: DataTableProps<TData, TValue>): React.JSX.Element;
+export { DataTable };

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

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

package/dist/components/display/activity-feed.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type ActivityFeedItem = {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    time?: React.ReactNode;
+    icon?: React.ReactNode;
+    tone?: "default" | "success" | "warning" | "danger" | "info" | "muted";
+    actions?: React.ReactNode;
+    hidden?: boolean;
+    className?: string;
+};
+export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    items: ActivityFeedItem[];
+    empty?: React.ReactNode;
+    compact?: boolean;
+    contentClassName?: string;
+    itemClassName?: string;
+};
+declare function ActivityFeed({ className, title, description, actions, items, empty, compact, contentClassName, itemClassName, ...props }: ActivityFeedProps): React.JSX.Element;
+export { ActivityFeed };

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded" | "square";
+export type AvatarProps = React.ComponentProps<"span"> & {
+    src?: string;
+    alt?: string;
+    name?: string;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: "online" | "offline" | "busy" | "away";
+};
+export type AvatarGroupItem = AvatarProps & {
+    key: string;
+};
+export type AvatarGroupProps = React.ComponentProps<"div"> & {
+    items: AvatarGroupItem[];
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    stacked?: boolean;
+    overflowLabel?: (count: number) => React.ReactNode;
+};
+declare function Avatar({ src, alt, name, fallback, size, shape, status, className, ...props }: AvatarProps): React.JSX.Element;
+declare function AvatarGroup({ items, max, size, shape, stacked, overflowLabel, className, ...props }: AvatarGroupProps): React.JSX.Element;
+export { Avatar, AvatarGroup };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type DataStateStatus = "idle" | "loading" | "empty" | "error" | "success";
+export type DataStateProps = React.ComponentProps<typeof Card> & {
+    status: DataStateStatus;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    icon?: React.ReactNode;
+    compact?: boolean;
+    children?: React.ReactNode;
+    retryLabel?: React.ReactNode;
+    onRetry?: () => void;
+};
+declare function DataState({ status, title, description, actions, icon, compact, children, retryLabel, onRetry, className, ...props }: DataStateProps): React.JSX.Element;
+export { DataState };

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type DescriptionListColumn = 1 | 2 | 3 | 4;
+export type DescriptionListItem = {
+    key: string;
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    span?: DescriptionListColumn;
+    hidden?: boolean;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+};
+export type DescriptionListProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    items: DescriptionListItem[];
+    columns?: DescriptionListColumn;
+    bordered?: boolean;
+    compact?: boolean;
+    emptyValue?: React.ReactNode;
+    itemClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    contentClassName?: string;
+};
+declare function DescriptionList({ title, description, actions, items, columns, bordered, compact, emptyValue, itemClassName, labelClassName, valueClassName, contentClassName, className, ...props }: DescriptionListProps): React.JSX.Element;
+export { DescriptionList };

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

@@ -0,0 +1,10 @@
+export * from "./description-list";
+export * from "./progress";
+export * from "./result";
+export * from "./timeline";
+export * from "./metric-grid";
+export * from "./info-card";
+export * from "./activity-feed";
+export * from "./status-legend";
+export * from "./avatar";
+export * from "./data-state";

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type InfoCardProps = React.ComponentProps<typeof Card> & {
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    media?: React.ReactNode;
+    orientation?: "vertical" | "horizontal";
+    compact?: boolean;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+};
+declare function InfoCard({ className, eyebrow, title, description, icon, actions, footer, media, orientation, compact, headerClassName, contentClassName, footerClassName, children, ...props }: InfoCardProps): React.JSX.Element;
+export { InfoCard };

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

@@ -0,0 +1,22 @@
+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;
+};
+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 };