@tempots/beatui 0.94.0 → 1.0.0

package/dist/types/components/data/data-source.d.ts

@@ -0,0 +1,190 @@
+import { Signal, Value } from '@tempots/dom';
+import { FilterBase } from './filter';
+/**
+ * Sort direction for a column.
+ */
+export type SortDirection = 'asc' | 'desc';
+/**
+ * Describes how a column should be sorted.
+ *
+ * @typeParam C - Column identifier type. Defaults to `string`; narrow to a
+ *   union of literal column IDs for compile-time safety.
+ */
+export interface SortDescriptor<C extends string = string> {
+    /** Column identifier */
+    column: C;
+    /** Sort direction */
+    direction: SortDirection;
+}
+/**
+ * An action available when rows are selected.
+ */
+export interface BulkAction {
+    /** Display label */
+    label: string;
+    /** Optional icon identifier */
+    icon?: string;
+    /** Callback receiving the set of selected row IDs */
+    onClick: (selected: Set<string>) => void;
+}
+/**
+ * Configuration options for {@link createDataSource}.
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+/**
+ * A group of rows sharing the same group-by value.
+ *
+ * @typeParam T - The type of data rows
+ */
+export interface RowGroup<T> {
+    /** The stringified group key */
+    key: string;
+    /** Rows belonging to this group */
+    rows: T[];
+}
+export interface DataSourceOptions<T, C extends string = string> {
+    /** The source data array (static or reactive) */
+    data: Value<T[]>;
+    /** Returns a unique string ID for each row */
+    rowId: (row: T) => string;
+    /** Maps column IDs to accessor functions that extract the column value from a row */
+    accessors?: Partial<Record<C, (row: T) => unknown>>;
+    /** Maps column IDs to custom comparator functions for sorting */
+    comparators?: Partial<Record<C, (a: unknown, b: unknown) => number>>;
+    /** Initial sort state */
+    initialSort?: SortDescriptor<C>[];
+    /** Initial filter state */
+    initialFilters?: FilterBase<C>[];
+    /** Page size (undefined = no pagination) */
+    pageSize?: Value<number>;
+    /** Allow sorting on multiple columns simultaneously. @default false */
+    multiSort?: Value<boolean>;
+    /** When true, skips client-side sort/filter/paginate (caller drives rows externally). @default false */
+    serverSide?: Value<boolean>;
+    /** Column to group rows by. `undefined` disables grouping. */
+    groupBy?: Value<C | undefined>;
+    /** Called whenever sort state changes */
+    onSortChange?: (sort: SortDescriptor<C>[]) => void;
+    /** Called whenever filter state changes */
+    onFilterChange?: (filters: FilterBase<C>[]) => void;
+    /** Called whenever the current page changes */
+    onPageChange?: (page: number) => void;
+    /** Called whenever selection changes */
+    onSelectionChange?: (selected: Set<string>) => void;
+    /** Called whenever the group-by column changes */
+    onGroupByChange?: (column: C | undefined) => void;
+    /** Evaluate a custom (non-builtin) filter kind. Return `true` to include the row. */
+    evaluateFilter?: (filter: FilterBase<C>, row: T) => boolean;
+}
+/**
+ * A headless reactive data source managing sort, filter, selection, and pagination state.
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface DataSource<T, C extends string = string> {
+    /** Final visible rows (sorted, filtered, paginated) */
+    rows: Signal<T[]>;
+    /** Total number of rows in source data */
+    totalRows: Signal<number>;
+    /** Number of rows after filtering (before pagination) */
+    totalFilteredRows: Signal<number>;
+    /** Current sort descriptors */
+    sort: Signal<SortDescriptor<C>[]>;
+    /** Toggle sort on a column: none → asc → desc → none. Pass `{ multi: true }` to add/modify without replacing other sorts. */
+    toggleSort: (column: C, opts?: {
+        multi?: boolean;
+    }) => void;
+    /** Replace the full sort state */
+    setSort: (sort: SortDescriptor<C>[]) => void;
+    /** Reactive sort direction for a specific column */
+    getSortDirection: (column: C) => Signal<SortDirection | undefined>;
+    /** Clear all sorts */
+    resetSort: () => void;
+    /** Current filter descriptors */
+    filters: Signal<FilterBase<C>[]>;
+    /** Set or replace all filters on a column */
+    setFilter: (filter: FilterBase<C>) => void;
+    /** Add a filter alongside existing ones on the same column */
+    addFilter: (filter: FilterBase<C>) => void;
+    /** Remove all filters from a column */
+    removeFilter: (column: C) => void;
+    /** Reactive list of filters for a specific column */
+    getColumnFilters: (column: C) => Signal<FilterBase<C>[]>;
+    /** Reactive text filter value for a specific column (value from first TextFilter, or '') */
+    getTextFilterValue: (column: C) => Signal<string>;
+    /** Clear all filters */
+    resetFilters: () => void;
+    /** Set of selected row IDs */
+    selected: Signal<Set<string>>;
+    /** Toggle selection of a row */
+    toggleSelect: (id: string) => void;
+    /** Add rows to selection */
+    select: (ids: string[]) => void;
+    /** Remove rows from selection */
+    deselect: (ids: string[]) => void;
+    /** Select all currently visible (filtered) rows */
+    selectAll: () => void;
+    /** Clear selection */
+    deselectAll: () => void;
+    /** Whether all filtered rows are selected */
+    isAllSelected: Signal<boolean>;
+    /** Whether some (but not all) filtered rows are selected */
+    isSomeSelected: Signal<boolean>;
+    /** Count of selected rows */
+    selectedCount: Signal<number>;
+    /** Current page (1-indexed) */
+    currentPage: Signal<number>;
+    /** Total number of pages */
+    totalPages: Signal<number>;
+    /** Current page size */
+    pageSize: Signal<number>;
+    /** Navigate to a page */
+    setPage: (page: number) => void;
+    /** Change page size (resets to page 1) */
+    setPageSize: (size: number) => void;
+    /** Current group-by column (undefined = no grouping) */
+    groupBy: Signal<C | undefined>;
+    /** Set or clear group-by column */
+    setGroupBy: (column: C | undefined) => void;
+    /** Grouped rows (empty array when groupBy is undefined) */
+    groups: Signal<RowGroup<T>[]>;
+    /** All rows after sort and filter, before pagination */
+    allFilteredRows: Signal<T[]>;
+    /** Swap two rows by ID (only effective when no sort active) */
+    moveRow: (fromId: string, toId: string) => void;
+    /** Reset sort, filters, selection, page, and groupBy */
+    resetAll: () => void;
+    /** Clean up all reactive subscriptions */
+    dispose: () => void;
+}
+/**
+ * Creates a headless reactive data source for managing tabular data operations.
+ *
+ * Provides sorting, filtering, selection, pagination, and manual reorder as
+ * reactive signals and imperative methods. All processing happens client-side
+ * unless `serverSide` is true.
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Configuration for the data source
+ * @returns A {@link DataSource} object with reactive state and methods
+ *
+ * @example
+ * ```ts
+ * const ds = createDataSource({
+ *   data: prop([
+ *     { id: '1', name: 'Alice', age: 30 },
+ *     { id: '2', name: 'Bob', age: 25 },
+ *   ]),
+ *   rowId: row => row.id,
+ * })
+ *
+ * ds.toggleSort('name') // sort by name ascending
+ * ds.setFilter(Filter.contains('name', 'ali')) // filter name containing "ali"
+ * ds.rows.value // [{ id: '1', name: 'Alice', age: 30 }]
+ * ds.dispose()
+ * ```
+ */
+export declare function createDataSource<T, C extends string = string>(options: DataSourceOptions<T, C>): DataSource<T, C>;

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

