@ozen-ui/kit 0.21.0 → 0.23.0

package/__inner__/cjs/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/cjs/components/List/components/ListItem/ListItem.css

@@ -1,6 +1,5 @@
 .ListItem {
   display: flex;
-  align-items: center;
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
@@ -10,6 +9,14 @@
   margin: 0 var(--list-gutter);
 }
 
+  .ListItem_align_start {
+      align-items: flex-start;
+    }
+
+  .ListItem_align_center {
+      align-items: center;
+    }
+
   .ListItem_disableGutters {
     padding: 0;
   }

package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts

@@ -3,11 +3,15 @@ import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
 export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const listItemAlignVariant: readonly ["start", "center"];
+export type ListItemAlignVariant = (typeof listItemAlignVariant)[number];
 export type ListItemBaseProps = {
     /** Содержимое компонента */
     children: ReactNode;
     /** Если {true} убирает отступы вокруг корневого элемента */
     disableGutters?: boolean;
+    /** Расположение контента по вертикали (свойство flex-контейнера align-items) */
+    align?: ListItemAlignVariant;
 };
 export type ListItemProps<As extends ElementType = typeof LIST_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemBaseProps, As>;
 export declare const ListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemBaseProps, "li">;

package/__inner__/cjs/components/List/components/ListItem/ListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = exports.cnListItem = void 0;
+exports.ListItem = exports.listItemAlignVariant = exports.cnListItem = void 0;
 var tslib_1 = require("tslib");
 require("./ListItem.css");
 var react_1 = tslib_1.__importDefault(require("react"));
@@ -9,9 +9,10 @@ var classname_1 = require("../../../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
 var constants_1 = require("../../constants");
 exports.cnListItem = (0, classname_1.cn)('ListItem');
+exports.listItemAlignVariant = ['start', 'center'];
 exports.ListItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItem' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_DEFAULT_TAG : _a, children = props.children, className = props.className, disableGutters = props.disableGutters, other = tslib_1.__rest(props, ["as", "children", "className", "disableGutters"]);
-    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItem)({ disableGutters: disableGutters }, [className]) }, other, { ref: ref }), children));
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_DEFAULT_TAG : _a, _b = props.align, align = _b === void 0 ? constants_1.LIST_ITEM_DEFAULT_ALIGN : _b, children = props.children, className = props.className, disableGutters = props.disableGutters, other = tslib_1.__rest(props, ["as", "align", "children", "className", "disableGutters"]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItem)({ align: align, disableGutters: disableGutters }, [className]) }, other, { ref: ref }), children));
 });
 exports.ListItem.displayName = 'ListItem';

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.css

@@ -9,7 +9,6 @@
   transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
-  align-items: center;
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
@@ -36,6 +35,14 @@
     box-shadow: none;
   }
 
