@pattern-stack/frontend-patterns 0.2.0-alpha.0 → 0.2.0-alpha.11

package/dist/atoms/components/core/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: {
-    variant?: "success" | "secondary" | "default" | "info" | "warning" | "destructive" | "outline";
+    variant?: "success" | "warning" | "info" | "secondary" | "default" | "destructive" | "outline";
     size?: "sm" | "lg" | "default";
 } & import("class-variance-authority/types").ClassProp) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/atoms/components/data/DataTable/ColumnFilterDropdown.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ColumnFilterDropdown
+ *
+ * Dropdown component for filtering a DataTable column.
+ * Renders in the column header and shows the appropriate filter editor
+ * based on the column's filter configuration.
+ */
+import React from "react";
+import type { ColumnFilter, ColumnFilterConfig } from "./DataTable.filters";
+export interface ColumnFilterDropdownProps {
+    /** Column key */
+    columnKey: string;
+    /** Column header for accessibility */
+    columnHeader: string;
+    /** Filter configuration */
+    filterConfig: ColumnFilterConfig;
+    /** Current filter value (if any) */
+    currentFilter?: ColumnFilter;
+    /** Callback when filter is applied */
+    onFilterChange: (filter: ColumnFilter | null) => void;
+    /** Unique values in the column (for auto-generating select options) */
+    columnValues?: unknown[];
+    /** Category theme (1-8) */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Size variant */
+    size?: "sm" | "md";
+    /** Additional className */
+    className?: string;
+}
+export declare const ColumnFilterDropdown: React.FC<ColumnFilterDropdownProps>;
+export default ColumnFilterDropdown;
+//# sourceMappingURL=ColumnFilterDropdown.d.ts.map

package/dist/atoms/components/data/DataTable/ColumnFilterDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilterDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/ColumnFilterDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiB9D,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAGnB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,yBAAyB;IACxC,iBAAiB;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,YAAY,EAAE,kBAAkB,CAAC;IACjC,oCAAoC;IACpC,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,sCAAsC;IACtC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,uEAAuE;IACvE,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsLpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/atoms/components/data/DataTable/ColumnVisibilityToggle.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ColumnVisibilityToggle
+ *
+ * Dropdown component for toggling column visibility in DataTable.
+ * Designed to be placed in the toolbar.
+ */
+import React from "react";
+export interface ColumnInfo {
+    key: string;
+    header: string | React.ReactNode;
+}
+export interface ColumnVisibilityToggleProps {
+    /** All available columns */
+    columns: ColumnInfo[];
+    /** Currently visible column keys */
+    visibleColumns: Set<string>;
+    /** Callback when visibility changes */
+    onVisibilityChange: (columns: Set<string>) => void;
+    /** Columns that cannot be hidden */
+    lockedColumns?: string[];
+    /** Category theme (1-8) */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Trigger button content */
+    trigger?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Dropdown alignment */
+    align?: "start" | "center" | "end";
+}
+export declare const ColumnVisibilityToggle: React.FC<ColumnVisibilityToggleProps>;
+export default ColumnVisibilityToggle;
+//# sourceMappingURL=ColumnVisibilityToggle.d.ts.map

package/dist/atoms/components/data/DataTable/ColumnVisibilityToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnVisibilityToggle.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/ColumnVisibilityToggle.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,2BAA2B;IAC1C,4BAA4B;IAC5B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,oCAAoC;IACpC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,uCAAuC;IACvC,kBAAkB,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA6IxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/atoms/components/data/DataTable/DataTable.d.ts

@@ -1,5 +1,8 @@
 import type { IListLoadable } from "../../../types";
 import type { DataTableProps } from "./DataTable.types";
