@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Select/types.d.ts

@@ -0,0 +1,59 @@
+import React, { SyntheticEvent } from 'react';
+import type { HTMLAttributes } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { MenuProps } from '../Menu';
+import type { SelectInputProps } from './components';
+export type SelectSizeVariant = FormElementSizeVariant;
+export type SelectPropLabel = string;
+export type SelectPropValue = string | number | undefined;
+export type SelectedOptionProp = {
+    label?: SelectPropLabel;
+    value?: SelectPropValue;
+};
+export type SelectRenderValue = (option: SelectedOptionProp) => React.ReactNode | null;
+type SelectOpenControlledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: never;
+};
+type SelectOpenUncontrolledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: never;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen: boolean;
+};
+type SelectControlledProps = {
+    /** Выбранное значение */
+    value?: SelectPropValue;
+    /** Обработчик события на изменение выбранного значения */
+    onChange?: (value: SelectPropValue, e: SyntheticEvent) => void;
+    /** Значение поля по умолчанию (неконтролируемый компонент) */
+    defaultValue?: never;
+};
+type SelectUncontrolledProps = {
+    /** Значение поля по умолчанию (неконтролируемый компонент) */
+    defaultValue: SelectPropValue;
+    /** Выбранное значение */
+    value?: never;
+    /** Обработчик события на изменение выбранного значения */
+    onChange?: never;
+};
+export type SelectProps = {
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Размер компонента */
+    size?: SelectSizeVariant;
+    /** Рендер-функция для выбранного значения */
+    renderValue?: SelectRenderValue;
+    /** Содержимое компонента */
+    children?: React.ReactNode;
+    /** Свойства компонента Menu */
+    menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
+    onClose?: () => void;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
+    onOpen?: () => void;
+    'data-testid'?: string;
+} & Pick<SelectInputProps, 'id' | 'name' | 'inputProps' | 'inputRef' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'labelProps' | 'labelRef'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & (SelectControlledProps | SelectUncontrolledProps) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+export {};

package/__inner__/cjs/components/Select/types.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/__inner__/cjs/components/Skeleton/Skeleton.css

