@alfalab/core-components 39.0.0-beta.2 → 39.0.0-beta.3

package/segmented-control/cssm/components/index.js

@@ -0,0 +1,11 @@
+var components_segment_Component = require('./segment/Component.js');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('../context.js');
+require('./segment/index.module.css');
+
+
+
+exports.Segment = components_segment_Component.Segment;

package/segmented-control/cssm/components/segment/Component.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { IDType } from "../../typing";
+type SegmentProps = {
+    /**
+     * Дополнительный className
+     */
+    className?: string;
+    /**
+     * Дополнительный className для контента сегмента
+     */
+    contentClassName?: string;
+    /**
+     * ID сегмента
+     */
+    id: IDType;
+    /**
+     * Заголовок сегмента
+     */
+    title: string;
+    /**
+     * Контент выбранного сегмента
+     */
+    children?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
+export { SegmentProps, Segment };

package/segmented-control/cssm/components/segment/Component.js

@@ -0,0 +1,26 @@
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var context = require('../../context.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Segment = React.forwardRef(function (_a, ref) {
+    var id = _a.id, className = _a.className, title = _a.title, dataTestId = _a.dataTestId;
+    var onChange = React.useContext(context.SegmentedControlContext).onChange;
+    var segmentRef = React.useRef(null);
+    var focused = hooks.useFocus(segmentRef, 'keyboard')[0];
+    var handleClick = function () {
+        onChange(id);
+    };
+    return (React__default.default.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs__default.default([segmentRef, ref]), className: cn__default.default(styles__default.default.segment, className, styles__default.default.focused && focused), "data-test-id": dataTestId }, title));
+});
+
+exports.Segment = Segment;

package/segmented-control/cssm/components/segment/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/segmented-control/cssm/components/segment/index.js

@@ -0,0 +1,11 @@
+var components_segment_Component = require('./Component.js');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('../../context.js');
+require('./index.module.css');
+
+
+
+exports.Segment = components_segment_Component.Segment;

package/segmented-control/cssm/components/segment/index.module.css

@@ -0,0 +1,54 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-text-primary: #0b1f35; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+} :root {
+    --focus-color: var(--color-light-border-link);
+} .segment {
+    flex: 1;
+    z-index: 1;
+    display: flex;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--gap-xs);
+    border: none;
+    background-color: transparent;
+    position: relative;
+    font-family: var(--font-family-system);
+    color: var(--color-light-text-primary);
+    transition: font-weight 0.2s ease;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+} .segment:not(:first-child):before {
+        content: '';
+        position: absolute;
+        background-color: var(--color-light-border-primary);
+        transition: opacity 0.2s ease;
+        width: 1px;
+        top: 8px;
+        border-radius: 0.5px;
+        bottom: 8px;
+        left: 0;
+    } .focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/segmented-control/cssm/context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IDType } from "./typing";
+type ContextType = {
+    onChange: (id: IDType) => void;
+};
+declare const SegmentedControlContext: import("react").Context<ContextType>;
+export { ContextType, SegmentedControlContext };

package/segmented-control/cssm/context.js

@@ -0,0 +1,7 @@
+var React = require('react');
+
+var SegmentedControlContext = React.createContext({
+    onChange: function () { return null; },
+});
+
+exports.SegmentedControlContext = SegmentedControlContext;

package/segmented-control/cssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./components/index";

package/segmented-control/cssm/index.js

@@ -0,0 +1,15 @@
+var Component = require('./Component.js');
+var components_segment_Component = require('./components/segment/Component.js');
+require('react');
+require('@juggle/resize-observer');
+require('classnames');
+require('./context.js');
+require('./index.module.css');
+require('react-merge-refs');
+require('@alfalab/hooks');
+require('./components/segment/index.module.css');
+
+
+
+exports.SegmentedControl = Component.SegmentedControl;
+exports.Segment = components_segment_Component.Segment;

package/segmented-control/cssm/index.module.css

@@ -0,0 +1,77 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-tertiary: #f3f4f5;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-s: 4px;
+    --border-radius-m: 8px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
+} :root {
+    --gap-3xs: 2px;
+} :root {
+} :root {
+    --size-xxs-height: 32px;
+    --size-xs-height: 40px;
+} .wrapper {
+    background-color: var(--color-light-specialbg-secondary-transparent);
+    display: flex;
+} .container {
+    position: relative;
+    display: flex;
+    flex: 1;
+} .inner {
+    display: flex;
+    flex: 1;
+    margin: 0 var(--gap-3xs);
+} .segment {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+} .selected {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500
+} .selected:before,
+    .selected + .segment:before {
+        opacity: 0;
+    } .xs {
+    height: var(--size-xs-height)
+} .xs .rounded,
+    .xs:has(.rounded) {
+        border-radius: var(--border-radius-xxl);
+    } .xs:has(.rectangular) {
+        border-radius: var(--border-radius-m)
+    } .xs:has(.rectangular) .selectedBox {
+            border-radius: calc(var(--border-radius-l) / 2);
+        } .xxs {
+    height: var(--size-xxs-height);
+} .rounded {
+    border-radius: var(--border-radius-xl);
+} .rectangular {
+    border-radius: calc(var(--border-radius-l) / 2)
+} .rectangular .selectedBox {
+        border-radius: var(--border-radius-s);
+    } .selectedBox {
+    border: 0.5px solid var(--color-light-border-tertiary);
+    box-sizing: border-box;
+    position: absolute;
+    top: var(--gap-3xs);
+    bottom: var(--gap-3xs);
+    left: var(--gap-3xs);
+    box-shadow: var(--shadow-s);
+    background-color: var(--color-light-bg-primary);
+    transition: width 0.2s ease, transform 0.2s ease;
+}

package/segmented-control/cssm/typing.d.ts

@@ -0,0 +1,2 @@
+type IDType = string | number;
+export { IDType };

package/segmented-control/cssm/typing.js

@@ -0,0 +1 @@
+

package/segmented-control/esm/Component.d.ts

@@ -0,0 +1,36 @@
+import { FC, ReactElement } from 'react';
+import { SegmentProps } from "./components/index";
+import { ContextType } from "./context";
+import { IDType } from "./typing";
+type SegmentedControlProps = {
+    /**
+     * Дополнительный className
+     */
+    className?: string;
+    /**
+     * Обработчик смены выбранного сегмента
+     */
+    onChange: ContextType['onChange'];
+    /**
+     * ID выбранного сегмента
+     */
+    selectedId: IDType;
+    /**
+     * Размер компонента
+     */
+    size?: 'xs' | 'xxs';
+    /**
+     * Форма компонента
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Дочерние элементы
+     */
+    children: Array<ReactElement<SegmentProps>>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const SegmentedControl: FC<SegmentedControlProps>;
+export { SegmentedControlProps, SegmentedControl };

package/segmented-control/esm/Component.js

@@ -0,0 +1,60 @@
+import React, { useRef, useCallback, useEffect } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { SegmentedControlContext } from './context.js';
+
+var styles = {"wrapper":"segmented-control__wrapper_15iod","container":"segmented-control__container_15iod","inner":"segmented-control__inner_15iod","segment":"segmented-control__segment_15iod","selected":"segmented-control__selected_15iod","xs":"segmented-control__xs_15iod","rounded":"segmented-control__rounded_15iod","rectangular":"segmented-control__rectangular_15iod","selectedBox":"segmented-control__selectedBox_15iod","xxs":"segmented-control__xxs_15iod"};
+require('./index.css');
+
+var MAX_SEGMENTS = 5;
+var SegmentedControl = function (_a) {
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, dataTestId = _a.dataTestId;
+    var wrapperRef = useRef(null);
+    var innerRef = useRef(null);
+    var selectedBoxRef = useRef(null);
+    var children = defaultChildren.slice(0, MAX_SEGMENTS);
+    var selectedSegmentPosition = children.findIndex(function (item) { return item.props.id === selectedId; });
+    var isPositionFounded = selectedSegmentPosition !== -1;
+    var content = isPositionFounded && children[selectedSegmentPosition].props.children;
+    var contentClassName = isPositionFounded && children[selectedSegmentPosition].props.contentClassName;
+    var setSelectedBoxStyles = useCallback(function () {
+        if (innerRef.current && selectedBoxRef.current) {
+            var segments = Array.from(innerRef.current.children);
+            var parentWidth = innerRef.current.getBoundingClientRect().width;
+            var width = parentWidth / segments.length;
+            var offsetLeft = width * selectedSegmentPosition;
+            selectedBoxRef.current.style.width = "".concat(width, "px");
+            selectedBoxRef.current.style.transform = "translateX(".concat(offsetLeft, "px)");
+        }
+    }, [selectedSegmentPosition]);
+    var setSelectedBoxStylesRef = useRef(setSelectedBoxStyles);
+    useEffect(function () {
+        setSelectedBoxStylesRef.current = setSelectedBoxStyles;
+        setSelectedBoxStyles();
+    }, [setSelectedBoxStyles]);
+    useEffect(function () {
+        if (!wrapperRef.current)
+            return undefined;
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        var observer = new ResizeObserver$1(function () { return setSelectedBoxStylesRef.current(); });
+        observer.observe(wrapperRef.current);
+        return function () { return observer.disconnect(); };
+    }, []);
+    return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    React.createElement(SegmentedControlContext.Provider, { value: { onChange: onChange } },
+        React.createElement("div", { ref: wrapperRef, className: cn(styles.wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
+            React.createElement("div", { className: cn(styles.container) },
+                React.createElement("div", { className: cn(styles.selectedBox, styles[shape]), ref: selectedBoxRef }),
+                React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, function (item) {
+                    var _a;
+                    return React.cloneElement(item, {
+                        className: cn(styles.segment, (_a = {},
+                            _a[styles.selected] = item.props.id === selectedId,
+                            _a), item.props.className),
+                    });
+                })))),
+        content && React.createElement("div", { className: cn(contentClassName) }, content)));
+};
+
+export { SegmentedControl };

