@okam/stack-ui 1.42.4 → 1.43.0

package/components/fields/ComboBox/hooks/useComboBoxFiltering.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import type { TDefaultItemComponent } from '../../../../types/react-stately';
+import { default as React } from 'react';
+import { TDefaultItemComponent } from '../../../../types/react-stately';
+
 interface SimpleSectionData<I extends object = object> {
     key: string;
     title?: string;
@@ -16,15 +17,15 @@ export declare function useComboBoxFiltering<I extends object = object>(items: A
     inputValue: string | undefined;
     onInputChange: ((value: string) => void) | undefined;
     items: (SimpleSectionData<I> | FlatListItem<I>)[] | {
-        items: TDefaultItemComponent<I, import("../../../..").TToken>[] | undefined;
-        key: import("react-stately").Key;
+        items: TDefaultItemComponent<I, import('../../../..').TToken>[] | undefined;
+        key: import('react-stately').Key;
         as?: React.ElementType<any> | undefined;
         themeName?: string | null | undefined;
-        tokens?: import("../../../..").TToken | undefined;
-        customTheme?: import("../../../..").TCustomTheme;
+        tokens?: import('../../../..').TToken | undefined;
+        customTheme?: import('../../../..').TCustomTheme;
         title?: React.ReactNode;
         'aria-label'?: string;
-        children: (import("@react-types/shared").ItemElement<I> | import("@react-types/shared").ItemElement<I>[] | import("@react-types/shared").ItemRenderer<I>) & (((props: TDefaultItemComponent<I, import("../../../..").TToken>) => React.ReactElement) | undefined);
+        children: (import('@react-types/shared').ItemElement<I> | import('@react-types/shared').ItemElement<I>[] | import('@react-types/shared').ItemRenderer<I>) & (((props: TDefaultItemComponent<I, import('../../../..').TToken>) => React.ReactElement) | undefined);
     }[] | undefined;
 };
 export {};

package/components/fields/ComboBox/index.d.ts

@@ -1,6 +1,7 @@
-import type { RegisterOptions } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TComboBoxProps } from './interface';
+import { RegisterOptions } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TComboBoxProps } from './interface';
+
 declare const ComboBox: (props: TComboBoxProps<object, TToken>) => import("react/jsx-runtime").JSX.Element;
 export declare const ReactHookFormComboBox: ({ id, name, label, rules, tokens, themeName, isRequired, onChange, onInputChange, items, placeholder, icon, inputValue, defaultInputValue, allowsCustomValue, menuTrigger, ...rest }: TComboBoxProps & {
     rules?: RegisterOptions;

package/components/fields/ComboBox/interface.d.ts

@@ -1,11 +1,12 @@
-import type { ReactNode, RefObject } from 'react';
-import type { AriaComboBoxOptions } from 'react-aria';
-import type { RefCallBack } from 'react-hook-form';
-import type { ComboBoxState, ComboBoxStateOptions } from 'react-stately';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent, TReactHookForm } from '../../../types/components';
-import type { TDefaultNodeComponent } from '../../../types/react-stately';
-import type { TButtonProps } from '../../Button/interface';
+import { ReactNode, RefObject } from 'react';
+import { AriaComboBoxOptions } from 'react-aria';
+import { RefCallBack } from 'react-hook-form';
+import { ComboBoxState, ComboBoxStateOptions } from 'react-stately';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent, TReactHookForm } from '../../../types/components';
+import { TDefaultNodeComponent } from '../../../types/react-stately';
+import { TButtonProps } from '../../Button/interface';
+
 export type TFieldReactHookForm<T = TToken> = TReactHookForm & Omit<TDefaultComponent<T>, 'children'>;
 export interface TComboBoxProps<I extends object = object, T extends TToken = TToken> extends Omit<TFieldReactHookForm<T>, keyof AriaComboBoxOptions<I>>, Omit<AriaComboBoxOptions<I & TDefaultNodeComponent<I, T>>, 'inputRef' | 'buttonRef' | 'popoverRef' | 'listBoxRef'>, ComboBoxStateOptions<I & TDefaultNodeComponent<I, T>> {
     hookFormRef?: RefCallBack;

package/components/fields/DatePicker/DateRangePicker.d.ts

@@ -1,3 +1,4 @@
-import type { TDateRangePickerProps } from './interface';
+import { TDateRangePickerProps } from './interface';
+
 declare function DateRangePicker(props: TDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

package/components/fields/DatePicker/components/CalendarPopover.d.ts

@@ -1,2 +1,3 @@
-import type { TCalendarPopoverProps } from '../interface';
+import { TCalendarPopoverProps } from '../interface';
+
 export declare function CalendarPopover({ themeName, tokens, ...rest }: TCalendarPopoverProps): import("react/jsx-runtime").JSX.Element;

package/components/fields/DatePicker/components/DateField.d.ts

@@ -1,3 +1,4 @@
-import type { TDateFieldProps } from '../interface';
+import { TDateFieldProps } from '../interface';
+
 declare function DateField(props: TDateFieldProps): import("react/jsx-runtime").JSX.Element;
 export default DateField;

package/components/fields/DatePicker/components/Wrapper.d.ts

@@ -1,3 +1,4 @@
-import type { TWrapperProps } from '../interface';
-declare const Wrapper: import("react").ForwardRefExoticComponent<TWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+import { TWrapperProps } from '../interface';
+
+declare const Wrapper: import('react').ForwardRefExoticComponent<TWrapperProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Wrapper;

package/components/fields/DatePicker/index.d.ts

@@ -1,4 +1,5 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDatePickerProps } from './interface';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDatePickerProps } from './interface';
+
 declare function DatePicker<T extends TToken>(props: TDatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/components/fields/DatePicker/interface.d.ts

@@ -1,10 +1,10 @@
-import type { DateValue } from '@internationalized/date';
-import type React from 'react';
-import type { ReactNode } from 'react';
-import type { AriaDatePickerProps, AriaPopoverProps, DatePickerAria, DateRangePickerAria, Placement } from 'react-aria';
-import type { DateFieldState, DatePickerStateOptions, DateRangePickerStateOptions, DateSegment, OverlayTriggerState } from 'react-stately';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../types/components';
+import { DateValue } from '@internationalized/date';
+import { default as React, ReactNode } from 'react';
+import { AriaDatePickerProps, AriaPopoverProps, DatePickerAria, DateRangePickerAria, Placement } from 'react-aria';
+import { DateFieldState, DatePickerStateOptions, DateRangePickerStateOptions, DateSegment, OverlayTriggerState } from 'react-stately';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent } from '../../../types/components';
+
 export interface TDateSegmentProps extends TDefaultComponent {
     segment: DateSegment;
     state: DateFieldState;

package/components/fields/ListBox/components/ListBoxSection.d.ts

@@ -1,4 +1,5 @@
-import type { TToken } from '../../../../providers/Theme/interface';
-import type { TListBoxSectionProps } from '../interface';
+import { TToken } from '../../../../providers/Theme/interface';
+import { TListBoxSectionProps } from '../interface';
+
 declare const ListBoxSection: <I extends object = object, T extends TToken = TToken>({ section, state, ...props }: TListBoxSectionProps<I, T>) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxSection;

package/components/fields/ListBox/index.d.ts

@@ -1,5 +1,8 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TControlledListBoxProps, TListBoxProps } from './interface';
-export declare const ControlledListBox: import("react").ForwardRefExoticComponent<TControlledListBoxProps<object, TToken> & import("react").RefAttributes<HTMLElement>>;
-declare const ListBox: (props: TListBoxProps<object, TToken>) => import("react/jsx-runtime").JSX.Element;
+import { TToken } from '../../../providers/Theme/interface';
+import { TControlledListBoxFormProps, TListBoxFormProps, TReactHookFormListBoxProps, TControlledReactHookFormListBoxProps } from './interface';
+
+export declare const ControlledListBox: import('react').ForwardRefExoticComponent<TControlledListBoxFormProps<object, TToken> & import('react').RefAttributes<HTMLElement>>;
+declare const ListBox: (props: TListBoxFormProps<object, TToken>) => import("react/jsx-runtime").JSX.Element;
 export default ListBox;