@@ -0,0 +1,41 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */
+.Skeleton {
+  --skeleton-loader-width: 100px;
+  display: flex;
+  visibility: initial;
+  background-color: var(--color-background-secondary);
+  background-image: linear-gradient(
+    to right,
+    var(--color-background-secondary) 0%,
+    var(--color-background-secondary-hover)
+      calc(var(--skeleton-loader-width) / 2),
+    var(--color-background-secondary) var(--skeleton-loader-width)
+  );
+  animation: skeleton-wave 1.5s linear infinite;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+@media (width >= 640px) {
+.Skeleton {
+    animation: skeleton-wave 2.5s linear infinite;
+}
+  }
+.Skeleton_hasChildren {
+    max-inline-size: -moz-fit-content;
+    max-inline-size: fit-content;
+  }
+.Skeleton_hasChildren > * {
+      visibility: hidden;
+    }
+@keyframes skeleton-wave {
+  0% {
+    background-position: calc(-1 * var(--skeleton-loader-width));
+  }
+
+  100% {
+    background-position: 100vi;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Skeleton.css';
+import { type SkeletonCircularProps } from './SkeletonCircular';
+import { type SkeletonRectangularProps } from './SkeletonRectangular';
+import { type SkeletonTypographyProps } from './SkeletonTypography';
+export type SkeletonProps = ({
+    variant: 'rectangular';
+} & SkeletonRectangularProps) | ({
+    variant: 'circular';
+} & SkeletonCircularProps) | ({
+    variant: 'typography';
+} & SkeletonTypographyProps);
+export declare const Skeleton: React.FC<SkeletonProps>;

package/__inner__/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.Skeleton = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+require("./Skeleton.css");
+var SkeletonCircular_1 = require("./SkeletonCircular");
+var SkeletonRectangular_1 = require("./SkeletonRectangular");
+var SkeletonTypography_1 = require("./SkeletonTypography");
+exports.Skeleton = (0, react_1.forwardRef)(function (props, ref) {
+    var variant = props.variant, children = props.children, other = tslib_1.__rest(props, ["variant", "children"]);
+    if (variant === 'circular') {
+        return (react_1["default"].createElement(SkeletonCircular_1.SkeletonCircular, tslib_1.__assign({}, other, { ref: ref }), children));
+    }
+    if (variant === 'typography') {
+        return react_1["default"].createElement(SkeletonTypography_1.SkeletonTypography, tslib_1.__assign({}, other, { ref: ref }));
+    }
+    return (react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, tslib_1.__assign({}, other, { ref: ref }), children));
+});
+exports.Skeleton.displayName = 'Skeleton';

package/__inner__/cjs/components/Skeleton/SkeletonCircular/SkeletonCircular.css

@@ -0,0 +1,3 @@
+.SkeletonCircular {
+  border-radius: 50%;
+}

package/__inner__/cjs/components/Skeleton/SkeletonCircular/SkeletonCircular.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CSSProperties, HTMLAttributes, Ref, ReactNode } from 'react';
+import './SkeletonCircular.css';
+export declare const cnSkeletonCircular: import("@bem-react/classname").ClassNameFormatter;
+export type SkeletonCircularProps = {
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Размер */
+    size?: CSSProperties['width'] & CSSProperties['height'];
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLSpanElement>;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const SkeletonCircular: React.ForwardRefExoticComponent<Omit<SkeletonCircularProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/__inner__/cjs/components/Skeleton/SkeletonCircular/SkeletonCircular.js

@@ -0,0 +1,14 @@
+"use strict";
+exports.__esModule = true;
+exports.SkeletonCircular = exports.cnSkeletonCircular = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../utils/classname");
+var SkeletonRectangular_1 = require("../SkeletonRectangular");
+require("./SkeletonCircular.css");
+exports.cnSkeletonCircular = (0, classname_1.cn)('SkeletonCircular');
+exports.SkeletonCircular = (0, react_1.forwardRef)(function (_a, ref) {
+    var size = _a.size, className = _a.className, other = tslib_1.__rest(_a, ["size", "className"]);
+    return (react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, tslib_1.__assign({ className: (0, exports.cnSkeletonCircular)('', [className]), width: size, height: size }, other, { ref: ref })));
+});
+exports.SkeletonCircular.displayName = 'SkeletonCircular';

package/__inner__/cjs/components/Skeleton/SkeletonCircular/index.d.ts

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

package/__inner__/cjs/components/Skeleton/SkeletonCircular/index.js

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

package/__inner__/cjs/components/Skeleton/SkeletonRectangular/SkeletonRectangular.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Ref, HTMLAttributes, CSSProperties, ReactNode } from 'react';
+import '../Skeleton.css';
+export declare const cnSkeleton: import("@bem-react/classname").ClassNameFormatter;
+export type SkeletonRectangularProps = {
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Ширина */
+    width?: CSSProperties['width'];
+    /** Высота */
+    height?: CSSProperties['height'];
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLSpanElement>;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const SkeletonRectangular: React.ForwardRefExoticComponent<Omit<SkeletonRectangularProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/__inner__/cjs/components/Skeleton/SkeletonRectangular/SkeletonRectangular.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.SkeletonRectangular = exports.cnSkeleton = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../utils/classname");
+require("../Skeleton.css");
+exports.cnSkeleton = (0, classname_1.cn)('Skeleton');
+exports.SkeletonRectangular = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, className = _a.className, other = tslib_1.__rest(_a, ["children", "width", "height", "className"]);
+    return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeleton)({ hasChildren: !!children }, [className]), style: { width: width, height: height } }, other, { ref: ref }), children));
+});
+exports.SkeletonRectangular.displayName = 'SkeletonRectangular';

package/__inner__/cjs/components/Skeleton/SkeletonRectangular/index.d.ts

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

