@itcase/ui 1.3.31 → 1.3.33

package/dist/context/UIContext.js

@@ -1,35 +1,67 @@
 'use client';
+import { a as __rest, _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useState, useMemo, useEffect, useContext } from 'react';
-import { useMediaQueries } from '../hooks/useMediaQueries.js';
+import { createContext, memo, useMemo, useEffect, useContext } from 'react';
+import camelCase from 'lodash/camelCase';
+import { useMediaQueries } from '../hooks/useMediaQueries/useMediaQueries.js';
 import { setViewportProperty } from '../utils/setViewportProperty.js';
 import 'react-responsive';
 
 var UserDeviceContext = createContext({
+    isDesktop: false,
     isMobile: false,
     isTablet: false,
-    isDesktop: false,
-});
-var SiteMenuContext = createContext({
-    isSiteMenuOpen: false,
-    setIsSiteMenuOpen: function () { },
 });
-function useUserDeviceContext() {
-    return useContext(UserDeviceContext);
-}
-function useSiteMenuContext() {
-    return useContext(SiteMenuContext);
-}
 var UIProvider = memo(function UIProvider(props) {
     var children = props.children, _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a;
-    var _b = useState(false), isSiteMenuOpen = _b[0], setIsSiteMenuOpen = _b[1];
-    var siteMenuContextState = useMemo(function () { return ({ isSiteMenuOpen: isSiteMenuOpen, setIsSiteMenuOpen: setIsSiteMenuOpen }); }, [isSiteMenuOpen]);
+    /** NOTE:
+     * Remember that the "useMediaQueries" hook works by next scenario:
+     * when changing the device type(browser width), the hook will first "enable"
+     * the new type(set true), and then "disable" the previous one(set false),
+     * what provoke to double rendering, and in moment we have two different types as "true".
+     * We will need to look at how to change this behavior.
+     */
+    var allDevicesTypes = useMediaQueries(userDeviceState);
+    var isDesktop = allDevicesTypes.isDesktop, isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, fullNamedDeviceTypes = __rest(allDevicesTypes
+    // prettier-ignore
+    , ["isDesktop", "isMobile", "isTablet"]);
+    // prettier-ignore
+    var deviceCurrentMainType = ((isMobile && 'mobile') ||
+        (isTablet && 'tablet') ||
+        (isDesktop && 'desktop')
+        || '');
+    var _b = useMemo(function () {
+        var deviceTypesList = Object.keys(allDevicesTypes).map(function (key) {
+            return camelCase(key.replace('is', ''));
+        });
+        // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
+        var deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
+        // If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
+        function (key) { return fullNamedDeviceTypes[key]; });
+        // Or set main type (e.g. "isMobile")
+        if (!deviceCurrentType) {
+            deviceCurrentType = deviceCurrentMainType;
+        }
+        deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
+        // On server side render we doesn't known user device and we need to set special word
+        return [deviceCurrentType || '_none_', deviceTypesList];
+    }, [allDevicesTypes, deviceCurrentMainType]), deviceCurrentType = _b[0], deviceTypesList = _b[1];
+    var deviceContextState = useMemo(function () {
+        return __assign(__assign({}, allDevicesTypes), { deviceCurrentMainType: deviceCurrentMainType, deviceCurrentType: deviceCurrentType, deviceTypesList: deviceTypesList });
+    }, [
+        allDevicesTypes,
+        deviceCurrentMainType,
+        deviceCurrentType,
+        deviceTypesList,
+    ]);
     useEffect(function () {
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
-    var mediaQueriesDevices = useMediaQueries(userDeviceState);
-    return (jsx(UserDeviceContext.Provider, { value: mediaQueriesDevices, children: jsx(SiteMenuContext.Provider, { value: siteMenuContextState, children: children }) }));
+    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
+function useUserDeviceContext() {
+    return useContext(UserDeviceContext);
+}
 
-export { UIProvider, useSiteMenuContext, useUserDeviceContext };
+export { UIProvider, useUserDeviceContext };

package/dist/css/components/Accordion/Accordion.css

@@ -46,16 +46,12 @@
   }
 }
 .accordion-item {
-  min-width: 170px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: 14px;
   &__title {
     flex: 1;
-    &.text {
-      padding: var(--accordion-item-padding, 0);
-    }
   }
   &__icon {
     align-self: flex-start;
@@ -75,9 +71,9 @@
 }
 .accordion-item {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        padding: var(--accordion-item-size-$(size)-padding);
+        padding: var(--accordion-item-$(size)-padding);
       }
     }
   }
