@itcase/ui 1.8.0 → 1.8.3

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

@@ -0,0 +1,37 @@
+declare const paginationAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        gap: string;
+        marginPagesDisplayed: number;
+        nextLabel: import("react/jsx-runtime").JSX.Element;
+        pageCountDesc: string;
+        pageCountDescTextColor: string;
+        pageCountDescTextSize: string;
+        pageCountDropdownAlignment: string;
+        pageCountDropdownElevation: number;
+        pageCountDropdownFill: string;
+        pageCountDropdownItemDividerFill: string;
+        pageCountDropdownItemDividerSize: string;
+        pageCountDropdownItemFill: string;
+        pageCountDropdownItemFillActive: string;
+        pageCountDropdownItemFillActiveHover: string;
+        pageCountDropdownItemFillHover: string;
+        pageCountDropdownItemLabelAlign: string;
+        pageCountDropdownItemLabelColor: string;
+        pageCountDropdownItemLabelColorActive: string;
+        pageCountDropdownItemLabelSize: string;
+        pageCountDropdownItemShowDivider: boolean;
+        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 };

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

@@ -0,0 +1,13 @@
+declare const segmentedAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillActive: string;
+        fillActiveHover: string;
+        fillHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        indicatorFill: string;
+        shape: string;
+    };
+};
+export { segmentedAppearanceSurface };

package/dist/types/components/Tab/appearance/tabSize.d.ts

@@ -0,0 +1,10 @@
+declare const tabAppearanceSize: {
+    sizeL: {
+        size: string;
+        labelTextSize: string;
+        dividerSize: string;
+        badgeSize: string;
+        badgeTextSize: string;
+    };
+};
+export { tabAppearanceSize };

package/dist/types/components/Tab/appearance/tabStyle.d.ts

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

package/dist/types/components/Tab/appearance/tabSurface.d.ts

@@ -0,0 +1,51 @@
+declare const tabAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillDisabled: string;
+        labelColor: string;
+        labelColorActive: string;
+        labelColorDisabled: string;
+        dividerFillDisabled: string;
+        dividerFill: string;
+        dividerFillActive: string;
+        dividerFillHover: string;
+        badgeAppearance: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        fillDisabled: string;
+        fillHover: string;
+        labelColor: string;
+        labelColorActive: string;
+        labelColorDisabled: string;
+        dividerFillDisabled: string;
+        dividerFill: string;
+        dividerFillActive: string;
+        dividerFillHover: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillDisabled: string;
+        fillHover: string;
+        labelColor: string;
+        labelColorActive: string;
+        labelColorDisabled: string;
+        dividerFillDisabled: string;
+        dividerFill: string;
+        dividerFillActive: string;
+        dividerFillHover: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        fillDisabled: string;
+        fillHover: string;
+        labelColor: string;
+        labelColorActive: string;
+        labelColorDisabled: string;
+        dividerFillDisabled: string;
+        dividerFill: string;
+        dividerFillActive: string;
+        dividerFillHover: string;
+    };
+};
+export { tabAppearanceSurface };

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

@@ -1,3 +1,2 @@
-import { TextareaAppearanceType, TextareaStateType } from 'components/Textarea/Textarea.interface';
+import { TextareaAppearanceType } from './Textarea.interface';
 export declare const textareaAppearance: TextareaAppearanceType;
-export declare const textareaState: TextareaStateType;

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

