@ozen-ui/kit 0.22.0 → 0.23.0

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__/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/package.json

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