@itcase/ui 1.3.32 → 1.3.33

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

@@ -32,20 +32,20 @@
 
 .select {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__control {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__option {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__menu {
           &-notice {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
           &-group-heading {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
         }
       }
@@ -111,9 +111,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               background: var(--color-$(type)-$(color));
             }
@@ -206,7 +208,7 @@
         &_size {
           @each $size in xs, s, m, l, xl, xxl {
             &_$(size) {
-              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
             }
           }
         }
@@ -371,3 +373,28 @@
     }
   }
 }
+
+:root {
+  --select-xxl-padding: 15px 25px;
+  --select-xl-padding: 9px 20px;
+  --select-xs-padding: 0px 8px;
+  --select-m-padding: 5px 12px;
+  --select-s-padding: 1px 4px;
+  --select-l-padding: 7px 15px;
+
+  --select-menu-border-radius: 12px;
+  --select-menu-margin: 0;
+
+  --select-multi-value-padding: 2px 6px;
+
+  --select-control-shape-rounded: 8px;
+
+  --select-success-border: var(--color-surface-border-tertiary);
+
+  --select-menu-list-item-xxl-padding: 18px 25px;
+  --select-menu-list-item-xl-padding: 14px 20px;
+  --select-menu-list-item-l-padding: 10px 12px;
+  --select-menu-list-item-m-padding: 8px 12px;
+  --select-menu-list-item-s-padding: 6px 10px;
+  --select-menu-list-item-xs-padding: 2px 8px;
+}

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

@@ -1,15 +1,10 @@
 :root {
-  --select-size-xs-padding: 0px 8px;
-  --select-size-s-padding: 3px 10px;
-  --select-size-m-padding: 5px 12px;
-  --select-size-l-padding: 7px 15px;
-  --select-size-xl-padding: 11px 20px;
-  --select-size-xxl-padding: 15px 25px;
-
-  --select-size-tiny-padding: 0px 8px;
-  --select-size-compact-padding: 3px 10px;
-  --select-size-normal-padding: 5px 12px;
-  --select-size-large-padding: 7px 15px;
+  --select-xxl-padding: 15px 25px;
+  --select-xl-padding: 9px 20px;
+  --select-xs-padding: 0px 8px;
+  --select-m-padding: 5px 12px;
+  --select-s-padding: 1px 4px;
+  --select-l-padding: 7px 15px;
 
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
@@ -20,10 +15,10 @@
 
   --select-success-border: var(--color-surface-border-tertiary);
 
-  --select-menu-list-item-size-xs-padding: 2px 8px;
-  --select-menu-list-item-size-s-padding: 6px 10px;
-  --select-menu-list-item-size-m-padding: 8px 12px;
-  --select-menu-list-item-size-l-padding: 10px 12px;
-  --select-menu-list-item-size-xl-padding: 14px 20px;
-  --select-menu-list-item-size-xxl-padding: 18px 25px;
+  --select-menu-list-item-xxl-padding: 18px 25px;
+  --select-menu-list-item-xl-padding: 14px 20px;
+  --select-menu-list-item-l-padding: 10px 12px;
+  --select-menu-list-item-m-padding: 8px 12px;
+  --select-menu-list-item-s-padding: 6px 10px;
+  --select-menu-list-item-xs-padding: 2px 8px;
 }

package/dist/css/components/Select/css/__control/select__control_fill.css

@@ -1,9 +1,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover {
             &-$(color) {
               background: var(--color-$(type)-$(color));
             }

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -5,7 +5,7 @@
         &_size {
           @each $size in xs, s, m, l, xl, xxl {
             &_$(size) {
-              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
             }
           }
         }

package/dist/css/components/Tab/Tab.css

@@ -68,3 +68,31 @@ div.tab-reset {
     }
   }
 }
+:root {
+  --tab-size-normal-padding: 12px;
+  --tab-size-normal-gap: 4px;
+
+  --tab-size-compact-padding: 12px;
+  --tab-size-compact-gap: 4px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+
+  --tab-size-m-padding: 7px;
+  --tab-size-m-gap: 4px;
+
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+
+  --tab-size-xl-padding: 15px;
+  --tab-size-xl-gap: 4px;
+
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+}

package/dist/css/components/Textarea/Textarea.css

@@ -38,3 +38,10 @@
     }
   }
 }
+:root {
+  --textarea-shape-rounded: 8px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-min-height: 80px;
+  --textarea-max-height: 80px;
+  --textarea-success-border: var(--color-surface-border-tertiary);
+}

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -111,6 +111,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             },
         };
         return new Proxy(propsGenerator, generatorProxyHandler);
+        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -125,7 +125,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.0.48",
+    "@itcase/lint": "^1.0.49",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-image": "^3.0.3",

package/dist/Group-BKJmVwPZ.js

@@ -1,34 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-var groupAppearance = {
-    dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
-    // @ts-expect-error
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, flexGrowClass = propsGenerator.flexGrowClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    return (jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-});
-
-export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/Group-Bkz3RO18.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-var groupAppearance = {
-    dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
-    // @ts-expect-error
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, flexGrowClass = propsGenerator.flexGrowClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-});
-
-exports.Group = Group;
-exports.groupAppearance = groupAppearance;
-exports.groupConfig = groupConfig;

package/dist/css/styles/column-gap/column-gap.css

@@ -1,7 +0,0 @@
-.column-gap {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
-    &_$(val) {
-      column-gap: $(val)px;
-    }
-  }
-}

package/dist/css/styles/row-gap/row-gap.css

@@ -1,7 +0,0 @@
-.row-gap {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
-    &_$(val) {
-      row-gap: $(val)px;
-    }
-  }
-}