@ozen-ui/kit 0.2.2 → 0.3.1

package/CheckboxGroup/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/CheckboxGroup/index.js",
+	"module": "../__inner__/esm/components/CheckboxGroup/index.js",
+	"types": "../__inner__/esm/components/CheckboxGroup/index.d.ts"
+}

package/ProgressBar/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ProgressBar/index.js",
+	"module": "../__inner__/esm/components/ProgressBar/index.js",
+	"types": "../__inner__/esm/components/ProgressBar/index.d.ts"
+}

package/__inner__/cjs/components/Checkbox/Checkbox.js

@@ -6,8 +6,10 @@ require("./Checkbox.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
+var CheckboxGroupContext_1 = require("../CheckboxGroup/CheckboxGroupContext");
 var FormControlLabel_1 = require("../FormControlLabel");
 var components_1 = require("./components");
+var constants_1 = require("./constants");
 exports.checkboxSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
 exports.cnCheckbox = (0, classname_1.cn)('Checkbox');
 exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
@@ -15,7 +17,26 @@ exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Checkbox'
     });
-    var _a = props.align, align = _a === void 0 ? 'center' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'right' : _b, _c = props.size, size = _c === void 0 ? 'm' : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checked = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, other = tslib_1.__rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate"]);
+    var _a = props.align, align = _a === void 0 ? constants_1.CHECKBOX_DEFAULT_ALIGN : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? constants_1.CHECKBOX_DEFAULT_LABEL_PLACEMENT : _b, _c = props.size, sizeProp = _c === void 0 ? constants_1.CHECKBOX_DEFAULT_SIZE : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checkedProp = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, nameProp = props.name, onChangeProp = props.onChange, other = tslib_1.__rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate", "name", "onChange"]);
+    var checked = checkedProp;
+    var name = nameProp;
+    var size = sizeProp;
+    var checkboxGroup = (0, react_1.useContext)(CheckboxGroupContext_1.CheckboxGroupContext);
+    if (checkboxGroup) {
+        if (checked === undefined && checkboxGroup.value) {
+            checked = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value.includes(other === null || other === void 0 ? void 0 : other.value);
+        }
+        if (name === undefined && checkboxGroup.name) {
+            name = checkboxGroup.name;
+        }
+        if (inProps.size === undefined && checkboxGroup.size) {
+            size = checkboxGroup.size;
+        }
+    }
+    var onChange = function (event) {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+        checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange(event);
+    };
     return (react_1["default"].createElement(FormControlLabel_1.FormControlLabel, tslib_1.__assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
         react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)({
                 size: size,
@@ -23,7 +44,7 @@ exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
                 checked: checked,
                 indeterminate: indeterminate
             }) },
-            react_1["default"].createElement("input", tslib_1.__assign({ type: "checkbox", className: (0, exports.cnCheckbox)('Input'), disabled: disabled, checked: checked }, other, { ref: inputRef })),
+            react_1["default"].createElement("input", tslib_1.__assign({ type: "checkbox", className: (0, exports.cnCheckbox)('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
             react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)('Box') },
                 react_1["default"].createElement(components_1.CheckboxIcon, { indeterminate: indeterminate, className: (0, exports.cnCheckbox)('Icon') })))));
 });

package/__inner__/cjs/components/Checkbox/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const CHECKBOX_DEFAULT_ALIGN = "center";
+export declare const CHECKBOX_DEFAULT_LABEL_PLACEMENT = "right";
+export declare const CHECKBOX_DEFAULT_SIZE = "m";

