@ozen-ui/kit 0.23.1 → 0.24.0

package/Calendar/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Calendar/index.js",
+	"module": "../__inner__/esm/components/Calendar/index.js",
+	"types": "../__inner__/esm/components/Calendar/index.d.ts"
+}

package/__inner__/cjs/components/Badge/Badge.css

@@ -67,7 +67,7 @@
     }
 .Badge-Content_color_neutralDark {
       color: var(--color-content-action-on);
-      background-color: var(--color-space-space-95);
+      background-color: var(--color-content-primary);
     }
 .Badge-Content_color_neutralLight {
       color: var(--color-content-primary);

package/__inner__/cjs/components/Breadcrumbs/Breadcrumbs.css

@@ -13,6 +13,6 @@
   align-items: center;
 }
 
-.Breadcrumbs-Item .Button-Label {
+.BreadcrumbItem {
   color: var(--color-content-secondary);
 }

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

@@ -1,10 +1,10 @@
 /* stylelint-disable */
 .Button {
   display: inline-flex;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  white-space: nowrap;
   text-decoration: none;
   border: none;
   cursor: pointer;
@@ -21,7 +21,11 @@
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
+  gap: var(--spacing-2xs);
 }
+.Button > svg {
+    flex-shrink: 0;
+  }
 .Button_size_2xs {
       --button-height: var(--control-height-2xs);
       --button-padding-x: var(--control-padding-xs);
@@ -245,37 +249,34 @@
     pointer-events: none;
     cursor: auto;
   }
-.Button_loading .Button-Label {
-      opacity: 0;
-    }
+.Button-Label {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 .Button-Loader {
-  position: absolute;
-}
+    position: absolute;
+  }
 .Button-Loader_animation-enter {
-      opacity: 0;
-    }
+        opacity: 0;
+      }
 .Button-Loader_animation-enter-active {
-      opacity: 1;
-      transition: opacity var(--transition-default);
-    }
+        opacity: 1;
+        transition: opacity var(--transition-default);
+      }
 .Button-Loader_animation-exit {
-      opacity: 1;
-    }
+        opacity: 1;
+      }
 .Button-Loader_animation-exit-active {
-      opacity: 0;
-      transition: opacity var(--transition-default);
-    }
-.Button-Label {
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-  opacity: 1;
-  transition: opacity var(--transition-default);
-  gap: var(--space-s);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.Button-Label > svg {
-    flex-shrink: 0;
+        opacity: 0;
+        transition: opacity var(--transition-default);
+      }
+.Button-Loader + * {
+    visibility: hidden;
+  }
+.Button .Loader {
+    color: var(--color-content-disabled);
   }

package/__inner__/cjs/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import './Button.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
@@ -42,6 +42,8 @@ type ButtonBaseProps = {
     iconRight?: ButtonIcon;
     /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
     fullWidth?: boolean;
+    /** Свойства лейбла кнопки */
+    labelProps?: ComponentPropsWithRef<'span'>;
 };
 export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;

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

@@ -32,7 +32,7 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
         props: inProps,
         name: 'Button',
     });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
@@ -49,12 +49,11 @@ 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)('Label') },
-            renderIcon(iconLeft),
-            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, color: "var(--color-content-disabled)", className: (0, exports.cnButton)('Loader') }))));
+            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)));
     return (react_1.default.createElement(Tag, tslib_1.__assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: (0, exports.cnButton)({
             variant: variant,
             size: size,
@@ -62,6 +61,6 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
             loading: loading,
             color: color,
             fullWidth: fullWidth,
-        }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), childContent));
+        }, [className]) }, other, { ref: ref }), childContent));
 });
 exports.Button.displayName = 'Button';

package/__inner__/cjs/components/DataList/DataList.js