package/segmented-control/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./segment/index";

package/segmented-control/esm/components/index.js

@@ -0,0 +1,6 @@
+export { Segment } from './segment/Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '@alfalab/hooks';
+import '../context.js';

package/segmented-control/esm/components/segment/Component.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { IDType } from "../../typing";
+type SegmentProps = {
+    /**
+     * Дополнительный className
+     */
+    className?: string;
+    /**
+     * Дополнительный className для контента сегмента
+     */
+    contentClassName?: string;
+    /**
+     * ID сегмента
+     */
+    id: IDType;
+    /**
+     * Заголовок сегмента
+     */
+    title: string;
+    /**
+     * Контент выбранного сегмента
+     */
+    children?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
+export { SegmentProps, Segment };

package/segmented-control/esm/components/segment/Component.js

@@ -0,0 +1,21 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { SegmentedControlContext } from '../../context.js';
+
+var styles = {"segment":"segmented-control__segment_zpknt","focused":"segmented-control__focused_zpknt"};
+require('./index.css');
+
+var Segment = forwardRef(function (_a, ref) {
+    var id = _a.id, className = _a.className, title = _a.title, dataTestId = _a.dataTestId;
+    var onChange = useContext(SegmentedControlContext).onChange;
+    var segmentRef = useRef(null);
+    var focused = useFocus(segmentRef, 'keyboard')[0];
+    var handleClick = function () {
+        onChange(id);
+    };
+    return (React.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs([segmentRef, ref]), className: cn(styles.segment, className, focused), "data-test-id": dataTestId }, title));
+});
+
+export { Segment };

package/segmented-control/esm/components/segment/index.css

