@invoicebox/ui 0.1.0-alpha.32 → 0.1.0-alpha.321

package/dist/components/common/Calendar/index.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Range = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _ = require(".");
+require("react-calendar/dist/Calendar.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'common/Calendar',
+  component: _.Calendar,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Component = function Component(_ref) {
+  var maxDate = _ref.maxDate,
+    minDate = _ref.minDate;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = (0, _react.useCallback)(function (date) {
+    setValue(date);
+    (0, _addonActions.action)('change')(date);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_.Calendar, {
+    value: value,
+    onChange: handleChange,
+    maxDate: maxDate ? new Date(maxDate) : undefined,
+    minDate: minDate ? new Date(minDate) : undefined
+  });
+};
+var RangeComponent = function RangeComponent(_ref2) {
+  var maxDate = _ref2.maxDate,
+    minDate = _ref2.minDate;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = (0, _react.useCallback)(function (date) {
+    setValue(date);
+    (0, _addonActions.action)('change')(date);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_.Calendar, {
+    value: value,
+    onChange: handleChange,
+    maxDate: maxDate ? new Date(maxDate) : undefined,
+    minDate: minDate ? new Date(minDate) : undefined,
+    selectRange: true
+  });
+};
+var maxDate = new Date();
+maxDate.setMonth(maxDate.getMonth() + 1);
+var minDate = new Date();
+minDate.setMonth(minDate.getMonth() - 1);
+var generalProps = {
+  maxDate: maxDate,
+  minDate: minDate
+};
+var Default = exports.Default = {
+  render: Component,
+  args: generalProps
+};
+var Range = exports.Range = {
+  render: RangeComponent,
+  args: generalProps
+};

package/dist/components/common/Calendar/palette.d.ts

@@ -0,0 +1,11 @@
+import { TAbstractPalette } from '../../../palette';
+export type TCalendarPalette = {
+    arrow: string;
+    weekday: string;
+    tile: string;
+    tileActive: string;
+    tileBgActive: string;
+    tileBgRangeBetween: string;
+    month: string;
+};
+export declare const generateCalendarPalette: (abstractPalette: TAbstractPalette) => TCalendarPalette;

package/dist/components/common/Calendar/palette.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCalendarPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generateCalendarPalette = exports.generateCalendarPalette = function generateCalendarPalette(abstractPalette) {
+  return {
+    arrow: abstractPalette.primary,
+    weekday: (0, _hexToRgba["default"])(abstractPalette.primary, 0.4),
+    tile: (0, _hexToRgba["default"])(abstractPalette.primary, 0.7),
+    tileActive: abstractPalette.primary,
+    tileBgActive: abstractPalette.secondary,
+    tileBgRangeBetween: (0, _hexToRgba["default"])(abstractPalette.primary, 0.05),
+    month: abstractPalette.primary
+  };
+};

package/dist/components/common/Calendar/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const LibCalendar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react-calendar").CalendarProps & import("react").RefAttributes<unknown>, "ref"> & {
+    ref?: ((instance: unknown) => void) | import("react").RefObject<unknown> | null | undefined;
+}, {
+    $arrow: string;
+    $weekDay: string;
+    $tile: string;
+    $tileActive: string;
+    $tileBgActive: string;
+    $tileBgRangeBetween: string;
+    $month: string;
+    $isLargeMobileSize: boolean;
+    selectRange?: boolean | undefined;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-calendar").CalendarProps & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/Calendar/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LibCalendar = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactCalendar = _interopRequireDefault(require("react-calendar"));
+var _breakpoints = require("../../../breakpoints");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var largeMobileStyles = (0, _styledComponents.css)(["@media ", "{width:328px;}.react-calendar__navigation{@media ", "{margin-bottom:18px;}}.react-calendar__navigation__label{@media ", "{font-size:20px;font-weight:500;line-height:25px;}}.react-calendar__month-view__weekdays{@media ", "{margin-bottom:6px;}}.react-calendar__tile{@media ", "{height:48px;font-size:15px;font-weight:400;line-height:20px;border-radius:50%;}}"], _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm);
+var LibCalendar = exports.LibCalendar = (0, _styledComponents["default"])(_reactCalendar["default"]).withConfig({
+  displayName: "styles__LibCalendar",
+  componentId: "sc-1evd6f-0"
+})(["border:none;width:210px;min-width:210px;background:transparent;.react-calendar__navigation{margin-bottom:16px;height:28px;}.react-calendar__navigation__arrow{font-size:24px;background-color:transparent !important;color:", ";width:28px;height:28px;min-width:28px;display:flex;justify-content:center;align-items:center;}.react-calendar__navigation__arrow:disabled{opacity:0.4;cursor:default;}.react-calendar__navigation__arrow:hover:not([disabled]){opacity:0.6;}.react-calendar__navigation__label{font-size:14px;background-color:transparent !important;cursor:default;color:", ";}.react-calendar__month-view__weekdays__weekday{color:", ";font-size:12px;font-weight:400;line-height:18px;width:30px;height:22px;padding:0;display:flex;justify-content:center;align-items:center;}.react-calendar__month-view__weekdays__weekday abbr{text-decoration:none;}.react-calendar__tile{font-size:12px;color:", ";background-color:transparent !important;padding:0;border-radius:5px;margin-bottom:4px;height:22px;}.react-calendar__tile:disabled{opacity:0.4;cursor:default;}.react-calendar__tile:hover:not([disabled]){opacity:0.6;}.react-calendar__tile--active{background-color:", " !important;color:", ";}.react-calendar__tile--active:hover{opacity:1 !important;}", " ", ""], function (_ref) {
+  var $arrow = _ref.$arrow;
+  return $arrow;
+}, function (_ref2) {
+  var $month = _ref2.$month;
+  return $month;
+}, function (_ref3) {
+  var $weekDay = _ref3.$weekDay;
+  return $weekDay;
+}, function (_ref4) {
+  var $tile = _ref4.$tile;
+  return $tile;
+}, function (_ref5) {
+  var $tileBgActive = _ref5.$tileBgActive;
+  return $tileBgActive;
+}, function (_ref6) {
+  var $tileActive = _ref6.$tileActive;
+  return $tileActive;
+}, function (_ref7) {
+  var selectRange = _ref7.selectRange,
+    $tileBgActive = _ref7.$tileBgActive,
+    $tileBgRangeBetween = _ref7.$tileBgRangeBetween;
+  return selectRange && "\n            .react-calendar__tile--range {\n                border-radius: 0;\n            }\n\n            .react-calendar__tile--rangeBothEnds {\n                border-radius: 5px;\n            }\n            \n            .react-calendar__tile--active {\n                background-color: ".concat($tileBgRangeBetween, " !important;\n            }\n\n            .react-calendar__tile--rangeStart {\n                border-top-left-radius: 5px;\n                border-bottom-left-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n\n            .react-calendar__tile--rangeEnd {\n                border-top-right-radius: 5px;\n                border-bottom-right-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n    ");
+}, function (_ref8) {
+  var $isLargeMobileSize = _ref8.$isLargeMobileSize;
+  return $isLargeMobileSize && largeMobileStyles;
+});

package/dist/components/common/Chip/index.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { TChipSize } from './styles';
+export type TProps = {
+    label: string | ReactNode;
+    color: string;
+    bgColor: string;
+    size?: TChipSize;
+};
+export declare const Chip: FC<TProps>;

package/dist/components/common/Chip/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _Typography = require("../Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Chip = exports.Chip = function Chip(_ref) {
+  var label = _ref.label,
+    bgColor = _ref.bgColor,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size;
+  return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, {
+    $color: color,
+    $backgroundColor: bgColor,
+    $size: size
+  }, typeof label === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "smallMedium"
+  }, label) : label);
+};

