@kroo-web/design-system 1.1.106 → 1.1.107

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

@@ -1,14 +1,14 @@
 import React, { ReactNode } from 'react';
 import { TTypographyProps } from '../Typography';
 export type TTagProps = {
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'danger' | 'warning' | 'night';
+    children: ReactNode | ReactNode[];
     circularIcon?: boolean;
     className?: string;
     icon: boolean;
-    children: ReactNode | ReactNode[];
+    variant?: 'danger' | 'night' | 'positive' | 'primary' | 'secondary' | 'tertiary' | 'warning';
 };
 export declare const Tag: {
-    Root: ({ variant, children, className, icon, circularIcon, ...rest }: TTagProps) => React.JSX.Element;
-    Icon: ({ size, weight, ...rest }: import("../Icon").TIconProps) => React.JSX.Element;
     Content: ({ children, ...rest }: TTypographyProps) => React.JSX.Element;
+    Icon: ({ size, weight, ...rest }: import("../Icon").TIconProps) => React.JSX.Element;
+    Root: ({ children, circularIcon, className, icon, variant, ...rest }: TTagProps) => React.JSX.Element;
 };

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

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

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

@@ -4,16 +4,16 @@ export type TToastRootProps = {
     children: React.ReactNode;
 };
 export type TToastTitleProps = {
-    className?: string;
     children: React.ReactNode;
+    className?: string;
 };
 export type TToastDescriptionProps = {
     children: React.ReactNode;
 };
 export type TToastIconProps = TIconProps;
 export declare const Toast: {
-    Root: ({ children }: TToastRootProps) => React.JSX.Element;
-    Title: ({ className, children }: TToastTitleProps) => React.JSX.Element;
     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/Tooltip/index.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
 export type TTooltipRootProps = React.ComponentProps<typeof RadixTooltip.Root>;
-export type TTooltipTriggerProps = React.ComponentProps<typeof RadixTooltip.Trigger> & {
+export type TTooltipTriggerProps = {
     className?: string;
-};
-export type TTooltipContentProps = React.ComponentProps<typeof RadixTooltip.Content> & {
+} & React.ComponentProps<typeof RadixTooltip.Trigger>;
+export type TTooltipContentProps = {
     className?: string;
-};
+} & React.ComponentProps<typeof RadixTooltip.Content>;
 export declare const Tooltip: {
+    Content: ({ children, className, ...rest }: TTooltipContentProps) => React.JSX.Element;
     Root: ({ children, ...rest }: TTooltipRootProps) => React.JSX.Element;
-    Trigger: ({ className, children, ...rest }: TTooltipTriggerProps) => React.JSX.Element;
-    Content: ({ className, children, ...rest }: TTooltipContentProps) => React.JSX.Element;
+    Trigger: ({ children, className, ...rest }: TTooltipTriggerProps) => React.JSX.Element;
 };

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

@@ -1,14 +1,13 @@
-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';
+import React from 'react';
+export type TLegacyMarketingText = 'marketing-large-light' | 'marketing-large-regular' | 'marketing-large-semi-bold' | 'marketing-medium-light' | 'marketing-medium-regular' | 'marketing-medium-semi-bold' | 'marketing-quote-light' | 'marketing-quote-regular' | 'marketing-quote-semi-bold' | 'marketing-small-light' | 'marketing-small-regular' | 'marketing-small-semi-bold' | 'marketing-tag-light' | 'marketing-tag-regular' | 'marketing-tag-semi-bold' | 'marketing-text-light' | 'marketing-text-regular' | 'marketing-text-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';
-export type TTypography = 'form-label' | 'form-helper' | 'form-button' | 'form-input-normal' | 'form-input-semi-bold' | 'content-regular-light' | 'content-regular' | 'content-regular-semi-bold' | 'content-large-light' | 'content-large' | 'content-large-semi-bold' | 'content-title-light' | 'content-title' | 'content-title-semi-bold' | 'tag';
-export type TTypographyVariants = TTypography | TLegacyMarketingText | TLegacyMarketingHeading | TLegacyMarketingFooter;
+export type TTypography = 'content-large' | 'content-large-light' | 'content-large-semi-bold' | 'content-regular' | 'content-regular-light' | 'content-regular-semi-bold' | 'content-title' | 'content-title-light' | 'content-title-semi-bold' | 'form-button' | 'form-helper' | 'form-input-normal' | 'form-input-semi-bold' | 'form-label' | 'tag';
+export type TTypographyVariants = TLegacyMarketingFooter | TLegacyMarketingHeading | TLegacyMarketingText | TTypography;
 export type TTypographyProps<C extends React.ElementType = 'p'> = {
     as?: C;
-    variant?: TTypographyVariants;
     children?: React.ReactNode;
     className?: string;
+    variant?: TTypographyVariants;
 } & React.ComponentPropsWithoutRef<C>;
-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>>>;
+export declare const Typography: <C extends React.ElementType = "p">({ as, children, className, variant, ...rest }: TTypographyProps<C>) => React.JSX.Element;

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

@@ -1,12 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-export interface WrapperProps extends PropsWithChildren {
-    as?: 'li' | 'div';
-    variants?: WrapperVariants;
-    className?: string;
-}
 export type WrapperVariants = {
-    visual?: 'paper' | 'bento' | 'bento-icon';
     orientation?: 'center';
     type?: 'trustPilot';
+    visual?: 'bento' | 'bento-icon' | 'paper';
 };
-export declare const Wrapper: ({ as, className, variants, children }: WrapperProps) => React.JSX.Element;
+export interface WrapperProps extends PropsWithChildren {
+    as?: 'div' | 'li';
+    className?: string;
+    variants?: WrapperVariants;
+}
+export declare const Wrapper: ({ as, children, className, variants }: WrapperProps) => React.JSX.Element;

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

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

package/dist/cjs/src/hooks/useWindowSize.d.ts

@@ -1,4 +1,4 @@
 export declare function useWindowSize(): {
-    width: number;
     height?: number;
+    width: number;
 };

package/dist/cjs/src/types/PolymorphicWithoutRef.d.ts

@@ -1,6 +1,6 @@
 type Merge<T, U> = Omit<T, keyof U> & U;
-type PropsWithAs<P, T extends React.ElementType> = P & {
+type PropsWithAs<P, T extends React.ElementType> = {
     as?: T;
-};
+} & P;
 export type PolymorphicPropsWithoutRef<P, T extends React.ElementType> = Merge<T extends keyof JSX.IntrinsicElements ? React.PropsWithoutRef<JSX.IntrinsicElements[T]> : React.ComponentPropsWithoutRef<T>, PropsWithAs<P, T>>;
 export {};

package/dist/cjs/src/utils/decorators/Grid/index.d.ts

@@ -2,4 +2,4 @@ import React, { PropsWithChildren } from 'react';
 export type TGridDecoratorProps = PropsWithChildren<{
     columns?: number;
 }>;
-export declare const GridDecorator: ({ columns, children }: TGridDecoratorProps) => React.JSX.Element;
+export declare const GridDecorator: ({ children, columns }: TGridDecoratorProps) => React.JSX.Element;

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

@@ -1,78 +1,45 @@
 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;
-    radioGroup: z.ZodString;
-    numberField: z.ZodNumber;
     datePicker: z.ZodDate;
     disclosureTextField: z.ZodString;
-    range: z.ZodNumber;
+    numberField: z.ZodNumber;
     processor: z.ZodString;
-    phoneField: z.ZodString;
-    terms: z.ZodBoolean;
-    pin: z.ZodString;
+    radioGroup: z.ZodString;
+    range: z.ZodNumber;
+    select: z.ZodString;
+    textField: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     select: string;
     radioGroup: string;
-    pin: string;
     range: number;
-    textField: string;
-    numberField: number;
     disclosureTextField: string;
+    numberField: number;
+    textField: string;
     datePicker: Date;
     processor: string;
-    phoneField: string;
-    terms: boolean;
 }, {
     select: string;
     radioGroup: string;
-    pin: string;
     range: number;
-    textField: string;
-    numberField: number;
     disclosureTextField: string;
+    numberField: number;
+    textField: string;
     datePicker: Date;
     processor: string;
-    phoneField: string;
-    terms: boolean;
 }>;
 export type TFormExample = {
+    disabled?: boolean;
     values: {
-        textField?: string;
         currencyField?: string;
-        select?: string;
-        radioGroup?: string;
-        numberField?: number;
         datePicker?: string;
         disclosureTextField?: string;
-        range?: number;
+        numberField?: number;
         processor?: string;
-        phoneField?: string;
-        terms?: boolean;
-        pin?: string;
+        radioGroup?: string;
+        range?: number;
+        select?: string;
+        textField?: 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, error, disabled }: TFormExample) => React.JSX.Element;
+export declare const FormExample: ({ disabled, values }: TFormExample) => React.JSX.Element;