@itcase/ui-web 1.9.104 → 1.9.105

package/dist/types/components/Cell/stories/CellReverse.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
         titleLabel: string;
         value: string;
         valueLabel: string;
-        appearance: "surfacePrimary sizeXL solid";
+        appearance: "surfacePrimary sizeXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Cell/stories/CellReverse.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: 'Molecules / Cell / Reverse',
     component: Cell,
     args: {
-        appearance: 'surfacePrimary sizeXL solid',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         ...cellMock,
     },
     parameters: {

package/dist/types/components/Cell/stories/CellSizeEqualHorizontal.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeEqualXL full',
+        appearance: 'surfacePrimary sizeEqualXL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -23,7 +23,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeEqualL full',
+        appearance: 'surfacePrimary sizeEqualL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -31,7 +31,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeEqualM full',
+        appearance: 'surfacePrimary sizeEqualM full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -39,7 +39,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeEqualS full',
+        appearance: 'surfacePrimary sizeEqualS full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });

package/dist/types/components/Cell/stories/CellSizeEqualVertical.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeEqualXL full',
+        appearance: 'surfacePrimary sizeEqualXL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -23,7 +23,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeEqualL full',
+        appearance: 'surfacePrimary sizeEqualL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -31,7 +31,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeEqualM full',
+        appearance: 'surfacePrimary sizeEqualM full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -39,7 +39,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeEqualS full',
+        appearance: 'surfacePrimary sizeEqualS full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });

package/dist/types/components/Cell/stories/CellSizeHorizontal.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -23,7 +23,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL full',
+        appearance: 'surfacePrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -31,7 +31,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM full',
+        appearance: 'surfacePrimary sizeM full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -39,7 +39,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS full',
+        appearance: 'surfacePrimary sizeS full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });

package/dist/types/components/Cell/stories/CellSizeVertical.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -23,7 +23,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL full',
+        appearance: 'surfacePrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -31,7 +31,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM full',
+        appearance: 'surfacePrimary sizeM full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -39,7 +39,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS full',
+        appearance: 'surfacePrimary sizeS full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });

package/dist/types/components/Cell/stories/CellStyle.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'surfacePrimary sizeXL solid',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -23,7 +23,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'surfacePrimary sizeXL outlined',
+        appearance: 'surfacePrimary sizeXL outlined rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -31,7 +31,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeXL ghost',
+        appearance: 'surfacePrimary sizeXL ghost rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });
@@ -39,7 +39,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Cell, { ...args });

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

