@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Checkbox/Checkbox.css

@@ -0,0 +1,120 @@
+.Checkbox {
+  inline-size: var(--checkbox-size, 20px);
+  block-size: var(--checkbox-size, 20px);
+  position: relative;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+  .Checkbox_size_l,
+  .Checkbox_size_m {
+    --checkbox-size: 20px;
+  }
+
+  .Checkbox_size_s,
+  .Checkbox_size_xs,
+  .Checkbox_size_2xs {
+    --checkbox-size: 16px;
+  }
+
+.Checkbox-Box {
+  inline-size: 100%;
+  block-size: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: inherit;
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-main);
+  background-color: var(--color-background-primary);
+  transition: border-color var(--transition-default),
+    background-color var(--transition-default),
+    box-shadow var(--transition-default);
+}
+
+.Checkbox-Icon {
+  opacity: 0;
+  transition: opacity var(--transition-default);
+  color: var(--color-content-primary-inverse);
+}
+
+.Checkbox-Input {
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  cursor: pointer;
+  z-index: var(--z-index-absolute);
+}
+
+.Checkbox-Input:hover:not(:checked, :disabled) + .Checkbox-Box {
+    background-color: var(--color-background-primary-hover);
+    border-color: var(--color-border-main-hover);
+  }
+
+.Checkbox-Input:hover:checked:not(:active, :disabled) + .Checkbox-Box {
+    background-color: var(--color-background-action-hover);
+    border-color: var(--color-background-action-hover);
+  }
+
+.Checkbox-Input:active:not(:checked, :disabled) + .Checkbox-Box {
+    background-color: var(--color-background-primary-pressed);
+    border-color: var(--color-border-main-hover);
+  }
+
+.Checkbox-Input:active:checked + .Checkbox-Box {
+    background-color: var(--color-background-action-pressed);
+    border-color: var(--color-background-action-pressed);
+  }
+
+.Checkbox-Input:focus + .Checkbox-Box {
+    box-shadow: var(--shadow-outline-focused);
+  }
+
+.Checkbox-Input:focus:not(:focus-visible) + .Checkbox-Box {
+    box-shadow: none;
+  }
+
+.Checkbox-Input:checked:not(:hover, :active) + .Checkbox-Box {
+    background-color: var(--color-background-action);
+    border-color: var(--color-background-action);
+  }
+
+.Checkbox-Input:checked + .Checkbox-Box .Checkbox-Icon {
+    opacity: 1;
+  }
+
+.Checkbox_indeterminate .Checkbox-Box {
+    background-color: var(--color-background-action);
+    border-color: var(--color-background-action);
+  }
+
+.Checkbox_indeterminate .Checkbox-Icon {
+    opacity: 1;
+  }
+
+.Checkbox_indeterminate .Checkbox-Input:hover:not(:disabled) + .Checkbox-Box {
+    background-color: var(--color-background-action-hover);
+    border-color: var(--color-background-action-hover);
+  }
+
+.Checkbox_indeterminate .Checkbox-Input:active:not(:disabled) + .Checkbox-Box {
+    background-color: var(--color-background-action-pressed);
+    border-color: var(--color-background-action-pressed);
+  }
+
+.Checkbox_disabled {
+  pointer-events: none;
+}
+
+.Checkbox_disabled .Checkbox-Box {
+    background-color: var(--color-background-disabled);
+    border-color: var(--color-border-disabled);
+  }
+
+.Checkbox_disabled .Checkbox-Input:checked + .Checkbox-Box {
+    background-color: var(--color-background-action-active-disabled);
+    border-color: var(--color-background-action-active-disabled);
+  }

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