package/dist/components/common/Chip/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TProps, Chip } from '.';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/common/Chip/index.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Chip',
+  component: _.Chip,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    label: 'Название',
+    color: 'blue',
+    bgColor: 'red'
+  }
+};

package/dist/components/common/Chip/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type TChipSize = 'xxs' | 'xs';
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+    $backgroundColor: string;
+    $size: TChipSize;
+}>> & string;

package/dist/components/common/Chip/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CHIP_PADDING_MAP = {
+  xxs: '0 4px',
+  xs: '4px 6px'
+};
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1v052gm-0"
+})(["display:inline-flex;align-items:center;gap:4px;padding:", ";color:", ";background-color:", ";border-radius:6px;white-space:nowrap;"], function (_ref) {
+  var $size = _ref.$size;
+  return CHIP_PADDING_MAP[$size];
+}, function (_ref2) {
+  var $color = _ref2.$color;
+  return $color;
+}, function (_ref3) {
+  var $backgroundColor = _ref3.$backgroundColor;
+  return $backgroundColor;
+});

package/dist/components/common/Divider/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TDividerPalette } from './palette';
+export type TProps = {
+    palette?: Partial<TDividerPalette>;
+    height?: number;
+};
+export declare const Divider: FC<TProps>;

package/dist/components/common/Divider/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Divider = exports.Divider = function Divider(_ref) {
+  var palette = _ref.palette,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 1 : _ref$height;
+  var mergedPalette = (0, _palette.useComponentPalette)('divider', palette);
+  return /*#__PURE__*/_react["default"].createElement(S.Divider, {
+    $palette: mergedPalette,
+    $height: height
+  });
+};

