@ozen-ui/kit 0.67.0 → 0.68.0

package/__inner__/esm/components/FormControlCarcass/entities/renderAfter.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+import type { RenderContentTypeEmptyProps } from '../../../utils/renderContent';
+export type FormControlCarcassRenderAfter = RenderContentTypeEmptyProps['content'];
+export type FormControlCarcassRenderAfterRef = ComponentRef<'span'>;
+export type FormControlCarcassRenderAfterProps = ComponentPropsWithRef<'span'>;

package/__inner__/esm/components/FormControlCarcass/entities/renderAfter.js

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

package/__inner__/esm/components/FormControlCarcass/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const formControlCarcassSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type FormControlCarcassSizeVariant = (typeof formControlCarcassSizeVariant)[number];

package/__inner__/esm/components/FormControlCarcass/entities/size.js

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types/FormElementSizeVariant';
+export var formControlCarcassSizeVariant = formElementSizeVariant;

package/__inner__/esm/components/FormControlCarcass/entities/variant.d.ts

@@ -0,0 +1,2 @@
+export declare const formControlCarcassVariant: readonly ["default", "error"];
+export type FormControlCarcassVariant = (typeof formControlCarcassVariant)[number];

package/__inner__/esm/components/FormControlCarcass/entities/variant.js

@@ -0,0 +1 @@
+export var formControlCarcassVariant = ['default', 'error'];

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

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './entities';
+export * from './modules';
+export * from './FormControlCarcass';
+export * from './FormControlCarcassContext';
+export * from './types';

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

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './entities';
+export * from './modules';
+export * from './FormControlCarcass';
+export * from './FormControlCarcassContext';
+export * from './types';

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/FormControlCarcassIcon.css

@@ -0,0 +1,4 @@
+.FormControlCarcassIcon {
+  --form-control-carcass-icon-color: var(--color-content-tertiary);
+  color: var(--form-control-carcass-icon-color);
+}

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/FormControlCarcassIcon.d.ts

@@ -0,0 +1,3 @@
+import type { FormControlCarcassIconProps } from './types';
+export declare const cnFormControlCarcassIcon: import("@bem-react/classname").ClassNameFormatter;
+export declare const FormControlCarcassIcon: import("react").ForwardRefExoticComponent<Omit<FormControlCarcassIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/FormControlCarcassIcon.js

@@ -0,0 +1,18 @@
+import { __assign, __rest } from "tslib";
+import { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { renderContent } from '../../../../utils/renderContent';
+import { useFormControlCarcassContext } from '../../FormControlCarcassContext';
+import { FORM_CONTROL_CARCASS_SIZE_TO_ICON_SIZE } from './constants';
+export var cnFormControlCarcassIcon = cn('FormControlCarcassIcon');
+export var FormControlCarcassIcon = forwardRef(function (_a, ref) {
+    var icon = _a.icon, className = _a.className, other = __rest(_a, ["icon", "className"]);
+    var _b = useFormControlCarcassContext(), size = _b.size, disabled = _b.disabled;
+    return renderContent({
+        content: icon,
+        props: __assign(__assign({}, other), { ref: ref, size: FORM_CONTROL_CARCASS_SIZE_TO_ICON_SIZE[size], className: cnFormControlCarcassIcon({
+                disabled: disabled,
+            }, [className]) }),
+    });
+});
+FormControlCarcassIcon.displayName = 'FormControlCarcassIcon';

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/constants.d.ts

@@ -0,0 +1,3 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { FormControlCarcassSizeVariant } from '../../entities';
+export declare const FORM_CONTROL_CARCASS_SIZE_TO_ICON_SIZE: Readonly<Record<FormControlCarcassSizeVariant, IconSize>>;

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/constants.js

@@ -0,0 +1,7 @@
+export var FORM_CONTROL_CARCASS_SIZE_TO_ICON_SIZE = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/index.d.ts

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

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/index.js

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

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/types.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps, IconRef } from '@ozen-ui/icons';
+import type { RenderContentType } from '../../../../utils/renderContent';
+export type FormControlCarcassIconIcon = RenderContentType<IconProps>['content'];
+export type FormControlCarcassIconRef = IconRef;
+export type FormControlCarcassIconProps = {
+    icon: FormControlCarcassIconIcon;
+} & Omit<IconProps, 'size'>;