@@ -0,0 +1,33 @@
+import './Checkbox.css';
+import React from 'react';
+import type { InputHTMLAttributes, Ref } from 'react';
+import { type FormControlLabelProps } from '../FormControlLabel';
+export declare const checkboxSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type CheckboxSizeVariant = (typeof checkboxSizeVariant)[number];
+export type CheckboxProps = {
+    /** Размер */
+    size?: CheckboxSizeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Если {true} отображает компонент как частично выбранный */
+    indeterminate?: boolean;
+    /** Расположение лейбла */
+    align?: FormControlLabelProps['align'];
+    /** Лейбл */
+    label?: React.ReactNode;
+    /** Позиция лейбла */
+    labelPlacement?: FormControlLabelProps['labelPlacement'];
+    /** Свойства лейбла */
+    labelProps?: FormControlLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLLabelElement>;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Кастомный класс */
+    className?: string;
+    children?: never;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const cnCheckbox: import("@bem-react/classname").ClassNameFormatter;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,30 @@
+"use strict";
+exports.__esModule = true;
+exports.Checkbox = exports.cnCheckbox = exports.checkboxSizeVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Checkbox.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var FormControlLabel_1 = require("../FormControlLabel");
+var components_1 = require("./components");
+exports.checkboxSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
+exports.cnCheckbox = (0, classname_1.cn)('Checkbox');
+exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Checkbox'
+    });
+    var _a = props.align, align = _a === void 0 ? 'center' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'right' : _b, _c = props.size, size = _c === void 0 ? 'm' : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checked = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, other = tslib_1.__rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate"]);
+    return (react_1["default"].createElement(FormControlLabel_1.FormControlLabel, tslib_1.__assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
+        react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)({
+                size: size,
+                disabled: disabled,
+                checked: checked,
+                indeterminate: indeterminate
+            }) },
+            react_1["default"].createElement("input", tslib_1.__assign({ type: "checkbox", className: (0, exports.cnCheckbox)('Input'), disabled: disabled, checked: checked }, other, { ref: inputRef })),
+            react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)('Box') },
+                react_1["default"].createElement(components_1.CheckboxIcon, { indeterminate: indeterminate, className: (0, exports.cnCheckbox)('Icon') })))));
+});
+exports.Checkbox.displayName = 'Checkbox';

package/__inner__/cjs/components/Checkbox/components/CheckIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+export declare const CheckIcon: React.FC<IconProps>;

package/__inner__/cjs/components/Checkbox/components/CheckIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+exports.CheckIcon = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+exports.CheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    react_1["default"].createElement("path", { d: "M3.31479 8.85849L0.132955 5.44128C-0.0443184 5.25327 -0.0443184 4.94725 0.132955 4.75723L0.775686 4.07419C0.95296 3.88618 1.24114 3.88618 1.41842 4.07419L3.63661 6.46634L8.58118 1.14101C8.75846 0.952997 9.04664 0.952997 9.22391 1.14101L9.86664 1.82505C10.0439 2.01306 10.0439 2.32008 9.86664 2.50709L3.95752 8.85849C3.78025 9.0465 3.49206 9.0465 3.31479 8.85849Z", fill: "currentColor" }))); });
+exports.CheckIcon.displayName = 'CheckIcon';

package/__inner__/cjs/components/Checkbox/components/CheckboxIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+interface CheckboxIconProps extends IconProps {
+    indeterminate?: boolean;
+}
+export declare const CheckboxIcon: React.FC<CheckboxIconProps>;
+export {};

package/__inner__/cjs/components/Checkbox/components/CheckboxIcon.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.CheckboxIcon = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var CheckIcon_1 = require("./CheckIcon");
+var IndeterminateCheckIcon_1 = require("./IndeterminateCheckIcon");
+exports.CheckboxIcon = (0, react_1.forwardRef)(function (_a, ref) {
+    var indeterminate = _a.indeterminate, otherProps = tslib_1.__rest(_a, ["indeterminate"]);
+    return indeterminate ? (react_1["default"].createElement(IndeterminateCheckIcon_1.IndeterminateCheckIcon, tslib_1.__assign({ ref: ref }, otherProps))) : (react_1["default"].createElement(CheckIcon_1.CheckIcon, tslib_1.__assign({ ref: ref }, otherProps)));
+});
+exports.CheckboxIcon.displayName = 'CheckboxIcon';

package/__inner__/cjs/components/Checkbox/components/IndeterminateCheckIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+export declare const IndeterminateCheckIcon: React.FC<IconProps>;

