@kroo-web/design-system 1.0.39 → 1.0.41

package/dist/cjs/product/components/Button/button.stories.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { Button } from '.';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").IButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
 export default _default;
 type Story = StoryObj<typeof Button>;
+export declare const GeneralUsage: Story;
+export declare const PolymorphicButton: Story;
+export declare const OnlyIcon: Story;
 export declare const DefaultVariants: Story;
 export declare const ActionVariants: Story;
+export declare const TextVariants: Story;
 export declare const DefaultOnlyIcons: Story;
 export declare const ActionOnlyIcons: Story;
 export declare const IconsAndText: Story;

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

@@ -6,15 +6,36 @@ export type TButtonDefaultProps = {
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
 };
 export type TActionButtonProps = {
+    /**
+    * The size changing variant of the button.
+    */
     visualType?: "action";
+    /**
+     * The colour changing variant of the button.
+     */
     variant?: "standard" | "secondary" | "tertiary" | "ghost" | "danger";
 };
-type ConditionalProps = TButtonDefaultProps | TActionButtonProps;
+export type TTextButtonProps = {
+    visualType?: "text";
+    variant?: "primary" | "secondary";
+};
+type ConditionalProps = TButtonDefaultProps | TActionButtonProps | TTextButtonProps;
 export interface IButtonOwnProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    /**
+     * Polymorphic prop to define the element type of the button, currently
+     * we only support 2 types: button and span.
+     */
     as?: "button" | "span";
+    /**
+     * Appends the className to the button element.
+     */
     className?: string;
+    /**
+     * To be used when the contents of the button is only an icon this props
+     * will correct the padding as the padding is different to a button that includes text.
+     */
     onlyIcon?: boolean;
 }
-export type IButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
-export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: IButtonProps<T>): React.JSX.Element;
+export type TButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
+export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: TButtonProps<T>): React.JSX.Element;
 export {};

package/dist/cjs/product/components/Callout/Callout.stories.d.ts

@@ -6,5 +6,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 }>;
 export default _default;
 type Story = StoryObj<typeof Callout.Root>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Types: Story;

package/dist/cjs/product/components/Columns/Columns.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Columns } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TColumnsProps>;
+export default _default;
+type Story = StoryObj<typeof Columns>;
+export declare const GeneralUsage: Story;

package/dist/cjs/product/components/DatePicker/DatePicker.stories.d.ts

@@ -3,6 +3,6 @@ import { DatePicker } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TDatePicker<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof DatePicker>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Helper: Story;
 export declare const Error: Story;

package/dist/cjs/product/components/Disclosure/Disclosure.stories.d.ts

@@ -3,4 +3,4 @@ import { Disclosure } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TDisclosureProps>;
 export default _default;
 type Story = StoryObj<typeof Disclosure>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;

package/dist/cjs/product/components/Form/Form.stories.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { Form } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, React.HTMLProps<HTMLFormElement> & {
+    children?: React.ReactNode;
+} & {
+    methods: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues>;
+    onSubmit: (values: import("react-hook-form").FieldValues) => void;
+}>;
+export default _default;
+type Story = StoryObj<typeof Form>;
+export declare const GeneralUsage: Story;

package/dist/cjs/product/components/Loading/Loading.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Loading } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TLoadingProps>;
+export default _default;
+type Story = StoryObj<typeof Loading>;
+export declare const GeneralUsage: Story;
+export declare const Sizes: Story;

package/dist/cjs/product/components/Loading/Loading.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare const sizes: {
+    small: string;
+    medium: string;
+    large: string;
+    full: string;
+};
+export type TLoadingProps = {
+    size?: keyof typeof sizes;
+};
+export declare const Loading: ({ size }: TLoadingProps) => React.JSX.Element;
+export {};

package/dist/cjs/product/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Modal } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TModalControlProps>;
+export default _default;
+type Story = StoryObj<typeof Modal.Control>;
+export declare const GeneralUsage: Story;
+export declare const MultipleModals: Story;

package/dist/cjs/product/components/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { TButtonProps } from "../Button";
+export type TUseModalProps = {
+    activeModal: string;
+    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;
+};
+export type TModalControlProps = {
+    children: React.ReactNode;
+    value: string;
+} & TButtonProps;
+export type TModalHeaderProps = {
+    title: string;
+};
+export declare const Modal: {
+    Content: ({ value, children }: TModalContentProps) => React.ReactPortal;
+    Control: ({ value, children, ...rest }: TModalControlProps) => React.JSX.Element;
+    Header: ({ title }: TModalHeaderProps) => React.JSX.Element;
+};

package/dist/cjs/product/components/NumberField/numberField.stories.d.ts

@@ -4,7 +4,7 @@ import { NumberField } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TNumberFieldProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof NumberField>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: {
     render: () => React.JSX.Element;
 };

package/dist/cjs/product/components/ProgressIndicator/ProgressIndicator.stories.d.ts

@@ -3,5 +3,5 @@ import { ProgressIndicator } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TProgressIndicatorProps>;
 export default _default;
 type Story = StoryObj<typeof ProgressIndicator>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Size: Story;

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

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

package/dist/cjs/product/components/RadioGroup/radioGroup.stories.d.ts

@@ -7,5 +7,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 } & Omit<import("@radix-ui/react-radio-group").RadioGroupProps, "name">>;
 export default _default;
 type Story = StoryObj<typeof RadioGroup.Root>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: Story;

package/dist/cjs/product/components/Range/range.stories.d.ts

@@ -3,6 +3,6 @@ import { Range } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TRangeProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof Range>;
-export declare const Default: Story;
-export declare const Error: Story;
+export declare const GeneralUsage: Story;
+export declare const Labels: Story;
 export declare const Helper: Story;

package/dist/cjs/product/components/Select/select.stories.d.ts

@@ -3,5 +3,5 @@ import { Select } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TSelectProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const Error: Story;
+export declare const GeneralUsage: Story;
+export declare const Labeling: Story;

package/dist/cjs/product/components/TextField/textField.stories.d.ts

@@ -3,7 +3,7 @@ import { TextField } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TTextFieldProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof TextField>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: Story;
 export declare const HelperText: Story;
 export declare const RightContent: Story;

package/dist/cjs/product/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Toast } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TToastRootProps>;
+export default _default;
+type Story = StoryObj<typeof Toast>;
+export declare const GeneralUsage: Story;
+export declare const Variants: Story;

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

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

package/dist/cjs/product/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Tooltip } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@radix-ui/react-tooltip").TooltipProps>;
+export default _default;
+type Story = StoryObj<typeof Tooltip>;
+export declare const GeneralUsage: Story;
+export declare const OpenByDefault: Story;

package/dist/cjs/product/components/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/product/components/Tooltip/index.d.ts

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

package/dist/cjs/product/components/Typography/typography.stories.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 } & Omit<any, "ref">>;
 export default _default;
 type Story = StoryObj<typeof Typography>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Variants: Story;
 export declare const Polymorphic: Story;
 export declare const DangerousHTML: Story;

package/dist/cjs/product/components/index.d.ts

@@ -1,12 +1,17 @@
 export * from "./Button";
+export * from './Callout';
 export * from "./Columns";
 export * from "./DatePicker";
 export * from "./Disclosure";
 export * from "./Form";
+export * from "./Loading";
+export * from "./Modal";
 export * from "./NumberField";
+export * from "./ProgressIndicator";
 export * from "./RadioGroup";
 export * from "./Range";
 export * from "./Select";
 export * from './TextField';
+export * from "./Toast";
+export * from './Tooltip';
 export * from './Typography';
-export * from './Callout';

package/dist/esm/icons/Icon.stories.d.ts

@@ -1,8 +1,8 @@
 import { StoryObj } from "@storybook/react";
 import { Icon } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, {
-    size?: "large" | "regular" | "xlarge" | undefined;
-    weight?: "medium" | "normal" | "light" | undefined;
+    size?: "regular" | "large" | "xlarge" | undefined;
+    weight?: "light" | "normal" | "medium" | undefined;
 } & Omit<import("react-material-symbols").MaterialSymbolProps, "size" | "weight">>;
 export default _default;
 type Story = StoryObj<typeof Icon>;