@kroo-web/design-system 1.12.1 → 1.12.2

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

@@ -1,5 +0,0 @@
-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/__tests__/setup2.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/vitest';

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

@@ -1,24 +0,0 @@
-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?: 'danger' | 'ghost' | 'standard';
-    visualType?: 'action';
-} | {
-    variant?: 'outline' | 'primary' | 'secondary';
-    visualType?: 'nav';
-} | {
-    variant?: 'primary' | 'secondary';
-    visualType?: 'text';
-};
-type TButtonOwnProps = {
-    as?: 'button' | 'span';
-    className?: string;
-    onlyIcon?: boolean;
-} & 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, className, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): React.JSX.Element;
-export {};

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

@@ -1,11 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { TTypographyProps } from '../Typography';
-export type TCalloutRootProps = {
-    type?: 'error' | 'positive' | 'primary' | 'secondary' | 'warning';
-};
-export type TCalloutTextProps = TTypographyProps<'p'>;
-export declare const Callout: {
-    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

@@ -1,21 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { PolymorphicPropsWithoutRef } from '../../types/PolymorphicWithoutRef';
-declare const defaultElement = "div";
-export type TCardVariants = {
-    elementType?: 'div';
-    radius?: 'large' | 'medium' | 'none' | 'small';
-    size?: {
-        horizontal: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
-        vertical: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
-    };
-    visual?: 'primary' | 'secondary' | 'tertiary';
-};
-export interface ICardOwnProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-    as?: 'div';
-    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, className, isSquare, variants, ...rest }: ICardProps<T>): React.JSX.Element;
-export {};

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

@@ -1,23 +0,0 @@
-import React, { ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TCheckboxProps<T extends FieldValues> = {
-    className?: string;
-    disabled?: boolean;
-    id: string;
-    label: ReactNode | string;
-    name: Path<T>;
-    variant?: 'checkbox' | 'radio';
-};
-export declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React.JSX.Element;
-export type TNativeCheckboxProps = {
-    disabled?: boolean;
-    error?: {
-        message: string;
-    };
-    helper?: {
-        message: string;
-    };
-    id: string;
-    label: ReactNode | string;
-} & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const NativeCheckbox: React.ForwardRefExoticComponent<Omit<TNativeCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -1,51 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ComboBoxProps } from 'react-aria-components';
-import { ControllerRenderProps, FieldValues } from 'react-hook-form';
-export type TComboBoxItem = {
-    img?: string;
-    render?: ReactNode;
-    text: string;
-};
-export type TComboBoxProps = {
-    alwaysOpen?: boolean;
-    field: ControllerRenderProps<FieldValues>;
-    label: string;
-    name: string;
-    onSelect?: (item: TComboBoxItem) => void;
-    options: TComboBoxItem[];
-};
-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;
-export type TNativeComboBoxRootProps = {
-    children: ReactNode;
-    disabled?: boolean;
-    error?: {
-        message: string;
-    };
-    helper?: {
-        message: string;
-    };
-    hideLabel?: boolean;
-    id: string;
-    label: string;
-    missing?: boolean;
-    placeholder?: string;
-} & Omit<ComboBoxProps<TComboBoxItem>, 'children' | 'isDisabled' | 'label' | 'onOpenChange' | 'placeholder'>;
-export declare const Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
-export declare const Options: ({ children }: {
-    children: ReactNode;
-}) => React.JSX.Element;
-export declare const Item: ({ children, img }: {
-    children: ReactNode;
-    img?: string;
-}) => React.JSX.Element;
-export declare const NativeComboBox: {
-    Item: ({ children, img }: {
-        children: ReactNode;
-        img?: string;
-    }) => React.JSX.Element;
-    Options: ({ children }: {
-        children: ReactNode;
-    }) => React.JSX.Element;
-    Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
-};

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

