@itcase/ui 1.1.6 → 1.1.8

package/dist/constants.js

@@ -1,111 +1,53 @@
-'use strict';
-
-var alignDirection = require('./constants/componentProps/alignDirection.js');
-var align = require('./constants/componentProps/align.js');
-var alignment = require('./constants/componentProps/alignment.js');
-var borderColorHover = require('./constants/componentProps/borderColorHover.js');
-var borderColor = require('./constants/componentProps/borderColor.js');
-var borderType = require('./constants/componentProps/borderType.js');
-var borderWidth = require('./constants/componentProps/borderWidth.js');
-var captionPosition = require('./constants/componentProps/captionPosition.js');
-var direction = require('./constants/componentProps/direction.js');
-var emojiSize = require('./constants/componentProps/emojiSize.js');
-var fillGradient = require('./constants/componentProps/fillGradient.js');
-var fillHover = require('./constants/componentProps/fillHover.js');
-var fill = require('./constants/componentProps/fill.js');
-var fillType = require('./constants/componentProps/fillType.js');
-var flexAlign = require('./constants/componentProps/flexAlign.js');
-var flexJustifyContent = require('./constants/componentProps/flexJustifyContent.js');
-var flexWrap = require('./constants/componentProps/flexWrap.js');
-var gridAlign = require('./constants/componentProps/gridAlign.js');
-var gridAlignSelf = require('./constants/componentProps/gridAlignSelf.js');
-var gridJustifyItems = require('./constants/componentProps/gridJustifyItems.js');
-var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
-var height = require('./constants/componentProps/height.js');
-var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
-var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
-var iconFillSize = require('./constants/componentProps/iconFillSize.js');
-var iconSize = require('./constants/componentProps/iconSize.js');
-var itemColor = require('./constants/componentProps/itemColor.js');
-var position = require('./constants/componentProps/position.js');
-var resizeMode = require('./constants/componentProps/resizeMode.js');
-var shape = require('./constants/componentProps/shape.js');
-var sizeInterface = require('./constants/componentProps/sizeInterface.js');
-var sizePX = require('./constants/componentProps/sizePX.js');
-var size = require('./constants/componentProps/size.js');
-var stacking = require('./constants/componentProps/stacking.js');
-var state = require('./constants/componentProps/state.js');
-var strokeColor = require('./constants/componentProps/strokeColor.js');
-var textAlign = require('./constants/componentProps/textAlign.js');
-var textColorActive = require('./constants/componentProps/textColorActive.js');
-var textColorHover = require('./constants/componentProps/textColorHover.js');
-var textColor = require('./constants/componentProps/textColor.js');
-var textGradient = require('./constants/componentProps/textGradient.js');
-var textSize = require('./constants/componentProps/textSize.js');
-var textStyle = require('./constants/componentProps/textStyle.js');
-var textTag = require('./constants/componentProps/textTag.js');
-var textWeight = require('./constants/componentProps/textWeight.js');
-var textWrap = require('./constants/componentProps/textWrap.js');
-var titleSize = require('./constants/componentProps/titleSize.js');
-var type = require('./constants/componentProps/type.js');
-var underline = require('./constants/componentProps/underline.js');
-var verticalContentAlign = require('./constants/componentProps/verticalContentAlign.js');
-var verticalResizeMode = require('./constants/componentProps/verticalResizeMode.js');
-var width = require('./constants/componentProps/width.js');
-var wrap = require('./constants/componentProps/wrap.js');
-
-
-
-exports.alignDirectionProps = alignDirection.default;
-exports.alignProps = align.default;
-exports.alignmentProps = alignment.default;
-exports.borderColorHoverProps = borderColorHover.default;
-exports.borderColorProps = borderColor.default;
-exports.borderTypeProps = borderType.default;
-exports.borderWidthProps = borderWidth.default;
-exports.captionPositionProps = captionPosition.default;
-exports.directionProps = direction.default;
-exports.emojiSizeProps = emojiSize.default;
-exports.fillGradientProps = fillGradient.default;
-exports.fillHoverProps = fillHover.default;
-exports.fillProps = fill.default;
-exports.fillTypeProps = fillType.default;
-exports.flexAlignProps = flexAlign.default;
-exports.flexJustifyContentProps = flexJustifyContent.default;
-exports.flexWrapProps = flexWrap.default;
-exports.gridAlignProps = gridAlign.default;
-exports.gridAlignSelfProps = gridAlignSelf.default;
-exports.gridJustifyItemsProps = gridJustifyItems.default;
-exports.gridJustifySelfProps = gridJustifySelf.default;
-exports.heightProps = height.default;
-exports.horizontalContentAlignProps = horizontalContentAlign.default;
-exports.horizontalResizeModeProps = horizontalResizeMode.default;
-exports.iconFillSizeProps = iconFillSize.default;
-exports.iconSizeProps = iconSize.default;
-exports.itemColorProps = itemColor.default;
-exports.positionProps = position.default;
-exports.resizeModeProps = resizeMode.default;
-exports.shapeProps = shape.default;
-exports.sizeInterfaceProps = sizeInterface.default;
-exports.sizePXProps = sizePX.default;
-exports.sizeProps = size.default;
-exports.stackingProps = stacking.default;
-exports.stateProps = state.default;
-exports.strokeColorProps = strokeColor.default;
-exports.textAlignProps = textAlign.default;
-exports.textColorActiveProps = textColorActive.default;
-exports.textColorHoverProps = textColorHover.default;
-exports.textColorProps = textColor.default;
-exports.textGradientProps = textGradient.default;
-exports.textSizeProps = textSize.default;
-exports.textStyleProps = textStyle.default;
-exports.textTagProps = textTag.default;
-exports.textWeightProps = textWeight.default;
-exports.textWrapProps = textWrap.default;
-exports.titleSizeProps = titleSize.default;
-exports.typeProps = type.default;
-exports.underlineProps = underline.default;
-exports.verticalContentAlignProps = verticalContentAlign.default;
-exports.verticalResizeModeProps = verticalResizeMode.default;
-exports.widthProps = width.default;
-exports.wrapProps = wrap.default;
+export { default as alignDirectionProps } from './constants/componentProps/alignDirection.js';
+export { default as alignProps } from './constants/componentProps/align.js';
+export { default as alignmentProps } from './constants/componentProps/alignment.js';
+export { default as borderColorHoverProps } from './constants/componentProps/borderColorHover.js';
+export { default as borderColorProps } from './constants/componentProps/borderColor.js';
+export { default as borderTypeProps } from './constants/componentProps/borderType.js';
+export { default as borderWidthProps } from './constants/componentProps/borderWidth.js';
+export { default as captionPositionProps } from './constants/componentProps/captionPosition.js';
+export { default as directionProps } from './constants/componentProps/direction.js';
+export { default as emojiSizeProps } from './constants/componentProps/emojiSize.js';
+export { default as fillGradientProps } from './constants/componentProps/fillGradient.js';
+export { default as fillHoverProps } from './constants/componentProps/fillHover.js';
+export { default as fillProps } from './constants/componentProps/fill.js';
+export { default as fillTypeProps } from './constants/componentProps/fillType.js';
+export { default as flexAlignProps } from './constants/componentProps/flexAlign.js';
+export { default as flexJustifyContentProps } from './constants/componentProps/flexJustifyContent.js';
+export { default as flexWrapProps } from './constants/componentProps/flexWrap.js';
+export { default as gridAlignProps } from './constants/componentProps/gridAlign.js';
+export { default as gridAlignSelfProps } from './constants/componentProps/gridAlignSelf.js';
+export { default as gridJustifyItemsProps } from './constants/componentProps/gridJustifyItems.js';
+export { default as gridJustifySelfProps } from './constants/componentProps/gridJustifySelf.js';
+export { default as heightProps } from './constants/componentProps/height.js';
+export { default as horizontalContentAlignProps } from './constants/componentProps/horizontalContentAlign.js';
+export { default as horizontalResizeModeProps } from './constants/componentProps/horizontalResizeMode.js';
+export { default as iconFillSizeProps } from './constants/componentProps/iconFillSize.js';
+export { default as iconSizeProps } from './constants/componentProps/iconSize.js';
+export { default as itemColorProps } from './constants/componentProps/itemColor.js';
+export { default as positionProps } from './constants/componentProps/position.js';
+export { default as resizeModeProps } from './constants/componentProps/resizeMode.js';
+export { default as shapeProps } from './constants/componentProps/shape.js';
+export { default as sizeInterfaceProps } from './constants/componentProps/sizeInterface.js';
+export { default as sizePXProps } from './constants/componentProps/sizePX.js';
+export { default as sizeProps } from './constants/componentProps/size.js';
+export { default as stackingProps } from './constants/componentProps/stacking.js';
+export { default as stateProps } from './constants/componentProps/state.js';
+export { default as strokeColorProps } from './constants/componentProps/strokeColor.js';
+export { default as textAlignProps } from './constants/componentProps/textAlign.js';
+export { default as textColorActiveProps } from './constants/componentProps/textColorActive.js';
+export { default as textColorHoverProps } from './constants/componentProps/textColorHover.js';
+export { default as textColorProps } from './constants/componentProps/textColor.js';
+export { default as textGradientProps } from './constants/componentProps/textGradient.js';
+export { default as textSizeProps } from './constants/componentProps/textSize.js';
+export { default as textStyleProps } from './constants/componentProps/textStyle.js';
+export { default as textTagProps } from './constants/componentProps/textTag.js';
+export { default as textWeightProps } from './constants/componentProps/textWeight.js';
+export { default as textWrapProps } from './constants/componentProps/textWrap.js';
+export { default as titleSizeProps } from './constants/componentProps/titleSize.js';
+export { default as typeProps } from './constants/componentProps/type.js';
+export { default as underlineProps } from './constants/componentProps/underline.js';
+export { default as verticalContentAlignProps } from './constants/componentProps/verticalContentAlign.js';
+export { default as verticalResizeModeProps } from './constants/componentProps/verticalResizeMode.js';
+export { default as widthProps } from './constants/componentProps/width.js';
+export { default as wrapProps } from './constants/componentProps/wrap.js';