@@ -20,7 +20,7 @@ var helpers_1 = require("./helpers");
 var index_1 = require("./index");
 exports.cnDataList = (0, classname_1.cn)('DataList');
 var DataListRender = function (inProps, ref) {
-    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps"]);
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
     var listRef = (0, react_1.useRef)(null);
     // Состояние представленного компонента с завершенной анимацией
     var _e = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
@@ -139,7 +139,7 @@ var DataListRender = function (inProps, ref) {
         };
         return (0, react_1.cloneElement)(elementChild, tslib_1.__assign({}, props));
     });
-    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { onEntered: function () {
             onEntered();
@@ -152,6 +152,6 @@ var DataListRender = function (inProps, ref) {
                 var _a;
                 e.preventDefault();
                 (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
-            }, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), renderChildren)));
+            }, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);

package/__inner__/cjs/components/Drawer/Drawer.css

@@ -6,8 +6,7 @@
 .Drawer .Modal-Window {
     inline-size: 100%;
     max-inline-size: var(--drawer-width);
-    /* stylelint-disable-next-line plugin/use-logical-units */
-    block-size: 100vh;
+    block-size: 100%;
     border-radius: var(--drawer-border-radius);
     display: flex;
     flex-direction: column;

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.css

@@ -14,13 +14,14 @@ body {
 
   text-transform: var(--typography-text-m-text_transform, none);
 }
+.Theme,
 .Theme * {
-    --scroll-bar-size: 16px;
-  }
-.Theme *::-webkit-scrollbar {
+  --scroll-bar-size: 16px;
+}
+.Theme::-webkit-scrollbar, .Theme *::-webkit-scrollbar {
     inline-size: var(--scroll-bar-size);
   }
-.Theme *::-webkit-scrollbar-thumb {
+.Theme::-webkit-scrollbar-thumb, .Theme *::-webkit-scrollbar-thumb {
     background-color: var(--color-background-secondary);
     border-radius: calc(var(--scroll-bar-size) / 2);
     border: calc(var(--scroll-bar-size) / 4) solid transparent;
@@ -28,17 +29,19 @@ body {
     border-image: initial;
     min-block-size: 24px;
   }
-.Theme *::-webkit-scrollbar-thumb:hover,
+.Theme::-webkit-scrollbar-thumb:hover,
+    .Theme::-webkit-scrollbar-thumb:active,
+    .Theme *::-webkit-scrollbar-thumb:hover,
     .Theme *::-webkit-scrollbar-thumb:active {
       border: calc(var(--scroll-bar-size) / 4) solid transparent;
       background-clip: padding-box;
     }
-.Theme *::-webkit-scrollbar-thumb:hover {
+.Theme::-webkit-scrollbar-thumb:hover, .Theme *::-webkit-scrollbar-thumb:hover {
       background-color: var(--color-background-secondary-hover);
     }
-.Theme *::-webkit-scrollbar-thumb:active {
+.Theme::-webkit-scrollbar-thumb:active, .Theme *::-webkit-scrollbar-thumb:active {
       background-color: var(--color-background-secondary-pressed);
     }
-.Theme *::-webkit-scrollbar-corner {
+.Theme::-webkit-scrollbar-corner, .Theme *::-webkit-scrollbar-corner {
     background: transparent;
   }

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css

@@ -0,0 +1,172 @@
+.Theme_color_bBusinessDark {
+  --color-content-action-on: #fff;
+  --color-content-secondary: #949494;
+  --color-content-primary: #f5f5f5;
+  --color-content-tertiary: #707070;
+  --color-content-disabled: #4e4e4e;
+  --color-content-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-content-action: #0534d0;
+  --color-content-action-hover: #082ba0;
+  --color-content-action-pressed: #0a2171;
+  --color-content-action-dark: #9ab1ff;
+  --color-content-action-secondary: #d7d8e1;
+  --color-content-action-secondary-hover: #c2c5d3;
+  --color-content-action-secondary-pressed: #aeb1c4;
+  --color-content-action-secondary-dark: #aeb1c4;
+  --color-background-main: #1e1d22;
+  --color-content-error: #cf4a4b;
+  --color-content-error-hover: #9f3b3d;
+  --color-content-error-pressed: #702d2e;
+  --color-content-error-dark: #ffbdbd;
+  --color-content-warning: #cf7d04;
+  --color-content-warning-hover: #9f6207;
+  --color-content-warning-pressed: #70460b;
+  --color-content-warning-dark: #ffd699;
+  --color-content-success: #039904;
+  --color-content-success-hover: #067607;
+  --color-content-success-pressed: #0a540b;
+  --color-content-success-dark: #99e499;
+  --color-content-info: #6a05d0;
+  --color-content-info-hover: #5307a0;
+  --color-content-info-pressed: #3d0a71;
+  --color-content-info-dark: #cd9aff;
+  --color-content-primary-inverse: #17161a;
+  --color-background-main-inverse: #d9dade;
+  --color-content-accent-secondary: #989aa5;
+  --color-accent-main: #14151b;
+  --color-content-accent-primary: #c7c8ce;
+  --color-accent-primary: #1b1c24;
+  --color-content-accent-disabled: #7b7e8c;
+  --color-background-main-hover: #2c2c33;
+  --color-background-main-pressed: #474853;
+  --color-background-primary: #17161a;
+  --color-background-primary-hover: #1e1d22;
+  --color-background-primary-pressed: #2c2c33;
+  --color-background-secondary: #2c2c33;
+  --color-background-secondary-hover: #474853;
+  --color-background-secondary-pressed: #636574;
+  --color-background-tertiary: #474853;
+  --color-background-tertiary-hover: #636574;
+  --color-background-tertiary-pressed: #7e8194;
+  --color-background-disabled: #474853;
+  --color-background-action: #0534d0;
+  --color-background-action-hover: #082ba0;
+  --color-background-action-pressed: #0a2171;
+  --color-background-action-active-disabled: #0f111e;
+  --color-background-action-light: #0d1841;
+  --color-background-action-light-hover: #0f142a;
+  --color-background-action-light-pressed: #0f111e;
+  --color-background-accent-action-light: #082ba0;
+  --color-background-accent-action-light-hover: #0a2171;
+  --color-background-accent-action-light-pressed: #0d1841;
+  --color-background-action-secondary: #43b741;
+  --color-background-action-secondary-hover: #379535;
+  --color-background-action-secondary-pressed: #2a7329;
+  --color-background-action-secondary-disabled: #184117;
+  --color-background-action-secondary-light: #113011;
+  --color-background-action-secondary-light-hover: #1e521d;
+  --color-background-action-secondary-light-pressed: #184117;
+  --color-background-accent-action-secondary-light: #067607;
+  --color-background-accent-action-secondary-light-hover: #0a540b;
+  --color-background-accent-action-secondary-light-pressed: #0d310e;
+  --color-background-error: #cf4a4b;
+  --color-background-error-hover: #9f3b3d;
+  --color-background-error-pressed: #702d2e;
+  --color-background-error-light: #401e20;
+  --color-background-error-light-hover: #281619;
+  --color-background-error-light-pressed: #1c1316;
+  --color-background-accent-error-light: #9f3b3d;
+  --color-background-accent-error-light-hover: #702d2e;
+  --color-background-accent-error-light-pressed: #401e20;
+  --color-background-warning: #cf7d04;
+  --color-background-warning-hover: #9f6207;
+  --color-background-warning-pressed: #70460b;
+  --color-background-warning-light: #402b0e;
+  --color-background-warning-light-hover: #281d10;
+  --color-background-warning-light-pressed: #1c1611;
+  --color-background-accent-warning-light: #9f6207;
+  --color-background-accent-warning-light-hover: #70460b;
+  --color-background-accent-warning-light-pressed: #402b0e;
+  --color-background-success: #039904;
+  --color-background-success-hover: #067607;
+  --color-background-success-pressed: #0a540b;
+  --color-background-success-light: #0d310e;
+  --color-background-success-light-hover: #0e2010;
+  --color-background-success-light-pressed: #0f1811;
+  --color-background-accent-success-light: #067607;
+  --color-background-accent-success-light-hover: #0a540b;
+  --color-background-accent-success-light-pressed: #0d310e;
+  --color-background-info: #6a05d0;
+  --color-background-info-hover: #5307a0;
+  --color-background-info-pressed: #3d0a71;
+  --color-background-info-light: #270d41;
+  --color-background-info-light-hover: #1b0e2a;
+  --color-background-info-light-pressed: #160e1e;
+  --color-background-accent-info-light: #5307a0;
+  --color-background-accent-info-light-hover: #3d0a71;
+  --color-background-accent-info-light-pressed: #270d41;
+  --color-background-overlay: rgb(0 0 0 / 60%);
+  --color-background-ghost: rgb(255 255 255 / 10%);
+  --color-background-ghost-hover: rgb(255 255 255 / 20%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 30%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-main: #474853;
+  --color-border-main-hover: #636574;
+  --color-border-main-pressed: #7e8194;
+  --color-border-secondary: #2c2c33;
+  --color-border-secondary-hover: #474853;
+  --color-border-secondary-pressed: #636574;
+  --color-border-disabled: #2c2c33;
+  --color-border-ghost-disabled: rgb(255 255 255 / 40%);
+  --color-border-focused: #0d1841;
+  --color-border-action: #0534d0;
+  --color-border-action-hover: #082ba0;
+  --color-border-action-pressed: #0a2171;
+  --color-border-action-secondary: #d7d8e1;
+  --color-border-action-secondary-hover: #c2c5d3;
+  --color-border-action-secondary-pressed: #aeb1c4;
+  --color-border-error: #cf4a4b;
+  --color-border-warning: #cf7d04;
+  --color-border-success: #039904;
+  --color-border-info: #6a05d0;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #989aa5;
+  --color-border-accent-disabled: #5f6374;
+  --color-border-accent-focused: #0d1841;
+  --color-accent-main-hover: #1b1c24;
+  --color-accent-main-pressed: #252732;
+  --color-accent-primary-hover: #252732;
+  --color-accent-primary-pressed: #2f3240;
+  --color-accent-secondary: #252732;
+  --color-accent-secondary-hover: #2f3240;
+  --color-accent-secondary-pressed: #393c4d;
+  --color-accent-tertiary: #2f3240;
+  --color-accent-tertiary-hover: #393c4d;
+  --color-accent-tertiary-pressed: #43475b;
+  --color-accent-disabled: #2f3240;
+  --color-accent-main-inverse: #c7c8ce;
+  --color-additional-a1: #0b6abe;
+  --color-additional-a2: #1899e9;
+  --color-additional-a3: #b3f1ff;
+  --color-additional-b1: #b5215f;
+  --color-additional-b2: #e62d73;
+  --color-additional-b3: #ffb5cd;
+  --color-additional-c1: #e64920;
+  --color-additional-c2: #f46c1b;
+  --color-additional-c3: #ffe2a8;
+  --color-additional-d1: #ff8e00;
+  --color-additional-d2: #ffc100;
+  --color-additional-d3: #fff9a2;
+  --color-additional-e1: #771db4;
+  --color-additional-e2: #a02be5;
+  --color-additional-e3: #e9b7fe;
+  --color-additional-f1: #107c60;
+  --color-additional-f2: #17ae87;
+  --color-additional-f3: #abeada;
+  --color-additional-g1: #b88f27;
+  --color-additional-g2: #e0b548;
+  --color-additional-g3: #f4d37d;
+  --color-additional-h1: #747e89;
+  --color-additional-h2: #bdc4cb;
+  --color-additional-h3: #e1e4e7;
+}