@itcase/ui 1.4.5 → 1.4.7

package/dist/css/components/Tooltip/Tooltip.css

@@ -76,8 +76,8 @@
   &_arrow_position {
     &_top {
       &::after {
-        top: 0;
         left: 50%;
+        top: 0;
         transform: translate(
             -50%,
             calc(calc(var(--tooltip-arrow-width) / 2) * -1)
@@ -87,8 +87,8 @@
     }
     &_left {
       &::after {
-        top: 50%;
         left: 0;
+        top: 50%;
         transform: translate(
             calc(calc(var(--tooltip-arrow-width) / 2) * -1),
             -50%
@@ -106,8 +106,8 @@
     }
     &_bottom {
       &::after {
-        bottom: 0;
         left: 50%;
+        bottom: 0;
         transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
           rotate(45deg);
       }
@@ -150,4 +150,4 @@
     animation-name: tooltipShowAnimation;
     opacity: 100%;
   }
-}
+}

package/dist/css/styles/fill/fill.css

@@ -16,12 +16,12 @@
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary,
-        senary, accent, disabled, hover {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary,
+        accent, disabled, hover {
         &-$(color) {
           background: var(--color-$(type)-$(color));
-          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-            75, 80, 85, 90, 95 {
+          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75,
+            80, 85, 90, 95 {
             &$(alpha) {
               background: var(--color-$(type)-$(color)-$(alpha));
             }
@@ -35,8 +35,8 @@
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);
-        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-          75, 80, 85, 90, 95 {
+        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75,
+          80, 85, 90, 95 {
           &$(alpha) {
             background: var(--color-$(type)-primary$(opacity));
           }

package/dist/css/styles/fill/fill_active.css

@@ -1,7 +1,7 @@
 .fill {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
+      senary, surface, error, success, warning, info, danger, disabled, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, active {

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,8 +1,8 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary,
-        quinary, senary, surface, error, success, warning, info, danger,
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+        senary, surface, error, success, warning, info, danger, disabled,
         gradient {
         &_$(type) {
           @each $color in primary, secondary, tertiary, quaternary, quinary,
@@ -15,8 +15,8 @@
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary,
-        quinary, senary, surface, error, success, warning, info, danger,
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+        senary, surface, error, success, warning, info, danger, disabled,
         gradient {
         &_$(type) {
           &-primary {

package/dist/css/styles/fill/fill_disabled.css

@@ -1,5 +1,6 @@
 .fill {
   &_disabled {
+    /* maybe it's deprecated */
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
@@ -13,6 +14,13 @@
         }
       }
     }
+    @each $color in primary, secondary, tertiary, quaternary {
+      &-$(color) {
+        background: var(--color-disabled-$(color));
+      }
+    }
+
+    /* maybe it's deprecated */
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {

package/dist/css/styles/text-color/text-color.css

@@ -1,11 +1,11 @@
 .text {
   &&-color {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-      success, error, info, warning, danger {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, success, error, info, warning, danger {
       &_$(type) {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-            disabled, hover, inverse {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
             &-$(color) {
               color: var(--color-$(type)-text-$(color));
             }

package/dist/css/styles/text-color/text-color_disabled.css

@@ -0,0 +1,13 @@
+.text {
+  &&-color {
+    &_disabled {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &-$(color) {
+            color: var(--color-disabled-text-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/stories/Accordion.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AccordionStories from './Accordion.stories.tsx'
+import * as AccordionStories from '../stories/Accordion.stories.tsx'
 
 <Meta of={AccordionStories} />
 

package/dist/stories/AccordionItem.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AccordionItemStories from './AccordionItem.stories.tsx'
+import * as AccordionItemStories from '../stories/AccordionItem.stories.tsx'
 
 <Meta of={AccordionItemStories} />
 

package/dist/stories/Avatar.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks'
 
 import * as AvatarStories from '../stories/Avatar.stories.tsx'
 
-<Meta of={AvatarStories} />
+<Meta title="Atoms / Badge" of={AvatarStories} />
 
 # Avatar
 

package/dist/stories/Badge.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import * as BadgeStories from '../stories/Badge.stories.tsx'
+
+<Meta title="Atoms / Badge" />
+
+# Badge
+`Badge` — используется для обозначения информации о количестве. Может входить в состав разных компонентов, например, `Icon`, `Tab`, `Tile` для обозначения количества чего-либо (сообщений, уведомлений, выбранных элементов списка).
+
+## Demo
+<Canvas sourceState="shown" of={BadgeStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={BadgeStories.Skeleton} />

package/dist/stories/Button.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as ButtonStories from '../stories/Button.stories.tsx'
+
+<Meta title="Atoms / Button" />
+
+# Button
+
+`Button` - это кнопка, предоставляет пользователю возможность совершить действие.
+Кнопка запускает действие, а текст или иконка информирует о том, что произойдет после нажатия.
+
+<Story of={ButtonStories.Demo} />

package/dist/stories/Checkbox.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CheckboxStories from '../stories/Demo.stories.tsx'
+
+<Meta title="Atoms / Checkbox" />
+
+# Checkbox
+
+`Checkbox` позволяет выбрать несколько пунктов из списка вариантов или сделать выбор между двумя противоположными состояниями или свойствами.
+Клик по тексту или чекбоксу приводит к выбору пункта. Повторный клик приводит к отмене выбора.
+
+<Story of={CheckboxStories.Demo} />

package/dist/stories/Checkmark.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as CheckmarkStories from '../stories/Checkmark.stories'
+
+<Meta title="Atoms / Checkmark" />
+
+# Checkmark
+
+`Checkmark` — показывает активен ли элемент.
+

package/dist/stories/Chips.mdx

@@ -0,0 +1,37 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as ChipsStories from '../stories/Appearance.stories.tsx'
+
+<Meta title="Atoms / Chips" />
+
+# Chips
+
+`Chips` — это компактная альтернатива чекбоксам. Они позволяют пользователям выбирать несколько вариантов одновременно и в основном применяются на мобильных устройствах для переключений фильтров.
+Данный компонент может быть использован в компоненте множественного выбора (SelectMulti).
+
+<Canvas sourceState="shown"of={ChipsStories.Accent} />
+
+
+## Accent
+
+<Canvas sourceState="shown" of={ChipsStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={ChipsStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={ChipsStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceTertiary} />

package/dist/stories/Dev.mdx

@@ -1,9 +1,9 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as TitleStories from '../stories/Title.stories.tsx'
+import * as SearchInputStories from './SearchInput.stories.tsx'
 
-<Meta title="Atoms / Title / Dev Mode" />
+<Meta title="Molecules / Search / Dev Mode" />
 
 # Dev
 
-<Canvas sourceState="shown" of={TitleStories.Dev} />
+<Canvas sourceState="shown" of={SearchInputStories.Dev} />

package/dist/stories/{elevation.mdx → Elevation.mdx}

@@ -1,7 +1,7 @@
 import { Meta, Typeset } from '@storybook/blocks'
-import { Divider } from '@itcase/ui/components/Divider'
-import { Group } from '@itcase/ui/components/Group'
-import { Text } from '@itcase/ui/components/Text'
+import { Divider } from '../components/Divider'
+import { Group } from '../components/Group'
+import { Text } from '../components/Text'
 
 <Meta title="Tokens / Elevation" />
 

package/dist/stories/Label.mdx

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

package/dist/stories/Loader.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
+
+import * as LoaderStories from '../stories/Loader.stories.tsx'
+
+<Meta title="Atoms / Loader" />
+
+# Loader
+
+`Loader` - это компонент для визуального отображения состояния загрузки. Используется при загрузке данных, медленной обработке запроса или выполнения действия с задержкой.
+
+<Story of={LoaderStories.Demo} />

package/dist/stories/Logo.mdx

@@ -1,19 +1,24 @@
-import { Canvas, Meta } from '@storybook/blocks'
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
 
 import * as LogoStories from '../stories/Logo.stories.tsx'
+import * as LogoSizeStories from '../stories/LogoSize.stories.tsx'
 
-<Meta of={LogoStories} />
+<Meta title="Atoms / Logo" />
 
 # Logo
 
+`Logo` - отображает логотип компании, и зачастую явлется ссылкой на главную страницу.
+
+<Canvas sourceState="shown" of={LogoStories.Default} />
+
 ## SizeS
 
-<Canvas sourceState="shown" of={LogoStories.SizeS} />
+<Canvas sourceState="shown" of={LogoSizeStories.S} />
 
 ## SizeM
 
-<Canvas sourceState="shown" of={LogoStories.SizeM} />
+<Canvas sourceState="shown" of={LogoSizeStories.M} />
 
 ## SizeL
 
-<Canvas sourceState="shown" of={LogoStories.SizeL} />
+<Canvas sourceState="shown" of={LogoSizeStories.L} />

package/dist/stories/Modal.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks'
+
+import * as ModalStories from '../stories/Modal.stories.tsx'
+
+<Meta title="Molecules / Modal" />
+
+# Modal
+
+`Modal` - это карточка, на которой находится вся ключевая информация, более детальная отобразится при клике на нее.
+
+## Demo
+<Canvas sourceState="shown" of={ModalStories.Demo} />
+
+## Skeleton
+<Canvas sourceState="shown" of={ModalStories.Skeleton} />

package/dist/stories/Response.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
+
+import * as ResponseStories from '../stories/Default.stories.tsx'
+
+<Meta title="Molecules / Response" />
+
+# Response
+
+`Response` отображает статус, например, предупреждения или ошибки, напрямую влияющих на возможности пользователей выполнять определенные задачи.
+
+<Story of={ResponseStories.Demo} />

package/dist/stories/Tab.mdx

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

package/dist/stories/Tile.mdx

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

package/dist/stories/Title.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as TitleStories from '../stories/Title.stories.tsx'
+import * as TitleStories from '../stories/Size.stories.tsx'
 
 <Meta of={TitleStories} />
 

package/dist/types/appearance/default/defaultAccent.d.ts

@@ -0,0 +1,33 @@
+declare const defaultAccentAppearance: {
+    accent: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    accentPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    accentSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    accentTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    accentQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultAccentAppearance };

package/dist/types/appearance/default/defaultDanger.d.ts

@@ -0,0 +1,33 @@
+declare const defaultDangerAppearance: {
+    danger: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    dangerPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    dangerSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    dangerTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    dangerQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultDangerAppearance };

package/dist/types/appearance/default/defaultDisabled.d.ts

@@ -0,0 +1,33 @@
+declare const defaultDisabledAppearance: {
+    disabled: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    disabledTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    disabledQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultDisabledAppearance };

package/dist/types/appearance/default/defaultError.d.ts

@@ -0,0 +1,33 @@
+declare const defaultErrorAppearance: {
+    error: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    errorPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    errorSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    errorTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    errorQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultErrorAppearance };

package/dist/types/appearance/default/defaultInfo.d.ts

@@ -0,0 +1,33 @@
+declare const defaultInfoAppearance: {
+    info: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    infoPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    infoSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    infoTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    infoQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultInfoAppearance };

package/dist/types/appearance/default/defaultPrimary.d.ts

@@ -0,0 +1,33 @@
+declare const defaultPrimaryAppearance: {
+    primary: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+        textColor: string;
+    };
+    primaryPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    primarySecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    primaryTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    primaryQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+};
+export { defaultPrimaryAppearance };