@@ -90,6 +86,7 @@
   }
 }
 :root {
-  --accordion-item-size-xs-padding: 10px 8px;
-  --accordion-item-size-l-padding: 14px 12px;
+  --accordion-item-shape-rounded: 12px;
+  --accordion-item-xs-padding: 10px 8px;
+  --accordion-item-l-padding: 14px 12px;
 }

package/dist/css/components/Accordion/Accordion.tokens.css

@@ -1,4 +1,5 @@
 :root {
   --accordion-item-shape-rounded: 12px;
+  --accordion-item-xs-padding: 10px 8px;
+  --accordion-item-l-padding: 14px 12px;
 }
-

package/dist/css/components/Avatar/Avatar.css

@@ -71,23 +71,23 @@
     }
   }
 }
-/* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
-    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112,
+      144, 240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
+          width: $(size) px;
+          height: $(size) px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__image {
-            width: $(size)px;
-            height: $(size)px;
+            width: $(size) px;
+            height: $(size) px;
             & .image__item {
-              width: $(size)px;
-              height: $(size)px;
+              width: $(size) px;
+              height: $(size) px;
             }
           }
         }
@@ -105,3 +105,7 @@
     }
   }
 }
+:root {
+  --avatar-icon-right: -4px;
+  --avatar-icon-bottom: -3px;
+}

package/dist/css/components/Avatar/Avatar.tokens.css

@@ -1,2 +1,4 @@
 :root {
+  --avatar-icon-right: -4px;
+  --avatar-icon-bottom: -3px;
 }

package/dist/css/components/Badge/Badge.css

@@ -2,25 +2,27 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  &__dot {
+    display: flex;
+  }
 }
 .badge {
-  &&_mode {
-    &_skeleton {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      animation: badge-skeleton 3s infinite linear;
-      & .text {
-        color: transparent;
-      }
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: badgeSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
     }
   }
 }
-@keyframes badge-skeleton {
+@keyframes badgeSkeleton {
   0% {
     background-position: 200%;
   }
@@ -42,23 +44,43 @@
   &_size {
     @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
-        min-width: var(--badge-width-size-$(size));
-        min-height: var(--badge-height-size-$(size));
-        max-width: var(--badge-width-size-$(size));
-        max-height: var(--badge-height-size-$(size));
+        min-width: var(--badge-size-$(size)-min-width);
+        min-height: var(--badge-size-$(size)-min-height);
+        gap: var(--badge-size-$(size)-gap);
+        padding: var(--badge-size-$(size)-padding);
       }
     }
   }
 }
 .badge {
-  &_type_status {
-    &.badge_size {
-      @each $size in xxs, xs, s, m, l, xl, xxl {
-        &_$(size) {
-          min-width: var(--badge-status-width-size-$(size));
-          min-height: var(--badge-status-height-size-$(size));
-          max-width: var(--badge-status-width-size-$(size));
-          max-height: var(--badge-status-height-size-$(size));
+  @each $type in dot-icon-counter, icon-counter, counter, dot, icon, fill {
+    &_type_$(type) {
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &^&_size_$(size) {
+          min-width: var(
+            --badge-type-$(type)-size-$(size)-min-width,
+            var(--badge-size-$(size)-min-width)
+          );
+          min-height: var(
+            --badge-type-$(type)-size-$(size)-min-height,
+            var(--badge-size-$(size)-min-height)
+          );
+          max-width: var(
+            --badge-type-$(type)-size-$(size)-max-width,
+            var(--badge-size-$(size)-max-width)
+          );
+          max-height: var(
+            --badge-type-$(type)-size-$(size)-max-height,
+            var(--badge-size-$(size)-max-height)
+          );
+          padding: var(
+            --badge-type-$(type)-size-$(size)-padding,
+            var(--badge-size-$(size)-padding)
+          );
+          gap: var(
+            --badge-type-$(type)-size-$(size)-gap,
+            var(--badge-size-$(size)-gap)
+          );
         }
       }
     }

package/dist/css/components/Badge/Badge.tokens.css

@@ -1,20 +1,50 @@
 :root {
-  /* Size */
-  --badge-width-size-xxs: 14px;
-  --badge-height-size-xxs: 14px;
-  --badge-width-size-xs: 14px;
-  --badge-height-size-xs: 14px;
-  --badge-width-size-s: 20px;
-  --badge-height-size-s: 20px;
-  --badge-width-size-m: 23px;
-  --badge-height-size-m: 23px;
-  --badge-width-size-l: 32px;
-  --badge-height-size-l: 32px;
-  --badge-width-size-xl: 40px;
-  --badge-height-size-xl: 40px;
-  --badge-width-size-xxl: 48px;
-  --badge-height-size-xxl: 48px;
-  /* Status */
-  --badge-status-width-size-xxs: 8px;
-  --badge-status-height-size-xxs: 8px;
+  --badge-size-xxl-padding: 1m 1.5m;
+  --badge-size-xxl-min-width: 40px;
+  --badge-size-xxl-min-height: 40px;
+  --badge-size-xxl-gap: 5px;
+  --badge-type-icon-size-xxl-max-width: 40px;
+  --badge-type-icon-size-xxl-max-height: 40px;
+
+  --badge-size-xl-padding: 0.5m 1.25m;
+  --badge-size-xl-min-width: 32px;
+  --badge-size-xl-min-height: 32px;
+  --badge-size-xl-gap: 6px;
+  --badge-type-icon-size-xl-max-width: 32px;
+  --badge-type-icon-size-xl-max-height: 32px;
+
+  --badge-size-l-padding: 0.5m 1m;
+  --badge-size-l-min-width: 28px;
+  --badge-size-l-min-height: 28px;
+  --badge-size-l-gap: 4px;
+  --badge-type-icon-size-l-max-width: 28px;
+  --badge-type-icon-size-l-max-height: 28px;
+
+  --badge-size-m-padding: 0 0.75m;
+  --badge-size-m-min-width: 24px;
+  --badge-size-m-min-height: 24px;
+  --badge-size-m-gap: 2px;
+  --badge-type-icon-size-m-max-width: 24px;
+  --badge-type-icon-size-m-max-height: 24px;
+
+  --badge-size-s-padding: 0 0.5m;
+  --badge-size-s-min-width: 20px;
+  --badge-size-s-min-height: 20px;
+  --badge-size-s-gap: 0px;
+  --badge-type-icon-size-s-max-width: 20px;
+  --badge-type-icon-size-s-max-height: 20px;
+
+  --badge-size-xs-padding: 0 0.25m;
+  --badge-size-xs-min-width: 16px;
+  --badge-size-xs-min-height: 16px;
+  --badge-size-xs-gap: 2px;
+  --badge-type-icon-size-xs-max-width: 16px;
+  --badge-type-icon-size-xs-max-height: 16px;
+
+  --badge-size-xxs-padding: 0 0.5m;
+  --badge-size-xxs-min-width: 12px;
+  --badge-size-xxs-min-height: 12px;
+  --badge-size-xxs-gap: 0px;
+  --badge-type-icon-size-xxs-max-width: 12px;
+  --badge-type-icon-size-xxs-max-height: 12px;
 }