@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Select/components/SelectInput/SelectInput.d.ts

@@ -0,0 +1,75 @@
+import '../../Select.css';
+import React from 'react';
+import type { HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import { type FieldIconProps } from '../../../FieldIcon';
+import { type FieldLabelProps } from '../../../FieldLabel';
+export type SelectInputSizeVariant = FormElementSizeVariant;
+type DivElement = HTMLAttributes<HTMLDivElement>;
+type InputElement = InputHTMLAttributes<HTMLInputElement>;
+export type SelectInputProps = {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: SelectInputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Признак визуального состояния компонента с фокусом */
+    focused?: boolean;
+    /** Если {true} предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Значение для отображения */
+    renderedValue?: React.ReactNode;
+    /** Выбранное значение */
+    value?: InputElement['value'];
+    /** Значение умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputElement['defaultValue'];
+    /** Ссылка на Field */
+    fieldRef?: Ref<HTMLDivElement>;
+    /** Свойства Field */
+    fieldProps?: DivElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на элемент input */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на FieldLabel */
+    labelRef?: FieldLabelProps['ref'];
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на Body */
+    bodyRef?: Ref<HTMLDivElement>;
+    /** Свойства Body */
+    bodyProps?: DivElement;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLDivElement>;
+    open?: boolean;
+    'data-testid'?: string;
+    children?: never;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+export declare const SelectInput: React.ForwardRefExoticComponent<Omit<SelectInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js

@@ -0,0 +1,38 @@
+import { __assign, __rest } from "tslib";
+import '../../Select.css';
+import React, { forwardRef, useRef } from 'react';
+import { classnames } from '@bem-react/classnames';
+import { ChevronDownIcon } from '@ozen-ui/icons';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { FieldHint } from '../../../FieldHint';
+import { FieldIcon } from '../../../FieldIcon';
+import { FieldLabel } from '../../../FieldLabel';
+import { cnSelect } from '../../index';
+export var SelectInput = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = __rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
+    var bodyRef = useRef(null);
+    var filled = focused || !!valueProp;
+    var hasLabel = !!label;
+    var placeholder = (focused || !hasLabel) && !valueProp && placeholderProp;
+    return (React.createElement("div", __assign({}, other, { className: cnSelect({
+            fullWidth: fullWidth,
+            size: size,
+            error: error,
+            disabled: disabled,
+            required: required,
+            hasLabel: hasLabel,
+            multiline: multiline,
+            focused: focused
+        }, [className]), ref: ref }),
+        React.createElement("div", __assign({ tabIndex: disabled ? -1 : 0, role: "button", onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: useMultiRef([bodyRef, bodyRefProp]) }),
+            React.createElement(FieldIcon, { className: cnSelect('RenderLeft'), icon: renderLeft, size: size }),
+            React.createElement("div", { className: cnSelect('FieldContainer') },
+                label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+                React.createElement("div", __assign({}, fieldProps, { className: cnSelect('Field', { filled: filled, asPlaceholder: !!placeholder }, [fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className]), ref: fieldRef }), placeholder || renderedValue),
+                React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
+            React.createElement(FieldIcon, { className: cnSelect('RenderRight'), icon: renderRight, size: size }),
+            React.createElement(FieldIcon, { className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })), icon: ChevronDownIcon, size: size }),
+            React.createElement("fieldset", { className: cnSelect('Fieldset') })),
+        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+});
+SelectInput.displayName = 'SelectInput';

package/__inner__/esm/components/Select/components/SelectInput/index.d.ts

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

package/__inner__/esm/components/Select/components/SelectInput/index.js

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

package/__inner__/esm/components/Select/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+export * from './SelectCheckIcon';

package/__inner__/esm/components/Select/components/index.js

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+export * from './SelectCheckIcon';