package/__inner__/cjs/components/Checkbox/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.CHECKBOX_DEFAULT_SIZE = exports.CHECKBOX_DEFAULT_LABEL_PLACEMENT = exports.CHECKBOX_DEFAULT_ALIGN = void 0;
+exports.CHECKBOX_DEFAULT_ALIGN = 'center';
+exports.CHECKBOX_DEFAULT_LABEL_PLACEMENT = 'right';
+exports.CHECKBOX_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroup.css

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

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,26 @@
+import './CheckboxGroup.css';
+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 CheckboxGroupBaseProps = {
+    /** Имя группы радиокнопок (передается всем вложенным радиокнопкам) */
+    name: string;
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: (string | number)[];
+    /** Текущее значение */
+    value?: (string | number)[];
+    /** Заголовок группы */
+    title?: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupProps['direction'];
+    /** Событие изменения состояния */
+    onChange?(value: (string | number)[]): void;
+};
+export type CheckboxGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<CheckboxGroupBaseProps, As>;
+export declare const cnCheckboxGroup: import("@bem-react/classname").ClassNameFormatter;
+export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div">;

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,46 @@
+"use strict";
+exports.__esModule = true;
+exports.CheckboxGroup = exports.cnCheckboxGroup = void 0;
+var tslib_1 = require("tslib");
+require("./CheckboxGroup.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var FormGroup_1 = require("../FormGroup");
+var FormTitle_1 = require("../FormTitle");
+var CheckboxGroupContext_1 = require("./CheckboxGroupContext");
+var constants_1 = require("./constants");
+exports.cnCheckboxGroup = (0, classname_1.cn)('CheckboxGroup');
+exports.CheckboxGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'CheckboxGroup'
+    });
+    var _a = props.direction, direction = _a === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHECKBOX_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 = tslib_1.__rest(props, ["direction", "size", "as", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
+    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'CheckboxGroup',
+        state: 'value'
+    }), 2), valueState = _d[0], setValueState = _d[1];
+    var handleChange = function (event) {
+        var itemValue = event.currentTarget.value;
+        var value = (valueState === null || valueState === void 0 ? void 0 : valueState.includes(itemValue))
+            ? valueState.filter(function (item) { return item !== itemValue; })
+            : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((valueState || [])), false), [itemValue], false);
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnCheckboxGroup)({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
+        react_1["default"].createElement(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: {
+                value: valueState,
+                onChange: handleChange,
+                name: name,
+                size: size
+            } },
+            title && react_1["default"].createElement(FormTitle_1.FormTitle, { size: size }, title),
+            react_1["default"].createElement(FormGroup_1.FormGroup, { direction: direction, size: size }, children))));
+});
+exports.CheckboxGroup.displayName = 'CheckboxGroup';

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroupContext.d.ts

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

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroupContext.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.CheckboxGroupContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.CheckboxGroupContext = react_1["default"].createContext(undefined);

package/__inner__/cjs/components/CheckboxGroup/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const CHECKBOX_GROUP_DEFAULT_DIRECTION = "column";
+export declare const CHECKBOX_GROUP_DEFAULT_SIZE = "m";
+export declare const CHECKBOX_GROUP_DEFAULT_AS = "div";

package/__inner__/cjs/components/CheckboxGroup/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.CHECKBOX_GROUP_DEFAULT_AS = exports.CHECKBOX_GROUP_DEFAULT_SIZE = exports.CHECKBOX_GROUP_DEFAULT_DIRECTION = void 0;
+exports.CHECKBOX_GROUP_DEFAULT_DIRECTION = 'column';
+exports.CHECKBOX_GROUP_DEFAULT_SIZE = 'm';
+exports.CHECKBOX_GROUP_DEFAULT_AS = 'div';

package/__inner__/cjs/components/CheckboxGroup/index.d.ts

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

package/__inner__/cjs/components/CheckboxGroup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CheckboxGroup"), exports);

package/__inner__/cjs/components/Container/Container.css

@@ -44,7 +44,7 @@
 .Container_gutters_2xl {
     padding: 0 var(--space-2xl);
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Container_gutters_xs_xs {
     padding: 0 var(--space-xs);
   }
@@ -76,7 +76,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Container_gutters_s_xs {
     padding: 0 var(--space-xs);
   }
@@ -108,7 +108,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Container_gutters_m_xs {
     padding: 0 var(--space-xs);
   }
@@ -140,7 +140,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Container_gutters_l_xs {
     padding: 0 var(--space-xs);
   }

package/__inner__/cjs/components/Grid/Grid.css

@@ -80,7 +80,7 @@
 .Grid_gap_8xl {
     grid-gap: var(--space-8xl);
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;
   }
@@ -157,7 +157,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Grid_gap_s_0 {
     grid-gap: 0;
   }
@@ -234,7 +234,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Grid_gap_m_0 {
     grid-gap: 0;
   }
@@ -311,7 +311,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Grid_gap_l_0 {
     grid-gap: 0;
   }
@@ -522,7 +522,7 @@
 .GridItem_rowStart_6 {
     --grid-row-start: 6;
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .GridItem_col_xs_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -650,7 +650,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .GridItem_col_s_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -778,7 +778,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .GridItem_col_m_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -906,7 +906,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .GridItem_col_l_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;

package/__inner__/cjs/components/IconButton/IconButton.css

@@ -17,8 +17,10 @@
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
-  transition: background-color var(--transition-default),
-    box-shadow var(--transition-default), opacity var(--transition-default);
+  transition:
+    background-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
   -webkit-tap-highlight-color: transparent;
   position: relative;
 }
@@ -155,6 +157,13 @@
       box-shadow: 0 8px 32px rgb(0 0 0 / 8%);
     }
 