package/__inner__/cjs/components/Skeleton/SkeletonRectangular/index.js

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

package/__inner__/cjs/components/Skeleton/SkeletonTypography/SkeletonTypography.css

@@ -0,0 +1,19 @@
+.SkeletonTypography {
+  display: flex;
+  flex-direction: column;
+}
+
+  .SkeletonTypography-Row {
+    display: flex;
+    align-items: center;
+  }
+
+  .SkeletonTypography-Row::after {
+      font-size: 0;
+      content: '\00a0';
+    }
+
+  .SkeletonTypography-Row .Skeleton {
+      block-size: calc(1em * 0.85);
+      border-radius: calc(1em / 2 / 4);
+    }

package/__inner__/cjs/components/Skeleton/SkeletonTypography/SkeletonTypography.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import { type TypographyProps } from '../../Typography';
+import './SkeletonTypography.css';
+export declare const cnSkeletonTypography: import("@bem-react/classname").ClassNameFormatter;
+export type SkeletonTypographyProps = {
+    /** Содержимое компонента */
+    children?: never;
+    /** Вариант шрифта типографики */
+    typographyVariant?: TypographyProps['variant'];
+    /** Количество строк */
+    rows?: number;
+    /** Ширина строки */
+    width?: CSSProperties['width'];
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLSpanElement>;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const SkeletonTypography: React.ForwardRefExoticComponent<Omit<SkeletonTypographyProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/__inner__/cjs/components/Skeleton/SkeletonTypography/SkeletonTypography.js

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.SkeletonTypography = exports.cnSkeletonTypography = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../utils/classname");
+var Typography_1 = require("../../Typography");
+var SkeletonRectangular_1 = require("../SkeletonRectangular");
+require("./SkeletonTypography.css");
+exports.cnSkeletonTypography = (0, classname_1.cn)('SkeletonTypography');
+exports.SkeletonTypography = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, rows = _a.rows, other = tslib_1.__rest(_a, ["className", "typographyVariant", "width", "rows"]);
+    return (react_1["default"].createElement("span", { className: (0, exports.cnSkeletonTypography)('', [className]), style: { width: width }, ref: ref }, new Array(rows).fill(null).map(function (_, index) { return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSkeletonTypography)('Row', [
+            (0, Typography_1.cnTypography)({ variant: typographyVariant }),
+        ]) }, other, { key: index }),
+        react_1["default"].createElement(SkeletonRectangular_1.SkeletonRectangular, { style: {
+                width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%'
+            } }))); })));
+});
+exports.SkeletonTypography.displayName = 'SkeletonTypography';

package/__inner__/cjs/components/Skeleton/SkeletonTypography/index.d.ts

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

package/__inner__/cjs/components/Skeleton/SkeletonTypography/index.js

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

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

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

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

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

package/__inner__/cjs/components/Slider/Slider.css

