@itcase/ui 1.8.1 → 1.8.4

package/dist/stories/BreadcrumbsItem.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
+
+<Meta of={BreadcrumbsItemStories} />
+
+# BreadcrumbsItem
+`BreadcrumbsItem` -  это навигационный элемент на странице сайта,
+который показывает текущее местоположение пользователя внутри структуры сайта
+
+## Demo
+
+<Canvas of={BreadcrumbsItemStories.Demo} />
+
+## Icon After
+
+<Canvas of={BreadcrumbsItemStories.IconAfter} />

package/dist/stories/Image.mdx

@@ -8,8 +8,8 @@ import * as ImageStories from '../stories/Image.stories.tsx'
 
 ## Rectangular
 
-<Canvas sourceState="shown" of={ImageStories.Rectangular} />
+<Canvas sourceState="shown" of={ImageStories.Default} />
 
 ## Circular
 
-<Canvas sourceState="shown" of={ImageStories.Circular} />
+<Canvas sourceState="shown" of={ImageStories.Skeleton} />

package/dist/stories/ListItem.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from '@storybook/blocks'
+
+import * as ListItemStories from '../stories/ListItem.stories'
+
+<Meta of={ListItemStories} />
+
+# ListItem
+`ListItem` - это элемент списка `List`
+
+## Demo
+<Canvas of={ListItemStories.Demo} />

package/dist/stories/Overview.mdx

@@ -1,11 +1,21 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as VideoStories from  '../stories/Video.stories'
 
-<Meta title="Atoms / Tooltip / Overview" />
+<Meta title="Components / Video / Overview" />
 
-# Tooltip
+# Video
 