@@ -2,6 +2,7 @@ import type { ElementType, ReactNode } from 'react';
 import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import type { StyleAttributes } from '@itcase/ui-core/hooks';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import { TextProps } from '../Text/Text.interface';
 type CheckboxAppearanceProps = {
     borderColor?: BorderColorProps;
@@ -60,4 +61,6 @@ type CheckboxAppearance = CheckboxConfig['appearance'];
 type CheckboxAppearanceStyle = AppearanceRecord<AppearanceStyleKey, CheckboxAppearanceProps, 'borderColorCheckbox' | 'borderColorCheckboxActive' | 'borderColorCheckboxActiveHover' | 'borderColorCheckboxHover' | 'fill' | 'fillHover'>;
 type CheckboxAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, CheckboxAppearanceProps, 'shape'>;
 type CheckboxAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, CheckboxAppearanceProps, 'descTextSize' | 'labelTextSize' | 'size'>;
-export type { CheckboxAppearance, CheckboxAppearanceShape, CheckboxAppearanceSize, CheckboxAppearanceStyle, CheckboxConfig, CheckboxProps, };
+type CheckboxAppearanceKey = NonNullable<CheckboxProps['appearance']>;
+type CheckboxGalleryStory = ComponentGalleryArgs & Pick<CheckboxProps, 'checked' | 'desc' | 'indeterminate' | 'isDisabled' | 'isSkeleton' | 'label'>;
+export type { CheckboxAppearance, CheckboxAppearanceKey, CheckboxAppearanceShape, CheckboxAppearanceSize, CheckboxAppearanceStyle, CheckboxConfig, CheckboxGalleryStory, CheckboxProps, };

package/dist/types/components/Checkbox/__test__/CheckboxTest.stories.d.ts

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

package/dist/types/components/Checkbox/__test__/CheckboxTest.stories.js

@@ -0,0 +1,74 @@
+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 { Checkbox } from '..';
+const meta = {
+    title: 'Atoms / Checkbox / __test__',
+    component: Checkbox,
+    args: {
+        appearance: 'defaultPrimary sizeXL solid rounded',
+        dataTestId: 'checkboxTestId',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Checkbox renders with skeleton class', async () => {
+            const checkbox = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(checkbox).toBeInTheDocument();
+            await storybookTest.expect(checkbox).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Checkbox, { ...args }),
+};
+export const Disabled = {
+    play: async ({ args, canvas, step, userEvent }) => {
+        const checkbox = canvas.getByRole('checkbox');
+        await step('Checkbox is disabled', async () => {
+            await storybookTest.expect(checkbox).toBeDisabled();
+        });
+        await step('Click does not invoke onClick', async () => {
+            await userEvent.click(checkbox);
+            const onClick = args?.onChange;
+            await storybookTest.expect(onClick).not.toHaveBeenCalled();
+        });
+    },
+    args: {
+        isDisabled: true,
+        onChange: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(Checkbox, { ...args }),
+};
+export const Checked = {
+    play: async ({ args, canvas, step }) => {
+        const checkbox = canvas.getByRole('checkbox');
+        await step('Checkbox is in the document', async () => {
+            await storybookTest.expect(checkbox).toBeInTheDocument();
+        });
+        await step('Click via userEvent', async () => {
+            await storybookTest.userEvent.click(checkbox);
+        });
+        await step('onClick called once and checkbox turns to active state', async () => {
+            await storybookTest.expect(args.onChange).toHaveBeenCalled();
+            await storybookTest.expect(checkbox).toBeChecked();
+        });
+    },
+    args: {
+        onChange: storybookTest['fn'](),
+    },
+    render: (args) => {
+        const [isChecked, setChecked] = useState(false);
+        return (_jsx(Checkbox, { ...args, checked: isChecked, onChange: () => {
+                setChecked((prev) => !prev);
+                args.onChange?.();
+            } }));
+    },
+};

package/dist/types/components/Checkbox/stories/Checkbox.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Checkbox;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Checkbox/stories/Checkbox.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Checkbox / Checkbox',
     component: Checkbox,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.d.ts

@@ -1,19 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Checkbox } from '../Checkbox';
-declare const meta: {
-    title: string;
-    component: typeof Checkbox;
-    args: {
-        appearance: "defaultPrimary sizeM";
-        label: string;
-        desc: string;
-        checked: true;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { CheckboxGalleryStory } from '../Checkbox.interface';
+declare const meta: Meta<CheckboxGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<CheckboxGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.js

@@ -1,29 +1,52 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { checkboxAppearanceDefault } from '../appearance/checkboxDefault';
+import { checkboxAppearanceDisabled } from '../appearance/checkboxDisabled';
+import { checkboxAppearanceError } from '../appearance/checkboxError';
+import { checkboxAppearanceRequire } from '../appearance/checkboxRequire';
+import { checkboxAppearanceShape } from '../appearance/checkboxShape';
+import { checkboxAppearanceSize } from '../appearance/checkboxSize';
+import { checkboxAppearanceStyle } from '../appearance/checkboxStyle';
+import { checkboxAppearanceSuccess } from '../appearance/checkboxSuccess';
 import { Checkbox } from '../Checkbox';
+const gallery = createComponentGallery({
+    size: checkboxAppearanceSize,
+    appearanceGroups: {
+        default: checkboxAppearanceDefault,
+        disabled: checkboxAppearanceDisabled,
+        error: checkboxAppearanceError,
+        require: checkboxAppearanceRequire,
+        success: checkboxAppearanceSuccess,
+    },
+    shape: checkboxAppearanceShape,
+    style: checkboxAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Checkbox',
     component: Checkbox,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         label: 'Checkbox',
         desc: 'Description',
         checked: true,
+        indeterminate: false,
+        isDisabled: false,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    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) => {
-        return _jsx(Checkbox, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Checkbox, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Checkbox, { appearance: appearance, label: storyArgs.label, desc: storyArgs.desc || undefined, checked: storyArgs.checked, indeterminate: storyArgs.indeterminate, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Checkbox/stories/CheckboxError.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Checkbox;
     args: {
-        appearance: "errorPrimary sizeM";
+        appearance: "errorPrimary sizeM solid rounded";
         label: string;
         desc: string;
     };

package/dist/types/components/Checkbox/stories/CheckboxError.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Checkbox / Error',
     component: Checkbox,
     args: {
-        appearance: 'errorPrimary sizeM',
+        appearance: 'errorPrimary sizeM solid rounded',
         label: 'Checkbox',
         desc: 'Description',
     },

package/dist/types/components/Checkbox/stories/CheckboxLabel.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Checkbox;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
         label: string;
     };
     parameters: {

package/dist/types/components/Checkbox/stories/CheckboxLabel.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Checkbox / Checkbox + Label',
     component: Checkbox,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
         label: 'Checkbox',
     },
     parameters: {

package/dist/types/components/Checkbox/stories/CheckboxLabelDesc.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Checkbox;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
         label: string;
         desc: string;
     };

package/dist/types/components/Checkbox/stories/CheckboxLabelDesc.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Checkbox / Checkbox + Label + Desc',
     component: Checkbox,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
         label: 'Checkbox',
         desc: 'Description',
     },

package/dist/types/components/Checkbox/stories/CheckboxSize.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'defaultPrimary sizeXL rounded',
+        appearance: 'defaultPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Checkbox, { ...args });
@@ -22,7 +22,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'defaultPrimary sizeL rounded',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Checkbox, { ...args });
@@ -30,7 +30,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM rounded',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Checkbox, { ...args });
@@ -38,7 +38,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'defaultPrimary sizeS rounded',
+        appearance: 'defaultPrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Checkbox, { ...args });

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

@@ -2,6 +2,7 @@ import { ElementType } from 'react';
 import { AppearanceConfig, AppearanceKeysDefault, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceKeys, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, SizeProps } from '@itcase/types-ui';
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import { IconProps } from '../Icon/Icon.interface';
 type CheckmarkAppearanceProps = {
     borderColor?: BorderColorProps;
@@ -39,4 +40,6 @@ type CheckmarkConfig = AppearanceConfig<AppearanceKeysDefault, CheckmarkAppearan
 type CheckmarkAppearance = CheckmarkConfig['appearance'];
 type CheckmarkAppearanceStyle = AppearanceRecord<AppearanceStyleKey, CheckmarkAppearanceProps, 'borderColor' | 'fill'>;
 type CheckmarkAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, CheckmarkAppearanceProps, 'checkmarkCheckedIcon' | 'checkmarkNegativeIcon' | 'size'>;
-export type { CheckmarkAppearance, CheckmarkAppearanceSize, CheckmarkAppearanceStyle, CheckmarkConfig, CheckmarkProps, };
+type CheckmarkAppearanceKey = NonNullable<CheckmarkProps['appearance']>;
+type CheckmarkGalleryStory = ComponentGalleryArgs & Pick<CheckmarkProps, 'isChecked' | 'isDisabled' | 'isNegative' | 'isSkeleton'>;
+export type { CheckmarkAppearance, CheckmarkAppearanceKey, CheckmarkAppearanceSize, CheckmarkAppearanceStyle, CheckmarkConfig, CheckmarkGalleryStory, CheckmarkProps, };

package/dist/types/components/Checkmark/Checkmark.js

@@ -26,6 +26,6 @@ function Checkmark(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, isSkeleton && 'skeleton', borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive || isNegative) && (_jsx(Icon, { fill: checkmarkFill, iconFill: checkmarkIconFill, iconSize: checkmarkIconSize, imageSrc: checkmarkIconSrc, shape: checkmarkIconShape, SvgImage: isNegative ? checkmarkNegativeIcon : checkmarkCheckedIcon })) }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, isSkeleton && 'skeleton', borderWidthClass && `border-width_${borderWidthClass}`, isDisabled && 'checkmark_state_disabled'), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive || isNegative) && (_jsx(Icon, { fill: checkmarkFill, iconFill: checkmarkIconFill, iconSize: checkmarkIconSize, imageSrc: checkmarkIconSrc, shape: checkmarkIconShape, SvgImage: isNegative ? checkmarkNegativeIcon : checkmarkCheckedIcon })) }));
 }
 export { Checkmark, checkmarkConfig };

