@rescui/collapse 0.1.0

package/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2000-2016 JetBrains s.r.o.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,3 @@
+# Collapse
+
+* [Usage examples](./docs/demo.md)

package/lib/accordion.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { AccordionGap, CollapseSize, CollapseMode, CollapseIcon, KeyType } from './types';
+export declare type AccordionExplicitProps = {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Opened collapse classname
+     */
+    openedClassName?: string;
+    /**
+     * Collapse items size
+     */
+    size?: CollapseSize;
+    /**
+     *  Collapse items appearance mode
+     */
+    mode?: CollapseMode;
+    /**
+     * Collapse items icon type
+     */
+    icon?: CollapseIcon;
+    /**
+     * Controls the bottom border of collapse items
+     */
+    borderBottom?: boolean;
+    /**
+     * Vertical gap between children items
+     */
+    gap?: AccordionGap;
+    theme?: Theme;
+    /**
+     * Active collapse key. Must be used with `itemKey` prop on the collapse items.
+     * Any value except `undefined` turns accordion into controlled mode.
+     */
+    value?: KeyType;
+    /**
+     * Event which fired when the active collapse item is changed.
+     */
+    onChange?: (key: KeyType) => void;
+};
+export declare type AccordionProps = AccordionExplicitProps & Omit<React.HTMLProps<HTMLDivElement>, keyof AccordionExplicitProps | 'ref'>;
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionExplicitProps & Omit<React.HTMLProps<HTMLDivElement>, keyof AccordionExplicitProps | "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/accordion.js

@@ -0,0 +1,104 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "openedClassName", "size", "mode", "icon", "borderBottom", "gap", "theme", "value", "onChange"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState } from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { useTheme, ThemeProvider } from '@rescui/ui-contexts';
+import { collapseContext } from './context.js';
+import styles from './collapse.p.module.css.js';
+var GAP_STYLES = {
+  0: styles.accordionGap0,
+  8: styles.accordionGap8,
+  12: styles.accordionGap12,
+  16: styles.accordionGap16,
+  24: styles.accordionGap24,
+  32: styles.accordionGap32
+};
+var Accordion = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      openedClassName = _ref.openedClassName,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? 'left-plus' : _ref$icon,
+      _ref$borderBottom = _ref.borderBottom,
+      borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? 0 : _ref$gap,
+      themeFromProps = _ref.theme,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var isControlled = typeof value !== 'undefined';
+  var theme = useTheme(themeFromProps);
+
+  var _useState = useState(isControlled ? value : null),
+      _useState2 = _slicedToArray(_useState, 2),
+      openKey = _useState2[0],
+      setActiveKey = _useState2[1];
+
+  var toggleActiveKey = function toggleActiveKey(key) {
+    var activatingKey = key !== openKey ? key : null;
+
+    if (onChange) {
+      onChange(activatingKey);
+    }
+
+    setActiveKey(activatingKey);
+  };
+
+  return /*#__PURE__*/React.createElement(collapseContext.Provider, {
+    value: {
+      openedKey: isControlled ? value : openKey,
+      isInAccordion: true,
+      isInControlledAccordion: isControlled,
+      toggleActiveKey: toggleActiveKey,
+      setActiveKey: setActiveKey,
+      size: size,
+      mode: mode,
+      icon: icon,
+      borderBottom: borderBottom,
+      openedClassName: openedClassName
+    }
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    "data-test": 'accordion'
+  }, restProps), {}, {
+    className: cn(styles.accordion, GAP_STYLES[gap], className),
+    ref: ref
+  }), children)));
+});
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  openedClassName: PropTypes.string,
+  size: PropTypes.oneOf(['s', 'm', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock', 'clear']),
+  icon: PropTypes.oneOf(['arrow', 'left-plus', 'right-plus']),
+  gap: PropTypes.oneOf([0, 8, 12, 16, 24, 32]),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.symbol]),
+  onChange: PropTypes.func
+};
+export { Accordion };

package/lib/collapse.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { CollapseBorderRadius, CollapseIcon, CollapseMode, CollapseSize, KeyType } from './types';
+export declare type CollapseExplicitProps = {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Classname for the opened state
+     */
+    openedClassName?: string;
+    /**
+     *  Collapse title slot
+     */
+    title?: React.ReactNode;
+    /**
+     * Collapse size
+     * @default m
+     */
+    size?: CollapseSize;
+    /**
+     *  Collapse appearance mode
+     * @default classic
+     */
+    mode?: CollapseMode;
+    /**
+     * Collapse icon type
+     * @default left-plus
+     */
+    icon?: CollapseIcon;
+    /**
+     * Controls the Collapse bottom border
+     * @default false
+     */
+    borderBottom?: CollapseBorderRadius;
+    /**
+     * Is collapse opened by default. Will be ignored in controlled `Accordion`
+     */
+    isDefaultOpened?: boolean;
+    theme?: Theme;
+    /**
+     * Collapse item key. May be required for the controlled `Accordion`
+     */
+    itemKey?: KeyType;
+};
+export declare type CollapseProps = CollapseExplicitProps & Omit<React.HTMLProps<HTMLDivElement>, keyof CollapseExplicitProps | 'ref'>;
+export declare const Collapse: React.ForwardRefExoticComponent<CollapseExplicitProps & Omit<React.HTMLProps<HTMLDivElement>, keyof CollapseExplicitProps | "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/collapse.js

