@itcase/ui 1.8.39 → 1.8.41

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

@@ -30,8 +30,6 @@
   @each $size in xxl, xl, l, m, s, xs, xxs {
     &_size_$(size) {
       ^&__input {
-        min-width: var(--pagination-input-size-$(size)-min-width);
-        min-height: var(--pagination-input-size-$(size)-min-height);
         padding: var(--pagination-input-size-$(size)-padding);
         gap: var(--pagination-input-size-$(size)-gap);
       }
@@ -48,13 +46,34 @@
     }
   }
 }
+.pagination {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: paginationSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes paginationSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .pagination {
   &__container {
     margin: var(--paginator-margin);
     ^&__item {
-      width: var(--paginator-item-width);
-      height: var(--paginator-item-height);
-      background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -63,9 +82,6 @@
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;
-      &:hover {
-        background: var(--paginator-item-default-fill-hover);
-      }
       &_break {
         display: flex;
         ^&-link {
@@ -76,31 +92,37 @@
       &-link {
         width: 100%;
         height: 100%;
-        color: var(--paginator-item-default-text);
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-m;
-      }
-    }
-  }
-}
-.pagination {
-  &__item {
-    border: solid 1px var(--paginator-item-active-border);
-    &&_state {
-      &_active {
-        background: var(--paginator-item-active-fill);
-        &:hover {
-          background: var(--paginator-item-active-fill-hover);
-        }
-        ^^&-link {
-          color: var(--paginator-item-active-text);
+
+        &_size {
+          @each $size in xs, s, m, l {
+            &_$(size) {
+              @mixin text-$(size);
+            }
+          }
         }
       }
     }
   }
 }
+/* .pagination { */
+/*  &__item { */
+/*    border: solid 1px var(--paginator-item-active-border); */
+/*    &&_state { */
+/*      &_active { */
+/*        background: var(--paginator-item-active-fill); */
+/*        &:hover { */
+/*          background: var(--paginator-item-active-fill-hover); */
+/*        } */
+/*        ^^&-link { */
+/*          color: var(--paginator-item-active-text); */
+/*        } */
+/*      } */
+/*    } */
+/*  } */
+/* } */
 .pagination {
   &__item {
     &&_state {
@@ -121,11 +143,34 @@
     }
   }
 }
+.pagination__item {
+  @each $size in l, m, s, xs {
+    &_size_$(size) {
+      width: var(--paginator-item-$(size)-width) !important;
+      height: var(--paginator-item-$(size)-height) !important;
+    }
+  }
+}
 :root {
   --paginator-margin: 0;
 
-  --paginator-item-width: 32px;
-  --paginator-item-height: 32px;
+  --paginator-item-l-width: 40px;
+  --paginator-item-l-height: 40px;
+
+  --paginator-item-m-width: 32px;
+  --paginator-item-m-height: 32px;
+
+  --paginator-item-s-width: 24px;
+  --paginator-item-s-height: 24px;
+
+  --paginator-item-xs-width: 20px;
+  --paginator-item-xs-height: 20px;
+
+  --paginator-item-l-padding: 0 12px;
+  --paginator-item-m-padding: 0 12px;
+  --paginator-item-s-padding: 0 8px;
+  --paginator-item-xs-padding: 0 6px;
+
   --paginator-item-border: none;
   --paginator-item-border-radius: 50%;
   --pagination-input-color: none;
@@ -151,8 +196,15 @@
   --paginator-item-disabled-text: var(--color-surface-text-primary);
   --paginator-item-disabled-icon: var(--color-surface-item-disabled);
 
-  --pagination-input-size-m-padding: 0 12px;
+  --pagination-input-size-l-padding: 10px 12px;
+  --pagination-input-size-l-gap: 4px;
+
+  --pagination-input-size-m-padding: 7px 12px;
   --pagination-input-size-m-gap: 4px;
-  --pagination-input-size-m-min-height: 32px;
-  --pagination-input-size-m-min-width: 64px;
+
+  --pagination-input-size-s-padding: 4px 8px;
+  --pagination-input-size-s-gap: 2px;
+
+  --pagination-input-size-xs-padding: 2px 6px;
+  --pagination-input-size-xs-gap: 2px;
 }

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

@@ -2,9 +2,6 @@
   &__container {
     margin: var(--paginator-margin);
     ^&__item {
-      width: var(--paginator-item-width);
-      height: var(--paginator-item-height);
-      background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -13,9 +10,6 @@
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;
-      &:hover {
-        background: var(--paginator-item-default-fill-hover);
-      }
       &_break {
         display: flex;
         ^&-link {
@@ -26,11 +20,17 @@
       &-link {
         width: 100%;
         height: 100%;
-        color: var(--paginator-item-default-text);
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-m;
+
+        &_size {
+          @each $size in xs, s, m, l {
+            &_$(size) {
+              @mixin text-$(size);
+            }
+          }
+        }
       }
     }
   }

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

@@ -0,0 +1,8 @@
+.pagination__item {
+  @each $size in l, m, s, xs {
+    &_size_$(size) {
+      width: var(--paginator-item-$(size)-width) !important;
+      height: var(--paginator-item-$(size)-height) !important;
+    }
+  }
+}

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

@@ -1,16 +1,16 @@
-.pagination {
-  &__item {
-    border: solid 1px var(--paginator-item-active-border);
-    &&_state {
-      &_active {
-        background: var(--paginator-item-active-fill);
-        &:hover {
-          background: var(--paginator-item-active-fill-hover);
-        }
-        ^^&-link {
-          color: var(--paginator-item-active-text);
-        }
-      }
-    }
-  }
-}
+/* .pagination { */
+/*  &__item { */
+/*    border: solid 1px var(--paginator-item-active-border); */
+/*    &&_state { */
+/*      &_active { */
+/*        background: var(--paginator-item-active-fill); */
+/*        &:hover { */
+/*          background: var(--paginator-item-active-fill-hover); */
+/*        } */
+/*        ^^&-link { */
+/*          color: var(--paginator-item-active-text); */
+/*        } */
+/*      } */
+/*    } */
+/*  } */
+/* } */

package/dist/css/components/Radio/Radio.css

@@ -4,8 +4,6 @@
   grid-template-rows: auto auto;
   column-gap: 4px;
   &__item {
-    min-width: 16px;
-    min-height: 16px;
     font-size: 0;
     line-height: 0;
     margin: 2px 0 0 0;
@@ -15,8 +13,7 @@
     cursor: pointer;
     grid-row-start: span 2;
     ^&__input {
-      width: 100%;
-      height: 100%;
+      inset: 0;
       font-size: 0;
       line-height: 0;
       margin: 0;
@@ -54,8 +51,50 @@
     }
   }
 }
-
+.radio {
+  @each $size in m, xs, xxs {
+    &_size_$(size) {
+      ^&__item {
+        min-width: var(--radio-$(size)-min-width);
+        min-height: var(--radio-$(size)-min-height);
+      }
+    }
+  }
+}
+.radio {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: radioSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes radioSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
+  --radio-m-min-width: 16px;
+  --radio-m-min-height: 16px;
+
+  --radio-xs-min-width: 12px;
+  --radio-xs-min-height: 12px;
+
+  --radio-xxs-min-width: 10px;
+  --radio-xxs-min-height: 10px;
+
   --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);
   --radio-shape-rounded: 0;

package/dist/css/components/Select/Select.css

@@ -171,6 +171,7 @@
         color: var(--color-surface-text-primary);
       }
       ^^&__dropdown-indicator {
+        display: flex;
       }
     }
   }

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -14,6 +14,7 @@
         color: var(--color-surface-text-primary);
       }
       ^^&__dropdown-indicator {
+        display: flex;
       }
     }
   }

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.2.8
+ * Swiper 11.2.10
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: May 23, 2025
+ * Released on: June 28, 2025
  */
 
 /* FONT_START */

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