+  .ListItemButton_align_start {
+      align-items: flex-start;
+    }
+
+  .ListItemButton_align_center {
+      align-items: center;
+    }
+
   .ListItemButton_disabled {
     pointer-events: none;
     color: var(--list-item-bg-color-disabled);

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -3,6 +3,8 @@ import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const listItemButtonAlignVariant: readonly ["start", "center"];
+export type ListItemButtonAlignVariant = (typeof listItemButtonAlignVariant)[number];
 export type ListItemButtonBaseProps = {
     /** Содержимое компонента */
     children?: ReactNode;
@@ -10,6 +12,8 @@ export type ListItemButtonBaseProps = {
     disabled?: boolean;
     /** Если {true} отображает элемент списка как выбранный */
     selected?: boolean;
+    /** Расположение контента по вертикали (свойство flex-контейнера align-items) */
+    align?: ListItemButtonAlignVariant;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItemButton = exports.cnListItemButton = void 0;
+exports.ListItemButton = exports.listItemButtonAlignVariant = exports.cnListItemButton = void 0;
 var tslib_1 = require("tslib");
 require("./ListItemButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -10,9 +10,10 @@ var isKey_1 = require("../../../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
 var constants_1 = require("../../constants");
 exports.cnListItemButton = (0, classname_1.cn)('ListItemButton');
+exports.listItemButtonAlignVariant = ['start', 'center'];
 exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, _b = props.align, align = _b === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_ALIGN : _b, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = tslib_1.__rest(props, ["as", "align", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = (0, react_1.useMemo)(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -43,6 +44,7 @@ exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentW
         return commonAdditionalProps;
     }, [Tag, handleKeyDown]);
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItemButton)({
+            align: align,
             disabled: disabled,
             selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));

package/__inner__/cjs/components/List/components/ListItemText/ListItemText.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   flex-grow: 1;
   margin-inline-end: var(--list-item-children-margin-right);
+  min-inline-size: 0;
 }
 
   .ListItemText:last-child {

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

@@ -1,4 +1,6 @@
 export declare const LIST_DEFAULT_SIZE = "m";
 export declare const LIST_DEFAULT_TAG = "ul";
 export declare const LIST_ITEM_DEFAULT_TAG = "li";
+export declare const LIST_ITEM_DEFAULT_ALIGN = "center";
 export declare const LIST_ITEM_BUTTON_DEFAULT_TAG = "div";
+export declare const LIST_ITEM_BUTTON_DEFAULT_ALIGN = "center";

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_SIZE = void 0;
+exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_ALIGN = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_SIZE = void 0;
 exports.LIST_DEFAULT_SIZE = 'm';
 exports.LIST_DEFAULT_TAG = 'ul';
 exports.LIST_ITEM_DEFAULT_TAG = 'li';
+exports.LIST_ITEM_DEFAULT_ALIGN = 'center';
 exports.LIST_ITEM_BUTTON_DEFAULT_TAG = 'div';
+exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = 'center';

package/__inner__/cjs/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/cjs/components/ThemeProvider/themes/helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transition = exports.typography = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
+exports.transition = exports.typography = exports.control = exports.spacing = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
 exports.color = [
     '--color-content-primary',
     '--color-content-secondary',
@@ -192,6 +192,35 @@ exports.space = [
     '--space-s',
     '--space-xs',
 ];
+exports.spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+exports.control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 exports.typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_bBusinessDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDark.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

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

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/cjs/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/__inner__/esm/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/esm/components/List/components/ListItem/ListItem.css

@@ -1,6 +1,5 @@
 .ListItem {
   display: flex;
-  align-items: center;
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
@@ -10,6 +9,14 @@
   margin: 0 var(--list-gutter);
 }
 
+  .ListItem_align_start {
+      align-items: flex-start;
+    }
+
+  .ListItem_align_center {
+      align-items: center;
+    }
+
   .ListItem_disableGutters {
     padding: 0;
   }

package/__inner__/esm/components/List/components/ListItem/ListItem.d.ts

@@ -3,11 +3,15 @@ import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
 export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const listItemAlignVariant: readonly ["start", "center"];
+export type ListItemAlignVariant = (typeof listItemAlignVariant)[number];
 export type ListItemBaseProps = {
     /** Содержимое компонента */
     children: ReactNode;
     /** Если {true} убирает отступы вокруг корневого элемента */
     disableGutters?: boolean;
+    /** Расположение контента по вертикали (свойство flex-контейнера align-items) */
+    align?: ListItemAlignVariant;
 };
 export type ListItemProps<As extends ElementType = typeof LIST_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemBaseProps, As>;
 export declare const ListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemBaseProps, "li">;

package/__inner__/esm/components/List/components/ListItem/ListItem.js

@@ -4,11 +4,12 @@ import React from 'react';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
-import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
+import { LIST_ITEM_DEFAULT_ALIGN, LIST_ITEM_DEFAULT_TAG, } from '../../constants';
 export var cnListItem = cn('ListItem');
+export var listItemAlignVariant = ['start', 'center'];
 export var ListItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'ListItem' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_DEFAULT_TAG : _a, children = props.children, className = props.className, disableGutters = props.disableGutters, other = __rest(props, ["as", "children", "className", "disableGutters"]);
-    return (React.createElement(Tag, __assign({ className: cnListItem({ disableGutters: disableGutters }, [className]) }, other, { ref: ref }), children));
+    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_DEFAULT_TAG : _a, _b = props.align, align = _b === void 0 ? LIST_ITEM_DEFAULT_ALIGN : _b, children = props.children, className = props.className, disableGutters = props.disableGutters, other = __rest(props, ["as", "align", "children", "className", "disableGutters"]);
+    return (React.createElement(Tag, __assign({ className: cnListItem({ align: align, disableGutters: disableGutters }, [className]) }, other, { ref: ref }), children));
 });
 ListItem.displayName = 'ListItem';

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.css

@@ -9,7 +9,6 @@
   transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
-  align-items: center;
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
@@ -36,6 +35,14 @@
     box-shadow: none;
   }
 
+  .ListItemButton_align_start {
+      align-items: flex-start;
+    }
+
+  .ListItemButton_align_center {
+      align-items: center;
+    }
+
   .ListItemButton_disabled {
     pointer-events: none;
     color: var(--list-item-bg-color-disabled);

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -3,6 +3,8 @@ import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const listItemButtonAlignVariant: readonly ["start", "center"];
+export type ListItemButtonAlignVariant = (typeof listItemButtonAlignVariant)[number];
 export type ListItemButtonBaseProps = {
     /** Содержимое компонента */
     children?: ReactNode;
@@ -10,6 +12,8 @@ export type ListItemButtonBaseProps = {
     disabled?: boolean;
     /** Если {true} отображает элемент списка как выбранный */
     selected?: boolean;
+    /** Расположение контента по вертикали (свойство flex-контейнера align-items) */
+    align?: ListItemButtonAlignVariant;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.js

@@ -5,11 +5,12 @@ import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { isKey } from '../../../../utils/isKey';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
-import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
+import { LIST_ITEM_BUTTON_DEFAULT_ALIGN, LIST_ITEM_BUTTON_DEFAULT_TAG, } from '../../constants';
 export var cnListItemButton = cn('ListItemButton');
+export var listItemButtonAlignVariant = ['start', 'center'];
 export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, _b = props.align, align = _b === void 0 ? LIST_ITEM_BUTTON_DEFAULT_ALIGN : _b, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = __rest(props, ["as", "align", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = useMemo(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -40,6 +41,7 @@ export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref)
         return commonAdditionalProps;
     }, [Tag, handleKeyDown]);
     return (React.createElement(Tag, __assign({ className: cnListItemButton({
+            align: align,
             disabled: disabled,
             selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));

package/__inner__/esm/components/List/components/ListItemText/ListItemText.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   flex-grow: 1;
   margin-inline-end: var(--list-item-children-margin-right);
+  min-inline-size: 0;
 }
 
   .ListItemText:last-child {

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

@@ -1,4 +1,6 @@
 export declare const LIST_DEFAULT_SIZE = "m";
 export declare const LIST_DEFAULT_TAG = "ul";
 export declare const LIST_ITEM_DEFAULT_TAG = "li";
+export declare const LIST_ITEM_DEFAULT_ALIGN = "center";
 export declare const LIST_ITEM_BUTTON_DEFAULT_TAG = "div";
+export declare const LIST_ITEM_BUTTON_DEFAULT_ALIGN = "center";

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

@@ -1,4 +1,6 @@
 export var LIST_DEFAULT_SIZE = 'm';
 export var LIST_DEFAULT_TAG = 'ul';
 export var LIST_ITEM_DEFAULT_TAG = 'li';
+export var LIST_ITEM_DEFAULT_ALIGN = 'center';
 export var LIST_ITEM_BUTTON_DEFAULT_TAG = 'div';
+export var LIST_ITEM_BUTTON_DEFAULT_ALIGN = 'center';

package/__inner__/esm/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/esm/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/esm/components/ThemeProvider/themes/helper.js

@@ -189,6 +189,35 @@ export var space = [
     '--space-s',
     '--space-xs',
 ];
+export var spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+export var control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 export var typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

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

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/esm/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/package.json

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