@@ -0,0 +1,197 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "openedClassName", "size", "mode", "icon", "borderBottom", "title", "isDefaultOpened", "theme", "itemKey"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import React, { useRef, useContext, useState, useEffect } from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { RightIcon, AddOutlineIcon } from '@rescui/icons';
+import { useTheme, ThemeProvider } from '@rescui/ui-contexts';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+import { collapseContext } from './context.js';
+import { useCollapseState, COLLAPSE_STATES, useStartedClosing } from './use-collapse-state.js';
+import styles from './collapse.p.module.css.js';
+
+function getRandId() {
+  return Math.random().toString(36).substring(7);
+}
+
+var THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+var SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock,
+  clear: styles.clear
+};
+var ICON_STYLES = {
+  'left-plus': styles.iconPlus,
+  'right-plus': styles.iconPlus,
+  arrow: styles.iconArrow
+};
+var Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+function (_ref, ref) {
+  var _ref2, _ref3, _ref4, _ref5;
+
+  var children = _ref.children,
+      className = _ref.className,
+      openedClassnameFromProps = _ref.openedClassName,
+      sizeFromProps = _ref.size,
+      modeFromProps = _ref.mode,
+      iconFromProps = _ref.icon,
+      borderBottomFromProps = _ref.borderBottom,
+      title = _ref.title,
+      _ref$isDefaultOpened = _ref.isDefaultOpened,
+      isDefaultOpened = _ref$isDefaultOpened === void 0 ? false : _ref$isDefaultOpened,
+      themeFromProps = _ref.theme,
+      itemKey = _ref.itemKey,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  // using the trick from  https://github.com/Yaska/react-use-id-hook/
+  var _useRef = useRef(itemKey !== null && itemKey !== void 0 ? itemKey : getRandId()),
+      key = _useRef.current;
+
+  var theme = useTheme(themeFromProps);
+
+  var _useContext = useContext(collapseContext),
+      openedKey = _useContext.openedKey,
+      isInAccordion = _useContext.isInAccordion,
+      isInControlledAccordion = _useContext.isInControlledAccordion,
+      toggleActiveKey = _useContext.toggleActiveKey,
+      setActiveKey = _useContext.setActiveKey,
+      sizeFromContext = _useContext.size,
+      modeFromContext = _useContext.mode,
+      iconFromContext = _useContext.icon,
+      borderBottomFromContext = _useContext.borderBottom,
+      openedClassNameFromContext = _useContext.openedClassName;
+
+  var size = (_ref2 = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _ref2 !== void 0 ? _ref2 : 'm';
+  var mode = (_ref3 = modeFromProps !== null && modeFromProps !== void 0 ? modeFromProps : modeFromContext) !== null && _ref3 !== void 0 ? _ref3 : 'classic';
+  var icon = (_ref4 = iconFromProps !== null && iconFromProps !== void 0 ? iconFromProps : iconFromContext) !== null && _ref4 !== void 0 ? _ref4 : 'left-plus';
+  var borderBottom = (_ref5 = borderBottomFromProps !== null && borderBottomFromProps !== void 0 ? borderBottomFromProps : borderBottomFromContext) !== null && _ref5 !== void 0 ? _ref5 : false;
+  var openedClassName = openedClassnameFromProps !== null && openedClassnameFromProps !== void 0 ? openedClassnameFromProps : openedClassNameFromContext; // height calculations
+
+  var resizeRef = useRef(null);
+
+  var _useState = useState('initial'),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  useResizeObserver(resizeRef, function (entry) {
+    return setHeight(entry.target.offsetHeight);
+  });
+  var isHeightCalculated = height !== 'initial'; // this state is ignored in accordion
+
+  var _useState3 = useState(isDefaultOpened),
+      _useState4 = _slicedToArray(_useState3, 2),
+      shouldBeOpenedLocal = _useState4[0],
+      setShouldBeOpenedLocal = _useState4[1]; // boolean state. ignores CLOSING and OPENING states
+
+
+  var shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal; // add CLOSING and OPENING states.
+
+  var _useCollapseState = useCollapseState({
+    shouldBeOpened: shouldBeOpened,
+    // because how css transitions work, we shouldn't use OPENING and CLOSING states while height still calculating
+    // it also allows us to skip animation on the first renders
+    cancelAnimation: !isHeightCalculated
+  }),
+      handleTransitionEnd = _useCollapseState.onAnimationEnd,
+      collapseState = _useCollapseState.state;
+
+  var isOpening = collapseState === COLLAPSE_STATES.OPENING;
+  var isOpened = collapseState === COLLAPSE_STATES.OPEN;
+  var isClosing = collapseState === COLLAPSE_STATES.CLOSING;
+  var isClosed = collapseState === COLLAPSE_STATES.CLOSE;
+
+  var _useStartedClosing = useStartedClosing(collapseState),
+      isStartedClosing = _useStartedClosing.isStartedClosing,
+      contentRef = _useStartedClosing.contentRef;
+
+  var isRightIcon = icon === 'right-plus';
+  var Icon = icon === 'arrow' ? RightIcon : AddOutlineIcon;
+
+  var toggleOpened = function toggleOpened() {
+    if (toggleActiveKey) {
+      toggleActiveKey(key);
+    } // this state update does nothing in accordion
+
+
+    setShouldBeOpenedLocal(!shouldBeOpened);
+  };
+
+  useEffect(function () {
+    // for uncontrolled accordion, tell it that this collapse is opened by default
+    if (isInAccordion && !isInControlledAccordion && isDefaultOpened && setActiveKey) {
+      setActiveKey(key);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    "data-test": 'collapse'
+  }, restProps), {}, {
+    className: cn(className, styles.main, isOpening && styles.opening, isOpened && styles.opened, isClosing && !isStartedClosing && styles.closingTransition, isClosing && styles.closing, isClosed && styles.closed, !isClosed && openedClassName, SIZE_STYLES[size], MODE_STYLES[mode], ICON_STYLES[icon], borderBottom && styles.hasBorderBottom, isRightIcon ? styles.rightIcon : styles.leftIcon, THEME_STYLES[theme]),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.button,
+    onClick: toggleOpened
+  }, !isRightIcon && /*#__PURE__*/React.createElement(Icon, {
+    className: styles.icon
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.title)
+  }, title), isRightIcon && /*#__PURE__*/React.createElement(Icon, {
+    className: styles.icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.content,
+    style: {
+      // So, we set the height value only on OPENING stage and just after beginning CLOSING stage
+      // The reason we don't leave this style for OPEN stage is because some content of the expanded Collapse may change its height dynamically
+      // This will be processed by resizeObserver, but some devices may lag behind
+      // And to make collapsing transition work, we need to have a frame with numbered height value before starting the collapse transition
+      maxHeight: (isOpening || isStartedClosing) && height
+    },
+    ref: contentRef,
+    onTransitionEnd: handleTransitionEnd,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: resizeRef,
+    className: styles.innerWrapper
+  }, children))));
+});
+Collapse.displayName = 'Collapse';
+Collapse.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  openedClassName: PropTypes.string,
+  size: PropTypes.oneOf(['s', 'm', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock', 'clear']),
+  icon: PropTypes.oneOf(['arrow', 'left-plus', 'right-plus']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.symbol]),
+  isDefaultOpened: PropTypes.bool,
+  borderBottom: PropTypes.bool,
+  title: PropTypes.node
+};
+export { Collapse };