-export type { Column, ResponsiveColumn, DataTableProps, } from "./DataTable.types";
-export declare function DataTable<T extends Record<string, unknown>>({ data, columns, searchPlaceholder, pageSize, showPagination, showSearch, onRowClick, emptyMessage, className, hover, isLoading, loadingItemCount, responsive, renderMobileCard, ui, }: DataTableProps<T> & IListLoadable): import("react/jsx-runtime").JSX.Element;
+export type { Column, ResponsiveColumn, DataTableProps, DataTableColumn, QueryWithMeta, SelectionConfig, } from "./DataTable.types";
+export type { ExpansionConfig, ChildRow } from "./DataTable.expansion";
+export { ExpandButton } from "./ExpandButton";
+export type { ExpandButtonProps } from "./ExpandButton";
+export declare function DataTable<T extends Record<string, unknown>>({ data: dataProp, columns: columnsProp, query, searchPlaceholder, pageSize, showPagination, showSearch, onRowClick, emptyMessage, className, hover, isLoading: isLoadingProp, loadingItemCount, responsive, renderMobileCard, ui, error: errorProp, errorTitle, errorRetry, expansion, selection, selectable, selectedIds: selectedIdsProp, onSelectionChange: onSelectionChangeProp, getRowId: getRowIdProp, selectAllMode: selectAllModeProp, }: DataTableProps<T> & IListLoadable): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/atoms/components/data/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/DataTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AASpD,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,mBAAmB,CAAC;AAK3B,YAAY,EACV,MAAM,EACN,gBAAgB,EAChB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAI3B,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,IAAI,EACJ,OAAO,EACP,iBAA+B,EAC/B,QAAa,EACb,cAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,YAAkC,EAClC,SAAc,EACd,KAAa,EACb,SAAiB,EACjB,gBAAoB,EACpB,UAAiB,EACjB,gBAAgB,EAChB,EAAE,GACH,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,aAAa,2CA0XnC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/DataTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AASpD,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,mBAAmB,CAAC;AAQ3B,YAAY,EACV,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA4BxD,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,iBAA+B,EAC/B,QAAa,EACb,cAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,YAAkC,EAClC,SAAc,EACd,KAAa,EACb,SAAS,EAAE,aAAqB,EAChC,gBAAoB,EACpB,UAAiB,EACjB,gBAAgB,EAChB,EAAE,EACF,KAAK,EAAE,SAAgB,EACvB,UAAU,EACV,UAAU,EAEV,SAAS,EAET,SAAS,EAET,UAAkB,EAClB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,iBAA0B,GAC1C,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,aAAa,2CAmqBnC"}

package/dist/atoms/components/data/DataTable/DataTable.expansion.d.ts

@@ -0,0 +1,91 @@
+/**
+ * DataTable Expansion Types
+ *
+ * Grouped configuration for row expansion feature.
+ * Follows the Ant Design pattern of grouped config objects.
+ *
+ * These types are used by:
+ * - DataTable component (expansion prop)
+ * - useExpandedRows hook (state management)
+ * - Consumer applications (type-safe expansion definitions)
+ */
+import type { ReactNode } from "react";
+/**
+ * A child row rendered as an actual <tr> element with the same columns as the parent.
+ * This allows child rows to perfectly align with parent table columns.
+ */
+export interface ChildRow {
+    /** Unique identifier for the child row */
+    id: string;
+    /**
+     * Cell content keyed by column key.
+     * Each key should match a column key from the parent table.
+     * Missing keys will render empty cells.
+     */
+    cells: Record<string, ReactNode>;
+    /** Optional click handler for the child row */
+    onClick?: () => void;
+    /** Optional additional CSS class for the child row */
+    className?: string;
+}
+/**
+ * Configuration for row expansion behavior.
+ * Follows the grouped API pattern like SelectionConfig.
+ */
+export interface ExpansionConfig<T> {
+    /** Currently expanded row IDs (controlled) */
+    expandedIds: Set<string>;
+    /** Called when expansion state changes */
+    onChange: (ids: Set<string>) => void;
+    /**
+     * Render expanded content for a row (freeform content in colSpan cell).
+     * Use this for complex layouts that don't follow table structure.
+     * @deprecated Prefer renderChildRows for tabular child data
+     */
+    renderContent?: (row: T) => ReactNode;
+    /**
+     * Render child rows as actual <tr> elements with the same columns.
+     * Each child row's cells align perfectly with parent table columns.
+     * Preferred over renderContent for hierarchical tabular data.
+     */
+    renderChildRows?: (row: T) => ChildRow[];
+    /** Determine if a row can be expanded (default: () => true) */
+    canExpand?: (row: T) => boolean;
+    /** Extract row ID (default: row.id) */
+    getRowId?: (row: T) => string;
+    /**
+     * Left indentation for expanded content (only used with renderContent).
+     * Auto-calculated based on visible columns (expansion + selection) if not provided.
+     * Override for custom layouts like nested tables.
+     * @default Auto-calculated: "56px" (no selection) or "88px" (with selection)
+     */
+    contentIndent?: string;
+    /**
+     * CSS class applied to child rows rendered via renderChildRows.
+     * @default "bg-muted/20"
+     */
+    childRowClassName?: string;
+    /**
+     * Whether to indent the first column of child rows with a visual connector.
+     * Set to false for a cleaner left-aligned look.
+     * @default true
+     */
+    childRowIndent?: boolean;
+}
+/**
+ * Props for the animated expanded content component.
+ * Internal use only - not exported from the package.
+ */
+export interface ExpandedRowContentProps<T> {
+    /** Row data */
+    row: T;
+    /** Whether the row is currently expanded */
+    isExpanded: boolean;
+    /** Total number of columns (for colspan) */
+    totalColumns: number;
+    /** Function to render the expanded content */
+    renderExpandedContent: (row: T) => ReactNode;
+    /** Left indentation for expanded content */
+    contentIndent: string;
+}
+//# sourceMappingURL=DataTable.expansion.d.ts.map