@@ -0,0 +1,82 @@
+/* stylelint-disable */
+.Slider {
+  --slider-thumb-background-color: var(--color-background-action);
+  --slider-inner-rail-background-color: var(--color-background-action);
+  --slider-position: 0;
+  inline-size: 100%;
+}
+.Slider_size_m {
+      --slider-size: 12px;
+    }
+.Slider_size_l {
+      --slider-size: 20px;
+    }
+.Slider_disabled {
+    --slider-thumb-background-color: var(--color-content-disabled);
+    --slider-inner-rail-background-color: var(--color-border-disabled);
+  }
+.Slider_hasMarks .Slider-Container {
+      margin-block-end: var(--space-xl);
+    }
+.Slider-Container {
+    position: relative;
+    block-size: var(--slider-size);
+  }
+.Slider-Input {
+    inset-inline-start: calc(var(--slider-size) / 2 * -1);
+    block-size: var(--slider-size);
+    inline-size: calc(100% + var(--slider-size));
+    margin: 0;
+    opacity: 0;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    position: absolute;
+    outline: none;
+    cursor: pointer;
+  }
+.Slider-Input:hover + .Slider-Range .Slider-Thumb {
+      background-color: var(--color-content-action-hover);
+    }
+.Slider-Input:active + .Slider-Range .Slider-Thumb {
+      background-color: var(--color-content-action-pressed);
+    }
+.Slider-Input:focus-visible + .Slider-Range .Slider-Thumb {
+      border-color: var(--color-border-focused);
+    }
+.Slider-Input:disabled {
+      pointer-events: none;
+      cursor: default;
+    }
+.Slider-Range {
+    background-color: var(--color-border-secondary);
+    border-radius: var(--border-radius-2xs);
+    pointer-events: none;
+    position: absolute;
+    inline-size: 100%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: block;
+    block-size: 2px;
+  }
+.Slider-Rail {
+    background-color: var(--slider-inner-rail-background-color);
+    border-radius: var(--border-radius-2xs);
+    inline-size: var(--slider-position);
+    display: block;
+    block-size: 2px;
+  }
+.Slider-Thumb {
+    block-size: var(--slider-size);
+    inline-size: var(--slider-size);
+    border: var(--border-width-m) solid var(--color-background-main);
+    background-color: var(--slider-thumb-background-color);
+    inset-inline-start: var(--slider-position);
+    box-shadow: var(--shadow-s);
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    inset-block-start: 50%;
+  }

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

@@ -0,0 +1,4 @@
+import './Slider.css';
+import type { SliderBaseProps } from './types';
+export declare const cnSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const Slider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<SliderBaseProps, "div">;

package/__inner__/cjs/components/Slider/Slider.js

@@ -0,0 +1,62 @@
+"use strict";
+exports.__esModule = true;
+exports.Slider = exports.cnSlider = void 0;
+var tslib_1 = require("tslib");
+require("./Slider.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Tooltip_1 = require("../Tooltip");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var utils_1 = require("./utils");
+exports.cnSlider = (0, classname_1.cn)('Slider');
+exports.Slider = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Slider' }), _b = _a.size, size = _b === void 0 ? constants_1.SLIDER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.SLIDER_DEFAULT_DISABLED : _c, _d = _a.disableTooltip, disableTooltip = _d === void 0 ? constants_1.SLIDER_DEFAULT_DISABLE_TOOLTIP : _d, _e = _a.as, Tag = _e === void 0 ? constants_1.SLIDER_DEFAULT_TAG : _e, renderTooltipValueProp = _a.renderTooltipValue, defaultValue = _a.defaultValue, valueProp = _a.value, min = _a.min, max = _a.max, onChange = _a.onChange, step = _a.step, marksProp = _a.marks, inputProps = _a.inputProps, tooltipProps = _a.tooltipProps, className = _a.className, style = _a.style, other = tslib_1.__rest(_a, ["size", "disabled", "disableTooltip", "as", "renderTooltipValue", "defaultValue", "value", "min", "max", "onChange", "step", "marks", "inputProps", "tooltipProps", "className", "style"]);
+    var anchorRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue || 0,
+        name: 'Slider',
+        state: 'value'
+    }), 2), value = _f[0], setValue = _f[1];
+    var update = (0, react_1.useRef)();
+    var setUpdate = function (func) {
+        if (func) {
+            update.current = func;
+        }
+    };
+    var handleChange = function (event) {
+        var _a;
+        setValue(+event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: +event.target.value });
+        (_a = update.current) === null || _a === void 0 ? void 0 : _a.call(update);
+    };
+    var position = (0, utils_1.getPositionOnRail)({ value: value, min: min, max: max });
+    var marks = function () {
+        return marksProp === null || marksProp === void 0 ? void 0 : marksProp.map(function (_a) {
+            var markValue = _a.value, other = tslib_1.__rest(_a, ["value"]);
+            var markPos = (0, utils_1.getPositionOnRail)({ value: markValue, min: min, max: max });
+            var hideMark = markValue === max || markValue === min;
+            return (react_1["default"].createElement(components_1.SliderMark, tslib_1.__assign({ key: markValue, hideMark: hideMark, position: markPos }, other)));
+        });
+    };
+    var renderTooltipDefaultValue = function (value) {
+        return value || 0;
+    };
+    var renderTooltipValue = renderTooltipValueProp || renderTooltipDefaultValue;
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnSlider)({ size: size, disabled: disabled, hasMarks: !!marksProp }, [
+            className,
+        ]), style: tslib_1.__assign({ '--slider-position': "".concat(position, "%") }, style) }, other, { ref: ref }),
+        react_1["default"].createElement("div", { className: (0, exports.cnSlider)('Container') },
+            react_1["default"].createElement(Tooltip_1.Tooltip, tslib_1.__assign({ size: "xs", placement: "top" }, tooltipProps, { label: renderTooltipValue(value), disabled: disableTooltip, anchorRef: anchorRef, setUpdate: setUpdate, ignoreClickOutsideRefs: [inputRef] }),
+                react_1["default"].createElement("input", tslib_1.__assign({ min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, type: "range", ref: inputRef }, inputProps, { className: (0, exports.cnSlider)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
+            react_1["default"].createElement("span", { className: (0, exports.cnSlider)('Range') },
+                react_1["default"].createElement("span", { className: (0, exports.cnSlider)('Rail') }),
+                marks(),
+                react_1["default"].createElement("span", { className: (0, exports.cnSlider)('Thumb'), ref: anchorRef })))));
+});
+exports.Slider.displayName = 'Slider';

