@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Snackbar/store/helpers/updateMessagesFromQueue.js

@@ -0,0 +1,33 @@
+"use strict";
+exports.__esModule = true;
+exports.updateMessagesFromQueue = void 0;
+var tslib_1 = require("tslib");
+var updateMessagesFromQueue = function (state) {
+    var queue = state.queue, messages = state.messages, maxMessages = state.providerProps.maxMessages;
+    var isSomeMessageInClosingProcess = messages.some(function (_a) {
+        var open = _a.open;
+        return !open;
+    });
+    var isSomeMessageInOpeningProcess = messages.some(function (_a) {
+        var opening = _a.opening;
+        return opening;
+    });
+    if (!queue.length ||
+        isSomeMessageInClosingProcess ||
+        isSomeMessageInOpeningProcess) {
+        return state;
+    }
+    var oldestMessage = messages[0];
+    if (messages.length === maxMessages) {
+        var newMessages = messages.map(function (messageItem) {
+            if ((oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.messageId) === messageItem.messageId) {
+                return tslib_1.__assign(tslib_1.__assign({}, messageItem), { open: false });
+            }
+            return messageItem;
+        });
+        return tslib_1.__assign(tslib_1.__assign({}, state), { messages: newMessages });
+    }
+    var _a = tslib_1.__read(queue), firstMessageItemFromQueue = _a[0], otherQueue = _a.slice(1);
+    return tslib_1.__assign(tslib_1.__assign({}, state), { messages: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(messages), false), [firstMessageItemFromQueue], false), queue: otherQueue });
+};
+exports.updateMessagesFromQueue = updateMessagesFromQueue;

package/__inner__/cjs/components/Snackbar/store/index.d.ts

@@ -0,0 +1 @@
+export * from './Snackbar.reducer';

package/__inner__/cjs/components/Snackbar/store/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Snackbar.reducer"), exports);

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

@@ -0,0 +1,34 @@
+import type { SnackbarItemProps } from '../components/SnackbarItem';
+import type { SnackbarMessageId, SnackbarCommonProps, SnackbarPushMessageProps } from '../types';
+export type SnackbarProviderProps = {
+    /** Максимальное количество одновременно отображенных сообщений */
+    maxMessages: number;
+} & Required<SnackbarCommonProps>;
+export type SnackbarState = {
+    /** Свойства сообщения переданные через провайдер */
+    providerProps: SnackbarProviderProps;
+    /** Показанные сообщения */
+    messages: SnackbarItemProps[];
+    /** Сообщения в очереди */
+    queue: SnackbarItemProps[];
+};
+export type PushMessageActionPayload = SnackbarPushMessageProps & Required<Pick<SnackbarPushMessageProps, 'messageId'>>;
+export type SnackbarAction = {
+    type: 'push-message';
+    payload: PushMessageActionPayload;
+} | {
+    type: 'message-opening-done';
+    payload: SnackbarMessageId;
+} | {
+    type: 'update-messages-from-queue';
+    payload?: never;
+} | {
+    type: 'close-message';
+    payload?: SnackbarMessageId;
+} | {
+    type: 'delete-message';
+    payload: SnackbarMessageId;
+} | {
+    type: 'set-provider-props';
+    payload: SnackbarProviderProps;
+};

package/__inner__/cjs/components/Snackbar/store/types.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

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

