@ozen-ui/kit 0.36.0 → 0.37.0

package/__inner__/cjs/components/Button/Button.css

@@ -21,7 +21,6 @@
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
-  gap: var(--spacing-2xs);
 }
 .Button > svg {
     flex-shrink: 0;
@@ -249,11 +248,21 @@
     pointer-events: none;
     cursor: auto;
   }
-.Button-Label {
+.Button_loading .Button-Content {
+      opacity: 0;
+    }
+.Button-Content {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: hidden;
+    display: flex;
     text-align: center;
+    place-content: center;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--spacing-2xs);
+  }
+.Button-Label {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -274,9 +283,6 @@
         opacity: 0;
         transition: opacity var(--transition-default);
       }
-.Button-Loader + * {
-    visibility: hidden;
-  }
 .Button .Loader {
     color: var(--color-content-disabled);
   }

package/__inner__/cjs/components/Button/Button.js

@@ -49,11 +49,12 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
     };
     var isInteractionPrevented = disabled || loading;
     var childContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: (0, exports.cnButton)('Content') },
+            renderIcon(iconLeft),
+            react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
+            renderIcon(iconRight)),
         react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, timeout: 120, classNames: (0, exports.cnButton)('Loader', { animation: true }), unmountOnExit: true },
-            react_1.default.createElement(Loader_1.Loader, { size: iconSize })),
-        renderIcon(iconLeft),
-        react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
-        renderIcon(iconRight)));
+            react_1.default.createElement(Loader_1.Loader, { size: iconSize, className: (0, exports.cnButton)('Loader') }))));
     return (react_1.default.createElement(Tag, tslib_1.__assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: (0, exports.cnButton)({
             variant: variant,
             size: size,

package/__inner__/cjs/components/Chip/Chip.js

@@ -4,6 +4,7 @@ exports.Chip = exports.chipColorVariant = exports.chipSizeVariant = exports.cnCh
 var tslib_1 = require("tslib");
 require("./Chip.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
@@ -17,6 +18,9 @@ exports.chipColorVariant = ['primary', 'secondary'];
 exports.Chip = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);
+    if (process.env.NODE_ENV !== 'production') {
+        (0, logger_1.deprecate)("\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChip\u00BB \u0443\u0441\u0442\u0430\u0440\u0435\u043B. \u0414\u043B\u044F \u0437\u0430\u043C\u0435\u043D\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChipNext\u00BB.");
+    }
     return (react_1.default.createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnChip)('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
         react_1.default.createElement("input", tslib_1.__assign({ ref: inputRef, className: (0, exports.cnChip)('Input'), disabled: disabled, type: "checkbox" }, other)),
         react_1.default.createElement("span", { className: (0, exports.cnChip)('Content') },

package/__inner__/esm/components/Button/Button.css

@@ -21,7 +21,6 @@
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
-  gap: var(--spacing-2xs);
 }
 .Button > svg {
     flex-shrink: 0;
@@ -249,11 +248,21 @@
     pointer-events: none;
     cursor: auto;
   }
-.Button-Label {
+.Button_loading .Button-Content {
+      opacity: 0;
+    }
+.Button-Content {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: hidden;
+    display: flex;
     text-align: center;
+    place-content: center;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--spacing-2xs);
+  }
+.Button-Label {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -274,9 +283,6 @@
         opacity: 0;
         transition: opacity var(--transition-default);
       }
-.Button-Loader + * {
-    visibility: hidden;
-  }
 .Button .Loader {
     color: var(--color-content-disabled);
   }

package/__inner__/esm/components/Button/Button.js

@@ -46,11 +46,12 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
     };
     var isInteractionPrevented = disabled || loading;
     var childContent = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: cnButton('Content') },
+            renderIcon(iconLeft),
+            React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
+            renderIcon(iconRight)),
         React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
-            React.createElement(Loader, { size: iconSize })),
-        renderIcon(iconLeft),
-        React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
-        renderIcon(iconRight)));
+            React.createElement(Loader, { size: iconSize, className: cnButton('Loader') }))));
     return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({
             variant: variant,
             size: size,

package/__inner__/esm/components/Chip/Chip.js

@@ -1,6 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './Chip.css';
 import React, { forwardRef, useMemo } from 'react';
+import { deprecate } from '@ozen-ui/logger';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
@@ -14,6 +15,9 @@ export var chipColorVariant = ['primary', 'secondary'];
 export var Chip = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = useMemo(function () { return getIconSizeToFormElement(size); }, [size]);
+    if (process.env.NODE_ENV !== 'production') {
+        deprecate("\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChip\u00BB \u0443\u0441\u0442\u0430\u0440\u0435\u043B. \u0414\u043B\u044F \u0437\u0430\u043C\u0435\u043D\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChipNext\u00BB.");
+    }
     return (React.createElement("label", __assign({ ref: ref, className: cnChip('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
         React.createElement("input", __assign({ ref: inputRef, className: cnChip('Input'), disabled: disabled, type: "checkbox" }, other)),
         React.createElement("span", { className: cnChip('Content') },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "React component library",
   "files": [
     "*"
@@ -23,6 +23,7 @@
     "@bem-react/classnames": "^1.3.10",
     "@ozen-ui/fonts": "latest",
     "@ozen-ui/icons": "latest",
+    "@ozen-ui/logger": "latest",
     "@popperjs/core": "^2.11.8",
     "decimal.js": "^10.4.3",
     "react-is": "^18.2.0",
@@ -33,6 +34,7 @@
   "peerDependencies": {
     "@ozen-ui/fonts": "latest",
     "@ozen-ui/icons": "latest",
+    "@ozen-ui/logger": "latest",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }