@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Popover/Popover.js

@@ -0,0 +1,147 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import React, { useCallback, useMemo, useEffect, useRef, useState, forwardRef, } from 'react';
+import { usePopper } from 'react-popper';
+import { CSSTransition } from 'react-transition-group';
+import './Popover.css';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKey } from '../../utils/isKey';
+import { Portal } from '../Portal';
+import { PopoverArrow } from './components';
+import { POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, } from './constants';
+import { usePopoverManager } from './index';
+import { PopoverContext } from './PopoverContext';
+export var cnPopover = cn('Popover');
+export var Popover = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Popover' });
+    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.placement, placement = _f === void 0 ? POPOVER_DEFAULT_PLACEMENT : _f, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate"]);
+    var isClickOutSide = useRef(null);
+    var _g = __read(useState(false), 2), openState = _g[0], setOpenState = _g[1];
+    var focusedElement = useRef(null);
+    var popoverRef = useRef(null);
+    var _h = usePopoverManager(popoverRef, 1000, openState), refsClickOutside = _h.refsClickOutside, isTop = _h.isTop;
+    // Ловушка фокуса
+    var trapRef = useFocusTrap({
+        active: !disableEnforceFocus && isTop,
+        focusinTrap: false
+    });
+    // Нажатие клавиши {ESC}
+    useEventListener({
+        eventName: 'keydown',
+        handler: function (event) {
+            if (!isKey(event, 'Escape')) {
+                return;
+            }
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
+        active: isTop
+    });
+    useClickOutside({
+        refs: __spreadArray(__spreadArray(__spreadArray([
+            popoverRef
+        ], __read(refsClickOutside), false), __read((anchorRef ? [anchorRef] : [])), false), __read((ignoreClickOutsideRefs || [])), false),
+        handler: function () {
+            isClickOutSide.current = true;
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
+        active: openState
+    });
+    var onExited = useCallback(function () {
+        var _a, _b;
+        // Возвращаем фокус активного элемента
+        if (!disableReturnFocus &&
+            !isClickOutSide.current &&
+            (((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
+                document.activeElement === document.body)) {
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+    }, [onExitedProp]);
+    var modifiers = useMemo(function () { return [
+        // Вычисление стилей позиционирования
+        {
+            name: 'computeStyles',
+            options: {
+                // Позиционирование через position: absolute
+                // https://popper.js.org/docs/v2/modifiers/compute-styles/#gpuacceleration
+                gpuAcceleration: false
+            }
+        },
+        // Ширина всплывающего элемента
+        {
+            name: 'sameWidth',
+            enabled: !!equalAnchorWidth,
+            fn: function (_a) {
+                var state = _a.state;
+                // eslint-disable-next-line no-param-reassign
+                state.styles.popper.width = "".concat(state.rects.reference.width, "px");
+            },
+            effect: function (_a) {
+                var _b;
+                var state = _a.state;
+                // eslint-disable-next-line no-param-reassign
+                state.elements.popper.style.width = "".concat((_b = state.elements.reference) === null || _b === void 0 ? void 0 : _b.offsetWidth, "px");
+            },
+            phase: 'beforeWrite',
+            requires: ['computeStyles']
+        },
+        // Отступы от якорного элемента
+        {
+            name: 'offset',
+            options: {
+                offset: offset
+            }
+        },
+    ]; }, [offset, equalAnchorWidth]);
+    // Якорный элемент или координаты
+    var resolveReferenceElement = useMemo(function () {
+        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+            return anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+        if (position)
+            return {
+                getBoundingClientRect: function () {
+                    return {
+                        top: (position === null || position === void 0 ? void 0 : position.y) || 0,
+                        left: (position === null || position === void 0 ? void 0 : position.x) || 0,
+                        bottom: (position === null || position === void 0 ? void 0 : position.y) || 0,
+                        right: (position === null || position === void 0 ? void 0 : position.x) || 0,
+                        width: 0,
+                        height: 0
+                    };
+                }
+            };
+        return undefined;
+    }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, position]);
+    var _j = __read(useState(null), 2), popperElement = _j[0], setPopperElement = _j[1];
+    var _k = usePopper(resolveReferenceElement, popperElement, {
+        placement: placement,
+        strategy: 'fixed',
+        modifiers: modifiers
+    }), styles = _k.styles, attributes = _k.attributes, update = _k.update;
+    // Передача метода по перерасчету расположения компонента Popover в родительский компонент
+    useEffect(function () {
+        setUpdate === null || setUpdate === void 0 ? void 0 : setUpdate(update);
+    }, [update]);
+    useEffect(function () {
+        var _a;
+        // Сохраняем фокус активного элемента до момента открытия всплывающего окна
+        if (open && !disableReturnFocus) {
+            isClickOutSide.current = null;
+            focusedElement.current =
+                document.activeElement;
+            (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        setOpenState(open);
+    }, [open]);
+    var portalRef = useMultiRef([ref, popoverRef, trapRef, setPopperElement]);
+    return (React.createElement(PopoverContext.Provider, { value: { isTop: isTop } },
+        React.createElement(CSSTransition, __assign({ classNames: cnPopover({ animation: true }), timeout: 120 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
+            React.createElement(Portal, __assign({}, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+                children,
+                arrow && (React.createElement(PopoverArrow, __assign({ size: "s", variant: "light" }, arrowProps, { style: __assign(__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
+});
+Popover.displayName = 'Popover';

package/__inner__/esm/components/Popover/PopoverContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type PopoverContextValue = {
+    isTop: boolean;
+};
+export declare const PopoverContext: React.Context<PopoverContextValue>;
+export declare const usePopover: () => PopoverContextValue;

package/__inner__/esm/components/Popover/PopoverContext.js

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+export var PopoverContext = React.createContext({
+    isTop: false
+});
+export var usePopover = function () { return useContext(PopoverContext); };
+// Именованный провайдер
+if (process.env.NODE_ENV !== 'production') {
+    PopoverContext.displayName = 'PopoverContext';
+}

package/__inner__/esm/components/Popover/PopoverManager.d.ts

@@ -0,0 +1,2 @@
+import { useModalManager } from '../Modal';
+export declare const usePopoverManager: typeof useModalManager;

package/__inner__/esm/components/Popover/PopoverManager.js

@@ -0,0 +1,2 @@
+import { useModalManager } from '../Modal';
+export var usePopoverManager = useModalManager;

package/__inner__/esm/components/Popover/components/PopoverArrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PopoverArrowProps } from './types';
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Popover/components/PopoverArrow.js

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cnPopover } from '../Popover';
+export var PopoverArrow = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, style = _a.style, _c = _a.variant, variant = _c === void 0 ? 'light' : _c, other = __rest(_a, ["size", "className", "style", "variant"]);
+    return (React.createElement("div", __assign({ className: cnPopover('Arrow', { variant: variant, size: size }, [className]), style: style }, other, { ref: ref }), size === 'xs' ? (React.createElement("svg", { width: "6", height: "12", viewBox: "0 0 6 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M6 12L6 0C6 0 6 1.5 4 3L1.06594 5.20054C0.532609 5.60054 0.532609 6.39946 1.06594 6.79946L4 9C6 10.5 6 12 6 12Z", fill: "currentColor" }))) : (React.createElement("svg", { width: "8", height: "16", viewBox: "0 0 8 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M8 16L8 0C8 0 8 2 5.33333 4L2.13256 6.40058C1.06589 7.20058 1.06589 8.79942 2.13256 9.59942L5.33333 12C8 14 8 16 8 16Z", fill: "currentColor" })))));
+});
+PopoverArrow.displayName = 'PopoverArrow';

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

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

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

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

package/__inner__/esm/components/Popover/components/types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, Ref } from 'react';
+export declare const popoverArrowSizeVariant: readonly ["xs", "s"];
+export type PopoverArrowSizeVariant = (typeof popoverArrowSizeVariant)[number];
+export declare const popoverArrowVariant: readonly ["light", "dark"];
+export type PopoverArrowVariant = (typeof popoverArrowVariant)[number];
+export type PopoverArrowProps = {
+    size?: PopoverArrowSizeVariant;
+    variant?: PopoverArrowVariant;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement> & {
+    'data-testid'?: string;
+};

package/__inner__/esm/components/Popover/components/types.js

@@ -0,0 +1,2 @@
+export var popoverArrowSizeVariant = ['xs', 's'];
+export var popoverArrowVariant = ['light', 'dark'];

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

@@ -0,0 +1,6 @@
+export declare const POPOVER_DEFAULT_ARROW = false;
+export declare const POPOVER_DEFAULT_OPEN = false;
+export declare const POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;
+export declare const POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
+export declare const POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
+export declare const POPOVER_DEFAULT_PLACEMENT = "auto";

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

@@ -0,0 +1,6 @@
+export var POPOVER_DEFAULT_ARROW = false;
+export var POPOVER_DEFAULT_OPEN = false;
+export var POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;
+export var POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
+export var POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
+export var POPOVER_DEFAULT_PLACEMENT = 'auto';

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

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './PopoverContext';
+export * from './PopoverManager';
+export * from './types';

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

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './PopoverContext';
+export * from './PopoverManager';
+export * from './types';

package/__inner__/esm/components/Popover/types.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { RefObject, ComponentPropsWithRef } from 'react';
+import PopperJS from '@popperjs/core';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { PortalProps } from '../Portal';
+import type { PopoverArrowProps } from './components';
+export type VirtualElement = {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+};
+export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
+export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
+export type PopoverProps = {
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Ссылка на элемент, относительно которого будет позиционироваться поповер */
+    anchorRef?: RefObject<HTMLElement>;
+    /** Список ссылок на элементы при клике на которые Popover не будет закрываться (см. хук useClickOutside) */
+    ignoreClickOutsideRefs?: Array<RefObject<HTMLElement>>;
+    /** Позиция, относительно которой будет позиционироваться поповер */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Контент поповера */
+    children?: React.ReactNode;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
+    onClose?: () => void;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: () => void;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: () => void;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: () => void;
+    /** Функция обратного вызова которая будет вызвана после
+     * завершения перехода в состояние не представлен */
+    onExited?: () => void;
+    /** Местоположение для разворачивания поповера */
+    placement?: PopoverPlacementVariant;
+    /** Установить ширину поповера равную элементу указанного в anchorRef */
+    equalAnchorWidth?: boolean;
+    /** Отступы от якоря или заданной позиции - [skidding, distance].
+     *
+     * skidding - смещение вдоль якорного элемента,
+     * distance - смещение поперек якорного элемента. */
+    offset?: number[];
+    /** Свойства по управлению анимацией перехода */
+    transitionProps?: Partial<CSSTransitionProps>;
+    /** Показать стрелку-указатель */
+    arrow?: boolean;
+    /** Свойства стрелки-указателя */
+    arrowProps?: PopoverArrowProps;
+    /** Отключает взаимодействие с элементом */
+    disableInteractive?: boolean;
+    /** Отключает блокировку фокуса в пределах элемента */
+    disableEnforceFocus?: boolean;
+    /** Отключает захват и возврат текущего фокуса на момент открытия и закрытия окна соответственно */
+    disableReturnFocus?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Функция обратного вызова для получения метода по перерасчету расположения компонента Popover */
+    setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
+    /** Контейнер для монтирования всплывающего окна */
+    container?: PortalProps['container'];
+} & ComponentPropsWithRef<'div'>;

package/__inner__/esm/components/Popover/types.js

@@ -0,0 +1,17 @@
+export var popoverPlacementVariant = [
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'right-start',
+    'right-end',
+    'left-start',
+    'left-end',
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'bottom',
+    'right',
+    'left',
+];

package/__inner__/esm/components/Portal/Portal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+declare const portalEl = "div";
+export type PortalRef = ComponentRef<typeof portalEl>;
+export type PortalProps = {
+    /** Контейнер для монтирования портала */
+    container?: Element | DocumentFragment | null;
+} & ComponentPropsWithRef<typeof portalEl>;
+export declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/esm/components/Portal/Portal.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { ThemeProvider, useTheme } from '../ThemeProvider';
+var portalEl = 'div';
+export var Portal = forwardRef(function (inProps, ref) {
+    var _a = useThemeProps({
+        props: inProps,
+        name: 'Portal'
+    }), children = _a.children, container = _a.container, className = _a.className, other = __rest(_a, ["children", "container", "className"]);
+    var theme = useTheme();
+    var portalContainer = container || window.document.body;
+    return createPortal(React.createElement(ThemeProvider, __assign({ theme: theme, className: className }, other, { ref: ref }), children), portalContainer);
+});
+Portal.displayName = 'Portal';

package/__inner__/esm/components/Portal/PortalContext.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+export declare const PortalContext: import("react").Context<{
+    top?: boolean | undefined;
+    setTop?: ((top: boolean | undefined) => void) | undefined;
+    refs?: RefObject<HTMLElement>[] | undefined;
+    setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
+    clearRefs?: (() => void) | undefined;
+}>;
+export declare function usePortalContext(): {
+    top?: boolean | undefined;
+    setTop?: ((top: boolean | undefined) => void) | undefined;
+    refs?: RefObject<HTMLElement>[] | undefined;
+    setRefs?: ((refs: RefObject<HTMLElement>[]) => void) | undefined;
+    clearRefs?: (() => void) | undefined;
+};

package/__inner__/esm/components/Portal/PortalContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var PortalContext = createContext({});
+export function usePortalContext() {
+    return useContext(PortalContext);
+}

package/__inner__/esm/components/Portal/PortalManager.d.ts

@@ -0,0 +1,19 @@
+import { type RefObject } from 'react';
+export type PortalManagerItem = {
+    key: number;
+    ref: RefObject<HTMLElement>;
+};
+export type PortalManagerItems = Array<PortalManagerItem>;
+export type PortalManager = {
+    get: () => PortalManagerItems;
+    add: (portalItem: PortalManagerItem) => void;
+    remove: (portalRef: PortalManagerItem['ref']) => void;
+    subscribe: (func: (portalItems: PortalManagerItems) => void) => void;
+    unsubscribe: (func: (portalItems: PortalManagerItems) => void) => void;
+};
+export declare const createPortalManager: () => PortalManager;
+export declare const portalManager: PortalManager;
+export type UsePortalManager = {
+    portals: PortalManagerItems;
+} & Pick<PortalManager, 'add' | 'remove'>;
+export declare function usePortalManager(): UsePortalManager;

package/__inner__/esm/components/Portal/PortalManager.js

@@ -0,0 +1,46 @@
+import { __read, __spreadArray } from "tslib";
+import { useEffect, useState } from 'react';
+export var createPortalManager = function () {
+    var portalItems = [];
+    var events = [];
+    var update = function () {
+        events.forEach(function (event) { return event(portalItems); });
+    };
+    return {
+        get: function () { return portalItems; },
+        add: function (portalItem) {
+            portalItems = __spreadArray(__spreadArray([], __read(portalItems), false), [portalItem], false).sort(function (a, b) { return a.key - b.key; });
+            update();
+        },
+        remove: function (ref) {
+            portalItems = portalItems.filter(function (portalItem) { return portalItem.ref !== ref; });
+            update();
+        },
+        subscribe: function (event) {
+            events.push(event);
+        },
+        unsubscribe: function (event) {
+            events = events.filter(function (e) { return e !== event; });
+        }
+    };
+};
+export var portalManager = createPortalManager();
+export function usePortalManager() {
+    var _a = __read(useState([]), 2), portals = _a[0], setPortals = _a[1];
+    useEffect(function () {
+        var updateCb = function (portals) {
+            setPortals(function () { return portals; });
+        };
+        portalManager.subscribe(updateCb);
+        return function () {
+            portalManager.unsubscribe(updateCb);
+        };
+    }, []);
+    var add = function (portalItem) {
+        portalManager.add(portalItem);
+    };
+    var remove = function (ref) {
+        portalManager.remove(ref);
+    };
+    return { portals: portals, add: add, remove: remove };
+}

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

@@ -0,0 +1,2 @@
+export * from './Portal';
+export * from './PortalManager';

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

@@ -0,0 +1,2 @@
+export * from './Portal';
+export * from './PortalManager';

package/__inner__/esm/components/Radio/Radio.css

@@ -0,0 +1,111 @@
+.Radio {
+  inline-size: var(--radio-size, 20px);
+  block-size: var(--radio-size, 20px);
+  position: relative;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+  .Radio_size_l,
+  .Radio_size_m {
+    --radio-size: 20px;
+    --radio-icon-size: 10px;
+  }
+
+  .Radio_size_s,
+  .Radio_size_xs,
+  .Radio_size_2xs {
+    --radio-size: 16px;
+    --radio-icon-size: 8px;
+  }
+
+.Radio-Box {
+  inline-size: 100%;
+  block-size: 100%;
+  position: relative;
+  display: block;
+  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);
+}
+
+.Radio-Box::after {
+    position: absolute;
+    content: ' ';
+    inline-size: var(--radio-icon-size, 10px);
+    block-size: var(--radio-icon-size, 10px);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    opacity: 0;
+    background-color: var(--color-content-action-on);
+    transition: opacity var(--transition-default);
+  }
+
+.Radio-Input {
+  position: absolute;
+  margin: 0;
+  opacity: 0;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  cursor: pointer;
+  z-index: var(--z-index-absolute);
+}
+
+.Radio-Input:hover:not(:checked, :disabled) + .Radio-Box {
+    background-color: var(--color-background-primary-hover);
+    border-color: var(--color-border-main-hover);
+  }
+
+.Radio-Input:hover:checked:not(:active, :disabled) + .Radio-Box {
+    background-color: var(--color-background-action-hover);
+    border-color: var(--color-background-action-hover);
+  }
+
+.Radio-Input:active:not(:checked, :disabled) + .Radio-Box {
+    background-color: var(--color-background-primary-pressed);
+    border-color: var(--color-border-main-hover);
+  }
+
+.Radio-Input:active:checked + .Radio-Box {
+    background-color: var(--color-background-action-pressed);
+    border-color: var(--color-background-action-pressed);
+  }
+
+.Radio-Input:focus + .Radio-Box {
+    box-shadow: var(--shadow-outline-focused);
+  }
+
+.Radio-Input:focus:not(:focus-visible) + .Radio-Box {
+    box-shadow: none;
+  }
+
+.Radio-Input:checked:not(:hover, :active) + .Radio-Box {
+    background-color: var(--color-background-action);
+    border-color: var(--color-background-action);
+  }
+
+.Radio-Input:checked + .Radio-Box::after {
+    opacity: 1;
+  }
+
+.Radio_disabled {
+  pointer-events: none;
+}
+
+.Radio_disabled .Radio-Box {
+    background-color: var(--color-background-disabled);
+    border-color: var(--color-border-disabled);
+  }
+
+.Radio_disabled .Radio-Input:checked + .Radio-Box {
+    background-color: var(--color-background-action-active-disabled);
+    border-color: var(--color-background-action-active-disabled);
+  }

package/__inner__/esm/components/Radio/Radio.d.ts

@@ -0,0 +1,31 @@
+import './Radio.css';
+import React from 'react';
+import type { InputHTMLAttributes, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type FormControlLabelProps } from '../FormControlLabel';
+export type RadioSizeVariant = FormElementSizeVariant;
+export type RadioProps = {
+    /** Размер */
+    size?: RadioSizeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Расположение лейбла */
+    align?: FormControlLabelProps['align'];
+    /** Лейбл */
+    label?: React.ReactNode;
+    /** Позиция лейбла */
+    labelPlacement?: FormControlLabelProps['labelPlacement'];
+    /** Свойства лейбла */
+    labelProps?: FormControlLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLLabelElement>;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    children?: never;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const cnRadio: import("@bem-react/classname").ClassNameFormatter;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;