@itcase/ui 1.8.19 → 1.8.21

package/dist/stories/useMediaQueries.mdx

@@ -23,20 +23,45 @@ import { Meta } from '@storybook/blocks'
     <td>userDevice</td>
     <td>UserDeviceState</td>
     <td>`{}`</td>
-    <td>Булевые флаги устройства пользователя</td>
+    <td>`Boolean` флаги устройства пользователя</td>
   </tr>
   </tbody>
 </table>
 
 ### Возвращает объект
 
-`deviceTypes` - который является объектом в котором находятся все флаги
+`deviceTypes` - который является объектом в котором находятся все `boolean` флаги
 
-- `isMobile` — 
-- `isMobileHuge` —
-- `isTablet` —
-- `isDesktop` — 
-- `isDesktopMega —`
+<table>
+  <thead>
+  <tr>
+    <th>Флаг</th>
+    <th>Диапазон(px)</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>`isMobile`</td>
+    <td>`≥ 240px и ≤ 768px`</td>
+  </tr>
+  <tr>
+    <td>`isMobileHuge`</td>
+    <td>`≥ 640px и ≤ 768px`</td>
+  </tr>
+  <tr>
+    <td>`isTablet`</td>
+    <td>`≥ 768px и ≤ 960px`</td>
+  </tr>
+  <tr>
+    <td>`isDesktop`</td>
+    <td>`≥ 960px и ≤ 1920px`</td>
+  </tr>
+  <tr>
+    <td>`isDesktopMega`</td>
+    <td>`≥ 2560px`</td>
+  </tr>
+  </tbody>
+</table>
 
 ### Использование
 

package/dist/stories/useStyles.mdx

@@ -4,15 +4,63 @@ import { Meta } from '@storybook/blocks'
 
 # `useStyles`
 
-Хук конвертирует `props` компонента в `inline` стили.
+Хук конвертирует props компонента в inline стили.
 
 Важно учитывать приоритет при котором будут применяться стили:
 
-1. Сначала используется значение из props, соответствующее текущему устройству (Mobile например)
+1. Сначала используется значение из props, соответствующее текущему устройству
+- Передали
+
+```jsx
+<Component textAlignMobile="center" />
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'center' }} />
+```
+
 2. Если такого нет — используется значение из props без учёта устройства
+- Передали
+
+```jsx
+<Component textAlign="right" />
+```
+
+ - Получили
+
+```jsx
+<Component style={{ textAlign: 'right' }} />
+```
+
 3. Если и его нет — берётся значение из appearance-конфига для текущего устройства
+
+- Передали
+
+```js
+{
+  textAlignMobile: 'left'
+}
+```
+
+- Получили
+
+```jsx
+<Component style={{ textAlign: 'left' }} />
+```
+
 4. И в последнюю очередь — значение из appearance-конфига без учёта устройства
 
+- Передали
+```jsx
+textAlign: 'justify'
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'justify' }} />
+```
+
 ## API
 
 ### Параметры

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

@@ -0,0 +1,3 @@
+import { AvatarStackProps } from './AvatarStack.interface';
+declare function AvatarStack(props: AvatarStackProps): any;
+export { AvatarStack };

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

@@ -0,0 +1,9 @@
+import { SizePXProps, TextSizeProps } from '@itcase/ui/types';
+interface AvatarStackProps {
+    avatarSize: SizePXProps;
+    showCountUsers?: number;
+    textSize?: TextSizeProps;
+    userFirstName?: string;
+    userLastName?: string;
+}
+export type { AvatarStackProps };

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

@@ -0,0 +1,2 @@
+import { AvatarStack } from './AvatarStack';
+export { AvatarStack };

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

@@ -7,5 +7,13 @@ declare const buttonAppearanceDanger: {
         loaderFill: string;
         loaderItemFill: string;
     };
+    dangerPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
 };
 export { buttonAppearanceDanger };

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

@@ -0,0 +1,5 @@
+export declare const cookiesWarningAppearance: {
+    dev: {
+        fill: string;
+    };
+};

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

