@itcase/ui-web 1.9.104 → 1.9.106

package/dist/types/components/InputNumber/{InputNumber.interfaces.d.ts → InputNumber.interface.d.ts}

@@ -4,6 +4,7 @@ import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { ButtonProps } from 'src/components/Button/Button.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type InputNumberAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorHover?: BorderColorHoverProps;
@@ -52,4 +53,6 @@ type OnChangeValueParams = {
     mode?: 'button' | 'input';
     operation?: 'minus' | 'plus';
 };
-export type { InputNumberAppearance, InputNumberConfig, InputNumberProps, OnChangeValueParams, };
+type InputNumberAppearanceKey = NonNullable<InputNumberProps['appearance']>;
+type InputNumberGalleryStory = ComponentGalleryArgs & Pick<InputNumberProps, 'type' | 'value'>;
+export type { InputNumberAppearance, InputNumberAppearanceKey, InputNumberConfig, InputNumberGalleryStory, InputNumberProps, OnChangeValueParams, };

package/dist/types/components/InputNumber/InputNumber.js

@@ -33,7 +33,7 @@ const InputNumber = (props) => {
     if (type === 'native') {
         return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: value, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }));
     }
-    return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-tour": dataTour, "date-testid": dataTestId, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'minus' }) }), _jsx("input", { className: clsx(inputNumberTextColorClass &&
+    return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId + 'Wrapper', "data-tour": dataTour, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'minus' }) }), _jsx("input", { className: clsx(inputNumberTextColorClass &&
                     `text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
                     `text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: value, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }), _jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'plus' }) })] }));
 };