package/__inner__/cjs/components/Slider/components/SliderMark.css

@@ -0,0 +1,25 @@
+/* stylelint-disable */
+.SliderMark {
+  --slider-mark-position: 0;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+  inset-inline-start: var(--slider-mark-position);
+}
+.SliderMark-Mark {
+    position: absolute;
+    block-size: 2px;
+    inline-size: 4px;
+    inset-block-start: -2px;
+    background-color: var(--color-content-primary);
+  }
+.SliderMark-Label {
+    font: var(--typography-text-xs-font);
+    letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+    text-transform: var(--typography-text-xs-text_transform, none);
+    position: absolute;
+    inset-block-start: 14px;
+    pointer-events: all;
+    color: var(--color-content-secondary);
+  }

package/__inner__/cjs/components/Slider/components/SliderMark.d.ts

@@ -0,0 +1,5 @@
+import './SliderMark.css';
+import type { FC } from 'react';
+import type { SliderMarkProps } from './types';
+export declare const cnSliderMark: import("@bem-react/classname").ClassNameFormatter;
+export declare const SliderMark: FC<SliderMarkProps>;

package/__inner__/cjs/components/Slider/components/SliderMark.js

@@ -0,0 +1,16 @@
+"use strict";
+exports.__esModule = true;
+exports.SliderMark = exports.cnSliderMark = void 0;
+var tslib_1 = require("tslib");
+require("./SliderMark.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classname_1 = require("../../../utils/classname");
+exports.cnSliderMark = (0, classname_1.cn)('SliderMark');
+var SliderMark = function (_a) {
+    var label = _a.label, hideMark = _a.hideMark, style = _a.style, position = _a.position, other = tslib_1.__rest(_a, ["label", "hideMark", "style", "position"]);
+    return (react_1["default"].createElement("span", tslib_1.__assign({ className: (0, exports.cnSliderMark)(), style: tslib_1.__assign({ '--slider-mark-position': "".concat(position, "%") }, style) }, other),
+        !hideMark && react_1["default"].createElement("span", { className: (0, exports.cnSliderMark)('Mark') }),
+        (!!label || label === 0) && (react_1["default"].createElement("span", { className: (0, exports.cnSliderMark)('Label') }, label))));
+};
+exports.SliderMark = SliderMark;
+exports.SliderMark.displayName = 'SliderMark';

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

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

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

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

package/__inner__/cjs/components/Slider/components/types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export type SliderMarkProps = {
+    label?: string | number;
+    position?: number;
+    hideMark?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;

package/__inner__/cjs/components/Slider/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

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

@@ -0,0 +1,4 @@
+export declare const SLIDER_DEFAULT_SIZE = "l";
+export declare const SLIDER_DEFAULT_DISABLED = false;
+export declare const SLIDER_DEFAULT_DISABLE_TOOLTIP = false;
+export declare const SLIDER_DEFAULT_TAG = "div";

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

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+exports.SLIDER_DEFAULT_TAG = exports.SLIDER_DEFAULT_DISABLE_TOOLTIP = exports.SLIDER_DEFAULT_DISABLED = exports.SLIDER_DEFAULT_SIZE = void 0;
+exports.SLIDER_DEFAULT_SIZE = 'l';
+exports.SLIDER_DEFAULT_DISABLED = false;
+exports.SLIDER_DEFAULT_DISABLE_TOOLTIP = false;
+exports.SLIDER_DEFAULT_TAG = 'div';

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

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

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

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

package/__inner__/cjs/components/Slider/types.d.ts

@@ -0,0 +1,48 @@
+import type { ElementType, ComponentPropsWithRef, ChangeEvent } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { TooltipProps } from '../Tooltip';
+import { SLIDER_DEFAULT_TAG } from './constants';
+export declare const sliderSizeVariant: readonly ["m", "l"];
+export type SliderSizeVariant = (typeof sliderSizeVariant)[number];
+export type SliderValue = number;
+export type SliderMark = {
+    value: SliderValue;
+    label?: string | number;
+};
+export type SliderMarks = SliderMark[];
+export type SliderRenderTooltipValue = (value: number | undefined) => TooltipProps['children'];
+export type SliderBaseProps = {
+    /** Свойство регулирующее минимально значение слайдера */
+    min: number;
+    /** Свойство регулирующее максимальное значение слайдера */
+    max: number;
+    /** Шаг бегунка слайдера */
+    step: number;
+    /** Свойство регулирующее размер слайдера */
+    size?: SliderSizeVariant;
+    /** Текущее значение слайдера */
+    value?: SliderValue;
+    /** Значение слайдера по умолчанию */
+    defaultValue?: SliderValue;
+    /** Функция обратного вызова, которая вызывается при изменении значения компонента */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: number;
+    }) => void;
+    /** Если {true} блокирует взаимодействие с компонентом */
+    disabled?: boolean;
+    /** Свойства-аттрибуты элемента input */
+    inputProps?: ComponentPropsWithRef<'input'>;
+    /** Если {true} отключает появление тултипа при взаимодействии со слайдером */
+    disableTooltip?: boolean;
+    /** Рендер-функция для значения тултипа */
+    renderTooltipValue?: SliderRenderTooltipValue;
+    /** Свойства компонента Tooltip */
+    tooltipProps?: Partial<TooltipProps>;
+    /** Массив объектов описывающих засечки на шкале слайдера */
+    marks?: SliderMarks;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type SliderProps<As extends ElementType = typeof SLIDER_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<SliderBaseProps, As>;

package/__inner__/cjs/components/Slider/types.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.sliderSizeVariant = void 0;
+exports.sliderSizeVariant = ['m', 'l'];

package/__inner__/cjs/components/Slider/utils/getPositionOnRail.d.ts

@@ -0,0 +1,5 @@
+export declare const getPositionOnRail: ({ value, min, max, }: {
+    value?: number | undefined;
+    min: number;
+    max: number;
+}) => number;

package/__inner__/cjs/components/Slider/utils/getPositionOnRail.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+exports.getPositionOnRail = void 0;
+var getPositionOnRail = function (_a) {
+    var value = _a.value, min = _a.min, max = _a.max;
+    if (!value) {
+        return 0;
+    }
+    return (value - min) / ((max - min) / 100);
+};
+exports.getPositionOnRail = getPositionOnRail;