@kroo-web/design-system 1.1.106 → 1.2.0

package/dist/cjs/src/__tests__/setup.d.ts

@@ -0,0 +1,5 @@
+import { render, RenderOptions } from '@testing-library/react';
+import { ReactElement } from 'react';
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) => ReturnType<typeof render>;
+export * from '@testing-library/react';
+export { customRender as render };

package/dist/cjs/src/components/Accordion/config.d.ts

@@ -5,7 +5,7 @@ export declare const AccordionContext: React.Context<{
 }>;
 export declare const AccordionContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
 export declare const AccordionItemContext: React.Context<{
-    value: string;
     setValue: (value: string) => void;
+    value: string;
 }>;
 export declare const AccordionItemContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;

package/dist/cjs/src/components/Accordion/index.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-export type TAccordionRootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
-    grouping?: 'attached' | 'detached';
+import React from 'react';
+export type TAccordionRootProps = {
     children: React.ReactNode;
-};
-export type TAccordionTriggerProps<C extends React.ElementType = 'p'> = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    grouping?: 'attached' | 'detached';
+} & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+export type TAccordionTriggerProps<C extends React.ElementType = 'p'> = {
     as?: C;
-    size?: 'regular' | 'large';
     controls?: React.ReactNode;
-};
+    size?: 'large' | 'regular';
+} & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
 export declare const Accordion: {
-    Root: (props: TAccordionRootProps) => React.JSX.Element;
+    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Item: (props: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => React.JSX.Element;
-    Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    Root: (props: TAccordionRootProps) => React.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<{
         as?: "p" | undefined;
-        size?: "regular" | "large";
         controls?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        size?: "large" | "regular";
+    } & Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/cjs/src/components/Button/index.d.ts

@@ -2,23 +2,23 @@ import React, { PropsWithChildren } from 'react';
 import { PolymorphicPropsWithoutRef } from '../../types/PolymorphicWithoutRef';
 declare const defaultElement = "button";
 type TButtonVisualTypes = {
+    variant?: 'danger' | 'ghost' | 'primary' | 'secondary' | 'tertiary';
     visualType?: 'button';
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
 } | {
+    variant?: 'danger' | 'ghost' | 'standard';
     visualType?: 'action';
-    variant?: 'standard' | 'ghost' | 'danger';
 } | {
+    variant?: 'outline' | 'primary' | 'secondary';
     visualType?: 'nav';
-    variant?: 'primary' | 'outline' | 'secondary';
 } | {
-    visualType?: 'text';
     variant?: 'primary' | 'secondary';
+    visualType?: 'text';
 };
 type TButtonOwnProps = {
     as?: 'button' | 'span';
     className?: string;
     onlyIcon?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren & TButtonVisualTypes;
+} & PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement> & TButtonVisualTypes;
 export type TButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<TButtonOwnProps, T>;
-export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: TButtonProps<T>): React.JSX.Element;
+export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, className, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): React.JSX.Element;
 export {};

package/dist/cjs/src/components/Callout/index.d.ts

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import { TTypographyProps } from '../Typography';
 export type TCalloutRootProps = {
-    type?: 'primary' | 'secondary' | 'warning' | 'error' | 'positive';
+    type?: 'error' | 'positive' | 'primary' | 'secondary' | 'warning';
 };
 export type TCalloutTextProps = TTypographyProps<'p'>;
 export declare const Callout: {
-    Root: ({ type, children }: PropsWithChildren<TCalloutRootProps>) => React.JSX.Element;
     Icon: ({ size, weight, ...rest }: import("../Icon").TIconProps) => React.JSX.Element;
+    Root: ({ children, type }: PropsWithChildren<TCalloutRootProps>) => React.JSX.Element;
     Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => React.JSX.Element;
 };

package/dist/cjs/src/components/Card/index.d.ts

@@ -2,20 +2,20 @@ import React, { PropsWithChildren } from 'react';
 import { PolymorphicPropsWithoutRef } from '../../types/PolymorphicWithoutRef';
 declare const defaultElement = "div";
 export type TCardVariants = {
-    visual?: 'primary' | 'secondary' | 'tertiary';
+    elementType?: 'div';
+    radius?: 'large' | 'medium' | 'none' | 'small';
     size?: {
-        vertical: 'none' | 'extra-small' | 'small' | 'medium' | 'large';
-        horizontal: 'none' | 'extra-small' | 'small' | 'medium' | 'large';
+        horizontal: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
+        vertical: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
     };
-    radius?: 'none' | 'small' | 'medium' | 'large';
-    elementType?: 'div';
+    visual?: 'primary' | 'secondary' | 'tertiary';
 };
 export interface ICardOwnProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
     as?: 'div';
-    variants?: TCardVariants;
     className?: string;
     isSquare?: boolean;
+    variants?: TCardVariants;
 }
 export type ICardProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<ICardOwnProps, T>;