@@ -0,0 +1,39 @@
+import { SnackbarItemProps } from './components/SnackbarItem';
+export declare const snackbarVerticalAlignVariant: readonly ["top", "bottom"];
+export declare const snackbarHorizontalAlignVariant: readonly ["left", "center", "right"];
+export declare const snackbarStatusVariant: readonly ["success", "info", "warning", "error"];
+export type SnackbarStatusVariant = (typeof snackbarStatusVariant)[number];
+export type SnackbarVerticalAlignVariant = (typeof snackbarVerticalAlignVariant)[number];
+export type SnackbarHorizontalAlignVariant = (typeof snackbarHorizontalAlignVariant)[number];
+export type SnackbarAnchorOrigin = {
+    horizontal: SnackbarHorizontalAlignVariant;
+    vertical: SnackbarVerticalAlignVariant;
+};
+export type SnackbarMessageId = string | number;
+export type SnackbarCommonProps = {
+    /** Статус всплывающего сообщения */
+    status?: SnackbarStatusVariant;
+    /** Расположение сообщения относительно контейнера */
+    anchorOrigin?: SnackbarAnchorOrigin;
+    /** Время через которое автоматически закроется сообщение после отображения */
+    lifetime?: number;
+    /** Если {true} продолжит отсчет lifetime при потере фокуса с окна браузера  */
+    disableWindowBlurListener?: boolean;
+};
+export type SnackbarPushMessageProps = Partial<Pick<SnackbarItemProps, 'description' | 'messageId' | 'anchorOrigin' | 'rootProps' | 'onClose' | 'onExit' | 'onExited' | 'onEnter' | 'onEntered' | 'renderContent'>> & {
+    title: SnackbarItemProps['title'];
+} & SnackbarCommonProps;
+export type SnackbarItemsByAnchorOrigin = {
+    [key: string]: SnackbarItemProps[];
+};
+export type SnackbarPushMessageCallback = (props: SnackbarPushMessageProps) => SnackbarMessageId;
+export type SnackbarCloseMessageCallback = (SnackbarMessageId?: SnackbarMessageId) => void;
+export type SnackbarContextValue = {
+    /** Добавить новое сообщение в очередь */
+    pushMessage: SnackbarPushMessageCallback;
+    /**
+     * Закрыть сообщение
+     * Если не передан SnackbarMessageId, закрываются все сообщения
+     * */
+    closeMessage: SnackbarCloseMessageCallback;
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+exports.snackbarStatusVariant = exports.snackbarHorizontalAlignVariant = exports.snackbarVerticalAlignVariant = void 0;
+exports.snackbarVerticalAlignVariant = ['top', 'bottom'];
+exports.snackbarHorizontalAlignVariant = [
+    'left',
+    'center',
+    'right',
+];
+exports.snackbarStatusVariant = [
+    'success',
+    'info',
+    'warning',
+    'error',
+];

package/__inner__/cjs/components/Stack/Stack.css

@@ -0,0 +1,307 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */
+.Stack {
+  display: inline-flex;
+  vertical-align: middle;
+}
+.Stack-Item {
+    display: inline-block;
+  }
+.Stack_direction_row {
+    flex-direction: row;
+  }
+.Stack_direction_column {
+    flex-direction: column;
+  }
+.Stack_direction_rowReverse {
+    flex-direction: row-reverse;
+  }
+.Stack_direction_columnReverse {
+    flex-direction: column-reverse;
+  }
+.Stack_gap_0 {
+    gap: 0;
+  }
+.Stack_gap_xs {
+    gap: var(--space-xs);
+  }
+.Stack_gap_s {
+    gap: var(--space-s);
+  }
+.Stack_gap_m {
+    gap: var(--space-m);
+  }
+.Stack_gap_l {
+    gap: var(--space-l);
+  }
+.Stack_gap_xl {
+    gap: var(--space-xl);
+  }
+.Stack_gap_2xl {
+    gap: var(--space-2xl);
+  }
+.Stack_gap_3xl {
+    gap: var(--space-3xl);
+  }
+.Stack_gap_4xl {
+    gap: var(--space-4xl);
+  }
+.Stack_gap_5xl {
+    gap: var(--space-5xl);
+  }
+.Stack_gap_6xl {
+    gap: var(--space-6xl);
+  }
+.Stack_gap_7xl {
+    gap: var(--space-7xl);
+  }
+.Stack_gap_8xl {
+    gap: var(--space-8xl);
+  }
+.Stack_wrap {
+    flex-wrap: wrap;
+  }
+.Stack_fullWidth {
+    inline-size: 100%;
+  }
+.Stack_align_center {
+      align-items: center;
+    }
+.Stack_align_start {
+      align-items: flex-start;
+    }
+.Stack_align_end {
+      align-items: flex-end;
+    }
+.Stack_align_baseline {
+      align-items: baseline;
+    }
+.Stack_justify_start {
+      justify-content: flex-start;
+    }
+.Stack_justify_center {
+      justify-content: center;
+    }
+.Stack_justify_end {
+      justify-content: end;
+    }
+.Stack_justify_spaceBetween {
+      justify-content: space-between;
+    }
+.Stack_justify_spaceAround {
+      justify-content: space-around;
+    }
+@media (width >= 0) {
+      .Stack_direction_xs_row {
+    flex-direction: row;
+  }
+      .Stack_direction_xs_column {
+    flex-direction: column;
+  }
+      .Stack_direction_xs_rowReverse {
+    flex-direction: row-reverse;
+  }
+      .Stack_direction_xs_columnReverse {
+    flex-direction: column-reverse;
+  }
+      .Stack_gap_xs_0 {
+    gap: 0;
+  }
+      .Stack_gap_xs_xs {
+    gap: var(--space-xs);
+  }
+      .Stack_gap_xs_s {
+    gap: var(--space-s);
+  }
+      .Stack_gap_xs_m {
+    gap: var(--space-m);
+  }
+      .Stack_gap_xs_l {
+    gap: var(--space-l);
+  }
+      .Stack_gap_xs_xl {
+    gap: var(--space-xl);
+  }
+      .Stack_gap_xs_2xl {
+    gap: var(--space-2xl);
+  }
+      .Stack_gap_xs_3xl {
+    gap: var(--space-3xl);
+  }
+      .Stack_gap_xs_4xl {
+    gap: var(--space-4xl);
+  }
+      .Stack_gap_xs_5xl {
+    gap: var(--space-5xl);
+  }
+      .Stack_gap_xs_6xl {
+    gap: var(--space-6xl);
+  }
+      .Stack_gap_xs_7xl {
+    gap: var(--space-7xl);
+  }
+      .Stack_gap_xs_8xl {
+    gap: var(--space-8xl);
+  }
+  }
+@media (width >= 640px) {
+      .Stack_direction_s_row {
+    flex-direction: row;
+  }
+      .Stack_direction_s_column {
+    flex-direction: column;
+  }
+      .Stack_direction_s_rowReverse {
+    flex-direction: row-reverse;
+  }
+      .Stack_direction_s_columnReverse {
+    flex-direction: column-reverse;
+  }
+      .Stack_gap_s_0 {
+    gap: 0;
+  }
+      .Stack_gap_s_xs {
+    gap: var(--space-xs);
+  }
+      .Stack_gap_s_s {
+    gap: var(--space-s);
+  }
+      .Stack_gap_s_m {
+    gap: var(--space-m);
+  }
+      .Stack_gap_s_l {
+    gap: var(--space-l);
+  }
+      .Stack_gap_s_xl {
+    gap: var(--space-xl);
+  }
+      .Stack_gap_s_2xl {
+    gap: var(--space-2xl);
+  }
+      .Stack_gap_s_3xl {
+    gap: var(--space-3xl);
+  }
+      .Stack_gap_s_4xl {
+    gap: var(--space-4xl);
+  }
+      .Stack_gap_s_5xl {
+    gap: var(--space-5xl);
+  }
+      .Stack_gap_s_6xl {
+    gap: var(--space-6xl);
+  }
+      .Stack_gap_s_7xl {
+    gap: var(--space-7xl);
+  }
+      .Stack_gap_s_8xl {
+    gap: var(--space-8xl);
+  }
+  }
+@media (width >=  1024px) {
+      .Stack_direction_m_row {
+    flex-direction: row;
+  }
+      .Stack_direction_m_column {
+    flex-direction: column;
+  }
+      .Stack_direction_m_rowReverse {
+    flex-direction: row-reverse;
+  }
+      .Stack_direction_m_columnReverse {
+    flex-direction: column-reverse;
+  }
+      .Stack_gap_m_0 {
+    gap: 0;
+  }
+      .Stack_gap_m_xs {
+    gap: var(--space-xs);
+  }
+      .Stack_gap_m_s {
+    gap: var(--space-s);
+  }
+      .Stack_gap_m_m {
+    gap: var(--space-m);
+  }
+      .Stack_gap_m_l {
+    gap: var(--space-l);
+  }
+      .Stack_gap_m_xl {
+    gap: var(--space-xl);
+  }
+      .Stack_gap_m_2xl {
+    gap: var(--space-2xl);
+  }
+      .Stack_gap_m_3xl {
+    gap: var(--space-3xl);
+  }
+      .Stack_gap_m_4xl {
+    gap: var(--space-4xl);
+  }
+      .Stack_gap_m_5xl {
+    gap: var(--space-5xl);
+  }
+      .Stack_gap_m_6xl {
+    gap: var(--space-6xl);
+  }
+      .Stack_gap_m_7xl {
+    gap: var(--space-7xl);
+  }
+      .Stack_gap_m_8xl {
+    gap: var(--space-8xl);
+  }
+  }
+@media (width >= 1280px) {
+      .Stack_direction_l_row {
+    flex-direction: row;
+  }
+      .Stack_direction_l_column {
+    flex-direction: column;
+  }
+      .Stack_direction_l_rowReverse {
+    flex-direction: row-reverse;
+  }
+      .Stack_direction_l_columnReverse {
+    flex-direction: column-reverse;
+  }
+      .Stack_gap_l_0 {
+    gap: 0;
+  }
+      .Stack_gap_l_xs {
+    gap: var(--space-xs);
+  }
+      .Stack_gap_l_s {
+    gap: var(--space-s);
+  }
+      .Stack_gap_l_m {
+    gap: var(--space-m);
+  }
+      .Stack_gap_l_l {
+    gap: var(--space-l);
+  }
+      .Stack_gap_l_xl {
+    gap: var(--space-xl);
+  }
+      .Stack_gap_l_2xl {
+    gap: var(--space-2xl);
+  }
+      .Stack_gap_l_3xl {
+    gap: var(--space-3xl);
+  }
+      .Stack_gap_l_4xl {
+    gap: var(--space-4xl);
+  }
+      .Stack_gap_l_5xl {
+    gap: var(--space-5xl);
+  }
+      .Stack_gap_l_6xl {
+    gap: var(--space-6xl);
+  }
+      .Stack_gap_l_7xl {
+    gap: var(--space-7xl);
+  }
+      .Stack_gap_l_8xl {
+    gap: var(--space-8xl);
+  }
+  }

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

@@ -0,0 +1,4 @@
+import './Stack.css';
+import type { StackBaseProps } from './types';
+export declare const cnStack: import("@bem-react/classname").ClassNameFormatter;
+export declare const Stack: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<StackBaseProps, "div">;

package/__inner__/cjs/components/Stack/Stack.js

@@ -0,0 +1,41 @@
+"use strict";
+exports.__esModule = true;
+exports.Stack = exports.cnStack = void 0;
+var tslib_1 = require("tslib");
+require("./Stack.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var utils_1 = require("./utils");
+exports.cnStack = (0, classname_1.cn)('Stack');
+exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Stack'
+    });
+    var _a = props.as, Tag = _a === void 0 ? 'div' : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
+    var childNodes = react_1.Children.toArray(children);
+    if (!childNodes.length) {
+        return null;
+    }
+    var resolveChildren = function () {
+        if (!shouldWrapChildren && !divider) {
+            return children;
+        }
+        return childNodes.map(function (child, i) {
+            if (!(0, react_1.isValidElement)(child))
+                return null;
+            return (react_1["default"].createElement(react_1.Fragment, { key: child.key },
+                shouldWrapChildren ? (react_1["default"].createElement("div", { className: (0, exports.cnStack)('Item') }, child)) : (child),
+                divider && childNodes.length - 1 !== i && divider));
+        });
+    };
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, other, { className: (0, classnames_1.classnames)((0, exports.cnStack)('', {
+            align: align,
+            justify: justify,
+            fullWidth: fullWidth,
+            wrap: wrap
+        }), (0, utils_1.generateDirectionCn)(exports.cnStack, direction), (0, utils_1.generateGapCn)(exports.cnStack, gap), className), ref: ref }), resolveChildren()));
+});