package/__inner__/esm/components/Select/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SELECT_DEFAULT_AUTO_FOCUS = false;
+export declare const SELECT_DEFAULT_FULL_WIDTH = false;
+export declare const SELECT_DEFAULT_DISABLED = false;
+export declare const SELECT_DEFAULT_REQUIRED = false;
+export declare const SELECT_DEFAULT_MULTILINE = false;
+export declare const SELECT_DEFAULT_DEFAULT_OPEN = false;
+export declare const SELECT_DEFAULT_AUTO_SIZE = "m";

package/__inner__/esm/components/Select/constants.js

@@ -0,0 +1,7 @@
+export var SELECT_DEFAULT_AUTO_FOCUS = false;
+export var SELECT_DEFAULT_FULL_WIDTH = false;
+export var SELECT_DEFAULT_DISABLED = false;
+export var SELECT_DEFAULT_REQUIRED = false;
+export var SELECT_DEFAULT_MULTILINE = false;
+export var SELECT_DEFAULT_DEFAULT_OPEN = false;
+export var SELECT_DEFAULT_AUTO_SIZE = 'm';

package/__inner__/esm/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { MenuItem as Option, MenuItemText as OptionItemText, MenuItemIcon as OptionItemIcon, } from '../Menu';
+export * from './Select';
+export * from './types';

package/__inner__/esm/components/Select/index.js

@@ -0,0 +1,3 @@
+export { MenuItem as Option, MenuItemText as OptionItemText, MenuItemIcon as OptionItemIcon, } from '../Menu';
+export * from './Select';
+export * from './types';

package/__inner__/esm/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__/esm/components/Select/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/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__/esm/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__/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import './Skeleton.css';
+import { SkeletonCircular, } from './SkeletonCircular';
+import { SkeletonRectangular, } from './SkeletonRectangular';
+import { SkeletonTypography, } from './SkeletonTypography';
+export var Skeleton = forwardRef(function (props, ref) {
+    var variant = props.variant, children = props.children, other = __rest(props, ["variant", "children"]);
+    if (variant === 'circular') {
+        return (React.createElement(SkeletonCircular, __assign({}, other, { ref: ref }), children));
+    }
+    if (variant === 'typography') {
+        return React.createElement(SkeletonTypography, __assign({}, other, { ref: ref }));
+    }
+    return (React.createElement(SkeletonRectangular, __assign({}, other, { ref: ref }), children));
+});
+Skeleton.displayName = 'Skeleton';

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

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

package/__inner__/esm/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__/esm/components/Skeleton/SkeletonCircular/SkeletonCircular.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../utils/classname';
+import { SkeletonRectangular } from '../SkeletonRectangular';
+import './SkeletonCircular.css';
+export var cnSkeletonCircular = cn('SkeletonCircular');
+export var SkeletonCircular = forwardRef(function (_a, ref) {
+    var size = _a.size, className = _a.className, other = __rest(_a, ["size", "className"]);
+    return (React.createElement(SkeletonRectangular, __assign({ className: cnSkeletonCircular('', [className]), width: size, height: size }, other, { ref: ref })));
+});
+SkeletonCircular.displayName = 'SkeletonCircular';

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

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

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

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

package/__inner__/esm/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__/esm/components/Skeleton/SkeletonRectangular/SkeletonRectangular.js

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../utils/classname';
+import '../Skeleton.css';
+export var cnSkeleton = cn('Skeleton');
+export var SkeletonRectangular = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, className = _a.className, other = __rest(_a, ["children", "width", "height", "className"]);
+    return (React.createElement("span", __assign({ className: cnSkeleton({ hasChildren: !!children }, [className]), style: { width: width, height: height } }, other, { ref: ref }), children));
+});
+SkeletonRectangular.displayName = 'SkeletonRectangular';

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

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

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

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

