@foi/design-system 0.0.10 → 0.0.12

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.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. */
@@ -53,6 +53,10 @@ export interface CheckboxStyleProps<TFieldValues extends FieldValues = FieldValu
     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;
     /** Controlled mode — callback fired when the checked state changes.
      * Use this prop together with the `checked` attribute instead of RHF `control`.
      */

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

@@ -1,4 +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;
+declare const Checkbox: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: CheckboxStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default 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/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> {
+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.interface.d.ts

@@ -1,7 +1,7 @@
 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> {
+export interface InputStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
     /** RHF field name. The form value will be a `string`. */
     name: string;
     /** Floating label displayed inside the field border. */
@@ -48,6 +48,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/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/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/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/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/RadioGroup/RadioGroup.interface.d.ts

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

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

@@ -1,4 +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;
+declare const RadioGroup: <TFieldValues extends FieldValues = FieldValues>({ theme, variant, ...rest }: RadioGroupStyleProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default RadioGroup;