package/dist/types/components/Checkmark/__test__/CheckmarkTest.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Checkmark } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Checkmark;
+    args: {
+        appearance: "surfacePrimary sizeXL solid rounded";
+        dataTestId: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const Disabled: Story;
+export declare const Checked: Story;

package/dist/types/components/Checkmark/__test__/CheckmarkTest.stories.js

@@ -0,0 +1,72 @@
+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 { Checkmark } from '..';
+const meta = {
+    title: 'Atoms / Checkmark / __test__',
+    component: Checkmark,
+    args: {
+        appearance: 'surfacePrimary sizeXL solid rounded',
+        dataTestId: 'checkmarkTestId',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Checkmark renders with skeleton class', async () => {
+            const checkmark = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(checkmark).toBeInTheDocument();
+            await storybookTest.expect(checkmark).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Checkmark, { ...args }),
+};
+export const Disabled = {
+    play: async ({ args, canvas, step }) => {
+        const checkmark = canvas.getByTestId(args.dataTestId);
+        await step('Checkmark is disabled', async () => {
+            await storybookTest
+                .expect(checkmark)
+                .toHaveClass('checkmark_state_disabled');
+        });
+    },
+    args: {
+        isDisabled: true,
+        onClick: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(Checkmark, { ...args }),
+};
+export const Checked = {
+    play: async ({ args, canvas, step }) => {
+        const checkmark = canvas.getByTestId(args.dataTestId);
+        await step('Checkmark is in the document', async () => {
+            await storybookTest.expect(checkmark).toBeInTheDocument();
+        });
+        await step('Click via userEvent', async () => {
+            await storybookTest.userEvent.click(checkmark);
+        });
+        await step('onClick called once and checkmark turns to active state', async () => {
+            const checkmarkIcon = checkmark.querySelector('.icon');
+            await storybookTest.expect(args.onClick).toHaveBeenCalled();
+            await storybookTest.expect(checkmarkIcon).toBeInTheDocument();
+        });
+    },
+    args: {
+        onClick: storybookTest['fn'](),
+    },
+    render: (args) => {
+        const [isChecked, setChecked] = useState(false);
+        return (_jsx(Checkmark, { ...args, isChecked: isChecked, onClick: () => {
+                setChecked((prev) => !prev);
+                args.onClick?.();
+            } }));
+    },
+};

package/dist/types/components/Checkmark/appearance/checkmarkShape.d.ts

@@ -0,0 +1,5 @@
+import type { AppearanceShapeKey } from '@itcase/types-ui';
+declare const checkmarkAppearanceShape: Partial<Record<AppearanceShapeKey, {
+    shape?: 'rounded';
+}>>;
+export { checkmarkAppearanceShape };

package/dist/types/components/Checkmark/appearance/checkmarkShape.js

@@ -0,0 +1,6 @@
+const checkmarkAppearanceShape = {
+    rounded: {
+        shape: 'rounded',
+    },
+};
+export { checkmarkAppearanceShape };