@parasutcom/fds 0.1.21 → 0.1.23

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { Checkbox as Checkbox_2 } from '@base-ui/react/checkbox';
 import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
 import { Collapsible as Collapsible_2 } from '@base-ui/react/collapsible';
+import { ColumnDef } from '@tanstack/react-table';
 import { Combobox as Combobox_2 } from '@base-ui/react';
 import { Command as Command_2 } from 'cmdk';
 import { DayButton } from 'react-day-picker';
@@ -20,10 +21,14 @@ import { Radio } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroup_2 } from '@base-ui/react/radio-group';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { Row } from '@tanstack/react-table';
 import { Select as Select_2 } from '@base-ui/react/select';
 import { Separator as Separator_2 } from '@base-ui/react/separator';
 import { Switch as Switch_2 } from '@base-ui/react/switch';
+import { Table as Table_2 } from '@tanstack/react-table';
+import { TableOptions } from '@tanstack/react-table';
 import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
 import { toast } from 'sonner';
 import { ToasterProps } from 'sonner';
@@ -275,6 +280,190 @@ export declare function CommandSeparator({ className, ...props }: React_2.Compon
 
 export declare function CommandShortcut({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
 
+export declare const DataTable: typeof DataTableRoot & {
+    Toolbar: typeof DataTableToolbar;
+    Content: typeof DataTableContent;
+    Footer: typeof DataTableFooter;
+    Pagination: typeof DataTablePaginationComponent;
+    RowCount: typeof DataTableRowCount;
+    Summary: typeof DataTableSummary;
+    ColumnVisibility: typeof DataTableColumnVisibility;
+    EmptyState: typeof DataTableEmptyState;
+};
+
+/**
+ * Action definition for table rows
+ * Pure data/behavior definition — no UI opinions
+ *
+ * Handle confirmations, modals, and other business logic in onClick handler
+ */
+export declare interface DataTableAction<TData> {
+    /** Unique action identifier */
+    id: string;
+    /** Action label (used for aria-label and dropdown text) */
+    label: string;
+    /** Icon component */
+    icon?: ReactNode;
+    /**
+     * Click handler — receives the row data
+     * Handle confirmations, modals, API calls, etc. here
+     */
+    onClick: (row: TData) => void | Promise<void>;
+    /** Button variant */
+    variant?: 'default' | 'destructive' | 'outline' | 'ghost' | 'secondary';
+    /** Show as primary button (outside dropdown) */
+    primary?: boolean;
+    /** Hide from dropdown menu */
+    hideInMenu?: boolean;
+    /** Disable action based on row data or static boolean */
+    disabled?: boolean | ((row: TData) => boolean);
+    /** Show separator before this action in dropdown */
+    separator?: boolean;
+}
+
+declare function DataTableColumnVisibility<TData>({ label, }: DataTableColumnVisibilityProps): JSX.Element;
+
+/**
+ * DataTable.ColumnVisibility — column visibility toggle
+ */
+declare interface DataTableColumnVisibilityProps {
+    /** Button label (if not icon-only) */
+    label?: string;
+}
+
+declare function DataTableContent<TData>({ stickyHeader, error, errorAction, emptyAction, emptyMessage, renderEmpty, emptyHeight, }: DataTableContentProps): JSX.Element;
+
+/**
+ * DataTable.Content — the main content area (table header, rows, empty/error states)
+ */
+declare interface DataTableContentProps {
+    /** Make table header sticky. Pass the top offset (e.g., '0px', '48px', '3rem') */
+    stickyHeader?: string;
+    /** Error message — shows error state with library default design. Takes priority over empty state. */
+    error?: string | null;
+    /** Action element for error state (e.g., retry button). Developer controls text and behavior. */
+    errorAction?: ReactNode;
+    /** Action element for empty state (e.g., add new button). Developer controls text and behavior. */
+    emptyAction?: ReactNode;
+    /** Override the default empty state message */
+    emptyMessage?: string;
+    /** Full custom empty/error state (escape hatch — overrides all built-in states) */
+    renderEmpty?: () => ReactNode;
+    /** Explicit height for empty/error state (e.g., '400px', '50vh') */
+    emptyHeight?: string;
+}
+
+/**
+ * Custom options handled by the hook (not standard TanStack Table options)
+ */
+declare interface DataTableCustomOptions<TData> {
+    /** Actions configuration — automatically injects actions column */
+    actions?: DataTableAction<TData>[];
+    /** Custom actions renderer (escape hatch for full control) */
+    renderActions?: (row: Row<TData>) => ReactNode;
+    /** Selected rows as domain objects — injects selection column + manages state */
+    selectedRows?: TData[];
+    /** Callback when selected rows change */
+    onSelectedRowsChange?: (rows: TData[]) => void;
+}
+
+declare function DataTableEmptyState({ icon, title, description, action, variant, }: DataTableEmptyStateProps): JSX.Element;
+
+/**
+ * DataTable.EmptyState — consistent layout for empty and error states
+ *
+ * Use inside renderEmpty to show a centered message with optional icon and action.
+ * Works for both "no data" and "error" scenarios with the same visual design.
+ *
+ * @example
+ * <DataTable.Content
+ *     renderEmpty={() => (
+ *         <DataTable.EmptyState
+ *             icon={<AlertTriangle className="size-8 text-destructive" />}
+ *             title="Something went wrong"
+ *             description="Could not load data"
+ *             variant="destructive"
+ *             action={<Button onClick={retry}>Retry</Button>}
+ *         />
+ *     )}
+ * />
+ */
+declare interface DataTableEmptyStateProps {
+    /** Icon or media element displayed above the title */
+    icon?: ReactNode;
+    /** Main heading text */
+    title: string;
+    /** Supporting description text */
+    description?: string;
+    /** Action element (e.g., retry button) */
+    action?: ReactNode;
+    /** Visual variant — 'destructive' applies error styling to the title */
+    variant?: 'default' | 'destructive';
+}
+
+declare function DataTableFooter<TData>({ children, className, sticky }: DataTableFooterProps): JSX.Element | null;
+
+/**
+ * DataTable.Footer — layout container for the bottom section
+ * Automatically hidden when the table has no rows (empty/error states).
+ */
+declare interface DataTableFooterProps {
+    children: ReactNode;
+    className?: string;
+    /** Stick footer to the bottom of the scroll area. Pass a bottom offset (e.g., '0px') */
+    sticky?: string;
+}
+
+/**
+ * DataTable.Pagination — pagination controls
+ */
+declare function DataTablePaginationComponent<TData>(): JSX.Element;
+
+declare interface DataTableProps<TData> {
+    /** TanStack Table instance from useDataTable() */
+    table: Table_2<TData>;
+    /** Child compound components */
+    children: ReactNode;
+}
+
+/**
+ * DataTable — compound component renderer
+ * Accepts a table instance and provides context for child components.
+ * All configuration happens in useDataTable(), not here.
+ */
+declare function DataTableRoot<TData>({ table, children }: DataTableProps<TData>): JSX.Element;
+
+declare function DataTableRowCount<TData>({ count }?: DataTableRowCountProps): JSX.Element;
+
+/**
+ * DataTable.RowCount — displays record count
+ * Auto-detects from table when count is not provided
+ */
+declare interface DataTableRowCountProps {
+    /** Explicit count — when provided, overrides the auto-detected value */
+    count?: number;
+}
+
+/**
+ * DataTable.Summary — slot for custom summary content
+ */
+declare function DataTableSummary({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): JSX.Element;
+
+declare function DataTableToolbar({ children, className, sticky }: DataTableToolbarProps): JSX.Element;
+
+/**
+ * DataTable.Toolbar — layout container for toolbar items
+ */
+declare interface DataTableToolbarProps {
+    children: ReactNode;
+    className?: string;
+    /** Make toolbar sticky. Pass a top value (e.g., '0px', '64px') to set the sticky offset */
+    sticky?: string;
+}
+
 export declare function DeleteDialog({ onConfirm, children, mode, count, open: controlledOpen, onOpenChange: controlledOnOpenChange, title, description, }: DeleteDialogProps): JSX.Element;
 
 declare interface DeleteDialogProps {
@@ -824,6 +1013,57 @@ export declare function TooltipTrigger({ ...props }: Tooltip_2.Trigger.Props): J
 
 export declare function useComboboxAnchor(): React_2.RefObject<HTMLDivElement | null>;
 
+/**
+ * Creates a TanStack Table instance with automatic column injection
+ *
+ * Handles:
+ * - Selection column injection (when selectedRows or enableRowSelection is provided)
+ * - Actions column injection (when actions or renderActions is provided)
+ * - High-level selection API (selectedRows ↔ RowSelectionState conversion)
+ *
+ * All TanStack Table options are accepted directly — no abstraction layer.
+ * The developer configures pagination, sorting, filtering, manual modes, etc. here.
+ */
+export declare function useDataTable<TData>({ actions, renderActions, selectedRows, onSelectedRowsChange, columns: userColumns, getRowId, data, ...restTableOptions }: UseDataTableOptions<TData>): Table_2<TData>;
+
+/**
+ * useDataTable options = our custom options + any TanStack Table option
+ */
+export declare type UseDataTableOptions<TData> = DataTableCustomOptions<TData> & {
+    data: TData[];
+    columns: ColumnDef<TData, unknown>[];
+} & Partial<Omit<TableOptions<TData>, 'data' | 'columns'>>;
+
+/**
+ * Access row selection state from within the DataTable compound component tree.
+ *
+ * Must be called inside a component rendered within <DataTable>.
+ * When used with the high-level selection API (selectedRows/onSelectedRowsChange),
+ * clear() automatically syncs back to the external state.
+ *
+ * @example
+ * function BulkActions({ onBulkDelete }: Props) {
+ *     const { rows, count, hasSelection, clear } = useDataTableSelection<Account>()
+ *     if (!hasSelection) return null
+ *     return (
+ *         <>
+ *             <Button onClick={() => onBulkDelete(rows)}>Delete ({count})</Button>
+ *             <Button onClick={clear}>Clear</Button>
+ *         </>
+ *     )
+ * }
+ */
+export declare function useDataTableSelection<TData>(): {
+    /** The original data objects of the selected rows */
+    rows: TData[];
+    /** Number of currently selected rows */
+    count: number;
+    /** Whether at least one row is selected */
+    hasSelection: boolean;
+    /** Deselect all rows. Syncs with onSelectedRowsChange when provided. */
+    clear: () => void;
+};
+
 export declare function useIsMobile(): boolean;
 
 export declare function useSidebar(): SidebarContextProps;