@itcase/ui 1.8.27 → 1.8.30

package/dist/stories/SwitchOverview.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
+
+import * as SwitchStories from '../stories/SwitchDemo.stories'
+
+<Meta title="Atoms / Switch / Overview" />
+
+# Switch
+
+`Switch` позволяет быстро переключаться между двумя бинарными состояниями.
+Обычно используются для включения / выключения указанного параметра.
+Клик или свайп по переключателю немедленно переключает состояние параметра.
+Переключатель показывает, что он включен, когда окрашен в акцентный цвет продукта.
+При этом «ручка управления» переместилась вправо.
+
+<Story of={SwitchStories.Demo} />

package/dist/stories/SwitchPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as SwitchStories from '../stories/SwitchDemo.stories'
+
+<Meta title="Atoms / Switch / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={SwitchStories.Demo} />
+<Controls of={SwitchStories.Demo} />

package/dist/stories/TabOverview.mdx

@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TabStories from '../stories/TabDemo.stories'
+
+<Meta title="Atoms / Tab / Overview" />
+
+# Tab
+
+`Tab` - это элемент быстрой навигации между сгруппированным контентом без перезагрузки страницы.
+Отображает в общем контейнере выбранный раздел контента, скрывая остальные разделы.
+
+Табы образуют группу. Группа табов отделяется от контента линией или
+границей блоков. Один таб всегда выбран, по умолчанию первый. Может быть выбран только один таб
+из всей группы. Клик по неактивному табу скрывает текущий контент и отображает контент выбранного таба.
+Используйте табы для второстепенной навигации, группировки и фильтрации связанного контента.
+
+<Story of={TabStories.Demo} />
+
+# TabGroup
+
+`TabGroup` состоит из табов, которые образуют группу. Группа табов отделяется от контента линией или
+границей блоков. Один таб всегда выбран, по умолчанию первый. Может быть выбран только один таб
+из всей группы. Клик по неактивному табу скрывает текущий контент и отображает контент выбранного таба.
+Используйте табы для второстепенной навигации, группировки и фильтрации связанного контента.
+

package/dist/stories/TabPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TabStories from '../stories/TabDemo.stories'
+
+<Meta title="Atoms / Tab / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TabStories.Demo} />
+<Controls of={TabStories.Demo} />

package/dist/stories/TextOverview.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TextStories from '../stories/TextSize.stories'
+
+<Meta title="Atoms / Text / Overview" />
+
+# Text
+
+`Text` служит для передачи текста.
+
+# Size
+
+## XXL
+
+<Story of={TextStories.SizeXXL} />
+
+## XL
+
+<Story of={TextStories.SizeXL} />
+
+## L
+
+<Story of={TextStories.SizeL} />
+
+## M
+
+<Story of={TextStories.SizeM} />
+
+## S
+
+<Story of={TextStories.SizeS} />
+
+## XS
+
+<Story of={TextStories.SizeXS} />
+
+## XXS
+
+<Story of={TextStories.SizeXXS} />
+

package/dist/stories/TextPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TextStories from '../stories/TextSize.stories'
+
+<Meta title="Atoms / Text / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TextStories.SizeM} />
+<Controls of={TextStories.SizeM} />

package/dist/stories/TileOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TileStories from '../stories/TileDemo.stories'
+
+<Meta title="Molecules / Tile / Overview" />
+
+# Tile
+
+`Tile` - это карточка, на которой находится вся ключевая информация, более детальная отобразится при клике на нее.
+
+<Story of={TileStories.Demo} />

package/dist/stories/TilePlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TileStories from '../stories/TileDemo.stories'
+
+<Meta title="Molecules / Tile / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TileStories.Demo} />
+<Controls of={TileStories.Demo} />

package/dist/stories/TitleOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TitleStories from '../stories/TitleDemo.stories'
+
+<Meta title="Atoms / Title / Overview" />
+
+# Overview
+
+`Title` — отображает заголовки.
+
+<Story of={TitleStories.Demo} />
+<Story of={TitleStories.Skeleton} />

package/dist/stories/TitlePlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TitleStories from '../stories/TitleDemo.stories'
+
+<Meta title="Atoms / Title / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TitleStories.Demo} />
+<Controls of={TitleStories.Demo} />

