@itcase/ui-web 1.9.103 → 1.9.105

package/dist/types/components/Chips/appearance/chipsShape.js

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

package/dist/types/components/Chips/appearance/chipsSurface.d.ts

@@ -15,7 +15,7 @@ declare const chipsAppearanceSurface: {
         labelTextColor: "surfaceTextPrimary";
         labelTextColorHover: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "surfacePrimary sizeXS solid";
+        badgeAppearance: "surfacePrimary sizeXS solid rounded";
         iconAfterFillActiveIcon: "accentItemPrimary";
         iconAfterFillIcon: "surfaceItemPrimary";
         iconBeforeFillActiveIcon: "accentItemPrimary";

package/dist/types/components/Chips/appearance/chipsSurface.js

@@ -15,7 +15,7 @@ const chipsAppearanceSurface = {
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        badgeAppearance: 'surfacePrimary sizeXS solid',
+        badgeAppearance: 'surfacePrimary sizeXS solid rounded',
         iconAfterFillActiveIcon: 'accentItemPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillActiveIcon: 'accentItemPrimary',

package/dist/types/components/Chips/stories/ChipsCheckLeft.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -24,7 +24,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXL',
+        appearance: 'accentPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -33,7 +33,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXL',
+        appearance: 'errorPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -42,7 +42,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXL',
+        appearance: 'specialPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -51,7 +51,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXL',
+        appearance: 'extraPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -60,7 +60,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXL',
+        appearance: 'successPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -69,7 +69,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXL',
+        appearance: 'dangerPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -78,7 +78,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXL',
+        appearance: 'warningPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -87,7 +87,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXL',
+        appearance: 'infoPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {
@@ -96,7 +96,7 @@ export const Info = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeXL',
+        appearance: 'disabledPrimary sizeXL solid rounded',
         iconBefore: icons20.Form.Check,
     },
     render: (args) => {

package/dist/types/components/Chips/stories/ChipsCheckRight.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -24,7 +24,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXL',
+        appearance: 'accentPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -33,7 +33,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXL',
+        appearance: 'errorPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -42,7 +42,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXL',
+        appearance: 'specialPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -51,7 +51,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXL',
+        appearance: 'extraPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -60,7 +60,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXL',
+        appearance: 'successPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -69,7 +69,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXL',
+        appearance: 'dangerPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -78,7 +78,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXL',
+        appearance: 'warningPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -87,7 +87,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXL',
+        appearance: 'infoPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {
@@ -96,7 +96,7 @@ export const Info = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeXL',
+        appearance: 'disabledPrimary sizeXL solid rounded',
         iconAfter: icons20.Form.Check,
     },
     render: (args) => {

package/dist/types/components/Chips/stories/ChipsClear.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SurfacePrimary = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -24,7 +24,7 @@ export const SurfacePrimary = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXL',
+        appearance: 'accentPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -33,7 +33,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXL',
+        appearance: 'errorPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -42,7 +42,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXL',
+        appearance: 'specialPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -51,7 +51,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXL',
+        appearance: 'extraPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -60,7 +60,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXL',
+        appearance: 'successPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -69,7 +69,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXL',
+        appearance: 'dangerPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -78,7 +78,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXL',
+        appearance: 'warningPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -87,7 +87,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXL',
+        appearance: 'infoPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {
@@ -96,7 +96,7 @@ export const Info = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeXL',
+        appearance: 'disabledPrimary sizeXL solid rounded',
         iconAfter: icons24.Action.Close,
     },
     render: (args) => {

package/dist/types/components/Chips/stories/ChipsDefault.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -22,7 +22,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXL',
+        appearance: 'accentPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -30,7 +30,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXL',
+        appearance: 'errorPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -38,7 +38,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXL',
+        appearance: 'specialPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -46,7 +46,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXL',
+        appearance: 'extraPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -54,7 +54,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXL',
+        appearance: 'successPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -62,7 +62,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXL',
+        appearance: 'dangerPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -70,7 +70,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXL',
+        appearance: 'warningPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -78,7 +78,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXL',
+        appearance: 'infoPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -86,7 +86,7 @@ export const Info = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeXL',
+        appearance: 'disabledPrimary sizeXL solid rounded',
         isDisabled: true,
     },
     render: (args) => {

package/dist/types/components/Chips/stories/ChipsDemo.stories.d.ts

@@ -1,17 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Chips } from '../Chips';
-declare const meta: {
-    title: string;
-    component: typeof Chips;
-    args: {
-        label: string;
-        shape: "rounded";
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ChipsGalleryStory } from '../Chips.interface';
+declare const meta: Meta<ChipsGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ChipsGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Chips/stories/ChipsDemo.stories.js

@@ -1,31 +1,74 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { icons14, icons16, icons20, icons24 } from '@itcase/icons-default';
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { chipsAppearanceAccent } from '../appearance/chipsAccent';
+import { chipsAppearanceDanger } from '../appearance/chipsDanger';
+import { chipsAppearanceDisabled } from '../appearance/chipsDisabled';
+import { chipsAppearanceError } from '../appearance/chipsError';
+import { chipsAppearanceExtra } from '../appearance/chipsExtra';
+import { chipsAppearanceInfo } from '../appearance/chipsInfo';
+import { chipsAppearanceShape } from '../appearance/chipsShape';
+import { chipsAppearanceSize } from '../appearance/chipsSize';
+import { chipsAppearanceSpecial } from '../appearance/chipsSpecial';
+import { chipsAppearanceStyle } from '../appearance/chipsStyle';
+import { chipsAppearanceSuccess } from '../appearance/chipsSuccess';
+import { chipsAppearanceSurface } from '../appearance/chipsSurface';
+import { chipsAppearanceWarning } from '../appearance/chipsWarning';
 import { Chips } from '../Chips';
+const galleryIconsBySizeKey = {
+    sizeXXL: icons24.Placeholder.Default,
+    sizeXL: icons20.Placeholder.Default,
+    sizeL: icons16.Placeholder.Default,
+    sizeM: icons16.Placeholder.Default,
+    sizeS: icons16.Placeholder.Default,
+    sizeXS: icons14.Placeholder.Default,
+    sizeXXS: icons14.Placeholder.Default,
+};
+const gallery = createComponentGallery({
+    size: chipsAppearanceSize,
+    appearanceGroups: {
+        accent: chipsAppearanceAccent,
+        danger: chipsAppearanceDanger,
+        disabled: chipsAppearanceDisabled,
+        error: chipsAppearanceError,
+        extra: chipsAppearanceExtra,
+        info: chipsAppearanceInfo,
+        special: chipsAppearanceSpecial,
+        success: chipsAppearanceSuccess,
+        surface: chipsAppearanceSurface,
+        warning: chipsAppearanceWarning,
+    },
+    shape: chipsAppearanceShape,
+    style: chipsAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Chips',
-    component: Chips,
     args: {
-        label: 'Chips',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
         shape: 'rounded',
+        label: 'Chips',
+        iconBefore: false,
+        iconAfter: true,
+        isActive: 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 = {
-    args: {
-        appearance: 'surfacePrimary sizeXL',
-    },
-    render: (args) => {
-        return _jsx(Chips, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        appearance: 'surfacePrimary sizeXL',
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Chips, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => {
+        const icon = galleryIconsBySizeKey[sizeKey];
+        return (_jsx(Chips, { appearance: appearance, label: storyArgs.label, iconAfter: storyArgs.iconAfter ? icon : undefined, iconBefore: storyArgs.iconBefore ? icon : undefined, isActive: storyArgs.isActive, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }));
+    }),
 };

package/dist/types/components/Chips/stories/ChipsGroup.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof ChipsGroup;
     args: {
-        chipsAppearance: "surfacePrimary sizeXL";
+        chipsAppearance: "surfacePrimary sizeXL solid rounded";
         chipsList: ({
             id: number;
             label: string;

package/dist/types/components/Chips/stories/ChipsGroup.stories.js

@@ -6,7 +6,7 @@ const meta = {
     component: ChipsGroup,
     args: {
         ...chipsListMock,
-        chipsAppearance: 'surfacePrimary sizeXL',
+        chipsAppearance: 'surfacePrimary sizeXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Chips/stories/ChipsMuted.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfaceMutedPrimary sizeXL',
+        appearance: 'surfaceMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -22,7 +22,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentMutedPrimary sizeXL',
+        appearance: 'accentMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -30,7 +30,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorMutedPrimary sizeXL',
+        appearance: 'errorMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -38,7 +38,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialMutedPrimary sizeXL',
+        appearance: 'specialMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -46,7 +46,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraMutedPrimary sizeXL',
+        appearance: 'extraMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -54,7 +54,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successMutedPrimary sizeXL',
+        appearance: 'successMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -62,7 +62,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerMutedPrimary sizeXL',
+        appearance: 'dangerMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -70,7 +70,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningMutedPrimary sizeXL',
+        appearance: 'warningMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -78,7 +78,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoMutedPrimary sizeXL',
+        appearance: 'infoMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });

package/dist/types/components/Chips/stories/ChipsShape.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Rounded = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL rounded',
+        appearance: 'surfaceSecondary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -21,7 +21,7 @@ export const Rounded = {
 };
 export const RoundedS = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedS',
+        appearance: 'surfaceSecondary sizeXXL solid roundedS',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -29,7 +29,7 @@ export const RoundedS = {
 };
 export const RoundedM = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedM',
+        appearance: 'surfaceSecondary sizeXXL solid roundedM',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -37,7 +37,7 @@ export const RoundedM = {
 };
 export const RoundedL = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedL',
+        appearance: 'surfaceSecondary sizeXXL solid roundedL',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -45,7 +45,7 @@ export const RoundedL = {
 };
 export const RoundedXL = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedXL',
+        appearance: 'surfaceSecondary sizeXXL solid roundedXL',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -53,7 +53,7 @@ export const RoundedXL = {
 };
 export const Circular = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL circular',
+        appearance: 'surfaceSecondary sizeXXL solid circular',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });