@foi/design-system 0.0.0 → 0.0.2

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

@@ -0,0 +1,10 @@
+import type { ButtonProps } from './Button.interface';
+/**
+ * Buttons communicate actions that users can take. Place them in dialogs, forms, cards,
+ * and toolbars.
+ *
+ * Supports optional leading/trailing icons and a `loading` state that visually signals
+ * a pending operation.
+ */
+declare const Button: ({ className, style, children, type, loading, iconStart, iconEnd, ...rest }: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/atoms/Button/Button.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/Button/Button.interface.d.ts

@@ -0,0 +1,29 @@
+import React, { type ReactNode, type JSX } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
+export interface ButtonStyleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content rendered inside the button. Can be a string, element, or any React node.
+     * @default 'Click me!'
+     */
+    children: ReactNode;
+    /** Icon rendered **before** the label text. */
+    iconStart?: JSX.Element;
+    /** Icon rendered **after** the label text. */
+    iconEnd?: JSX.Element;
+    /** When `true`, renders a loading indicator and signals a pending state.
+     * The button remains interactive; disable it separately if needed.
+     * @default false
+     */
+    loading?: boolean;
+    /** HTML button type attribute.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit';
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface ButtonProps extends ButtonStyleProps {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,7 @@
+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. */
+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.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/Checkbox/Checkbox.interface.d.ts

@@ -0,0 +1,64 @@
+import React, { type JSX } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Checkbox';
+import type { Control, FieldValues } from 'react-hook-form';
+/** Internal props used by CheckboxBase — the headless presentational layer. */
+export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'checked' | 'style'> {
+    /** Text label displayed next to the checkbox. */
+    label?: string;
+    /** Icon rendered inside the checkbox when it is checked.
+     * @default `<CheckOutlinedIcon />`
+     */
+    icon?: JSX.Element;
+    /** Helper text shown below the checkbox when there is no error. */
+    helperText?: string;
+    /** When `false`, the error message is suppressed even if validation fails.
+     * @default true
+     */
+    showErrorText?: 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>;
+    /** Whether the checkbox is currently checked. */
+    checked: boolean;
+    /** Callback fired when the checked state changes. Receives the new boolean value. */
+    onChecked: (checked: boolean) => void;
+    /** Validation error object from React Hook Form. */
+    error?: {
+        message?: string;
+    };
+}
+export interface CheckboxStyleProps<TFieldValues extends FieldValues = FieldValues> extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** RHF field name. Required in standalone mode; optional (ignored) inside CheckboxGroup. */
+    name?: string;
+    /** Text label displayed next to the checkbox. */
+    label?: string;
+    /** RHF control object. Required in standalone mode; omit when inside CheckboxGroup. */
+    control?: Control<TFieldValues>;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Icon rendered inside the checkbox when it is checked.
+     * @default `<CheckOutlinedIcon />`
+     */
+    icon?: JSX.Element;
+    /** When `false`, the error message below the checkbox is hidden even if validation fails.
+     * @default true
+     */
+    showErrorText?: boolean;
+    /** Helper text displayed below the checkbox when there is no active error. */
+    helperText?: string;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+    /** Controlled mode — callback fired when the checked state changes.
+     * Use this prop together with the `checked` attribute instead of RHF `control`.
+     */
+    onChecked?: (checked: boolean) => void;
+}
+export interface CheckboxProps<TFieldValues extends FieldValues = FieldValues> extends CheckboxStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,17 @@
+import type { DatePickerProps } from './DatePicker.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * A date input field with a pop-up calendar for selecting dates.
+ *
+ * Renders three spinbutton spans (month/day or day/month, and year) that
+ * support Tab navigation and direct numeric entry. The calendar popup supports
+ * full keyboard navigation (arrows to move focus, Enter to select, Tab to close).
+ *
+ * Language controls both the date format and the calendar labels:
+ * - `en` → `MM / DD / YYYY`, Sunday-first calendar
+ * - `es` → `DD / MM / YYYY`, Monday-first calendar
+ *
+ * The form value is a `Date` object.
+ */
+declare const DatePicker: <TFieldValues extends FieldValues = FieldValues>({ name, label, control, language, minDate, maxDate, disabled, disableFuture, disablePast, hasStaticOptions, showErrorText, hasPadding, helperText, style, className, }: DatePickerProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DatePicker;

package/dist/components/atoms/DatePicker/DatePicker.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/DatePicker/DatePicker.interface.d.ts

@@ -0,0 +1,105 @@
+import type { Control, FieldValues } from 'react-hook-form';
+import type { EVENTS } from '@hocs/ThemeProvider/components/DatePicker';
+export interface DatePickerStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value will be a `Date`. */
+    name: string;
+    /** Floating label displayed inside the field border. */
+    label: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** Display language. Controls date format (`MM/DD/YYYY` for `en`, `DD/MM/YYYY` for `es`)
+     * and month/weekday labels. Defaults to the browser locale.
+     */
+    language?: 'es' | 'en';
+    /** Earliest selectable date (inclusive). */
+    minDate?: Date;
+    /** Latest selectable date (inclusive). */
+    maxDate?: Date;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Disables every date after today.
+     * @default false
+     */
+    disableFuture?: boolean;
+    /** Disables every date before today.
+     * @default false
+     */
+    disablePast?: boolean;
+    /** When `true`, the calendar renders in the document flow instead of floating above other content.
+     * @default false
+     */
+    hasStaticOptions?: boolean;
+    /** 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;
+    /** Helper text displayed below the field when there is no active error. */
+    helperText?: string;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface DatePickerProps<TFieldValues extends FieldValues = FieldValues> extends DatePickerStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}
+/** A single calendar day cell as produced by `getWeeksForMonth`. */
+export interface DateCell {
+    label: string;
+    value: string;
+    isDate: boolean;
+    isDisabled?: boolean;
+}
+export declare enum DaysEnProps {
+    Mo = "Mo",
+    Tu = "Tu",
+    We = "We",
+    Th = "Th",
+    Fr = "Fr",
+    Sa = "Sa",
+    Su = "Su"
+}
+export declare enum DaysEsProps {
+    Lu = "Lu",
+    Ma = "Ma",
+    Mi = "Mi",
+    Ju = "Ju",
+    Vi = "Vi",
+    Sa = "S\u00E1",
+    Do = "Do"
+}
+export declare enum MonthsEnProps {
+    January = "January",
+    February = "February",
+    March = "March",
+    April = "April",
+    May = "May",
+    June = "June",
+    July = "July",
+    August = "August",
+    September = "September",
+    October = "October",
+    November = "November",
+    December = "December"
+}
+export declare enum MonthsEsProps {
+    Enero = "Enero",
+    Febrero = "Febrero",
+    Marzo = "Marzo",
+    Abril = "Abril",
+    Mayo = "Mayo",
+    Junio = "Junio",
+    Julio = "Julio",
+    Agosto = "Agosto",
+    Septiembre = "Septiembre",
+    Octubre = "Octubre",
+    Noviembre = "Noviembre",
+    Diciembre = "Diciembre"
+}

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