@@ -0,0 +1,55 @@
+/* hash: io9gb */
+:root {
+} /* deprecated */ :root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-text-primary: #0b1f35; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+} :root {
+    --focus-color: var(--color-light-border-link);
+} .segmented-control__segment_zpknt {
+    flex: 1;
+    z-index: 1;
+    display: flex;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--gap-xs);
+    border: none;
+    background-color: transparent;
+    position: relative;
+    font-family: var(--font-family-system);
+    color: var(--color-light-text-primary);
+    transition: font-weight 0.2s ease;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+} .segmented-control__segment_zpknt:not(:first-child):before {
+        content: '';
+        position: absolute;
+        background-color: var(--color-light-border-primary);
+        transition: opacity 0.2s ease;
+        width: 1px;
+        top: 8px;
+        border-radius: 0.5px;
+        bottom: 8px;
+        left: 0;
+    } .segmented-control__focused_zpknt {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/segmented-control/esm/components/segment/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/segmented-control/esm/components/segment/index.js

@@ -0,0 +1,6 @@
+export { Segment } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../context.js';

package/segmented-control/esm/context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IDType } from "./typing";
+type ContextType = {
+    onChange: (id: IDType) => void;
+};
+declare const SegmentedControlContext: import("react").Context<ContextType>;
+export { ContextType, SegmentedControlContext };

package/segmented-control/esm/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+var SegmentedControlContext = createContext({
+    onChange: function () { return null; },
+});
+
+export { SegmentedControlContext };

package/segmented-control/esm/index.css

@@ -0,0 +1,78 @@
+/* hash: 4177q */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-tertiary: #f3f4f5;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-s: 4px;
+    --border-radius-m: 8px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
+} :root {
+    --gap-3xs: 2px;
+} :root {
+} :root {
+    --size-xxs-height: 32px;
+    --size-xs-height: 40px;
+} .segmented-control__wrapper_15iod {
+    background-color: var(--color-light-specialbg-secondary-transparent);
+    display: flex;
+} .segmented-control__container_15iod {
+    position: relative;
+    display: flex;
+    flex: 1;
+} .segmented-control__inner_15iod {
+    display: flex;
+    flex: 1;
+    margin: 0 var(--gap-3xs);
+} .segmented-control__segment_15iod {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+} .segmented-control__selected_15iod {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500
+} .segmented-control__selected_15iod:before,
+    .segmented-control__selected_15iod + .segmented-control__segment_15iod:before {
+        opacity: 0;
+    } .segmented-control__xs_15iod {
+    height: var(--size-xs-height)
+} .segmented-control__xs_15iod .segmented-control__rounded_15iod,
+    .segmented-control__xs_15iod:has(.segmented-control__rounded_15iod) {
+        border-radius: var(--border-radius-xxl);
+    } .segmented-control__xs_15iod:has(.segmented-control__rectangular_15iod) {
+        border-radius: var(--border-radius-m)
+    } .segmented-control__xs_15iod:has(.segmented-control__rectangular_15iod) .segmented-control__selectedBox_15iod {
+            border-radius: calc(var(--border-radius-l) / 2);
+        } .segmented-control__xxs_15iod {
+    height: var(--size-xxs-height);
+} .segmented-control__rounded_15iod {
+    border-radius: var(--border-radius-xl);
+} .segmented-control__rectangular_15iod {
+    border-radius: calc(var(--border-radius-l) / 2)
+} .segmented-control__rectangular_15iod .segmented-control__selectedBox_15iod {
+        border-radius: var(--border-radius-s);
+    } .segmented-control__selectedBox_15iod {
+    border: 0.5px solid var(--color-light-border-tertiary);
+    box-sizing: border-box;
+    position: absolute;
+    top: var(--gap-3xs);
+    bottom: var(--gap-3xs);
+    left: var(--gap-3xs);
+    box-shadow: var(--shadow-s);
+    background-color: var(--color-light-bg-primary);
+    transition: width 0.2s ease, transform 0.2s ease;
+}

package/segmented-control/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./components/index";

package/segmented-control/esm/index.js

@@ -0,0 +1,8 @@
+export { SegmentedControl } from './Component.js';
+export { Segment } from './components/segment/Component.js';
+import 'react';
+import '@juggle/resize-observer';
+import 'classnames';
+import './context.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';

package/segmented-control/esm/typing.d.ts

@@ -0,0 +1,2 @@
+type IDType = string | number;
+export { IDType };

package/segmented-control/esm/typing.js

@@ -0,0 +1 @@
+