@@ -0,0 +1,12 @@
+import { TNode } from '@tempots/dom';
+import { DataTableContext } from './data-table-context';
+/** Render non-grouped data rows. */
+export declare function renderBody<T, C extends string>(ctx: DataTableContext<T, C>): TNode;
+/** Render grouped body with collapse, footers, and group headers. */
+export declare function renderGroupedBody<T, C extends string>(ctx: DataTableContext<T, C>): TNode;
+/** Render the "no results" empty state. */
+export declare function renderEmpty<T, C extends string>(ctx: DataTableContext<T, C>): TNode;
+/** Render the loading overlay. */
+export declare function renderLoading<T, C extends string>(ctx: DataTableContext<T, C>): TNode;
+/** Render the footer row with column aggregations. */
+export declare function renderFooter<T, C extends string>(ctx: DataTableContext<T, C>): TNode;

package/dist/types/components/data/data-table-column-toggle.d.ts

@@ -0,0 +1,4 @@
+import { TNode } from '@tempots/dom';
+import { DataTableContext } from './data-table-context';
+/** Render the column visibility toggle button + flyout. */
+export declare function renderColumnToggle<T, C extends string>(ctx: DataTableContext<T, C>): TNode;

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

@@ -0,0 +1,53 @@
+import { Prop, Signal, TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { DataSource, RowGroup } from './data-source';
+import { DataColumnDef, DataTableOptions, DataTablePaginationOptions, DataTableToolbarOptions } from './data-table-types';
+export interface DataTableContext<T, C extends string = string> {
+    ds: DataSource<T, C>;
+    columns: DataColumnDef<T, C>[];
+    columnMap: Map<C, DataColumnDef<T, C>>;
+    getCol: (id: C) => DataColumnDef<T, C>;
+    rowId: (row: T) => string;
+    visibleColumns: Signal<C[]>;
+    hiddenColumns: Signal<C[]>;
+    hideableColumns: DataColumnDef<T, C>[];
+    hasColumnVisibility: Value<boolean>;
+    toggleColumnVisibility: (colId: C) => void;
+    showAllColumns: () => void;
+    columnOrder: Prop<C[]>;
+    reorderableColumns: Value<boolean>;
+    onColumnOrderChange?: (columnIds: C[]) => void;
+    dragState: {
+        columnId: C | null;
+    };
+    selectable: Value<boolean>;
+    selectableSignal: Signal<boolean>;
+    selectOnRowClickSignal: Signal<boolean>;
+    selectionAfter: boolean;
+    sortable: Value<boolean>;
+    size: Value<ControlSize>;
+    onRowClick?: (row: T) => void;
+    filterLayout: 'header' | 'row';
+    hasFilters: boolean;
+    loading: Value<boolean>;
+    showFooter: Value<boolean>;
+    emptyContent?: TNode;
+    groupCollapsible: boolean;
+    groupSummary?: (groupKey: string, rows: T[]) => TNode;
+    hasFooter: boolean;
+    rowClickable: Signal<boolean>;
+    effectiveHoverable: Signal<boolean>;
+    totalColSpan: Signal<number>;
+    collapsedGroups: Prop<Set<string>>;
+    currentGroupPageGroups: Signal<RowGroup<T>[]>;
+    toolbarConfig: Signal<DataTableToolbarOptions | false>;
+    paginationConfig: Value<DataTablePaginationOptions | false>;
+    paginationEnabledSignal: Signal<boolean>;
+    pageSizeSignal: Signal<number>;
+    effectiveTotalPages: Signal<number>;
+    effectiveCurrentPage: Signal<number>;
+    setEffectivePage: (page: number) => void;
+    showPagination: Signal<boolean>;
+    dispose: () => void;
+}
+export declare function createDataTableContext<T, C extends string = string>(options: DataTableOptions<T, C>): DataTableContext<T, C>;

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

@@ -0,0 +1,6 @@
+import { TNode } from '@tempots/dom';
+import { DataTableContext } from './data-table-context';
+/** Render the header row. */
+export declare function renderHeaderRow<T, C extends string>(ctx: DataTableContext<T, C>): TNode;
+/** Render the filter row (only when filterLayout is 'row'). */
+export declare function renderFilterRow<T, C extends string>(ctx: DataTableContext<T, C>): TNode;

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

@@ -0,0 +1,26 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { DataSource } from './data-source';
+import { ColumnFilterConfig, DataColumnDef, DataTablePaginationOptions, DataTableToolbarOptions } from './data-table-types';
+import { RowGroup } from './data-source';
+export declare function resolveToolbarOptions(toolbar: boolean | DataTableToolbarOptions): DataTableToolbarOptions | false;
+/**
+ * Partition groups into pages, keeping whole groups together.
+ * A group only spans multiple pages if it alone exceeds pageSize.
+ * Collapsed groups count as 1 row (just the header) for page capacity.
+ */
+export declare function paginateGroups<T>(groups: RowGroup<T>[], pageSize: number, collapsed: Set<string>): RowGroup<T>[][];
+export declare function resolvePaginationOptions(pagination: boolean | DataTablePaginationOptions): DataTablePaginationOptions | false;
+/**
+ * Resolve a static ColumnFilterConfig into filter UI content.
+ * Returns null when the config disables filtering.
+ */
+export declare function resolveFilterContent<T, C extends string>(config: ColumnFilterConfig<T, C> | false | undefined, ds: DataSource<T, C>, colId: C, size: Value<ControlSize>): TNode;
+/**
+ * Resolve a static ColumnFilterConfig into filter cell content (for 'row' layout).
+ */
+export declare function resolveFilterCell<T, C extends string>(config: ColumnFilterConfig<T, C> | false | undefined, ds: DataSource<T, C>, colId: C, size: Value<ControlSize>): TNode;
+/** Resolve the current filter config for a column (static snapshot) */
+export declare function getFilterConfig<T, C extends string>(col: DataColumnDef<T, C>): ColumnFilterConfig<T, C> | false | undefined;
+/** Check if a column has any filter configured (non-reactive check for setup) */
+export declare function colHasFilter<T, C extends string>(col: DataColumnDef<T, C>): boolean;

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

@@ -0,0 +1,201 @@
+import { Signal, TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { BulkAction, DataSource, SortDescriptor } from './data-source';
+import { FilterBase } from './filter';
+/** The value type of a column, used by the filter panel to determine available operators. */
+export type ColumnValueType = 'text' | 'number';
+/**
+ * Props passed to a custom filter render function.
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface FilterRenderProps<T, C extends string = string> {
+    dataSource: DataSource<T, C>;
+    column: C;
+    size: Value<ControlSize>;
+}
+/**
+ * Filter configuration for a column.
+ *
+ * - `boolean` — `true` enables a text filter
+ * - `'text'` — explicit text filter
+ * - `'number'` — shortcut for `{ type: 'panel', valueType: 'number' }`
+ * - `{ type: 'select', options }` — dropdown filter
+ * - `{ type: 'tags', options }` — multi-select tag filter
+ * - `{ type: 'panel', valueType? }` — advanced filter panel
+ * - `{ render }` — fully custom filter UI
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export type ColumnFilterConfig<T, C extends string = string> = boolean | 'text' | 'number' | {
+    type: 'select';
+    options: {
+        value: string;
+        label: string;
+    }[];
+} | {
+    type: 'tags';
+    options: {
+        value: string;
+        label: string;
+    }[];
+} | {
+    type: 'panel';
+    valueType?: ColumnValueType;
+} | {
+    render: (props: FilterRenderProps<T, C>) => TNode;
+} | {
+    input: (value: Signal<string>, size: Value<ControlSize>) => TNode;
+};
+/**
+ * Column definition for a {@link DataTable}.
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface DataColumnDef<T, C extends string = string> {
+    /** Unique column identifier. Used as key for value accessor, sort, and filter. */
+    id: C;
+    /** Column header content. String or render function. */
+    header: string | (() => TNode);
+    /** Render function for cell content. Receives a reactive row signal and the column index. */
+    cell: (row: Signal<T>, index: number) => TNode;
+    /**
+     * Accessor function to extract the column value from a row.
+     * If omitted, defaults to `row[id]`.
+     */
+    value?: (row: T) => unknown;
+    /** Whether this column is sortable. @default false */
+    sortable?: Value<boolean>;
+    /** Custom comparator for sorting this column */
+    comparator?: (a: unknown, b: unknown) => number;
+    /** Filter configuration for this column. Reactive — can be toggled at runtime. */
+    filter?: Value<ColumnFilterConfig<T, C>>;
+    /** Footer render function. Receives all filtered rows as a reactive signal. */
+    footer?: (rows: Signal<T[]>) => TNode;
+    /** Column width (e.g., '200px', '20%') */
+    width?: Value<string>;
+    /** Minimum column width */
+    minWidth?: Value<string>;
+    /** Maximum column width */
+    maxWidth?: Value<string>;
+    /** Text alignment within cells. @default 'left' */
+    align?: Value<'left' | 'center' | 'right'>;
+    /** Whether this column can be hidden via the column visibility toggle. @default false */
+    hideable?: Value<boolean>;
+}
+/**
+ * Pagination options for {@link DataTable}.
+ */
+export interface DataTablePaginationOptions {
+    /** Number of rows per page. @default 10 */
+    pageSize?: number;
+    /** Show first/last page buttons. @default false */
+    showFirstLast?: boolean;
+    /** Number of page siblings to show. @default 1 */
+    siblings?: number;
+    /** Enable responsive page number display. @default false */
+    responsive?: boolean;
+}
+/**
+ * Toolbar options for {@link DataTable}.
+ */
+export interface DataTableToolbarOptions {
+    /** Show active sort indicators in toolbar. @default true */
+    showSort?: boolean;
+    /** Show active filter chips in toolbar. @default true */
+    showFilters?: boolean;
+    /** Show selection count in toolbar. @default true */
+    showSelection?: boolean;
+    /** Bulk actions available when rows are selected */
+    bulkActions?: BulkAction[];
+}
+/**
+ * Configuration options for the {@link DataTable} component.
+ *
+ * @typeParam T - The type of data rows
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface DataTableOptions<T, C extends string = string> {
+    /** Source data array (static or reactive) */
+    data: Value<T[]>;
+    /** Column definitions */
+    columns: DataColumnDef<T, C>[];
+    /** Returns a unique string ID for each row */
+    rowId: (row: T) => string;
+    /** Enable sorting (columns opt-in via `column.sortable`). @default false */
+    sortable?: Value<boolean>;
+    /** Allow sorting by multiple columns. @default false */
+    multiSort?: Value<boolean>;
+    /** Enable filtering (columns opt-in via `column.filter`). @default false */
+    filterable?: Value<boolean>;
+    /**
+     * Where to render filter controls.
+     * - `'header'`: all filters render inline in the header row as icon triggers
+     * - `'row'`: all filters render in a dedicated row below the header
+     * @default 'header'
+     */
+    filterLayout?: 'header' | 'row';
+    /** Show selection checkboxes. @default false */
+    selectable?: Value<boolean>;
+    /** Position of selection checkboxes. @default 'before' */
+    selectionPosition?: 'before' | 'after';
+    /** Toggle row selection when clicking anywhere on the row. @default false */
+    selectOnRowClick?: Value<boolean>;
+    /** Enable drag-to-reorder columns. @default false */
+    reorderableColumns?: Value<boolean>;
+    /** Called when column order changes via drag-and-drop */
+    onColumnOrderChange?: (columnIds: C[]) => void;
+    /** Pagination config. `true` uses defaults, `false`/undefined disables. */
+    pagination?: Value<DataTablePaginationOptions | boolean>;
+    /** Toolbar config. `true` uses defaults, `false`/undefined disables. */
+    toolbar?: Value<DataTableToolbarOptions | boolean>;
+    /** Size variant. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Enable hover effect on rows. @default false */
+    hoverable?: Value<boolean>;
+    /** Make header sticky. @default false */
+    stickyHeader?: Value<boolean>;
+    /** Full width table. @default false */
+    fullWidth?: Value<boolean>;
+    /** Striped rows. @default false */
+    withStripedRows?: Value<boolean>;
+    /** Table border. @default true */
+    withTableBorder?: Value<boolean>;
+    /** Column borders. @default false */
+    withColumnBorders?: Value<boolean>;
+    /** Row borders. @default true */
+    withRowBorders?: Value<boolean>;
+    /** Called when sort state changes */
+    onSortChange?: (sort: SortDescriptor<C>[]) => void;
+    /** Called when filter state changes */
+    onFilterChange?: (filters: FilterBase<C>[]) => void;
+    /** Called when selection changes */
+    onSelectionChange?: (selected: Set<string>) => void;
+    /** Called when the group-by column changes */
+    onGroupByChange?: (column: C | undefined) => void;
+    /** Called when a row is clicked */
+    onRowClick?: (row: T) => void;
+    /** Skip client-side processing. @default false */
+    serverSide?: Value<boolean>;
+    /** Total rows for server-side pagination */
+    totalRows?: Value<number>;
+    /** Loading state */
+    loading?: Value<boolean>;
+    /** Column to group rows by. Renders collapsible group header rows. */
+    groupBy?: Value<C | undefined>;
+    /** Whether groups are collapsible. @default true */
+    groupCollapsible?: boolean;
+    /** Show footer row. Columns opt-in via `column.footer`. @default false */
+    showFooter?: Value<boolean>;
+    /** Custom render function for collapsed group summaries. */
+    groupSummary?: (groupKey: string, rows: T[]) => TNode;
+    /** Content to show when no rows match */
+    emptyContent?: TNode;
+    /** Column visibility options. When set, a column toggle button appears. */
+    hiddenColumns?: Value<C[]>;
+    /** Callback to receive the internal DataSource for external integration */
+    onDataSource?: (ds: DataSource<T, C>) => void;
+}

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

