@itcase/ui 1.8.0 → 1.8.1

package/dist/css/components/Pagination/Pagination.css

@@ -5,18 +5,21 @@
   align-items: center;
   &__container {
     padding: 0;
-    margin: 60px 0;
     display: flex;
     list-style: none;
-    gap: 16px;
+    gap: 12px;
   }
   &__count {
     display: flex;
     align-items: center;
+    gap: 8px;
+    &-text {
+      color: var(--surface-text-primary);
+      display: block;
+    }
   }
   &__input {
     background: var(--color-surface-primary);
-    padding: 3px 7px;
     border: solid 1px
       var(--pagination-input-color, --color-surface-border-tertiary);
     border-radius: 8px;
@@ -39,12 +42,11 @@
 }
 .pagination {
   &__container {
-    margin: var(--paginator-margin, initial);
+    margin: var(--paginator-margin);
     ^&__item {
-      min-width: var(--paginator-item-width);
-      min-height: var(--paginator-item-height);
+      width: var(--paginator-item-width);
+      height: var(--paginator-item-height);      
       background: var(--paginator-item-default-fill);
-      padding: 0 8px;
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -70,7 +72,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-l;
+        @mixin text-m;
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -1,11 +1,10 @@
 .pagination {
   &__container {
-    margin: var(--paginator-margin, initial);
+    margin: var(--paginator-margin);
     ^&__item {
-      min-width: var(--paginator-item-width);
-      min-height: var(--paginator-item-height);
+      width: var(--paginator-item-width);
+      height: var(--paginator-item-height);      
       background: var(--paginator-item-default-fill);
-      padding: 0 8px;
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -31,7 +30,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-l;
+        @mixin text-m;
       }
     }
   }

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

@@ -3,6 +3,20 @@
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, disabled, gradient {
       &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
+            &-$(color) {
+              background: var(--color-$(type)-item-$(color));
+              @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)-item-$(color)-$(alpha));
+                }
+              }
+            }
+          }
+        }
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, active {
           &-$(color) {

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

@@ -4,6 +4,56 @@
       @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
         senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color));
+                }
+                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                  65, 75, 80, 85, 90, 95 {
+                  &$(alpha) {
+                    &:hover {
+                      background: var(--color-$(type)-item-$(color)-$(alpha));
+                    }
+                  }
+                }
+                &-hover {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-hover);
+                  }
+                  @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                    65, 75, 80, 85, 90, 95 {
+                    &$(alpha) {
+                      &:hover {
+                        background: var(
+                          --color-$(type)-item-$(color)-$(alpha)-hover
+                        );
+                      }
+                    }
+                  }
+                  &-active {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-active-hover
+                      );
+                    }
+                    @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55,
+                      60, 65, 75, 80, 85, 90, 95 {
+                      &$(alpha) {
+                        &:hover {
+                          background: var(
+                            --color-$(type)-item-$(color)-$(alpha)-active-hover
+                          );
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
           @each $color in primary, secondary, tertiary, quaternary {
             &-$(color) {
               &:hover {

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

@@ -3,6 +3,39 @@
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
       senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-item-$(color));
+              }
+              @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
+                75, 80, 85, 90, 95 {
+                &$(alpha) {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-$(alpha));
+                  }
+                }
+              }
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-hover);
+                }
+                @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60,
+                  65, 75, 80, 85, 90, 95 {
+                  &$(alpha) {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-$(alpha)-hover
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
         @each $color in primary, secondary, tertiary, quaternary, quinary,
           senary, accent, disabled, hover {
           &-$(color) {

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

@@ -0,0 +1,11 @@
+declare const choiceAppearanceAccent: {
+    accentPrimary: {
+        fill: string;
+        fillActive: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+        borderColor: string;
+    };
+};
+export { choiceAppearanceAccent };

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

@@ -0,0 +1,22 @@
+declare const choiceAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemActiveHover: string;
+        fillItemHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        labelTextSize: string;
+    };
+};
+export { choiceAppearanceSurface };

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

@@ -1,2 +1,29 @@
-import { DatePickerAppearanceType } from './DatePicker.interface';
-export declare const datePickerAppearance: DatePickerAppearanceType;
+export declare const datePickerAppearance: {
+    surfacePrimary: {
+        datePicker: {
+            daySize: string;
+            dayTextColor: string;
+            dayTextShape: string;
+            dayTextSize: string;
+            iconItemFill: string;
+            monthTextColor: string;
+            monthTextSize: string;
+            monthTextWeight: string;
+            yearTextColor: string;
+            yearTextSize: string;
+            yearTextWeight: string;
+        };
+        input: {
+            width: string;
+            size: string;
+            fill: string;
+            fillHover: string;
+            borderColor: string;
+            textColor: string;
+            textSize: string;
+            caret: string;
+            placeholderTextColor: string;
+            shape: string;
+        };
+    };
+};

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

@@ -0,0 +1,30 @@
+declare const datePickerAppearanceSurface: {
+    surfacePrimary: {
+        datePicker: {
+            daySize: string;
+            dayTextColor: string;
+            dayTextShape: string;
+            dayTextSize: string;
+            iconItemFill: string;
+            monthTextColor: string;
+            monthTextSize: string;
+            monthTextWeight: string;
+            yearTextColor: string;
+            yearTextSize: string;
+            yearTextWeight: string;
+        };
+        input: {
+            width: string;
+            size: string;
+            fill: string;
+            fillHover: string;
+            borderColor: string;
+            textColor: string;
+            textSize: string;
+            caret: string;
+            placeholderTextColor: string;
+            shape: string;
+        };
+    };
+};
+export { datePickerAppearanceSurface };

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

@@ -0,0 +1,34 @@
+declare const paginationAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        gap: string;
+        marginPagesDisplayed: number;
+        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;
+        pageCountInputIconColor: string;
+        pageCountInputIconFillSize: string;
+        pageCountInputTextColor: string;
+        pageCountInputTextSize: string;
+        pageRangeDisplayed: number;
+    };
+};
+export { paginationAppearanceSurface };

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

@@ -1,9 +1,10 @@
-import type { NotificationsProviderProps } from './Notifications.interface';
+import type { 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;
+    showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
         info: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "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/common": "^1.2.23",
+    "@itcase/config": "^1.0.41",
     "@itcase/icons": "^1.0.29",
     "@itcase/storybook-config": "^1.1.9",
     "@itcase/tokens-am": "^1.1.3",
     "@itcase/tokens-baikal": "^1.1.3",
-    "@itcase/types": "^1.0.2",
+    "@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.11.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.9.1",
+    "motion": "^12.11.0",
     "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",
@@ -130,11 +130,11 @@
     "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",
@@ -160,22 +160,22 @@
     "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",
+    "eslint": "9.26.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "npm": "^11.3.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.40.2",
     "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",
+    "stylelint": "^16.19.1",
     "typescript": "^5.8.3"
   }
 }