@@ -3,7 +3,8 @@
     background-color: transparent;
   }
   @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    error, success, warning, info, danger, gradient, disabled, active, hover,
+    inverse {
     @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
       hover, inverse {
       /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */

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

@@ -14,6 +14,9 @@
           &-$(color) {
             background: var(--color-$(type)-fill-$(color));
           }
+          &-$(color)-active {
+            background: var(--color-$(type)-fill-active-$(color));
+          }
         }
       }
     }

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

@@ -69,6 +69,13 @@
                 }
               }
             }
+            &-hover {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-fill-hover-$(color));
+                }
+              }
+            }
           }
 
           /* } */

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

@@ -1,3 +1,5 @@
+/* fill_hover_accent-hover-secondary */
+/* --color-accent-fill-hover-primary */
 .fill {
   &_hover {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
@@ -42,19 +44,13 @@
               }
             }
           }
-
-          /*
-          &-primary {
-            &:hover {
-              background: var(--color-$(type)-fill-primary);
-            }
-            &-hover {
+          &-hover {
+            &-$(color) {
               &:hover {
-                background: var(--color-$(type)-fill-primary-hover);
+                background: var(--color-$(type)-fill-hover-$(color));
               }
             }
           }
-          */
         }
 
         /* } */

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -0,0 +1,27 @@
+import { _ as __assign } from '../../tslib.es6_es_Bwu1Cn-t.js';
+import { useMemo } from 'react';
+
+var useAppearanceConfig = function (appearance, componentConfig, isDisabled) {
+    var appearanceConfig = useMemo(function () {
+        var _a, _b;
+        if (appearance) {
+            var appearanceProps = appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+                var _a;
+                return (__assign(__assign({}, resultConfig), (_a = componentConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+            }, {});
+            if (isDisabled && ((_a = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                Object.assign(appearanceProps, componentConfig.appearance.disabled);
+            }
+            return appearanceProps;
+        }
+        if (isDisabled) {
+            return (_b = componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabled;
+        }
+        return {};
+    }, [appearance, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance, isDisabled]);
+    return {
+        appearanceConfig: appearanceConfig,
+    };
+};
+
+export { useAppearanceConfig };

package/dist/hooks/useAppearanceConfig.js

@@ -0,0 +1,3 @@
+export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
+import 'react';

package/dist/stories/ChipsOverview.mdx

@@ -9,41 +9,41 @@ import * as ChipsStories from '../stories/ChipsDefault.stories'
 `Chips` — это компактная альтернатива чекбоксам. Они позволяют пользователям выбирать несколько вариантов одновременно и в основном применяются на мобильных устройствах для переключений фильтров.
 Данный компонент может быть использован в компоненте множественного выбора (SelectMulti).
 
-<Canvas sourceState="shown"of={ChipsStories.SurfacePrimary} />
+<Canvas sourceState="shown"of={ChipsStories.Surface} />
 
 
 ## SurfacePrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Surface} />
 
 ## AccentPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.AccentPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Accent} />
 
 ## ErrorPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.ErrorPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Error} />
 
 ## PrimaryPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.PrimaryPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Primary} />
 
 ## SecondaryPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SecondaryPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Secondary} />
 
 ## SuccessPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.SuccessPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Success} />
 
 ## DangerPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.DangerPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Danger} />
 
 ## WarningPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.WarningPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Warning} />
 
 ## InfoPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.InfoPrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Info} />

package/dist/stories/ChipsPlayground.mdx

@@ -6,5 +6,5 @@ import * as ChipsStories from '../stories/ChipsDefault.stories'
 
 # Playground
 
-<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
-<Controls of={ChipsStories.SurfacePrimary} />
+<Canvas sourceState="shown" of={ChipsStories.Surface} />
+<Controls of={ChipsStories.Surface} />