+export declare const ControlledReactHookFormListBox: import('react').ForwardRefExoticComponent<TControlledReactHookFormListBoxProps<object, TToken> & import('react').RefAttributes<HTMLElement>>;
+export declare const ReactHookFormListBox: (props: TReactHookFormListBoxProps<object, TToken>) => import("react/jsx-runtime").JSX.Element;

package/components/fields/ListBox/interface.d.ts

@@ -1,20 +1,33 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import type { AriaListBoxProps, AriaListBoxSectionProps } from 'react-aria';
-import type { ListState } from 'react-stately';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../types/components';
-import type { TDefaultNode, TDefaultNodeComponent } from '../../../types/react-stately';
-import type { TAnchorProps } from '../../Button/interface';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { AriaListBoxProps, AriaListBoxSectionProps } from 'react-aria';
+import { RegisterOptions } from 'react-hook-form';
+import { ListState } from 'react-stately';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent, TReactHookForm } from '../../../types/components';
+import { TDefaultNode, TDefaultNodeComponent } from '../../../types/react-stately';
+import { TAnchorProps } from '../../Button/interface';
+
 export interface TListBoxProps<I extends object = object, T extends TToken = TToken> extends Omit<TDefaultComponent<T>, 'children'>, AriaListBoxProps<I & TDefaultNodeComponent<I, T>> {
     /**
      * @default Anchor
      */
     linkElementType?: ForwardRefExoticComponent<TAnchorProps & RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
 }
