@ozen-ui/kit 0.64.0 → 0.66.0

package/__inner__/esm/components/ChipNext/Chip.css

@@ -1,5 +1,6 @@
 /* stylelint-disable */
 .ChipNext {
+  --chip-outline: var(--shadow-outline-focused);
   --chip-border-radius: 24px;
   --chip-text-wrap: nowrap;
   background-color: var(--chip-bg-color);
@@ -72,17 +73,53 @@
       --chip-padding-x: var(--spacing-m);
     }
 .ChipNext_color_primary {
-      --chip-bg-color: var(--color-background-action-light);
-      --chip-bg-color-hover: var(--color-background-action-light-hover);
-      --chip-bg-color-active: var(--color-background-action-light-pressed);
-      --chip-text-color: var(--color-content-action-dark);
-    }
+    --chip-bg-color: var(--color-background-action-light);
+    --chip-bg-color-hover: var(--color-background-action-light-hover);
+    --chip-bg-color-active: var(--color-background-action-light-pressed);
+    --chip-text-color: var(--color-content-action-dark);
+  }
 .ChipNext_color_secondary {
-      --chip-bg-color: var(--color-background-secondary);
-      --chip-bg-color-hover: var(--color-background-secondary-hover);
-      --chip-bg-color-active: var(--color-background-secondary-pressed);
-      --chip-text-color: var(--color-content-primary);
-    }
+    --chip-bg-color: var(--color-background-secondary);
+    --chip-bg-color-hover: var(--color-background-secondary-hover);
+    --chip-bg-color-active: var(--color-background-secondary-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_main {
+    --chip-bg-color: var(--color-background-main);
+    --chip-bg-color-hover: var(--color-background-main-hover);
+    --chip-bg-color-active: var(--color-background-main-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_overlay {
+    --chip-bg-color: var(--color-background-overlay);
+    --chip-bg-color-hover: var(--color-background-overlay);
+    --chip-bg-color-active: var(--color-background-overlay);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action);
+    --chip-bg-color-hover: var(--color-background-action);
+    --chip-bg-color-active: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
+.ChipNext_color_secondary.ChipNext_checked, .ChipNext_color_main.ChipNext_checked, .ChipNext_color_overlay.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action-secondary);
+    --chip-bg-color-hover: var(--color-background-action-secondary);
+    --chip-bg-color-active: var(--color-background-action-secondary);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_secondary.ChipNext_checked.ChipNext_disabled, .ChipNext_color_main.ChipNext_checked.ChipNext_disabled, .ChipNext_color_overlay.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-secondary-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
 .ChipNext:hover {
     --chip-bg-color: var(--chip-bg-color-hover);
   }
@@ -90,19 +127,15 @@
     --chip-bg-color: var(--chip-bg-color-active);
   }
 .ChipNext:focus {
-    box-shadow: var(--shadow-outline-focused);
+    box-shadow: var(--chip-outline);
   }
 .ChipNext:focus:not(:focus-visible) {
     box-shadow: none;
   }
-.ChipNext_checked,
-  .ChipNext_checked:hover,
-  .ChipNext_checked:active {
-    --chip-bg-color: var(--color-background-action);
-    --chip-text-color: var(--color-content-action-on);
-  }
 .ChipNext_disabled {
     --chip-bg-color: var(--color-background-disabled);
+    --chip-bg-color-hover: var(--color-background-disabled);
+    --chip-bg-color-active: var(--color-background-disabled);
     --chip-text-color: var(--color-content-disabled);
     pointer-events: none;
   }

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

@@ -1,18 +1,43 @@
 import { __assign, __read, __rest } from "tslib";
 import './Chip.css';
-import React from 'react';
+import React, { useContext } from 'react';
+import { logger } from '@ozen-ui/logger';
+import { IS_DEV } from '../../constants/environment';
 import { useControlled } from '../../hooks/useControlled';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { renderContent } from '../../utils/renderContent';
+import { ChipGroupContext } from '../ChipGroup/ChipGroupContext';
 import { CHIP_DEFAULT_TAG, CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from './constants';
 export var cnChip = cn('ChipNext');
 export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
-    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", "value", 'data-testid']);
+    var checked = checkedProp;
+    var size = sizeProp;
+    var disabled = disabledProp;
+    var color = colorProp;
+    var chipGroup = useContext(ChipGroupContext);
+    if (chipGroup) {
+        if (IS_DEV && value === undefined) {
+            logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
+        }
+        if (checked === undefined && chipGroup.value) {
+            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
+        }
+        if (inProps.size === undefined && chipGroup.size) {
+            size = chipGroup.size;
+        }
+        if (inProps.disabled === undefined && chipGroup.disabled !== undefined) {
+            disabled = chipGroup.disabled;
+        }
+        if (inProps.color === undefined && chipGroup.color) {
+            color = chipGroup.color;
+        }
+    }
     var _f = __read(useControlled({
-        value: checkedProp,
+        value: checked,
         defaultValue: false,
         name: 'ChipNext',
         state: 'open',
@@ -21,8 +46,10 @@ export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
         if (disabled) {
             return;
         }
-        setCheckedState(!checkedState);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+        var newCheckedState = !checkedState;
+        setCheckedState(newCheckedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: newCheckedState, value: value });
+        chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.onClick(event, { checked: newCheckedState, value: value });
     };
     var renderIcon = function (content) {
         return renderContent({

package/__inner__/esm/components/ChipNext/types.d.ts

@@ -3,11 +3,15 @@ import type { IconProps } from '@ozen-ui/icons';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
 export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
-export declare const chipColorVariant: readonly ["primary", "secondary"];
 export type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipColorVariant = (typeof chipColorVariant)[number];
 export type ChipIcon = RenderContentType<IconProps>['content'];
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -18,9 +22,9 @@ export type ChipBaseProps = {
     /** Если `true` делает элемент выбранным */
     checked?: boolean;
     /** Обработчик нажатия */
-    onClick?: (e: MouseEvent<HTMLElement>, payload: {
-        checked: boolean;
-    }) => void;
+    onClick?: ChipOnClick;
+    /** Значение chip */
+    value?: string;
     /** Иконка слева */
     iconLeft?: ChipIcon;
     /** Иконка справа */

package/__inner__/esm/components/ChipNext/types.js

@@ -1,2 +1,9 @@
+// ---- COLOR ----
+export var chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+];
+// ---- SIZE ----
 export var chipSizeVariant = ['xs', 's', 'm', 'l'];
-export var chipColorVariant = ['primary', 'secondary'];

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

@@ -27,9 +27,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<{
     transitionProps?: Partial<import("react-transition-group/CSSTransition").CSSTransitionProps> & {
         "data-testid"?: string;
     };
-    windowProps?: import("../Paper").PaperProps & {
-        "data-testid"?: string;
-    };
+    windowProps?: import("../Paper").PaperProps;
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];

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

@@ -1,6 +1,9 @@
 import './Drawer.css';
 import React from 'react';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 export declare const Drawer: React.ForwardRefExoticComponent<{
     variant?: import("./types").DrawerVariant;
     size?: import("./types").DrawerSizeVariant;
@@ -28,9 +31,7 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     transitionProps?: Partial<import("react-transition-group/CSSTransition").CSSTransitionProps> & {
         "data-testid"?: string;
     };
-    windowProps?: import("../Paper").PaperProps & {
-        "data-testid"?: string;
-    };
+    windowProps?: import("../Paper").PaperProps;
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];

package/__inner__/esm/components/Drawer/Drawer.js

@@ -9,6 +9,9 @@ import { Modal } from '../Modal';
 import { DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
 import { iconButtonSizeMapper } from './utils';
 export var cnDrawer = cn('Drawer');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 export var Drawer = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,

package/__inner__/esm/components/DrawerNext/Drawer.css

@@ -0,0 +1,117 @@
+.DrawerNext {
+  --drawer-inline-padding: var(--spacing-s);
+  --drawer-block-padding: var(--spacing-l);
+  --drawer-blocks-gap: var(--spacing-m);
+  display: flex;
+}
+
+  .DrawerNext .Modal-Window {
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: var(--drawer-next-max-width);
+    block-size: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border: none;
+    inset-block-start: auto;
+    inset-inline-start: auto;
+    transform: none;
+    padding: 0;
+    outline: none;
+  }
+
+  /* ---- INNER CONTAINER ---- */
+
+  .DrawerNext-InnerContainer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-block-size: 100%;
+    overflow: auto;
+  }
+
+  /* ---- FULL SCREEN ---- */
+
+  .DrawerNext_fullScreen .Modal-Window {
+      border-radius: 0;
+    }
+
+  /* ---- DEVICE TYPE ----  */
+
+  /* --- DESKTOP ---  */
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_s {
+    --drawer-inline-padding: var(--spacing-m);
+    --drawer-block-padding: var(--spacing-m);
+  }
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_m {
+    --drawer-inline-padding: var(--spacing-l);
+    --drawer-blocks-gap: var(--spacing-l);
+  }
+
+  /* ---- CLOSE BUTTON ----  */
+
+  .DrawerNext-CloseButtonContainer {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  }
+
+  .DrawerNext_hasCloseButton {
+    --drawer-header-item-padding-right: var(--spacing-m);
+  }
+
+  /* ---- PLACEMENT ---- */
+
+  .DrawerNext_placement_right {
+    --drawer-start-position: 100%;
+    justify-content: flex-end;
+  }
+
+  .DrawerNext_placement_right .Modal-Window {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .DrawerNext_placement_left {
+    --drawer-start-position: -100%;
+    justify-content: flex-start;
+  }
+
+  .DrawerNext_placement_left .Modal-Window {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+  /* ---- ANIMATION ---- */
+
+  .DrawerNext_animation-appear .Modal-Window, .DrawerNext_animation-enter .Modal-Window {
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-appear-active .Modal-Window, .DrawerNext_animation-enter-active .Modal-Window {
+      transition: transform var(--transition-slow);
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-enter-done .Modal-Window {
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit .Modal-Window {
+      visibility: visible;
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit-active .Modal-Window {
+      visibility: visible;
+      transition: transform var(--transition-slow);
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-exit-done .Modal-Window {
+      visibility: hidden;
+      transform: translate(var(--drawer-start-position), 0);
+    }

package/__inner__/esm/components/DrawerNext/Drawer.d.ts

@@ -0,0 +1,11 @@
+import './Drawer.css';
+import './modules/DrawerBody/DrawerBody.css';
+import './modules/DrawerFooter/DrawerFooter.css';
+import './modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css';
+import './modules/DrawerHeader/DrawerHeader.css';
+import './modules/DrawerSubtitle/DrawerSubtitle.css';
+import './modules/DrawerTitle/DrawerTitle.css';
+import React from 'react';
+import type { DrawerProps } from './types';
+export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DrawerNext/Drawer.js

@@ -0,0 +1,52 @@
+import { __assign, __rest } from "tslib";
+import './Drawer.css';
+import './modules/DrawerBody/DrawerBody.css';
+import './modules/DrawerFooter/DrawerFooter.css';
+import './modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css';
+import './modules/DrawerHeader/DrawerHeader.css';
+import './modules/DrawerSubtitle/DrawerSubtitle.css';
+import './modules/DrawerTitle/DrawerTitle.css';
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { generateCSSVariables } from '../../utils/css';
+import { renderContent } from '../../utils/renderContent';
+import { Modal } from '../Modal';
+import { DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_VARIANT, DRAWER_CSS_VARIABLE, DRAWER_DEFAULT_DEVICE_TYPE, } from './constants';
+import { DrawerContext } from './DrawerContext';
+import { useDrawerWidth } from './hooks';
+import { DrawerCloseButton } from './modules';
+import { paperRadiusBySize } from './utils';
+export var cnDrawer = cn('DrawerNext');
+export var Drawer = forwardRef(function (inProps, ref) {
+    var _a;
+    var props = useThemeProps({
+        props: inProps,
+        name: 'DrawerNext',
+    });
+    var _b = props.variant, variant = _b === void 0 ? DRAWER_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? DRAWER_DEFAULT_SIZE : _c, _d = props.placement, placement = _d === void 0 ? DRAWER_DEFAULT_PLACEMENT : _d, _e = props.hideCloseButton, hideCloseButton = _e === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _e, _f = props.deviceType, deviceType = _f === void 0 ? DRAWER_DEFAULT_DEVICE_TYPE : _f, open = props.open, _g = props.onClose, onClose = _g === void 0 ? function () { } : _g, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, _h = props.renderCloseButton, renderCloseButton = _h === void 0 ? React.createElement(DrawerCloseButton, null) : _h, style = props.style, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "deviceType", "open", "onClose", "children", "className", "windowProps", "transitionProps", "renderCloseButton", "style"]);
+    var _j = useDrawerWidth({ variant: variant }), isFullWidth = _j.isFullWidth, maxWidth = _j.maxWidth;
+    var radius = paperRadiusBySize[deviceType][size];
+    return (React.createElement(DrawerContext.Provider, { value: {
+            size: size,
+            variant: variant,
+            onClose: onClose,
+            deviceType: deviceType,
+        } },
+        React.createElement(Modal, __assign({}, other, { open: open, style: __assign(__assign({}, style), generateCSSVariables((_a = {},
+                _a[DRAWER_CSS_VARIABLE.MAX_WIDTH] = "".concat(maxWidth, "px"),
+                _a))), onClose: onClose, windowProps: __assign({ radius: radius, shadow: 'l' }, windowProps), className: cnDrawer({
+                variant: variant,
+                size: size,
+                placement: placement,
+                deviceType: deviceType,
+                hasCloseButton: !hideCloseButton,
+                fullScreen: isFullWidth,
+            }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
+            !hideCloseButton && (React.createElement("div", { className: cnDrawer('CloseButtonContainer') }, renderContent({
+                content: renderCloseButton,
+                props: {},
+            }))),
+            React.createElement("div", { className: cnDrawer('InnerContainer') }, children))));
+});
+Drawer.displayName = 'Drawer';

package/__inner__/esm/components/DrawerNext/DrawerContext.d.ts

@@ -0,0 +1,10 @@
+import type { DrawerDeviceType, DrawerSizeVariantByDeviceType, DrawerVariant } from './entities';
+export type DrawerContextValue<DeviceType extends DrawerDeviceType> = {
+    size: DrawerSizeVariantByDeviceType[DeviceType];
+    variant: DrawerVariant;
+    onClose: () => void;
+    deviceType: DeviceType;
+};
+export declare const DrawerContextDefaultValue: DrawerContextValue<DrawerDeviceType>;
+export declare const DrawerContext: import("react").Context<DrawerContextValue<"mobile" | "desktop">>;
+export declare const useDrawerContext: <DeviceType extends DrawerDeviceType>() => DrawerContextValue<DeviceType>;

package/__inner__/esm/components/DrawerNext/DrawerContext.js

@@ -0,0 +1,17 @@
+import { useContext, createContext } from 'react';
+import { IS_DEV } from '../../constants/environment';
+import { DRAWER_DEFAULT_DEVICE_TYPE, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
+export var DrawerContextDefaultValue = {
+    size: DRAWER_DEFAULT_SIZE,
+    variant: DRAWER_DEFAULT_VARIANT,
+    onClose: function () { },
+    deviceType: DRAWER_DEFAULT_DEVICE_TYPE,
+};
+export var DrawerContext = createContext(DrawerContextDefaultValue);
+export var useDrawerContext = function () {
+    return useContext(DrawerContext);
+};
+// Именованный провайдер
+if (IS_DEV) {
+    DrawerContext.displayName = 'DrawerContext';
+}

package/__inner__/esm/components/DrawerNext/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DRAWER_DEFAULT_VARIANT = "medium";
+export declare const DRAWER_DEFAULT_SIZE = "m";
+export declare const DRAWER_DEFAULT_PLACEMENT = "right";
+export declare const DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+export declare const DRAWER_DEFAULT_DEVICE_TYPE = "desktop";
+export declare const DRAWER_CSS_VARIABLE: {
+    readonly MAX_WIDTH: "drawer-next-max-width";
+};

package/__inner__/esm/components/DrawerNext/constants.js

@@ -0,0 +1,8 @@
+export var DRAWER_DEFAULT_VARIANT = 'medium';
+export var DRAWER_DEFAULT_SIZE = 'm';
+export var DRAWER_DEFAULT_PLACEMENT = 'right';
+export var DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+export var DRAWER_DEFAULT_DEVICE_TYPE = 'desktop';
+export var DRAWER_CSS_VARIABLE = {
+    MAX_WIDTH: 'drawer-next-max-width',
+};

package/__inner__/esm/components/DrawerNext/entities/device.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerDeviceType: readonly ["mobile", "desktop"];
+export type DrawerDeviceType = (typeof drawerDeviceType)[number];

package/__inner__/esm/components/DrawerNext/entities/device.js

@@ -0,0 +1 @@
+export var drawerDeviceType = ['mobile', 'desktop'];

package/__inner__/esm/components/DrawerNext/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './device';
+export * from './placement';
+export * from './size';
+export * from './variant';

package/__inner__/esm/components/DrawerNext/entities/index.js

@@ -0,0 +1,4 @@
+export * from './device';
+export * from './placement';
+export * from './size';
+export * from './variant';

package/__inner__/esm/components/DrawerNext/entities/placement.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerPlacementVariant: readonly ["left", "right"];
+export type DrawerPlacementVariant = (typeof drawerPlacementVariant)[number];

package/__inner__/esm/components/DrawerNext/entities/placement.js

@@ -0,0 +1 @@
+export var drawerPlacementVariant = ['left', 'right'];

package/__inner__/esm/components/DrawerNext/entities/size.d.ts

@@ -0,0 +1,11 @@
+import type { DrawerDeviceType } from './device';
+export declare const drawerSizeVariantByDeviceType: {
+    readonly desktop: readonly ["s", "m"];
+    readonly mobile: readonly ["m"];
+};
+export type DrawerSizeVariantByDeviceType = {
+    [key in DrawerDeviceType]: (typeof drawerSizeVariantByDeviceType)[key][number];
+};
+export type DrawerValueBySize<DeviceType extends DrawerDeviceType, Value> = {
+    [key in DrawerSizeVariantByDeviceType[DeviceType]]: Value;
+};

package/__inner__/esm/components/DrawerNext/entities/size.js

@@ -0,0 +1,4 @@
+export var drawerSizeVariantByDeviceType = {
+    desktop: ['s', 'm'],
+    mobile: ['m'],
+};

package/__inner__/esm/components/DrawerNext/entities/variant.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerVariant: readonly ["little", "medium", "large"];
+export type DrawerVariant = (typeof drawerVariant)[number];

package/__inner__/esm/components/DrawerNext/entities/variant.js

@@ -0,0 +1 @@
+export var drawerVariant = ['little', 'medium', 'large'];

package/__inner__/esm/components/DrawerNext/hooks/index.d.ts

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

package/__inner__/esm/components/DrawerNext/hooks/index.js

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

package/__inner__/esm/components/DrawerNext/hooks/useDrawerWidth.d.ts

@@ -0,0 +1,7 @@
+import type { DrawerVariant } from '../entities';
+export declare const useDrawerWidth: ({ variant }: {
+    variant: DrawerVariant;
+}) => {
+    isFullWidth: boolean;
+    maxWidth: number;
+};

package/__inner__/esm/components/DrawerNext/hooks/useDrawerWidth.js

@@ -0,0 +1,32 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { isServer } from '../../../constants/environment';
+import { useEventListener } from '../../../hooks/useEventListener';
+import { maxWidthByVariant } from '../utils';
+export var useDrawerWidth = function (_a) {
+    var variant = _a.variant;
+    var currentMaxWidth = maxWidthByVariant[variant];
+    var checkIsFullWidth = function () {
+        if (isServer) {
+            return false;
+        }
+        return currentMaxWidth >= window.innerWidth;
+    };
+    var _b = __read(useState(function () { return checkIsFullWidth(); }), 2), isFullWidth = _b[0], setIsFullWidth = _b[1];
+    var recalculateIsFullWidth = function () {
+        setIsFullWidth(checkIsFullWidth());
+    };
+    useEventListener({
+        eventName: 'resize',
+        handler: function () {
+            recalculateIsFullWidth();
+        },
+    });
+    useEffect(function () {
+        recalculateIsFullWidth();
+    }, []);
+    return {
+        isFullWidth: isFullWidth,
+        maxWidth: currentMaxWidth,
+    };
+};

package/__inner__/esm/components/DrawerNext/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Drawer';
+export * from './types';
+export * from './modules';
+export * from './entities';
+export * from './DrawerContext';

package/__inner__/esm/components/DrawerNext/index.js

@@ -0,0 +1,5 @@
+export * from './Drawer';
+export * from './types';
+export * from './modules';
+export * from './entities';
+export * from './DrawerContext';

package/__inner__/esm/components/DrawerNext/modules/DrawerBody/DrawerBody.css

@@ -0,0 +1,20 @@
+.DrawerNextBody {
+  --drawer-body-first-child-margin-top: var(--spacing-3xl);
+  padding-inline: var(--drawer-inline-padding);
+  flex-grow: 1;
+  overflow: auto;
+}
+
+  .DrawerNextBody:first-child {
+    margin-block-start: var(--drawer-body-first-child-margin-top);
+  }
+
+  .DrawerNextBody:last-child {
+    margin-block-end: var(--drawer-block-padding);
+  }
+
+  /* ---- DEVICE TYPE ---- */
+
+  .DrawerNextBody_deviceType_desktop.DrawerNextBody_size_s {
+    --drawer-body-first-child-margin-top: var(--spacing-xl);
+  }

package/__inner__/esm/components/DrawerNext/modules/DrawerBody/DrawerBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DrawerBodyProps } from './types';
+export declare const cnDrawerBody: import("@bem-react/classname").ClassNameFormatter;
+export declare const DrawerBody: React.ForwardRefExoticComponent<Omit<DrawerBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DrawerNext/modules/DrawerBody/DrawerBody.js

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { useDrawerContext } from '../../DrawerContext';
+export var cnDrawerBody = cn('DrawerNextBody');
+export var DrawerBody = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, other = __rest(_a, ["children", "className"]);
+    var _b = useDrawerContext(), size = _b.size, deviceType = _b.deviceType;
+    return (React.createElement("div", __assign({ ref: ref, className: cnDrawerBody({
+            size: size,
+            deviceType: deviceType,
+        }, [className]) }, other), children));
+});
+DrawerBody.displayName = 'DrawerBody';

package/__inner__/esm/components/DrawerNext/modules/DrawerBody/index.d.ts

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

package/__inner__/esm/components/DrawerNext/modules/DrawerBody/index.js

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