@foi/design-system 0.0.11 → 0.0.13

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

@@ -1,6 +1,6 @@
 import React, { type ReactNode, type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
-export interface ButtonStyleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import type { EVENTS } from '@hocs/ThemeProvider/components/Button';
+export interface ButtonStyleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     /** Content rendered inside the button. Can be a string, element, or any React node.
      * @default 'Click me!'
      */
@@ -22,6 +22,10 @@ export interface ButtonStyleProps extends React.ButtonHTMLAttributes<HTMLButtonE
     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 ButtonProps extends ButtonStyleProps {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

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

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/Checkbox/Checkbox.interface.d.ts

@@ -28,7 +28,7 @@ export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLIn
         message?: string;
     };
 }
-export interface CheckboxStyleProps<TFieldValues extends FieldValues = FieldValues> extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
     /** RHF field name. Required in standalone mode; optional (ignored) inside CheckboxGroup. */
     name?: string;
     /** Text label displayed next to the checkbox. */

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

@@ -45,6 +45,10 @@ export interface DatePickerStyleProps<TFieldValues extends FieldValues = FieldVa
     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 DatePickerProps<TFieldValues extends FieldValues = FieldValues> extends DatePickerStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
 import type { DatePickerStyleProps } from './DatePicker.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const DatePicker: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: DatePickerStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const DatePicker: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: DatePickerStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default DatePicker;

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

@@ -1,6 +1,6 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
-export interface IconButtonStyleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+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;
     /** Click handler. Required — IconButton is always interactive. */
@@ -14,6 +14,10 @@ export interface IconButtonStyleProps extends React.ButtonHTMLAttributes<HTMLBut
     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 IconButtonProps extends IconButtonStyleProps {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

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

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 React.InputHTMLAttributes<HTMLInputElement> {
+/** 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;
@@ -48,6 +97,10 @@ export interface InputStyleProps<TFieldValues extends FieldValues = FieldValues>
     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 InputProps<TFieldValues extends FieldValues = FieldValues> extends InputStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

@@ -1,4 +1,4 @@
 import type { InputStyleProps } from './Input.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const Input: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: InputStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Input: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: InputStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Input;

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/Radio.interface.d.ts

@@ -40,6 +40,10 @@ export interface RadioStyleProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     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;
     /** Prevents interaction when `true`. Overrides the RadioGroup `disabled` value if set.
      * @default false
      */

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/Radio/index.d.ts

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

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

@@ -48,6 +48,10 @@ export interface SelectStyleProps<TFieldValues extends FieldValues = FieldValues
     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 SelectProps<TFieldValues extends FieldValues = FieldValues> extends SelectStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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/Select/index.d.ts

@@ -1,4 +1,4 @@
 import type { SelectStyleProps } from './Select.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const Select: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: SelectStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Select: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: SelectStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Select;

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/atoms/Slider/Slider.interface.d.ts

@@ -52,6 +52,10 @@ export interface SliderStyleProps<TFieldValues extends FieldValues = FieldValues
     track?: 'normal' | 'inverted';
     /** 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 SliderProps<TFieldValues extends FieldValues = FieldValues> extends SliderStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

@@ -1,4 +1,4 @@
 import type { SliderStyleProps } from './Slider.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const Slider: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: SliderStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Slider: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: SliderStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Slider;

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

@@ -1,7 +1,7 @@
 import React, { type JSX } from 'react';
 import type { EVENTS } from '@hocs/ThemeProvider/components/Switch';
 import type { Control, FieldValues } from 'react-hook-form';
-export interface SwitchStyleProps<TFieldValues extends FieldValues = FieldValues> extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface SwitchStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
     /** RHF field name. The form value will be a `boolean`. */
     name: string;
     /** RHF control object. */
@@ -20,6 +20,10 @@ export interface SwitchStyleProps<TFieldValues extends FieldValues = FieldValues
     helperText?: 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 SwitchProps<TFieldValues extends FieldValues = FieldValues> extends SwitchStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

@@ -1,4 +1,4 @@
 import type { SwitchStyleProps } from './Switch.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const Switch: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: SwitchStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Switch: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: SwitchStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Switch;

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

@@ -31,6 +31,10 @@ export interface CheckboxGroupStyleProps<TFieldValues extends FieldValues = Fiel
     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 CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues> extends CheckboxGroupStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

@@ -1,4 +1,4 @@
 import type { CheckboxGroupStyleProps } from './CheckboxGroup.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const CheckboxGroup: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: CheckboxGroupStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const CheckboxGroup: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: CheckboxGroupStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CheckboxGroup;

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

@@ -35,6 +35,10 @@ export interface CheckboxTreeStyleProps<TFieldValues extends FieldValues = Field
     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 CheckboxTreeProps<TFieldValues extends FieldValues = FieldValues> extends CheckboxTreeStyleProps<TFieldValues> {
     /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */

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

@@ -1,4 +1,4 @@
 import type { CheckboxTreeStyleProps } from './CheckboxTree.interface';
 import type { FieldValues } from 'react-hook-form';
-declare const CheckboxTree: <TFieldValues extends FieldValues = FieldValues>({ theme, ...rest }: CheckboxTreeStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const CheckboxTree: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: CheckboxTreeStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CheckboxTree;

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';