@@ -1,26 +0,0 @@
-import { CSSProperties } from 'react';
-import { MaterialSymbolWeightArray, SymbolCodepointsArray } from './consts';
-export type SymbolCodepoints = (typeof SymbolCodepointsArray)[number];
-export type MaterialSymbolWeight = (typeof MaterialSymbolWeightArray)[number];
-export type MaterialSymbolProps = {
-    className?: string;
-    /** Default `'inherit'`
-     *
-     * Color accepts key values (`'red'`, `'blue'`, `'indigo'`, etc.), `<hex-color>`, `<rgb()>`, `<hsl()>` and `<hwb()>` values.  */
-    color?: CSSProperties['color'];
-    /** Default `false`.
-     *
-     * Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states. */
-    fill?: boolean;
-    /** Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol. */
-    grade?: number;
-    /** Required. The name of the icon to render. */
-    icon: SymbolCodepoints;
-    /** Default `'inherit'`.
-     *
-     * Size defines the icon width and height in pixels. For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales. */
-    size?: number;
-    style?: CSSProperties;
-    /** Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and heavy (900). Weight can also affect the overall size of the symbol. */
-    weight?: MaterialSymbolWeight;
-};

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

@@ -1,11 +0,0 @@
-import React, { ElementType, PropsWithChildren } from 'react';
-type PolymorphicLink<T extends ElementType> = {
-    as?: T;
-    className?: string;
-} & PropsWithChildren;
-type AnchorProps = {
-    as?: undefined;
-} & 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,12 +0,0 @@
-import React from 'react';
-declare const sizes: {
-    full: string;
-    large: string;
-    medium: string;
-    small: string;
-};
-export type TLoadingProps = {
-    size?: keyof typeof sizes;
-};
-export declare const Loading: ({ size }: TLoadingProps) => React.JSX.Element;
-export {};

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