package/__inner__/cjs/components/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stack';
+export * from './types';

package/__inner__/cjs/components/Stack/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Stack"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Stack/types.d.ts

@@ -0,0 +1,30 @@
+import type { ElementType, ReactElement } from 'react';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
+export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
+export declare const stackJustifyVariant: readonly ["start", "center", "end", "spaceBetween", "spaceAround"];
+export type StackGapVariant = (typeof stackGapVariant)[number];
+export type StackDirectionVariant = (typeof stackDirectionVariant)[number];
+export type StackAlignVariant = (typeof stackAlignVariant)[number];
+export type StackJustifyVariant = (typeof stackJustifyVariant)[number];
+export type StackBaseProps = {
+    /** Направление */
+    direction?: ResponsiveValue<StackDirectionVariant>;
+    /** Выравнивание */
+    align?: StackAlignVariant;
+    /** Пространство между элементами */
+    justify?: StackJustifyVariant;
+    /** Размер отступов */
+    gap?: ResponsiveValue<StackGapVariant>;
+    /** Если {true} автоматически переносит строки (полезно при direction = 'row') */
+    wrap?: boolean;
+    /** Если {true} растягивает компонент на всю ширину */
+    fullWidth?: boolean;
+    /** Если {true} дочерние компоненты стека будут обернуты в компонент StackItem с "display: inline-block" и заданными отступами */
+    shouldWrapChildren?: boolean;
+    /** React-элемент для разделителя между дочерними компонентами стека */
+    divider?: ReactElement;
+};
+export type StackProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<StackBaseProps, As>;