+export interface TListBoxFormProps<I extends object = object, T extends TToken = TToken> extends Omit<TListBoxProps<I, T>, 'onBlur'>, TReactHookForm {
+}
 export interface TControlledListBoxProps<I extends object = object, T extends TToken = TToken> extends Omit<TListBoxProps<I, T>, 'children'>, Partial<Pick<TListBoxProps<I, T>, 'children'>> {
     state: ListState<I>;
 }
+export interface TControlledListBoxFormProps<I extends object = object, T extends TToken = TToken> extends TControlledListBoxProps<I, T>, Omit<TListBoxFormProps<I, T>, 'children' | 'onBlur'> {
+}
 export interface TListBoxSectionProps<I extends object = object, T extends TToken = TToken> extends Omit<TDefaultComponent<T>, 'children'>, AriaListBoxSectionProps {
     section: TDefaultNode<I>;
     state: ListState<I>;
 }
+export interface TReactHookFormListBoxProps<I extends object = object, T extends TToken = TToken> extends Omit<TListBoxFormProps<I, T>, 'selectionMode'> {
+    rules?: RegisterOptions;
+    name: string;
+    selectionMode?: Exclude<AriaListBoxProps<I>['selectionMode'], 'none'>;
+}
+export interface TControlledReactHookFormListBoxProps<I extends object = object, T extends TToken = TToken> extends TReactHookFormListBoxProps<I, T>, Omit<TControlledListBoxFormProps<I, T>, 'children' | 'onBlur' | 'selectionMode'> {
+}

package/components/fields/ListBox/list-box.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ListBox from '.';
+import { Meta, StoryObj } from '@storybook/react';
+import { default as ListBox, ReactHookFormListBox } from '.';
+
 declare const meta: Meta<typeof ListBox>;
 export default meta;
 type Story = StoryObj<typeof ListBox>;
@@ -12,3 +13,5 @@ export declare const ChildrenRenderingFunctionWithSections: Story;
 export declare const Selectable: Story;
 export declare const Controlled: Story;
 export declare const LinkOptions: Story;
+type ReactHookFormStory = StoryObj<typeof ReactHookFormListBox>;
+export declare const ReactHookForm: ReactHookFormStory;

package/components/fields/Option/index.d.ts

@@ -1,4 +1,5 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TOptionProps } from './interface';
+import { TToken } from '../../../providers/Theme/interface';
+import { TOptionProps } from './interface';
+
 declare const Option: <I extends object = object, T extends TToken = TToken>({ item, state, ...props }: TOptionProps<I, T>) => import("react/jsx-runtime").JSX.Element;
 export default Option;

package/components/fields/Option/interface.d.ts

