@ozen-ui/kit 0.0.1 → 0.1.0

package/README.md

@@ -21,10 +21,9 @@ pnpm add @ozen-ui/kit
 
 Разделы для знакомства с библиотекой:
 
-- [Быстрый старт]()
-- [Дизайн-токены]()
-- [Обзор компонентов]()
-- [Внести свой вклад]()
+- [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F-%D0%B4%D0%BE%D0%B1%D1%80%D0%BE-%D0%BF%D0%BE%D0%B6%D0%B0%D0%BB%D0%BE%D0%B2%D0%B0%D1%82%D1%8C--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
+- [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs/%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B5-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
+- [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F-%D0%BE%D0%B1%D0%B7%D0%BE%D1%80--%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F)
 
 ## О нас
 

package/__inner__/cjs/components/Avatar/Avatar.css

@@ -6,7 +6,7 @@
   flex-shrink: 0;
   inline-size: var(--avatar-size);
   block-size: var(--avatar-size);
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
   border-radius: 50%;
   position: relative;
   overflow: visible;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.js

@@ -29,10 +29,12 @@ exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentW
     var additionalTagProps = (0, react_1.useMemo)(function () {
         if (Tag === 'button')
             return {
+                disabled: disabled,
                 onKeyDown: onKeyDownProp
             };
         var commonAdditionalProps = {
             role: 'button',
+            'aria-disabled': disabled,
             onKeyDown: onKeyDownProp
         };
         if (Tag === 'div') {

package/__inner__/cjs/components/Select/Select.js

@@ -112,13 +112,11 @@ exports.Select = (0, react_1.forwardRef)(function (inProps, ref) {
             ? child.props.children || child.props.label
             : child.props.label;
         var selected = valueState === child.props.value;
-        var props = {
-            onClick: function (event) {
+        var props = tslib_1.__assign(tslib_1.__assign({}, child.props), { onClick: function (event) {
                 var _a, _b;
                 handleChange(event, child.props.value || '');
                 (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            }
-        };
+            } });
         if (selected) {
             currentOption = {
                 label: label,

package/__inner__/cjs/components/Skeleton/Skeleton.css

@@ -4,17 +4,19 @@
 /* l >= 1280px */
 .Skeleton {
   --skeleton-loader-width: 100px;
+  --skeleton-bg-color: var(--color-background-secondary);
+  --skeleton-wave-color: var(--color-background-secondary-hover);
   display: flex;
   visibility: initial;
-  background-color: var(--color-background-secondary);
+  background-color: var(--skeleton-bg-color);
   background-image: linear-gradient(
     to right,
-    var(--color-background-secondary) 0%,
-    var(--color-background-secondary-hover)
-      calc(var(--skeleton-loader-width) / 2),
-    var(--color-background-secondary) var(--skeleton-loader-width)
+    var(--skeleton-bg-color) 0%,
+    var(--skeleton-wave-color) calc(var(--skeleton-loader-width) / 2),
+    var(--skeleton-bg-color) var(--skeleton-loader-width)
   );
   animation: skeleton-wave 1.5s linear infinite;
+
   background-repeat: no-repeat;
   background-attachment: fixed;
 }

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

@@ -3,11 +3,16 @@ import './Skeleton.css';
 import { type SkeletonCircularProps } from './SkeletonCircular';
 import { type SkeletonRectangularProps } from './SkeletonRectangular';
 import { type SkeletonTypographyProps } from './SkeletonTypography';
-export type SkeletonProps = ({
+export type SkeletonProps = (({
     variant: 'rectangular';
 } & SkeletonRectangularProps) | ({
     variant: 'circular';
 } & SkeletonCircularProps) | ({
     variant: 'typography';
-} & SkeletonTypographyProps);
+} & SkeletonTypographyProps)) & {
+    /** Цвет волны */
+    waveColor?: string;
+    /** Цвет фона */
+    bgColor?: string;
+};
 export declare const Skeleton: React.FC<SkeletonProps>;

package/__inner__/cjs/components/Skeleton/Skeleton.js

@@ -8,13 +8,15 @@ var SkeletonCircular_1 = require("./SkeletonCircular");
 var SkeletonRectangular_1 = require("./SkeletonRectangular");
 var SkeletonTypography_1 = require("./SkeletonTypography");
 exports.Skeleton = (0, react_1.forwardRef)(function (props, ref) {
-    var variant = props.variant, children = props.children, other = tslib_1.__rest(props, ["variant", "children"]);
+    var variant = props.variant, children = props.children, waveColor = props.waveColor, bgColor = props.bgColor, styleProp = props.style, other = tslib_1.__rest(props, ["variant", "children", "waveColor", "bgColor", "style"]);
+    var style = tslib_1.__assign({ '--skeleton-wave-color': waveColor, '--skeleton-bg-color': bgColor }, styleProp);
+    var commonProps = tslib_1.__assign(tslib_1.__assign({}, other), { style: style, ref: ref });
     if (variant === 'circular') {
-        return (react_1["default"].createElement(SkeletonCircular_1.SkeletonCircular, tslib_1.__assign({}, other, { ref: ref }), children));
+        return react_1["default"].createElement(SkeletonCircular_1.SkeletonCircular, tslib_1.__assign({}, commonProps), children);
     }
     if (variant === 'typography') {
-        return react_1["default"].createElement(SkeletonTypography_1.SkeletonTypography, tslib_1.__assign({}, other, { ref: ref }));
+        return react_1["default"].createElement(SkeletonTypography_1.SkeletonTypography, tslib_1.__assign({}, commonProps));
     }
-    return (react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, tslib_1.__assign({}, other, { ref: ref }), children));
+    return react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, tslib_1.__assign({}, commonProps), children);
 });
 exports.Skeleton.displayName = 'Skeleton';

package/__inner__/cjs/components/Skeleton/SkeletonRectangular/SkeletonRectangular.js

@@ -7,7 +7,7 @@ var classname_1 = require("../../../utils/classname");
 require("../Skeleton.css");
 exports.cnSkeleton = (0, classname_1.cn)('Skeleton');
 exports.SkeletonRectangular = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, className = _a.className, other = tslib_1.__rest(_a, ["children", "width", "height", "className"]);
-    return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeleton)({ hasChildren: !!children }, [className]), style: { width: width, height: height } }, other, { ref: ref }), children));
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, style = _a.style, className = _a.className, other = tslib_1.__rest(_a, ["children", "width", "height", "style", "className"]);
+    return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeleton)({ hasChildren: !!children }, [className]), style: tslib_1.__assign({ width: width, height: height }, style) }, other, { ref: ref }), children));
 });
 exports.SkeletonRectangular.displayName = 'SkeletonRectangular';