package/__inner__/cjs/components/Stack/types.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+exports.stackJustifyVariant = exports.stackAlignVariant = exports.stackDirectionVariant = exports.stackGapVariant = void 0;
+exports.stackGapVariant = [
+    '0',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl',
+    '5xl',
+    '6xl',
+    '7xl',
+    '8xl',
+];
+exports.stackDirectionVariant = [
+    'row',
+    'column',
+    'rowReverse',
+    'columnReverse',
+];
+exports.stackAlignVariant = [
+    'center',
+    'start',
+    'end',
+    'baseline',
+];
+exports.stackJustifyVariant = [
+    'start',
+    'center',
+    'end',
+    'spaceBetween',
+    'spaceAround',
+];

package/__inner__/cjs/components/Stack/utils/generateDirectionCn.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { StackProps } from '../types';
+export declare const generateDirectionCn: (cn: ClassNameFormatter, direction: StackProps['direction']) => string;

package/__inner__/cjs/components/Stack/utils/generateDirectionCn.js

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.generateDirectionCn = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = require("@bem-react/classnames");
+var isPlainObject_1 = require("../../../utils/isPlainObject");
+var generateDirectionCn = function (cn, direction) {
+    if ((0, isPlainObject_1.isPlainObject)(direction)) {
+        return (0, classnames_1.classnames)(Object.entries(direction)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = tslib_1.__read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["direction_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return cn({ direction: direction });
+};
+exports.generateDirectionCn = generateDirectionCn;

package/__inner__/cjs/components/Stack/utils/generateGapCn.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { StackProps } from '../types';
+export declare const generateGapCn: (cn: ClassNameFormatter, gap: StackProps['gap']) => string;

package/__inner__/cjs/components/Stack/utils/generateGapCn.js

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.generateGapCn = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = require("@bem-react/classnames");
+var isPlainObject_1 = require("../../../utils/isPlainObject");
+var generateGapCn = function (cn, gap) {
+    if ((0, isPlainObject_1.isPlainObject)(gap)) {
+        return (0, classnames_1.classnames)(Object.entries(gap)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = tslib_1.__read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["gap_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return cn({ gap: gap });
+};
+exports.generateGapCn = generateGapCn;

package/__inner__/cjs/components/Stack/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './generateGapCn';
+export * from './generateDirectionCn';

package/__inner__/cjs/components/Stack/utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./generateGapCn"), exports);
+tslib_1.__exportStar(require("./generateDirectionCn"), exports);