package/dist/context/Notifications.js

@@ -1,13 +1,7 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var uuid = require('uuid');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+'use client';
+import React__default, { useState, useCallback, useMemo, useContext, createContext } from 'react';
+import PropTypes from 'prop-types';
+import { v4 } from 'uuid';
 
 const STATUSES = {
   success: 'success',
@@ -15,15 +9,15 @@ const STATUSES = {
   error: 'error',
   warning: 'warning'
 };
-const NotificationsContext = /*#__PURE__*/React.createContext([]);
-const NotificationsAPIContext = /*#__PURE__*/React.createContext({
+const NotificationsContext = /*#__PURE__*/createContext([]);
+const NotificationsAPIContext = /*#__PURE__*/createContext({
   showNotification: () => {},
   hideNotifications: () => {},
   notificationStatuses: STATUSES
 });
 function NotificationsProvider(props) {
-  const [notifications, setNotifications] = React.useState([]);
-  const hideNotifications = React.useCallback(id => {
+  const [notifications, setNotifications] = useState([]);
+  const hideNotifications = useCallback(id => {
     setNotifications(prevState => {
       const currentNotification = prevState.find(notification => notification.id === id);
       if (currentNotification) {
@@ -35,8 +29,8 @@ function NotificationsProvider(props) {
       return prevState;
     });
   }, []);
-  const showNotification = React.useCallback((notification, onClose) => {
-    let id = uuid.v4().split('-')[0];
+  const showNotification = useCallback((notification, onClose) => {
+    let id = v4().split('-')[0];
     let title = '';
     let text = '';
     let status = STATUSES.warning;
@@ -79,7 +73,7 @@ function NotificationsProvider(props) {
     return id;
     // eslint-disable-next-line
   }, []);
-  const notificationsAPI = React.useMemo(() => ({
+  const notificationsAPI = useMemo(() => ({
     showNotification: showNotification,
     hideNotifications: hideNotifications,
     notificationStatuses: STATUSES
@@ -87,20 +81,20 @@ function NotificationsProvider(props) {
   // Functions is never changes, no sense to set as dependencies
   // eslint-disable-next-line
   []);
-  return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
-  }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {
+  }, /*#__PURE__*/React__default.createElement(NotificationsContext.Provider, {
     value: notifications
   }, props.children));
 }
 NotificationsProvider.propTypes = {
-  children: PropTypes__default.default.any
+  children: PropTypes.any
 };
 function useNotifications() {
-  return React.useContext(NotificationsContext);
+  return useContext(NotificationsContext);
 }
 function useNotificationsAPI() {
-  return React.useContext(NotificationsAPIContext);
+  return useContext(NotificationsAPIContext);
 }
 NotificationsProvider.__docgenInfo = {
   "description": "",
@@ -117,6 +111,4 @@ NotificationsProvider.__docgenInfo = {
   }
 };
 
-exports.NotificationsProvider = NotificationsProvider;
-exports.useNotifications = useNotifications;
-exports.useNotificationsAPI = useNotificationsAPI;
+export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/context/UIContext.js

@@ -1,56 +1,48 @@
-'use strict';
+'use client';
+import React__default, { useContext, memo, useState, useMemo, createContext } from 'react';
+import PropTypes from 'prop-types';
+import { useMediaQueries } from '../hooks/useMediaQueries.js';
+import 'react-responsive';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var useMediaQueries = require('../hooks/useMediaQueries.js');
-require('react-responsive');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-const UserDeviceContext = /*#__PURE__*/React.createContext({
+const UserDeviceContext = /*#__PURE__*/createContext({
   isMobile: false,
   isTablet: false,
   isDesktop: false
 });
-const SiteMenuContext = /*#__PURE__*/React.createContext({
+const SiteMenuContext = /*#__PURE__*/createContext({
   isSiteMenuOpen: false,
   setIsSiteMenuOpen: () => {}
 });
 function useUserDeviceContext() {
-  return React.useContext(UserDeviceContext);
+  return useContext(UserDeviceContext);
 }
 function useSiteMenuContext() {
-  return React.useContext(SiteMenuContext);
+  return useContext(SiteMenuContext);
 }
-const UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
+const UIProvider = /*#__PURE__*/memo(function UIProvider(props) {
   const {
     children,
     userDeviceState = {}
   } = props;
-  const [isSiteMenuOpen, setIsSiteMenuOpen] = React.useState(false);
-  const siteMenuContextState = React.useMemo(() => ({
+  const [isSiteMenuOpen, setIsSiteMenuOpen] = useState(false);
+  const siteMenuContextState = useMemo(() => ({
     isSiteMenuOpen,
     setIsSiteMenuOpen
   }), [isSiteMenuOpen]);
-  const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
-  return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
+  const mediaQueriesDevices = useMediaQueries(userDeviceState);
+  return /*#__PURE__*/React__default.createElement(UserDeviceContext.Provider, {
     value: mediaQueriesDevices
-  }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {
+  }, /*#__PURE__*/React__default.createElement(SiteMenuContext.Provider, {
     value: siteMenuContextState
   }, children));
 });
 UIProvider.propTypes = {
-  children: PropTypes__default.default.any,
-  userDeviceState: PropTypes__default.default.shape({
-    isMobile: PropTypes__default.default.bool,
-    isTablet: PropTypes__default.default.bool,
-    isDesktop: PropTypes__default.default.bool
+  children: PropTypes.any,
+  userDeviceState: PropTypes.shape({
+    isMobile: PropTypes.bool,
+    isTablet: PropTypes.bool,
+    isDesktop: PropTypes.bool
   })
 };
 
-exports.UIProvider = UIProvider;
-exports.useSiteMenuContext = useSiteMenuContext;
-exports.useUserDeviceContext = useUserDeviceContext;
+export { UIProvider, useSiteMenuContext, useUserDeviceContext };

package/dist/context/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationsProvider, useNotifications, useNotificationsAPI } from './Notifications';
+export { UIProvider, useSiteMenuContext, useUserDeviceContext } from './UIContext';

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

@@ -90,3 +90,13 @@
     }
   }
 }
+.avatar {
+  &_status {
+    position: relative;
+    & .dot {
+      position: absolute;
+      right: var(--avatar-dot-position-right, -4px);
+      bottom: var(--avatar-dot-position-bottom, -2px);
+    }
+  }
+}

package/dist/css/components/Button/Button.css

@@ -50,12 +50,13 @@
     @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
         ^^&__wrapper {
-          padding: var(--button-size-$(size)-padding);
+          padding: var(--button-size-$(size)-label-padding);
         }
         &^^&_type_with-icon {
           &_$(size) {
             ^^^^&__wrapper {
               gap: var(--button-size-$(size)-gap);
+              padding: var(--button-size-$(size)-label-icon-padding);
             }
           }
         }
@@ -69,6 +70,16 @@
       ^^&__loader {
         display: flex;
         position: absolute;
+        padding: var(--button-size-$(size)-label-icon-padding);
+      }
+      &.button_size {
+        @each $size in xxs, xs, s, m, l, xl, xxl {
+          &_$(size) {
+            & ^^^^&__wrapper {
+              padding: var(--button-size-$(size)-loader-padding);
+            }
+          }
+        }
       }
     }
   }
@@ -302,7 +313,7 @@
     &_icon {
       align-self: flex-start;
       &.button_size {
-        @each $size in xs, s, m, l, xl, xxl {
+        @each $size in xxs, xs, s, m, l, xl, xxl {
           &_$(size) {
             & ^^^^&__wrapper {
               padding: var(--button-size-$(size)-icon-padding);

package/dist/css/components/Dot/Dot.css

@@ -1,10 +1,16 @@
 .dot {
 }
 .dot {
-  min-width: var(--dot-width, 16px);
-  min-height: var(--dot-height, 16px);
-  max-width: var(--dot-width, 16px);
-  max-height: var(--dot-height, 16px);
+  &_size {
+    @each $size in s, m, l {
+      &_$(size) {
+        min-width: var(--dot-size-$(size)-width, 16px);
+        min-height: var(--dot-size-$(size)-height, 16px);
+        max-width: var(--dot-size-$(size)-width, 16px);
+        max-height: var(--dot-size-$(size)-height, 16px);
+      }
+    }
+  }
 }
 .dot_shape {
   &_rounded {

package/dist/css/components/Dropdown/Dropdown.css

@@ -1,19 +1,26 @@
 .dropdown {
-  display: flex;
   position: relative;
+  display: flex;
   &_set {
-    &_normal {
+    &_default {
       ^^&__wrapper {
+        padding: var(--dropdown-default-padding, 0);
         display: flex;
         flex-direction: column;
+      }
+    }
+    &_normal {
+      ^^&__wrapper {
         padding: var(--dropdown-normal-padding, 12px 0);
+        display: flex;
+        flex-direction: column;
       }
     }
     &_compact {
       ^^&__wrapper {
+        padding: var(--dropdown-compact-padding, 8px 0);
         display: flex;
         flex-direction: column;
-        padding: var(--dropdown-compact-padding, 8px 0);
       }
     }
   }
@@ -61,7 +68,24 @@
     justify-content: space-between;
     align-items: center;
     gap: 8px;
+
+    &-label {
+      display: block;
+    }
+  }
+}
+.dropdown {
+  &__item {
     &_set {
+      &_default {
+        min-width: 62px;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+        ^^&-label {
+          padding: var(--dropdown-item-default-padding, 10px);
+        }
+      }
       &_normal {
         min-width: 240px;
         padding: var(--dropdown-item-normal-padding, 10px 12px 10px 16px);
@@ -71,18 +95,6 @@
         padding: var(--dropdown-item-compact-padding, 0 12px 0 16px);
       }
     }
-    &-label {
-      display: block;
-    }
-    &_size {
-      @each $size in normal, compact {
-        &_$(size) {
-          ^^&-label {
-            gap: var(--dropdown-item-size-$(size)-gap);
-          }
-        }
-      }
-    }
   }
 }
 .dropdown {
@@ -94,3 +106,17 @@
     }
   }
 }
+.dropdown {
+  &__item {
+    &_size {
+      @each $size in normal, compact {
+        &_$(size) {
+          gap: var(--dropdown-item-size-$(size)-gap);
+          ^^&-label {
+            gap: var(--dropdown-item-size-$(size)-label-gap);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,47 +1,70 @@
 .pagination {
+  width: 100%;
   display: flex;
-  padding: 0;
-  margin: 60px 0;
-  list-style: none;
-  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+  &__container {
+    padding: 0;
+    margin: 60px 0;
+    display: flex;
+    list-style: none;
+    gap: 16px;
+  }
+  &__count {
+    display: flex;
+    align-items: center;
+  }
+  &__input {
+    background: var(--color-surface-primary);
+    padding: 3px 7px;
+    border: 1px solid var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    position: relative;
+    display: flex;
+    gap: 4px;
+  }
 }
 .pagination {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
-    &_justify-content_$(val) {
-      justify-content: $(val);
+  &__container {
+    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+      &_justify-content_$(val) {
+        justify-content: $(val);
+      }
     }
   }
 }
 .pagination {
-  margin: var(--paginator-margin, initial);
-  &__item {
-    width: var(--paginator-item-width, 40px);
-    height: var(--paginator-item-height, 40px);
-    background: var(--paginator-item-default-fill);
-    border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
-    border-radius: var(--paginator-item-border-radius, 6px);
-    display: flex;
-    transition: var(--paginator-item-transition);
-    cursor: pointer;
-    &:hover {
-      background: var(--paginator-item-default-fill-hover);
-    }
-    &_break {
+  &__container {
+    margin: var(--paginator-margin, initial);
+    ^&__item {
+      width: var(--paginator-item-width, 40px);
+      height: var(--paginator-item-height, 40px);
+      background: var(--paginator-item-default-fill);
+      border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
+      border-radius: var(--paginator-item-border-radius, 6px);
       display: flex;
-      ^&-link {
+      transition: var(--paginator-item-transition);
+      cursor: pointer;
+      &:hover {
+        background: var(--paginator-item-default-fill-hover);
+      }
+      &_break {
+        display: flex;
+        ^&-link {
+          display: flex;
+          align-items: flex-end;
+        }
+      }
+      &-link {
+        width: 100%;
+        height: 100%;
+        color: var(--paginator-item-default-text);
         display: flex;
-        align-items: flex-end;
+        justify-content: center;
+        align-items: center;
+        @mixin text-l;
       }
     }
-    &-link {
-      width: 100%;
-      height: 100%;
-      color: var(--paginator-item-default-text);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      @mixin text-l;
-    }
   }
 }
 .pagination {