@ozen-ui/kit 0.78.0 → 0.79.0

package/__inner__/esm/components/ListCard/ListCardContext.d.ts

@@ -1,11 +1,13 @@
-import type { ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemSizeVariant, ListCardItemVariant } from '../ListCardItem';
+import type { ListCardItemAlign, ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemPadding, ListCardItemSizeVariant, ListCardItemVariant } from '../ListCardItem';
 export type ListCardContextValue = {
     size: ListCardItemSizeVariant;
     variant: ListCardItemVariant;
     contentTrailingRatio: number;
+    align: ListCardItemAlign;
     backgroundColorScheme: ListCardItemBackgroundColorScheme;
     borderColorScheme: ListCardItemBorderColorScheme | undefined;
     interactive: boolean;
+    padding: ListCardItemPadding | undefined;
 };
 export declare const ListCardContext: import("react").Context<ListCardContextValue | undefined>;
 export declare const useListCardContext: () => ListCardContextValue | undefined;

package/__inner__/esm/components/ListCard/PageListCard/PageListCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { useThemeProps } from '../../../hooks/useThemeProps';
 import { cn } from '../../../utils/classname';
 import { polymorphicComponentWithRef } from '../../../utils/polymorphicComponentWithRef';
-import { LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_DEFAULT_INTERACTIVE, LIST_CARD_DEFAULT_SIZE, LIST_CARD_DEFAULT_TAG, } from '../constants';
+import { LIST_CARD_DEFAULT_ALIGN, LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_DEFAULT_INTERACTIVE, LIST_CARD_DEFAULT_SIZE, LIST_CARD_DEFAULT_TAG, } from '../constants';
 import { ListCardContext } from '../ListCardContext';
 export var cnPageListCard = cn('PageListCard');
 export var PageListCard = polymorphicComponentWithRef(function (inProps, ref) {
@@ -12,7 +12,7 @@ export var PageListCard = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'PageListCard',
     });