+  .IconButton_variant_contained.IconButton_rounded,
+  .IconButton_variant_outlined.IconButton_rounded,
+  .IconButton_variant_ghost.IconButton_rounded,
+  .IconButton_variant_floating.IconButton_rounded {
+    border-radius: 50%;
+  }
+
   .IconButton_variant_contained.IconButton_disabled,
   .IconButton_variant_contained.IconButton_loading,
   .IconButton_variant_outlined.IconButton_disabled,

package/__inner__/cjs/components/IconButton/IconButton.d.ts

@@ -32,6 +32,8 @@ type IconButtonBaseProps = {
     /** Дополнительные CSS-классы */
     className?: string;
     children?: never;
+    /** Если {true} делает компонент круглым  */
+    rounded?: boolean;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/IconButton/IconButton.js

@@ -32,7 +32,7 @@ exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
         props: inProps,
         name: 'IconButton'
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
@@ -55,7 +55,8 @@ exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
             color: color,
             disabled: disabled,
             loading: loading,
-            compressed: compressed
+            compressed: compressed,
+            rounded: rounded
         }, [className]), disabled: isInteractionPrevented, onClick: handleClick }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), resolvedChildren));
 });
 exports.IconButton.displayName = 'IconButton';

package/__inner__/cjs/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,40 @@
+.ProgressBar {
+  --progressbar-translate-x: translateX(0%);
+  background-color: var(--color-background-action-light);
+  position: relative;
+  block-size: 4px;
+  display: block;
+  overflow: hidden;
+}
+
+  .ProgressBar-ProgressLine {
+    background-color: var(--color-content-action);
+    border-radius: 3px;
+    inline-size: 100%;
+    display: block;
+    block-size: inherit;
+  }
+
+  .ProgressBar_filled .ProgressBar-ProgressLine {
+    border-radius: 0;
+  }
+
+  .ProgressBar_indefinite .ProgressBar-ProgressLine {
+    animation: progress-bar-animation 2s linear infinite;
+  }
+
+  .ProgressBar:not(.ProgressBar_indefinite) .ProgressBar-ProgressLine {
+    transition: transform var(--transition-slow);
+    transform: var(--progressbar-translate-x);
+    transform-origin: left;
+  }
+
+@keyframes progress-bar-animation {
+  0% {
+    transform: translateX(-125%);
+  }
+
+  100% {
+    transform: translateX(125%);
+  }
+}

package/__inner__/cjs/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+import './ProgressBar.css';
+import { type ElementType } from 'react';
+import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { PROGRESSBAR_DEFAULT_TAG } from './constants';
+export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
+export type ProgressBarBaseProps = {
+    /** Значение заполненной части 0-100 */
+    value?: number;
+};
+export type ProgressBarProps<As extends ElementType = typeof PROGRESSBAR_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ProgressBarBaseProps, As>;
+export declare const ProgressBar: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ProgressBarBaseProps, "span">;

package/__inner__/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,32 @@
+"use strict";
+exports.__esModule = true;
+exports.ProgressBar = exports.cnProgressBar = void 0;
+var tslib_1 = require("tslib");
+require("./ProgressBar.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var constants_1 = require("./constants");
+exports.cnProgressBar = (0, classname_1.cn)('ProgressBar');
+exports.ProgressBar = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var className = _a.className, _b = _a.as, Tag = _b === void 0 ? constants_1.PROGRESSBAR_DEFAULT_TAG : _b, value = _a.value, other = tslib_1.__rest(_a, ["className", "as", "value"]);
+    var isValueSet = value || value === 0;
+    var isFilled = value === 100;
+    var setProgressLineStyles = function () {
+        if (!isValueSet)
+            return undefined;
+        var translateX = Math.max(-100, Math.min(0, (value || 0) - 100));
+        return {
+            '--progressbar-translate-x': "translateX(".concat(translateX, "%)")
+        };
+    };
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, (isValueSet && {
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': value
+    }), { className: (0, exports.cnProgressBar)({ filled: isFilled, indefinite: !isValueSet }, [
+            className,
+        ]), role: "progressbar" }, other, { ref: ref }),
+        react_1["default"].createElement("span", { className: (0, exports.cnProgressBar)('ProgressLine'), style: setProgressLineStyles() })));
+});
+exports.ProgressBar.displayName = 'ProgressBar';

