@ozen-ui/kit 0.0.1

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

@@ -0,0 +1,44 @@
+import { __assign, __rest } from "tslib";
+import './Radio.css';
+import React, { useContext, forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+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');
+export var Radio = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Radio'
+    });
+    var _a = props.align, align = _a === void 0 ? RADIO_DEFAULT_ALIGN : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? RADIO_DEFAULT_LABEL_PLACEMENT : _b, _c = props.size, sizeProp = _c === void 0 ? RADIO_DEFAULT_SIZE : _c, onChangeProp = props.onChange, checkedProp = props.checked, nameProp = props.name, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, inputRef = props.inputRef, other = __rest(props, ["align", "labelPlacement", "size", "onChange", "checked", "name", "className", "label", "labelProps", "disabled", "inputRef"]);
+    var radioGroup = useContext(RadioGroupContext);
+    var checked = checkedProp;
+    var name = nameProp;
+    var size = sizeProp;
+    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;
+        }
+    }
+    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(FormControlLabel, __assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
+        React.createElement("span", { className: cnRadio({
+                size: size,
+                disabled: disabled,
+                checked: checked
+            }) },
+            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('Box') }))));
+});
+Radio.displayName = 'Radio';

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

@@ -0,0 +1,3 @@
+export declare const RADIO_DEFAULT_ALIGN = "center";
+export declare const RADIO_DEFAULT_LABEL_PLACEMENT = "right";
+export declare const RADIO_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,3 @@
+export var RADIO_DEFAULT_ALIGN = 'center';
+export var RADIO_DEFAULT_LABEL_PLACEMENT = 'right';
+export var RADIO_DEFAULT_SIZE = 'm';

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import './RadioGroup.css';
+import React from 'react';
+import type { ElementType, ReactNode } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { type FormGroupProps } from '../FormGroup';
+export type RadioGroupBaseProps = {
+    /** Имя группы радиокнопок (передается всем вложенным радиокнопкам) */
+    name: string;
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: string;
+    /** Текущее значение */
+    value?: string;
+    /** Заголовок группы */
+    title?: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupProps['direction'];
+    /** Событие изменения состояния */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export type RadioGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<RadioGroupBaseProps, As>;
+export declare const cnRadioGroup: import("@bem-react/classname").ClassNameFormatter;
+export declare const RadioGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<RadioGroupBaseProps, "div">;

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

@@ -0,0 +1,39 @@
+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, } from './constants';
+import { RadioGroupContext } from './RadioGroupContext';
+export var cnRadioGroup = cn('RadioGroup');
+export var RadioGroup = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'RadioGroup'
+    });
+    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, 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", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
+    var _d = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'RadioGroup',
+        state: 'value'
+    }), 2), valueState = _d[0], setValueState = _d[1];
+    var handleChange = function (event) {
+        setValueState(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (React.createElement(Tag, __assign({ className: cnRadioGroup({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
+        React.createElement(RadioGroupContext.Provider, { value: {
+                value: valueState,
+                onChange: handleChange,
+                name: name,
+                size: size
+            } },
+            title && React.createElement(FormTitle, { size: size }, title),
+            React.createElement(FormGroup, { direction: direction, size: size }, children))));
+});
+RadioGroup.displayName = 'RadioGroup';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export interface RadioGroupContextValue {
+    name: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    size?: FormElementSizeVariant;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export var RadioGroupContext = React.createContext(undefined);

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

@@ -0,0 +1,3 @@
+export declare const RADIO_GROUP_DEFAULT_DIRECTION = "column";
+export declare const RADIO_GROUP_DEFAULT_SIZE = "m";
+export declare const RADIO_GROUP_DEFAULT_AS = "div";

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

@@ -0,0 +1,3 @@
+export var RADIO_GROUP_DEFAULT_DIRECTION = 'column';
+export var RADIO_GROUP_DEFAULT_SIZE = 'm';
+export var RADIO_GROUP_DEFAULT_AS = 'div';

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

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

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

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

package/__inner__/esm/components/SectionMessage/SectionMessage.css

@@ -0,0 +1,128 @@
+/* stylelint-disable */
+.SectionMessage {
+  --section-message-icon-padding: 2px;
+  padding: var(--section-message-padding);
+  border-radius: var(--border-radius-m);
+  background-color: var(--section-message-background-color);
+  display: flex;
+  -moz-column-gap: var(--section-message-column-gap);
+       column-gap: var(--section-message-column-gap);
+  align-items: flex-start;
+  inline-size: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.SectionMessage_status_info {
+      --section-message-icon-color: var(--color-content-info);
+      --section-message-background-color: var(--color-background-info-light);
+      --section-message-button-color: var(--color-content-info);
+      --section-message-button-color-hover: var(--color-content-info-dark);
+    }
+.SectionMessage_status_neutral {
+      --section-message-icon-color: var(--color-content-primary);
+      --section-message-background-color: var(--color-background-secondary);
+      --section-message-button-color: var(--color-content-action);
+      --section-message-button-color-hover: var(--color-content-action-dark);
+    }
+.SectionMessage_status_warning {
+      --section-message-icon-color: var(--color-content-warning);
+      --section-message-background-color: var(--color-background-warning-light);
+      --section-message-button-color: var(--color-content-warning);
+      --section-message-button-color-hover: var(--color-content-warning-dark);
+    }
+.SectionMessage_status_success {
+      --section-message-icon-color: var(--color-content-success);
+      --section-message-background-color: var(--color-background-success-light);
+      --section-message-button-color: var(--color-content-success);
+      --section-message-button-color-hover: var(--color-content-success-dark);
+    }
+.SectionMessage_status_error {
+      --section-message-icon-color: var(--color-content-error);
+      --section-message-background-color: var(--color-background-error-light);
+      --section-message-button-color: var(--color-content-error);
+      --section-message-button-color-hover: var(--color-content-error-dark);
+    }
+.SectionMessage_size_xs {
+      --section-message-padding: 12px;
+      --section-message-column-gap: var(--space-s);
+      --section-message-icon-padding: 0;
+
+      font: var(--typography-text-xs-font);
+
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+
+      text-transform: var(--typography-text-xs-text_transform, none);
+    }
+.SectionMessage_size_xs .SectionMessage-Title {
+        font: var(--typography-text-xs_1-font);
+        letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
+        text-transform: var(--typography-text-xs_1-text_transform, none);
+      }
+.SectionMessage_size_s {
+      --section-message-padding: 14px 16px;
+      --section-message-column-gap: var(--space-m);
+
+      font: var(--typography-text-s-font);
+
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.SectionMessage_size_s .SectionMessage-Title {
+        font: var(--typography-text-s_1-font);
+        letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
+        text-transform: var(--typography-text-s_1-text_transform, none);
+      }
+.SectionMessage_size_m {
+      --section-message-padding: 16px 20px;
+      --section-message-column-gap: var(--space-m);
+      --section-message-icon-padding: 0;
+
+      font: var(--typography-text-m-font);
+
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.SectionMessage_size_m .SectionMessage-Title {
+        font: var(--typography-text-m_1-font);
+        letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+        text-transform: var(--typography-text-m_1-text_transform, none);
+      }
+.SectionMessage_size_l {
+      --section-message-padding: 18px 24px;
+      --section-message-column-gap: var(--space-l);
+
+      font: var(--typography-text-l-font);
+
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.SectionMessage_size_l .SectionMessage-Title {
+        font: var(--typography-text-l_1-font);
+        letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
+        text-transform: var(--typography-text-l_1-text_transform, none);
+      }
+.SectionMessage-Icon {
+    display: flex;
+    color: var(--section-message-icon-color);
+    padding-block-start: var(--section-message-icon-padding);
+  }
+.SectionMessage-Title {
+    display: flex;
+    align-items: center;
+  }
+.SectionMessage-Action {
+    margin-block-start: var(--space-s);
+  }
+.SectionMessage-Button.Button {
+    color: var(--section-message-button-color);
+  }
+.SectionMessage-Button.Button:hover,
+    .SectionMessage-Button.Button:focus:not(:focus-visible) {
+      color: var(--section-message-button-color);
+    }
+.SectionMessage-Button.Button:focus {
+      color: var(--section-message-button-color-hover);
+    }

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

@@ -0,0 +1,37 @@
+import './SectionMessage.css';
+import React from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { ButtonProps } from '../Button';
+export declare const cnSectionMessage: import("@bem-react/classname").ClassNameFormatter;
+export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
+export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];
+export declare const sectionMessageSizeVariant: readonly ["xs", "s", "m", "l"];
+export type SectionMessageSizeVariant = (typeof sectionMessageSizeVariant)[number];
+type SectionMessageBaseProps = {
+    /**
+     * Статус сообщения
+     * @default info
+     */
+    status?: SectionMessageStatusVariant;
+    /**
+     * Если {true} отображает иконку со статусом
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Размер
+     * @default m
+     */
+    size?: SectionMessageSizeVariant;
+    /** Заголовок сообщения */
+    title?: React.ReactNode;
+    /** Основное содержимое элемента */
+    children?: React.ReactNode;
+    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
+    action?: ReactElement<ButtonProps> | (({ size, variant, className, }: Pick<ButtonProps, 'size' | 'variant' | 'className'>) => ReactElement);
+    /** Дополнительные CSS-классы */
+    className?: string;
+};
+export type SectionMessageProps = SectionMessageBaseProps & Omit<HTMLAttributes<HTMLElement>, 'title'>;
+export declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageBaseProps & Omit<React.HTMLAttributes<HTMLElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/esm/components/SectionMessage/SectionMessage.js

@@ -0,0 +1,67 @@
+import { __assign, __rest } from "tslib";
+import './SectionMessage.css';
+import React, { forwardRef } from 'react';
+import { InfoCircleOutlineIcon, CheckCircleOutlineIcon, WarningTriangleOutlineIcon, WarningCircleOutlineIcon, } from '@ozen-ui/icons';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { SECTION_MESSAGE_DEFAULT_SIZE, SECTION_MESSAGE_DEFAULT_STATUS, } from './constants';
+export var cnSectionMessage = cn('SectionMessage');
+export var sectionMessageStatusVariant = [
+    'success',
+    'error',
+    'warning',
+    'info',
+    'neutral',
+];
+export var sectionMessageSizeVariant = ['xs', 's', 'm', 'l'];
+var matchVariantToIcon = {
+    neutral: {
+        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
+        s: React.createElement(InfoCircleOutlineIcon, { size: "s" })
+    },
+    info: {
+        m: React.createElement(InfoCircleOutlineIcon, { size: "m" }),
+        s: React.createElement(InfoCircleOutlineIcon, { size: "s" })
+    },
+    warning: {
+        m: React.createElement(WarningTriangleOutlineIcon, { size: "m" }),
+        s: React.createElement(WarningTriangleOutlineIcon, { size: "s" })
+    },
+    success: {
+        m: React.createElement(CheckCircleOutlineIcon, { size: "m" }),
+        s: React.createElement(CheckCircleOutlineIcon, { size: "s" })
+    },
+    error: {
+        m: React.createElement(WarningCircleOutlineIcon, { size: "m" }),
+        s: React.createElement(WarningCircleOutlineIcon, { size: "s" })
+    }
+};
+export var SectionMessage = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SectionMessage'
+    });
+    var _a = props.status, status = _a === void 0 ? SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = __rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
+    var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
+    var resolveAction = function (action) {
+        var actionProps = {
+            variant: 'function',
+            size: size,
+            className: cnSectionMessage('Button')
+        };
+        if (!action) {
+            return null;
+        }
+        if (typeof action === 'function') {
+            return action(actionProps);
+        }
+        return React.cloneElement(action, actionProps);
+    };
+    return (React.createElement("div", __assign({ className: cnSectionMessage({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
+        showIcon && (React.createElement("div", { className: cnSectionMessage('Icon') }, matchVariantToIcon[status][iconSize])),
+        React.createElement("div", { className: cnSectionMessage('Content') },
+            title && React.createElement("div", { className: cnSectionMessage('Title') }, title),
+            children && (React.createElement("div", { className: cnSectionMessage('Body') }, children)),
+            action && (React.createElement("div", { className: cnSectionMessage('Action') }, resolveAction(action))))));
+});
+SectionMessage.displayName = 'SectionMessage';

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

@@ -0,0 +1,2 @@
+export declare const SECTION_MESSAGE_DEFAULT_STATUS = "info";
+export declare const SECTION_MESSAGE_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,2 @@
+export var SECTION_MESSAGE_DEFAULT_STATUS = 'info';
+export var SECTION_MESSAGE_DEFAULT_SIZE = 'm';

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

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

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

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

package/__inner__/esm/components/Segment/Segment.css

@@ -0,0 +1,81 @@
+/* stylelint-disable */
+.Segment {
+  --segment-border-radius: var(--border-radius-s);
+  background-color: var(--segment-background-color);
+  border-radius: var(--segment-border-radius);
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  display: flex;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+  padding: 2px;
+  gap: 3px;
+  white-space: nowrap;
+}
+.Segment_size_2xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+
+      --segment-item-padding-vertical: 6px;
+      --segment-item-padding-horizontal: 12px;
+    }
+.Segment_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --segment-item-padding-vertical: 10px;
+      --segment-item-padding-horizontal: 12px;
+    }
+.Segment_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --segment-item-padding-vertical: 12px;
+      --segment-item-padding-horizontal: 16px;
+    }
+.Segment_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --segment-item-padding-vertical: 14px;
+      --segment-item-padding-horizontal: 20px;
+    }
+.Segment_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --segment-item-padding-vertical: 16px;
+      --segment-item-padding-horizontal: 24px;
+    }
+.Segment_variant_primary {
+      --segment-background-color: var(--color-background-primary);
+    }
+.Segment_variant_secondary {
+      --segment-background-color: var(--color-background-secondary);
+    }
+.Segment_selectedColor_main {
+      --segment-selected-item-background-color: var(--color-background-main);
+      --segment-selected-item-text-color: var(--color-content-primary);
+    }
+.Segment_selectedColor_action {
+      --segment-selected-item-background-color: var(--color-background-action);
+      --segment-selected-item-text-color: var(--color-content-action-on);
+    }
+.Segment_fullWidth {
+    inline-size: 100%;
+  }
+.Segment_fullWidth .SegmentItem {
+      flex: 1 1 auto;
+      justify-content: center;
+    }
+.Segment_disabled.Segment_selectedColor_action {
+      --segment-selected-item-background-color: var(
+        --color-background-action-active-disabled
+      );
+    }

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

@@ -0,0 +1,38 @@
+import './Segment.css';
+import React from 'react';
+import type { ReactNode, ChangeEventHandler, HTMLAttributes } from 'react';
+import type { ExtendableProps } from '../../types/ExtendableProps';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export declare const cnSegment: import("@bem-react/classname").ClassNameFormatter;
+export declare const segmentVariant: readonly ["primary", "secondary"];
+export declare const segmentSelectedVariant: readonly ["main", "action"];
+export type SegmentSizeVariant = FormElementSizeVariant;
+export type SegmentVariant = (typeof segmentVariant)[number];
+export type SegmentSelectedVariant = (typeof segmentSelectedVariant)[number];
+export type SegmentValueProp = string | number;
+export type SegmentBaseProps = {
+    /** Свойство отвечающее за размер отступов и типографики компонента */
+    size?: FormElementSizeVariant;
+    /** Свойство отвечающее за отображение приоритетности компонента */
+    variant?: SegmentVariant;
+    /** Свойство определяющее цвет выбранной опции */
+    selectedColor?: SegmentSelectedVariant;
+    /** Имя компонента */
+    name?: string;
+    /** Если {true} отключает взаимодействие с компонентом */
+    disabled?: boolean;
+    /** Если {true} растягивает компонент на всю ширину родительского контейнера */
+    fullWidth?: boolean;
+    /** Значение компонента */
+    value?: SegmentValueProp;
+    /** Значение компонента по умолчанию (неконтролируемое состояние) */
+    defaultValue?: SegmentValueProp;
+    /** Функция обратного вызова, которая вызывается при изменении значения компонента */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Содержимое компонента */
+    children: ReactNode;
+};
+export type SegmentProps = ExtendableProps<HTMLAttributes<HTMLFieldSetElement>, SegmentBaseProps>;
+export declare const Segment: React.ForwardRefExoticComponent<SegmentBaseProps & Omit<React.HTMLAttributes<HTMLFieldSetElement>, keyof SegmentBaseProps> & React.RefAttributes<HTMLFieldSetElement>>;

package/__inner__/esm/components/Segment/Segment.js

@@ -0,0 +1,43 @@
+import { __assign, __read, __rest } from "tslib";
+import './Segment.css';
+import React, { useMemo, useCallback, forwardRef } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { SEGMENT_DEFAULT_SELECTED_COLOR, SEGMENT_DEFAULT_SIZE, SEGMENT_DEFAULT_VARIANT, SEGMENT_DEFAULT_FULL_WIDTH, SEGMENT_DEFAULT_DISABLED, } from './constants';
+import { SegmentContext } from './SegmentContext';
+export var cnSegment = cn('Segment');
+export var segmentVariant = ['primary', 'secondary'];
+export var segmentSelectedVariant = ['main', 'action'];
+export var Segment = forwardRef(function (inProps, ref) {
+    var _a = useThemeProps({ name: 'Segment', props: inProps }), _b = _a.size, size = _b === void 0 ? SEGMENT_DEFAULT_SIZE : _b, _c = _a.variant, variant = _c === void 0 ? SEGMENT_DEFAULT_VARIANT : _c, _d = _a.selectedColor, selectedColor = _d === void 0 ? SEGMENT_DEFAULT_SELECTED_COLOR : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? SEGMENT_DEFAULT_FULL_WIDTH : _e, _f = _a.disabled, disabled = _f === void 0 ? SEGMENT_DEFAULT_DISABLED : _f, valueProp = _a.value, name = _a.name, defaultValue = _a.defaultValue, onChange = _a.onChange, className = _a.className, children = _a.children, other = __rest(_a, ["size", "variant", "selectedColor", "fullWidth", "disabled", "value", "name", "defaultValue", "onChange", "className", "children"]);
+    var _g = __read(useControlled({
+        name: 'Segment',
+        value: valueProp,
+        defaultValue: defaultValue,
+        state: 'value'
+    }), 2), valueState = _g[0], setValueState = _g[1];
+    var handleChange = useCallback(function (e) {
+        setValueState(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange]);
+    var iconSize = useMemo(function () { return getIconSizeToFormElement(size); }, [size]);
+    var contextState = useMemo(function () { return ({
+        name: name,
+        disabled: disabled,
+        iconSize: iconSize,
+        selectedColor: selectedColor,
+        selected: valueState,
+        onChange: handleChange
+    }); }, [name, disabled, iconSize, selectedColor, valueState, handleChange]);
+    return (React.createElement("fieldset", __assign({ ref: ref, disabled: disabled, className: cnSegment('', {
+            size: size,
+            variant: variant,
+            disabled: disabled,
+            selectedColor: selectedColor,
+            fullWidth: fullWidth
+        }, [className]) }, other),
+        React.createElement(SegmentContext.Provider, { value: contextState }, children)));
+});
+Segment.displayName = 'Segment';

package/__inner__/esm/components/Segment/SegmentContext.d.ts

@@ -0,0 +1,13 @@
+import type { ChangeEvent } from 'react';
+import type { IconSize } from '@ozen-ui/icons';
+import type { SegmentSelectedVariant, SegmentValueProp } from './Segment';
+export type SegmentContextState = {
+    name?: string;
+    iconSize?: IconSize;
+    selected?: SegmentValueProp;
+    selectedColor?: SegmentSelectedVariant;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const SegmentContext: import("react").Context<SegmentContextState>;
+export declare const useSegmentContext: () => SegmentContextState;

package/__inner__/esm/components/Segment/SegmentContext.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export var SegmentContext = createContext({});
+export var useSegmentContext = function () { return useContext(SegmentContext); };