@@ -1,2 +1,3 @@
 import { CookiesWarning } from './CookiesWarning';
-export { CookiesWarning };
+import { cookiesWarningAppearance } from './CookiesWarning.appearance';
+export { CookiesWarning, cookiesWarningAppearance };

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -0,0 +1,25 @@
+declare const drawerAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { drawerAppearanceSurface };

package/dist/types/components/Dropdown/appearance/dropdownAccent.d.ts

@@ -1,8 +1,4 @@
 declare const dropdownAppearanceAccent: {
-    accent: {
-        fill: string;
-        fillHover: string;
-    };
     accentPrimary: {
         fill: string;
         fillHover: string;
@@ -14,8 +10,6 @@ declare const dropdownAppearanceAccent: {
         labelTextColor: string;
         labelTextColorHover: string;
         borderColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
     };
 };
 export { dropdownAppearanceAccent };

package/dist/types/components/Dropdown/appearance/dropdownSurface.d.ts

@@ -3,6 +3,11 @@ declare const dropdownAppearanceSurface: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        labelTextColorActive: string;
+        labelTextColorActiveHover: string;
+        labelTextColorHover: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
     };
     surfaceQuaternary: {
         fill: string;

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

@@ -1,3 +1,2 @@
-import { InputAppearance, InputState } from './InputPassword.interface';
-export declare const InputPasswordAppearance: InputAppearance;
-export declare const InputPasswordState: InputState;
+import { InputPasswordAppearanceType } from './InputPassword.interface';
+export declare const inputPasswordAppearance: InputPasswordAppearanceType;

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

@@ -1,4 +1,4 @@
-import { AppearanceKeysDefault, BorderColorProps, BorderWidthProps, FillProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, StateKeysDefault, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, BorderColorProps, BorderWidthProps, FillProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface InputThemeColor {
     [key: number | string | symbol]: any;
@@ -15,19 +15,13 @@ export interface InputThemeColor {
     width?: WidthProps;
 }
 type AppearanceKeys = AppearanceKeysDefault & {};
-type stateKeysType = StateKeysDefault & {};
-export type InputState = {
-    [key in stateKeysType]?: InputThemeColor;
-};
-export type InputAppearance = {
+export type InputPasswordAppearanceType = {
     [key in AppearanceKeys]?: InputThemeColor;
 };
 export interface InputPasswordConfig {
     [key: number | string | symbol]: any;
-    appearance: InputAppearance | undefined;
-    state: InputState | undefined;
-    setAppearance: (newComponent: InputAppearance) => void;
-    setState: (newComponent: InputState) => void;
+    appearance: InputPasswordAppearanceType | undefined;
+    setAppearance: (newComponent: InputPasswordAppearanceType) => void;
 }
 export interface InputPasswordProps extends InputThemeColor, StyleAttributes {
     id?: number | string;
@@ -44,7 +38,6 @@ export interface InputPasswordProps extends InputThemeColor, StyleAttributes {
     imageRevealableHide?: string;
     imageRevealableShow?: string;
     placeholder?: string;
-    state?: stateKeysType;
     value?: string;
     isRevealable?: boolean;
     onBlur?: () => void;

package/dist/types/components/InputPassword/appearance/inputPasswordAccent.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceAccent: {
+    accent: {
+        fill: string;
+        fillHover: string;
+    };
+    accentPrimary: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+    };
+    accentSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceAccent };

package/dist/types/components/InputPassword/appearance/inputPasswordDanger.d.ts

@@ -0,0 +1,7 @@
+declare const inputPasswordAppearanceDanger: {
+    danger: {
+        fill: string;
+        fillHover: string;
+    };
+};
+export { inputPasswordAppearanceDanger };

package/dist/types/components/InputPassword/appearance/inputPasswordDisabled.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceDisabled: {
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { inputPasswordAppearanceDisabled };

package/dist/types/components/InputPassword/appearance/inputPasswordError.d.ts

@@ -0,0 +1,11 @@
+declare const inputPasswordAppearanceError: {
+    error: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceError };

package/dist/types/components/InputPassword/appearance/inputPasswordInfo.d.ts

@@ -0,0 +1,21 @@
+declare const inputPasswordAppearanceInfo: {
+    info: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    infoSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceInfo };

package/dist/types/components/InputPassword/appearance/inputPasswordPrimary.d.ts

@@ -0,0 +1,8 @@
+declare const inputPasswordAppearancePrimary: {
+    primary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { inputPasswordAppearancePrimary };

package/dist/types/components/InputPassword/appearance/inputPasswordRequire.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceRequire: {
+    requirePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    requireSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { inputPasswordAppearanceRequire };

package/dist/types/components/InputPassword/appearance/inputPasswordSecondary.d.ts

@@ -0,0 +1,8 @@
+declare const inputPasswordAppearanceSecondary: {
+    secondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { inputPasswordAppearanceSecondary };

package/dist/types/components/InputPassword/appearance/inputPasswordSize.d.ts

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

package/dist/types/components/InputPassword/appearance/inputPasswordStyle.d.ts

@@ -0,0 +1,16 @@
+declare const inputPasswordAppearanceStyle: {
+    full: {
+        borderColor: string;
+    };
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    solid: {
+        borderColor: string;
+    };
+};
+export { inputPasswordAppearanceStyle };

package/dist/types/components/InputPassword/appearance/inputPasswordSuccess.d.ts

@@ -0,0 +1,11 @@
+declare const inputPasswordAppearanceSuccess: {
+    success: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceSuccess };

package/dist/types/components/InputPassword/appearance/inputPasswordSurface.d.ts

@@ -0,0 +1,25 @@
+declare const inputPasswordAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { inputPasswordAppearanceSurface };

package/dist/types/components/InputPassword/appearance/inputPasswordWarning.d.ts

@@ -0,0 +1,11 @@
+declare const inputPasswordAppearanceWarning: {
+    warning: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceWarning };

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

@@ -1,2 +1,2 @@
-export { InputPasswordAppearance, InputPasswordState } from './InputPassword.appearance';
+export { inputPasswordAppearance } from './InputPassword.appearance';
 export { InputPassword, inputPasswordConfig } from './InputPassword';

package/dist/types/components/Link/appearance/linkAccent.d.ts

@@ -0,0 +1,20 @@
+declare const linkAppearanceAccent: {
+    accent: {
+        fill: string;
+        fillHover: string;
+    };
+    accentPrimary: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+    };
+    accentSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderItemFill: string;
+    };
+};
+export { linkAppearanceAccent };

package/dist/types/components/Link/appearance/linkDanger.d.ts

@@ -0,0 +1,7 @@
+declare const linkAppearanceDanger: {
+    danger: {
+        fill: string;
+        fillHover: string;
+    };
+};
+export { linkAppearanceDanger };

package/dist/types/components/Link/appearance/linkDisabled.d.ts

@@ -0,0 +1,20 @@
+declare const linkAppearanceDisabled: {
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { linkAppearanceDisabled };

package/dist/types/components/Link/appearance/linkError.d.ts

@@ -0,0 +1,11 @@
+declare const linkAppearanceError: {
+    error: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { linkAppearanceError };

package/dist/types/components/Link/appearance/linkInfo.d.ts

@@ -0,0 +1,21 @@
+declare const linkAppearanceInfo: {
+    info: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    infoSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { linkAppearanceInfo };

package/dist/types/components/Link/appearance/linkPrimary.d.ts

@@ -0,0 +1,8 @@
+declare const linkAppearancePrimary: {
+    primary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { linkAppearancePrimary };

package/dist/types/components/Link/appearance/linkRequire.d.ts

@@ -0,0 +1,20 @@
+declare const linkAppearanceRequire: {
+    requirePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    requireSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { linkAppearanceRequire };

package/dist/types/components/Link/appearance/linkSecondary.d.ts

@@ -0,0 +1,8 @@
+declare const linkAppearanceSecondary: {
+    secondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { linkAppearanceSecondary };