@@ -0,0 +1,38 @@
+import { DataTableOptions } from './data-table-types';
+/**
+ * A full-featured data table component built by composing headless {@link DataSource}
+ * state management with composable UI primitives and the existing {@link Table}
+ * and {@link Pagination} components.
+ *
+ * Supports column-level sorting, filtering, row selection, pagination, bulk actions,
+ * and server-side mode. Each feature is opt-in and configurable per column.
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Full configuration for the data table
+ * @returns A composed data table element
+ *
+ * @example
+ * ```ts
+ * DataTable({
+ *   data: prop(users),
+ *   columns: [
+ *     { id: 'name', header: 'Name', cell: row => Value.map(row, r => r.name),
+ *       sortable: true, filter: true },
+ *     { id: 'email', header: 'Email', cell: row => Value.map(row, r => r.email),
+ *       sortable: true },
+ *     { id: 'role', header: 'Role', cell: row => Value.map(row, r => r.role),
+ *       filter: { type: 'select', options: [
+ *         { value: 'admin', label: 'Admin' }, { value: 'user', label: 'User' }
+ *       ] } },
+ *   ],
+ *   rowId: u => u.id,
+ *   sortable: true,
+ *   filterable: true,
+ *   selectable: true,
+ *   pagination: { pageSize: 20 },
+ *   toolbar: { bulkActions: [{ label: 'Delete', onClick: sel => deleteUsers(sel) }] },
+ *   fullWidth: true,
+ * })
+ * ```
+ */
+export declare function DataTable<T, C extends string = string>(options: DataTableOptions<T, C>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -0,0 +1,44 @@
+import { Value } from '@tempots/dom';
+import { BulkAction, DataSource } from './data-source';
+import { DescribeFilterOptions } from './filter';
+/**
+ * Options for the {@link DataToolbar} component.
+ *
+ * @typeParam T - The type of data rows in the data source
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface DataToolbarOptions<T, C extends string = string> {
+    /** The data source to display state for */
+    dataSource: DataSource<T, C>;
+    /** Show active sort indicators. @default true */
+    showSort?: Value<boolean>;
+    /** Show active filter chips. @default true */
+    showFilters?: Value<boolean>;
+    /** Show selection count and bulk actions. @default true */
+    showSelection?: Value<boolean>;
+    /** Available bulk actions when rows are selected */
+    bulkActions?: BulkAction[];
+    /** Custom label for the reset button */
+    resetLabel?: Value<string>;
+    /** Optional callback to describe custom (non-builtin) filter kinds */
+    describeFilter?: DescribeFilterOptions<C>['describeFilter'];
+}
+/**
+ * A toolbar displaying the active state of a {@link DataSource}: active sort indicators,
+ * filter chips with remove buttons, selection count, bulk action buttons, and a "Reset all" control.
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Toolbar configuration
+ * @returns A toolbar element
+ *
+ * @example
+ * ```ts
+ * DataToolbar({
+ *   dataSource: ds,
+ *   bulkActions: [
+ *     { label: 'Delete', icon: 'mdi:delete', onClick: (sel) => deleteRows(sel) },
+ *   ],
+ * })
+ * ```
+ */
+export declare function DataToolbar<T, C extends string = string>({ dataSource, showSort, showFilters, showSelection, bulkActions, resetLabel, describeFilter: describeFilterCb, }: DataToolbarOptions<T, C>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

package/dist/types/components/data/date-picker-shared.d.ts

@@ -0,0 +1,55 @@
+import { Value, type Prop, type TNode } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+import type { BeatUITemporal, PlainDate } from '../../temporal/types';
+export declare const YEARS_PER_PAGE = 20;
+export declare const DAYS_IN_WEEK = 7;
+export declare const MONTH_NAMES: string[];
+export declare const SHORT_MONTH_NAMES: string[];
+export declare const DAY_NAMES: string[];
+export type DatePickerView = 'days' | 'months' | 'years';
+export declare function generateDatePickerClasses(size: ControlSize, disabled: boolean): string;
+export declare function generateDatePickerStyles(color: ThemeColorName): string;
+/** Base cell data computed by {@link buildDatePickerGrid}. */
+export interface DatePickerBaseCell {
+    day: number;
+    date: PlainDate;
+    inMonth: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+}
+/** Builds the base array of day cells for a given month. */
+export declare function buildDatePickerGrid(T: BeatUITemporal, year: number, month: number, weekStartsOn: number, today: PlainDate, isDateDisabled?: (date: PlainDate) => boolean): DatePickerBaseCell[];
+/** State and actions returned by {@link createDatePickerNav}. */
+export interface DatePickerNav {
+    today: PlainDate;
+    currentYear: Prop<number>;
+    currentMonth: Prop<number>;
+    view: Prop<DatePickerView>;
+    yearPageStart: Prop<number>;
+    shiftedDayNames: Value<string[]>;
+    prevMonth: () => void;
+    nextMonth: () => void;
+    prevYear: () => void;
+    nextYear: () => void;
+    prevYearPage: () => void;
+    nextYearPage: () => void;
+    switchToMonthsView: () => void;
+    switchToYearsView: () => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+}
+/** Creates the shared navigation state for a date picker. */
+export declare function createDatePickerNav(T: BeatUITemporal, initialYear: number, initialMonth: number, disabled: Value<boolean>, weekStartsOn: Value<number>): DatePickerNav;
+export interface DatePickerShellOptions {
+    size: Value<ControlSize>;
+    disabled: Value<boolean>;
+    color: Value<ThemeColorName>;
+    ariaLabel: string;
+}
+/**
+ * Renders the full date picker shell: outer wrapper, navigation header
+ * (days/months/years), weekday headers, month picker, year picker,
+ * and a custom day grid.
+ */
+export declare function renderDatePickerShell(nav: DatePickerNav, opts: DatePickerShellOptions, renderGrid: () => TNode): TNode;