-    var _a = props.as, Tag = _a === void 0 ? LIST_CARD_DEFAULT_TAG : _a, children = props.children, borderColorScheme = props.borderColorScheme, _b = props.size, size = _b === void 0 ? LIST_CARD_DEFAULT_SIZE : _b, _c = props.contentTrailingRatio, contentTrailingRatio = _c === void 0 ? LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _c, _d = props.interactive, interactive = _d === void 0 ? LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.backgroundColorScheme, backgroundColorScheme = _e === void 0 ? LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, className = props.className, other = __rest(props, ["as", "children", "borderColorScheme", "size", "contentTrailingRatio", "interactive", "backgroundColorScheme", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_CARD_DEFAULT_TAG : _a, children = props.children, borderColorScheme = props.borderColorScheme, _b = props.size, size = _b === void 0 ? LIST_CARD_DEFAULT_SIZE : _b, _c = props.contentTrailingRatio, contentTrailingRatio = _c === void 0 ? LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _c, _d = props.interactive, interactive = _d === void 0 ? LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.backgroundColorScheme, backgroundColorScheme = _e === void 0 ? LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, _f = props.align, align = _f === void 0 ? LIST_CARD_DEFAULT_ALIGN : _f, className = props.className, padding = props.padding, other = __rest(props, ["as", "children", "borderColorScheme", "size", "contentTrailingRatio", "interactive", "backgroundColorScheme", "align", "className", "padding"]);
     return (React.createElement(ListCardContext.Provider, { value: {
             variant: 'onPage',
             size: size,
@@ -20,6 +20,8 @@ export var PageListCard = polymorphicComponentWithRef(function (inProps, ref) {
             backgroundColorScheme: backgroundColorScheme,
             interactive: interactive,
             contentTrailingRatio: contentTrailingRatio,
+            align: align,
+            padding: padding,
         } },
         React.createElement(Tag, __assign({}, other, { ref: ref, className: cnPageListCard({
                 size: size,

package/__inner__/esm/components/ListCard/PageListCard/types.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
+import type { ListCardItemAlign } from '../../ListCardItem';
 import type { ListCardBaseProps } from '../types';
 import type { PAGE_LIST_CARD_DEFAULT_TAG } from './constants';
 export type PageListCardBaseProps = ListCardBaseProps & {
     /** Контент */
     children: ReactNode;
+    align?: ListCardItemAlign;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

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

@@ -7,3 +7,4 @@ export declare const LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME: {
 export declare const LIST_CARD_DEFAULT_SIZE = "m";
 export declare const LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
 export declare const LIST_CARD_DEFAULT_INTERACTIVE = true;
+export declare const LIST_CARD_DEFAULT_ALIGN = "start";

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

@@ -1,6 +1,8 @@
+import { LIST_CARD_ITEM_DEFAULT_ALIGN } from '../ListCardItem';
 import { LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_ITEM_DEFAULT_INTERACTIVE, LIST_CARD_ITEM_DEFAULT_SIZE, } from '../ListCardItem/constants';
 export var LIST_CARD_DEFAULT_TAG = 'div';
 export var LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME;
 export var LIST_CARD_DEFAULT_SIZE = LIST_CARD_ITEM_DEFAULT_SIZE;
 export var LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO;
 export var LIST_CARD_DEFAULT_INTERACTIVE = LIST_CARD_ITEM_DEFAULT_INTERACTIVE;
+export var LIST_CARD_DEFAULT_ALIGN = LIST_CARD_ITEM_DEFAULT_ALIGN;

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

@@ -1,4 +1,4 @@
-import type { ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemSizeVariant } from '../ListCardItem';
+import type { ListCardItemAlign, ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemPadding, ListCardItemSizeVariant } from '../ListCardItem';
 export type ListCardBaseProps = {
     /** Размер */
     size?: ListCardItemSizeVariant;
@@ -10,4 +10,8 @@ export type ListCardBaseProps = {
     borderColorScheme?: ListCardItemBorderColorScheme;
     /** Если `true`, то компонент интерактивен */
     interactive?: boolean;
+    /** Выравнивание */
+    align?: ListCardItemAlign;
+    /** Отступ */
+    padding?: ListCardItemPadding;
 };

package/__inner__/esm/components/ListCardItem/ListCardItem.css

@@ -6,7 +6,7 @@
   background-color: var(--list-card-item-background-color);
   transition: background-color var(--transition-default), border-color var(--transition-default);
   padding-inline: var(--list-card-item-inline-padding);
-  padding-block: var(--list-card-item-inline-padding);
+  padding-block: var(--list-card-item-block-padding);
 }
 
   .ListCardItem_interactive:not(.ListCardItem_ignoreHover):hover {

package/__inner__/esm/components/ListCardItem/ListCardItem.js

@@ -16,16 +16,17 @@ import { useListCardContext } from '../ListCard/ListCardContext';
 import { Paper } from '../Paper';
 import { Stack } from '../Stack';
 import { cnListCardItem } from './classNames';
-import { LIST_CARD_ITEM_CSS_VARIABLES, LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_ITEM_DEFAULT_INTERACTIVE, LIST_CARD_ITEM_DEFAULT_SIZE, LIST_CARD_ITEM_DEFAULT_TAG, LIST_CARD_ITEM_DEFAULT_VARIANT, LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS, } from './constants';
-import { useListCardItemColorScheme, useListCardItemHover, useListCardItemRatio, } from './hooks';
+import { LIST_CARD_ITEM_CSS_VARIABLES, LIST_CARD_ITEM_DEFAULT_ALIGN, LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_ITEM_DEFAULT_INTERACTIVE, LIST_CARD_ITEM_DEFAULT_SIZE, LIST_CARD_ITEM_DEFAULT_TAG, LIST_CARD_ITEM_DEFAULT_VARIANT, LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS, } from './constants';
+import { useListCardItemColorScheme, useListCardItemHover, useListCardItemPadding, useListCardItemRatio, } from './hooks';
 import { ListCardItemContext } from './ListCardItemContext';
+import { generateListCardItemAlign } from './utils';
 export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
     var _a, _b;
     var props = useThemeProps({
         props: inProps,
         name: 'ListCardItem',
     });
-    var _c = props.size, sizeProp = _c === void 0 ? LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, other = __rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading"]);
+    var _c = props.size, sizeProp = _c === void 0 ? LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, _j = props.align, alignProp = _j === void 0 ? LIST_CARD_ITEM_DEFAULT_ALIGN : _j, paddingProp = props.padding, other = __rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading", "align", "padding"]);
     var hoverControl = useListCardItemHover();
     var listCardContext = useListCardContext();
     var size = sizeProp;
@@ -34,6 +35,8 @@ export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
     var backgroundColorScheme = backgroundColorSchemeProp;
     var borderColorScheme = borderColorSchemeProp;
     var interactive = interactiveProp;
+    var rawAlign = alignProp;
+    var rawPadding = paddingProp;
     if (listCardContext) {
         if (inProps.size === undefined && listCardContext.size) {
             size = listCardContext.size;
@@ -57,11 +60,19 @@ export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
             listCardContext.interactive !== undefined) {
             interactive = listCardContext.interactive;
         }
+        if (inProps.align === undefined && listCardContext.align) {
+            rawAlign = listCardContext.align;
+        }
+        if (inProps.padding === undefined && listCardContext.padding) {
+            rawPadding = listCardContext.padding;
+        }
     }
     var backgroundColorSchemeVariables = useListCardItemColorScheme(backgroundColorScheme, 'background');
     var borderColorSchemeVariables = useListCardItemColorScheme(borderColorScheme, 'border');
     var hasBorder = !!borderColorSchemeVariables;
     var ratio = useListCardItemRatio(contentTrailingRatio);
+    var align = generateListCardItemAlign(rawAlign);
+    var padding = useListCardItemPadding(rawPadding);
     return (React.createElement(ListCardItemContext.Provider, { value: {
             size: size,
             variant: variant,
@@ -73,14 +84,14 @@ export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
                 variant: variant,
                 ignoreHover: hoverControl.isHoverChildren,
                 interactive: interactive,
-            }, [className]), radius: LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: __assign(__assign(__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables) }),
-            leading && React.createElement("div", { className: cnListCardItem('Leading') }, leading),
+            }, [className]), radius: LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: __assign(__assign(__assign(__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables), padding) }),
+            leading && (React.createElement(Stack, { className: cnListCardItem('Leading'), display: "block", align: align.leading }, leading)),
             React.createElement(Stack, { className: cnListCardItem('Main') },
-                React.createElement("div", { className: cnListCardItem('Center'), style: generateCSSVariables((_a = {},
+                React.createElement(Stack, { className: cnListCardItem('Center'), display: "block", style: generateCSSVariables((_a = {},
                         _a[LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
-                        _a)) }, children),
-                trailing && (React.createElement("div", { className: cnListCardItem('Trailing'), style: generateCSSVariables((_b = {},
+                        _a)), align: align.center }, children),
+                trailing && (React.createElement(Stack, { className: cnListCardItem('Trailing'), display: "block", style: generateCSSVariables((_b = {},
                         _b[LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
-                        _b)) }, trailing))),
-            control && React.createElement("div", { className: cnListCardItem('Controls') }, control))));
+                        _b)), justify: "end", align: align.trailing }, trailing))),
+            control && (React.createElement(Stack, { className: cnListCardItem('Controls'), display: "block", align: align.controls }, control)))));
 });

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

@@ -10,6 +10,7 @@ export declare const LIST_CARD_ITEM_DEFAULT_SIZE = "m";
 export declare const LIST_CARD_ITEM_DEFAULT_VARIANT = "onPage";
 export declare const LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
 export declare const LIST_CARD_ITEM_DEFAULT_INTERACTIVE = true;
+export declare const LIST_CARD_ITEM_DEFAULT_ALIGN = "start";
 export declare const LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS: Readonly<Record<ListCardItemSizeVariant, PaperRadiusVariant>>;
 export declare const LIST_CARD_ITEM_CSS_VARIABLES: {
     readonly CENTER_GROW: "list-card-item-center-grow";

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

@@ -5,6 +5,7 @@ export var LIST_CARD_ITEM_DEFAULT_SIZE = 'm';
 export var LIST_CARD_ITEM_DEFAULT_VARIANT = 'onPage';
 export var LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
 export var LIST_CARD_ITEM_DEFAULT_INTERACTIVE = true;
+export var LIST_CARD_ITEM_DEFAULT_ALIGN = 'start';
 export var LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS = {
     xs: 'xs',
     s: 'xs',

package/__inner__/esm/components/ListCardItem/entities/align.d.ts

@@ -0,0 +1,6 @@
+import type { ListCardItemBlock } from './block';
+export declare const listCardItemAlignVariant: readonly ["center", "start", "end", "baseline"];
+export type ListCardItemAlignVariant = (typeof listCardItemAlignVariant)[number];
+export type ListCardItemAlignSimple = ListCardItemAlignVariant;
+export type ListCardItemAlignByBlock = Partial<Record<ListCardItemBlock, ListCardItemAlignVariant>>;
+export type ListCardItemAlign = ListCardItemAlignSimple | ListCardItemAlignByBlock;

package/__inner__/esm/components/ListCardItem/entities/align.js

@@ -0,0 +1,2 @@
+import { stackAlignVariant } from '../../Stack';
+export var listCardItemAlignVariant = stackAlignVariant;

package/__inner__/esm/components/ListCardItem/entities/block.d.ts

@@ -0,0 +1,2 @@
+export declare const listCardItemBlock: readonly ["leading", "center", "trailing", "controls"];
+export type ListCardItemBlock = (typeof listCardItemBlock)[number];

package/__inner__/esm/components/ListCardItem/entities/block.js

@@ -0,0 +1,6 @@
+export var listCardItemBlock = [
+    'leading',
+    'center',
+    'trailing',
+    'controls',
+];

package/__inner__/esm/components/ListCardItem/entities/index.d.ts

@@ -1,3 +1,6 @@
 export * from './colorSchemes';
+export * from './align';
+export * from './block';
+export * from './padding';
 export * from './size';
 export * from './variant';

package/__inner__/esm/components/ListCardItem/entities/index.js

@@ -1,3 +1,6 @@
 export * from './colorSchemes';
+export * from './align';
+export * from './block';
+export * from './padding';
 export * from './size';
 export * from './variant';

package/__inner__/esm/components/ListCardItem/entities/padding.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeSpacingTokenVariable } from '../../OzenProvider';
+export declare const listCardItemPadding: ThemeSpacingTokenVariable[];
+export type ListCardItemPaddingVariant = (typeof listCardItemPadding)[number];
+export type ListCardItemPaddingSeparated = [
+    ListCardItemPaddingVariant?,
+    ListCardItemPaddingVariant?
+];
+export type ListCardItemPadding = ListCardItemPaddingVariant | ListCardItemPaddingSeparated;

package/__inner__/esm/components/ListCardItem/entities/padding.js

@@ -0,0 +1,2 @@
+import { themeSpacingTokenOzenDefault } from '../../OzenProvider';
+export var listCardItemPadding = Object.keys(themeSpacingTokenOzenDefault.properties);

package/__inner__/esm/components/ListCardItem/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './hover';
 export * from './useListCardItemAsInteractiveModule';
 export * from './useListCardItemColorScheme';
+export * from './useListCardItemPadding';
 export * from './useListCardItemRatio';

package/__inner__/esm/components/ListCardItem/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './hover';
 export * from './useListCardItemAsInteractiveModule';
 export * from './useListCardItemColorScheme';
+export * from './useListCardItemPadding';
 export * from './useListCardItemRatio';

package/__inner__/esm/components/ListCardItem/hooks/useListCardItemPadding.d.ts

@@ -0,0 +1,2 @@
+import type { ListCardItemPadding } from '../entities';
+export declare const useListCardItemPadding: (padding: ListCardItemPadding | undefined) => import("react").CSSProperties | undefined;

package/__inner__/esm/components/ListCardItem/hooks/useListCardItemPadding.js

@@ -0,0 +1,29 @@
+import { __read } from "tslib";
+import { useThemeTokens } from '../../../hooks/useThemeTokens';
+import { generateCSSVariables, isString } from '../../../utils';
+var CSS_VARIABLES = {
+    INLINE: 'list-card-item-inline-padding',
+    BLOCK: 'list-card-item-block-padding',
+};
+export var useListCardItemPadding = function (padding) {
+    var _a;
+    var spacing = useThemeTokens().spacing;
+    if (!padding) {
+        return undefined;
+    }
+    if (isString(padding)) {
+        return generateCSSVariables((_a = {},
+            _a[CSS_VARIABLES.BLOCK] = "var(".concat(spacing.toCSSProperty(padding), ")"),
+            _a[CSS_VARIABLES.INLINE] = "var(".concat(spacing.toCSSProperty(padding), ")"),
+            _a));
+    }
+    var variables = {};
+    var _b = __read(padding, 2), block = _b[0], inline = _b[1];
+    if (block) {
+        variables[CSS_VARIABLES.BLOCK] = "var(".concat(spacing.toCSSProperty(block), ")");
+    }
+    if (inline) {
+        variables[CSS_VARIABLES.INLINE] = "var(".concat(spacing.toCSSProperty(inline), ")");
+    }
+    return generateCSSVariables(variables);
+};

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

@@ -1,6 +1,7 @@
 export * from './entities';
 export * from './modules';
 export * from './classNames';
+export * from './constants';
 export * from './ListCardItem';
 export * from './ListCardItemContext';
 export * from './presets';

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

@@ -1,6 +1,7 @@
 export * from './entities';
 export * from './modules';
 export * from './classNames';
+export * from './constants';
 export * from './ListCardItem';
 export * from './ListCardItemContext';
 export * from './presets';

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { LIST_CARD_ITEM_DEFAULT_TAG } from './constants';
-import type { ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemSizeVariant, ListCardItemVariant } from './entities';
+import type { ListCardItemAlign, ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemPadding, ListCardItemSizeVariant, ListCardItemVariant } from './entities';
 export type ListCardItemBaseProps = {
     /** Контент */
     children: ReactNode;
@@ -23,6 +23,10 @@ export type ListCardItemBaseProps = {
     control?: ReactNode;
     /** Если `true`, то компонент интерактивен */
     interactive?: boolean;
+    /** Выравнивание */
+    align?: ListCardItemAlign;
+    /** Отступ */
+    padding?: ListCardItemPadding;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/esm/components/ListCardItem/utils/generateListCardItemAlign.d.ts

@@ -0,0 +1,2 @@
+import type { ListCardItemAlign } from '../entities';
+export declare const generateListCardItemAlign: (align: ListCardItemAlign) => Partial<Record<"center" | "controls" | "leading" | "trailing", "center" | "end" | "start" | "baseline">>;

package/__inner__/esm/components/ListCardItem/utils/generateListCardItemAlign.js

@@ -0,0 +1,10 @@
+import { isPlainObject } from '../../../utils';
+export var generateListCardItemAlign = function (align) {
+    if (isPlainObject(align)) {
+        return align;
+    }
+    return {
+        center: align,
+        trailing: align,
+    };
+};

package/__inner__/esm/components/ListCardItem/utils/index.d.ts

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

package/__inner__/esm/components/ListCardItem/utils/index.js

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

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/border-width/entity.d.ts

@@ -1,7 +1,7 @@
 import type { ThemeToken } from '../../entities';
 export type ThemeBorderWidthTokenProperties = {
-    s: string;
     m: string;
+    s: string;
 };
 export type ThemeBorderWidthTokenVariable = keyof ThemeBorderWidthTokenProperties;
 export type ThemeBorderWidthToken = ThemeToken<ThemeBorderWidthTokenProperties>;

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/border-width/ozen-default/border-width-ozen-default.css

@@ -1,4 +1,4 @@
 .OzenProvider_border-width_ozenDefault {
-  --border-width-s: 1px;
   --border-width-m: 2px;
+  --border-width-s: 1px;
 }

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/border-width/ozen-default/border-width-ozen-default.js

@@ -1,3 +1,3 @@
 import './border-width-ozen-default.css';
 import { createBorderWidthToken } from '../utility';
-export var themeBorderWidthTokenOzenDefault = createBorderWidthToken('ozenDefault', { s: "1px", m: "2px" });
+export var themeBorderWidthTokenOzenDefault = createBorderWidthToken('ozenDefault', { m: "2px", s: "1px" });

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/control/entity.d.ts

@@ -14,6 +14,13 @@ export type ThemeControlTokenProperties = {
     'height-s': string;
     'height-m': string;
     'height-l': string;
+    'radius-l': string;
+    'radius-xl': string;
+    'radius-2xl': string;
+    'radius-m': string;
+    'radius-s': string;
+    'radius-xs': string;
+    'radius-2xs': string;
 };
 export type ThemeControlTokenVariable = keyof ThemeControlTokenProperties;
 export type ThemeControlToken = ThemeToken<ThemeControlTokenProperties>;

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/control/ozen-default/control-ozen-default.css

@@ -13,4 +13,11 @@
   --control-height-s: 48px;
   --control-height-m: 56px;
   --control-height-l: 64px;
+  --control-radius-l: 16px;
+  --control-radius-xl: 20px;
+  --control-radius-2xl: 24px;
+  --control-radius-m: 12px;
+  --control-radius-s: 12px;
+  --control-radius-xs: 8px;
+  --control-radius-2xs: 8px;
 }

package/__inner__/esm/components/OzenProvider/providers/theme/tokens/control/ozen-default/control-ozen-default.js

@@ -15,4 +15,11 @@ export var themeControlTokenOzenDefault = createControlToken('ozenDefault', {
     'height-s': "48px",
     'height-m': "56px",
     'height-l': "64px",
+    'radius-l': "16px",
+    'radius-xl': "20px",
+    'radius-2xl': "24px",
+    'radius-m': "12px",
+    'radius-s': "12px",
+    'radius-xs': "8px",
+    'radius-2xs': "8px",
 });

package/__inner__/esm/components/SectionMessage/config.js

@@ -1,9 +1,9 @@
-import { CheckCircleOutlineIcon, InfoCircleOutlineIcon, WarningCircleOutlineIcon, WarningTriangleOutlineIcon, } from '@ozen-ui/icons';
+import { CheckCircleIcon, InfoCircleIcon, WarningCircleIcon, WarningTriangleIcon, } from '@ozen-ui/icons';
 export var SECTION_MESSAGE_ICON_BY_STATUS = {
-    neutral: InfoCircleOutlineIcon,
-    info: InfoCircleOutlineIcon,
-    warning: WarningTriangleOutlineIcon,
-    success: CheckCircleOutlineIcon,
-    error: WarningCircleOutlineIcon,
-    action: InfoCircleOutlineIcon,
+    neutral: InfoCircleIcon,
+    info: InfoCircleIcon,
+    warning: WarningTriangleIcon,
+    success: CheckCircleIcon,
+    error: WarningCircleIcon,
+    action: InfoCircleIcon,
 };

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

@@ -1,5 +1,4 @@
-import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
-import type { SelectPropSize } from './types';
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout, SelectPropSize } from './entities';
 export type SelectContextValue = {
     renderRightLayout: SelectRenderRightLayout;
     size: SelectPropSize;

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

@@ -12,7 +12,7 @@ import { useSelectContext } from '../../SelectContext';
 import { SelectInputContextConsumer } from '../SelectInputContextConsumer';
 import { SelectInputRenderRight } from '../SelectInputRenderRight';
 export var SelectInput = forwardRef(function (_a, ref) {
-    var label = _a.label, id = _a.id, name = _a.name, renderedValue = _a.renderedValue, hint = _a.hint, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = __rest(_a, ["label", "id", "name", "renderedValue", "hint", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var label = _a.label, id = _a.id, name = _a.name, renderedValue = _a.renderedValue, hint = _a.hint, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, background = _a.background, other = __rest(_a, ["label", "id", "name", "renderedValue", "hint", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps", "background"]);
     var _b = useSelectContext(), open = _b.open, required = _b.required, disabled = _b.disabled, fullWidth = _b.fullWidth, renderLeft = _b.renderLeft, multiline = _b.multiline, size = _b.size, error = _b.error;
     var _c = __read(useBoolean(), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     var filled = !!valueProp || valueProp === 0;
@@ -24,7 +24,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
         off();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (React.createElement(FieldControl, __assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnSelect({ multiline: multiline }, [className]) }),
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { background: background, ref: ref, className: cnSelect({ multiline: multiline }, [className]) }),
         React.createElement("div", __assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
             React.createElement(FieldIcon, { icon: renderLeft, className: cnSelect('RenderLeft') }),
             React.createElement("div", { className: cnSelect('FieldContainer') },

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

@@ -2,6 +2,7 @@ import type { ComponentPropsWithRef, ComponentRef, ReactNode, Ref } from 'react'
 import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
 import type { FieldHintProps } from '../../../FieldHint';
 import type { FieldLabelProps } from '../../../FieldLabel';
+import type { SelectBackgroundVariant } from '../../entities';
 type LabelProps = FieldLabelProps;
 type HintProps = FieldHintProps;
 type InputProps = ComponentPropsWithRef<'input'> & {
@@ -71,5 +72,7 @@ export type SelectInputProps = ExtendableComponentPropsWithRef<{
     'data-testid'?: string;
     /** Содержимое компонента */
     children?: never;
+    /** Задний фон */
+    background?: SelectBackgroundVariant;
 } & SelectInputPropsDeprecated, 'div'>;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const selectBackgroundVariant: readonly ["main", "primary"];
+export type SelectBackgroundVariant = (typeof selectBackgroundVariant)[number];

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

@@ -0,0 +1,2 @@
+import { fieldControlBackgroundVariant } from '../../FieldControl';
+export var selectBackgroundVariant = fieldControlBackgroundVariant;

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

@@ -0,0 +1,29 @@
+import type { DataListBaseProps } from '../../DataList';
+import type { SelectLabel, SelectedOption, SelectPropRenderValue, SelectPropSize } from '../entities';
+/**
+ * @deprecated
+ * Use the `SelectRenderValueProp` type to replace it.
+ * */
+export type SelectRenderValue<MULTIPLE extends boolean = false> = SelectPropRenderValue<MULTIPLE>;
+/**
+ * @deprecated
+ * Use the `SelectLabel` type to replace it.
+ * */
+export type SelectPropLabel<MULTIPLE extends boolean = false> = SelectLabel<MULTIPLE>;
+/**
+ * @deprecated
+ * Use the `SelectSizeProp` type to replace it.
+ * */
+export type SelectSizeVariant = SelectPropSize;
+/**
+ * @deprecated
+ * Use the `SelectedPropOption` type to replace it.
+ * */
+export type SelectedOptionProp<MULTIPLE extends boolean = false> = SelectedOption<MULTIPLE>;
+export type SelectPropsDeprecated<MULTIPLE extends boolean = false> = {
+    /**
+     * Свойства компонента Menu
+     * @deprecated Используйте `dataListProps`
+     * */
+    menuProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,10 @@
+export * from './background';
+export * from './deprecated';
 export * from './onClear';
+export * from './label';
+export * from './onChange';
+export * from './option';
 export * from './render';
+export * from './renderValue';
+export * from './size';
+export * from './value';

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

@@ -1,2 +1,10 @@
+export * from './background';
+export * from './deprecated';
 export * from './onClear';
+export * from './label';
+export * from './onChange';
+export * from './option';
 export * from './render';
+export * from './renderValue';
+export * from './size';
+export * from './value';

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

@@ -0,0 +1,2 @@
+import type { DataListOptionProps } from '../../DataList';
+export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type { SyntheticEvent } from 'react';
+import type { SelectPropValue } from './value';
+export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent | MouseEvent) => void;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import type { SelectLabel } from './label';
+import type { SelectPropValue } from './value';
+export type SelectedOption<MULTIPLE extends boolean = false> = {
+    label?: SelectLabel<MULTIPLE>;
+    value?: SelectPropValue<MULTIPLE>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import type { SelectedOption } from './option';
+export type SelectPropRenderValue<MULTIPLE extends boolean = false> = (option: SelectedOption<MULTIPLE>) => ReactNode | null;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export declare const selectSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type SelectPropSize = (typeof selectSizeVariant)[number];

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

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types';
+export var selectSizeVariant = formElementSizeVariant;

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

@@ -0,0 +1,2 @@
+import type { DataListSelected } from '../../DataList';
+export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;