@alfalab/core-components 45.5.0 → 45.7.0

package/accordion/Component.d.ts

@@ -0,0 +1,58 @@
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
+import { ControlPosition } from "./typings";
+type AccordionProps = {
+    /**
+     * Состояние компонента
+     */
+    expanded?: boolean;
+    /**
+     * Элемент заголовка
+     */
+    header: ReactNode;
+    /**
+     * Слот для элемента управления
+     */
+    control?: ReactNode;
+    /**
+     * Указывает компоненту - где будет размещен control
+     */
+    controlPosition?: ControlPosition;
+    /**
+     * Начальное состояние uncontrolled компонента
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Основной элемент для отображения содержимого
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс обертки
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контейнера с заголовком
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для header
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс для control
+     */
+    controlClassName?: string;
+    /**
+     * Дополнительный класс для body
+     */
+    bodyClassName?: string;
+    /**
+     * Обработчик смены состояний `expanded`
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AnchorHTMLAttributes<HTMLDivElement>;
+declare const Accordion: FC<AccordionProps>;
+export { AccordionProps, Accordion };

package/accordion/Component.js

@@ -0,0 +1,52 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../typography');
+var components_defaultControlIcon_Component = require('./components/default-control-icon/Component.js');
+var hooks_useRecalculateContentHeight = require('./hooks/useRecalculateContentHeight.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"accordion":"accordion__accordion_m5zyf","container":"accordion__container_m5zyf","header":"accordion__header_m5zyf","control":"accordion__control_m5zyf","body":"accordion__body_m5zyf","expandedBody":"accordion__expandedBody_m5zyf","bodyContent":"accordion__bodyContent_m5zyf","endPosition":"accordion__endPosition_m5zyf","startPosition":"accordion__startPosition_m5zyf"};
+require('./index.css');
+
+var Accordion = function (_a) {
+    var _b, _c, _d;
+    var expanded = _a.expanded, _e = _a.defaultExpanded, defaultExpanded = _e === void 0 ? false : _e, header = _a.header, control = _a.control, _f = _a.controlPosition, controlPosition = _f === void 0 ? 'end' : _f, children = _a.children, className = _a.className, containerClassName = _a.containerClassName, headerClassName = _a.headerClassName, controlClassName = _a.controlClassName, bodyClassName = _a.bodyClassName, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId, rest = tslib.__rest(_a, ["expanded", "defaultExpanded", "header", "control", "controlPosition", "children", "className", "containerClassName", "headerClassName", "controlClassName", "bodyClassName", "onExpandedChange", "dataTestId"]);
+    var uncontrolled = expanded === undefined;
+    var _g = React.useState(uncontrolled ? defaultExpanded : expanded), expandedState = _g[0], setExpanded = _g[1];
+    var isExpanded = uncontrolled ? expandedState : expanded;
+    var isStartPosition = controlPosition === 'start';
+    var _h = hooks_useRecalculateContentHeight.useRecalculateContentHeight(isExpanded), contentRef = _h.contentRef, contentCaseRef = _h.contentCaseRef;
+    var controlContent = control === undefined ? (React__default.default.createElement(components_defaultControlIcon_Component.DefaultControlIcon, { expanded: isExpanded, startPosition: isStartPosition })) : (control);
+    var headerContent = typeof header === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-large', weight: 'medium' }, header)) : (header);
+    var bodyContent = typeof children === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium' }, children)) : (children);
+    var handleExpandedChange = React.useCallback(function () {
+        if (uncontrolled) {
+            setExpanded(!isExpanded);
+        }
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!isExpanded);
+    }, [isExpanded, onExpandedChange, uncontrolled]);
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            handleExpandedChange();
+        }
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, rest, { "data-test-id": dataTestId, className: cn__default.default(styles.accordion, className) }),
+        React__default.default.createElement("div", { role: 'button', tabIndex: 0, "aria-expanded": isExpanded, onClick: handleExpandedChange, onKeyDown: handleKeyDown, className: cn__default.default(styles.container, containerClassName) },
+            React__default.default.createElement("div", { className: cn__default.default(styles.header, headerClassName, (_b = {},
+                    _b[styles.endPosition] = isStartPosition,
+                    _b)) }, headerContent),
+            React__default.default.createElement("div", { className: cn__default.default(styles.control, controlClassName, (_c = {},
+                    _c[styles.startPosition] = isStartPosition,
+                    _c)) }, controlContent)),
+        React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(styles.body, bodyClassName, (_d = {}, _d[styles.expandedBody] = isExpanded, _d)) },
+            React__default.default.createElement("div", { className: cn__default.default(styles.bodyContent), ref: contentCaseRef }, bodyContent))));
+};
+
+exports.Accordion = Accordion;

package/accordion/components/default-control-icon/Component.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    expanded: boolean;
+    startPosition: boolean;
+};
+declare const DefaultControlIcon: FC<Props>;
+export { DefaultControlIcon };

package/accordion/components/default-control-icon/Component.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"icon":"accordion__icon_8obqp","expanded":"accordion__expanded_8obqp","startPosition":"accordion__startPosition_8obqp"};
+require('./index.css');
+
+var DefaultControlIcon = function (_a) {
+    var _b;
+    var expanded = _a.expanded, startPosition = _a.startPosition;
+    return (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, { className: cn__default.default(styles.icon, (_b = {},
+            _b[styles.expanded] = expanded,
+            _b[styles.startPosition] = startPosition,
+            _b)) }));
+};
+
+exports.DefaultControlIcon = DefaultControlIcon;

package/accordion/components/default-control-icon/index.css

@@ -0,0 +1,16 @@
+/* hash: 1kvr7 */
+.accordion__icon_8obqp {
+    transition: 300ms transform;
+}
+
+.accordion__expanded_8obqp {
+    transform: rotate(180deg);
+}
+
+.accordion__startPosition_8obqp {
+    transform: rotate(-90deg);
+}
+
+.accordion__startPosition_8obqp.accordion__expanded_8obqp {
+    transform: rotate(0deg);
+}

package/accordion/components/default-control-icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/accordion/components/default-control-icon/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_defaultControlIcon_Component = require('./Component.js');
+
+
+
+exports.DefaultControlIcon = components_defaultControlIcon_Component.DefaultControlIcon;

package/accordion/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./default-control-icon/index";

package/accordion/components/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_defaultControlIcon_Component = require('./default-control-icon/Component.js');
+
+
+
+exports.DefaultControlIcon = components_defaultControlIcon_Component.DefaultControlIcon;

package/accordion/cssm/Component.d.ts

@@ -0,0 +1,58 @@
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
+import { ControlPosition } from "./typings";
+type AccordionProps = {
+    /**
+     * Состояние компонента
+     */
+    expanded?: boolean;
+    /**
+     * Элемент заголовка
+     */
+    header: ReactNode;
+    /**
+     * Слот для элемента управления
+     */
+    control?: ReactNode;
+    /**
+     * Указывает компоненту - где будет размещен control
+     */
+    controlPosition?: ControlPosition;
+    /**
+     * Начальное состояние uncontrolled компонента
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Основной элемент для отображения содержимого
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс обертки
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контейнера с заголовком
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для header
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс для control
+     */
+    controlClassName?: string;
+    /**
+     * Дополнительный класс для body
+     */
+    bodyClassName?: string;
+    /**
+     * Обработчик смены состояний `expanded`
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AnchorHTMLAttributes<HTMLDivElement>;
+declare const Accordion: FC<AccordionProps>;
+export { AccordionProps, Accordion };

package/accordion/cssm/Component.js

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../typography/cssm');
+var components_defaultControlIcon_Component = require('./components/default-control-icon/Component.js');
+var hooks_useRecalculateContentHeight = require('./hooks/useRecalculateContentHeight.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Accordion = function (_a) {
+    var _b, _c, _d;
+    var expanded = _a.expanded, _e = _a.defaultExpanded, defaultExpanded = _e === void 0 ? false : _e, header = _a.header, control = _a.control, _f = _a.controlPosition, controlPosition = _f === void 0 ? 'end' : _f, children = _a.children, className = _a.className, containerClassName = _a.containerClassName, headerClassName = _a.headerClassName, controlClassName = _a.controlClassName, bodyClassName = _a.bodyClassName, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId, rest = tslib.__rest(_a, ["expanded", "defaultExpanded", "header", "control", "controlPosition", "children", "className", "containerClassName", "headerClassName", "controlClassName", "bodyClassName", "onExpandedChange", "dataTestId"]);
+    var uncontrolled = expanded === undefined;
+    var _g = React.useState(uncontrolled ? defaultExpanded : expanded), expandedState = _g[0], setExpanded = _g[1];
+    var isExpanded = uncontrolled ? expandedState : expanded;
+    var isStartPosition = controlPosition === 'start';
+    var _h = hooks_useRecalculateContentHeight.useRecalculateContentHeight(isExpanded), contentRef = _h.contentRef, contentCaseRef = _h.contentCaseRef;
+    var controlContent = control === undefined ? (React__default.default.createElement(components_defaultControlIcon_Component.DefaultControlIcon, { expanded: isExpanded, startPosition: isStartPosition })) : (control);
+    var headerContent = typeof header === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-large', weight: 'medium' }, header)) : (header);
+    var bodyContent = typeof children === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium' }, children)) : (children);
+    var handleExpandedChange = React.useCallback(function () {
+        if (uncontrolled) {
+            setExpanded(!isExpanded);
+        }
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!isExpanded);
+    }, [isExpanded, onExpandedChange, uncontrolled]);
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            handleExpandedChange();
+        }
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, rest, { "data-test-id": dataTestId, className: cn__default.default(styles__default.default.accordion, className) }),
+        React__default.default.createElement("div", { role: 'button', tabIndex: 0, "aria-expanded": isExpanded, onClick: handleExpandedChange, onKeyDown: handleKeyDown, className: cn__default.default(styles__default.default.container, containerClassName) },
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.header, headerClassName, (_b = {},
+                    _b[styles__default.default.endPosition] = isStartPosition,
+                    _b)) }, headerContent),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.control, controlClassName, (_c = {},
+                    _c[styles__default.default.startPosition] = isStartPosition,
+                    _c)) }, controlContent)),
+        React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(styles__default.default.body, bodyClassName, (_d = {}, _d[styles__default.default.expandedBody] = isExpanded, _d)) },
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.bodyContent), ref: contentCaseRef }, bodyContent))));
+};
+
+exports.Accordion = Accordion;

package/accordion/cssm/components/default-control-icon/Component.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    expanded: boolean;
+    startPosition: boolean;
+};
+declare const DefaultControlIcon: FC<Props>;
+export { DefaultControlIcon };

package/accordion/cssm/components/default-control-icon/Component.js

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var DefaultControlIcon = function (_a) {
+    var _b;
+    var expanded = _a.expanded, startPosition = _a.startPosition;
+    return (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, { className: cn__default.default(styles__default.default.icon, (_b = {},
+            _b[styles__default.default.expanded] = expanded,
+            _b[styles__default.default.startPosition] = startPosition,
+            _b)) }));
+};
+
+exports.DefaultControlIcon = DefaultControlIcon;

package/accordion/cssm/components/default-control-icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/accordion/cssm/components/default-control-icon/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_defaultControlIcon_Component = require('./Component.js');
+
+
+
+exports.DefaultControlIcon = components_defaultControlIcon_Component.DefaultControlIcon;

package/accordion/cssm/components/default-control-icon/index.module.css

@@ -0,0 +1,15 @@
+.icon {
+    transition: 300ms transform;
+}
+
+.expanded {
+    transform: rotate(180deg);
+}
+
+.startPosition {
+    transform: rotate(-90deg);
+}
+
+.startPosition.expanded {
+    transform: rotate(0deg);
+}

package/accordion/cssm/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./default-control-icon/index";

package/accordion/cssm/components/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_defaultControlIcon_Component = require('./default-control-icon/Component.js');
+
+
+
+exports.DefaultControlIcon = components_defaultControlIcon_Component.DefaultControlIcon;

package/accordion/cssm/docs/demo.css

@@ -0,0 +1,38 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+} :root {
+} @media screen and (min-width: 1024px) { .accordion-container {
+        width: 474px
+}
+    } @media screen and (min-width: 1024px) { .accordion-wrapper {
+        width: 304px
+}
+    } .accordion-header,
+.accordion-control,
+.accordion-body {
+    background-color: rgba(55, 120, 251, 0.1);
+    box-sizing: border-box;
+    border-radius: var(--gap-xs);
+    border: 1px dashed rgb(55, 120, 251);
+    height: 24px;
+} .accordion-header {
+    width: 272px;
+} .accordion-control {
+    width: 24px;
+} .accordion-body {
+    width: 300px;
+    height: 48px;
+}

package/accordion/cssm/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useRecalculateContentHeight";

package/accordion/cssm/hooks/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks_useRecalculateContentHeight = require('./useRecalculateContentHeight.js');
+
+
+
+exports.useRecalculateContentHeight = hooks_useRecalculateContentHeight.useRecalculateContentHeight;

package/accordion/cssm/hooks/useRecalculateContentHeight.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const useRecalculateContentHeight: (expanded: boolean) => {
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentCaseRef: import("react").RefObject<HTMLDivElement>;
+};
+export { useRecalculateContentHeight };

package/accordion/cssm/hooks/useRecalculateContentHeight.js

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizeObserver = require('@juggle/resize-observer');
+
+var useRecalculateContentHeight = function (expanded) {
+    var contentRef = React.useRef(null);
+    var contentCaseRef = React.useRef(null);
+    React.useEffect(function () {
+        var recalculate = function () {
+            var contentHeight;
+            if (!contentRef.current || !contentCaseRef.current) {
+                return;
+            }
+            if (expanded) {
+                contentHeight = contentCaseRef.current.offsetHeight;
+            }
+            else {
+                contentHeight = 0;
+            }
+            contentRef.current.style.height = "".concat(contentHeight, "px");
+        };
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        var observer = new ResizeObserver(recalculate);
+        if (contentRef.current) {
+            observer.observe(contentRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, [expanded]);
+    return { contentRef: contentRef, contentCaseRef: contentCaseRef };
+};
+
+exports.useRecalculateContentHeight = useRecalculateContentHeight;

package/accordion/cssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./typings";

package/accordion/cssm/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Accordion = Component.Accordion;

package/accordion/cssm/index.module.css

@@ -0,0 +1,49 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .accordion {
+    width: 100%;
+} .container {
+    display: flex;
+    cursor: pointer;
+} .header {
+    display: flex;
+    align-items: center;
+} .control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--gap-2xs);
+} .body {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 400ms cubic-bezier(0.2, 0, 0.2, 1.25), visibility 0s linear 400ms;
+} .expandedBody {
+    visibility: visible;
+    height: auto;
+    transition: height 400ms cubic-bezier(0, 0.1, 0.5, 1);
+    transform: translate3d(0, 0, 0);
+} .bodyContent {
+    padding-top: var(--gap-s);
+} .endPosition {
+    order: 2;
+    margin-left: var(--gap-2xs);
+} .startPosition {
+    margin-left: 0;
+}

package/accordion/cssm/typings.d.ts

@@ -0,0 +1,2 @@
+type ControlPosition = 'start' | 'end';
+export { ControlPosition };

package/accordion/cssm/typings.js

@@ -0,0 +1 @@
+

package/accordion/esm/Component.d.ts

@@ -0,0 +1,58 @@
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
+import { ControlPosition } from "./typings";
+type AccordionProps = {
+    /**
+     * Состояние компонента
+     */
+    expanded?: boolean;
+    /**
+     * Элемент заголовка
+     */
+    header: ReactNode;
+    /**
+     * Слот для элемента управления
+     */
+    control?: ReactNode;
+    /**
+     * Указывает компоненту - где будет размещен control
+     */
+    controlPosition?: ControlPosition;
+    /**
+     * Начальное состояние uncontrolled компонента
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Основной элемент для отображения содержимого
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс обертки
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контейнера с заголовком
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для header
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс для control
+     */
+    controlClassName?: string;
+    /**
+     * Дополнительный класс для body
+     */
+    bodyClassName?: string;
+    /**
+     * Обработчик смены состояний `expanded`
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AnchorHTMLAttributes<HTMLDivElement>;
+declare const Accordion: FC<AccordionProps>;
+export { AccordionProps, Accordion };