package/dist/components/common/Divider/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Divider } from '.';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type TStory = StoryObj<typeof Divider>;
+export declare const Default: TStory;

package/dist/components/common/Divider/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Divider',
+  component: _.Divider,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/common/Divider/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TDividerPalette = {
+    divider: string;
+};
+export declare const generateDividerPalette: (abstractPalette: TAbstractPalette) => TDividerPalette;

package/dist/components/common/Divider/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDividerPalette = void 0;
+var generateDividerPalette = exports.generateDividerPalette = function generateDividerPalette(abstractPalette) {
+  return {
+    divider: abstractPalette.neutralUsual
+  };
+};

package/dist/components/common/Divider/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TDividerPalette } from './palette';
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {
+    $palette: TDividerPalette;
+    $height: number;
+}>> & string;

package/dist/components/common/Divider/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Divider = exports.Divider = _styledComponents["default"].hr.withConfig({
+  displayName: "styles__Divider",
+  componentId: "sc-13sr9hl-0"
+})(["width:100%;height:", "px;background-color:", ";margin:0;box-sizing:border-box;"], function (_ref) {
+  var $height = _ref.$height;
+  return $height;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return $palette.divider;
+});

package/dist/components/common/Drawer/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+export type TProps = {
+    children: ReactNode;
+    onClose: () => void;
+    title?: string;
+    isErrorBorder?: boolean;
+    isOpen: boolean;
+    isPadding?: boolean;
+    borderColor?: string;
+    overflow?: string;
+    onOpenEnd?: () => void;
+};
+export declare const Drawer: FC<TProps>;