@@ -0,0 +1,50 @@
+import { type DateCell, DaysEnProps, MonthsEnProps } from './DatePicker.interface';
+export declare const datePickerConfig: {
+    es: {
+        daysOfWeek: DaysEnProps[];
+        endOfWeek: string;
+        format: string;
+    };
+    en: {
+        daysOfWeek: DaysEnProps[];
+        endOfWeek: string;
+        format: string;
+    };
+};
+export declare const daysDictionary: Record<'en' | 'es', Record<DaysEnProps, string>>;
+export declare const monthsDictionary: Record<'en' | 'es', Record<MonthsEnProps, string>>;
+export declare const isDateValid: (date: unknown) => boolean;
+export declare const isDateOutOfRange: (date: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    disableFuture?: boolean;
+    disablePast?: boolean;
+    today: Date;
+}) => boolean;
+export declare const getWeeksForMonth: (baseDate: Date, format: string, language: "en" | "es", options: {
+    minDate?: Date;
+    maxDate?: Date;
+    disableFuture?: boolean;
+    disablePast?: boolean;
+    today: Date;
+}) => DateCell[][];
+export declare const getYearsGrid: (format: string, startYear?: number, count?: number, rowSize?: number) => DateCell[][];
+export declare const isPrevMonthDisabled: (date: Date, options: {
+    minDate?: Date;
+    disablePast?: boolean;
+    today: Date;
+    format: string;
+}) => boolean;
+export declare const isNextMonthDisabled: (date: Date, options: {
+    maxDate?: Date;
+    disableFuture?: boolean;
+    today: Date;
+    format: string;
+}) => boolean;
+export declare const splitDateParts: (date: Date) => {
+    day: string;
+    month: string;
+    year: string;
+};
+export declare const getBrowserLang: () => "es" | "en";
+export declare const formatMonthLabel: (date: Date, language: "en" | "es") => string;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DatePickerMenuProps } from './DatePickerMenu.interface';
+/**
+ * Calendar popup for `DatePicker`.
+ *
+ * Displays a monthly grid with weekday headers, month/year navigation, and a
+ * 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/DatePickerMenu/DatePickerMenu.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/DatePicker/DatePickerMenu/DatePickerMenu.interface.d.ts

@@ -0,0 +1,46 @@
+import type { DateCell } from '../DatePicker.interface';
+import type { EVENTS } from '@hocs/ThemeProvider/components/DatePickerMenu';
+export interface DatePickerMenuStyleProps {
+    /** Whether the calendar popup is visible. */
+    isOpen: boolean;
+    /** When `true`, the popup renders in the document flow instead of floating. */
+    hasStaticOptions?: boolean;
+    /** Display language for month/weekday labels. */
+    language?: 'es' | 'en';
+    /** Test id prefix. */
+    testId?: string;
+    /** Localised month name to display in the header. */
+    monthLabel?: string;
+    /** Year string (e.g. "2024") to display in the header. */
+    yearLabel?: string;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    /** Disables the "previous month" arrow when the earliest selectable month is reached. */
+    disablePrev?: boolean;
+    /** Disables the "next month" arrow when the latest selectable month is reached. */
+    disableNext?: boolean;
+    /** Week rows for the currently displayed month. Each row is 7 `DateCell` items. */
+    weeks?: DateCell[][];
+    /** Year rows for the year-picker grid. */
+    years?: DateCell[][];
+    /** Short weekday labels ordered for the current language (Mon–Sun or Sun–Sat). */
+    daysOfWeek?: string[];
+    /** Currently selected `Date` value (used to highlight the selected day). */
+    selectedValue?: Date;
+    /** date-fns format string matching the cells' `value` strings. */
+    format?: string;
+    /** Today's date — used to render the "today" dot indicator. */
+    today?: Date;
+    /** Index into the flattened `weeks` array that currently has keyboard focus. */
+    focusedElement?: number;
+    onSelectDay?: (value: string, viaKeyboard?: boolean) => void;
+    onSelectYear?: (value: string) => void;
+    onMoveFocus?: (key: string) => void;
+    onClose?: () => void;
+    /** Theme override tokens for the menu popup. */
+    theme?: EVENTS;
+}
+export interface DatePickerMenuProps extends DatePickerMenuStyleProps {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DatePickerMenuStyleProps } from './DatePickerMenu.interface';
+declare const DatePickerMenu: React.ForwardRefExoticComponent<DatePickerMenuStyleProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePickerMenu;

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