package/__inner__/cjs/components/Checkbox/components/IndeterminateCheckIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+exports.IndeterminateCheckIcon = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+exports.IndeterminateCheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    react_1["default"].createElement("path", { d: "M0 4.5C0 4.22386 0.223858 4 0.5 4H9.5C9.77614 4 10 4.22386 10 4.5V5.5C10 5.77614 9.77614 6 9.5 6H0.5C0.223858 6 0 5.77614 0 5.5V4.5Z", fill: "currentColor" }))); });
+exports.IndeterminateCheckIcon.displayName = 'IndeterminateCheckIcon';

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

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

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

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

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

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

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

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

package/__inner__/cjs/components/Chip/Chip.css

@@ -0,0 +1,104 @@
+/* stylelint-disable */
+.Chip {
+  --chip-border-radius: 24px;
+  display: inline-flex;
+  border-radius: var(--chip-border-radius);
+}
+.Chip_size_xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+
+      --chip-min-width: 64px;
+      --chip-height: var(--space-xl);
+      --chip-padding-x: var(--space-m);
+    }
+.Chip_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --chip-min-width: 72px;
+      --chip-height: var(--space-2xl);
+      --chip-padding-x: var(--space-l);
+    }
+.Chip_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --chip-min-width: 80px;
+      --chip-height: var(--space-3xl);
+      --chip-padding-x: 20px;
+    }
+.Chip_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --chip-min-width: 88px;
+      --chip-height: var(--space-4xl);
+      --chip-padding-x: var(--space-xl);
+    }
+.Chip_color_primary {
+      --chip-bg-color: var(--color-background-action-light);
+      --chip-bg-color-hover: var(--color-background-action-light-hover);
+      --chip-bg-color-active: var(--color-background-action-light-pressed);
+      --chip-text-color: var(--color-content-action-dark);
+    }
+.Chip_color_secondary {
+      --chip-bg-color: var(--color-background-secondary);
+      --chip-bg-color-hover: var(--color-background-secondary-hover);
+      --chip-bg-color-active: var(--color-background-secondary-pressed);
+      --chip-text-color: var(--color-content-primary);
+    }
+.Chip-Content {
+    --chip-cursor-style: pointer;
+    background-color: var(--chip-bg-color);
+    block-size: var(--chip-height);
+    color: var(--chip-text-color);
+    padding: 0 var(--chip-padding-x);
+    border-radius: var(--chip-border-radius);
+    gap: var(--space-s);
+    transition: border-color var(--transition-default),
+      color var(--transition-default),
+      background-color var(--transition-default),
+      box-shadow var(--transition-default);
+    cursor: var(--chip-cursor-style);
+    min-inline-size: var(--chip-min-width);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    inline-size: 100%;
+    box-sizing: border-box;
+  }
+.Chip-Content:hover {
+      --chip-bg-color: var(--chip-bg-color-hover);
+    }
+.Chip-Content:active {
+      --chip-bg-color: var(--chip-bg-color-active);
+    }
+.Chip-Input {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+.Chip-Input:focus + .Chip-Content {
+      box-shadow: var(--shadow-outline-focused);
+    }
+.Chip-Input:focus:not(:focus-visible) + .Chip-Content {
+      box-shadow: none;
+    }
+.Chip-Input:checked + .Chip-Content {
+      --chip-bg-color: var(--color-background-action);
+      --chip-text-color: var(--color-content-action-on);
+    }
+.Chip-Input:disabled + .Chip-Content {
+      --chip-cursor-style: auto;
+      --chip-bg-color: var(--color-background-disabled);
+      --chip-text-color: var(--color-content-disabled);
+    }
+.Chip-Icon {
+    color: inherit;
+  }

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

@@ -0,0 +1,36 @@
+import './Chip.css';
+import React from 'react';
+import type { Ref, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { ExtendableProps } from '../../types/ExtendableProps';
+export declare const cnChip: import("@bem-react/classname").ClassNameFormatter;
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export declare const chipColorVariant: readonly ["primary", "secondary"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
+export type ChipIconComponent = React.FC<IconProps & {
+    size?: IconSize;
+}>;
+export type ChipBaseProps = {
+    /** Размер компонента */
+    size?: ChipSizeVariant;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Если {true} компонент отображается как заблокированный */
+    disabled?: boolean;
+    /** Иконка слева */
+    iconLeft?: ChipIconComponent;
+    /** Иконка справа */
+    iconRight?: ChipIconComponent;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: Ref<HTMLInputElement>;
+    /** HTML-атрибуты label-элемента в компоненте */
+    labelProps?: HTMLAttributes<HTMLLabelElement>;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Содержимое компонента */
+    children: ReactNode;
+    'data-testid'?: string;
+};
+export type ChipProps = ExtendableProps<InputHTMLAttributes<HTMLInputElement>, ChipBaseProps>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof ChipBaseProps> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/cjs/components/Chip/Chip.js

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+exports.Chip = exports.chipColorVariant = exports.chipSizeVariant = exports.cnChip = void 0;
+var tslib_1 = require("tslib");
+require("./Chip.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var constants_1 = require("./constants");
+exports.cnChip = (0, classname_1.cn)('Chip');
+exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
+exports.chipColorVariant = ['primary', 'secondary'];
+exports.Chip = (0, react_1.forwardRef)(function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
+    var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);
+    return (react_1["default"].createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnChip)('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
+        react_1["default"].createElement("input", tslib_1.__assign({ ref: inputRef, className: (0, exports.cnChip)('Input'), disabled: disabled, type: "checkbox" }, other)),
+        react_1["default"].createElement("span", { className: (0, exports.cnChip)('Content') },
+            IconLeft && react_1["default"].createElement(IconLeft, { size: iconSize, className: (0, exports.cnChip)('Icon') }),
+            children,
+            IconRight && react_1["default"].createElement(IconRight, { size: iconSize, className: (0, exports.cnChip)('Icon') }))));
+});
+exports.Chip.displayName = 'Chip';

package/__inner__/cjs/components/Chip/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const CHIP_DEFAULT_VARIANT = "primary";
+export declare const CHIP_DEFAULT_SIZE = "m";
+export declare const CHIP_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/Chip/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.CHIP_DEFAULT_DISABLED = exports.CHIP_DEFAULT_SIZE = exports.CHIP_DEFAULT_VARIANT = void 0;
+exports.CHIP_DEFAULT_VARIANT = 'primary';
+exports.CHIP_DEFAULT_SIZE = 'm';
+exports.CHIP_DEFAULT_DISABLED = false;

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

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

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

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

package/__inner__/cjs/components/Collapse/Collapse.css

@@ -0,0 +1,6 @@
+.Collapse {
+  inline-size: 100%;
+  transition: block-size var(--transition-default) ease;
+  overflow: hidden;
+  will-change: height;
+}

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { ReactNode, HTMLAttributes } from 'react';
+import './Collapse.css';
+export declare const cnCollapse: import("@bem-react/classname").ClassNameFormatter;
+export type CollapseProps = {
+    /** Содержимое */
+    children: ReactNode;
+    /** Если {true} раскрыт */
+    expanded?: boolean;
+    /** Если {true} размонтирует контент при закрытии */
+    unmountOnClosed?: boolean;
+    /**
+     * Время анимации
+     *
+     * @default 120
+     * */
+    timeout?: number;
+    /**
+     * Размер в полностью закрытом состоянии
+     * При передаче числа размерность будет в пикселях
+     * Например: '10px', 0, '1vh'.
+     *
+     * @default 0
+     */
+    collapsedSize?: number | string;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Анимирует состояние expanded при первом рендере */
+    appear?: boolean;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: (node: HTMLElement, isAppeared: boolean) => void;
+    /** Функция обратного вызова которая будет вызвана после onEnter и до onEntered */
+    onEntering?: (node: HTMLElement, isAppeared: boolean) => void;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: (node: HTMLElement, isAppeared: boolean) => void;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: (node: HTMLElement) => void;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExiting?: (node: HTMLElement) => void;
+    /** Функция обратного вызова которая будет вызвана после onExit и до onExited */
+    onExited?: (node: HTMLElement) => void;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Collapse: React.ForwardRefExoticComponent<{
+    /** Содержимое */
+    children: ReactNode;
+    /** Если {true} раскрыт */
+    expanded?: boolean | undefined;
+    /** Если {true} размонтирует контент при закрытии */
+    unmountOnClosed?: boolean | undefined;
+    /**
+     * Время анимации
+     *
+     * @default 120
+     * */
+    timeout?: number | undefined;
+    /**
+     * Размер в полностью закрытом состоянии
+     * При передаче числа размерность будет в пикселях
+     * Например: '10px', 0, '1vh'.
+     *
+     * @default 0
+     */
+    collapsedSize?: string | number | undefined;
+    /** Дополнительные CSS-классы */
+    className?: string | undefined;
+    /** Анимирует состояние expanded при первом рендере */
+    appear?: boolean | undefined;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: ((node: HTMLElement, isAppeared: boolean) => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после onEnter и до onEntered */
+    onEntering?: ((node: HTMLElement, isAppeared: boolean) => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: ((node: HTMLElement, isAppeared: boolean) => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: ((node: HTMLElement) => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExiting?: ((node: HTMLElement) => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после onExit и до onExited */
+    onExited?: ((node: HTMLElement) => void) | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Collapse/Collapse.js

@@ -0,0 +1,47 @@
+"use strict";
+exports.__esModule = true;
+exports.Collapse = exports.cnCollapse = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var isNumber_1 = require("../../utils/isNumber");
+var isString_1 = require("../../utils/isString");
+var constants_1 = require("./constants");
+require("./Collapse.css");
+exports.cnCollapse = (0, classname_1.cn)('Collapse');
+exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Collapse' });
+    var onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, style = props.style, _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? constants_1.DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? constants_1.DEFAULT_COLLAPSE_TIMEOUT : _b, other = tslib_1.__rest(props, ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style", "collapsedSize", "timeout"]);
+    // Для высчитывания высоты Collapse
+    var collapseInnerRef = (0, react_1.useRef)(null);
+    var collapsedSize = (0, react_1.useMemo)(function () {
+        if (!collapsedSizeProp ||
+            (!(0, isString_1.isString)(collapsedSizeProp) && !(0, isNumber_1.isNumber)(collapsedSizeProp))) {
+            return '0px';
+        }
+        return (0, isString_1.isString)(collapsedSizeProp)
+            ? collapsedSizeProp
+            : "".concat(collapsedSizeProp, "px");
+    }, [collapsedSizeProp]);
+    return (react_1["default"].createElement(react_transition_group_1.Transition, { timeout: timeout, "in": expanded, unmountOnExit: unmountOnClosed, appear: appear, onEntering: onEntering, onExiting: onExiting, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited }, function (state) {
+        var _a, _b;
+        var transitionStyles = {
+            entering: {
+                height: (_a = collapseInnerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight
+            },
+            entered: {
+                height: expanded
+                    ? 'auto'
+                    : (_b = collapseInnerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight
+            },
+            exited: tslib_1.__assign({}, (collapsedSize === '0px' && { visibility: 'hidden' }))
+        };
+        return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnCollapse)({
+                animation: state
+            }, [className]), style: tslib_1.__assign(tslib_1.__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: ref }),
+            react_1["default"].createElement("div", { ref: collapseInnerRef, className: (0, exports.cnCollapse)('Inner') }, children)));
+    }));
+});
+exports.Collapse.displayName = 'Collapse';

package/__inner__/cjs/components/Collapse/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_COLLAPSE_TIMEOUT = 120;
+export declare const DEFAULT_COLLAPSED_SIZE = 0;

package/__inner__/cjs/components/Collapse/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.DEFAULT_COLLAPSED_SIZE = exports.DEFAULT_COLLAPSE_TIMEOUT = void 0;
+exports.DEFAULT_COLLAPSE_TIMEOUT = 120;
+exports.DEFAULT_COLLAPSED_SIZE = 0;

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

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

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

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