package/dist/atoms/components/data/DataTable/DataTable.expansion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.expansion.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/DataTable.expansion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACjC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,8CAA8C;IAC9C,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IACtC;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,QAAQ,EAAE,CAAC;IACzC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;IAChC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;GAGG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,eAAe;IACf,GAAG,EAAE,CAAC,CAAC;IACP,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,qBAAqB,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC7C,4CAA4C;IAC5C,aAAa,EAAE,MAAM,CAAC;CACvB"}

package/dist/atoms/components/data/DataTable/DataTable.filters.d.ts

@@ -0,0 +1,271 @@
+/**
+ * DataTable Filter Types
+ *
+ * Pure TypeScript types for the filtering system.
+ * Zero runtime code - all types are stripped at compile time.
+ *
+ * These types are used by:
+ * - useTableFilters hook (state management)
+ * - Filter editor components (UI)
+ * - DataTable integration (props)
+ * - Consumer applications (type-safe filter definitions)
+ */
+import type React from "react";
+/**
+ * All supported filter operators.
+ * Matches common backend filter APIs (Django, FastAPI, Prisma, etc.)
+ */
+export type FilterOperator = "equals" | "not_equals" | "contains" | "not_contains" | "starts_with" | "ends_with" | "gt" | "gte" | "lt" | "lte" | "between" | "in" | "not_in" | "is_empty" | "is_not_empty";
+/**
+ * Default operators for each filter type.
+ * Used when column doesn't specify explicit operators.
+ */
+export declare const DEFAULT_OPERATORS: Record<ColumnFilterType, FilterOperator[]>;
+/**
+ * Human-readable labels for operators.
+ */
+export declare const OPERATOR_LABELS: Record<FilterOperator, string>;
+/**
+ * Filter value types - discriminated union for type safety.
+ * The `type` field determines which value shape is used.
+ */
+export type FilterValue = {
+    type: "text";
+    value: string;
+} | {
+    type: "number";
+    value: number;
+} | {
+    type: "number_range";
+    min?: number;
+    max?: number;
+} | {
+    type: "date";
+    value: Date;
+} | {
+    type: "date_range";
+    start?: Date;
+    end?: Date;
+} | {
+    type: "select";
+    value: string;
+} | {
+    type: "multi_select";
+    values: string[];
+} | {
+    type: "boolean";
+    value: boolean;
+};
+/**
+ * Extract the value type from a FilterValue.
+ */
+export type FilterValueType = FilterValue["type"];
+/**
+ * A single filter applied to a column.
+ */
+export interface ColumnFilter {
+    /** Column key this filter applies to */
+    columnKey: string;
+    /** Filter operator */
+    operator: FilterOperator;
+    /** Filter value */
+    value: FilterValue;
+}
+/**
+ * Complete filter state for a DataTable.
+ */
+export interface FilterState {
+    /** Per-column filters keyed by column key */
+    columnFilters: Record<string, ColumnFilter>;
+    /** Active quick filter values */
+    quickFilters: QuickFilterValue[];
+}
+/**
+ * Empty filter state constant.
+ */
+export declare const EMPTY_FILTER_STATE: FilterState;
+/**
+ * Filter type determines the UI component and operators.
+ */
+export type ColumnFilterType = "text" | "select" | "multi_select" | "number" | "number_range" | "date" | "date_range" | "boolean";
+/**
+ * Option for select/multi-select filters.
+ */
+export interface FilterOption {
+    /** Option value (stored in filter) */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Optional count (for faceted filtering) */
+    count?: number;
+    /** Optional color for badge rendering */
+    color?: string;
+}
+/**
+ * Configuration for a column's filter behavior.
+ * Applied to column definitions via the `filter` prop.
+ */
+export interface ColumnFilterConfig {
+    /** Filter type determines the UI component */
+    type: ColumnFilterType;
+    /** Available operators (defaults based on type) */
+    operators?: FilterOperator[];
+    /** Options for select/multi_select types */
+    options?: FilterOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Load options dynamically (for large option sets) */
+    loadOptions?: (search: string) => Promise<FilterOption[]>;
+    /** Custom filter function for client-side filtering */
+    filterFn?: <T>(item: T, filter: ColumnFilter) => boolean;
+    /** Minimum value for number/date filters */
+    min?: number | Date;
+    /** Maximum value for number/date filters */
+    max?: number | Date;
+    /** Step for number filters */
+    step?: number;
+}
+/**
+ * Quick filter definition - describes an available filter.
+ * Consumers define these to create a quick filter bar.
+ */
+export interface QuickFilterDefinition {
+    /** Unique identifier */
+    id: string;
+    /** Display label for the filter button/dropdown */
+    label: string;
+    /** Column key this filter applies to */
+    columnKey: string;
+    /** Filter type determines the picker UI */
+    type: ColumnFilterType;
+    /** Icon to display with the filter */
+    icon?: React.ReactNode;
+    /** Options for select/multi_select types */
+    options?: FilterOption[];
+    /** Load options dynamically */
+    loadOptions?: (search: string) => Promise<FilterOption[]>;
+    /** Default operator (defaults based on type) */
+    defaultOperator?: FilterOperator;
+    /** Category for grouping filters in the UI */
+    category?: string;
+}
+/**
+ * Active quick filter value.
+ * Represents a filter that the user has applied.
+ */
+export interface QuickFilterValue {
+    /** Unique ID for this filter instance */
+    id: string;
+    /** References QuickFilterDefinition.id */
+    filterId: string;
+    /** The filter value */
+    value: FilterValue;
+    /** Display label for the pill (pre-formatted) */
+    label: string;
+}
+/**
+ * Base props for all filter editors.
+ */
+export interface BaseFilterEditorProps {
+    /** Current filter value (if editing existing filter) */
+    currentFilter?: ColumnFilter;
+    /** Callback when filter is applied */
+    onApply: (filter: ColumnFilter) => void;
+    /** Callback when filter is cleared */
+    onClear: () => void;
+    /** Column key for the filter */
+    columnKey: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Auto-focus the input */
+    autoFocus?: boolean;
+}
+/**
+ * Props for text filter editor.
+ */
+export interface TextFilterEditorProps extends BaseFilterEditorProps {
+    /** Available operators */
+    operators?: FilterOperator[];
+}
+/**
+ * Props for select filter editor.
+ */
+export interface SelectFilterEditorProps extends BaseFilterEditorProps {
+    /** Available options */
+    options: FilterOption[];
+    /** Load options dynamically */
+    loadOptions?: (search: string) => Promise<FilterOption[]>;
+    /** Allow searching options */
+    searchable?: boolean;
+}
+/**
+ * Props for multi-select filter editor.
+ */
+export interface MultiSelectFilterEditorProps extends BaseFilterEditorProps {
+    /** Available options */
+    options: FilterOption[];
+    /** Load options dynamically */
+    loadOptions?: (search: string) => Promise<FilterOption[]>;
+    /** Allow searching options */
+    searchable?: boolean;
+    /** Maximum selections allowed */
+    maxSelections?: number;
+}
+/**
+ * Props for number filter editor.
+ */
+export interface NumberFilterEditorProps extends BaseFilterEditorProps {
+    /** Available operators */
+    operators?: FilterOperator[];
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Allow range selection */
+    allowRange?: boolean;
+}
+/**
+ * Props for date filter editor.
+ */
+export interface DateFilterEditorProps extends BaseFilterEditorProps {
+    /** Available operators */
+    operators?: FilterOperator[];
+    /** Minimum date */
+    min?: Date;
+    /** Maximum date */
+    max?: Date;
+    /** Allow range selection */
+    allowRange?: boolean;
+    /** Include time picker */
+    includeTime?: boolean;
+}
+/**
+ * Props for boolean filter editor.
+ */
+export interface BooleanFilterEditorProps extends BaseFilterEditorProps {
+    /** Label for true value */
+    trueLabel?: string;
+    /** Label for false value */
+    falseLabel?: string;
+}
+/**
+ * Helper to check if a filter value is empty.
+ */
+export declare function isFilterValueEmpty(value: FilterValue): boolean;
+/**
+ * Format a filter value for display in a pill.
+ */
+export declare function formatFilterValueForDisplay(value: FilterValue, options?: FilterOption[]): string;
+/**
+ * Create an empty filter value for a given type.
+ */
+export declare function createEmptyFilterValue(type: ColumnFilterType): FilterValue;
+/**
+ * Get default operator for a filter type.
+ */
+export declare function getDefaultOperator(type: ColumnFilterType): FilterOperator;
+//# sourceMappingURL=DataTable.filters.d.ts.map

