@foi/design-system 0.0.0 → 0.0.2

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

@@ -0,0 +1,55 @@
+import type { EVENTS } from '@hocs/ThemeProvider/components/Select';
+import type { Control, FieldValues } from 'react-hook-form';
+import type { OptionProp } from '@interfaces';
+export interface SelectStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value will be a `string` (the selected option's `value`). */
+    name: string;
+    /** Floating label displayed inside the select field border. */
+    label: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** Array of selectable options. Each item must have at minimum `{ value, label }`. */
+    options: Array<OptionProp>;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Number of options rendered per "page" — additional options are loaded as the user scrolls.
+     * Must be greater than 3 to activate virtual scrolling. Defaults to all options at once.
+     * @default 100
+     */
+    range?: number;
+    /** When `true`, the dropdown renders in the document flow (no absolute positioning),
+     * preventing it from overlapping adjacent elements.
+     * @default false
+     */
+    hasStaticOptions?: boolean;
+    /** When `true`, activates a search input inside the dropdown.
+     * Filtering starts after the user types at least 3 characters.
+     * @default false
+     */
+    hasSearch?: boolean;
+    /** When `true`, renders a secondary description line for each option
+     * (requires `description` to be set on each `OptionProp`).
+     * @default false
+     */
+    hasDescription?: 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 SelectProps<TFieldValues extends FieldValues = FieldValues> extends SelectStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SelectMenuProps } from './SelectMenu.interface';
+/**
+ * @internal 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/SelectMenu/SelectMenu.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/Select/SelectMenu/SelectMenu.interface.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/SelectMenu';
+import type { MenuOption } from '@interfaces';
+export interface SelectMenuStyleProps {
+    /** The current list of options to render. Controlled by the parent Select. */
+    displayOptions: Array<MenuOption>;
+    /** The value of the currently selected option, used to highlight the active row. */
+    value: string | undefined;
+    /** Whether the dropdown is open. When `false` the menu is hidden (CSS-driven). */
+    isOpen: boolean;
+    /** When `true`, the menu renders in the document flow instead of floating above other elements. */
+    hasStaticOptions?: boolean;
+    /** When `true`, each row renders a secondary description line below the label. */
+    hasDescription?: boolean;
+    /** Index of the option that should receive the `:active` highlight (keyboard navigation).
+     * Pass `-1` when no option is focused.
+     */
+    focusedElement: number;
+    /** Callback fired when the user clicks or selects an option. Receives the full `MenuOption`. */
+    onChange: (option: MenuOption) => void;
+    /** Callback fired on scroll inside the menu container.
+     * Used by Select to implement lazy loading of options.
+     */
+    onScroll: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    /** 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 SelectMenuProps extends SelectMenuStyleProps {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { SliderProps } from './Slider.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * A slider lets users select a numeric value (or range) by dragging a thumb along a track.
+ *
+ * The form value is `number[]`:
+ * - **Single-thumb mode** — pass a 1-element array, e.g. `[50]`.
+ * - **Range mode** — pass a 2-element array, e.g. `[20, 80]`.
+ *
+ * Use the `track` prop to control which side of the thumb the filled track appears on.
+ */
+declare const Slider: <TFieldValues extends FieldValues = FieldValues>({ min, max, name, step, distance, disabled, iconMin, iconMax, showMarks, direction, track, control, style, }: SliderProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Slider;

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

@@ -0,0 +1,59 @@
+import { type JSX } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Slider';
+import type { Control, FieldValues } from 'react-hook-form';
+export interface SliderStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value must be `number[]`.
+     * Pass a **1-element array** for single-thumb mode, or a **2-element array** for range mode.
+     */
+    name: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** Minimum selectable value (left / bottom end of the track).
+     * @default 0
+     */
+    min: number;
+    /** Maximum selectable value (right / top end of the track).
+     * Use `Infinity` to disable click-to-seek on the rail.
+     */
+    max: number;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Granularity of the value — each thumb snaps to multiples of `step`.
+     * @default 1
+     */
+    step?: number;
+    /** Minimum distance enforced between the two thumbs in range mode.
+     * Has no effect in single-thumb mode.
+     * @default 0
+     */
+    distance?: number;
+    /** Helper text displayed below the slider. */
+    helperText?: string;
+    /** Icon rendered inside the **min** thumb (or the only thumb in single-thumb mode). */
+    iconMin?: JSX.Element;
+    /** Icon rendered inside the **max** thumb. Only visible in range mode. */
+    iconMax?: JSX.Element;
+    /** When `true`, renders a small dot at every `step` position along the track.
+     * Requires a finite `max` value.
+     * @default false
+     */
+    showMarks?: boolean;
+    /** Layout orientation of the slider.
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /** Controls which side of the thumb the filled track appears on.
+     * - `'normal'` — fills from `min` toward the value (or between thumbs in range mode).
+     * - `'inverted'` — fills from the value toward `max` (or outside the thumbs in range mode).
+     * @default 'normal'
+     */
+    track?: 'normal' | 'inverted';
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface SliderProps<TFieldValues extends FieldValues = FieldValues> extends SliderStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,11 @@
+import type { SwitchProps } from './Switch.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * A switch (toggle) lets users turn a single setting on or off, like a physical light switch.
+ * Unlike a checkbox, a switch is expected to apply its effect immediately without a submit action.
+ *
+ * Optionally accepts `iconOn` and `iconOff` to visually communicate both states.
+ * The form value is a `boolean`.
+ */
+declare const Switch: <TFieldValues extends FieldValues = FieldValues>({ name, control, iconOn, iconOff, disabled, label, helperText, className, style, ...rest }: SwitchProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Switch;

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

@@ -0,0 +1,27 @@
+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> {
+    /** RHF field name. The form value will be a `boolean`. */
+    name: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** Prevents all interaction when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Icon rendered on the thumb when the switch is **on** (checked). */
+    iconOn?: JSX.Element;
+    /** Icon rendered on the thumb when the switch is **off** (unchecked). */
+    iconOff?: JSX.Element;
+    /** Text label displayed next to the switch. */
+    label?: string;
+    /** Helper text displayed below the switch when there is no active error. */
+    helperText?: string;
+    /** Theme override tokens. Pass a partial `EVENTS` object to customise colours. */
+    theme?: EVENTS;
+}
+export interface SwitchProps<TFieldValues extends FieldValues = FieldValues> extends SwitchStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,13 @@
+export interface CheckboxGroupContextValue {
+    /** Array of currently checked option values */
+    checkedValues: string[];
+    /** Toggle a value in/out of the checked array */
+    onChange: (value: string, checked: boolean) => void;
+    /** Group-level disabled state */
+    disabled?: boolean;
+    /** Group-level validation error */
+    error?: {
+        message?: string;
+    };
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | null>;

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

@@ -0,0 +1,23 @@
+import type { CheckboxGroupProps } from './CheckboxGroup.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * CheckboxGroup manages a set of `<Checkbox>` children as a single RHF field.
+ * The form value is `string[]` — the `value` props of every checked child.
+ *
+ * Validation (min, max, custom) is declared on the Zod schema:
+ * ```ts
+ * z.object({
+ *   options: z.array(z.string()).min(1, 'Select at least one').max(3, 'Select at most 3'),
+ * })
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup name="options" control={control} label="Skills">
+ *   <Checkbox value="react" label="React" />
+ *   <Checkbox value="vue" label="Vue" />
+ * </CheckboxGroup>
+ * ```
+ */
+declare const CheckboxGroup: <TFieldValues extends FieldValues = FieldValues>({ name, control, children, label, helperText, showErrorText, disabled, direction, style, className, }: CheckboxGroupProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CheckboxGroup;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/CheckboxGroup';
+import type { Control, FieldValues } from 'react-hook-form';
+export interface CheckboxGroupStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
+    name: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** `<Checkbox>` elements to render inside the group.
+     * Each child must have a `value` prop that identifies it.
+     */
+    children: React.ReactNode;
+    /** Group label displayed above the checkboxes. */
+    label?: string;
+    /** Disables every checkbox in the group when `true`.
+     * Individual checkboxes can also be disabled independently.
+     * @default false
+     */
+    disabled?: boolean;
+    /** When `false`, the group-level error message is suppressed.
+     * @default true
+     */
+    showErrorText?: boolean;
+    /** Helper text displayed below the group when there is no active error. */
+    helperText?: string;
+    /** Layout direction of the checkbox items.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /** 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 CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues> extends CheckboxGroupStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,13 @@
+export interface CheckboxTreeContextValue {
+    /** Array of currently checked option values */
+    checkedValues: string[];
+    /** Toggle a value in/out of the checked array */
+    onChange: (value: string, checked: boolean) => void;
+    /** Tree-level disabled state */
+    disabled?: boolean;
+    /** Tree-level validation error */
+    error?: {
+        message?: string;
+    };
+}
+export declare const CheckboxTreeContext: import("react").Context<CheckboxTreeContextValue | null>;

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

@@ -0,0 +1,23 @@
+import { type FieldValues } from 'react-hook-form';
+import type { CheckboxTreeProps } from './CheckboxTree.interface';
+/**
+ * CheckboxTree renders a parent `<Checkbox>` that controls all of its `<Checkbox>` children.
+ *
+ * Parent states:
+ * - **Checked** — all children are checked.
+ * - **Unchecked** — no children are checked.
+ * - **Indeterminate** — some (but not all) children are checked.
+ *
+ * The form value is `string[]` — the `value` props of every checked child.
+ * Validation is declared on the Zod schema, the same way as CheckboxGroup.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxTree name="options" control={control} label="Select all">
+ *   <Checkbox value="a" label="Option A" />
+ *   <Checkbox value="b" label="Option B" />
+ * </CheckboxTree>
+ * ```
+ */
+declare const CheckboxTree: <TFieldValues extends FieldValues = FieldValues>({ name, control, children, label, iconChecked, iconIndeterminate, helperText, showErrorText, disabled, style, className, }: CheckboxTreeProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CheckboxTree;

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

@@ -0,0 +1,42 @@
+import React, { type JSX } from 'react';
+import type { Control, FieldValues } from 'react-hook-form';
+import type { EVENTS } from '@hocs/ThemeProvider/components/Checkbox';
+export interface CheckboxTreeStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
+    name: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** `<Checkbox>` elements rendered as children of the tree.
+     * The parent checkbox controls all children at once.
+     */
+    children: React.ReactNode;
+    /** Text label displayed on the parent (select-all) checkbox. */
+    label?: string;
+    /** Icon rendered on the parent checkbox when **all** children are checked.
+     * @default `<CheckOutlinedIcon />`
+     */
+    iconChecked?: JSX.Element;
+    /** Icon rendered on the parent checkbox when **some** (but not all) children are checked,
+     * indicating an indeterminate state.
+     * @default `<RemoveOutlinedIcon />`
+     */
+    iconIndeterminate?: JSX.Element;
+    /** Disables the parent and all children when `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** When `false`, the error message below the tree is suppressed.
+     * @default true
+     */
+    showErrorText?: boolean;
+    /** Helper text displayed below the tree 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 CheckboxTreeProps<TFieldValues extends FieldValues = FieldValues> extends CheckboxTreeStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

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

@@ -0,0 +1,19 @@
+import type { RadioGroupProps } from './RadioGroup.interface';
+import { type FieldValues } from 'react-hook-form';
+/**
+ * RadioGroup manages a set of `<Radio>` children as a single RHF field.
+ * The form value is a `string` — the `value` prop of the selected Radio.
+ *
+ * Provides a `RadioGroupContext` that every child `<Radio>` reads its selected state from.
+ * Rendering a `<Radio>` outside a RadioGroup throws an error.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="option" control={control} label="Pick one">
+ *   <Radio value="a" label="Option A" />
+ *   <Radio value="b" label="Option B" />
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: <TFieldValues extends FieldValues = FieldValues>({ name, control, children, label, helperText, showErrorText, disabled, direction, style, className, }: RadioGroupProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default RadioGroup;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/RadioGroup';
+import type { Control, FieldValues } from 'react-hook-form';
+export interface RadioGroupStyleProps<TFieldValues extends FieldValues = FieldValues> {
+    /** RHF field name. The form value will be a `string` — the `value` prop of the selected Radio. */
+    name: string;
+    /** RHF control object. */
+    control: Control<TFieldValues>;
+    /** `<Radio>` elements to render inside the group.
+     * Each child must have a unique `value` prop.
+     */
+    children: React.ReactNode;
+    /** Group label displayed above the radio buttons. */
+    label?: string;
+    /** Disables every radio in the group when `true`.
+     * Individual radios can also be disabled independently.
+     * @default false
+     */
+    disabled?: boolean;
+    /** When `false`, the group-level error message is suppressed.
+     * @default true
+     */
+    showErrorText?: boolean;
+    /** Helper text displayed below the group when there is no active error. */
+    helperText?: string;
+    /** Layout direction of the radio items.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /** 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 RadioGroupProps<TFieldValues extends FieldValues = FieldValues> extends RadioGroupStyleProps<TFieldValues> {
+    /** Theme tokens injected by the ThemeProvider HOC. Do not pass manually. */
+    style: Record<string, string>;
+}

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

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

package/dist/hocs/MarginPage/index.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+type Props = {
+    children: JSX.Element;
+};
+declare const MarginPage: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default MarginPage;

package/dist/hocs/OutsideEvent/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type Props = {
+    onEvent: () => void;
+    children: ReactNode;
+};
+declare const OutsideEvent: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default OutsideEvent;

package/dist/hocs/ScrollToTop/index.d.ts

@@ -0,0 +1,2 @@
+declare const ScrollToTop: () => null;
+export default ScrollToTop;

package/dist/hocs/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,4 @@
+import { ThemeProviderComponent } from './ThemeProvider.interface';
+import type { Theme } from './ThemeProvider.interface';
+declare const ThemeProvider: <T extends readonly Theme[]>(props: ThemeProviderComponent<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ThemeProvider;

package/dist/hocs/ThemeProvider/ThemeProvider.interface.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from 'react';
+import COMPONTENTS from './components';
+import { Component } from './interfaces';
+import FONTS from './fonts';
+export interface Theme {
+    name: string;
+    components: COMPONTENTS;
+    fonts: FONTS;
+}
+export interface ThemeProviderStore {
+    themes: {
+        [key: string]: Record<Component, Record<string, string>>;
+    };
+    theme: string;
+    setThemes: (themes: {
+        [key: string]: Record<Component, Record<string, string>>;
+    }) => void;
+    setTheme: (theme: string) => void;
+}
+export type ThemeNames<T extends readonly {
+    name: string;
+}[] = readonly {
+    name: string;
+}[]> = T[number]['name'];
+export interface ThemeProviderComponent<T extends readonly Theme[] = readonly Theme[]> {
+    themes: T;
+    theme: ThemeNames<T>;
+    children: JSX.Element;
+}

package/dist/hocs/ThemeProvider/components/Button.d.ts

@@ -0,0 +1,36 @@
+import { Component, Event, StyleValues, Styles } from '../interfaces';
+declare const ROOT_KEYS: readonly [StyleValues.BORDER_RADIUS];
+declare const ENABLED_KEYS: readonly [StyleValues.BACKGROUND_COLOR, StyleValues.COLOR_PRIMARY, StyleValues.BORDER_COLOR, StyleValues.BORDER_WIDTH, StyleValues.BORDER_STYLE];
+declare const HOVER_KEYS: readonly [StyleValues.BACKGROUND_COLOR];
+declare const ACTIVE_KEYS: readonly [StyleValues.BACKGROUND_COLOR];
+declare const FOCUS_KEYS: readonly [StyleValues.OUTLINE_COLOR, StyleValues.OUTLINE_WIDTH, StyleValues.OUTLINE_STYLE, StyleValues.OUTLINE_OFFSET];
+declare const DISABLED_KEYS: readonly [StyleValues.BACKGROUND_COLOR, StyleValues.COLOR_PRIMARY, StyleValues.BORDER_COLOR, StyleValues.BORDER_WIDTH, StyleValues.BORDER_STYLE];
+declare const LOADING_KEYS: readonly [StyleValues.BACKGROUND_COLOR, StyleValues.COLOR_PRIMARY, StyleValues.BORDER_COLOR, StyleValues.BORDER_WIDTH, StyleValues.BORDER_STYLE];
+export interface ROOT extends Pick<Styles, (typeof ROOT_KEYS)[number]> {
+}
+export interface ENABLED extends Pick<Styles, (typeof ENABLED_KEYS)[number]> {
+}
+export interface HOVER extends Pick<Styles, (typeof HOVER_KEYS)[number]> {
+}
+export interface ACTIVE extends Pick<Styles, (typeof ACTIVE_KEYS)[number]> {
+}
+export interface FOCUS extends Pick<Styles, (typeof FOCUS_KEYS)[number]> {
+}
+export interface DISABLED extends Pick<Styles, (typeof DISABLED_KEYS)[number]> {
+}
+export interface LOADING extends Pick<Styles, (typeof LOADING_KEYS)[number]> {
+}
+export interface EVENTS {
+    [Event.ENABLED]?: ENABLED;
+    [Event.HOVER]?: HOVER;
+    [Event.ACTIVE]?: ACTIVE;
+    [Event.FOCUS]?: FOCUS;
+    [Event.DISABLED]?: DISABLED;
+    [Event.LOADING]?: LOADING;
+}
+export interface BUTTON extends Record<Component.BUTTON, {
+    ROOT?: ROOT;
+    EVENTS?: EVENTS;
+}> {
+}
+export {};