@@ -0,0 +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;
+export default DatePicker;

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

@@ -0,0 +1,9 @@
+import type { IconButtonProps } from './IconButton.interface';
+/**
+ * A compact, circular button that renders a single icon.
+ * Use it for secondary or contextual actions where label text is unnecessary (e.g. close, edit, delete).
+ *
+ * Pass `isFlipped` to mirror the icon horizontally — useful for directional icons.
+ */
+declare const IconButton: ({ className, style, icon, onClick, isFlipped, ...rest }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/atoms/IconButton/IconButton.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/IconButton/IconButton.interface.d.ts

@@ -0,0 +1,21 @@
+import React, { type JSX } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Input';
+export interface IconButtonStyleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The icon element rendered inside the button. */
+    icon: JSX.Element;
+    /** Click handler. Required — IconButton is always interactive. */
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** When `true`, horizontally mirrors the icon via a CSS transform.
+     * Useful for directional icons (e.g. an arrow that should point left).
+     * @default false
+     */
+    isFlipped?: boolean;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface IconButtonProps extends IconButtonStyleProps {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,11 @@
+import type { 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`.
+ */
+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 default Input;

package/dist/components/atoms/Input/Input.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/Input/Input.interface.d.ts

@@ -0,0 +1,55 @@
+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> {
+    /** 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>;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Short hint shown inside the field before the user enters a value. */
+    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.
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'number' | 'email';
+    /** When provided, each keystroke is validated against this regex.
+     * Characters that do not match are silently 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;
+    /** A function applied to the value on every keystroke before it is stored.
+     * Receives the raw string and must return the formatted string.
+     */
+    format?: (value: string) => string;
+    /** Element rendered on the **left** side of the input (e.g. an icon or a currency symbol). */
+    startAdornment?: JSX.Element;
+    /** Element rendered on the **right** side of the input (e.g. an action icon). */
+    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;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface InputProps<TFieldValues extends FieldValues = FieldValues> extends InputStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

@@ -0,0 +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;
+export default Input;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RadioProps, RadioBaseProps } from './Radio.interface';
+export declare const RadioBase: React.ForwardRefExoticComponent<RadioBaseProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A radio button lets the user select exactly one option from a set.
+ *
+ * **Radio must always be rendered inside a `<RadioGroup>`** — it reads its selected state,
+ * name and change handler from the nearest RadioGroup context.
+ * Rendering a Radio outside a RadioGroup throws an error.
+ */
+declare const Radio: (props: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/atoms/Radio/Radio.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/Radio/Radio.interface.d.ts

@@ -0,0 +1,51 @@
+import React, { type JSX } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Radio';
+/** Internal props used by RadioBase — the headless presentational layer. */
+export interface RadioBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'checked' | 'style'> {
+    /** The string value this radio option represents. Matched against the RadioGroup's selected value. */
+    value: string;
+    /** Text label displayed next to the radio. */
+    label?: string;
+    /** Icon rendered inside the radio when it is selected.
+     * @default `<FiberManualRecordIcon />`
+     */
+    icon?: JSX.Element;
+    /** 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>;
+    /** Whether this radio is currently selected. Controlled by RadioGroup. */
+    checked: boolean;
+    /** Callback fired when this radio is selected. Controlled by RadioGroup. */
+    onSelect: () => void;
+    /** Validation error object propagated from RadioGroup. */
+    error?: {
+        message?: string;
+    };
+    /** Prevents interaction when `true`. Can be set per-radio or inherited from RadioGroup. */
+    disabled?: boolean;
+}
+export interface RadioStyleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
+    /** The string value this radio option represents.
+     * Must be unique within the RadioGroup.
+     */
+    value: string;
+    /** Text label displayed next to the radio. */
+    label?: string;
+    /** Icon rendered inside the radio when it is selected.
+     * @default `<FiberManualRecordIcon />`
+     */
+    icon?: JSX.Element;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+    /** Prevents interaction when `true`. Overrides the RadioGroup `disabled` value if set.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface RadioProps extends RadioStyleProps {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

@@ -0,0 +1,15 @@
+export interface RadioGroupContextValue {
+    /** The name attribute shared by all radios in this group */
+    name: string;
+    /** The currently selected value */
+    selectedValue: string;
+    /** Select a value */
+    onChange: (value: string) => void;
+    /** Group-level disabled state */
+    disabled?: boolean;
+    /** Group-level validation error */
+    error?: {
+        message?: string;
+    };
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;

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

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

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

@@ -0,0 +1,11 @@
+import type { SelectProps } from './Select.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * A select field lets users pick a single option from a dropdown list.
+ *
+ * Features: floating label, helper/error text, optional search (≥3 chars), lazy loading via
+ * `range`, per-option descriptions, and full keyboard navigation (arrows, Enter, Tab).
+ * The form value is a `string` (the selected option's `value`).
+ */
+declare const Select: <TFieldValues extends FieldValues = FieldValues>({ name, label, control, options, disabled, range, hasStaticOptions, hasSearch, hasDescription, hasPadding, showErrorText, helperText, style, className, ...rest }: SelectProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Select;

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

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