-export declare function Card<T extends React.ElementType = typeof defaultElement>({ as, children, variants, className, isSquare, ...rest }: ICardProps<T>): React.JSX.Element;
+export declare function Card<T extends React.ElementType = typeof defaultElement>({ as, children, className, isSquare, variants, ...rest }: ICardProps<T>): React.JSX.Element;
 export {};

package/dist/cjs/src/components/Cards/index.d.ts

@@ -1,9 +1,9 @@
 import React, { PropsWithChildren } from 'react';
 export type CardsVariants = {
-    layout?: 'bento-three' | 'bento-four' | 'bento-five';
+    layout?: 'bento-five' | 'bento-four' | 'bento-three';
 };
 export interface ICardsProps extends PropsWithChildren {
-    as: 'div' | 'ol' | 'ul' | 'section';
+    as: 'div' | 'ol' | 'section' | 'ul';
     variants: CardsVariants;
 }
 export declare const Cards: ({ as, children, variants }: ICardsProps) => React.JSX.Element;

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

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

package/dist/cjs/src/components/Columns/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type TColumnsProps = {
-    cols: number;
     children: React.ReactNode;
+    cols: number;
 };
-export declare const Columns: ({ cols, children }: TColumnsProps) => React.JSX.Element;
+export declare const Columns: ({ children, cols }: TColumnsProps) => React.JSX.Element;

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

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

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

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

package/dist/cjs/src/components/Disclosure/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type TDisclosureProps = {
-    condition: boolean;
     children: React.ReactNode;
+    condition: boolean;
 };
-export declare const Disclosure: ({ condition, children }: TDisclosureProps) => React.JSX.Element;
+export declare const Disclosure: ({ children, condition }: TDisclosureProps) => React.JSX.Element;

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

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

package/dist/cjs/src/components/Icon/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MaterialSymbolProps } from 'react-material-symbols';
 export type TIconProps = {
-    size?: 'regular' | 'large' | 'xlarge';
-    weight?: 'light' | 'normal' | 'medium';
+    size?: 'large' | 'regular' | 'xlarge';
+    weight?: 'light' | 'medium' | 'normal';
 } & Omit<MaterialSymbolProps, 'size' | 'weight'>;
 export declare const Icon: ({ size, weight, ...rest }: TIconProps) => React.JSX.Element;

package/dist/cjs/src/components/Link/index.d.ts

@@ -3,9 +3,9 @@ type PolymorphicLink<T extends ElementType> = {
     as?: T;
     className?: string;
 } & PropsWithChildren;
-type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type AnchorProps = {
     as?: undefined;
-};
-export type TLink<T extends ElementType> = PolymorphicLink<T> | AnchorProps;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export type TLink<T extends ElementType> = AnchorProps | PolymorphicLink<T>;
 export declare const Link: <T extends ElementType = "a">({ as, children, className, ...rest }: TLink<T>) => React.JSX.Element;
 export {};