package/__inner__/cjs/components/ProgressBar/constants.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESSBAR_DEFAULT_TAG = "span";

package/__inner__/cjs/components/ProgressBar/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.PROGRESSBAR_DEFAULT_TAG = void 0;
+exports.PROGRESSBAR_DEFAULT_TAG = 'span';

package/__inner__/cjs/components/ProgressBar/index.d.ts

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

package/__inner__/cjs/components/ProgressBar/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ProgressBar"), exports);

package/__inner__/cjs/components/Skeleton/Skeleton.css

@@ -20,7 +20,7 @@
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
-@media (width >= 640px) {
+@media (min-width: 640px) {
 .Skeleton {
     animation: skeleton-wave 2.5s linear infinite;
 }

package/__inner__/cjs/components/Stack/Stack.css

@@ -93,7 +93,7 @@
 .Stack_justify_spaceAround {
       justify-content: space-around;
     }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Stack_direction_xs_row {
     flex-direction: row;
   }
@@ -146,7 +146,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Stack_direction_s_row {
     flex-direction: row;
   }
@@ -199,7 +199,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Stack_direction_m_row {
     flex-direction: row;
   }
@@ -252,7 +252,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Stack_direction_l_row {
     flex-direction: row;
   }

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -6,6 +6,7 @@ import type { BadgeProps } from '../Badge';
 import type { ButtonProps } from '../Button';
 import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
+import type { CheckboxGroupProps } from '../CheckboxGroup';
 import type { ChipProps } from '../Chip';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
@@ -64,6 +65,7 @@ export type Theme = {
         Button?: Partial<ButtonProps>;
         Card?: Partial<CardProps>;
         Checkbox?: Partial<CheckboxProps>;
+        CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;

package/__inner__/cjs/hooks/useBoolean/useBoolean.js

@@ -8,9 +8,9 @@ function useBoolean(
 defaultValue) {
     if (defaultValue === void 0) { defaultValue = false; }
     var _a = tslib_1.__read((0, react_1.useState)(defaultValue), 2), value = _a[0], setValue = _a[1];
-    var on = function () { return setValue(true); };
-    var off = function () { return setValue(false); };
-    var toggle = function () { return setValue(function (value) { return !value; }); };
+    var on = (0, react_1.useCallback)(function () { return setValue(true); }, []);
+    var off = (0, react_1.useCallback)(function () { return setValue(false); }, []);
+    var toggle = (0, react_1.useCallback)(function () { return setValue(function (value) { return !value; }); }, []);
     return [value, { on: on, off: off, toggle: toggle }];
 }
 exports.useBoolean = useBoolean;

package/__inner__/cjs/hooks/useCounter/useCounter.js

@@ -6,9 +6,9 @@ var react_1 = require("react");
 function useCounter(_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.initialValue, initialValue = _c === void 0 ? 0 : _c, _d = _b.step, step = _d === void 0 ? 1 : _d;
     var _e = tslib_1.__read((0, react_1.useState)(initialValue), 2), count = _e[0], setCount = _e[1];
-    var increment = function () { return setCount(function (x) { return x + step; }); };
-    var decrement = function () { return setCount(function (x) { return x - step; }); };
-    var reset = function () { return setCount(initialValue); };
+    var increment = (0, react_1.useCallback)(function () { return setCount(function (x) { return x + step; }); }, [step]);
+    var decrement = (0, react_1.useCallback)(function () { return setCount(function (x) { return x - step; }); }, [step]);
+    var reset = (0, react_1.useCallback)(function () { return setCount(initialValue); }, [initialValue]);
     return {
         count: count,
         increment: increment,

package/__inner__/cjs/hooks/useTimer/useTimer.js

@@ -27,16 +27,16 @@ function useTimer(_a) {
         });
     };
     (0, useInterval_1.useInterval)(timerCallback, state.isTimerRunning ? interval : null);
-    var resetTimer = function () {
+    var resetTimer = (0, react_1.useCallback)(function () {
         setState(function () { return ({
             isTimerRunning: false,
             count: startTime
         }); });
-    };
-    var pauseTimer = function () {
+    }, [startTime]);
+    var pauseTimer = (0, react_1.useCallback)(function () {
         setState(function (state) { return (tslib_1.__assign(tslib_1.__assign({}, state), { isTimerRunning: false })); });
-    };
-    var startTimer = function () {
+    }, []);
+    var startTimer = (0, react_1.useCallback)(function () {
         setState(function (_a) {
             var count = _a.count;
             return ({
@@ -46,7 +46,7 @@ function useTimer(_a) {
                 isTimerRunning: startTime !== endTime
             });
         });
-    };
+    }, [startTime, endTime]);
     (0, react_1.useEffect)(function () {
         savedOnTimerEnd.current = onTimerEnd;
     }, [onTimerEnd]);

package/__inner__/esm/components/Checkbox/Checkbox.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
 import './Checkbox.css';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroupContext';
 import { FormControlLabel, } from '../FormControlLabel';
 import { CheckboxIcon } from './components';
+import { CHECKBOX_DEFAULT_ALIGN, CHECKBOX_DEFAULT_LABEL_PLACEMENT, CHECKBOX_DEFAULT_SIZE, } from './constants';
 export var checkboxSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
 export var cnCheckbox = cn('Checkbox');
 export var Checkbox = forwardRef(function (inProps, ref) {
@@ -12,7 +14,26 @@ export var Checkbox = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Checkbox'
     });
-    var _a = props.align, align = _a === void 0 ? 'center' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'right' : _b, _c = props.size, size = _c === void 0 ? 'm' : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checked = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, other = __rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate"]);
+    var _a = props.align, align = _a === void 0 ? CHECKBOX_DEFAULT_ALIGN : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? CHECKBOX_DEFAULT_LABEL_PLACEMENT : _b, _c = props.size, sizeProp = _c === void 0 ? CHECKBOX_DEFAULT_SIZE : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checkedProp = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, nameProp = props.name, onChangeProp = props.onChange, other = __rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate", "name", "onChange"]);
+    var checked = checkedProp;
+    var name = nameProp;
+    var size = sizeProp;
+    var checkboxGroup = useContext(CheckboxGroupContext);
+    if (checkboxGroup) {
+        if (checked === undefined && checkboxGroup.value) {
+            checked = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value.includes(other === null || other === void 0 ? void 0 : other.value);
+        }
+        if (name === undefined && checkboxGroup.name) {
+            name = checkboxGroup.name;
+        }
+        if (inProps.size === undefined && checkboxGroup.size) {
+            size = checkboxGroup.size;
+        }
+    }
+    var onChange = function (event) {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+        checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.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: cnCheckbox({
                 size: size,
@@ -20,7 +41,7 @@ export var Checkbox = forwardRef(function (inProps, ref) {
                 checked: checked,
                 indeterminate: indeterminate
             }) },
-            React.createElement("input", __assign({ type: "checkbox", className: cnCheckbox('Input'), disabled: disabled, checked: checked }, other, { ref: inputRef })),
+            React.createElement("input", __assign({ type: "checkbox", className: cnCheckbox('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
             React.createElement("span", { className: cnCheckbox('Box') },
                 React.createElement(CheckboxIcon, { indeterminate: indeterminate, className: cnCheckbox('Icon') })))));
 });

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

@@ -0,0 +1,3 @@
+export declare const CHECKBOX_DEFAULT_ALIGN = "center";
+export declare const CHECKBOX_DEFAULT_LABEL_PLACEMENT = "right";
+export declare const CHECKBOX_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,3 @@
+export var CHECKBOX_DEFAULT_ALIGN = 'center';
+export var CHECKBOX_DEFAULT_LABEL_PLACEMENT = 'right';
+export var CHECKBOX_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/CheckboxGroup/CheckboxGroup.css

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

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

@@ -0,0 +1,26 @@
+import './CheckboxGroup.css';
+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 CheckboxGroupBaseProps = {
+    /** Имя группы радиокнопок (передается всем вложенным радиокнопкам) */
+    name: string;
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: (string | number)[];
+    /** Текущее значение */
+    value?: (string | number)[];
+    /** Заголовок группы */
+    title?: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupProps['direction'];
+    /** Событие изменения состояния */
+    onChange?(value: (string | number)[]): void;
+};
+export type CheckboxGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<CheckboxGroupBaseProps, As>;
+export declare const cnCheckboxGroup: import("@bem-react/classname").ClassNameFormatter;
+export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div">;

package/__inner__/esm/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,43 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './CheckboxGroup.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 { CheckboxGroupContext } from './CheckboxGroupContext';
+import { CHECKBOX_GROUP_DEFAULT_DIRECTION, CHECKBOX_GROUP_DEFAULT_SIZE, CHECKBOX_GROUP_DEFAULT_AS, } from './constants';
+export var cnCheckboxGroup = cn('CheckboxGroup');
+export var CheckboxGroup = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'CheckboxGroup'
+    });
+    var _a = props.direction, direction = _a === void 0 ? CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHECKBOX_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: 'CheckboxGroup',
+        state: 'value'
+    }), 2), valueState = _d[0], setValueState = _d[1];
+    var handleChange = function (event) {
+        var itemValue = event.currentTarget.value;
+        var value = (valueState === null || valueState === void 0 ? void 0 : valueState.includes(itemValue))
+            ? valueState.filter(function (item) { return item !== itemValue; })
+            : __spreadArray(__spreadArray([], __read((valueState || [])), false), [itemValue], false);
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    return (React.createElement(Tag, __assign({ className: cnCheckboxGroup({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
+        React.createElement(CheckboxGroupContext.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))));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';

package/__inner__/esm/components/CheckboxGroup/CheckboxGroupContext.d.ts

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

package/__inner__/esm/components/CheckboxGroup/CheckboxGroupContext.js

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

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

@@ -0,0 +1,3 @@
+export declare const CHECKBOX_GROUP_DEFAULT_DIRECTION = "column";
+export declare const CHECKBOX_GROUP_DEFAULT_SIZE = "m";
+export declare const CHECKBOX_GROUP_DEFAULT_AS = "div";

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

@@ -0,0 +1,3 @@
+export var CHECKBOX_GROUP_DEFAULT_DIRECTION = 'column';
+export var CHECKBOX_GROUP_DEFAULT_SIZE = 'm';
+export var CHECKBOX_GROUP_DEFAULT_AS = 'div';

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

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

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

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

package/__inner__/esm/components/Container/Container.css

@@ -44,7 +44,7 @@
 .Container_gutters_2xl {
     padding: 0 var(--space-2xl);
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Container_gutters_xs_xs {
     padding: 0 var(--space-xs);
   }
@@ -76,7 +76,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Container_gutters_s_xs {
     padding: 0 var(--space-xs);
   }
@@ -108,7 +108,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Container_gutters_m_xs {
     padding: 0 var(--space-xs);
   }
@@ -140,7 +140,7 @@
     max-inline-size: 100%;
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Container_gutters_l_xs {
     padding: 0 var(--space-xs);
   }

package/__inner__/esm/components/Grid/Grid.css

@@ -80,7 +80,7 @@
 .Grid_gap_8xl {
     grid-gap: var(--space-8xl);
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;
   }
@@ -157,7 +157,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Grid_gap_s_0 {
     grid-gap: 0;
   }
@@ -234,7 +234,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Grid_gap_m_0 {
     grid-gap: 0;
   }
@@ -311,7 +311,7 @@
     grid-template-columns: repeat(12, 1fr);
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Grid_gap_l_0 {
     grid-gap: 0;
   }
@@ -522,7 +522,7 @@
 .GridItem_rowStart_6 {
     --grid-row-start: 6;
   }
-@media (width >= 0) {
+@media (min-width: 0) {
       .GridItem_col_xs_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -650,7 +650,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .GridItem_col_s_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -778,7 +778,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .GridItem_col_m_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;
@@ -906,7 +906,7 @@
     --grid-row-start: 6;
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .GridItem_col_l_1 {
     --grid-col-start: auto;
     --grid-col-end: span 1;

package/__inner__/esm/components/IconButton/IconButton.css

@@ -17,8 +17,10 @@
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
-  transition: background-color var(--transition-default),
-    box-shadow var(--transition-default), opacity var(--transition-default);
+  transition:
+    background-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
   -webkit-tap-highlight-color: transparent;
   position: relative;
 }
@@ -155,6 +157,13 @@
       box-shadow: 0 8px 32px rgb(0 0 0 / 8%);
     }
 
+  .IconButton_variant_contained.IconButton_rounded,
+  .IconButton_variant_outlined.IconButton_rounded,
+  .IconButton_variant_ghost.IconButton_rounded,
+  .IconButton_variant_floating.IconButton_rounded {
+    border-radius: 50%;
+  }
+
   .IconButton_variant_contained.IconButton_disabled,
   .IconButton_variant_contained.IconButton_loading,
   .IconButton_variant_outlined.IconButton_disabled,

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

@@ -32,6 +32,8 @@ type IconButtonBaseProps = {
     /** Дополнительные CSS-классы */
     className?: string;
     children?: never;
+    /** Если {true} делает компонент круглым  */
+    rounded?: boolean;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/IconButton/IconButton.js

@@ -29,7 +29,7 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'IconButton'
     });
-    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick"]);
+    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var iconSize = getIconSizeToFormElement(size);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
@@ -52,7 +52,8 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
             color: color,
             disabled: disabled,
             loading: loading,
-            compressed: compressed
+            compressed: compressed,
+            rounded: rounded
         }, [className]), disabled: isInteractionPrevented, onClick: handleClick }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), resolvedChildren));
 });
 IconButton.displayName = 'IconButton';