@@ -1,33 +0,0 @@
-import React, { ButtonHTMLAttributes, PropsWithChildren } from 'react';
-import { TButtonProps } from '../Button';
-export type TUseModalProps = {
-    activeModal: string;
-    close: () => void;
-    isOpen: boolean;
-    open: (value: string) => void;
-};
-export declare const useModal: import("zustand").UseBoundStore<import("zustand").StoreApi<TUseModalProps>>;
-export type TModalContentProps = {
-    children: React.ReactNode;
-    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';
-};
-export type TModalButtonProps = PropsWithChildren;
-export declare const Buttons: ({ children }: TModalButtonProps) => React.JSX.Element;
-export declare const Modal: {
-    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/PhoneField/index.d.ts

@@ -1,34 +0,0 @@
-import React, { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TPhoneFieldProps<T extends FieldValues> = {
-    className?: string;
-    disabled?: boolean;
-    helper?: {
-        message: ReactNode | string;
-    };
-    id: string;
-    name: Path<T>;
-    placeholder?: string;
-};
-export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React.JSX.Element;
-export type TNativeCountrySelectProps = {
-    id: string;
-    missing?: boolean;
-    onChange?: ChangeEventHandler<HTMLSelectElement>;
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-export type TNativeInputProps = {
-    className?: string;
-    error?: {
-        message: string;
-    };
-    id: string;
-    missing?: boolean;
-    placeholder: string;
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const NativePhoneField: {
-    CountrySelect: React.ForwardRefExoticComponent<Omit<TNativeCountrySelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<TNativeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    Root: ({ children }: {
-        children: ReactNode;
-    }) => React.JSX.Element;
-};

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

@@ -1,13 +0,0 @@
-import { OTPInputProps } from 'input-otp';
-import React from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export interface TPinInputProps<T extends FieldValues> {
-    isNumeric?: boolean;
-    isOTP?: boolean;
-    isPassword?: boolean;
-    label: string;
-    length: number;
-    name: Path<T>;
-}
-export declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => React.JSX.Element;
-export declare const OTPInput: (props: Pick<OTPInputProps, "inputMode" | "onChange" | "onComplete" | "value">) => React.JSX.Element;

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

@@ -1,16 +0,0 @@
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-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';
-} & Omit<RadixRadioGroup.RadioGroupProps, 'name'>;
-export declare const RadioGroup: {
-    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/Select/index.d.ts

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

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

@@ -1,17 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-export declare const TableRoot: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableHead: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableHeader: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableBody: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableRow: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableData: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const TableFooter: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const Table: {
-    Body: ({ 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/TextField/index.d.ts

@@ -1,35 +0,0 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
-import { FieldValues, Path } from 'react-hook-form';
-export type TTextFieldProps<T extends FieldValues> = {
-    className?: string;
-    disabled?: boolean;
-    disableError?: boolean;
-    helper?: {
-        message: ReactNode | string;
-    };
-    id: string;
-    label: string;
-    missing?: boolean;
-    name: Path<T>;
-    prefix?: ReactNode | string;
-    rightContent?: ReactNode | string;
-    suffix?: ReactNode | string;
-    type?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['type'];
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TTextFieldProps<FieldValues>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export type TNativeTextFieldProps = {
-    className?: string;
-    error?: {
-        message: string;
-    };
-    helper?: {
-        message: ReactNode | string;
-    };
-    id: string;
-    label: string;
-    missing?: boolean;
-    prefix?: ReactNode | string;
-    rightContent?: ReactNode | string;
-    suffix?: ReactNode | string;
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const NativeTextField: React.ForwardRefExoticComponent<Omit<TNativeTextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { TIconProps } from '../Icon';
-export type TToastRootProps = {
-    children: React.ReactNode;
-};
-export type TToastTitleProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-export type TToastDescriptionProps = {
-    children: React.ReactNode;
-};
-export type TToastIconProps = TIconProps;
-export declare const Toast: {
-    Description: ({ children }: TToastDescriptionProps) => React.JSX.Element;
-    Icon: (props: TToastIconProps) => React.JSX.Element;
-    Root: ({ children }: TToastRootProps) => React.JSX.Element;
-    Title: ({ children, className }: TToastTitleProps) => React.JSX.Element;
-};

package/dist/cjs/src/components/shared/FieldError/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type TFieldErrorProps = {
-    error: {
-        message: string;
-    };
-};
-export declare const FieldError: ({ error }: TFieldErrorProps) => React.JSX.Element;

package/dist/cjs/src/components/shared/FieldHelper/index.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export type TFieldHelperProps = {
-    helper: {
-        message: string;
-    };
-    /**
-     * The id of the field helper this is required and expected to be used in conjunction with describeBy on the input field
-     * so they are associated..
-     */
-    id: string;
-};
-export declare const FieldHelper: ({ helper, id }: TFieldHelperProps) => React.JSX.Element;

package/dist/cjs/src/components/shared/FormField/index.d.ts

@@ -1,10 +0,0 @@
-import React, { ReactNode } from 'react';
-export type TFormFieldProps = {
-    children: ReactNode;
-    error?: string;
-    helper?: ReactNode | string;
-    hideLabel?: boolean;
-    id: string;
-    label?: string;
-};
-export declare const FormField: ({ children, error, helper, hideLabel, id, label }: TFormFieldProps) => React.JSX.Element;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import * as z from 'zod';
-export declare const exampleSchema: z.ZodObject<{
-    datePicker: z.ZodDate;
-    disclosureTextField: z.ZodString;
-    numberField: z.ZodNumber;
-    processor: z.ZodString;
-    radioGroup: z.ZodString;
-    range: z.ZodNumber;
-    select: z.ZodString;
-    textField: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    select: string;
-    radioGroup: string;
-    range: number;
-    disclosureTextField: string;
-    numberField: number;
-    textField: string;
-    datePicker: Date;
-    processor: string;
-}, {
-    select: string;
-    radioGroup: string;
-    range: number;
-    disclosureTextField: string;
-    numberField: number;
-    textField: string;
-    datePicker: Date;
-    processor: string;
-}>;
-export type TFormExample = {
-    disabled?: boolean;
-    values: {
-        currencyField?: string;
-        datePicker?: string;
-        disclosureTextField?: string;
-        numberField?: number;
-        processor?: string;
-        radioGroup?: string;
-        range?: number;
-        select?: string;
-        textField?: string;
-    };
-};
-export declare const FormExample: ({ disabled, values }: TFormExample) => React.JSX.Element;