package/dist/cjs/src/components/Loading/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 declare const sizes: {
-    small: string;
-    medium: string;
-    large: string;
     full: string;
+    large: string;
+    medium: string;
+    small: string;
 };
 export type TLoadingProps = {
     size?: keyof typeof sizes;

package/dist/cjs/src/components/Modal/index.d.ts

@@ -2,32 +2,32 @@ import React, { ButtonHTMLAttributes, PropsWithChildren } from 'react';
 import { TButtonProps } from '../Button';
 export type TUseModalProps = {
     activeModal: string;
+    close: () => void;
     isOpen: boolean;
     open: (value: string) => void;
-    close: () => void;
 };
 export declare const useModal: import("zustand").UseBoundStore<import("zustand").StoreApi<TUseModalProps>>;
 export type TModalContentProps = {
     children: React.ReactNode;
-    value: string;
-    focusTrap?: boolean;
     closeOnBackdropClick?: boolean;
+    focusTrap?: boolean;
+    value: string;
 };
 export type TModalControlProps = {
     children: React.ReactNode;
     value: string;
 } & TButtonProps;
 export type TModalHeaderProps = {
+    actionButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    onClick?: () => void;
     title: string;
     variant?: 'action';
-    onClick?: () => void;
-    actionButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
 };
 export type TModalButtonProps = PropsWithChildren;
 export declare const Buttons: ({ children }: TModalButtonProps) => React.JSX.Element;
 export declare const Modal: {
-    Content: ({ value, children, focusTrap, closeOnBackdropClick }: TModalContentProps) => React.JSX.Element;
-    Control: ({ value, children, ...rest }: TModalControlProps) => React.JSX.Element;
-    Header: ({ title, variant, onClick, actionButtonProps }: TModalHeaderProps) => React.JSX.Element;
     Buttons: ({ children }: TModalButtonProps) => React.JSX.Element;
+    Content: ({ children, closeOnBackdropClick, focusTrap, value }: TModalContentProps) => React.JSX.Element;
+    Control: ({ children, value, ...rest }: TModalControlProps) => React.JSX.Element;
+    Header: ({ actionButtonProps, onClick, title, variant }: TModalHeaderProps) => React.JSX.Element;
 };

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

@@ -1,23 +1,13 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
-export type TNumberFieldProps = {
-    id: string;
-    label: string;
-    width?: number;
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+export type TNumberFieldProps<T extends FieldValues> = {
     helper?: {
         message: string;
     };
-    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;
+    label: string;
+    max?: number;
+    min?: number;
+    name: Path<T>;
+    width?: number;
+};
+export declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React.JSX.Element;

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

@@ -1,33 +1,13 @@
 import React, { ReactNode } from 'react';
-export type TPhoneFieldProps = {
-    id: string;
+import { FieldValues, Path } from 'react-hook-form';
+export type TPhoneFieldProps<T extends FieldValues> = {
+    className?: string;
     disabled?: boolean;
-    error?: {
-        message: string;
-    };
     helper?: {
         message: ReactNode | string;
     };
-    className?: string;
+    id: string;
+    name: Path<T>;
     placeholder?: string;
-    onChange?: (value: {
-        code: string;
-        number: string;
-        formatted: string;
-    }) => void;
-    onBlur?: () => void;
-    value?: {
-        code: string;
-        number: string;
-        formatted: string;
-    };
 };
-/**
- * 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;
+export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React.JSX.Element;

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

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

package/dist/cjs/src/components/Popover/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
 export type TPopoverRootProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
 export type TPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>;
 export type TPopoverContentProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Content>;
 export declare const Popover: {
+    Content: ({ children, ...rest }: TPopoverContentProps) => React.JSX.Element;
     Root: (props: TPopoverRootProps) => React.JSX.Element;
     Trigger: ({ children, ...rest }: TPopoverTriggerProps) => React.JSX.Element;
-    Content: ({ children, ...rest }: TPopoverContentProps) => React.JSX.Element;
 };

package/dist/cjs/src/components/ProgressIndicator/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export type TProgressIndicatorProps = {
-    label?: string;
-    size?: 'small' | 'medium' | 'full-width';
     current?: number;
+    label?: string;
     max?: number;
+    size?: 'full-width' | 'medium' | 'small';
 };
-export declare const ProgressIndicator: ({ label, size, current, max }: TProgressIndicatorProps) => React.JSX.Element;
+export declare const ProgressIndicator: ({ current, label, max, size }: TProgressIndicatorProps) => React.JSX.Element;

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

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

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

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

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

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

package/dist/cjs/src/components/Skeleton/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export type TSkeletonProps = {
-    width?: string;
     height?: string;
     rounded?: boolean;
+    width?: string;
 };
-export declare const Skeleton: ({ width, height, rounded }: TSkeletonProps) => React.JSX.Element;
+export declare const Skeleton: ({ height, rounded, width }: TSkeletonProps) => React.JSX.Element;

package/dist/cjs/src/components/Table/index.d.ts

@@ -7,11 +7,11 @@ export declare const TableRow: ({ children }: PropsWithChildren) => React.JSX.El
 export declare const TableData: ({ children }: PropsWithChildren) => React.JSX.Element;
 export declare const TableFooter: ({ children }: PropsWithChildren) => React.JSX.Element;
 export declare const Table: {
-    Root: ({ children }: PropsWithChildren) => React.JSX.Element;
-    Head: ({ children }: PropsWithChildren) => React.JSX.Element;
-    Header: ({ children }: PropsWithChildren) => React.JSX.Element;
     Body: ({ children }: PropsWithChildren) => React.JSX.Element;
-    Row: ({ children }: PropsWithChildren) => React.JSX.Element;
     Data: ({ children }: PropsWithChildren) => React.JSX.Element;
     Footer: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Head: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Header: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Root: ({ children }: PropsWithChildren) => React.JSX.Element;
+    Row: ({ children }: PropsWithChildren) => React.JSX.Element;
 };

package/dist/cjs/src/components/Tabs/index.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
+import React from 'react';
 export type TTabsRoot = React.ComponentProps<typeof RadixTabs.Root>;
 export type TTabsList = React.ComponentProps<typeof RadixTabs.List>;
 export type TTabsTrigger = React.ComponentProps<typeof RadixTabs.Trigger>;
 export type TTabsContent = React.ComponentProps<typeof RadixTabs.Content>;
 export declare const Tabs: {
-    Root: ({ children, ...rest }: TTabsRoot) => React.JSX.Element;
+    Content: ({ children, ...rest }: TTabsContent) => React.JSX.Element;
     List: ({ children, ...rest }: TTabsList) => React.JSX.Element;
+    Root: ({ children, ...rest }: TTabsRoot) => React.JSX.Element;
     Trigger: ({ children, ...rest }: TTabsTrigger) => React.JSX.Element;
-    Content: ({ children, ...rest }: TTabsContent) => React.JSX.Element;
 };