package/__inner__/esm/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,40 @@
+.ProgressBar {
+  --progressbar-translate-x: translateX(0%);
+  background-color: var(--color-background-action-light);
+  position: relative;
+  block-size: 4px;
+  display: block;
+  overflow: hidden;
+}
+
+  .ProgressBar-ProgressLine {
+    background-color: var(--color-content-action);
+    border-radius: 3px;
+    inline-size: 100%;
+    display: block;
+    block-size: inherit;
+  }
+
+  .ProgressBar_filled .ProgressBar-ProgressLine {
+    border-radius: 0;
+  }
+
+  .ProgressBar_indefinite .ProgressBar-ProgressLine {
+    animation: progress-bar-animation 2s linear infinite;
+  }
+
+  .ProgressBar:not(.ProgressBar_indefinite) .ProgressBar-ProgressLine {
+    transition: transform var(--transition-slow);
+    transform: var(--progressbar-translate-x);
+    transform-origin: left;
+  }
+
+@keyframes progress-bar-animation {
+  0% {
+    transform: translateX(-125%);
+  }
+
+  100% {
+    transform: translateX(125%);
+  }
+}

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

@@ -0,0 +1,11 @@
+import './ProgressBar.css';
+import { type ElementType } from 'react';
+import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { PROGRESSBAR_DEFAULT_TAG } from './constants';
+export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
+export type ProgressBarBaseProps = {
+    /** Значение заполненной части 0-100 */
+    value?: number;
+};
+export type ProgressBarProps<As extends ElementType = typeof PROGRESSBAR_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ProgressBarBaseProps, As>;
+export declare const ProgressBar: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ProgressBarBaseProps, "span">;