package/lib/collapse.p.module.css.js

@@ -0,0 +1,34 @@
+var styles = {
+  "hasBorderBottom": "_hasBorderBottom_zyxqwq_14",
+  "main": "_main_zyxqwq_18",
+  "themeLight": "_themeLight_zyxqwq_21",
+  "themeDark": "_themeDark_zyxqwq_27",
+  "rock": "_rock_zyxqwq_33",
+  "opening": "_opening_zyxqwq_34",
+  "opened": "_opened_zyxqwq_35",
+  "closing": "_closing_zyxqwq_36",
+  "classic": "_classic_zyxqwq_50",
+  "title": "_title_zyxqwq_108",
+  "sizeS": "_sizeS_zyxqwq_113",
+  "button": "_button_zyxqwq_113",
+  "sizeM": "_sizeM_zyxqwq_116",
+  "sizeL": "_sizeL_zyxqwq_119",
+  "content": "_content_zyxqwq_124",
+  "closingTransition": "_closingTransition_zyxqwq_136",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_zyxqwq_1",
+  "leftIcon": "_leftIcon_zyxqwq_152",
+  "innerWrapper": "_innerWrapper_zyxqwq_151",
+  "rightIcon": "_rightIcon_zyxqwq_156",
+  "clear": "_clear_zyxqwq_242",
+  "icon": "_icon_zyxqwq_269",
+  "iconPlus": "_iconPlus_zyxqwq_315",
+  "iconArrow": "_iconArrow_zyxqwq_320",
+  "accordion": "_accordion_zyxqwq_326",
+  "accordionGap0": "_accordionGap0_zyxqwq_330",
+  "accordionGap8": "_accordionGap8_zyxqwq_333",
+  "accordionGap12": "_accordionGap12_zyxqwq_336",
+  "accordionGap16": "_accordionGap16_zyxqwq_339",
+  "accordionGap24": "_accordionGap24_zyxqwq_342",
+  "accordionGap32": "_accordionGap32_zyxqwq_345"
+};
+export { styles as default };