-`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
+`Video` - используется для встраивания видео в разных форматах в веб-приложения
 
-<Story of={TooltipStories.surfacePrimary} />
+## Poster
+<Story of={VideoStories.Poster}/>
+
+## Mp4
+<Story of={VideoStories.Mp4}/>
+
+## Webm
+<Story of={VideoStories.Webm}/>
+
+## Ogv
+<Story of={VideoStories.Ogv}/>

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as VideoStories from '../stories/Video.stories.tsx'
 
-<Meta title="Atoms / Tooltip / Playground" />
+<Meta title="Components / Video / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
-<Controls of={TooltipStories.surfacePrimary} />
+<Canvas sourceState="shown" of={VideoStories.Mp4} />
+<Controls of={VideoStories.Mp4} />

package/dist/stories/Playgroynd.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DadataHintFieldStories from '../stories/DadataHintField.stories'
+
+<Meta title="Components / DadataHintField / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DadataHintFieldStories.Demo} />
+<Controls of={DadataHintFieldStories.Demo} />
+

package/dist/stories/Plsyground.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as BreadcrumbsStories from '../stories/Breadcrumbs.stories'
+import * as BreadcrumbsItemStories from '../stories/BreadcrubsItem.stories'
+
+<Meta title="Atoms / Breadcrumbs / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={BreadcrumbsStories.Default} />
+<Controls of={BreadcrumbsStories.Default} />
+
+<Canvas sourceState="shown" of={BreadcrumbsItemStories.Demo} />
+<Controls of={BreadcrumbsItemStories.IconAfter} />

package/dist/types/components/Badge/appearance/badgeAccent.d.ts

@@ -2,38 +2,18 @@ declare const badgeAppearanceAccent: {
     accent: {
         dotFill: string;
         iconFill: string;
-        fill: string;
-        fillHover: string;
-        borderColor: string;
-        textColor: string;
     };
     accentPrimary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentQuaternary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentSecondary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
     accentTertiary: {
         dotFill: string;
-        fill: string;
-        borderColor: string;
-        textColor: string;
-        iconFill: string;
     };
 };
 export { badgeAppearanceAccent };

package/dist/types/components/Button/appearance/buttonSize.d.ts

@@ -1,59 +1,59 @@
 declare const buttonAppearanceSize: {
     sizeXXL: {
-        labelTextSize: string;
         size: string;
+        labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
     };
     sizeXL: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
     sizeL: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
     sizeM: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
     sizeS: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
     sizeXS: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
     sizeXXS: {
+        size: string;
         labelTextSize: string;
         iconAfterFillSize: number;
         iconAfterSize: number;
         iconBeforeFillSize: number;
         iconBeforeSize: number;
-        size: string;
     };
 };
 export { buttonAppearanceSize };

package/dist/types/components/Button/appearance/buttonSurface.d.ts

@@ -3,20 +3,21 @@ declare const buttonAppearanceSurface: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        iconFillIcon: string;
     };
-    surfaceSecondary: {
+    surfaceQuaternary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
     };
-    surfaceTertiary: {
+    surfaceSecondary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
     };
-    surfaceQuaternary: {
+    surfaceTertiary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;

package/dist/types/components/Choice/appearance/choiceAccent.d.ts

@@ -1,10 +1,9 @@
 declare const choiceAppearanceAccent: {
     accentPrimary: {
         fill: string;
-        fillActive: string;
+        fillItemActive: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextSize: string;
         borderColor: string;
     };
 };

package/dist/types/components/Choice/appearance/choiceSize.d.ts

@@ -0,0 +1,18 @@
+declare const choiceAppearanceSize: {
+    sizeL: {
+        size: string;
+        labelTextSize: string;
+        iconSize: string;
+    };
+    sizeM: {
+        size: string;
+        labelTextSize: string;
+        iconSize: string;
+    };
+    sizeS: {
+        size: string;
+        labelTextSize: string;
+        iconSize: string;
+    };
+};
+export { choiceAppearanceSize };

package/dist/types/components/Choice/appearance/choiceStyle.d.ts

@@ -0,0 +1,14 @@
+declare const choiceAppearanceStyle: {
+    full: {};
+    ghost: {
+        fill: string;
+        borderWidth: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    solid: {
+        borderWidth: string;
+    };
+};
+export { choiceAppearanceStyle };

package/dist/types/components/Choice/appearance/choiceSurface.d.ts

@@ -7,7 +7,10 @@ declare const choiceAppearanceSurface: {
         fillItemHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextSize: string;
+        labelTextWrap: string;
+        borderColor: string;
+        iconBeforeFill: string;
+        iconBeforeFillActive: string;
     };
     surfaceSecondary: {
         fill: string;
@@ -16,7 +19,7 @@ declare const choiceAppearanceSurface: {
         fillItemHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextSize: string;
+        labelTextWrap: string;
     };
 };
 export { choiceAppearanceSurface };

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

@@ -1,4 +1,6 @@
 import { HTMLProps } from 'react';
+import { DaDataSuggestion } from 'react-dadata';
+import { DaDataParty } from 'react-dadata/dist/variants/party_russia/party-russia-types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface DadataHintFieldProps extends StyleAttributes {
     delay?: number;
@@ -6,8 +8,8 @@ export interface DadataHintFieldProps extends StyleAttributes {
     inputProps?: HTMLProps<HTMLInputElement>;
     meta?: any;
     token: string;
-    setValue?: () => void;
+    setValue?: (suggestion?: DaDataSuggestion<DaDataParty>) => void;
 }
-export interface DadataСustomInputProps extends StyleAttributes {
+export interface DadataCustomInputProps extends StyleAttributes {
     inputValue?: string;
 }

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

@@ -1,29 +1,88 @@
 export declare const datePickerAppearance: {
+    solid: {
+        datePickerProps: {};
+        inputProps: {
+            borderWidth: string;
+        };
+    };
+    outlined: {
+        datePickerProps: {};
+        inputProps: {
+            fill: string;
+        };
+    };
+    ghost: {
+        datePickerProps: {};
+        inputProps: {
+            fill: string;
+            borderWidth: string;
+        };
+    };
+    full: {
+        datePickerProps: {};
+        inputProps: {};
+    };
+    sizeS: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
+    sizeM: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
+    sizeL: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
     surfacePrimary: {
-        datePicker: {
+        datePickerProps: {
             daySize: string;
             dayTextColor: string;
             dayTextShape: string;
             dayTextSize: string;
+            iconFillHover: string;
             iconItemFill: string;
-            monthTextColor: string;
-            monthTextSize: string;
-            monthTextWeight: string;
-            yearTextColor: string;
-            yearTextSize: string;
-            yearTextWeight: string;
-        };
-        input: {
+            iconShape: string;
+        };
+        inputProps: {
             width: string;
-            size: string;
             fill: string;
             fillHover: string;
             borderColor: string;
             textColor: string;
-            textSize: string;
             caret: string;
+            clearIconItemFill: string;
+            clearIconItemFillHover: string;
+            clearLabelTextColor: string;
+            clearLabelTextColorHover: string;
             placeholderTextColor: string;
-            shape: string;
         };
     };
 };

package/dist/types/components/DatePicker/appearance/datePickerSize.d.ts

@@ -0,0 +1,42 @@
+declare const datePickerSize: {
+    sizeS: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
+    sizeM: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
+    sizeL: {
+        datePickerProps: {
+            daySize: string;
+            dayTextSize: string;
+            iconFillSize: number;
+        };
+        inputProps: {
+            size: string;
+            textSize: string;
+            clearIconSize: number;
+            clearLabelTextSize: string;
+        };
+    };
+};
+export { datePickerSize };

package/dist/types/components/DatePicker/appearance/datePickerStyle.d.ts

@@ -0,0 +1,26 @@
+declare const datePickerStyle: {
+    solid: {
+        datePickerProps: {};
+        inputProps: {
+            borderWidth: string;
+        };
+    };
+    outlined: {
+        datePickerProps: {};
+        inputProps: {
+            fill: string;
+        };
+    };
+    ghost: {
+        datePickerProps: {};
+        inputProps: {
+            fill: string;
+            borderWidth: string;
+        };
+    };
+    full: {
+        datePickerProps: {};
+        inputProps: {};
+    };
+};
+export { datePickerStyle };

package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts

@@ -1,29 +1,26 @@
 declare const datePickerAppearanceSurface: {
     surfacePrimary: {
-        datePicker: {
+        datePickerProps: {
             daySize: string;
             dayTextColor: string;
             dayTextShape: string;
             dayTextSize: string;
+            iconFillHover: string;
             iconItemFill: string;
-            monthTextColor: string;
-            monthTextSize: string;
-            monthTextWeight: string;
-            yearTextColor: string;
-            yearTextSize: string;
-            yearTextWeight: string;
+            iconShape: string;
         };
-        input: {
+        inputProps: {
             width: string;
-            size: string;
             fill: string;
             fillHover: string;
             borderColor: string;
             textColor: string;
-            textSize: string;
             caret: string;
+            clearIconItemFill: string;
+            clearIconItemFillHover: string;
+            clearLabelTextColor: string;
+            clearLabelTextColorHover: string;
             placeholderTextColor: string;
-            shape: string;
         };
     };
 };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { InputMaskConfig } from './InputMask.interface';
+declare const inputMaskConfig: InputMaskConfig;
+declare const InputMask: React.ForwardRefExoticComponent<Omit<InputMaskProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { InputMask, inputMaskConfig };

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

@@ -1 +1 @@
-export { Input, inputMaskConfig } from './Input';
+export { InputMask, inputMaskConfig } from './InputMask';

package/dist/types/components/Pagination/appearance/paginationSurface.d.ts

@@ -4,6 +4,7 @@ declare const paginationAppearanceSurface: {
         fillHover: string;
         gap: string;
         marginPagesDisplayed: number;
+        nextLabel: import("react/jsx-runtime").JSX.Element;
         pageCountDesc: string;
         pageCountDescTextColor: string;
         pageCountDescTextSize: string;
@@ -24,11 +25,13 @@ declare const paginationAppearanceSurface: {
         pageCountDropdownItemSize: string;
         pageCountDropdownItemWidth: string;
         pageCountDropdownShape: string;
+        pageCountInputIcon: any;
         pageCountInputIconColor: string;
         pageCountInputIconFillSize: string;
         pageCountInputTextColor: string;
         pageCountInputTextSize: string;
         pageRangeDisplayed: number;
+        previousLabel: import("react/jsx-runtime").JSX.Element;
     };
 };
 export { paginationAppearanceSurface };

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

@@ -24,6 +24,6 @@ export interface RangeSliderProps extends StyleAttributes {
     value?: number;
     vertical?: boolean;
     width?: WidthProps;
-    onChangeSlider?: () => void;
+    onChangeSlider?: (value: number | number[]) => void;
     set?: string;
 }

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import ScrollContainer from 'react-indiana-drag-scroll';
+import { ScrollContainer } from 'react-indiana-drag-scroll';
 import { BorderColorProps, BorderTypeProps, BorderWidthProps, ElevationProps, FillHoverProps, FillProps, HeightProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface ScrollOnDragProps extends StyleAttributes {

package/dist/types/components/Search/appearance/searchSize.d.ts

@@ -0,0 +1,17 @@
+declare const searchAppearanceSize: {
+    sizeS: {
+        size: string;
+        iconBefore: any;
+        iconBeforeSize: string;
+        iconClear: any;
+        iconClearSize: string;
+    };
+    sizeXS: {
+        size: string;
+        iconBefore: any;
+        iconBeforeSize: string;
+        iconClear: any;
+        iconClearSize: string;
+    };
+};
+export { searchAppearanceSize };

package/dist/types/components/Search/appearance/searchStyle.d.ts

@@ -0,0 +1,14 @@
+declare const searchAppearanceStyle: {
+    full: {};
+    ghost: {
+        fill: string;
+        borderWidth: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    solid: {
+        borderWidth: string;
+    };
+};
+export { searchAppearanceStyle };

package/dist/types/components/Search/appearance/searchSurface.d.ts

@@ -0,0 +1,18 @@
+declare const searchAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { searchAppearanceSurface };

package/dist/types/components/Segmented/appearance/segmentedSize.d.ts

@@ -0,0 +1,15 @@
+declare const segmentedAppearanceSize: {
+    sizeS: {
+        size: string;
+        labelTextSize: string;
+    };
+    sizeM: {
+        size: string;
+        labelTextSize: string;
+    };
+    sizeL: {
+        size: string;
+        labelTextSize: string;
+    };
+};
+export { segmentedAppearanceSize };