package/__inner__/esm/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,29 @@
+import { __assign, __rest } from "tslib";
+import './ProgressBar.css';
+import React from 'react';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { PROGRESSBAR_DEFAULT_TAG } from './constants';
+export var cnProgressBar = cn('ProgressBar');
+export var ProgressBar = polymorphicComponentWithRef(function (_a, ref) {
+    var className = _a.className, _b = _a.as, Tag = _b === void 0 ? PROGRESSBAR_DEFAULT_TAG : _b, value = _a.value, other = __rest(_a, ["className", "as", "value"]);
+    var isValueSet = value || value === 0;
+    var isFilled = value === 100;
+    var setProgressLineStyles = function () {
+        if (!isValueSet)
+            return undefined;
+        var translateX = Math.max(-100, Math.min(0, (value || 0) - 100));
+        return {
+            '--progressbar-translate-x': "translateX(".concat(translateX, "%)")
+        };
+    };
+    return (React.createElement(Tag, __assign({}, (isValueSet && {
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': value
+    }), { className: cnProgressBar({ filled: isFilled, indefinite: !isValueSet }, [
+            className,
+        ]), role: "progressbar" }, other, { ref: ref }),
+        React.createElement("span", { className: cnProgressBar('ProgressLine'), style: setProgressLineStyles() })));
+});
+ProgressBar.displayName = 'ProgressBar';

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

