@foi/design-system 0.0.12 → 0.0.14

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import type { CheckboxProps, CheckboxBaseProps } from './Checkbox.interface';
 import { type FieldValues } from 'react-hook-form';
-/** @internal Headless presentational layer shared by all checkbox variants. */
+/**
+ * Headless presentational layer for the checkbox.
+ * Accepts `checked` and `onChecked` directly — use this when you need a controlled checkbox outside of React Hook Form.
+ */
 export declare const CheckboxBase: React.ForwardRefExoticComponent<CheckboxBaseProps & React.RefAttributes<HTMLInputElement>>;
 declare const Checkbox: <TFieldValues extends FieldValues = FieldValues>(props: CheckboxProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/dist/components/atoms/DatePicker/DatePickerMenu/DatePickerMenu.d.ts

@@ -7,8 +7,6 @@ import type { DatePickerMenuProps } from './DatePickerMenu.interface';
  * scrollable year-picker. Keyboard navigation (arrow keys, Enter, Escape) is
  * handled by the parent `DatePicker`; this component focuses the active day
  * button when `focusedElement` changes.
- *
- * @internal — rendered exclusively by `DatePicker`. Do not use directly.
  */
 declare const DatePickerMenu: React.ForwardRefExoticComponent<DatePickerMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePickerMenu;

package/dist/components/atoms/IconButton/IconButton.interface.d.ts

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
+import type { EVENTS } from '@hocs/ThemeProvider/components/IconButton';
 export interface IconButtonStyleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     /** The icon element rendered inside the button. */
     icon: JSX.Element;

package/dist/components/atoms/Input/Input.d.ts

@@ -1,11 +1,10 @@
-import type { InputProps } from './Input.interface';
+import type { InputBaseProps, InputProps } from './Input.interface';
 import { type FieldValues } from 'react-hook-form';
 /**
- * A text input field that lets users enter and edit a single line of text.
- *
- * Supports floating labels, helper/error text, leading and trailing adornments,
- * optional value formatting, and input filtering via `regex`.
- * The form value is a `string`.
+ * Headless presentational layer shared by all input variants.
+ * Handles value rendering, adornments, error display, and formatting.
+ * Wrap with the `Input` component (which wires RHF) for form use.
  */
-declare const Input: <TFieldValues extends FieldValues = FieldValues>({ name, label, control, width, disabled, type, regex, hasPadding, format, startAdornment, endAdornment, helperText, showErrorText, style, className, ...rest }: InputProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InputBase: ({ label, value, onChange, error, style, width, disabled, type, regex, hasPadding, format, startAdornment, endAdornment, helperText, showErrorText, className, onBlur, ...rest }: InputBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Input: <TFieldValues extends FieldValues = FieldValues>(props: InputProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Input;

package/dist/components/atoms/Input/Input.interface.d.ts

@@ -1,30 +1,81 @@
 import React, { type JSX } from 'react';
 import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
 import type { Control, FieldValues } from 'react-hook-form';
-export interface InputStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
+/** Internal props used by InputBase — the headless presentational layer. */
+export interface InputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'style' | 'value'> {
+    /** Floating label displayed inside the field border. */
+    label: string;
+    /** Current value (controlled). */
+    value: string;
+    /** Callback fired when the value changes. Receives the processed string. */
+    onChange: (value: string) => void;
+    /** Validation error from RHF (or any external source). */
+    error?: {
+        message?: string;
+    };
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style?: Record<string, string>;
+    /** Controls the rendered width of the field.
+     * @default 'medium'
+     */
+    width?: 'small' | 'medium' | 'large' | 'full';
+    /** HTML input type.
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'number' | 'email';
+    /** Each keystroke is validated against this regex; non-matching chars are ignored. */
+    regex?: RegExp;
+    /** When `false`, validation error text below the field is hidden.
+     * @default true
+     */
+    showErrorText?: boolean;
+    /** When `true`, adds bottom padding below the helper text area.
+     * @default false
+     */
+    hasPadding?: boolean;
+    /** Applied to the value on every keystroke before it is stored. */
+    format?: (value: string) => string;
+    /** Element rendered on the left side of the input. */
+    startAdornment?: JSX.Element;
+    /** Element rendered on the right side of the input. */
+    endAdornment?: JSX.Element;
+    /** Helper text displayed below the field when there is no active error. */
+    helperText?: string;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Placeholder text shown when the field is empty and has no floating label focus. */
+    placeholder?: string;
+}
+export interface InputStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style' | 'onChange' | 'value'> {
     /** RHF field name. The form value will be a `string`. */
     name: string;
     /** Floating label displayed inside the field border. */
     label: string;
-    /** RHF control object. */
-    control: Control<TFieldValues>;
+    /** RHF control object. Omit to use controlled mode with `value` + `onValueChange`. */
+    control?: Control<TFieldValues>;
+    /** Current value for controlled mode (used when `control` is omitted). */
+    value?: string;
+    /** Callback for controlled mode (used when `control` is omitted). */
+    onValueChange?: (value: string) => void;
     /** Prevents all interaction when `true`.
      * @default false
      */
     disabled?: boolean;
-    /** Short hint shown inside the field before the user enters a value. */
+    /** Placeholder text shown when the field is empty and has no floating label focus. */
     placeholder?: string;
     /** Controls the rendered width of the field.
      * @default 'medium'
      */
     width?: 'small' | 'medium' | 'large' | 'full';
-    /** HTML input type. Use `'password'` to mask the value.
+    /** HTML input type.
      * @default 'text'
      */
     type?: 'text' | 'password' | 'number' | 'email';
-    /** When provided, each keystroke is validated against this regex.
-     * Characters that do not match are silently ignored.
-     */
+    /** Each keystroke is validated against this regex; non-matching chars are ignored. */
     regex?: RegExp;
     /** When `false`, validation error text below the field is hidden.
      * @default true
@@ -34,13 +85,11 @@ export interface InputStyleProps<TFieldValues extends FieldValues = FieldValues>
      * @default false
      */
     hasPadding?: boolean;
-    /** A function applied to the value on every keystroke before it is stored.
-     * Receives the raw string and must return the formatted string.
-     */
+    /** Applied to the value on every keystroke before it is stored. */
     format?: (value: string) => string;
-    /** Element rendered on the **left** side of the input (e.g. an icon or a currency symbol). */
+    /** Element rendered on the left side of the input. */
     startAdornment?: JSX.Element;
-    /** Element rendered on the **right** side of the input (e.g. an action icon). */
+    /** Element rendered on the right side of the input. */
     endAdornment?: JSX.Element;
     /** Helper text displayed below the field when there is no active error. */
     helperText?: string;

package/dist/components/atoms/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import type { PaginationProps } from './Pagination.interface';
+/**
+ * A pagination control bar that lets users navigate between pages of data.
+ *
+ * Displays the current row range (`start–end of total`), first/prev/next/last
+ * navigation buttons, and — when `pageSizeOptions` is provided — a rows-per-page
+ * dropdown menu.
+ *
+ * All navigation buttons are disabled while `loading` is `true`.
+ */
+declare const Pagination: ({ page, total, pageSize, onPageChange, pageSizeOptions, onPageSizeChange, loading, className, style, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/atoms/Pagination/Pagination.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/atoms/Pagination/Pagination.interface.d.ts

@@ -0,0 +1,32 @@
+export interface PaginationProps {
+    /** Zero-based index of the currently active page. */
+    page: number;
+    /** Total number of rows across all pages (used to compute the page count). */
+    total: number;
+    /** Number of rows displayed per page. */
+    pageSize: number;
+    /** Callback fired when the user navigates to a different page. Receives the new zero-based page index. */
+    onPageChange: (page: number) => void;
+    /** List of page-size choices rendered in the rows-per-page menu.
+     * When omitted the rows-per-page control is hidden.
+     */
+    pageSizeOptions?: number[];
+    /** Callback fired when the user selects a new page size. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** When `true`, all navigation buttons are disabled to signal a pending fetch.
+     * @default false
+     */
+    loading?: boolean;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style?: Record<string, string>;
+}
+export interface PaginationStyleProps extends Omit<PaginationProps, 'style'> {
+    /** Theme override tokens. */
+    theme?: Record<string, Record<string, Record<string, Record<string, string>>>>;
+    /** Selects the style variant defined in the theme.
+     * @default 'default'
+     */
+    variant?: string;
+}

package/dist/components/atoms/Pagination/PaginationMenu/PaginationMenu.d.ts

@@ -0,0 +1,9 @@
+import type { PaginationMenuProps } from './PaginationMenu.interface';
+/**
+ * A floating dropdown that renders a list of page-size options.
+ *
+ * Rendered inside `<Pagination>` when `pageSizeOptions` is provided.
+ * Keyboard focus is controlled externally via `focusedElement`.
+ */
+declare const PaginationMenu: ({ options, activeOption, onSelect, focusedElement, style }: PaginationMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PaginationMenu;

package/dist/components/atoms/Pagination/PaginationMenu/PaginationMenu.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/atoms/Pagination/PaginationMenu/PaginationMenu.interface.d.ts

@@ -0,0 +1,23 @@
+export interface PaginationMenuProps {
+    /** List of page-size values to display as selectable options. */
+    options: number[];
+    /** The currently active page-size value (will be highlighted). */
+    activeOption: number;
+    /** Callback fired when the user clicks an option. Receives the selected page size. */
+    onSelect: (option: number) => void;
+    /** Index (0-based) of the option that should receive keyboard focus highlight.
+     * Pass `-1` (default) when no item is keyboard-focused.
+     * @default -1
+     */
+    focusedElement?: number;
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}
+export interface PaginationMenuStyleProps extends Omit<PaginationMenuProps, 'style'> {
+    /** Theme override tokens. */
+    theme?: Record<string, Record<string, Record<string, Record<string, string>>>>;
+    /** Selects the style variant defined in the theme.
+     * @default 'default'
+     */
+    variant?: string;
+}

package/dist/components/atoms/Pagination/PaginationMenu/index.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationMenuStyleProps } from './PaginationMenu.interface';
+declare const PaginationMenu: ({ theme, variant, ...rest }: PaginationMenuStyleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PaginationMenu;
+export type { PaginationMenuProps, PaginationMenuStyleProps } from './PaginationMenu.interface';

package/dist/components/atoms/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationStyleProps } from './Pagination.interface';
+declare const Pagination: ({ theme, variant, ...rest }: PaginationStyleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Pagination;
+export type { PaginationProps, PaginationStyleProps } from './Pagination.interface';

package/dist/components/atoms/Radio/Radio.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { RadioProps, RadioBaseProps } from './Radio.interface';
+/**
+ * Headless presentational layer for the radio button.
+ * Accepts `checked` and `onChange` directly — use this when you need a controlled radio outside of React Hook Form.
+ */
 export declare const RadioBase: React.ForwardRefExoticComponent<RadioBaseProps & React.RefAttributes<HTMLInputElement>>;
 /**
  * A radio button lets the user select exactly one option from a set.

package/dist/components/atoms/Radio/RadioGroup.context.d.ts

@@ -11,5 +11,7 @@ export interface RadioGroupContextValue {
     error?: {
         message?: string;
     };
+    /** Value of the first non-disabled Radio child — used to implement roving tabindex */
+    firstValue: string;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;

package/dist/components/atoms/Select/SelectMenu/SelectMenu.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { SelectMenuProps } from './SelectMenu.interface';
 /**
- * @internal Dropdown list rendered by `<Select>`.
+ * Dropdown list rendered by `<Select>`.
  * Scrolls the focused option into view on keyboard navigation and calls `onChange` on click.
- * Not intended for direct use — use `<Select>` instead.
  */
 declare const SelectMenu: React.ForwardRefExoticComponent<SelectMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default SelectMenu;

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+import type { SkeletonProps } from './Skeleton.interface';
+/**
+ * A low-fidelity placeholder that mimics the shape of content while it loads.
+ *
+ * Use `variant="rectangular"` for text lines, cards, or images and
+ * `variant="circular"` for avatars or icon placeholders. Set `width` and
+ * `height` to match the real content's dimensions.
+ */
+declare const Skeleton: ({ variant, width, height, className }: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Skeleton;

package/dist/components/atoms/Skeleton/Skeleton.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/atoms/Skeleton/Skeleton.interface.d.ts

@@ -0,0 +1,14 @@
+export interface SkeletonProps {
+    /** Shape of the skeleton placeholder.
+     * - `'rectangular'` — a rounded rectangle (suits text lines, cards, images).
+     * - `'circular'` — a full circle (suits avatars, icon placeholders).
+     * @default 'rectangular'
+     */
+    variant?: 'rectangular' | 'circular';
+    /** Explicit width of the skeleton element. Accepts any valid CSS width value or a pixel number. */
+    width?: string | number;
+    /** Explicit height of the skeleton element. Accepts any valid CSS height value or a pixel number. */
+    height?: string | number;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+}

package/dist/components/atoms/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Skeleton';
+export type { SkeletonProps } from './Skeleton.interface';

package/dist/components/molecules/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import type { ModalProps } from './Modal.interface';
+/**
+ * Generic overlay dialog rendered via a portal into `document.body`.
+ *
+ * Closes on:
+ * - Clicking the × button in the header.
+ * - Pressing **Escape** (unless `staticBackdrop` is `true`).
+ * - Clicking the semi-transparent backdrop (unless `staticBackdrop` is `true`).
+ *
+ * Pass `footer` to render action buttons below the body content.
+ */
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/components/molecules/Modal/Modal.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/molecules/Modal/Modal.interface.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Modal';
+export interface ModalStyleProps {
+    /** Controls visibility of the modal. */
+    open: boolean;
+    /** Callback fired when the modal requests to close (X button, backdrop click, or Escape). */
+    onClose: () => void;
+    /** Full content of the header bar (icon, title, etc.). Rendered as-is before the close button.
+     * Use `--MODAL-title` class on your title element to apply the themed title styles.
+     */
+    header?: ReactNode;
+    /** When `true`, renders a × close button at the end of the header bar.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /** Width preset.
+     * - `'md'` — 480 px (default)
+     * - `'lg'` — 720 px
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /** Main content area of the modal. */
+    children?: ReactNode;
+    /** Content rendered inside the footer row (typically action buttons). */
+    footer?: ReactNode;
+    /** When `true`, clicking the backdrop or pressing Escape will **not** close the modal.
+     * @default false
+     */
+    staticBackdrop?: boolean;
+    /** Additional CSS class applied to the modal panel. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+    /** Selects the style variant defined in the theme.
+     * @default 'default'
+     */
+    variant?: string;
+}
+export interface ModalProps extends Omit<ModalStyleProps, 'theme' | 'variant'> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

package/dist/components/molecules/Modal/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { ModalStyleProps } from './Modal.interface';
+declare const Modal: FC<ModalStyleProps>;
+export default Modal;
+export type { ModalStyleProps, ModalProps } from './Modal.interface';

package/dist/components/organisms/DataGrid/DataGrid.d.ts

@@ -0,0 +1,19 @@
+import type { DataGridProps } from './DataGrid.interface';
+/**
+ * A full-featured data table with server-side fetching, sorting, filtering, and pagination.
+ *
+ * Pass `columns` to define the table structure and `onFetch` to supply data.
+ * `onFetch` is called automatically whenever the page, page size, active sort,
+ * or any column filter changes.
+ *
+ * **Pagination modes** (controlled by `paginationType`):
+ * - `'pagination'` — renders a `<Pagination>` bar below the table.
+ * - `'scroll'` — appends rows as the user scrolls down (infinite scroll).
+ *
+ * **Column actions:**
+ * - Sortable columns show a sort-direction toggle in the header.
+ * - Columns with a `filter` config show a filter popover icon.
+ * - Add a column with `type: 'options'` and a `render` prop for row-level action buttons.
+ */
+declare const DataGrid: <T extends object>({ columns, onFetch, paginationType, pageSize, pageSizeOptions, emptyContent, loadingMoreContent, className, style, }: DataGridProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DataGrid;

package/dist/components/organisms/DataGrid/DataGrid.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/organisms/DataGrid/DataGrid.interface.d.ts

@@ -0,0 +1,124 @@
+import React from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/DataGrid';
+/** Determines the filter UI rendered in the column header popover. */
+export type DataGridFilterType = 'search' | 'multiselect' | 'multiselect-search';
+/** A single option entry used by `multiselect` and `multiselect-search` column filters. */
+export interface DataGridFilterOption {
+    /** Machine-readable identifier stored in the active filter state. */
+    value: string;
+    /** Human-readable label shown in the filter list. */
+    label: string;
+    /** Optional accent colour applied to the option chip or label. */
+    color?: string;
+}
+/** Configuration object that enables filtering for a column. */
+export interface DataGridFilter {
+    /** Filter UI variant to render inside the popover. */
+    type: DataGridFilterType;
+    /** Heading text shown at the top of the filter popover. */
+    title?: string;
+    /** Placeholder / label text shown inside the search input. */
+    label?: string;
+    /** Label for the cancel button.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /** Label for the apply button.
+     * @default 'Apply'
+     */
+    applyLabel?: string;
+    /** Available options for `multiselect` and `multiselect-search` filter types. */
+    options?: DataGridFilterOption[];
+}
+/** Data type of a column, used to determine default formatting and sorting behaviour. */
+export type DataGridColumnType = 'text' | 'number' | 'date' | 'options';
+/** Definition of a single DataGrid column. */
+export interface DataGridColumn<T = Record<string, unknown>> {
+    /** Unique identifier that matches a key on each data row. */
+    key: string;
+    /** Column header label. */
+    label: string;
+    /** Data type of the column's values. */
+    type: DataGridColumnType;
+    /** Optional filter configuration. When set, a filter icon appears in the header. */
+    filter?: DataGridFilter;
+    /** When `true` (default), a sort toggle button is rendered in the header.
+     * Set to `false` to disable sorting for this column.
+     */
+    sortable?: boolean;
+    /** Fixed CSS width of the column (e.g. `'120px'`, `'10%'`).
+     * When omitted the column width is determined by the table layout algorithm.
+     */
+    width?: string;
+    /** Custom cell renderer. When provided, `value` and the full `row` object are passed. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+/** The current sort applied to the grid. */
+export interface DataGridSortState {
+    /** Key of the column being sorted. */
+    key: string;
+    /** Sort direction. */
+    direction: 'asc' | 'desc';
+}
+/** Parameters passed to `onFetch` on every data request. */
+export interface DataGridFetchParams {
+    /** Zero-based page index. */
+    page: number;
+    /** Number of rows per page. */
+    pageSize: number;
+    /** Active sort state, or `undefined` when no sort is applied. */
+    sort?: DataGridSortState;
+    /** Map of active filter values keyed by column key. */
+    filters?: Record<string, string | string[]>;
+}
+/** Shape of the object that `onFetch` must resolve with. */
+export interface DataGridFetchResult<T = Record<string, unknown>> {
+    /** The rows for the current page. */
+    data: T[];
+    /** Total row count across all pages (used to compute pagination). */
+    total: number;
+}
+/** Controls how additional rows are loaded. */
+export type DataGridPaginationType = 'scroll' | 'pagination';
+export interface DataGridStyleProps<T = Record<string, unknown>> {
+    /** Column definitions. Each entry describes one column's key, label, type, and optional filter/sort. */
+    columns: DataGridColumn<T>[];
+    /** Async function called whenever the page, sort, or filters change.
+     * Must return `{ data, total }`.
+     */
+    onFetch: (params: DataGridFetchParams) => Promise<DataGridFetchResult<T>>;
+    /** Controls how more rows are loaded when the user reaches the end of the current view.
+     * - `'pagination'` — shows a pagination bar below the table.
+     * - `'scroll'` — loads the next page automatically when the user scrolls to the bottom.
+     * @default 'pagination'
+     */
+    paginationType?: DataGridPaginationType;
+    /** Number of rows per page.
+     * @default 10
+     */
+    pageSize?: number;
+    /** List of page-size options shown in the pagination rows-per-page menu.
+     * When omitted the rows-per-page control is hidden.
+     */
+    pageSizeOptions?: number[];
+    /** Content rendered inside the table when no rows match the current query.
+     * @default `<span>No se han encontrado resultados</span>`
+     */
+    emptyContent?: React.ReactNode;
+    /** Content rendered in the last table row while additional rows are being fetched in scroll mode.
+     * @default `<span>Cargando...</span>`
+     */
+    loadingMoreContent?: React.ReactNode;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+    /** Selects the style variant defined in the theme.
+     * @default 'default'
+     */
+    variant?: string;
+}
+export interface DataGridProps<T = Record<string, unknown>> extends Omit<DataGridStyleProps<T>, 'theme' | 'variant'> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

package/dist/components/organisms/DataGrid/DataGridMenu/DataGridMenu.d.ts

@@ -0,0 +1,14 @@
+import type { DataGridMenuProps } from './DataGridMenu.interface';
+/**
+ * A portal-rendered popover that provides filter controls for a DataGrid column.
+ *
+ * Positions itself below `anchorEl` using `useLayoutEffect` and repositions
+ * on window scroll / resize. Renders one of three filter UIs based on `filterType`:
+ * - `'search'` — a single text input.
+ * - `'multiselect'` — a list of checkboxes.
+ * - `'multiselect-search'` — a list of checkboxes with an inline search input.
+ *
+ * Apply/cancel actions are delegated to the parent via `onApply` and `onCancel`.
+ */
+declare const DataGridMenu: ({ filterType, options, columnKey, filterTitle, searchLabel, cancelLabel, applyLabel, pendingSearch, onSearchChange, pendingMulti, onMultiChange, multiSearch, onMultiSearchChange, onCancel, onApply, onClear, anchorEl, style, }: DataGridMenuProps) => import("react").ReactPortal;
+export default DataGridMenu;

package/dist/components/organisms/DataGrid/DataGridMenu/DataGridMenu.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/organisms/DataGrid/DataGridMenu/DataGridMenu.interface.d.ts

@@ -0,0 +1,54 @@
+import type { DataGridFilterType, DataGridFilterOption } from '../DataGrid.interface';
+import type { EVENTS } from '@hocs/ThemeProvider/components/DataGridMenu';
+export interface DataGridMenuStyleProps {
+    /** Determines which filter UI is rendered inside the popover. */
+    filterType: DataGridFilterType;
+    /** Available options for `multiselect` and `multiselect-search` filter types. */
+    options?: DataGridFilterOption[];
+    /** Key of the column this menu belongs to. Used as a `data-popover-key` attribute
+     * so click-outside detection can ignore clicks inside the popover.
+     */
+    columnKey: string;
+    /** Heading text rendered at the top of the filter popover. */
+    filterTitle?: string;
+    /** Placeholder / label shown inside the search input (search and multiselect-search modes). */
+    searchLabel?: string;
+    /** Label for the cancel button.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /** Label for the apply button.
+     * @default 'Apply'
+     */
+    applyLabel?: string;
+    /** Controlled value of the text search input (search mode). */
+    pendingSearch: string;
+    /** Callback fired when the text search input changes. */
+    onSearchChange: (val: string) => void;
+    /** Controlled array of selected option values (multiselect mode). */
+    pendingMulti: string[];
+    /** Callback fired when the selected options change. */
+    onMultiChange: (values: string[]) => void;
+    /** Controlled value of the search-within-options input (multiselect-search mode). */
+    multiSearch: string;
+    /** Callback fired when the search-within-options input changes. */
+    onMultiSearchChange: (val: string) => void;
+    /** Callback fired when the user clicks the cancel button. */
+    onCancel: () => void;
+    /** Callback fired when the user clicks the apply button. */
+    onApply: () => void;
+    /** Callback fired when the user clicks the clear (delete) button in the header. */
+    onClear: () => void;
+    /** The DOM element the popover should be positioned relative to. */
+    anchorEl: HTMLElement | null;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+    /** Selects the style variant defined in the theme.
+     * @default 'default'
+     */
+    variant?: string;
+}
+export interface DataGridMenuProps extends Omit<DataGridMenuStyleProps, 'theme' | 'variant'> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

package/dist/components/organisms/DataGrid/DataGridMenu/components/DataGridMenuMultiSelect.d.ts

@@ -0,0 +1,12 @@
+import type { DataGridFilterOption } from '../../DataGrid.interface';
+interface DataGridMenuMultiSelectProps {
+    filterType: 'multiselect' | 'multiselect-search';
+    columnKey: string;
+    options: DataGridFilterOption[];
+    pendingMulti: string[];
+    onMultiChange: (values: string[]) => void;
+    multiSearch: string;
+    onMultiSearchChange: (val: string) => void;
+}
+declare const DataGridMenuMultiSelect: ({ filterType, columnKey, options, pendingMulti, onMultiChange, multiSearch, onMultiSearchChange, }: DataGridMenuMultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DataGridMenuMultiSelect;