@kroo-web/design-system 1.1.103 → 1.1.106

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

@@ -10,8 +10,8 @@ export type TAccordionTriggerProps<C extends React.ElementType = 'p'> = React.Co
     controls?: React.ReactNode;
 };
 export declare const Accordion: {
-    Root: React.ForwardRefExoticComponent<TAccordionRootProps & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Root: (props: TAccordionRootProps) => React.JSX.Element;
+    Item: (props: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => React.JSX.Element;
     Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
         as?: "p" | undefined;
         size?: "regular" | "large";

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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, ...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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/src/utils/parseInt.d.ts

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

package/dist/esm/examples/CheckboxWithController/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TCheckboxProps } from '../../src';
+import { TFieldWithController } from '../form';
+export type TCheckboxControllerProps<T extends FieldValues> = TFieldWithController<T, TCheckboxProps>;
+export declare const CheckboxWithController: <T extends FieldValues>({ control, name, props }: TCheckboxControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/ComboBoxWithController/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TComboBoxProps } from '../../src';
+import { TFieldWithController } from '../form';
+export type TComboBoxControllerProps<T extends FieldValues> = TFieldWithController<T, Omit<TComboBoxProps, "field" | "name">>;
+export declare const ComboBoxWithController: <T extends FieldValues>({ control, name, props, }: TComboBoxControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/MagicForm/index.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from "react";
+export default function MagicForm({ defaultValues, children, onSubmit }: PropsWithChildren<{
+    defaultValues: {
+        [key: string]: any;
+    };
+    onSubmit: (data: any) => void;
+}>): React.JSX.Element;

package/dist/esm/examples/NumberFieldWithController/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TNumberFieldProps } from '../../src';
+import { TFieldWithController } from '../form';
+export type TNumberFieldControllerProps<T extends FieldValues> = TFieldWithController<T, TNumberFieldProps>;
+export declare const NumberFieldWithController: <T extends FieldValues>({ control, name, props }: TNumberFieldControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/PhoneFieldWithController/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TPhoneFieldProps } from '../../src';
+import { TFieldWithController } from '../form';
+export type TPhoneFieldControllerProps<T extends FieldValues> = TFieldWithController<T, TPhoneFieldProps>;
+export declare const PhoneFieldWithController: <T extends FieldValues>({ control, name, props }: TPhoneFieldControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/PinInputWithController/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TFieldWithController } from '../form';
+import { TPinInputProps } from '../../src';
+export type TPhoneFieldControllerProps<T extends FieldValues> = TFieldWithController<T, Omit<TPinInputProps, 'onChange'>>;
+export declare const PinInputWithController: <T extends FieldValues>({ control, name, props }: TPhoneFieldControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/RadioGroupWithController/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { TRadioGroupProps } from '../../src';
+import { TFieldWithController } from '../form';
+export type TRadioGroupControllerProps<T extends FieldValues> = TFieldWithController<T, TRadioGroupProps> & {
+    children: React.ReactNode;
+};
+export declare const RadioGroupWithController: <T extends FieldValues>({ control, name, props, children }: TRadioGroupControllerProps<T>) => React.JSX.Element;

package/dist/esm/examples/form/index.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import * as z from 'zod';
+import { Control, FieldValues, Path } from 'react-hook-form';
+export type TFieldWithController<T extends FieldValues, C> = {
+    control: Control<T, object>;
+    name: Path<T>;
+    props: C;
+};
 export declare const exampleSchema: z.ZodObject<{
     textField: z.ZodString;
     select: z.ZodString;
@@ -9,24 +15,33 @@ export declare const exampleSchema: z.ZodObject<{
     disclosureTextField: z.ZodString;
     range: z.ZodNumber;
     processor: z.ZodString;
+    phoneField: z.ZodString;
+    terms: z.ZodBoolean;
+    pin: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     select: string;
     radioGroup: string;
+    pin: string;
     range: number;
     textField: string;
     numberField: number;
     disclosureTextField: string;
     datePicker: Date;
     processor: string;
+    phoneField: string;
+    terms: boolean;
 }, {
     select: string;
     radioGroup: string;
+    pin: string;
     range: number;
     textField: string;
     numberField: number;
     disclosureTextField: string;
     datePicker: Date;
     processor: string;
+    phoneField: string;
+    terms: boolean;
 }>;
 export type TFormExample = {
     values: {
@@ -39,6 +54,25 @@ export type TFormExample = {
         disclosureTextField?: string;
         range?: number;
         processor?: string;
+        phoneField?: string;
+        terms?: boolean;
+        pin?: string;
     };
+    error?: boolean;
+    disabled?: boolean;
+};
+export type FormValues = {
+    textField: string;
+    currencyField: string;
+    select: string;
+    radioGroup: string;
+    numberField: number;
+    datePicker: string;
+    disclosureTextField: string;
+    range: number;
+    processor: string;
+    phoneField: string;
+    terms: boolean;
+    pin: string;
 };
-export declare const FormExample: ({ values }: TFormExample) => React.JSX.Element;
+export declare const FormExample: ({ values, error, disabled }: TFormExample) => React.JSX.Element;