@@ -0,0 +1 @@
+export declare const PROGRESSBAR_DEFAULT_TAG = "span";

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

@@ -0,0 +1 @@
+export var PROGRESSBAR_DEFAULT_TAG = 'span';

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

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

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

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

package/__inner__/esm/components/Skeleton/Skeleton.css

@@ -20,7 +20,7 @@
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
-@media (width >= 640px) {
+@media (min-width: 640px) {
 .Skeleton {
     animation: skeleton-wave 2.5s linear infinite;
 }

package/__inner__/esm/components/Stack/Stack.css

@@ -93,7 +93,7 @@
 .Stack_justify_spaceAround {
       justify-content: space-around;
     }
-@media (width >= 0) {
+@media (min-width: 0) {
       .Stack_direction_xs_row {
     flex-direction: row;
   }
@@ -146,7 +146,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >= 640px) {
+@media (min-width: 640px) {
       .Stack_direction_s_row {
     flex-direction: row;
   }
@@ -199,7 +199,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >=  1024px) {
+@media (min-width: 1024px) {
       .Stack_direction_m_row {
     flex-direction: row;
   }
@@ -252,7 +252,7 @@
     gap: var(--space-8xl);
   }
   }
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
       .Stack_direction_l_row {
     flex-direction: row;
   }

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

@@ -6,6 +6,7 @@ import type { BadgeProps } from '../Badge';
 import type { ButtonProps } from '../Button';
 import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
+import type { CheckboxGroupProps } from '../CheckboxGroup';
 import type { ChipProps } from '../Chip';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
@@ -64,6 +65,7 @@ export type Theme = {
         Button?: Partial<ButtonProps>;
         Card?: Partial<CardProps>;
         Checkbox?: Partial<CheckboxProps>;
+        CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;

package/__inner__/esm/hooks/useBoolean/useBoolean.js

@@ -1,12 +1,12 @@
 import { __read } from "tslib";
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 export function useBoolean(
 /** Значение по умолчанию */
 defaultValue) {
     if (defaultValue === void 0) { defaultValue = false; }
     var _a = __read(useState(defaultValue), 2), value = _a[0], setValue = _a[1];
-    var on = function () { return setValue(true); };
-    var off = function () { return setValue(false); };
-    var toggle = function () { return setValue(function (value) { return !value; }); };
+    var on = useCallback(function () { return setValue(true); }, []);
+    var off = useCallback(function () { return setValue(false); }, []);
+    var toggle = useCallback(function () { return setValue(function (value) { return !value; }); }, []);
     return [value, { on: on, off: off, toggle: toggle }];
 }

package/__inner__/esm/hooks/useCounter/useCounter.js

@@ -1,11 +1,11 @@
 import { __read } from "tslib";
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 export function useCounter(_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.initialValue, initialValue = _c === void 0 ? 0 : _c, _d = _b.step, step = _d === void 0 ? 1 : _d;
     var _e = __read(useState(initialValue), 2), count = _e[0], setCount = _e[1];
-    var increment = function () { return setCount(function (x) { return x + step; }); };
-    var decrement = function () { return setCount(function (x) { return x - step; }); };
-    var reset = function () { return setCount(initialValue); };
+    var increment = useCallback(function () { return setCount(function (x) { return x + step; }); }, [step]);
+    var decrement = useCallback(function () { return setCount(function (x) { return x - step; }); }, [step]);
+    var reset = useCallback(function () { return setCount(initialValue); }, [initialValue]);
     return {
         count: count,
         increment: increment,

package/__inner__/esm/hooks/useTimer/useTimer.js

@@ -1,5 +1,5 @@
 import { __assign, __read } from "tslib";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useInterval } from '../useInterval';
 import { USE_TIMER_ERROR_EQ_TIME, USE_TIMER_ERROR_MULTIPLICITY_INTERVAL_TO_END_TIME, USE_TIMER_ERROR_MULTIPLICITY_INTERVAL_TO_START_TIME, } from './constants';
 export function useTimer(_a) {
@@ -24,16 +24,16 @@ export function useTimer(_a) {
         });
     };
     useInterval(timerCallback, state.isTimerRunning ? interval : null);
-    var resetTimer = function () {
+    var resetTimer = useCallback(function () {
         setState(function () { return ({
             isTimerRunning: false,
             count: startTime
         }); });
-    };
-    var pauseTimer = function () {
+    }, [startTime]);
+    var pauseTimer = useCallback(function () {
         setState(function (state) { return (__assign(__assign({}, state), { isTimerRunning: false })); });
-    };
-    var startTimer = function () {
+    }, []);
+    var startTimer = useCallback(function () {
         setState(function (_a) {
             var count = _a.count;
             return ({
@@ -43,7 +43,7 @@ export function useTimer(_a) {
                 isTimerRunning: startTime !== endTime
             });
         });
-    };
+    }, [startTime, endTime]);
     useEffect(function () {
         savedOnTimerEnd.current = onTimerEnd;
     }, [onTimerEnd]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "React component library",
   "files": [
     "*"

package/useListState/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useListState/index.js",
+	"module": "../__inner__/esm/hooks/useListState/index.js",
+	"types": "../__inner__/esm/hooks/useListState/index.d.ts"
+}