@@ -1,4 +1,4 @@
-import { AppearanceKeysDefault, BorderColorHoverProps, BorderColorProps, FillProps, ItemColorProps, ShapeProps, SizeProps, StateKeysDefault, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, BorderColorHoverProps, BorderColorProps, FillProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface TextareaThemeColor {
     [key: number | string | symbol]: any;
@@ -15,19 +15,13 @@ export interface TextareaThemeColor {
     width?: WidthProps;
 }
 type AppearanceKeys = AppearanceKeysDefault & {};
-type stateKeysType = StateKeysDefault & {};
 export type TextareaAppearanceType = {
     [key in AppearanceKeys]?: TextareaThemeColor;
 };
-export type TextareaStateType = {
-    [key in stateKeysType]?: TextareaThemeColor;
-};
 export interface TextareaConfig {
     [key: number | string | symbol]: any;
     appearance: TextareaAppearanceType | undefined;
-    state: TextareaStateType | undefined;
     setAppearance: (newComponent: TextareaAppearanceType) => void;
-    setState: (newComponent: TextareaStateType) => void;
 }
 export interface TextareaProps extends TextareaThemeColor, StyleAttributes {
     id?: string;
@@ -36,7 +30,6 @@ export interface TextareaProps extends TextareaThemeColor, StyleAttributes {
     className?: string;
     disabled?: boolean;
     placeholder?: string;
-    state?: stateKeysType;
     value?: string;
     onBlur?: () => void;
     onChange?: () => void;

package/dist/types/components/Textarea/appearance/textareaDefault.d.ts

@@ -0,0 +1,18 @@
+declare const textareaAppearanceDefault: {
+    defaultPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+    };
+    defaultSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { textareaAppearanceDefault };

package/dist/types/components/Textarea/appearance/textareaDisabled.d.ts

@@ -0,0 +1,20 @@
+declare const textareaAppearanceDisabled: {
+    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 { textareaAppearanceDisabled };

package/dist/types/components/Textarea/appearance/textareaError.d.ts

@@ -0,0 +1,20 @@
+declare const textareaAppearanceError: {
+    errorPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    errorSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { textareaAppearanceError };

package/dist/types/components/Textarea/appearance/textareaRequire.d.ts

@@ -0,0 +1,20 @@
+declare const textareaAppearanceRequire: {
+    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 { textareaAppearanceRequire };

package/dist/types/components/Textarea/appearance/textareaSize.d.ts

@@ -0,0 +1,31 @@
+declare const textareaAppearanceSize: {
+    sizeXXL: {
+        size: string;
+        textSize: string;
+    };
+    sizeXL: {
+        size: string;
+        textSize: string;
+    };
+    sizeL: {
+        size: string;
+        textSize: string;
+    };
+    sizeM: {
+        size: string;
+        textSize: string;
+    };
+    sizeS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        textSize: string;
+    };
+};
+export { textareaAppearanceSize };

package/dist/types/components/Textarea/appearance/textareaStyle.d.ts

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

package/dist/types/components/Textarea/appearance/textareaSuccess.d.ts

@@ -0,0 +1,20 @@
+declare const textareaAppearanceSuccess: {
+    successPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    successSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { textareaAppearanceSuccess };

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

@@ -1,2 +1,2 @@
 export { Textarea, textareaConfig } from './Textarea';
-export { textareaAppearance, textareaState } from './Textarea.appearance';
+export { textareaAppearance } from './Textarea.appearance';

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

@@ -1,10 +1,11 @@
 import { CSSProperties, ReactNode } from 'react';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+type Codecs = 'mp4' | 'ogv' | 'webm';
 export interface VideoProps extends StyleAttributes {
     id?: string;
     children?: ReactNode;
     className?: string;
-    codecs: string;
+    codecs?: Codecs;
     mp4?: string;
     ogv?: string;
     position?: string;
@@ -13,3 +14,4 @@ export interface VideoProps extends StyleAttributes {
     type?: string;
     webm?: string;
 }
+export {};

package/dist/types/components/Video/stories/mocks/videoSources.d.ts

@@ -0,0 +1,6 @@
+export declare const videoSources: {
+    mp4: string;
+    ogv: string;
+    poster: string;
+    webm: string;
+};

package/dist/types/context/Notifications.d.ts

@@ -1,9 +1,10 @@
-import type { NotificationsProviderProps } from './Notifications.interface';
+import type { Id, SimpleCallback } from '@itcase/types';
+import type { CreatedNotification, NotificationsProviderProps } from './Notifications.interface';
 declare function NotificationsProvider(props: NotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useNotifications(): never[];
 declare function useNotificationsAPI(): {
-    hideNotifications: () => void;
-    showNotification: () => void;
+    hideNotifications: (targetId: Id) => void;
+    showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
         info: string;

package/dist/types/context/UIContext.d.ts

@@ -9,8 +9,8 @@ interface iUIProvider {
 }
 declare const UIProvider: import("react").NamedExoticComponent<iUIProvider>;
 declare function useUserDeviceContext(): {
-    isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;
+    isDesktop: boolean;
 };
 export { UIProvider, useUserDeviceContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -96,21 +96,21 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@itcase/common": "^1.2.22",
-    "@itcase/config": "^1.0.40",
-    "@itcase/icons": "^1.0.29",
+    "@itcase/common": "^1.2.23",
+    "@itcase/config": "^1.0.46",
+    "@itcase/icons": "^1.0.31",
     "@itcase/storybook-config": "^1.1.9",
-    "@itcase/tokens-am": "^1.1.3",
-    "@itcase/tokens-baikal": "^1.1.3",
-    "@itcase/types": "^1.0.2",
+    "@itcase/tokens-am": "^1.1.7",
+    "@itcase/tokens-baikal": "^1.1.7",
+    "@itcase/types": "^1.0.3",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "framer-motion": "^12.9.1",
+    "framer-motion": "^12.12.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.9.1",
+    "motion": "^12.12.1",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -118,7 +118,7 @@
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
-    "react-modal-sheet": "^4.0.1",
+    "react-modal-sheet": "^4.4.0",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.3.0",
@@ -126,15 +126,15 @@
     "react-scroll": "^1.9.3",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.10.1",
-    "swiper": "^11.2.6",
+    "swiper": "^11.2.7",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@itcase/lint": "^1.1.9",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -149,7 +149,7 @@
     "@semantic-release/release-notes-generator": "14.0.3",
     "@svgr/webpack": "^8.1.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.16",
+    "@types/lodash": "^4.17.17",
     "@types/react": "^19",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^19.0.2",
@@ -159,23 +159,23 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.25.1",
+    "conventional-changelog-conventionalcommits": "^9.0.0",
+    "eslint": "9.27.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.1",
-    "npm": "^11.3.0",
+    "lint-staged": "^16.0.0",
+    "npm": "^11.4.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "react-docgen-typescript": "^2.2.2",
     "react-svg": "^16.3.0",
-    "rollup": "^4.40.0",
+    "rollup": "^4.41.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
-    "semantic-release": "^24.2.3",
-    "storybook": "^8.6.12",
-    "stylelint": "^16.19.0",
+    "semantic-release": "^24.2.4",
+    "storybook": "^8.6.14",
+    "stylelint": "^16.19.1",
     "typescript": "^5.8.3"
   }
 }

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

@@ -1,33 +0,0 @@
-.fill {
-  &_disabled {
-    /* maybe it's deprecated */
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover {
-          &-$(color) {
-            &:hover {
-              background: var(--color-$(type)-$(color));
-            }
-          }
-        }
-      }
-    }
-    @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) {
-        &-primary {
-          background: var(--color-$(type)-primary);
-        }
-      }
-    }
-  }
-}

package/dist/stories/Avatar.mdx

@@ -1,23 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks'
-
-import * as AvatarStories from '../stories/Avatar.stories.tsx'
-
-<Meta title="Atoms / Badge" of={AvatarStories} />
-
-# Avatar
-
-## Image
-
-<Canvas sourceState="shown" of={AvatarStories.Image} />
-
-## ImageWithIcon
-
-<Canvas sourceState="shown" of={AvatarStories.ImageWithIcon} />
-
-## Text
-
-<Canvas sourceState="shown" of={AvatarStories.Text} />
-
-## TextWithIcon
-
-<Canvas sourceState="shown" of={AvatarStories.TextWithIcon} />

package/dist/stories/Badge.mdx

@@ -1,13 +0,0 @@
-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

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