package/dist/stories/TooltipOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TooltipStories from '../stories/TooltipDemo.stories'
+
+<Meta title="Atoms / Tooltip / Overview" />
+
+# Tooltip
+
+`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
+
+<Story of={TooltipStories.Default} />

package/dist/stories/TooltipPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TooltipStories from '../stories/TooltipDemo.stories'
+
+<Meta title="Atoms / Tooltip / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TooltipStories.Default} />
+<Controls of={TooltipStories.Default} />

package/dist/stories/VideoOverview.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as VideoStories from  '../stories/VideoDemo.stories'
+
+<Meta title="Molecules / Video / Overview" />
+
+# Video
+
+`Video` - используется для встраивания видео в разных форматах в веб-приложения
+
+## Poster
+<Story of={VideoStories.Poster}/>
+
+## Mp4
+<Story of={VideoStories.Mp4}/>
+
+## Webm
+<Story of={VideoStories.Webm}/>
+
+## Ogv
+<Story of={VideoStories.Ogv}/>

package/dist/stories/VideoPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as VideoStories from '../stories/VideoDemo.stories'
+
+<Meta title="Molecules / Video / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={VideoStories.Mp4} />
+<Controls of={VideoStories.Mp4} />

package/dist/types/components/Accordion/Accordion.d.ts

@@ -1,4 +1,3 @@
-import type { AccordionConfig, AccordionProps } from './Accordion.interface';
-declare const accordionConfig: AccordionConfig;
+import type { AccordionProps } from './Accordion.interface';
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;
-export { Accordion, accordionConfig };
+export { Accordion };

package/dist/types/components/Accordion/appearance/accordionSize.d.ts

@@ -1,59 +1,51 @@
 declare const accordionAppearanceSize: {
     sizeXXL: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
     sizeXL: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
     sizeL: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        icon: string;
     };
     sizeM: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
     sizeS: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
     sizeXS: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
     sizeXXS: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
+        titleTextSize: string;
+        badgeAppearanceSize: string;
+        contentTextSize: string;
+        icon: string;
     };
 };
 export { accordionAppearanceSize };

package/dist/types/components/Accordion/appearance/accordionStyle.d.ts

@@ -1,15 +1,13 @@
 declare const accordionAppearanceStyle: {
-    full: {
-        borderColor: string;
-    };
-    ghost: {
-        fill: string;
+    solid: {
         borderColor: string;
     };
     outlined: {
         fill: string;
     };
-    solid: {
+    full: {};
+    ghost: {
+        fill: string;
         borderColor: string;
     };
 };

package/dist/types/components/Accordion/appearance/accordionSurface.d.ts

@@ -4,23 +4,33 @@ declare const accordionAppearanceSurface: {
         fillHover: string;
         titleTextColor: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
-    surfaceQuaternary: {
+    surfaceSecondary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
-    surfaceSecondary: {
+    surfaceTertiary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
-    surfaceTertiary: {
+    surfaceQuaternary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
 };
 export { accordionAppearanceSurface };

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

@@ -1,4 +1,4 @@
-import { Accordion, accordionConfig } from './Accordion';
+import { Accordion } from './Accordion';
 import { accordionAppearance } from './Accordion.appearance';
 import { AccordionItem, accordionItemConfig } from './AccordionItem';
-export { Accordion, AccordionItem, accordionConfig, accordionItemConfig, accordionAppearance, };
+export { Accordion, AccordionItem, accordionItemConfig, accordionAppearance };

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

@@ -35,6 +35,7 @@ export interface AvatarProps extends AvatarThemeColor, StyleAttributes {
     className?: string;
     Dot?: ReactNode;
     firstName?: string;
+    key?: unknown;
     mode?: string;
     secondName?: string;
     size?: SizePXProps;

package/dist/types/components/Avatar/appearance/{avatarSurface.d.ts → avatarDefault.d.ts}

@@ -1,19 +1,20 @@
-declare const avatarAppearanceSurface: {
+declare const avatarAppearanceDefault: {
     surfacePrimary: {
         fill: string;
         textColor: string;
+        badgeAppearance: string;
     };
-    surfaceQuaternary: {
+    surfaceSecondary: {
         fill: string;
         textColor: string;
     };
-    surfaceSecondary: {
+    surfaceTertiary: {
         fill: string;
         textColor: string;
     };
-    surfaceTertiary: {
+    surfaceQuaternary: {
         fill: string;
         textColor: string;
     };
 };
-export { avatarAppearanceSurface };
+export { avatarAppearanceDefault };

package/dist/types/components/Avatar/appearance/avatarSize.d.ts

@@ -6,6 +6,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size20: {
         size: string;
@@ -14,6 +15,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size24: {
         size: string;
@@ -22,6 +24,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size32: {
         size: string;
@@ -30,6 +33,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size40: {
         size: string;
@@ -38,6 +42,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size56: {
         size: string;
@@ -46,6 +51,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size96: {
         size: string;
@@ -54,6 +60,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size144: {
         size: string;
@@ -62,6 +69,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
     size240: {
         size: string;
@@ -70,6 +78,7 @@ declare const avatarAppearanceSize: {
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
+        badgeAppearanceSize: string;
     };
 };
 export { avatarAppearanceSize };

package/dist/types/components/Avatar/appearance/avatarStyle.d.ts

@@ -1,15 +1,15 @@
 declare const avatarAppearanceStyle: {
-    full: {
+    solid: {
         borderColor: string;
     };
-    ghost: {
+    outlined: {
         fill: string;
+    };
+    full: {
         borderColor: string;
     };
-    outlined: {
+    ghost: {
         fill: string;
-    };
-    solid: {
         borderColor: string;
     };
 };

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

@@ -0,0 +1,2 @@
+import { AvatarStackAppearanceType } from '../../../AvatarStack/AvatarStack.interface';
+export declare const avatarStackAppearance: AvatarStackAppearanceType;

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

@@ -1,9 +1,29 @@
-import { SizePXProps, TextSizeProps } from '@itcase/ui/types';
+import { AlignDirectionProps, AppearanceKeysDefault, SizePXProps, TextSizeProps, type BorderColorProps, type FillHoverProps, type FillProps, type ShapeProps, type SizeProps, type WidthProps } from '@itcase/types';
+interface AvatarStackThemeColor {
+    [key: number | string | symbol]: any;
+    borderColor?: BorderColorProps;
+    fill?: FillProps;
+    fillHover?: FillHoverProps;
+    fillIcon?: FillProps;
+    shape?: ShapeProps;
+    size?: SizeProps;
+    width?: WidthProps;
+}
+type AppearanceKeys = AppearanceKeysDefault & {};
+type AvatarStackAppearanceType = {
+    [key in AppearanceKeys]?: AvatarStackThemeColor;
+};
 interface AvatarStackProps {
+    appearance?: AppearanceKeys;
+    avatarAppearance?: AvatarStackAppearanceType;
     avatarSize: SizePXProps;
+    className?: string;
+    direction?: AlignDirectionProps;
     showCountUsers?: number;
+    size: SizePXProps;
     textSize?: TextSizeProps;
     userFirstName?: string;
     userLastName?: string;
+    isSkeleton: boolean;
 }
-export type { AvatarStackProps };
+export type { AvatarStackProps, AvatarStackAppearanceType };

package/dist/types/components/AvatarStack/appearance/avatarStackSize.d.ts

@@ -0,0 +1,21 @@
+declare const avatarStackAppearanceSize: {
+    size16: {
+        size: string;
+    };
+    size20: {
+        size: string;
+    };
+    size24: {
+        size: string;
+    };
+    size32: {
+        size: string;
+    };
+    size40: {
+        size: string;
+    };
+    size56: {
+        size: string;
+    };
+};
+export { avatarStackAppearanceSize };

package/dist/types/components/AvatarStack/stories/__mock__/index.d.ts

@@ -0,0 +1,12 @@
+declare const avatarsListMock: ({
+    id: number;
+    src: string;
+    firstName: string;
+    secondName: string;
+} | {
+    id: number;
+    firstName: string;
+    secondName: string;
+    src?: undefined;
+})[];
+export { avatarsListMock };

package/dist/types/components/Cell/appearance/cellSize.d.ts

@@ -1,22 +1,58 @@
 declare const cellAppearanceSize: {
     sizeXL: {
         size: string;
+        titleLabelAppearanceSize: string;
         titleTextSize: string;
+        valueLabelAppearanceSize: string;
         valueTextSize: string;
     };
     sizeL: {
         size: string;
+        titleLabelAppearanceSize: string;
         titleTextSize: string;
+        valueLabelAppearanceSize: string;
         valueTextSize: string;
     };
     sizeM: {
         size: string;
+        titleLabelAppearanceSize: string;
         titleTextSize: string;
+        valueLabelAppearanceSize: string;
         valueTextSize: string;
     };
     sizeS: {
         size: string;
+        titleLabelAppearanceSize: string;
         titleTextSize: string;
+        valueLabelAppearanceSize: string;
+        valueTextSize: string;
+    };
+    sizeEqualL: {
+        size: string;
+        titleLabelAppearanceSize: string;
+        titleTextSize: string;
+        valueLabelAppearanceSize: string;
+        valueTextSize: string;
+    };
+    sizeEqualM: {
+        size: string;
+        titleLabelAppearanceSize: string;
+        titleTextSize: string;
+        valueLabelAppearanceSize: string;
+        valueTextSize: string;
+    };
+    sizeEqualS: {
+        size: string;
+        titleLabelAppearanceSize: string;
+        titleTextSize: string;
+        valueLabelAppearanceSize: string;
+        valueTextSize: string;
+    };
+    sizeEqualXL: {
+        size: string;
+        titleLabelAppearanceSize: string;
+        titleTextSize: string;
+        valueLabelAppearanceSize: string;
         valueTextSize: string;
     };
 };

package/dist/types/components/Cell/appearance/cellStyle.d.ts

@@ -1,15 +1,13 @@
 declare const cellAppearanceStyle: {
-    full: {
-        borderColor: string;
-    };
-    ghost: {
-        fill: string;
+    solid: {
         borderColor: string;
     };
     outlined: {
         fill: string;
     };
-    solid: {
+    full: {};
+    ghost: {
+        fill: string;
         borderColor: string;
     };
 };