@inntechcorp/it-design 2.2.90 → 3.1.1

package/dist/stories/Accordion.d.ts

@@ -1,4 +1,3 @@
-import './button.css';
 import { FC } from 'react';
 /**
  * Primary UI component for user interaction

package/dist/stories/Alert.stories.d.ts

@@ -6,13 +6,27 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
     args: {
         onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const Neutral: Story;
 export declare const Info: Story;
 export declare const InfoWithoutTitle: Story;
 export declare const Warning: Story;

package/dist/stories/AlertComposition.d.ts

@@ -0,0 +1,2 @@
+export declare const AlertCompositionExample: () => import("react/jsx-runtime").JSX.Element;
+export default AlertCompositionExample;

package/dist/stories/AlertComposition.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CompositionExamples: Story;

package/dist/stories/Button.d.ts

@@ -1,3 +1,2 @@
-import './button.css';
 import { FC } from 'react';
 export declare const Button: FC<any>;

package/dist/stories/Button.stories.d.ts

@@ -6,7 +6,14 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
     args: {
         onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };

package/dist/stories/Card.stories.d.ts

@@ -12,6 +12,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const DefaultOnlyTitle: Story;
 export declare const WithButtons: Story;
 export declare const WithTabsAndButtons: Story;
 export declare const WithTabs: Story;

package/dist/stories/ColorScale.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+type ColorDef = {
+    name: string;
+    hex: string;
+};
+export type ColorScaleStoryProps = {
+    colors?: ColorDef[];
+};
+export declare const ColorScaleView: FC<ColorScaleStoryProps>;
+export default ColorScaleView;

package/dist/stories/ColorScale.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./ColorScale").ColorScaleStoryProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        colors: {
+            name: string;
+            hex: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const All: Story;

package/dist/stories/ColorScaleCompare.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ColorScaleCompareProps = {
+    baseHex: string;
+    expected?: Partial<Record<Shade, string>>;
+};
+export declare const ColorScaleCompare: FC<ColorScaleCompareProps>;
+export default ColorScaleCompare;

package/dist/stories/ColorScaleCompare.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./ColorScaleCompare").ColorScaleCompareProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        baseHex: string;
+        expected: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Gray: Story;
+export declare const Slate: Story;
+export declare const Red: Story;
+export declare const Orange: Story;
+export declare const Amber: Story;
+export declare const Lime: Story;
+export declare const Green: Story;
+export declare const Emerald: Story;
+export declare const Teal: Story;
+export declare const Cyan: Story;
+export declare const Sky: Story;
+export declare const Blue: Story;
+export declare const Indigo: Story;
+export declare const Violet: Story;
+export declare const Purple: Story;
+export declare const Fuchsia: Story;
+export declare const Pink: Story;
+export declare const Rose: Story;
+export declare const Yellow: Story;

package/dist/stories/DatePicker.d.ts

@@ -1,3 +1,2 @@
-import './button.css';
 import { FC } from 'react';
 export declare const DatePicker: FC<any>;

package/dist/stories/Form.stories.d.ts

@@ -6,11 +6,20 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        variant: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+    };
     args: {
         name: string;
         initialValues: {};
         useQueryString: boolean;
+        disabled: boolean;
+        variant: string;
     };
 };
 export default meta;

package/dist/stories/Header.d.ts

@@ -1,3 +1,2 @@
 import { FC } from 'react';
-import './header.css';
 export declare const Header: FC<any>;

package/dist/stories/Input.d.ts

@@ -1,3 +1,2 @@
-import './button.css';
 import { FC } from 'react';
 export declare const Input: FC<any>;

package/dist/stories/Input.stories.d.ts

@@ -13,6 +13,12 @@ declare const meta: {
             };
             options: string[];
         };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
         prefix: {
             control: {
                 type: "text";
@@ -88,7 +94,9 @@ declare const meta: {
             control: false;
         };
     };
-    args: {};
+    args: {
+        size: string;
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/stories/ModalManager.d.ts

@@ -1,3 +1,2 @@
 import { FC } from 'react';
-import './button.css';
 export declare const ModalManager: FC<any>;

package/dist/stories/Page.d.ts

@@ -1,3 +1,2 @@
 import { FC } from 'react';
-import './page.css';
 export declare const Page: FC;

package/dist/stories/Select.d.ts

@@ -1,3 +1,2 @@
-import './button.css';
 import { FC } from 'react';
 export declare const Select: FC<any>;

package/dist/stories/Select.stories.d.ts

@@ -6,7 +6,19 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        prefix: {
+            control: {
+                type: "text";
+            };
+        };
+    };
     args: {
         onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
@@ -14,9 +26,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Solid: Story;
 export declare const Filled: Story;
-export declare const Outline: Story;
 export declare const Custom: Story;
 export declare const Multiple: Story;
 export declare const ShowSearch: Story;

package/dist/stories/Switch.stories.d.ts

@@ -6,7 +6,14 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        variant: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+    };
     args: {
         onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
         onUpdate: import("@vitest/spy").Mock<(...args: any[]) => any>;

package/dist/stories/TextArea.d.ts

@@ -1,3 +1,2 @@
-import './button.css';
 import { FC } from 'react';
 export declare const TextArea: FC<any>;

package/dist/stories/TextArea.stories.d.ts

@@ -6,7 +6,14 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
     args: {
         onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };

package/dist/stories/root/index.d.ts

@@ -1,5 +1,4 @@
 import { ChildrenProps } from "types/ChildrenProps";
-import "./index.scss";
 declare const StoryRoot: ({ children }: {
     children: ChildrenProps;
 }) => ChildrenProps;

package/dist/switch/styled.d.ts

@@ -1,5 +1,5 @@
+import { ErrorTooltip } from '../utils/CommonStyledComponents';
 declare const Thumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const ErrorTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export { Wrapper, ErrorTooltip, Body, Thumb };

package/dist/textarea/styled.d.ts

@@ -1,9 +1,6 @@
 declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Middle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const ErrorTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-declare const ErrorBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Success: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 declare const Failed: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
-export { Wrapper, Middle, Content, ErrorTooltip, ErrorBorder, Success, Warning, Failed };
+declare const ErrorWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { Wrapper, ErrorWrapper, Success, Warning, Failed };

package/dist/types/AlertProps.d.ts

@@ -1,13 +1,14 @@
 import React from "react";
 import { ChildrenProps } from "./ChildrenProps";
-import { ComponentSizes } from "enums/enum";
+import { ITDSize } from "./ITDProps";
+import { ITDVariant } from "./ITDProps";
 export type AlertProps = {
     type?: AlertType;
-    size?: AlertSize;
+    size?: ITDSize;
     icon?: string | React.ReactNode;
     title?: string;
+    variant?: ITDVariant;
     className?: string;
     children?: ChildrenProps;
 };
-export type AlertType = "success" | "info" | "warning" | "error";
-export type AlertSize = ComponentSizes.X_SMALL | ComponentSizes.SMALL | ComponentSizes.MEDIUM | ComponentSizes.DEFAULT | ComponentSizes.LARGE | ComponentSizes.X_LARGE;
+export type AlertType = "neutral" | "success" | "info" | "warning" | "error";

package/dist/types/ButtonProps.d.ts

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from "react";
 import { ChildrenProps } from "./ChildrenProps";
 import { IStyledComponent } from "styled-components";
 import { Substitute } from "styled-components/dist/types";
-import { ITDSize, ITDPosition } from "./ITDProps";
+import { ITDSize, ITDHorizontalPosition } from "./ITDProps";
 export type ButtonProps = {
     id?: string;
     disabled?: boolean;
@@ -11,7 +11,7 @@ export type ButtonProps = {
     strecth?: boolean;
     circle?: boolean;
     justify?: string;
-    contentPosition?: ITDPosition;
+    contentPosition?: ITDHorizontalPosition;
     type?: ButtonType;
     variant?: ButtonVariant;
     state?: ButtonState;

package/dist/types/CalendarProps.d.ts

@@ -11,7 +11,6 @@ export type CalendarProps = {
     size?: ITDSize;
     variant?: InputVariant;
     disabled?: boolean;
-    floating?: boolean;
     suffix?: ChildrenProps;
     onChange?: ((value: CalendarValueProps) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;

package/dist/types/CardProps.d.ts

@@ -1,6 +1,9 @@
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export type CardProps = {
     title?: ChildrenProps;
+    variant?: ITDVariant;
+    description?: ChildrenProps;
     titleSeparator?: boolean;
     extra?: ChildrenProps;
     tabs?: {
@@ -14,4 +17,5 @@ export type CardProps = {
     minHeight?: number;
     contentPadding?: string;
     children: ChildrenProps;
+    className?: string;
 };

package/dist/types/CheckboxProps.d.ts

@@ -1,12 +1,15 @@
 import { ReactElement, RefObject } from "react";
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export type CheckboxProps = {
     id?: string;
     value?: string | number | boolean;
     checked?: boolean;
     disabled?: boolean;
-    variant?: CheckboxVariant;
+    readOnly?: boolean;
+    variant?: ITDVariant;
     indeterminate?: boolean;
+    animated?: boolean;
     className?: string;
     children?: ChildrenProps;
     onChange?: ((event: CheckboxEvent) => void);
@@ -18,6 +21,7 @@ export type CheckboxGroupProps = {
     defaultValue?: (string | number | boolean)[];
     options?: GroupCheckboxOptionType[];
     disabled?: boolean;
+    variant?: ITDVariant;
     className?: string;
     children?: ChildrenProps | ReactElement<CheckboxProps> | Array<ReactElement<CheckboxProps>>;
     selectAll?: (value: boolean) => void;

package/dist/types/DatePickerProps.d.ts

@@ -2,7 +2,7 @@ import type dayjs from "dayjs";
 import { CalendarValueProps } from "./CalendarProps";
 import { ChildrenProps } from "./ChildrenProps";
 import { InputVariant } from "./InputProps";
-import { ITDPosition, ITDSize } from "./ITDProps";
+import { ITDHorizontalPosition, ITDSize } from "./ITDProps";
 export type DatePickerProps = {
     id?: string;
     placeholder?: string;
@@ -13,8 +13,7 @@ export type DatePickerProps = {
     size?: ITDSize;
     variant?: InputVariant;
     disabled?: boolean;
-    floating?: boolean;
-    position?: ITDPosition;
+    position?: ITDHorizontalPosition;
     suffix?: ChildrenProps;
     onChange?: ((value: CalendarValueProps) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;

package/dist/types/FormProps.d.ts

@@ -5,6 +5,7 @@ import { ITDImperativeFuncProps } from "../index";
 import { FormStoreProps } from "../form/context/FormStore";
 import { FormContextType } from "../form/context/FormContext";
 import { Item, Group, Control } from "../form";
+import { ITDVariant } from "./ITDProps";
 export type FormProps = {
     initialValues?: {};
     children: ChildrenProps;
@@ -15,6 +16,8 @@ export type FormProps = {
     onValidated?: (validate: boolean) => void;
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
     className?: string;
     ref?: RefObject<FormContextType>;
     name: string;

package/dist/types/ITDProps.d.ts

@@ -1,4 +1,6 @@
-import { ComponentPositions, ComponentSizes, ComponentSizesSlug } from "enums/enum";
+import { ComponentXPositions, ComponentSizes, ComponentSizesSlug, ComponentYPositions, ComponentVariants } from "enums/enum";
 export type ITDSize = ComponentSizes | "x-small" | "small" | "medium" | "default" | "large" | "x-large";
 export type ITDSizeSlug = ComponentSizesSlug | "xs" | "sm" | "md" | "df" | "lg" | "xlg";
-export type ITDPosition = ComponentPositions | "left" | "right";
+export type ITDVariant = ComponentVariants | "default" | "filled" | "custom";
+export type ITDHorizontalPosition = ComponentXPositions | "left" | "right";
+export type ITDVerticalPosition = ComponentYPositions | "top" | "bottom";

package/dist/types/InputProps.d.ts

@@ -28,7 +28,6 @@ export type InputProps = {
     maxValue?: number;
     maxLength?: number;
     disabled?: boolean;
-    floating?: boolean;
     autoComplete?: boolean;
     keepFocus?: boolean;
     mask?: null | string;

package/dist/types/RadioProps.d.ts

@@ -27,6 +27,7 @@ export type RadioButtonProps = {
     type?: RadioType;
     checked?: boolean;
     hasError?: boolean;
+    className?: string;
     children?: React.ReactNode;
     buttonProps?: ButtonProps;
     icon?: string | null;

package/dist/types/ResultProps.d.ts

@@ -3,6 +3,7 @@ export type ResultProps = {
     image: string | ChildrenProps;
     title: string;
     description: string;
+    className?: string;
     type?: string;
     extra?: ChildrenProps | null;
     footer?: ChildrenProps | null;

package/dist/types/SelectProps.d.ts

@@ -1,26 +1,25 @@
 import { CSSProperties } from "react";
 import { ITDSize } from "../index";
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDHorizontalPosition, ITDVariant, ITDVerticalPosition } from "./ITDProps";
 export type SelectProps = {
     id?: string;
     defaultValue?: SelectValue;
     value?: SelectValue;
     label?: string | number;
-    position?: SelectPosition;
-    direction?: SelectDirection;
+    position?: ITDVerticalPosition;
+    direction?: ITDHorizontalPosition;
     multi?: boolean;
     size?: ITDSize;
-    variant?: SelectVariant;
+    variant?: ITDVariant;
     className?: string;
     placeholder?: string;
     prefix?: ChildrenProps;
-    suffix?: ChildrenProps;
     icon?: string;
     image?: string;
     disabled?: boolean;
     showSearch?: boolean;
     locked?: boolean;
-    floating?: boolean;
     style?: CSSProperties;
     options?: SelectOptionProps[];
     onChange?: ((value: SelectValue) => void) | null;
@@ -29,23 +28,19 @@ export type SelectProps = {
 export type SelectToggleProps = {
     id?: string;
     label?: string | number | ChildrenProps;
-    value?: SelectValue | null;
     errorMessage: string;
     multi: boolean;
     isOpen: boolean;
     showSearch: boolean;
     locked: boolean;
     disabled: boolean;
-    labelType: string;
     placeholder: string;
     icon?: string;
     prefix?: ChildrenProps;
-    suffix?: ChildrenProps;
     image?: string;
     size: ITDSize;
     onFocus: () => void;
-    onBlur: () => void;
-    onShow: (value: boolean) => void;
+    onShow: (value: boolean, trigger?: 'pointer' | 'keyboard') => void;
     onFilter: (value: string) => void;
     onChange: (open: boolean) => void;
 };
@@ -59,6 +54,3 @@ export type SelectOptionProps = {
     searchText?: string;
 };
 export type SelectValue = string | number | (string | number)[];
-export type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
-export type SelectPosition = "top" | "bottom";
-export type SelectDirection = "right" | "left";

package/dist/types/SwitchProps.d.ts

@@ -1,10 +1,13 @@
+import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export type SwitchProps = {
     id?: string;
-    label?: string;
+    children?: ChildrenProps;
     checked?: boolean;
     defaultChecked?: boolean;
     loading?: boolean;
     disabled?: boolean;
+    variant?: ITDVariant;
     onChange?: ((value: any) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
 };

package/dist/types/TableProps.d.ts

@@ -14,6 +14,7 @@ export type TableProps<T extends TableRow> = {
     columns: TableColumnType<T>[];
     data: T[] | null;
     cellHeight?: number | string;
+    className?: string;
     size?: ITDSize;
     headless?: boolean;
     bordered?: boolean;