@ozen-ui/kit 0.0.2 → 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/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__/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.0.2",
+  "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"
-}