package/__inner__/esm/components/FormControlCarcass/modules/FormControlCarcassIcon/types.js

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

package/__inner__/esm/components/FormControlCarcass/modules/index.d.ts

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

package/__inner__/esm/components/FormControlCarcass/modules/index.js

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

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

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { FormControlCarcassHintProps } from './components';
+import type { FORM_CONTROL_CARCASS_DEFAULT_AS } from './constants';
+import type { FormControlCarcassAlignVariant, FormControlCarcassRenderAfter, FormControlCarcassRenderAfterProps, FormControlCarcassSizeVariant, FormControlCarcassVariant, FormControlCarcassContentProps, FormControlCarcassControlProps } from './entities';
+export type FormControlLabelBaseProps = {
+    label?: ReactNode;
+    labelProps?: Omit<ComponentPropsWithRef<'span'>, 'children'>;
+    contentProps?: Omit<FormControlCarcassContentProps, 'children'>;
+    children?: ReactNode;
+    controlProps?: Omit<FormControlCarcassControlProps, 'children'>;
+    mirrored?: boolean;
+    hint?: string | null;
+    hintProps?: Omit<FormControlCarcassHintProps, 'children'>;
+    align?: FormControlCarcassAlignVariant;
+    renderAfter?: FormControlCarcassRenderAfter;
+    renderAfterProps?: Omit<FormControlCarcassRenderAfterProps, 'children'>;
+    variant?: FormControlCarcassVariant;
+    size?: FormControlCarcassSizeVariant;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+export type FormControlCarcassProps<As extends ElementType = typeof FORM_CONTROL_CARCASS_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<FormControlLabelBaseProps, As>;

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

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

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

@@ -2,4 +2,7 @@ import './Radio.css';
 import React from 'react';
 import type { RadioProps } from './index';
 export declare const cnRadio: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент RadioNext
+ */
 export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/esm/components/Radio/Radio.js

@@ -7,6 +7,9 @@ import { FormControlLabel } from '../FormControlLabel';
 import { RadioGroupContext } from '../RadioGroup/RadioGroupContext';
 import { RADIO_DEFAULT_ALIGN, RADIO_DEFAULT_LABEL_PLACEMENT, RADIO_DEFAULT_SIZE, } from './constants';
 export var cnRadio = cn('Radio');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент RadioNext
+ */
 export var Radio = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,

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

@@ -1,4 +1,7 @@
 import './RadioGroup.css';
 import type { RadioGroupBaseProps } from './index';
 export declare const cnRadioGroup: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент RadioGroupNext
+ */
 export declare const RadioGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<RadioGroupBaseProps, "div">;

package/__inner__/esm/components/RadioGroup/RadioGroup.js

@@ -10,6 +10,9 @@ import { FormTitle } from '../FormTitle';
 import { RADIO_GROUP_DEFAULT_DIRECTION, RADIO_GROUP_DEFAULT_SIZE, RADIO_GROUP_DEFAULT_AS, } from './constants';
 import { RadioGroupContext } from './RadioGroupContext';
 export var cnRadioGroup = cn('RadioGroup');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент RadioGroupNext
+ */
 export var RadioGroup = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,

package/__inner__/esm/components/RadioGroupNext/RadioGroup.css

@@ -0,0 +1,8 @@
+.RadioGroupNext {
+  display: flex;
+  flex-direction: column;
+}
+
+  .RadioGroupNext .FormGroup {
+    align-items: flex-start;
+  }

package/__inner__/esm/components/RadioGroupNext/RadioGroup.d.ts

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

package/__inner__/esm/components/RadioGroupNext/RadioGroup.js

@@ -0,0 +1,42 @@
+import { __assign, __read, __rest } from "tslib";
+import './RadioGroup.css';
+import React from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { FormGroup } from '../FormGroup';
+import { FormTitle } from '../FormTitle';
+import { RADIO_GROUP_DEFAULT_DIRECTION, RADIO_GROUP_DEFAULT_SIZE, RADIO_GROUP_DEFAULT_AS, RADIO_GROUP_DEFAULT_VARIANT, RADIO_GROUP_DEFAULT_MIRRORED, RADIO_GROUP_DEFAULT_ALIGN, } from './constants';
+import { RadioGroupContext } from './RadioGroupContext';
+export var cnRadioGroup = cn('RadioGroupNext');
+export var RadioGroup = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'RadioGroupNext',
+    });
+    var _a = props.direction, direction = _a === void 0 ? RADIO_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? RADIO_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? RADIO_GROUP_DEFAULT_AS : _c, _d = props.variant, variant = _d === void 0 ? RADIO_GROUP_DEFAULT_VARIANT : _d, _e = props.mirrored, mirrored = _e === void 0 ? RADIO_GROUP_DEFAULT_MIRRORED : _e, _f = props.align, align = _f === void 0 ? RADIO_GROUP_DEFAULT_ALIGN : _f, title = props.title, className = props.className, children = props.children, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, other = __rest(props, ["direction", "size", "as", "variant", "mirrored", "align", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
+    var _g = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'RadioGroup',
+        state: 'value',
+    }), 2), valueState = _g[0], setValueState = _g[1];
+    var handleChange = function (event) {
+        setValueState(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (React.createElement(RadioGroupContext.Provider, { value: {
+            value: valueState,
+            onChange: handleChange,
+            name: name,
+            size: size,
+            variant: variant,
+            mirrored: mirrored,
+            align: align,
+        } },
+        React.createElement(Tag, __assign({ className: cnRadioGroup({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
+            title && React.createElement(FormTitle, { size: size }, title),
+            React.createElement(FormGroup, { direction: direction, size: size }, children))));
+});
+RadioGroup.displayName = 'RadioGroup';

package/__inner__/esm/components/RadioGroupNext/RadioGroupContext.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { RadioAlignVariant, RadioSizeVariant, RadioVariant } from '../RadioNext';
+export type RadioGroupContextValue = {
+    name: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    size?: RadioSizeVariant;
+    variant?: RadioVariant;
+    align?: RadioAlignVariant;
+    mirrored?: boolean;
+};
+export declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
+export declare const useRadioGroupContext: () => RadioGroupContextValue | undefined;

package/__inner__/esm/components/RadioGroupNext/RadioGroupContext.js

@@ -0,0 +1,8 @@
+import { useContext, createContext } from 'react';
+import { IS_DEV } from '../../constants/environment';
+export var RadioGroupContext = createContext(undefined);
+export var useRadioGroupContext = function () { return useContext(RadioGroupContext); };
+// Именованный провайдер
+if (IS_DEV) {
+    RadioGroupContext.displayName = 'RadioGroupContext';
+}

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

@@ -0,0 +1,6 @@
+export declare const RADIO_GROUP_DEFAULT_DIRECTION = "column";
+export declare const RADIO_GROUP_DEFAULT_SIZE = "m";
+export declare const RADIO_GROUP_DEFAULT_MIRRORED = false;
+export declare const RADIO_GROUP_DEFAULT_ALIGN = "top";
+export declare const RADIO_GROUP_DEFAULT_AS = "div";
+export declare const RADIO_GROUP_DEFAULT_VARIANT = "default";

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

@@ -0,0 +1,7 @@
+import { RADIO_DEFAULT_SIZE, RADIO_DEFAULT_VARIANT, RADIO_DEFAULT_ALIGN, RADIO_DEFAULT_MIRRORED, } from '../RadioNext/constants';
+export var RADIO_GROUP_DEFAULT_DIRECTION = 'column';
+export var RADIO_GROUP_DEFAULT_SIZE = RADIO_DEFAULT_SIZE;
+export var RADIO_GROUP_DEFAULT_MIRRORED = RADIO_DEFAULT_MIRRORED;
+export var RADIO_GROUP_DEFAULT_ALIGN = RADIO_DEFAULT_ALIGN;
+export var RADIO_GROUP_DEFAULT_AS = 'div';
+export var RADIO_GROUP_DEFAULT_VARIANT = RADIO_DEFAULT_VARIANT;

package/__inner__/esm/components/RadioGroupNext/entities/direction.d.ts

@@ -0,0 +1,2 @@
+export declare const radioGroupDirection: readonly ["row", "column", "rowReverse", "columnReverse"];
+export type RadioGroupDirection = (typeof radioGroupDirection)[number];

package/__inner__/esm/components/RadioGroupNext/entities/direction.js

@@ -0,0 +1,2 @@
+import { formGroupDirectionVariant } from '../../FormGroup';
+export var radioGroupDirection = formGroupDirectionVariant;

package/__inner__/esm/components/RadioGroupNext/entities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './direction';
+export * from './value';

package/__inner__/esm/components/RadioGroupNext/entities/index.js

@@ -0,0 +1,2 @@
+export * from './direction';
+export * from './value';

package/__inner__/esm/components/RadioGroupNext/entities/value.d.ts

@@ -0,0 +1 @@
+export type RadioGroupValue = string;

package/__inner__/esm/components/RadioGroupNext/entities/value.js

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

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

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './RadioGroupContext';
+export * from './RadioGroup';
+export * from './types';

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

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './RadioGroupContext';
+export * from './RadioGroup';
+export * from './types';

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

@@ -0,0 +1,32 @@
+import type { ElementType, ReactNode, ChangeEvent } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { FormGroupProps } from '../FormGroup';
+import type { RadioAlignVariant, RadioSizeVariant, RadioVariant } from '../RadioNext';
+import type { RADIO_GROUP_DEFAULT_AS } from './constants';
+export type RadioGroupBaseProps = {
+    /** Имя группы радиокнопок (передается всем вложенным радиокнопкам) */
+    name: string;
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: string;
+    /** Текущее значение */
+    value?: string;
+    /** Заголовок группы */
+    title?: string;
+    /** Размер */
+    size?: RadioSizeVariant;
+    /** Вариант отображения */
+    variant?: RadioVariant;
+    /** Выравнивание */
+    align?: RadioAlignVariant;
+    /** Если `true` делает чекбокс отзеркаленным */
+    mirrored?: boolean;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupProps['direction'];
+    /** Событие изменения состояния */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type RadioGroupProps<As extends ElementType = typeof RADIO_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<RadioGroupBaseProps, As>;

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

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

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

@@ -0,0 +1,154 @@
+.RadioNext {
+  --radio-border-color-checked: var(--radio-background-color-checked);
+  --radio-border-color-hover-checked: var(--radio-background-color-hover-checked);
+  --radio-border-color-active-checked: var(--radio-background-color-active-checked);
+}
+
+  .RadioNext_size_l,
+  .RadioNext_size_m {
+    --radio-size: 20px;
+    --radio-icon-size: 10px;
+  }
+
+  .RadioNext_size_s,
+  .RadioNext_size_xs,
+  .RadioNext_size_2xs {
+    --radio-size: 16px;
+    --radio-icon-size: 8px;
+  }
+
+  .RadioNext_variant_default {
+    /* ---- BORDER ---- */
+
+    --radio-border-color: var(--color-border-main);
+    --radio-border-color-hover: var(--color-border-main-hover);
+    --radio-border-color-active: var(--color-border-main-hover);
+
+    /* ---- BACKGROUND ---- */
+
+    --radio-background-color: var(--color-background-primary);
+    --radio-background-color-checked: var(--color-background-action);
+    --radio-background-color-hover: var(--color-background-primary-hover);
+    --radio-background-color-hover-checked: var(--color-background-action-hover);
+    --radio-background-color-active: var(--color-background-primary-pressed);
+    --radio-background-color-active-checked: var(--color-background-action-pressed);
+  }
+
+  .RadioNext_variant_error {
+    /* ---- BORDER ---- */
+
+    --radio-border-color: var(--color-border-error);
+    --radio-border-color-hover: var(--color-border-error);
+    --radio-border-color-active: var(--color-border-error);
+
+    /* ---- BACKGROUND ---- */
+
+    --radio-background-color: var(--color-background-primary);
+    --radio-background-color-checked: var(--color-background-error);
+    --radio-background-color-hover: var(--color-background-primary);
+    --radio-background-color-hover-checked: var(--color-background-error);
+    --radio-background-color-active: var(--color-background-primary);
+    --radio-background-color-active-checked: var(--color-background-error);
+  }
+
+  .RadioNext_disabled {
+    /* ---- BORDER ---- */
+
+    --radio-border-color: var(--color-border-disabled);
+    --radio-border-color-hover: var(--color-border-disabled);
+    --radio-border-color-active: var(--color-border-disabled);
+
+    /* ---- BACKGROUND ---- */
+
+    --radio-background-color: var(--color-background-disabled);
+    --radio-background-color-checked: var(--color-background-action-active-disabled);
+    --radio-background-color-hover: var(--color-background-disabled);
+    --radio-background-color-hover-checked: var(--color-background-action-active-disabled);
+    --radio-background-color-active: var(--color-background-disabled);
+    --radio-background-color-active-checked: var(--color-background-action-active-disabled);
+  }
+
+  .RadioNext-Box {
+    inline-size: var(--radio-size, 20px);
+    block-size: var(--radio-size, 20px);
+    position: relative;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .RadioNext-BoxRadio {
+    inline-size: 100%;
+    block-size: 100%;
+    position: relative;
+    display: block;
+    border-radius: inherit;
+    box-sizing: border-box;
+    border: 1px solid var(--radio-border-color);
+    background-color: var(--radio-background-color);
+    transition: border-color var(--transition-default),
+    background-color var(--transition-default),
+    box-shadow var(--transition-default);
+  }
+
+  .RadioNext-BoxRadio::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);
+    }
+
+  .RadioNext-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);
+  }
+
+  .RadioNext-Input:hover:not(:checked, :disabled) + .RadioNext-BoxRadio {
+      background-color: var(--radio-background-color-hover);
+      border-color: var(--radio-border-color-hover);
+    }
+
+  .RadioNext-Input:hover:checked:not(:active, :disabled) + .RadioNext-BoxRadio {
+      background-color: var(--radio-background-color-hover-checked);
+      border-color: var(--radio-border-color-hover-checked);
+    }
+
+  .RadioNext-Input:active:not(:checked, :disabled) + .RadioNext-BoxRadio {
+      background-color: var(--radio-background-color-active);
+      border-color: var(--radio-border-color-active);
+    }
+
+  .RadioNext-Input:active:checked + .RadioNext-BoxRadio {
+      background-color: var(--radio-background-color-active-checked);
+      border-color: var(--radio-border-color-active-checked);
+    }
+
+  .RadioNext-Input:focus + .RadioNext-BoxRadio {
+      box-shadow: var(--shadow-outline-focused);
+    }
+
+  .RadioNext-Input:focus:not(:focus-visible) + .RadioNext-BoxRadio {
+      box-shadow: none;
+    }
+
+  .RadioNext-Input:checked:not(:hover, :active) + .RadioNext-BoxRadio {
+      background-color: var(--radio-background-color-checked);
+      border-color: var(--radio-border-color-checked);
+    }
+
+  .RadioNext-Input:checked + .RadioNext-BoxRadio::after {
+      opacity: 1;
+    }

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

@@ -0,0 +1,5 @@
+import './Radio.css';
+import React from 'react';
+import type { RadioProps } from './types';
+export declare const cnRadio: import("@bem-react/classname").ClassNameFormatter;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/esm/components/RadioNext/Radio.js

@@ -0,0 +1,58 @@
+import { __assign, __rest } from "tslib";
+import './Radio.css';
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { FormControlCarcass } from '../FormControlCarcass';
+import { useRadioGroupContext } from '../RadioGroupNext';
+import { RADIO_DEFAULT_DISABLED, RADIO_DEFAULT_MIRRORED, RADIO_DEFAULT_VARIANT, RADIO_DEFAULT_ALIGN, RADIO_DEFAULT_SIZE, } from './constants';
+export var cnRadio = cn('RadioNext');
+export var Radio = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'RadioNext',
+    });
+    var _a = props.align, alignProp = _a === void 0 ? RADIO_DEFAULT_ALIGN : _a, _b = props.mirrored, mirroredProp = _b === void 0 ? RADIO_DEFAULT_MIRRORED : _b, hint = props.hint, hintProps = props.hintProps, renderAfter = props.renderAfter, renderAfterProps = props.renderAfterProps, dataTestid = props.dataTestid, _c = props.variant, variantProp = _c === void 0 ? RADIO_DEFAULT_VARIANT : _c, _d = props.size, sizeProp = _d === void 0 ? RADIO_DEFAULT_SIZE : _d, onChangeProp = props.onChange, checkedProp = props.checked, nameProp = props.name, className = props.className, label = props.label, carcassProps = props.carcassProps, _e = props.disabled, disabled = _e === void 0 ? RADIO_DEFAULT_DISABLED : _e, inputRef = props.inputRef, other = __rest(props, ["align", "mirrored", "hint", "hintProps", "renderAfter", "renderAfterProps", "dataTestid", "variant", "size", "onChange", "checked", "name", "className", "label", "carcassProps", "disabled", "inputRef"]);
+    var radioGroup = useRadioGroupContext();
+    var checked = checkedProp;
+    var name = nameProp;
+    var size = sizeProp;
+    var variant = variantProp;
+    var align = alignProp;
+    var mirrored = mirroredProp;
+    if (radioGroup) {
+        if (checked === undefined && radioGroup.value) {
+            checked = radioGroup.value === other.value;
+        }
+        if (name === undefined && radioGroup.name) {
+            name = radioGroup.name;
+        }
+        if (inProps.size === undefined && radioGroup.size) {
+            size = radioGroup.size;
+        }
+        if (inProps.variant === undefined && radioGroup.variant) {
+            variant = radioGroup.variant;
+        }
+        if (inProps.align === undefined && radioGroup.align) {
+            align = radioGroup.align;
+        }
+        if (inProps.mirrored === undefined && radioGroup.mirrored) {
+            mirrored = radioGroup.mirrored;
+        }
+    }
+    var onChange = function (event) {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+        radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange(event);
+    };
+    return (React.createElement(FormControlCarcass, __assign({}, carcassProps, { ref: ref, size: size, variant: variant, align: align, mirrored: mirrored, hint: hint, label: label, hintProps: hintProps, disabled: disabled, className: cnRadio({
+            disabled: disabled,
+            variant: variant,
+            mirrored: mirrored,
+            size: size,
+        }, [className]), controlProps: {
+            className: cnRadio('Box'),
+        }, renderAfter: renderAfter, renderAfterProps: renderAfterProps, "data-testid": dataTestid }),
+        React.createElement("input", __assign({ className: cnRadio('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { type: "radio", ref: inputRef })),
+        React.createElement("span", { className: cnRadio('BoxRadio') })));
+});
+Radio.displayName = 'Radio';

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

@@ -0,0 +1,5 @@
+export declare const RADIO_DEFAULT_ALIGN = "top";
+export declare const RADIO_DEFAULT_SIZE = "m";
+export declare const RADIO_DEFAULT_VARIANT = "default";
+export declare const RADIO_DEFAULT_MIRRORED = false;
+export declare const RADIO_DEFAULT_DISABLED = false;

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

@@ -0,0 +1,5 @@
+export var RADIO_DEFAULT_ALIGN = 'top';
+export var RADIO_DEFAULT_SIZE = 'm';
+export var RADIO_DEFAULT_VARIANT = 'default';
+export var RADIO_DEFAULT_MIRRORED = false;
+export var RADIO_DEFAULT_DISABLED = false;

package/__inner__/esm/components/RadioNext/entities/align.d.ts

@@ -0,0 +1,2 @@
+export declare const radioAlignVariant: readonly ["top", "bottom", "center"];
+export type RadioAlignVariant = (typeof radioAlignVariant)[number];

package/__inner__/esm/components/RadioNext/entities/align.js

@@ -0,0 +1,2 @@
+import { formControlCarcassAlignVariant } from '../../FormControlCarcass';
+export var radioAlignVariant = formControlCarcassAlignVariant;

package/__inner__/esm/components/RadioNext/entities/hintProps.d.ts

@@ -0,0 +1,3 @@
+import type { FormControlCarcassHintProps, FormControlCarcassHintRef } from '../../FormControlCarcass';
+export type RadioHintRef = FormControlCarcassHintRef;
+export type RadioHintProps = FormControlCarcassHintProps;

package/__inner__/esm/components/RadioNext/entities/hintProps.js

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

package/__inner__/esm/components/RadioNext/entities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './align';
+export * from './hintProps';
+export * from './renderAfter';
+export * from './size';
+export * from './variant';

package/__inner__/esm/components/RadioNext/entities/index.js

@@ -0,0 +1,5 @@
+export * from './align';
+export * from './hintProps';
+export * from './renderAfter';
+export * from './size';
+export * from './variant';

package/__inner__/esm/components/RadioNext/entities/renderAfter.d.ts

@@ -0,0 +1,4 @@
+import type { FormControlCarcassRenderAfter, FormControlCarcassRenderAfterProps, FormControlCarcassRenderAfterRef } from '../../FormControlCarcass';
+export type RadioRenderAfter = FormControlCarcassRenderAfter;
+export type RadioRenderAfterRef = FormControlCarcassRenderAfterRef;
+export type RadioRenderAfterProps = FormControlCarcassRenderAfterProps;