@ozen-ui/kit 0.0.1

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

@@ -0,0 +1,82 @@
+.SegmentItem {
+  --segment-item-delimeter-opacity: 1;
+  --segment-item-background-color: transparent;
+  --segment-item-border-radius: var(--border-radius-xs);
+  --segment-item-text-color: var(--color-content-primary);
+  --segment-item-text-color-hover: var(--color-content-secondary);
+  --segment-item-gap: var(--space-s);
+  gap: var(--segment-item-gap);
+  padding: var(--segment-item-padding-vertical)
+    var(--segment-item-padding-horizontal);
+  background-color: var(--segment-item-background-color);
+  border-radius: var(--segment-item-border-radius);
+  color: var(--segment-item-text-color);
+  transition: background-color var(--transition-default),
+    color var(--transition-default), box-shadow var(--transition-default);
+  display: flex;
+  align-items: center;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+  .SegmentItem::after {
+    opacity: var(--segment-item-delimeter-opacity);
+    background-color: var(--color-background-tertiary);
+    inset: var(--segment-item-padding-vertical) 0;
+    transition: opacity var(--transition-default);
+    content: '';
+    position: absolute;
+    inline-size: 1px;
+    inset-inline-start: -2px;
+  }
+
+  .SegmentItem_selected {
+    --segment-item-background-color: var(
+      --segment-selected-item-background-color
+    );
+    --segment-item-text-color: var(--segment-selected-item-text-color);
+  }
+
+  .SegmentItem_selected,
+  .SegmentItem_selected + .SegmentItem,
+  .SegmentItem:first-of-type {
+    --segment-item-delimeter-opacity: 0;
+  }
+
+  .SegmentItem:not(.SegmentItem_disabled,.SegmentItem_selected):hover {
+    color: var(--color-content-secondary);
+  }
+
+  .SegmentItem_disabled {
+    cursor: auto;
+  }
+
+  .SegmentItem_disabled:not(.SegmentItem_selectedColor_action) {
+    --segment-item-text-color: var(--color-content-disabled);
+  }
+
+  .SegmentItem-Icon {
+    flex-shrink: 0;
+  }
+
+  .SegmentItem-Radio {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .SegmentItem-Radio:focus + .SegmentItem-Box {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .SegmentItem-Radio:focus:not(:focus-visible) + .SegmentItem-Box {
+      box-shadow: none;
+    }
+
+  .SegmentItem-Box {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--segment-item-border-radius);
+  }

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

@@ -0,0 +1,57 @@
+import './SegmentItem.css';
+import React from 'react';
+import type { FC, ReactNode, Ref, HTMLAttributes } from 'react';
+import type { IconSize, IconProps } from '@ozen-ui/icons';
+import type { SegmentValueProp } from '../Segment';
+export type SegmentItemProps = {
+    /** Значение элемента */
+    value?: SegmentValueProp;
+    /** Компонент иконки */
+    icon?: FC<IconProps & {
+        size?: IconSize;
+    }>;
+    /** Имя элемента */
+    name?: string;
+    /** Если {true} отображает компонент как выбранный */
+    selected?: boolean;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Ссылка на элемент SVG-иконки в компоненте */
+    iconRef?: Ref<SVGSVGElement>;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: Ref<HTMLInputElement>;
+    /** HTML-аттрибуты label-элемента в компоненте */
+    labelProps?: HTMLAttributes<HTMLLabelElement>;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    inputTestId?: string;
+    'data-testid'?: string;
+} & HTMLAttributes<HTMLInputElement>;
+export declare const cnSegmentItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const SegmentItem: React.ForwardRefExoticComponent<{
+    /** Значение элемента */
+    value?: SegmentValueProp | undefined;
+    /** Компонент иконки */
+    icon?: React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: IconSize | undefined;
+    }> | undefined;
+    /** Имя элемента */
+    name?: string | undefined;
+    /** Если {true} отображает компонент как выбранный */
+    selected?: boolean | undefined;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Ссылка на элемент SVG-иконки в компоненте */
+    iconRef?: React.Ref<SVGSVGElement> | undefined;
+    /** Ссылка на input-элемент в компоненте */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /** HTML-аттрибуты label-элемента в компоненте */
+    labelProps?: React.HTMLAttributes<HTMLLabelElement> | undefined;
+    /** Дополнительные CSS-классы */
+    className?: string | undefined;
+    inputTestId?: string | undefined;
+    'data-testid'?: string | undefined;
+} & React.HTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import './SegmentItem.css';
+import React, { forwardRef } from 'react';
+import { cn } from '../../../utils/classname';
+import { useSegmentContext } from '../SegmentContext';
+export var cnSegmentItem = cn('SegmentItem');
+export var SegmentItem = forwardRef(function (_a, ref) {
+    var Icon = _a.icon, dataTestId = _a["data-testid"], iconRef = _a.iconRef, inputRef = _a.inputRef, children = _a.children, className = _a.className, value = _a.value, labelProps = _a.labelProps, inputTestId = _a.inputTestId, nameProp = _a.name, onChangeProp = _a.onChange, other = __rest(_a, ["icon", 'data-testid', "iconRef", "inputRef", "children", "className", "value", "labelProps", "inputTestId", "name", "onChange"]);
+    var _b = useSegmentContext(), name = _b.name, selectedValue = _b.selected, selectedColor = _b.selectedColor, disabled = _b.disabled, iconSize = _b.iconSize, onChange = _b.onChange;
+    var selected = selectedValue === value;
+    var handleChange = function (event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+    };
+    return (React.createElement("label", __assign({ ref: ref, className: cnSegmentItem('', __assign({ disabled: disabled, selected: selected }, (selected && { selectedColor: selectedColor })), [className]), "data-testid": dataTestId }, labelProps),
+        Icon && (React.createElement(Icon, { className: cnSegmentItem('Icon'), ref: iconRef, size: iconSize })),
+        children,
+        React.createElement("input", __assign({ disabled: disabled, type: "radio", name: nameProp || name, ref: inputRef, className: cnSegmentItem('Radio'), onChange: handleChange, checked: selected, value: value, "data-testid": inputTestId }, other)),
+        React.createElement("span", { className: cnSegmentItem('Box') })));
+});
+SegmentItem.displayName = 'SegmentItem';

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const SEGMENT_DEFAULT_SIZE = "m";
+export declare const SEGMENT_DEFAULT_VARIANT = "primary";
+export declare const SEGMENT_DEFAULT_SELECTED_COLOR = "main";
+export declare const SEGMENT_DEFAULT_FULL_WIDTH = false;
+export declare const SEGMENT_DEFAULT_DISABLED = false;

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

@@ -0,0 +1,5 @@
+export var SEGMENT_DEFAULT_SIZE = 'm';
+export var SEGMENT_DEFAULT_VARIANT = 'primary';
+export var SEGMENT_DEFAULT_SELECTED_COLOR = 'main';
+export var SEGMENT_DEFAULT_FULL_WIDTH = false;
+export var SEGMENT_DEFAULT_DISABLED = false;

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './Segment';

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './Segment';

package/__inner__/esm/components/Select/Select.css

@@ -0,0 +1,204 @@
+/* stylelint-disable */
+.Select {
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+  min-inline-size: 120px;
+}
+.Select-Option {
+    padding-inline-end: 24px;
+  }
+.Select-Input {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    inline-size: 100%;
+    box-sizing: border-box;
+  }
+.Select-Fieldset {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    border-radius: var(--border-radius-xs);
+    border: var(--textfield-border-width) solid var(--textfield-border-color);
+    transition: border var(--transition-default);
+  }
+.Select-Body {
+    position: relative;
+    display: flex;
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
+    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--textfield-background-color);
+    transition: background-color var(--transition-slow);
+    padding: 0 var(--textfield-gutter-x);
+    color: var(--textfield-color);
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    outline: none;
+  }
+.Select-FieldContainer {
+    inline-size: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+.Select-Field {
+    border: none;
+    position: relative;
+    display: flex;
+    inline-size: 100%;
+    padding: 0;
+    background: none;
+    color: var(--textfield-color);
+    box-sizing: border-box;
+    block-size: var(--textfield-input-block-size);
+    font: var(--textfield-input-font);
+    align-items: center;
+  }
+.Select-Field span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+.Select-Field_asPlaceholder {
+      color: var(--color-content-tertiary);
+    }
+.Select_multiline .Select-FieldContainer {
+      overflow: auto;
+    }
+.Select_multiline .Select-Field {
+      block-size: initial;
+      min-block-size: var(--textfield-input-block-size);
+    }
+.Select_multiline .Select-Field span {
+        overflow: auto;
+        text-overflow: initial;
+        white-space: initial;
+      }
+.Select_size_2xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-block-size: 32px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-padding: 8px 0 8px;
+      --textfield-input-gap: var(--space-s);
+    }
+.Select_size_xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-block-size: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
+    }
+.Select_size_s {
+      --textfield-gutter-x: 16px;
+      --textfield-input-block-size: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
+    }
+.Select_size_m {
+      --textfield-gutter-x: 20px;
+      --textfield-input-block-size: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
+    }
+.Select_size_l {
+      --textfield-gutter-x: 24px;
+      --textfield-input-block-size: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
+    }
+.Select_fullWidth {
+    inline-size: 100%;
+  }
+.Select_hasLabel .Select-Field {
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
+    }
+.Select:hover {
+    --textfield-border-color: var(--color-border-main-hover);
+  }
+.Select_focused,
+  .Select_focused:hover {
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
+  }
+.Select_error,
+  .Select_error.Select:hover,
+  .Select_error.Select_focused,
+  .Select_error.Select_focused:hover {
+    --textfield-border-color: var(--color-border-error);
+  }
+.Select_disabled {
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
+    pointer-events: none;
+    cursor: default;
+  }
+.Select-RenderLeft {
+    pointer-events: none;
+  }
+.Select-RenderRight {
+    pointer-events: none;
+  }
+.Select-DropDownIcon {
+    display: flex;
+    align-items: center;
+    transition: transform var(--transition-default);
+    will-change: transform;
+  }
+.Select-DropDownIcon_open {
+      transform: rotate(180deg);
+    }
+.Select .ListItemButton::after {
+  content: none;
+}
+.Select_animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.Select_animation-enter-active {
+    opacity: 1;
+    transition: opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.Select_animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.Select_animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.Select_animation-exit-active {
+    opacity: 0;
+    transition: opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.Select_animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }

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

@@ -0,0 +1,5 @@
+import './Select.css';
+import React from 'react';
+import type { SelectProps } from './types';
+export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,161 @@
+import { __assign, __read, __rest } from "tslib";
+import './Select.css';
+import React, { useRef, useEffect, forwardRef, Children, isValidElement, } from 'react';
+import { isFragment } from 'react-is';
+import { useBoolean } from '../../hooks/useBoolean';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useControlled } from '../../hooks/useControlled';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { isKey } from '../../utils/isKey';
+import { Menu } from '../Menu';
+import { SelectCheckIcon, SelectInput } from './components';
+import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_AUTO_SIZE, } from './constants';
+import { Option, OptionItemText } from './index';
+export var cnSelect = cn('Select');
+export var Select = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Select'
+    });
+    var id = props.id, name = props.name, _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_AUTO_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, menuProps = props.menuProps, inputProps = props.inputProps, inputRef = props.inputRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, other = __rest(props, ["id", "name", "size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "menuProps", "inputProps", "inputRef", "onClose", "onOpen", "open"]);
+    var _h = menuProps || {}, menuListProps = _h.menuListProps, menuPropsOther = __rest(_h, ["menuListProps"]);
+    var menuRef = useRef(null);
+    var selectRef = useRef(null);
+    var bodyRef = useRef(null);
+    var _j = __read(useBoolean(false), 2), focused = _j[0], _k = _j[1], onFocus = _k.on, offFocus = _k.off;
+    var iconSize = getIconSizeToFormElement(size);
+    var currentOption = {};
+    var _l = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Select',
+        state: 'value'
+    }), 3), valueState = _l[0], setValueState = _l[1], isValueControlled = _l[2];
+    var _m = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'Select',
+        state: 'open'
+    }), 3), open = _m[0], setOpen = _m[1], isOpenControlled = _m[2];
+    var isNotSelectOption = function (child) { return !isValidElement(child) || child.type !== Option; };
+    var resolvedChildren = isFragment(children)
+        ? children.props.children
+        : children;
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    var handleOpen = function () {
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        if (open) {
+            handleClose();
+        }
+        else {
+            handleOpen();
+        }
+    };
+    /** Сбрасывает визуальное состояние фокуса по клику за пределами
+     * элемента контроля и раскрывающегося списка */
+    useClickOutside({
+        refs: [selectRef, menuRef],
+        handler: function () {
+            offFocus();
+        },
+        active: focused
+    });
+    /** Управление фокусом элемента контроля */
+    var handleFocus = function () {
+        onFocus();
+    };
+    /** Управление потерей фокуса с элемента контроля */
+    var handleBlur = function () {
+        if (!open) {
+            offFocus();
+        }
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (event) {
+        if (isKey(event, 'Enter') ||
+            isKey(event, 'Space') ||
+            isKey(event, 'ArrowDown') ||
+            isKey(event, 'ArrowUp')) {
+            event.preventDefault();
+            handleToggle();
+        }
+    };
+    /** Событие выбора значения из раскрывающегося списка */
+    var handleChange = function (e, value) {
+        if (!isValueControlled || onChange) {
+            setValueState(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
+        handleClose();
+    };
+    /** Представление раскрывающегося списка */
+    var renderChildren = Children.map(resolvedChildren, function (child) {
+        if (isNotSelectOption(child)) {
+            return child;
+        }
+        var elementChild = child;
+        var label = typeof child.props.children === 'string'
+            ? child.props.children || child.props.label
+            : child.props.label;
+        var selected = valueState === child.props.value;
+        var props = {
+            onClick: function (event) {
+                var _a, _b;
+                handleChange(event, child.props.value || '');
+                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            }
+        };
+        if (selected) {
+            currentOption = {
+                label: label,
+                value: child.props.value
+            };
+        }
+        if (typeof child.props.children === 'string') {
+            return (React.createElement(Option, __assign({}, props, { ref: ref, selected: selected }),
+                React.createElement(OptionItemText, { primary: label || '' }),
+                React.createElement(SelectCheckIcon, { size: iconSize, selected: selected })));
+        }
+        return React.cloneElement(elementChild, __assign({}, props));
+    });
+    /** Представление значение элемента контроля по умолчанию */
+    var renderDefaultValue = function (option) {
+        var _a = option.label, label = _a === void 0 ? '' : _a, _b = option.value, value = _b === void 0 ? '' : _b;
+        return React.createElement("span", null, label || value);
+    };
+    /** Представление значение элемента контроля */
+    var renderValue = renderValueProp || renderDefaultValue;
+    useEffect(function () {
+        var _a;
+        /** Устанавливает фокус на элементе контроля
+         * если компонент по умолчанию открыт – defaultOpen={true}
+         * и является неконтролируемым */
+        if (defaultOpen && !isOpenControlled) {
+            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [open]);
+    useEffect(function () {
+        var _a;
+        /** Автофокус на элементе контроля */
+        if (autoFocus) {
+            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SelectInput, __assign({ id: id, name: name, inputProps: inputProps, inputRef: inputRef, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, open: open, renderRight: renderRight, renderedValue: currentOption.value && renderValue(currentOption) }, other, { focused: focused, value: valueState || '', bodyRef: bodyRef, onClick: handleToggle, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ref: useMultiRef([selectRef, ref]) })),
+        React.createElement(Menu, __assign({ placement: "bottom-start", transitionProps: {
+                classNames: cnSelect({ animation: true })
+            }, menuListProps: __assign({ size: size, role: 'listbox' }, menuListProps), equalAnchorWidth: true }, menuPropsOther, { open: open, anchorRef: bodyRef, onClose: handleClose, ref: menuRef }), renderChildren)));
+});
+Select.displayName = 'Select';

package/__inner__/esm/components/Select/components/SelectCheckIcon/SelectCheckIcon.css

@@ -0,0 +1,13 @@
+.SelectCheckIcon {
+  inline-size: var(--select-check-icon-size);
+  block-size: var(--select-check-icon-size);
+  display: flex;
+}
+
+  .SelectCheckIcon_size_s {
+      --select-check-icon-size: 16px;
+    }
+
+  .SelectCheckIcon_size_m {
+      --select-check-icon-size: 24px;
+    }

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

@@ -0,0 +1,8 @@
+import './SelectCheckIcon.css';
+import React from 'react';
+import { type IconSize } from '@ozen-ui/icons';
+export type SelectCheckIconProps = {
+    size?: IconSize;
+    selected?: boolean;
+};
+export declare const SelectCheckIcon: React.FC<SelectCheckIconProps>;

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

@@ -0,0 +1,9 @@
+import './SelectCheckIcon.css';
+import React from 'react';
+import { TickIcon } from '@ozen-ui/icons';
+import { cn } from '../../../../utils/classname';
+var cnSelectCheckIcon = cn('SelectCheckIcon');
+export var SelectCheckIcon = function (_a) {
+    var size = _a.size, selected = _a.selected;
+    return (React.createElement("div", { className: cnSelectCheckIcon({ size: size }) }, selected && React.createElement(TickIcon, { size: size })));
+};

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

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

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

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