@kroo-web/design-system 1.1.104 → 1.1.106

package/dist/esm/src/components/Checkbox/index.d.ts

@@ -1,11 +1,12 @@
 import React, { ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TCheckboxProps<T extends FieldValues> = {
+export type TCheckboxProps = {
     id: string;
-    name: Path<T>;
     label: string | ReactNode;
     disabled?: boolean;
     className?: string;
     variant?: 'radio' | 'checkbox';
+    onChange?: (value: boolean) => void;
+    onBlur?: () => void;
+    value?: boolean;
 };
-export declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React.JSX.Element;
+export declare const Checkbox: ({ id, label, variant, value, onChange, onBlur }: TCheckboxProps) => React.JSX.Element;

package/dist/esm/src/components/ComboBox/index.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 export type TComboBoxItem = {
     text: string;
     img?: string;
@@ -7,11 +6,13 @@ export type TComboBoxItem = {
 };
 export type TComboBoxProps = {
     label: string;
-    name: string;
     options: TComboBoxItem[];
     onSelect?: (item: TComboBoxItem) => void;
     alwaysOpen?: boolean;
-    field: ControllerRenderProps<FieldValues>;
+    field: {
+        value: string;
+        onChange: (value: string) => void;
+        onBlur: () => void;
+    };
 };
-export declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React.JSX.Element;
-export declare const Field: ({ label, options, onSelect, alwaysOpen, field: { onBlur, ...restField } }: TComboBoxProps) => React.JSX.Element;
+export declare const ComboBox: (props: TComboBoxProps) => React.JSX.Element;

package/dist/esm/src/components/DatePicker/index.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TDatePicker<T extends FieldValues> = {
+export type TDatePickerProps = {
     id: string;
-    name: Path<T>;
     label: string;
     helper?: {
         message: string;
     };
-    min?: string;
-    max?: string;
     disabled?: boolean;
-};
-export declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React.JSX.Element;
+    error?: {
+        message: string;
+    };
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const DatePicker: React.ForwardRefExoticComponent<{
+    id: string;
+    label: string;
+    helper?: {
+        message: string;
+    };
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/src/components/Form/index.d.ts

@@ -1,8 +1,4 @@
-import React, { PropsWithChildren, HTMLProps } from 'react';
-import { FieldValues, UseFormReturn } from 'react-hook-form';
-type TFormProps<T extends FieldValues> = PropsWithChildren<HTMLProps<HTMLFormElement>> & {
-    methods: UseFormReturn<T>;
-    onSubmit: (values: T) => void;
-};
-export declare const Form: <T extends FieldValues>({ methods, children, onSubmit, ...rest }: TFormProps<T>) => React.JSX.Element;
+import React, { PropsWithChildren, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+type TFormProps = PropsWithChildren<DetailedHTMLProps<InputHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
+export declare const Form: ({ children, ...rest }: TFormProps) => React.JSX.Element;
 export {};

package/dist/esm/src/components/NumberField/index.d.ts

@@ -1,13 +1,23 @@
-import React from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TNumberFieldProps<T extends FieldValues> = {
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+export type TNumberFieldProps = {
+    id: string;
     label: string;
-    name: Path<T>;
-    min?: number;
-    max?: number;
     width?: number;
     helper?: {
         message: string;
     };
-};
-export declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React.JSX.Element;
+    error?: {
+        message: string;
+    };
+    onChange?: (value: number) => void;
+    onBlur?: () => void;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+/**
+ * NumberField - A component for rendering a number input field.
+ *
+ * @param {TNumberFieldProps} props - The properties for the number field component.
+ * @returns {JSX.Element} The rendered number field component.
+ *
+ * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
+ */
+export declare const NumberField: (props: TNumberFieldProps) => React.JSX.Element;

package/dist/esm/src/components/PhoneField/index.d.ts

@@ -1,13 +1,33 @@
 import React, { ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TPhoneFieldProps<T extends FieldValues> = {
+export type TPhoneFieldProps = {
     id: string;
-    name: Path<T>;
     disabled?: boolean;
+    error?: {
+        message: string;
+    };
     helper?: {
         message: ReactNode | string;
     };
     className?: string;
     placeholder?: string;
+    onChange?: (value: {
+        code: string;
+        number: string;
+        formatted: string;
+    }) => void;
+    onBlur?: () => void;
+    value?: {
+        code: string;
+        number: string;
+        formatted: string;
+    };
 };
-export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React.JSX.Element;
+/**
+ * PhoneField - A component for rendering a number input field.
+ *
+ * @param {TPhoneFieldProps} props - The properties for the phone field component.
+ * @returns {JSX.Element} The rendered number field component.
+ *
+ * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
+ */
+export declare const PhoneField: (props: TPhoneFieldProps) => React.JSX.Element;

package/dist/esm/src/components/PinInput/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export interface TPinInputProps<T extends FieldValues> {
-    name: Path<T>;
+export interface TPinInputProps {
     length: number;
     label: string;
     isOTP?: boolean;
     isPassword?: boolean;
     isNumeric?: boolean;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
 }
-export declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => React.JSX.Element;
+export declare const PinInput: ({ length, label, isOTP, isPassword, isNumeric, onChange, onBlur }: TPinInputProps) => React.JSX.Element;

package/dist/esm/src/components/RadioGroup/index.d.ts

@@ -1,14 +1,22 @@
 import React from 'react';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-import { FieldError, FieldValues, Path } from 'react-hook-form';
-export type TRadioGroupProps<T extends FieldValues> = {
-    name: Path<T>;
+export type TRadioGroupProps = {
+    className?: string;
+    name?: string;
     label: string;
     variant?: 'cards' | 'circle';
-    error?: FieldError;
-} & Omit<RadixRadioGroup.RadioGroupProps, 'name'>;
+    error?: {
+        message: string;
+    };
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    value?: string;
+};
 export declare const RadioGroup: {
-    Root: <T extends FieldValues>({ children, className, name, label, variant, disabled, ...props }: TRadioGroupProps<T>) => React.JSX.Element;
+    Root: React.ForwardRefExoticComponent<TRadioGroupProps & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
     Item: ({ children, className, variant, ...props }: RadixRadioGroup.RadioGroupItemProps & {
         variant?: "circle" | "cards";
     }) => React.JSX.Element;

package/dist/esm/src/components/Range/index.d.ts

@@ -1,15 +1,25 @@
-import React from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TRangeProps<T extends FieldValues> = {
+import React, { ChangeEvent } from 'react';
+export type TRangeProps = {
     id: string;
     label: string;
-    name: Path<T>;
-    min?: number;
-    max?: number;
     step?: number;
-    showValue?: boolean;
     helper?: {
         message: string;
     };
-};
-export declare const Range: <T extends FieldValues>(props: TRangeProps<T>) => React.JSX.Element;
+    error?: {
+        message: string;
+    };
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+export declare const Range: React.ForwardRefExoticComponent<{
+    id: string;
+    label: string;
+    step?: number;
+    helper?: {
+        message: string;
+    };
+    error?: {
+        message: string;
+    };
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/src/components/Select/index.d.ts

@@ -1,13 +1,11 @@
-import React, { OptionHTMLAttributes, ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
+import React, { DetailedHTMLProps, OptionHTMLAttributes, ReactNode } from 'react';
 export type TItem = {
     id: string;
     title: string;
 };
-export type TSelectProps<T extends FieldValues> = {
+export type TSelectProps = {
     id: string;
     label: string;
-    name: Path<T>;
     helper?: {
         message: string;
     };
@@ -21,5 +19,8 @@ export type TSelectProps<T extends FieldValues> = {
     defaultValue?: string;
     missing?: boolean;
     children?: ReactNode;
-};
-export declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React.JSX.Element;
+    error?: {
+        message: string;
+    };
+} & DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<TSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/esm/src/components/TextField/index.d.ts

@@ -1,9 +1,7 @@
 import React, { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TTextFieldProps<T extends FieldValues> = {
+export type TTextFieldProps = {
     id: string;
     label: string;
-    name: Path<T>;
     disabled?: boolean;
     helper?: {
         message: ReactNode | string;
@@ -16,5 +14,8 @@ export type TTextFieldProps<T extends FieldValues> = {
     leftContent?: ReactNode | string;
     missing?: boolean;
     disableError?: boolean;
+    error?: {
+        message: ReactNode | string;
+    };
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TTextFieldProps<FieldValues>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TTextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/src/components/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardedRef } from 'react';
 export type TLegacyMarketingText = 'marketing-text-light' | 'marketing-text-regular' | 'marketing-text-semi-bold' | 'marketing-quote-light' | 'marketing-quote-regular' | 'marketing-quote-semi-bold' | 'marketing-small-light' | 'marketing-small-regular' | 'marketing-small-semi-bold' | 'marketing-medium-light' | 'marketing-medium-regular' | 'marketing-medium-semi-bold' | 'marketing-large-light' | 'marketing-large-regular' | 'marketing-large-semi-bold' | 'marketing-tag-light' | 'marketing-tag-regular' | 'marketing-tag-semi-bold';
 export type TLegacyMarketingHeading = 'marketing-heading-1' | 'marketing-heading-2' | 'marketing-heading-3' | 'marketing-heading-4' | 'marketing-heading-5' | 'marketing-heading-6' | 'marketing-heading-7';
 export type TLegacyMarketingFooter = 'footer-regular' | 'footer-semi-bold';
@@ -10,4 +10,5 @@ export type TTypographyProps<C extends React.ElementType = 'p'> = {
     children?: React.ReactNode;
     className?: string;
 } & React.ComponentPropsWithoutRef<C>;
-export declare const Typography: <C extends React.ElementType = "p">({ as, variant, children, className, ...rest }: TTypographyProps<C>) => React.JSX.Element;
+export declare const TypographyComponent: <C extends React.ElementType = "p">(props: TTypographyProps<C>, forwardRef: ForwardedRef<C>) => React.JSX.Element;
+export declare const Typography: React.ForwardRefExoticComponent<Omit<TTypographyProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;

package/dist/esm/src/utils/composeRefs.d.ts

@@ -0,0 +1,2 @@
+import { ForwardedRef } from "react";
+export declare const composeRefs: <T extends unknown>(refs: ForwardedRef<T>[]) => (value: T) => void;

package/dist/esm/src/utils/parseInt.d.ts

@@ -0,0 +1 @@
+export declare const parseIntSafe: (value: string) => number;

package/dist/types.d.ts

@@ -1,7 +1,6 @@
-import React$1, { PropsWithChildren, ReactNode, HTMLProps, ElementType, ButtonHTMLAttributes, OptionHTMLAttributes, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import React$1, { PropsWithChildren, ForwardedRef, ReactNode, DetailedHTMLProps, InputHTMLAttributes, ElementType, ButtonHTMLAttributes, ChangeEvent, OptionHTMLAttributes } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { MaterialSymbolProps } from 'react-material-symbols';
-import { FieldValues, Path, ControllerRenderProps, UseFormReturn, FieldError } from 'react-hook-form';
 import * as zustand from 'zustand';
 import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
@@ -73,7 +72,8 @@ type TTypographyProps<C extends React$1.ElementType = 'p'> = {
     children?: React$1.ReactNode;
     className?: string;
 } & React$1.ComponentPropsWithoutRef<C>;
-declare const Typography: <C extends React$1.ElementType = "p">({ as, variant, children, className, ...rest }: TTypographyProps<C>) => React$1.JSX.Element;
+declare const TypographyComponent: <C extends React$1.ElementType = "p">(props: TTypographyProps<C>, forwardRef: ForwardedRef<C>) => React$1.JSX.Element;
+declare const Typography: React$1.ForwardRefExoticComponent<Omit<TTypographyProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>, "ref"> & React$1.RefAttributes<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
 
 type TCalloutRootProps = {
     type?: 'primary' | 'secondary' | 'warning' | 'error' | 'positive';
@@ -113,15 +113,17 @@ interface ICardsProps extends PropsWithChildren {
 }
 declare const Cards: ({ as, children, variants }: ICardsProps) => React$1.JSX.Element;
 
-type TCheckboxProps<T extends FieldValues> = {
+type TCheckboxProps = {
     id: string;
-    name: Path<T>;
     label: string | ReactNode;
     disabled?: boolean;
     className?: string;
     variant?: 'radio' | 'checkbox';
+    onChange?: (value: boolean) => void;
+    onBlur?: () => void;
+    value?: boolean;
 };
-declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React$1.JSX.Element;
+declare const Checkbox: ({ id, label, variant, value, onChange, onBlur }: TCheckboxProps) => React$1.JSX.Element;
 
 type TColumnsProps = {
     cols: number;
@@ -136,27 +138,39 @@ type TComboBoxItem = {
 };
 type TComboBoxProps = {
     label: string;
-    name: string;
     options: TComboBoxItem[];
     onSelect?: (item: TComboBoxItem) => void;
     alwaysOpen?: boolean;
-    field: ControllerRenderProps<FieldValues>;
+    field: {
+        value: string;
+        onChange: (value: string) => void;
+        onBlur: () => void;
+    };
 };
-declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React$1.JSX.Element;
-declare const Field: ({ label, options, onSelect, alwaysOpen, field: { onBlur, ...restField } }: TComboBoxProps) => React$1.JSX.Element;
+declare const ComboBox: (props: TComboBoxProps) => React$1.JSX.Element;
 
-type TDatePicker<T extends FieldValues> = {
+type TDatePickerProps = {
     id: string;
-    name: Path<T>;
     label: string;
     helper?: {
         message: string;
     };
-    min?: string;
-    max?: string;
     disabled?: boolean;
-};
-declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React$1.JSX.Element;
+    error?: {
+        message: string;
+    };
+} & React$1.InputHTMLAttributes<HTMLInputElement>;
+declare const DatePicker: React$1.ForwardRefExoticComponent<{
+    id: string;
+    label: string;
+    helper?: {
+        message: string;
+    };
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+} & React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TDisclosureProps = {
     condition: boolean;
@@ -164,11 +178,8 @@ type TDisclosureProps = {
 };
 declare const Disclosure: ({ condition, children }: TDisclosureProps) => React$1.JSX.Element;
 
-type TFormProps<T extends FieldValues> = PropsWithChildren<HTMLProps<HTMLFormElement>> & {
-    methods: UseFormReturn<T>;
-    onSubmit: (values: T) => void;
-};
-declare const Form: <T extends FieldValues>({ methods, children, onSubmit, ...rest }: TFormProps<T>) => React$1.JSX.Element;
+type TFormProps = PropsWithChildren<DetailedHTMLProps<InputHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
+declare const Form: ({ children, ...rest }: TFormProps) => React$1.JSX.Element;
 
 type PolymorphicLink<T extends ElementType> = {
     as?: T;
@@ -223,39 +234,72 @@ declare const Modal: {
     Buttons: ({ children }: TModalButtonProps) => React$1.JSX.Element;
 };
 
-type TNumberFieldProps<T extends FieldValues> = {
+type TNumberFieldProps = {
+    id: string;
     label: string;
-    name: Path<T>;
-    min?: number;
-    max?: number;
     width?: number;
     helper?: {
         message: string;
     };
-};
-declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React$1.JSX.Element;
-
-type TPhoneFieldProps<T extends FieldValues> = {
+    error?: {
+        message: string;
+    };
+    onChange?: (value: number) => void;
+    onBlur?: () => void;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+/**
+ * NumberField - A component for rendering a number input field.
+ *
+ * @param {TNumberFieldProps} props - The properties for the number field component.
+ * @returns {JSX.Element} The rendered number field component.
+ *
+ * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
+ */
+declare const NumberField: (props: TNumberFieldProps) => React$1.JSX.Element;
+
+type TPhoneFieldProps = {
     id: string;
-    name: Path<T>;
     disabled?: boolean;
+    error?: {
+        message: string;
+    };
     helper?: {
         message: ReactNode | string;
     };
     className?: string;
     placeholder?: string;
+    onChange?: (value: {
+        code: string;
+        number: string;
+        formatted: string;
+    }) => void;
+    onBlur?: () => void;
+    value?: {
+        code: string;
+        number: string;
+        formatted: string;
+    };
 };
-declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React$1.JSX.Element;
-
-interface TPinInputProps<T extends FieldValues> {
-    name: Path<T>;
+/**
+ * PhoneField - A component for rendering a number input field.
+ *
+ * @param {TPhoneFieldProps} props - The properties for the phone field component.
+ * @returns {JSX.Element} The rendered number field component.
+ *
+ * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
+ */
+declare const PhoneField: (props: TPhoneFieldProps) => React$1.JSX.Element;
+
+interface TPinInputProps {
     length: number;
     label: string;
     isOTP?: boolean;
     isPassword?: boolean;
     isNumeric?: boolean;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
 }
-declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => React$1.JSX.Element;
+declare const PinInput: ({ length, label, isOTP, isPassword, isNumeric, onChange, onBlur }: TPinInputProps) => React$1.JSX.Element;
 
 type TPopoverRootProps = React$1.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
 type TPopoverTriggerProps = React$1.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>;
@@ -274,42 +318,61 @@ type TProgressIndicatorProps = {
 };
 declare const ProgressIndicator: ({ label, size, current, max }: TProgressIndicatorProps) => React$1.JSX.Element;
 
-type TRadioGroupProps<T extends FieldValues> = {
-    name: Path<T>;
+type TRadioGroupProps = {
+    className?: string;
+    name?: string;
     label: string;
     variant?: 'cards' | 'circle';
-    error?: FieldError;
-} & Omit<RadixRadioGroup.RadioGroupProps, 'name'>;
+    error?: {
+        message: string;
+    };
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    value?: string;
+};
 declare const RadioGroup: {
-    Root: <T extends FieldValues>({ children, className, name, label, variant, disabled, ...props }: TRadioGroupProps<T>) => React$1.JSX.Element;
+    Root: React$1.ForwardRefExoticComponent<TRadioGroupProps & {
+        children?: React$1.ReactNode | undefined;
+    } & React$1.RefAttributes<HTMLDivElement>>;
     Item: ({ children, className, variant, ...props }: RadixRadioGroup.RadioGroupItemProps & {
         variant?: "circle" | "cards";
     }) => React$1.JSX.Element;
     Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => React$1.JSX.Element;
 };
 
-type TRangeProps<T extends FieldValues> = {
+type TRangeProps = {
     id: string;
     label: string;
-    name: Path<T>;
-    min?: number;
-    max?: number;
     step?: number;
-    showValue?: boolean;
     helper?: {
         message: string;
     };
-};
-declare const Range: <T extends FieldValues>(props: TRangeProps<T>) => React$1.JSX.Element;
+    error?: {
+        message: string;
+    };
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+declare const Range: React$1.ForwardRefExoticComponent<{
+    id: string;
+    label: string;
+    step?: number;
+    helper?: {
+        message: string;
+    };
+    error?: {
+        message: string;
+    };
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TItem = {
     id: string;
     title: string;
 };
-type TSelectProps<T extends FieldValues> = {
+type TSelectProps = {
     id: string;
     label: string;
-    name: Path<T>;
     helper?: {
         message: string;
     };
@@ -323,8 +386,11 @@ type TSelectProps<T extends FieldValues> = {
     defaultValue?: string;
     missing?: boolean;
     children?: ReactNode;
-};
-declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React$1.JSX.Element;
+    error?: {
+        message: string;
+    };
+} & DetailedHTMLProps<React$1.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+declare const Select: React$1.ForwardRefExoticComponent<Omit<TSelectProps, "ref"> & React$1.RefAttributes<HTMLSelectElement>>;
 
 type TSkeletonProps = {
     width?: string;
@@ -374,10 +440,9 @@ declare const Tag: {
     Content: ({ children, ...rest }: TTypographyProps) => React$1.JSX.Element;
 };
 
-type TTextFieldProps<T extends FieldValues> = {
+type TTextFieldProps = {
     id: string;
     label: string;
-    name: Path<T>;
     disabled?: boolean;
     helper?: {
         message: ReactNode | string;
@@ -390,8 +455,11 @@ type TTextFieldProps<T extends FieldValues> = {
     leftContent?: ReactNode | string;
     missing?: boolean;
     disableError?: boolean;
+    error?: {
+        message: ReactNode | string;
+    };
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const TextField: React$1.ForwardRefExoticComponent<Omit<TTextFieldProps<FieldValues>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const TextField: React$1.ForwardRefExoticComponent<Omit<TTextFieldProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TToastRootProps = {
     children: React$1.ReactNode;
@@ -436,4 +504,4 @@ type WrapperVariants = {
 };
 declare const Wrapper: ({ as, className, variants, children }: WrapperProps) => React$1.JSX.Element;
 
-export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Field, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NumberField, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, Wrapper, type WrapperProps, type WrapperVariants, useModal };
+export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NumberField, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePickerProps, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, TypographyComponent, Wrapper, type WrapperProps, type WrapperVariants, useModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kroo-web/design-system",
-  "version": "1.1.104",
+  "version": "1.1.106",
   "description": "Web design system for Kroo including the components for the marketing site and the product side.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",