package/dist/components/common/Drawer/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var S = _interopRequireWildcard(require("./styles"));
+var _Typography = require("../Typography");
+var _palette = require("../../../palette");
+var _useLockBodyScroll = require("../../../hooks/useLockBodyScroll");
+var _ErrorBoundary = require("../ErrorBoundary");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ANIMATION_MS = 300;
+var DRAG_CLOSE_THRESHOLD = 80;
+var Drawer = exports.Drawer = function Drawer(_ref) {
+  var isOpen = _ref.isOpen,
+    children = _ref.children,
+    title = _ref.title,
+    isErrorBorder = _ref.isErrorBorder,
+    onClose = _ref.onClose,
+    _ref$isPadding = _ref.isPadding,
+    isPadding = _ref$isPadding === void 0 ? true : _ref$isPadding,
+    borderColor = _ref.borderColor,
+    overflow = _ref.overflow,
+    onOpenEnd = _ref.onOpenEnd;
+  var palette = (0, _palette.useComponentPalette)('drawer');
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEntered = _useState4[0],
+    setIsEntered = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragOffset = _useState6[0],
+    setDragOffset = _useState6[1];
+  var dragStartYRef = (0, _react.useRef)(null);
+  var sheetRef = (0, _react.useRef)(null);
+
+  // Монтируем при открытии, размонтируем после анимации закрытия (как раньше — задержка 300мс).
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      setShouldRender(true);
+    } else {
+      setIsEntered(false);
+      var timer = setTimeout(function () {
+        return setShouldRender(false);
+      }, ANIMATION_MS);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+
+  // Запускаем enter-переход на кадр позже маунта: сначала лист за экраном (translateY 100%), затем 0.
+  (0, _react.useEffect)(function () {
+    if (!shouldRender || !isOpen) return undefined;
+    var raf = requestAnimationFrame(function () {
+      return setIsEntered(true);
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [shouldRender, isOpen]);
+
+  // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
+  (0, _useLockBodyScroll.useLockBodyScroll)(shouldRender);
+  var handleTransitionEnd = (0, _react.useCallback)(function (event) {
+    if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
+    if (isOpen && isEntered && onOpenEnd) onOpenEnd();
+  }, [isOpen, isEntered, onOpenEnd]);
+  var handlePointerDown = (0, _react.useCallback)(function (event) {
+    var _event$currentTarget$, _event$currentTarget;
+    dragStartYRef.current = event.clientY;
+    (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+  }, []);
+  var handlePointerMove = (0, _react.useCallback)(function (event) {
+    if (dragStartYRef.current === null) return;
+    var delta = event.clientY - dragStartYRef.current;
+    setDragOffset(delta > 0 ? delta : 0);
+  }, []);
+  var handlePointerUp = (0, _react.useCallback)(function () {
+    if (dragStartYRef.current === null) return;
+    var offset = dragOffset;
+    dragStartYRef.current = null;
+    setDragOffset(0);
+    if (offset > DRAG_CLOSE_THRESHOLD) onClose();
+  }, [dragOffset, onClose]);
+  if (!shouldRender) return null;
+  var isDragging = dragOffset > 0;
+  var translateY = !isEntered ? '100%' : "".concat(dragOffset, "px");
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(S.Root, {
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/_react["default"].createElement(S.Backdrop, {
+    $bgColor: palette.backdropBg,
+    $isVisible: isEntered,
+    onClick: onClose
+  }), /*#__PURE__*/_react["default"].createElement(S.Sheet, {
+    ref: sheetRef,
+    style: {
+      transform: "translateY(".concat(translateY, ")")
+    },
+    $isDragging: isDragging,
+    $isErrorBorder: isErrorBorder,
+    $errorColor: palette.error,
+    $borderColor: borderColor,
+    $overflow: overflow,
+    onTransitionEnd: handleTransitionEnd
+  }, /*#__PURE__*/_react["default"].createElement(S.DragHandle, {
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerUp
+  }, /*#__PURE__*/_react["default"].createElement(S.DragIndicator, null)), title && /*#__PURE__*/_react["default"].createElement(S.Title, {
+    $bg: palette.titleBg
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "headline4"
+  }, title)), /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, {
+    $bgColor: palette.bg,
+    $isPadding: isPadding
+  }, /*#__PURE__*/_react["default"].createElement(_ErrorBoundary.ErrorBoundary, null, children)))), document.body);
+};

package/dist/components/common/Drawer/index.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Drawer, TProps } from '.';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+export declare const Default: StoryObj<TProps>;
+export declare const WithTitle: StoryObj<TProps>;
+export declare const Error: StoryObj<TProps>;