@itcase/ui 1.9.28 → 1.9.30

package/dist/components/Textarea.js

@@ -212,12 +212,12 @@ const textareaConfig = {
     },
 };
 function Textarea(props) {
-    const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, textareaConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
-                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
+                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId || (name ? `${name}-textarea` : 'textarea'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
 }
 
 export { Textarea, textareaAppearance, textareaConfig };

package/dist/components/Tile.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_CtZHchZc.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_BstDGBF3.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -169,7 +169,7 @@ function Tile(props) {
     const { dataTestId, dataTour, directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: tileStyles } = useStyles(props);
-    return (jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { className: "tile__badge", appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: "tile__icon", appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { className: "tile__badge", appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: "tile__icon", appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
 }
 
 export { Tile, tileAppearance, tileConfig };

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_CtZHchZc.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_BstDGBF3.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -22,4 +22,4 @@ import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_CtZHchZc.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_BstDGBF3.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -22,4 +22,4 @@ import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';

package/dist/components/Warning.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/css/styles/bundles.css

@@ -79400,6 +79400,55 @@ h2.react-datepicker__current-month {
   --input-state-disabled-background: none;
   --input-state-disabled-border: none;
 }
+.input-number {
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+
+  &__custom {
+    & > input {
+      width: auto;
+      text-align: center;
+      background: transparent;
+      border: none;
+      flex: 0 0 auto !important;
+      outline: none;
+      appearance: none;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+    }
+  }
+}
+.input-number {
+  &_size {
+      &_xxl {
+        padding: var(--input-number-xxl-padding);
+      }
+      &_xl {
+        padding: var(--input-number-xl-padding);
+      }
+      &_l {
+        padding: var(--input-number-l-padding);
+      }
+      &_m {
+        padding: var(--input-number-m-padding);
+      }
+      &_s {
+        padding: var(--input-number-s-padding);
+      }
+  }
+}
+:root {
+  --input-number-xxl-padding: 12px 16px;
+  --input-number-xl-padding: 12px 16px;
+  --input-number-l-padding: 12px 12px;
+  --input-number-m-padding: 8px 12px;
+  --input-number-s-padding: 2px 6px;
+}
 .input-password {
   width: 100%;
   position: relative;