package/__inner__/esm/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__/esm/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__/esm/components/Skeleton/SkeletonTypography/SkeletonTypography.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../utils/classname';
+import { cnTypography } from '../../Typography';
+import { SkeletonRectangular } from '../SkeletonRectangular';
+import './SkeletonTypography.css';
+export var cnSkeletonTypography = cn('SkeletonTypography');
+export var SkeletonTypography = forwardRef(function (_a, ref) {
+    var className = _a.className, typographyVariant = _a.typographyVariant, width = _a.width, rows = _a.rows, other = __rest(_a, ["className", "typographyVariant", "width", "rows"]);
+    return (React.createElement("span", { className: cnSkeletonTypography('', [className]), style: { width: width }, ref: ref }, new Array(rows).fill(null).map(function (_, index) { return (React.createElement("span", __assign({ className: cnSkeletonTypography('Row', [
+            cnTypography({ variant: typographyVariant }),
+        ]) }, other, { key: index }),
+        React.createElement(SkeletonRectangular, { style: {
+                width: rows && rows > 1 && index === rows - 1 ? '50%' : '100%'
+            } }))); })));
+});
+SkeletonTypography.displayName = 'SkeletonTypography';

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

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

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

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

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

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

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

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

package/__inner__/esm/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__/esm/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__/esm/components/Slider/Slider.js

@@ -0,0 +1,59 @@
+import { __assign, __read, __rest } from "tslib";
+import './Slider.css';
+import React, { useRef } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { Tooltip } from '../Tooltip';
+import { SliderMark } from './components';
+import { SLIDER_DEFAULT_SIZE, SLIDER_DEFAULT_DISABLED, SLIDER_DEFAULT_DISABLE_TOOLTIP, SLIDER_DEFAULT_TAG, } from './constants';
+import { getPositionOnRail } from './utils';
+export var cnSlider = cn('Slider');
+export var Slider = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a = useThemeProps({ props: inProps, name: 'Slider' }), _b = _a.size, size = _b === void 0 ? SLIDER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? SLIDER_DEFAULT_DISABLED : _c, _d = _a.disableTooltip, disableTooltip = _d === void 0 ? SLIDER_DEFAULT_DISABLE_TOOLTIP : _d, _e = _a.as, Tag = _e === void 0 ? 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 = __rest(_a, ["size", "disabled", "disableTooltip", "as", "renderTooltipValue", "defaultValue", "value", "min", "max", "onChange", "step", "marks", "inputProps", "tooltipProps", "className", "style"]);
+    var anchorRef = useRef(null);
+    var inputRef = useRef(null);
+    var _f = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue || 0,
+        name: 'Slider',
+        state: 'value'
+    }), 2), value = _f[0], setValue = _f[1];
+    var update = 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 = 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 = __rest(_a, ["value"]);
+            var markPos = getPositionOnRail({ value: markValue, min: min, max: max });
+            var hideMark = markValue === max || markValue === min;
+            return (React.createElement(SliderMark, __assign({ key: markValue, hideMark: hideMark, position: markPos }, other)));
+        });
+    };
+    var renderTooltipDefaultValue = function (value) {
+        return value || 0;
+    };
+    var renderTooltipValue = renderTooltipValueProp || renderTooltipDefaultValue;
+    return (React.createElement(Tag, __assign({ className: cnSlider({ size: size, disabled: disabled, hasMarks: !!marksProp }, [
+            className,
+        ]), style: __assign({ '--slider-position': "".concat(position, "%") }, style) }, other, { ref: ref }),
+        React.createElement("div", { className: cnSlider('Container') },
+            React.createElement(Tooltip, __assign({ size: "xs", placement: "top" }, tooltipProps, { label: renderTooltipValue(value), disabled: disableTooltip, anchorRef: anchorRef, setUpdate: setUpdate, ignoreClickOutsideRefs: [inputRef] }),
+                React.createElement("input", __assign({ min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, type: "range", ref: inputRef }, inputProps, { className: cnSlider('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
+            React.createElement("span", { className: cnSlider('Range') },
+                React.createElement("span", { className: cnSlider('Rail') }),
+                marks(),
+                React.createElement("span", { className: cnSlider('Thumb'), ref: anchorRef })))));
+});
+Slider.displayName = 'Slider';

package/__inner__/esm/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__/esm/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>;