@@ -1,10 +1,11 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import type { AriaOptionProps } from 'react-aria';
-import type { ListState } from 'react-stately';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../types/components';
-import type { TDefaultNode } from '../../../types/react-stately';
-import type { TAnchorProps } from '../../Button/interface';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { AriaOptionProps } from 'react-aria';
+import { ListState } from 'react-stately';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent } from '../../../types/components';
+import { TDefaultNode } from '../../../types/react-stately';
+import { TAnchorProps } from '../../Button/interface';
+
 export interface TOptionProps<I extends object = object, T extends TToken = TToken> extends TDefaultComponent<T>, AriaOptionProps {
     state: ListState<I>;
     item: TDefaultNode<I>;

package/components/fields/Radio/Radio.interface.d.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { ChangeHandler, RefCallBack } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent, TReactHookForm } from '../../../types/components';
+import { default as React } from 'react';
+import { ChangeHandler, RefCallBack } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent, TReactHookForm } from '../../../types/components';
+
 export type TFieldReactHookForm<T> = TReactHookForm & TDefaultComponent<T>;
 export interface TRadioProps<T = TToken> extends TFieldReactHookForm<T> {
     id: string;

package/components/fields/Radio/index.d.ts

@@ -1,5 +1,6 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TRadioProps } from './Radio.interface';
+import { TToken } from '../../../providers/Theme/interface';
+import { TRadioProps } from './Radio.interface';
+
 declare const Radio: <T extends TToken>(props: TRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const ReactHookFormRadio: <T extends TToken>(props: TRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/components/fields/RadioGroup/index.d.ts

@@ -1,4 +1,5 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TRadioGroupProps } from './interface';
+import { TToken } from '../../../providers/Theme/interface';
+import { TRadioGroupProps } from './interface';
+
 declare const RadioGroup: <T extends TToken>(props: TRadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/components/fields/RadioGroup/interface.d.ts

@@ -1,6 +1,7 @@
-import type React from 'react';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../types/components';
+import { default as React } from 'react';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent } from '../../../types/components';
+
 export interface TRadioGroupProps<T = TToken> extends TDefaultComponent<T> {
     children: React.ReactNode;
     isError?: boolean;

package/components/fields/SearchField/index.d.ts

@@ -1,4 +1,5 @@
-import type { TToken } from '../../../providers/Theme/interface';
-import type TSearchProps from './interface';
+import { TToken } from '../../../providers/Theme/interface';
+import { default as TSearchProps } from './interface';
+
 declare const SearchField: <T extends TToken>(props: TSearchProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchField;

package/components/fields/SearchField/interface.d.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { AriaSearchFieldProps } from 'react-aria';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../types/components';
+import { default as React } from 'react';
+import { AriaSearchFieldProps } from 'react-aria';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent } from '../../../types/components';
+
 export default interface TSearchProps<T = TToken> extends AriaSearchFieldProps, TDefaultComponent<T> {
     disabled?: boolean;
     placeholder?: string;

package/components/fields/Select/Select.d.ts

@@ -1,6 +1,7 @@
-import type { RegisterOptions } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TSelectProps } from './Select.interface';
+import { RegisterOptions } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TSelectProps } from './Select.interface';
+
 declare const Select: <T extends TToken>(props: TSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const ReactHookFormSelect: ({ id, name, label, rules, tokens, defaultValue, themeName, required, onChange, options, placeholderLabel, icon, popoverMatchesWidth, value, ...rest }: TSelectProps & {
     rules?: RegisterOptions;

package/components/fields/Select/Select.interface.d.ts

@@ -1,9 +1,9 @@
-import type { CollectionChildren } from '@react-types/shared';
-import type { Key } from 'react';
-import type React from 'react';
-import type { RefCallBack } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent, TReactHookForm, Nullable } from '../../../types/components';
+import { CollectionChildren } from '@react-types/shared';
+import { Key, default as React } from 'react';
+import { RefCallBack } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent, TReactHookForm, Nullable } from '../../../types/components';
+
 export type TFieldReactHookForm<T = TToken> = TReactHookForm & Omit<TDefaultComponent<T>, 'children'>;
 export interface TSelectProps<T = TToken> extends TFieldReactHookForm<T> {
     id: string;
@@ -18,7 +18,7 @@ export interface TSelectProps<T = TToken> extends TFieldReactHookForm<T> {
     fieldRef?: RefCallBack;
     placeholderLabel: string;
     hookFormRef?: RefCallBack;
-    onSelectionChange?: (value: Key) => void;
+    onSelectionChange?: (value: Key | null) => void;
     defaultValue?: string;
     value?: Nullable<string>;
     popoverMatchesWidth?: boolean;

package/components/fields/Select/components/Listbox.d.ts

@@ -1,4 +1,5 @@
-import type { TListBoxProps, TOptionProps } from './Listbox.interface';
+import { TListBoxProps, TOptionProps } from './Listbox.interface';
+
 declare const Option: ({ item, state, themeName }: TOptionProps) => import("react/jsx-runtime").JSX.Element;
 declare const ListBox: (props: TListBoxProps) => import("react/jsx-runtime").JSX.Element;
 export { ListBox, Option };

package/components/fields/Select/components/Listbox.interface.d.ts

@@ -1,7 +1,8 @@
-import type React from 'react';
-import type { AriaListBoxOptions, AriaOptionProps } from 'react-aria';
-import type { ListState } from 'react-stately';
-import type { TDefaultComponent } from '../../../../types/components';
+import { default as React } from 'react';
+import { AriaListBoxOptions, AriaOptionProps } from 'react-aria';
+import { ListState } from 'react-stately';
+import { TDefaultComponent } from '../../../../types/components';
+
 export interface TListBoxProps extends AriaListBoxOptions<unknown>, TDefaultComponent {
     listBoxRef?: React.RefObject<any>;
     state: ListState<unknown>;

package/components/fields/Select/components/Popover.d.ts

@@ -1,3 +1,4 @@
-import type { TPopoverProps } from './Popover.interface';
+import { TPopoverProps } from './Popover.interface';
+
 declare const Popover: (props: TPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/components/fields/Select/components/Popover.interface.d.ts

@@ -1,8 +1,9 @@
-import type React from 'react';
-import type { AriaPopoverProps } from 'react-aria';
-import type { OverlayTriggerState } from 'react-stately';
-import type { TToken } from '../../../../providers/Theme/interface';
-import type { TDefaultComponent } from '../../../../types/components';
+import { default as React } from 'react';
+import { AriaPopoverProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { TToken } from '../../../../providers/Theme/interface';
+import { TDefaultComponent } from '../../../../types/components';
+
 export interface TPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'>, TDefaultComponent {
     children: React.ReactNode;
     state: OverlayTriggerState;

package/components/fields/Select/components/useListboxSections.d.ts

@@ -1,4 +1,5 @@
-import type { Item, Section } from './Listbox.interface';
+import { Item, Section } from './Listbox.interface';
+
 /**
  * Custom hook that builds a tree structure where each header is a section,
  * and each following option is a child of the section.

package/components/fields/SelectItem/SelectItem.d.ts

@@ -1,3 +1,4 @@
-import type { TSelectItemProps } from './SelectItem.interface';
+import { TSelectItemProps } from './SelectItem.interface';
+
 declare const SelectItem: (props: TSelectItemProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectItem;

package/components/fields/SelectItem/SelectItem.interface.d.ts

@@ -1,4 +1,5 @@
-import type { TDefaultComponent } from '../../../types/components';
+import { TDefaultComponent } from '../../../types/components';
+
 export interface TSelectItemProps extends TDefaultComponent {
     key: string;
     value: string;

package/components/fields/TextArea/index.d.ts

@@ -1,6 +1,7 @@
-import type { RegisterOptions } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TTextInputProps } from '../TextInputField/interface';
+import { RegisterOptions } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TTextInputProps } from '../TextInputField/interface';
+
 declare const TextArea: <T extends TToken>(props: TTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const ReactHookFormTextArea: ({ name, label, rules, tokens, ariaLabel, defaultValue, placeholder, themeName, isReadOnly, minLength, maxLength, required, isRequired, onChange, onBlur, children, ...rest }: TTextInputProps & {
     rules: RegisterOptions;

package/components/fields/TextInputField/index.d.ts

@@ -1,7 +1,8 @@
-import type { RegisterOptions } from 'react-hook-form';
-import type { TTextInputProps } from './interface';
+import { RegisterOptions } from 'react-hook-form';
+import { TTextInputProps } from './interface';
+
 declare const TextInputField: (props: TTextInputProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ReactHookFormInput: ({ name, label, rules, tokens, ariaLabel, defaultValue, placeholder, themeName, isReadOnly, minLength, maxLength, required, isRequired, onChange, onBlur, children, ...rest }: TTextInputProps & {
+export declare const ReactHookFormInput: ({ name, label, rules, tokens, ariaLabel, defaultValue, placeholder, themeName, isReadOnly, minLength, maxLength, required, isRequired, onChange, onBlur, children, errorIcon, icon, ...rest }: TTextInputProps & {
     rules: RegisterOptions;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TextInputField;

package/components/fields/TextInputField/interface.d.ts

@@ -1,8 +1,9 @@
-import type { InputHTMLAttributes } from 'react';
-import type { AriaTextFieldOptions } from 'react-aria';
-import type { RefCallBack } from 'react-hook-form';
-import type { TToken } from '../../../providers/Theme/interface';
-import type { TDefaultComponent, TReactHookForm } from '../../../types/components';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { AriaTextFieldOptions } from 'react-aria';
+import { RefCallBack } from 'react-hook-form';
+import { TToken } from '../../../providers/Theme/interface';
+import { TDefaultComponent, TReactHookForm } from '../../../types/components';
+
 export type TFieldReactHookForm<T = TToken> = TDefaultComponent<T> & TReactHookForm;
 export interface TTextInputProps<T = TToken> extends TFieldReactHookForm<T>, Omit<AriaTextFieldOptions<'input'>, 'onChange' | 'onBlur' | 'onFocus'> {
     name: string;
@@ -10,6 +11,8 @@ export interface TTextInputProps<T = TToken> extends TFieldReactHookForm<T>, Omi
     errorMessage?: string;
     isInvalid?: boolean;
     fieldRef?: RefCallBack;
+    icon?: ReactNode;
+    errorIcon?: ReactNode;
     /**
      * @deprecated use isRequired instead
      */
@@ -19,7 +22,7 @@ export interface TTextInputProps<T = TToken> extends TFieldReactHookForm<T>, Omi
      */
     disabled?: boolean;
     /**
-     * @deprecated depends on errorMEssage
+     * @deprecated depends on errorMessage
      */
     isError?: boolean;
 }

package/components/fields/TextInputField/text-input-field.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactHookFormInput as TextInputField } from './index';
+
+declare const meta: Meta<typeof TextInputField>;
+export default meta;
+export declare const Default: StoryObj<typeof TextInputField>;
+export declare const Disabled: StoryObj<typeof TextInputField>;
+export declare const Error: StoryObj<typeof TextInputField>;

package/components/icons/ArrowDown.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const ArrowDown: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default ArrowDown;

package/components/icons/ArrowLeft.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const ArrowLeft: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default ArrowLeft;

package/components/icons/ArrowRight.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const ArrowRight: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default ArrowRight;

package/components/icons/Check.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Check: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Check;

package/components/icons/ChevronLeft.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const ChevronLeft: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default ChevronLeft;

package/components/icons/ChevronRight.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const ChevronRight: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default ChevronRight;

package/components/icons/CloseBtn.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const CloseBtn: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default CloseBtn;

package/components/icons/ErrorIcon.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const ErrorIcon: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+export default ErrorIcon;

package/components/icons/Facebook.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Facebook: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Facebook;

package/components/icons/FacebookColored.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const FacebookColored: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default FacebookColored;

package/components/icons/FacebookRounded.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const FacebookRounded: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default FacebookRounded;

package/components/icons/Globe.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Globe: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Globe;

package/components/icons/IconFallback.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Fallback: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Fallback;

package/components/icons/Instagram.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Instagram: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Instagram;

package/components/icons/InstagramColored.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const InstagramColored: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default InstagramColored;

package/components/icons/Link.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const Link: React.MemoExoticComponent<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
 export default Link;