package/lib/context.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CollapseIcon, CollapseMode, CollapseSize, KeyType } from './types';
+export declare type CollapseContext = {
+    openedKey?: KeyType;
+    isInAccordion?: boolean;
+    isInControlledAccordion?: boolean;
+    toggleActiveKey?: (key: KeyType) => void;
+    setActiveKey?: (key: KeyType) => void;
+    size?: CollapseSize;
+    mode?: CollapseMode;
+    icon?: CollapseIcon;
+    borderBottom?: boolean;
+    openedClassName?: string;
+};
+export declare const collapseContext: React.Context<CollapseContext>;

package/lib/context.js

@@ -0,0 +1,14 @@
+import React from 'react';
+var collapseContext = /*#__PURE__*/React.createContext({
+  openedKey: null,
+  isInAccordion: false,
+  isInControlledAccordion: false,
+  toggleActiveKey: null,
+  setActiveKey: null,
+  size: null,
+  mode: null,
+  icon: null,
+  borderBottom: null,
+  openedClassName: null
+});
+export { collapseContext };

package/lib/index.css

@@ -0,0 +1,413 @@
+._hasBorderBottom_zyxqwq_14{
+  border-bottom:1px solid;
+}
+._main_zyxqwq_18{
+  position:relative;
+}
+._main_zyxqwq_18._themeLight_zyxqwq_21{
+    border-color:rgba(25,25,28,0.2);
+
+    color:#19191C;
+
+    color:var(--rs-typography-color-hard, #19191C);
+  }
+._main_zyxqwq_18._themeDark_zyxqwq_27{
+    border-color:rgba(255,255,255,0.2);
+
+    color:#FFFFFF;
+
+    color:var(--rs-typography-color-hard, #FFFFFF);
+  }
+._main_zyxqwq_18._hasBorderBottom_zyxqwq_14._rock_zyxqwq_33:active,
+  ._main_zyxqwq_18._hasBorderBottom_zyxqwq_14._rock_zyxqwq_33._opening_zyxqwq_34,
+  ._main_zyxqwq_18._hasBorderBottom_zyxqwq_14._rock_zyxqwq_33._opened_zyxqwq_35,
+  ._main_zyxqwq_18._hasBorderBottom_zyxqwq_14._rock_zyxqwq_33._closing_zyxqwq_36{
+    padding-bottom:1px;
+
+    border-bottom:none;
+  }
+@media (hover: hover){
+    ._main_zyxqwq_18._hasBorderBottom_zyxqwq_14._rock_zyxqwq_33:hover{
+      padding-bottom:1px;
+
+      border-bottom:none;
+    }
+  }
+@media (hover: hover){
+      ._main_zyxqwq_18._themeLight_zyxqwq_21._classic_zyxqwq_50:hover{
+        background:rgba(25,25,28,0.05);
+      }
+    }
+._main_zyxqwq_18._themeLight_zyxqwq_21._classic_zyxqwq_50._opening_zyxqwq_34,
+    ._main_zyxqwq_18._themeLight_zyxqwq_21._classic_zyxqwq_50._opened_zyxqwq_35,
+    ._main_zyxqwq_18._themeLight_zyxqwq_21._classic_zyxqwq_50._closing_zyxqwq_36{
+      background:rgba(25,25,28,0.05);
+    }
+@media (hover: hover){
+      ._main_zyxqwq_18._themeLight_zyxqwq_21._rock_zyxqwq_33:hover{
+        --rs-typography-color-hard:#FFFFFF;
+        --rs-typography-color-average:rgba(255,255,255,0.7);
+        --rs-typography-color-pale:rgba(255,255,255,0.5);
+        --rs-typography-pre-color:rgba(255,255,255,0.7);
+        --rs-typography-pre-bg-color:rgba(255,255,255,0.1);
+        --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
+        --rs-typography-rock-link-hover-color:#19191C;
+        background:rgba(25,25,28,0.9);
+      }
+    }
+._main_zyxqwq_18._themeLight_zyxqwq_21._rock_zyxqwq_33._opening_zyxqwq_34,
+    ._main_zyxqwq_18._themeLight_zyxqwq_21._rock_zyxqwq_33._opened_zyxqwq_35,
+    ._main_zyxqwq_18._themeLight_zyxqwq_21._rock_zyxqwq_33._closing_zyxqwq_36{
+      --rs-typography-color-hard:#FFFFFF;
+      --rs-typography-color-average:rgba(255,255,255,0.7);
+      --rs-typography-color-pale:rgba(255,255,255,0.5);
+      --rs-typography-pre-color:rgba(255,255,255,0.7);
+      --rs-typography-pre-bg-color:rgba(255,255,255,0.1);
+      --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
+      --rs-typography-rock-link-hover-color:#19191C;
+      background:#19191C;
+    }
+@media (hover: hover){
+      ._main_zyxqwq_18._themeDark_zyxqwq_27._classic_zyxqwq_50:hover{
+        background:rgba(255,255,255,0.05);
+      }
+    }
+._main_zyxqwq_18._themeDark_zyxqwq_27._classic_zyxqwq_50._opening_zyxqwq_34,
+    ._main_zyxqwq_18._themeDark_zyxqwq_27._classic_zyxqwq_50._opened_zyxqwq_35,
+    ._main_zyxqwq_18._themeDark_zyxqwq_27._classic_zyxqwq_50._closing_zyxqwq_36{
+      background:rgba(255,255,255,0.05);
+    }
+@media (hover: hover){
+      ._main_zyxqwq_18._themeDark_zyxqwq_27._rock_zyxqwq_33:hover{
+        --rs-typography-color-hard:#19191C;
+        --rs-typography-color-average:rgba(25,25,28,0.7);
+        --rs-typography-color-pale:rgba(25,25,28,0.5);
+        --rs-typography-pre-color:#19191C;
+        --rs-typography-pre-bg-color:rgba(25,25,28,0.1);
+        --rs-typography-classic-link-underline-color:rgba(25,25,28,0.4);
+        --rs-typography-rock-link-hover-color:#FFFFFF;
+        background:rgba(255,255,255,0.9);
+      }
+    }
+._main_zyxqwq_18._themeDark_zyxqwq_27._rock_zyxqwq_33._opening_zyxqwq_34,
+    ._main_zyxqwq_18._themeDark_zyxqwq_27._rock_zyxqwq_33._opened_zyxqwq_35,
+    ._main_zyxqwq_18._themeDark_zyxqwq_27._rock_zyxqwq_33._closing_zyxqwq_36{
+      --rs-typography-color-hard:#19191C;
+      --rs-typography-color-average:rgba(25,25,28,0.7);
+      --rs-typography-color-pale:rgba(25,25,28,0.5);
+      --rs-typography-pre-color:#19191C;
+      --rs-typography-pre-bg-color:rgba(25,25,28,0.1);
+      --rs-typography-classic-link-underline-color:rgba(25,25,28,0.4);
+      --rs-typography-rock-link-hover-color:#FFFFFF;
+      background:#FFFFFF;
+    }
+._title_zyxqwq_108{
+  -webkit-box-flex:1;
+      -ms-flex:1 1 auto;
+          flex:1 1 auto;
+
+  color:inherit;
+}
+._sizeS_zyxqwq_113 > ._button_zyxqwq_113 > ._title_zyxqwq_108{
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:13px;
+    font-size:var(--rs-h5-font-size, 13px);
+    font-weight:530;
+    font-weight:var(--rs-font-weight-semi-bold, 530);
+    line-height:20px;
+    line-height:var(--rs-h5-line-height, 20px);
+  }
+._sizeM_zyxqwq_116 > ._button_zyxqwq_113 > ._title_zyxqwq_108{
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:16px;
+    font-size:var(--rs-h4-font-size, 16px);
+    font-weight:530;
+    font-weight:var(--rs-font-weight-semi-bold, 530);
+    line-height:24px;
+    line-height:var(--rs-h4-line-height, 24px);
+  }
+._sizeL_zyxqwq_119 > ._button_zyxqwq_113 > ._title_zyxqwq_108{
+    letter-spacing:normal;
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:20px;
+    font-size:var(--rs-h3-font-size, 20px);
+    font-weight:530;
+    font-weight:var(--rs-font-weight-semi-bold, 530);
+    line-height:28px;
+    line-height:var(--rs-h3-line-height, 28px);
+  }
+._content_zyxqwq_124{
+  overflow-y:hidden;
+
+  max-height:0;
+
+  color:inherit;
+}
+._opened_zyxqwq_35 > ._content_zyxqwq_124{
+    max-height:initial;
+  }
+._opening_zyxqwq_34 > ._content_zyxqwq_124,
+  ._closingTransition_zyxqwq_136 > ._content_zyxqwq_124{
+    -webkit-transition:max-height 300ms;
+    transition:max-height 300ms;
+  }
+._sizeS_zyxqwq_113 > ._content_zyxqwq_124{
+    letter-spacing:0.0045em;
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:13px;
+    font-size:var(--rs-text-3-font-size, 13px);
+    line-height:20px;
+    line-height:var(--rs-text-3-line-height, 20px);
+  }
+._rs-reset-letter-spacing_zyxqwq_1 ._sizeS_zyxqwq_113 > ._content_zyxqwq_124{
+    letter-spacing:normal;
+  }
+._sizeM_zyxqwq_116 > ._content_zyxqwq_124{
+    letter-spacing:0.0015em;
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:16px;
+    font-size:var(--rs-text-2-font-size, 16px);
+    font-weight:400;
+    line-height:24px;
+    line-height:var(--rs-text-2-line-height, 24px);
+  }
+._rs-reset-letter-spacing_zyxqwq_1 ._sizeM_zyxqwq_116 > ._content_zyxqwq_124{
+    letter-spacing:normal;
+  }
+._sizeL_zyxqwq_119 > ._content_zyxqwq_124{
+    font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
+    font-size:20px;
+    font-size:var(--rs-text-1-font-size, 20px);
+    font-weight:normal;
+    line-height:28px;
+    line-height:var(--rs-text-1-line-height, 28px);
+  }
+._sizeS_zyxqwq_113._leftIcon_zyxqwq_152 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 8px 8px 36px;
+  }
+._sizeS_zyxqwq_113._rightIcon_zyxqwq_156 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 8px 8px 8px;
+  }
+._sizeM_zyxqwq_116._leftIcon_zyxqwq_152 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 8px 8px 40px;
+  }
+._sizeM_zyxqwq_116._rightIcon_zyxqwq_156 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 8px 8px 8px;
+  }
+._sizeL_zyxqwq_119._leftIcon_zyxqwq_152 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 16px 16px 60px;
+  }
+._sizeL_zyxqwq_119._rightIcon_zyxqwq_156 > ._content_zyxqwq_124 > ._innerWrapper_zyxqwq_151{
+    padding:0 16px 16px 16px;
+  }
+._button_zyxqwq_113{
+  position:relative;
+
+  display:-webkit-box;
+
+  display:-ms-flexbox;
+
+  display:flex;
+
+  overflow:visible;
+  -webkit-box-align:start;
+      -ms-flex-align:start;
+          align-items:flex-start;
+
+  width:100%;
+  margin:0;
+
+  border:none;
+
+  cursor:pointer;
+  text-align:left;
+
+  color:inherit;
+
+  background:transparent;
+
+  font:inherit;
+  line-height:normal;
+  -webkit-font-smoothing:inherit;
+  -moz-osx-font-smoothing:inherit;
+  -webkit-appearance:none;
+}
+._button_zyxqwq_113::-moz-focus-inner{
+    padding:0;
+
+    border:0;
+  }
+._sizeS_zyxqwq_113 > ._button_zyxqwq_113{
+    padding:6px 8px;
+  }
+._sizeM_zyxqwq_116 > ._button_zyxqwq_113{
+    padding:8px 8px;
+  }
+._sizeL_zyxqwq_119 > ._button_zyxqwq_113{
+    padding:12px 16px;
+  }
+._button_zyxqwq_113:focus{
+    outline:none;
+  }
+._themeLight_zyxqwq_21 ._button_zyxqwq_113{
+    color:#19191C;
+    color:var(--rs-typography-color-hard, #19191C);
+  }
+._themeDark_zyxqwq_27 ._button_zyxqwq_113{
+    color:#FFFFFF;
+    color:var(--rs-typography-color-hard, #FFFFFF);
+  }
+._themeLight_zyxqwq_21 > ._button_zyxqwq_113:focus[data-focus-method='key']{
+    -webkit-box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
+    -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
+            box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
+            box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
+  }
+._themeDark_zyxqwq_27 > ._button_zyxqwq_113:focus[data-focus-method='key']{
+    -webkit-box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
+    -webkit-box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
+            box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
+            box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
+  }
+._themeLight_zyxqwq_21._clear_zyxqwq_242 > ._button_zyxqwq_113:hover{
+    color:rgba(25,25,28,0.7);
+    color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
+  }
+._themeDark_zyxqwq_27._clear_zyxqwq_242 > ._button_zyxqwq_113:hover{
+    color:rgba(255,255,255,0.7);
+    color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
+  }
+._themeLight_zyxqwq_21._classic_zyxqwq_50 > ._button_zyxqwq_113:active{
+    background:rgba(25,25,28,0.05);
+  }
+._themeLight_zyxqwq_21._rock_zyxqwq_33 > ._button_zyxqwq_113:active{
+    --rs-typography-color-hard:#FFFFFF;
+    --rs-typography-color-average:rgba(255,255,255,0.7);
+    --rs-typography-color-pale:rgba(255,255,255,0.5);
+    --rs-typography-pre-color:rgba(255,255,255,0.7);
+    --rs-typography-pre-bg-color:rgba(255,255,255,0.1);
+    --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
+    --rs-typography-rock-link-hover-color:#19191C;
+    background:#19191C;
+  }
+._themeDark_zyxqwq_27._classic_zyxqwq_50 > ._button_zyxqwq_113:active{
+    background:rgba(255,255,255,0.1);
+  }
+._themeDark_zyxqwq_27._rock_zyxqwq_33 > ._button_zyxqwq_113:active{
+    --rs-typography-color-hard:#19191C;
+    --rs-typography-color-average:rgba(25,25,28,0.7);
+    --rs-typography-color-pale:rgba(25,25,28,0.5);
+    --rs-typography-pre-color:#19191C;
+    --rs-typography-pre-bg-color:rgba(25,25,28,0.1);
+    --rs-typography-classic-link-underline-color:rgba(25,25,28,0.4);
+    --rs-typography-rock-link-hover-color:#FFFFFF;
+    background:#FFFFFF;
+  }
+._icon_zyxqwq_269{
+  position:relative;
+  top:0;
+  left:0;
+
+  -webkit-box-flex:0;
+
+      -ms-flex:0 0 auto;
+
+          flex:0 0 auto;
+
+  -webkit-transition:-webkit-transform 300ms;
+
+  transition:-webkit-transform 300ms;
+
+  transition:transform 300ms;
+
+  transition:transform 300ms, -webkit-transform 300ms;
+
+  will-change:transform;
+  -webkit-transform-origin:center center;
+          transform-origin:center center;
+}
+._sizeS_zyxqwq_113 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    width:20px;
+    height:20px;
+  }
+._sizeM_zyxqwq_116 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    width:24px;
+    height:24px;
+  }
+._sizeL_zyxqwq_119 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    width:28px;
+    height:28px;
+  }
+._sizeS_zyxqwq_113._leftIcon_zyxqwq_152 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-right:8px;
+  }
+._sizeS_zyxqwq_113._rightIcon_zyxqwq_156 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-left:8px;
+  }
+._sizeM_zyxqwq_116._leftIcon_zyxqwq_152 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-right:8px;
+  }
+._sizeM_zyxqwq_116._rightIcon_zyxqwq_156 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-left:8px;
+  }
+._sizeL_zyxqwq_119._leftIcon_zyxqwq_152 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-right:16px;
+  }
+._sizeL_zyxqwq_119._rightIcon_zyxqwq_156 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    margin-left:16px;
+  }
+._opening_zyxqwq_34._iconPlus_zyxqwq_315 > ._button_zyxqwq_113 > ._icon_zyxqwq_269,
+  ._opened_zyxqwq_35._iconPlus_zyxqwq_315 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    -webkit-transform:rotate(45deg);
+            transform:rotate(45deg);
+  }
+._opening_zyxqwq_34._iconArrow_zyxqwq_320 > ._button_zyxqwq_113 > ._icon_zyxqwq_269,
+  ._opened_zyxqwq_35._iconArrow_zyxqwq_320 > ._button_zyxqwq_113 > ._icon_zyxqwq_269{
+    -webkit-transform:rotate(90deg);
+            transform:rotate(90deg);
+  }
+._accordion_zyxqwq_326{
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+      -ms-flex-direction:column;
+          flex-direction:column;
+}
+._accordionGap0_zyxqwq_330{
+  row-gap:0;
+}
+._accordionGap8_zyxqwq_333{
+  row-gap:8px;
+}
+._accordionGap12_zyxqwq_336{
+  row-gap:12px;
+}
+._accordionGap16_zyxqwq_339{
+  row-gap:16px;
+}
+._accordionGap24_zyxqwq_342{
+  row-gap:24px;
+}
+._accordionGap32_zyxqwq_345{
+  row-gap:32px;
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { Collapse } from './collapse';
+export type { CollapseProps } from './collapse';
+export { Accordion } from './accordion';
+export type { AccordionProps } from './accordion';

package/lib/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+export { Collapse } from './collapse.js';
+export { Accordion } from './accordion.js';

package/lib/types.d.ts

@@ -0,0 +1,6 @@
+export declare type CollapseSize = 's' | 'm' | 'l';
+export declare type CollapseMode = 'classic' | 'rock' | 'clear';
+export declare type CollapseIcon = 'left-plus' | 'right-plus' | 'arrow';
+export declare type CollapseBorderRadius = 0 | 8 | 16 | 24;
+export declare type KeyType = number | string | symbol;
+export declare type AccordionGap = 0 | 8 | 12 | 16 | 24 | 32;

package/lib/use-collapse-state.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare enum COLLAPSE_STATES {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSE = "CLOSE"
+}
+export declare function useCollapseState({ shouldBeOpened, cancelAnimation }: {
+    shouldBeOpened: boolean;
+    cancelAnimation?: boolean;
+}): {
+    onAnimationEnd: () => void;
+    state: COLLAPSE_STATES;
+};
+export declare function useStartedClosing(state: COLLAPSE_STATES): {
+    isStartedClosing: boolean;
+    contentRef: import("react").MutableRefObject<HTMLDivElement>;
+};

package/lib/use-collapse-state.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useState, useRef, useCallback } from 'react';
+var COLLAPSE_STATES;
+
+(function (COLLAPSE_STATES) {
+  COLLAPSE_STATES["OPENING"] = "OPENING";
+  COLLAPSE_STATES["OPEN"] = "OPEN";
+  COLLAPSE_STATES["CLOSING"] = "CLOSING";
+  COLLAPSE_STATES["CLOSE"] = "CLOSE";
+})(COLLAPSE_STATES || (COLLAPSE_STATES = {})); // eslint-disable-next-line complexity
+
+
+function useCollapseState(_ref) {
+  var shouldBeOpened = _ref.shouldBeOpened,
+      cancelAnimation = _ref.cancelAnimation;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      setDummyState = _useState2[1];
+
+  var stateRef = useRef(COLLAPSE_STATES.CLOSE);
+  var onAnimationEnd = useCallback(function () {
+    if ((stateRef.current === COLLAPSE_STATES.CLOSING || stateRef.current === COLLAPSE_STATES.OPENING) && !shouldBeOpened) {
+      stateRef.current = COLLAPSE_STATES.CLOSE; //force rerender
+
+      setDummyState(function (s) {
+        return !s;
+      });
+    } else if (stateRef.current === COLLAPSE_STATES.OPENING && shouldBeOpened) {
+      stateRef.current = COLLAPSE_STATES.OPEN; //force rerender
+
+      setDummyState(function (s) {
+        return !s;
+      });
+    }
+  }, [shouldBeOpened]);
+
+  if (shouldBeOpened && stateRef.current !== COLLAPSE_STATES.OPEN) {
+    stateRef.current = cancelAnimation ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.OPENING;
+  } else if ((stateRef.current === COLLAPSE_STATES.OPEN || stateRef.current === COLLAPSE_STATES.OPENING) && !shouldBeOpened) {
+    stateRef.current = cancelAnimation ? COLLAPSE_STATES.CLOSE : COLLAPSE_STATES.CLOSING;
+  }
+
+  return {
+    onAnimationEnd: onAnimationEnd,
+    state: stateRef.current
+  };
+}
+
+function useStartedClosing(state) {
+  var isStartedClosingRef = useRef(false);
+  var prevState = useRef(state);
+  var contentRef = useRef(null);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      setDummyState = _useState4[1];
+
+  if (prevState.current === COLLAPSE_STATES.OPEN && state === COLLAPSE_STATES.CLOSING) {
+    isStartedClosingRef.current = true; // the next frame we need to force layout recalculations and new render
+
+    if (typeof window !== 'undefined') {
+      requestAnimationFrame(function () {
+        if (!contentRef.current || !isStartedClosingRef.current) {
+          return;
+        } // force layout recalc, without this step firefox doesn't register style values for transitions
+        // eslint-disable-next-line no-unused-expressions
+
+
+        contentRef.current.offsetHeight;
+        isStartedClosingRef.current = false;
+        setDummyState(function (s) {
+          return !s;
+        });
+      });
+    }
+  }
+
+  prevState.current = state;
+  return {
+    isStartedClosing: isStartedClosingRef.current,
+    contentRef: contentRef
+  };
+}
+
+export { COLLAPSE_STATES, useCollapseState, useStartedClosing };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rescui/collapse",
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "author": "JetBrains",
+  "main": "lib/index.js",
+  "src:main": "src/index.ts",
+  "files": [
+    "lib",
+    "LICENSE.txt"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.14.0",
+    "@rescui/icons": "^0.13.0",
+    "@rescui/use-resize-observer": "^0.1.4",
+    "classnames": "^2.2.6",
+    "core-js": "^3.9.1"
+  },
+  "peerDependencies": {
+    "@rescui/ui-contexts": "^0.4.0",
+    "prop-types": "^15.7.2",
+    "react": ">=16.8.0 <19"
+  },
+  "devDependencies": {
+    "@rescui/colors": "^0.1.6",
+    "@rescui/scripts": "^0.2.0",
+    "@rescui/typography": "^0.11.0",
+    "@rescui/visual-regression": "^0.1.0",
+    "@types/classnames": "^2.2.11"
+  },
+  "scripts": {
+    "build": "rescui-scripts build"
+  },
+  "gitHead": "508e99e53d34798527a14ceae356351c95937915"
+}