package/dist/atoms/components/data/DataTable/DataTable.filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.filters.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/DataTable/DataTable.filters.ts"],"names":[],"mappings":"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"}

package/dist/atoms/components/data/DataTable/DataTable.types.d.ts

@@ -1,5 +1,27 @@
 import type { ResponsiveColumnConfig, DisplayMode, ResponsiveValue, Breakpoint } from "../../../config/responsive";
-import type { UIConfig } from "../../../types/ui-config";
+import type { UIConfig, UIType, FieldFormat } from "../../../types/ui-config";
+import type { ColumnMetadata } from "../../../types/ui-metadata";
+import type { ExpansionConfig } from "./DataTable.expansion";
+/**
+ * Unified query result with metadata - compatible with sync-patterns generated hooks.
+ * This interface matches UnifiedQueryResultWithMeta from sync-patterns.
+ */
+export interface QueryWithMeta<T> {
+    /** Entity data array */
+    data: T[] | undefined;
+    /** Whether data is loading */
+    isLoading: boolean;
+    /** Data query error */
+    error: Error | null;
+    /** Column metadata for rendering */
+    columns: ColumnMetadata[];
+    /** Whether metadata is still loading */
+    isLoadingMetadata: boolean;
+    /** Metadata-specific error */
+    metadataError: Error | null;
+    /** True when both data AND metadata are loaded */
+    isReady: boolean;
+}
 export interface Column<T> {
     key: string;
     header: string | React.ReactNode;
@@ -7,8 +29,21 @@ export interface Column<T> {
     sortable?: boolean;
     filterable?: boolean;
     width?: string;
-    /** Auto-render badges for status/category columns */
-    type?: "status" | "category" | "default";
+    /**
+     * Field type for automatic rendering.
+     * When set, DataTable uses defaultFieldRenderers to format the cell.
+     * Overridden by custom `cell` renderer if provided.
+     *
+     * Supports all UIType values: text, password, number, money, percent,
+     * date, datetime, email, url, phone, boolean, badge, status, entity,
+     * user, json, image, rating, color, file.
+     */
+    type?: UIType;
+    /**
+     * Format configuration for typed fields.
+     * Used by money (currency, decimals, locale), date (locale), status (statusColors), etc.
+     */
+    format?: FieldFormat;
 }
 export interface ResponsiveColumn<T> extends Column<T>, ResponsiveColumnConfig {
     /** Responsive width adjustments */
@@ -22,9 +57,46 @@ export interface ResponsiveColumn<T> extends Column<T>, ResponsiveColumnConfig {
     /** Priority for column visibility (higher = more important) */
     priority?: number;
 }
+/**
+ * Union type for DataTable columns - accepts both internal Column format
+ * and backend ColumnMetadata format for seamless API integration.
+ */
+export type DataTableColumn<T> = Column<T> | ResponsiveColumn<T> | ColumnMetadata;
+/**
+ * Configuration for row selection behavior (grouped API).
+ * This is the preferred API over flat selection props.
+ */
+export interface SelectionConfig<T> {
+    /** Currently selected row IDs (controlled) */
+    selectedIds: Set<string>;
+    /** Called when selection changes */
+    onChange: (ids: Set<string>) => void;
+    /** Extract row ID (default: row.id) */
+    getRowId?: (row: T) => string;
+    /** What "select all" selects */
+    mode?: "page" | "all";
+}
 export interface DataTableProps<T> {
-    data: T[];
-    columns: Column<T>[] | ResponsiveColumn<T>[];
+    /**
+     * Raw data array. Use this OR `query`, not both.
+     * If `query` is provided, this is ignored.
+     */
+    data?: T[];
+    /**
+     * Column definitions. If `query` is provided and has columns,
+     * this prop takes precedence (allows overriding query columns).
+     */
+    columns?: DataTableColumn<T>[];
+    /**
+     * Unified query result with metadata from sync-patterns.
+     * When provided, extracts data, columns, loading, and error states automatically.
+     * Explicit props (data, columns, isLoading, error) take precedence over query values.
+     *
+     * @example
+     * const query = useAccountsWithMeta()
+     * <DataTable query={query} />
+     */
+    query?: QueryWithMeta<T>;
     searchPlaceholder?: string;
     pageSize?: number;
     showPagination?: boolean;
@@ -47,5 +119,83 @@ export interface DataTableProps<T> {
     }) => React.ReactNode;
     /** UI configuration for automatic field rendering */
     ui?: UIConfig<T>;
+    /** Error state - renders error message instead of table */
+    error?: Error | string | null;
+    /** Custom error title (default: "Error loading data") */
+    errorTitle?: string;
+    /** Callback for retry button */
+    errorRetry?: () => void;
+    /**
+     * Configuration for row expansion behavior.
+     * When provided, an expand button column is prepended to the table.
+     *
+     * @example
+     * ```tsx
+     * const { expandedIds, toggleExpand } = useExpandedRows()
+     *
+     * <DataTable
+     *   data={categories}
+     *   columns={columns}
+     *   expansion={{
+     *     expandedIds,
+     *     onChange: (ids) => setExpandedIds(ids),
+     *     renderContent: (row) => <SubcategoryList items={row.subcategories} />,
+     *   }}
+     * />
+     * ```
+     */
+    expansion?: ExpansionConfig<T>;
+    /**
+     * Configuration for row selection behavior (grouped API).
+     * When provided, a selection column is prepended to the table.
+     * This is the preferred API over flat selection props.
+     *
+     * @example
+     * ```tsx
+     * <DataTable
+     *   data={items}
+     *   columns={columns}
+     *   selection={{
+     *     selectedIds,
+     *     onChange: setSelectedIds,
+     *     mode: 'page',
+     *   }}
+     * />
+     * ```
+     */
+    selection?: SelectionConfig<T>;
+    /**
+     * Enable row selection with checkboxes.
+     * When true, a selection column is prepended to the table.
+     * @default false
+     * @deprecated Use `selection` prop instead for grouped API
+     */
+    selectable?: boolean;
+    /**
+     * Set of selected row IDs (controlled).
+     * Required when `selectable` is true.
+     * @deprecated Use `selection.selectedIds` instead
+     */
+    selectedIds?: Set<string>;
+    /**
+     * Callback fired when selection changes.
+     * Required when `selectable` is true.
+     * @deprecated Use `selection.onChange` instead
+     */
+    onSelectionChange?: (selectedIds: Set<string>) => void;
+    /**
+     * Function to extract unique ID from a row.
+     * @default (row) => row.id
+     * @deprecated Use `selection.getRowId` instead
+     */
+    getRowId?: (row: T) => string;
+    /**
+     * What "select all" checkbox selects.
+     * - 'page': Only visible rows on current page
+     * - 'all': All rows matching current filters
+     * @default 'page'
+     * @deprecated Use `selection.mode` instead
+     */
+    selectAllMode?: "page" | "all";
 }
 //# sourceMappingURL=DataTable.types.d.ts.map