package/__inner__/cjs/components/Skeleton/SkeletonTypography/SkeletonTypography.js

@@ -9,12 +9,10 @@ var SkeletonRectangular_1 = require("../SkeletonRectangular");
 require("./SkeletonTypography.css");
 exports.cnSkeletonTypography = (0, classname_1.cn)('SkeletonTypography');
 exports.SkeletonTypography = (0, react_1.forwardRef)(function (_a, ref) {
-    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, rows = _a.rows, other = tslib_1.__rest(_a, ["className", "typographyVariant", "width", "rows"]);
-    return (react_1["default"].createElement("span", { className: (0, exports.cnSkeletonTypography)('', [className]), style: { width: width }, ref: ref }, new Array(rows).fill(null).map(function (_, index) { return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeletonTypography)('Row', [
+    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, style = _a.style, rows = _a.rows, other = tslib_1.__rest(_a, ["className", "typographyVariant", "width", "style", "rows"]);
+    return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeletonTypography)('', [className]), style: { width: width } }, other, { ref: ref }), new Array(rows).fill(null).map(function (_, index) { return (react_1["default"].createElement("span", { className: (0, exports.cnSkeletonTypography)('Row', [
             (0, Typography_1.cnTypography)({ variant: typographyVariant }),
-        ]) }, other, { key: index }),
-        react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, { style: {
-                width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%'
-            } }))); })));
+        ]), key: index },
+        react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, { style: tslib_1.__assign({ width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%' }, style) }))); })));
 });
 exports.SkeletonTypography.displayName = 'SkeletonTypography';

package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.d.ts

@@ -19,4 +19,6 @@ export declare const SnackbarItem: React.ForwardRefExoticComponent<{
     onEnter?: ((messageId: import("../..").SnackbarMessageId) => void) | undefined;
     onEntered?: ((messageId: import("../..").SnackbarMessageId) => void) | undefined;
     renderContent?: ((props: import("./types").SnackbarItemRenderContentProps) => React.ReactNode) | undefined;
+    collapseTransitionTimeout?: number | undefined;
+    contentTransitionTimeout?: number | undefined;
 } & Required<import("../..").SnackbarCommonProps> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.js

@@ -14,8 +14,8 @@ var Collapse_1 = require("../../../Collapse");
 var constants_1 = require("../../constants");
 exports.cnSnackbarItem = (0, classname_1.cn)('SnackbarItem');
 exports.SnackbarItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var title = _a.title, status = _a.status, description = _a.description, rootProps = _a.rootProps, messageId = _a.messageId, renderContentProp = _a.renderContent, open = _a.open, opening = _a.opening, disableWindowBlurListener = _a.disableWindowBlurListener, lifetime = _a.lifetime, anchorOrigin = _a.anchorOrigin, onClose = _a.onClose, onExited = _a.onExited, onEntered = _a.onEntered, onEnter = _a.onEnter, onExit = _a.onExit;
-    var _b = tslib_1.__read((0, useBoolean_1.useBoolean)(true), 2), expanded = _b[0], collapseItem = _b[1].off;
+    var title = _a.title, status = _a.status, description = _a.description, rootProps = _a.rootProps, messageId = _a.messageId, renderContentProp = _a.renderContent, open = _a.open, opening = _a.opening, disableWindowBlurListener = _a.disableWindowBlurListener, lifetime = _a.lifetime, anchorOrigin = _a.anchorOrigin, onClose = _a.onClose, onExited = _a.onExited, onEntered = _a.onEntered, onEnter = _a.onEnter, onExit = _a.onExit, _b = _a.collapseTransitionTimeout, collapseTransitionTimeout = _b === void 0 ? constants_1.SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT : _b, _c = _a.contentTransitionTimeout, contentTransitionTimeout = _c === void 0 ? constants_1.SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT : _c;
+    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(true), 2), expanded = _d[0], collapseItem = _d[1].off;
     var horizontal = anchorOrigin.horizontal, vertical = anchorOrigin.vertical;
     var handleClose = function () {
         onClose === null || onClose === void 0 ? void 0 : onClose(messageId);
@@ -73,21 +73,19 @@ exports.SnackbarItem = (0, react_1.forwardRef)(function (_a, ref) {
         handler: pauseTimer,
         active: !disableWindowBlurListener && open
     });
-    return (react_1["default"].createElement(Collapse_1.Collapse, tslib_1.__assign({ ref: ref }, rootProps, { className: (0, exports.cnSnackbarItem)('Collapse', [rootProps === null || rootProps === void 0 ? void 0 : rootProps.className]), timeout: constants_1.SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT, expanded: expanded, onExited: handleCollapseExited, onEntered: 
+    return (react_1["default"].createElement(Collapse_1.Collapse, tslib_1.__assign({ ref: ref }, rootProps, { className: (0, exports.cnSnackbarItem)('Collapse', [rootProps === null || rootProps === void 0 ? void 0 : rootProps.className]), timeout: collapseTransitionTimeout, expanded: expanded, onExited: handleCollapseExited, onEntered: 
         // У кого дольше анимация тот и вызывает
-        constants_1.SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT >
-            constants_1.SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT
+        collapseTransitionTimeout > contentTransitionTimeout
             ? handleEntered
             : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, appear: true }),
-        react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": open, classNames: (0, exports.cnSnackbarItem)({ animation: true }), timeout: constants_1.SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT, onEnter: function () { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(messageId); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(messageId); }, onExited: collapseItem, onEntered: 
+        react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": open, classNames: (0, exports.cnSnackbarItem)({ animation: true }), timeout: contentTransitionTimeout, onEnter: function () { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(messageId); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(messageId); }, onExited: collapseItem, onEntered: 
             // У кого дольше анимация тот и вызывает
-            constants_1.SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT <=
-                constants_1.SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT
+            collapseTransitionTimeout <= contentTransitionTimeout
                 ? handleEntered
                 : undefined, appear: true },
             react_1["default"].createElement("div", { style: {
-                    '--snackbar-item-transform-transition': "".concat(constants_1.SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT, "ms"),
-                    '--snackbar-item-opacity-transition': "".concat(constants_1.SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT, "ms")
+                    '--snackbar-item-transform-transition': "".concat(collapseTransitionTimeout, "ms"),
+                    '--snackbar-item-opacity-transition': "".concat(contentTransitionTimeout, "ms")
                 }, className: (0, exports.cnSnackbarItem)({
                     anchorHorizontal: horizontal,
                     anchorVertical: vertical

package/__inner__/cjs/components/Snackbar/components/SnackbarItem/types.d.ts

@@ -48,4 +48,6 @@ export type SnackbarItemProps = {
     onEntered?: (messageId: SnackbarMessageId) => void;
     /** Render-функция для кастомизации сообщения */
     renderContent?: (props: SnackbarItemRenderContentProps) => ReactNode;
+    collapseTransitionTimeout?: number;
+    contentTransitionTimeout?: number;
 } & Required<SnackbarCommonProps>;

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

@@ -6,6 +6,5 @@
   --z-index-modal: 1000;
   --z-index-popover: 1000;
   --z-index-snackbar: 1100;
-  --z-index-livespace: 9999;
-  --z-index-chat: 99999;
+  --z-index-chat: 9999;
 }

package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts

@@ -3,7 +3,7 @@ export declare const borderRadius: readonly ["--border-radius-l", "--border-radi
 export declare const borderWidth: readonly ["--border-width-s", "--border-width-m"];
 export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"];
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
-export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-livespace", "--z-index-chat"];
+export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
 export declare const typography: readonly ["--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-text-xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/cjs/components/ThemeProvider/themes/helper.js

@@ -150,7 +150,6 @@ exports.zIndex = [
     '--z-index-modal',
     '--z-index-popover',
     '--z-index-snackbar',
-    '--z-index-livespace',
     '--z-index-chat',
 ];
 exports.space = [

package/__inner__/esm/components/Avatar/Avatar.css

@@ -6,7 +6,7 @@
   flex-shrink: 0;
   inline-size: var(--avatar-size);
   block-size: var(--avatar-size);
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
   border-radius: 50%;
   position: relative;
   overflow: visible;

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.js

@@ -26,10 +26,12 @@ export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref)
     var additionalTagProps = useMemo(function () {
         if (Tag === 'button')
             return {
+                disabled: disabled,
                 onKeyDown: onKeyDownProp
             };
         var commonAdditionalProps = {
             role: 'button',
+            'aria-disabled': disabled,
             onKeyDown: onKeyDownProp
         };
         if (Tag === 'div') {

package/__inner__/esm/components/Select/Select.js

@@ -109,13 +109,11 @@ export var Select = forwardRef(function (inProps, ref) {
             ? child.props.children || child.props.label
             : child.props.label;
         var selected = valueState === child.props.value;
-        var props = {
-            onClick: function (event) {
+        var props = __assign(__assign({}, child.props), { onClick: function (event) {
                 var _a, _b;
                 handleChange(event, child.props.value || '');
                 (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            }
-        };
+            } });
         if (selected) {
             currentOption = {
                 label: label,

package/__inner__/esm/components/Skeleton/Skeleton.css

@@ -4,17 +4,19 @@
 /* l >= 1280px */
 .Skeleton {
   --skeleton-loader-width: 100px;
+  --skeleton-bg-color: var(--color-background-secondary);
+  --skeleton-wave-color: var(--color-background-secondary-hover);
   display: flex;
   visibility: initial;
-  background-color: var(--color-background-secondary);
+  background-color: var(--skeleton-bg-color);
   background-image: linear-gradient(
     to right,
-    var(--color-background-secondary) 0%,
-    var(--color-background-secondary-hover)
-      calc(var(--skeleton-loader-width) / 2),
-    var(--color-background-secondary) var(--skeleton-loader-width)
+    var(--skeleton-bg-color) 0%,
+    var(--skeleton-wave-color) calc(var(--skeleton-loader-width) / 2),
+    var(--skeleton-bg-color) var(--skeleton-loader-width)
   );
   animation: skeleton-wave 1.5s linear infinite;
+
   background-repeat: no-repeat;
   background-attachment: fixed;
 }

package/__inner__/esm/components/Skeleton/Skeleton.d.ts

@@ -3,11 +3,16 @@ import './Skeleton.css';
 import { type SkeletonCircularProps } from './SkeletonCircular';
 import { type SkeletonRectangularProps } from './SkeletonRectangular';
 import { type SkeletonTypographyProps } from './SkeletonTypography';
-export type SkeletonProps = ({
+export type SkeletonProps = (({
     variant: 'rectangular';
 } & SkeletonRectangularProps) | ({
     variant: 'circular';
 } & SkeletonCircularProps) | ({
     variant: 'typography';
-} & SkeletonTypographyProps);
+} & SkeletonTypographyProps)) & {
+    /** Цвет волны */
+    waveColor?: string;
+    /** Цвет фона */
+    bgColor?: string;
+};
 export declare const Skeleton: React.FC<SkeletonProps>;

package/__inner__/esm/components/Skeleton/Skeleton.js

@@ -5,13 +5,15 @@ import { SkeletonCircular, } from './SkeletonCircular';
 import { SkeletonRectangular, } from './SkeletonRectangular';
 import { SkeletonTypography, } from './SkeletonTypography';
 export var Skeleton = forwardRef(function (props, ref) {
-    var variant = props.variant, children = props.children, other = __rest(props, ["variant", "children"]);
+    var variant = props.variant, children = props.children, waveColor = props.waveColor, bgColor = props.bgColor, styleProp = props.style, other = __rest(props, ["variant", "children", "waveColor", "bgColor", "style"]);
+    var style = __assign({ '--skeleton-wave-color': waveColor, '--skeleton-bg-color': bgColor }, styleProp);
+    var commonProps = __assign(__assign({}, other), { style: style, ref: ref });
     if (variant === 'circular') {
-        return (React.createElement(SkeletonCircular, __assign({}, other, { ref: ref }), children));
+        return React.createElement(SkeletonCircular, __assign({}, commonProps), children);
     }
     if (variant === 'typography') {
-        return React.createElement(SkeletonTypography, __assign({}, other, { ref: ref }));
+        return React.createElement(SkeletonTypography, __assign({}, commonProps));
     }
-    return (React.createElement(SkeletonRectangular, __assign({}, other, { ref: ref }), children));
+    return React.createElement(SkeletonRectangular, __assign({}, commonProps), children);
 });
 Skeleton.displayName = 'Skeleton';

package/__inner__/esm/components/Skeleton/SkeletonRectangular/SkeletonRectangular.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/classname';
 import '../Skeleton.css';
 export var cnSkeleton = cn('Skeleton');
 export var SkeletonRectangular = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, className = _a.className, other = __rest(_a, ["children", "width", "height", "className"]);
-    return (React.createElement("span", __assign({ className: cnSkeleton({ hasChildren: !!children }, [className]), style: { width: width, height: height } }, other, { ref: ref }), children));
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, style = _a.style, className = _a.className, other = __rest(_a, ["children", "width", "height", "style", "className"]);
+    return (React.createElement("span", __assign({ className: cnSkeleton({ hasChildren: !!children }, [className]), style: __assign({ width: width, height: height }, style) }, other, { ref: ref }), children));
 });
 SkeletonRectangular.displayName = 'SkeletonRectangular';

package/__inner__/esm/components/Skeleton/SkeletonTypography/SkeletonTypography.js

@@ -6,12 +6,10 @@ import { SkeletonRectangular } from '../SkeletonRectangular';
 import './SkeletonTypography.css';
 export var cnSkeletonTypography = cn('SkeletonTypography');
 export var SkeletonTypography = forwardRef(function (_a, ref) {
-    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, rows = _a.rows, other = __rest(_a, ["className", "typographyVariant", "width", "rows"]);
-    return (React.createElement("span", { className: cnSkeletonTypography('', [className]), style: { width: width }, ref: ref }, new Array(rows).fill(null).map(function (_, index) { return (React.createElement("span", __assign({ className: cnSkeletonTypography('Row', [
+    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, style = _a.style, rows = _a.rows, other = __rest(_a, ["className", "typographyVariant", "width", "style", "rows"]);
+    return (React.createElement("span", __assign({ className: cnSkeletonTypography('', [className]), style: { width: width } }, other, { ref: ref }), new Array(rows).fill(null).map(function (_, index) { return (React.createElement("span", { className: cnSkeletonTypography('Row', [
             cnTypography({ variant: typographyVariant }),
-        ]) }, other, { key: index }),
-        React.createElement(SkeletonRectangular, { style: {
-                width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%'
-            } }))); })));
+        ]), key: index },
+        React.createElement(SkeletonRectangular, { style: __assign({ width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%' }, style) }))); })));
 });
 SkeletonTypography.displayName = 'SkeletonTypography';

package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.d.ts

@@ -19,4 +19,6 @@ export declare const SnackbarItem: React.ForwardRefExoticComponent<{
     onEnter?: ((messageId: import("../..").SnackbarMessageId) => void) | undefined;
     onEntered?: ((messageId: import("../..").SnackbarMessageId) => void) | undefined;
     renderContent?: ((props: import("./types").SnackbarItemRenderContentProps) => React.ReactNode) | undefined;
+    collapseTransitionTimeout?: number | undefined;
+    contentTransitionTimeout?: number | undefined;
 } & Required<import("../..").SnackbarCommonProps> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.js

@@ -11,8 +11,8 @@ import { Collapse } from '../../../Collapse';
 import { SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT, SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT, } from '../../constants';
 export var cnSnackbarItem = cn('SnackbarItem');
 export var SnackbarItem = forwardRef(function (_a, ref) {
-    var title = _a.title, status = _a.status, description = _a.description, rootProps = _a.rootProps, messageId = _a.messageId, renderContentProp = _a.renderContent, open = _a.open, opening = _a.opening, disableWindowBlurListener = _a.disableWindowBlurListener, lifetime = _a.lifetime, anchorOrigin = _a.anchorOrigin, onClose = _a.onClose, onExited = _a.onExited, onEntered = _a.onEntered, onEnter = _a.onEnter, onExit = _a.onExit;
-    var _b = __read(useBoolean(true), 2), expanded = _b[0], collapseItem = _b[1].off;
+    var title = _a.title, status = _a.status, description = _a.description, rootProps = _a.rootProps, messageId = _a.messageId, renderContentProp = _a.renderContent, open = _a.open, opening = _a.opening, disableWindowBlurListener = _a.disableWindowBlurListener, lifetime = _a.lifetime, anchorOrigin = _a.anchorOrigin, onClose = _a.onClose, onExited = _a.onExited, onEntered = _a.onEntered, onEnter = _a.onEnter, onExit = _a.onExit, _b = _a.collapseTransitionTimeout, collapseTransitionTimeout = _b === void 0 ? SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT : _b, _c = _a.contentTransitionTimeout, contentTransitionTimeout = _c === void 0 ? SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT : _c;
+    var _d = __read(useBoolean(true), 2), expanded = _d[0], collapseItem = _d[1].off;
     var horizontal = anchorOrigin.horizontal, vertical = anchorOrigin.vertical;
     var handleClose = function () {
         onClose === null || onClose === void 0 ? void 0 : onClose(messageId);
@@ -70,21 +70,19 @@ export var SnackbarItem = forwardRef(function (_a, ref) {
         handler: pauseTimer,
         active: !disableWindowBlurListener && open
     });
-    return (React.createElement(Collapse, __assign({ ref: ref }, rootProps, { className: cnSnackbarItem('Collapse', [rootProps === null || rootProps === void 0 ? void 0 : rootProps.className]), timeout: SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT, expanded: expanded, onExited: handleCollapseExited, onEntered: 
+    return (React.createElement(Collapse, __assign({ ref: ref }, rootProps, { className: cnSnackbarItem('Collapse', [rootProps === null || rootProps === void 0 ? void 0 : rootProps.className]), timeout: collapseTransitionTimeout, expanded: expanded, onExited: handleCollapseExited, onEntered: 
         // У кого дольше анимация тот и вызывает
-        SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT >
-            SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT
+        collapseTransitionTimeout > contentTransitionTimeout
             ? handleEntered
             : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, appear: true }),
-        React.createElement(CSSTransition, { "in": open, classNames: cnSnackbarItem({ animation: true }), timeout: SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT, onEnter: function () { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(messageId); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(messageId); }, onExited: collapseItem, onEntered: 
+        React.createElement(CSSTransition, { "in": open, classNames: cnSnackbarItem({ animation: true }), timeout: contentTransitionTimeout, onEnter: function () { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(messageId); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(messageId); }, onExited: collapseItem, onEntered: 
             // У кого дольше анимация тот и вызывает
-            SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT <=
-                SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT
+            collapseTransitionTimeout <= contentTransitionTimeout
                 ? handleEntered
                 : undefined, appear: true },
             React.createElement("div", { style: {
-                    '--snackbar-item-transform-transition': "".concat(SNACKBAR_ITEM_COLLAPSE_TRANSITION_TIMEOUT, "ms"),
-                    '--snackbar-item-opacity-transition': "".concat(SNACKBAR_ITEM_CONTENT_TRANSITION_TIMEOUT, "ms")
+                    '--snackbar-item-transform-transition': "".concat(collapseTransitionTimeout, "ms"),
+                    '--snackbar-item-opacity-transition': "".concat(contentTransitionTimeout, "ms")
                 }, className: cnSnackbarItem({
                     anchorHorizontal: horizontal,
                     anchorVertical: vertical

package/__inner__/esm/components/Snackbar/components/SnackbarItem/types.d.ts

@@ -48,4 +48,6 @@ export type SnackbarItemProps = {
     onEntered?: (messageId: SnackbarMessageId) => void;
     /** Render-функция для кастомизации сообщения */
     renderContent?: (props: SnackbarItemRenderContentProps) => ReactNode;
+    collapseTransitionTimeout?: number;
+    contentTransitionTimeout?: number;
 } & Required<SnackbarCommonProps>;

package/__inner__/esm/components/ThemeProvider/_zIndex/Theme_zIndex_ozenDefault.css

@@ -6,6 +6,5 @@
   --z-index-modal: 1000;
   --z-index-popover: 1000;
   --z-index-snackbar: 1100;
-  --z-index-livespace: 9999;
-  --z-index-chat: 99999;
+  --z-index-chat: 9999;
 }

package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts

@@ -3,7 +3,7 @@ export declare const borderRadius: readonly ["--border-radius-l", "--border-radi
 export declare const borderWidth: readonly ["--border-width-s", "--border-width-m"];
 export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"];
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
-export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-livespace", "--z-index-chat"];
+export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
 export declare const typography: readonly ["--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-text-xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/esm/components/ThemeProvider/themes/helper.js

@@ -147,7 +147,6 @@ export var zIndex = [
     '--z-index-modal',
     '--z-index-popover',
     '--z-index-snackbar',
-    '--z-index-livespace',
     '--z-index-chat',
 ];
 export var space = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "React component library",
   "files": [
     "*"

package/DocViewer/package.json

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