package/dist/types/components/InputNumber/__test__/InputNumberTest.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+import type { InputNumberProps } from '../InputNumber.interface';
+declare const meta: {
+    title: string;
+    component: (props: InputNumberProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        appearance: "defaultPrimary sizeXL solid rounded";
+        dataTestId: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InputValues: Story;

package/dist/types/components/InputNumber/__test__/InputNumberTest.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react';
+import * as storybookTest from 'storybook/test';
+import { InputNumber } from '..';
+const meta = {
+    title: 'Atoms / InputNumber / __test__',
+    component: InputNumber,
+    args: {
+        appearance: 'defaultPrimary sizeXL solid rounded',
+        dataTestId: 'inputNumberTestId',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const InputValues = {
+    play: async ({ args, canvas, step }) => {
+        const input = canvas.getByTestId(args.dataTestId);
+        const inputNumber = canvas.getByTestId(args.dataTestId + 'Wrapper');
+        const buttons = inputNumber.querySelectorAll('.input-number__icon');
+        await step('Input renderer', async () => {
+            await storybookTest.expect(inputNumber).toBeInTheDocument();
+        });
+        await step('Increase value with button', async () => {
+            await storybookTest.userEvent.click(buttons[1]);
+            await storybookTest.expect(input).toHaveValue(1);
+        });
+        await step('Decrease value with button', async () => {
+            await storybookTest.userEvent.click(buttons[0]);
+            await storybookTest.expect(input).toHaveValue(0);
+        });
+        await step('Change value with input', async () => {
+            const randomValue = String(Math.floor(Math.random() * 100));
+            await storybookTest.userEvent.type(input, randomValue);
+            await storybookTest.expect(input).toHaveValue(Number(randomValue));
+        });
+    },
+    render: (args) => {
+        const [value, setValue] = useState(0);
+        return _jsx(InputNumber, { ...args, value: value, onChange: setValue });
+    },
+};

package/dist/types/components/InputNumber/appearance/InputNumberShape.d.ts

@@ -6,16 +6,16 @@ declare const inputNumberAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { inputNumberAppearanceShape };

package/dist/types/components/InputNumber/appearance/InputNumberShape.js

@@ -6,16 +6,16 @@ const inputNumberAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { inputNumberAppearanceShape };

package/dist/types/components/InputNumber/index.d.ts

@@ -1,3 +1,3 @@
 export { InputNumber } from './InputNumber';
 export { inputNumberAppearance } from './InputNumber.appearance';
-export type { InputNumberAppearance, InputNumberConfig, InputNumberProps, } from './InputNumber.interfaces';
+export type { InputNumberAppearance, InputNumberConfig, InputNumberProps, } from './InputNumber.interface';

package/dist/types/components/InputNumber/stories/InputNumberAppearance.stories.d.ts

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react-vite';
-import { InputNumberProps } from '../InputNumber.interfaces';
+import { InputNumberProps } from '../InputNumber.interface';
 declare const meta: {
     title: string;
     component: (props: InputNumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/InputNumber/stories/InputNumberDefault.stories.d.ts

@@ -1,25 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { InputNumberProps } from '../InputNumber.interfaces';
-declare const meta: {
-    title: string;
-    component: (props: InputNumberProps) => import("react/jsx-runtime").JSX.Element;
-    args: {
-        appearance: "defaultPrimary sizeM solid rounded";
-        type: "custom";
-    };
-    parameters: {
-        maxWidth: string;
-        layout: string;
-    };
-    argTypes: {
-        type: {
-            control: {
-                type: "radio";
-            };
-            options: string[];
-        };
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { InputNumberGalleryStory } from '../InputNumber.interface';
+declare const meta: Meta<InputNumberGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<InputNumberGalleryStory>;
 export declare const Demo: Story;

package/dist/types/components/InputNumber/stories/InputNumberDefault.stories.js

@@ -1,29 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useState } from 'react';
-import { InputNumber } from '..';
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { inputNumberAppearanceDefault } from '../appearance/inputNumberDefault';
+import { inputNumberAppearanceError } from '../appearance/inputNumberError';
+import { inputNumberAppearanceRequire } from '../appearance/inputNumberRequire';
+import { inputNumberAppearanceShape } from '../appearance/InputNumberShape';
+import { inputNumberAppearanceSize } from '../appearance/inputNumberSize';
+import { inputNumberAppearanceStyle } from '../appearance/inputNumberStyle';
+import { inputNumberAppearanceSuccess } from '../appearance/inputNumberSuccess';
+import { InputNumber } from '../InputNumber';
+const gallery = createComponentGallery({
+    size: inputNumberAppearanceSize,
+    appearanceGroups: {
+        default: inputNumberAppearanceDefault,
+        error: inputNumberAppearanceError,
+        require: inputNumberAppearanceRequire,
+        success: inputNumberAppearanceSuccess,
+    },
+    shape: inputNumberAppearanceShape,
+    style: inputNumberAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / InputNumber',
     component: InputNumber,
     args: {
-        appearance: 'defaultPrimary sizeM solid rounded',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
+        value: 1,
         type: 'custom',
     },
     parameters: {
-        maxWidth: '300px',
         layout: 'centered',
     },
     argTypes: {
-        type: {
-            control: { type: 'radio' },
-            options: ['custom', 'native'],
-        },
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
     },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        const [number, setNumber] = useState(0);
-        return _jsx(InputNumber, { value: number, onChange: setNumber, ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(InputNumber, { appearance: appearance, type: storyArgs.type, value: storyArgs.value }))),
 };

package/dist/types/components/InputNumber/stories/InputNumberSize.stories.d.ts

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react-vite';
-import { InputNumberProps } from '../InputNumber.interfaces';
+import { InputNumberProps } from '../InputNumber.interface';
 declare const meta: {
     title: string;
     component: (props: InputNumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/InputPassword/InputPassword.appearance.d.ts

@@ -6,16 +6,16 @@ declare const inputPasswordAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     successPrimary: {
         fill: "successTertiary";

package/dist/types/components/InputPassword/InputPassword.interface.d.ts

@@ -4,6 +4,7 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type InputAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorHover?: BorderColorHoverProps;
@@ -49,4 +50,6 @@ type InputPasswordAppearance = InputPasswordConfig['appearance'];
 type InputPasswordAppearanceStyle = AppearanceRecord<AppearanceStyleKey, InputAppearanceProps, 'borderColor' | 'fill'>;
 type InputPasswordAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<InputAppearanceProps, 'shape'>>>>;
 type InputPasswordAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, InputAppearanceProps, 'iconSize' | 'size' | 'textSize'>;
-export type { InputPasswordAppearance, InputPasswordAppearanceShape, InputPasswordAppearanceSize, InputPasswordAppearanceStyle, InputPasswordConfig, InputPasswordProps, };
+type InputPasswordAppearanceKey = NonNullable<InputPasswordProps['appearance']>;
+type InputPasswordGalleryStory = ComponentGalleryArgs & Pick<InputPasswordProps, 'isDisabled' | 'placeholder' | 'value'>;
+export type { InputPasswordAppearance, InputPasswordAppearanceKey, InputPasswordAppearanceShape, InputPasswordAppearanceSize, InputPasswordAppearanceStyle, InputPasswordConfig, InputPasswordGalleryStory, InputPasswordProps, };

package/dist/types/components/InputPassword/InputPassword.js

@@ -23,7 +23,7 @@ function InputPassword(props) {
     const appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
-    return (_jsxs("div", { className: "input-password", children: [_jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+    return (_jsxs("div", { className: "input-password", "data-testid": dataTestId + 'Wrapper', children: [_jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
                     `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
                     `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, "data-testid": dataTestId || (name ? `${name}-input-password` : 'input-password'), "data-tour": dataTour, "date-testid": dataTestId, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
 }

package/dist/types/components/InputPassword/__test__/InputPasswordTest.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { InputPassword } from '..';
+declare const meta: {
+    title: string;
+    component: typeof InputPassword;
+    args: {
+        appearance: "defaultPrimary sizeXL solid rounded";
+        dataTestId: string;
+        placeholder: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disabled: Story;
+export declare const Filled: Story;
+export declare const Blank: Story;
+export declare const Value: Story;
+export declare const InputType: Story;

package/dist/types/components/InputPassword/__test__/InputPasswordTest.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { InputPassword } from '..';
+const meta = {
+    title: 'Atoms / InputPassword / __test__',
+    component: InputPassword,
+    args: {
+        appearance: 'defaultPrimary sizeXL solid rounded',
+        dataTestId: 'inputPasswordTestId',
+        placeholder: 'Placeholder',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Disabled = {
+    play: async ({ args, canvas, step, userEvent }) => {
+        const inputPassword = canvas.getByTestId(args.dataTestId);
+        await step('InputPassword renderer', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+        });
+        await step('InputPassword is disabled', async () => {
+            await storybookTest.expect(inputPassword).toBeDisabled();
+        });
+        await step('onClick does not invokes', async () => {
+            await userEvent.click(inputPassword);
+            const onChange = args?.onChange;
+            await storybookTest.expect(onChange).not.toHaveBeenCalled();
+        });
+    },
+    args: {
+        isDisabled: true,
+        onChange: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(InputPassword, { ...args }),
+};
+export const Filled = {
+    play: async ({ args, canvas, step }) => {
+        const inputPassword = canvas.getByTestId(args.dataTestId);
+        await step('InputPassword renderer', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+        });
+        await step('Filled input', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+            await storybookTest.expect(inputPassword).toHaveValue(args.value);
+        });
+    },
+    args: {
+        value: 'someDifficultPassword',
+    },
+    render: (args) => _jsx(InputPassword, { ...args }),
+};
+export const Blank = {
+    play: async ({ args, canvas, step }) => {
+        const inputPassword = canvas.getByTestId(args.dataTestId);
+        await step('InputPassword renderer', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+        });
+        await step('Filled input', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+            await storybookTest.expect(inputPassword).not.toHaveValue();
+        });
+    },
+    render: (args) => _jsx(InputPassword, { ...args }),
+};
+export const Value = {
+    play: async ({ args, canvas, step }) => {
+        const inputPassword = canvas.getByTestId(args.dataTestId);
+        await step('InputPassword renderer', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+        });
+        await step('Filled input with onChange', async () => {
+            const newValue = 'someDifficultPassword';
+            await storybookTest.userEvent.type(inputPassword, newValue);
+            await storybookTest.expect(inputPassword).toHaveValue(newValue);
+        });
+    },
+    args: {
+        onChange: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(InputPassword, { ...args }),
+};
+export const InputType = {
+    play: async ({ args, canvas, step }) => {
+        const inputPassword = canvas.getByTestId(args.dataTestId);
+        const inputPasswordWrapper = canvas.getByTestId(args.dataTestId + 'Wrapper');
+        await step('InputPassword renderer', async () => {
+            await storybookTest.expect(inputPassword).toBeInTheDocument();
+        });
+        await step('Input password value is not visible', async () => {
+            await storybookTest
+                .expect(inputPassword)
+                .toHaveAttribute('type', 'password');
+        });
+        await step('Input password value is visible', async () => {
+            const iconReveal = inputPasswordWrapper.querySelector('.input-password__icon');
+            await storybookTest.userEvent.click(iconReveal);
+            await storybookTest.expect(inputPassword).toHaveAttribute('type', 'text');
+        });
+    },
+    args: {
+        value: 'someDifficultPassword',
+    },
+    render: (args) => _jsx(InputPassword, { ...args }),
+};

package/dist/types/components/InputPassword/appearance/inputPasswordShape.d.ts

@@ -6,16 +6,16 @@ declare const inputPasswordAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { inputPasswordAppearanceShape };

package/dist/types/components/InputPassword/appearance/inputPasswordShape.js

@@ -6,16 +6,16 @@ const inputPasswordAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { inputPasswordAppearanceShape };

package/dist/types/components/InputPassword/stories/InpputPasswordRequire.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof InputPassword;
     args: {
-        appearance: "requirePrimary sizeXXL";
+        appearance: "requirePrimary sizeXXL solid rounded";
     };
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InpputPasswordRequire.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / InputPassword / Require',
     component: InputPassword,
     args: {
-        appearance: 'requirePrimary sizeXXL',
+        appearance: 'requirePrimary sizeXXL solid rounded',
     },
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InputPasswordDefault.stories.d.ts

@@ -1,14 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { InputPassword } from '../InputPassword';
-declare const meta: {
-    title: string;
-    component: typeof InputPassword;
-    args: {
-        appearance: "defaultPrimary sizeXXL";
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { InputPasswordGalleryStory } from '../InputPassword.interface';
+declare const meta: Meta<InputPasswordGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Placeholder: Story;
-export declare const Filled: Story;
-export declare const Blank: Story;
+type Story = StoryObj<InputPasswordGalleryStory>;
+export declare const Demo: Story;

package/dist/types/components/InputPassword/stories/InputPasswordDefault.stories.js

@@ -1,31 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { inputPasswordAppearanceDefault } from '../appearance/inputPasswordDefault';
+import { inputPasswordAppearanceDisabled } from '../appearance/inputPasswordDisabled';
+import { inputPasswordAppearanceError } from '../appearance/inputPasswordError';
+import { inputPasswordAppearanceRequire } from '../appearance/inputPasswordRequire';
+import { inputPasswordAppearanceShape } from '../appearance/inputPasswordShape';
+import { inputPasswordAppearanceSize } from '../appearance/inputPasswordSize';
+import { inputPasswordAppearanceStyle } from '../appearance/inputPasswordStyle';
+import { inputPasswordAppearanceSuccess } from '../appearance/inputPasswordSuccess';
 import { InputPassword } from '../InputPassword';
+const gallery = createComponentGallery({
+    size: inputPasswordAppearanceSize,
+    appearanceGroups: {
+        default: inputPasswordAppearanceDefault,
+        disabled: inputPasswordAppearanceDisabled,
+        error: inputPasswordAppearanceError,
+        require: inputPasswordAppearanceRequire,
+        success: inputPasswordAppearanceSuccess,
+    },
+    shape: inputPasswordAppearanceShape,
+    style: inputPasswordAppearanceStyle,
+});
 const meta = {
-    title: 'Atoms / InputPassword / Default',
+    title: 'Atoms / InputPassword',
     component: InputPassword,
     args: {
-        appearance: 'defaultPrimary sizeXXL',
-    },
-};
-export default meta;
-export const Placeholder = {
-    args: {
-        placeholder: 'Placeholder',
-    },
-    render: (args) => {
-        return _jsx(InputPassword, { ...args });
-    },
-};
-export const Filled = {
-    args: {
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
+        placeholder: 'Password',
         value: 'password',
+        isDisabled: false,
     },
-    render: (args) => {
-        return _jsx(InputPassword, { ...args });
+    parameters: {
+        layout: 'centered',
     },
-};
-export const Blank = {
-    render: (args) => {
-        return _jsx(InputPassword, { ...args });
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
     },
 };
+export default meta;
+export const Demo = {
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(InputPassword, { appearance: appearance, placeholder: storyArgs.placeholder, value: storyArgs.value, isDisabled: storyArgs.isDisabled }))),
+};

package/dist/types/components/InputPassword/stories/InputPasswordDisabled.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof InputPassword;
     args: {
-        appearance: "disabledSecondary sizeXXL";
+        appearance: "disabledSecondary sizeXXL solid rounded";
     };
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InputPasswordDisabled.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / InputPassword / Disabled',
     component: InputPassword,
     args: {
-        appearance: 'disabledSecondary sizeXXL',
+        appearance: 'disabledSecondary sizeXXL solid rounded',
     },
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InputPasswordError.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof InputPassword;
     args: {
-        appearance: "errorPrimary sizeXXL";
+        appearance: "errorPrimary sizeXXL solid rounded";
     };
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InputPasswordError.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / InputPassword / Error',
     component: InputPassword,
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
 };
 export default meta;