@ozen-ui/kit 0.78.0 → 0.80.0

package/__inner__/cjs/components/InputOTP/entities/finishBehavior.d.ts

@@ -0,0 +1,20 @@
+import type { InputOTPRawValue } from './value';
+export type InputOTPFinishBehaviorContext = {
+    /** Флаг: Поле полностью заполнено */
+    isFullFilled: boolean;
+    /** Значение */
+    value: string;
+    /** Необработанное значение */
+    rawValue: InputOTPRawValue;
+    /** Значение с примененной маской */
+    maskedValue: string;
+    /** Необработанное значение с примененной маской */
+    maskedRawValue: InputOTPRawValue;
+    /** Если `true` — это изменение на последнем input */
+    isChangeOnLastInput: boolean;
+    /** index input, на котором произошло изменение */
+    inputIndex: number;
+    /** Если `true` — это нажатие Enter */
+    isEnter: boolean;
+};
+export type InputOTPFinishBehavior = (context: InputOTPFinishBehaviorContext) => boolean;

package/__inner__/cjs/components/InputOTP/entities/finishBehavior.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/InputOTP/entities/index.d.ts

@@ -0,0 +1,10 @@
+export * from './background';
+export * from './dynamicParameter';
+export * from './events';
+export * from './finishBehavior';
+export * from './input';
+export * from './mask';
+export * from './mode';
+export * from './size';
+export * from './validate';
+export * from './value';

package/__inner__/cjs/components/InputOTP/entities/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./background"), exports);
+tslib_1.__exportStar(require("./dynamicParameter"), exports);
+tslib_1.__exportStar(require("./events"), exports);
+tslib_1.__exportStar(require("./finishBehavior"), exports);
+tslib_1.__exportStar(require("./input"), exports);
+tslib_1.__exportStar(require("./mask"), exports);
+tslib_1.__exportStar(require("./mode"), exports);
+tslib_1.__exportStar(require("./size"), exports);
+tslib_1.__exportStar(require("./validate"), exports);
+tslib_1.__exportStar(require("./value"), exports);

package/__inner__/cjs/components/InputOTP/entities/input.d.ts

@@ -0,0 +1,19 @@
+import type { FieldInputProps } from '../../FieldInput';
+export type InputOTPInputs = HTMLInputElement[];
+export type InputOTPInputProps = FieldInputProps;
+export type InputOTPCalculatedInput = {
+    /** Значение input */
+    value: string;
+    /** Необработанное input */
+    rawValue: string;
+    /** Флаг: это предыдущий input */
+    isPrevious: boolean;
+    /** Флаг: это следующий input */
+    isNext: boolean;
+    /** Флаг: это текущий input */
+    isCurrentInput: boolean;
+    /** Флаг: это последний input */
+    isLast: boolean;
+    /** Флаг: input отключен */
+    isDisabled: boolean;
+};

package/__inner__/cjs/components/InputOTP/entities/input.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/InputOTP/entities/mask.d.ts

@@ -0,0 +1 @@
+export type InputOTPMask = string | ((value: string, index: number) => string);

package/__inner__/cjs/components/InputOTP/entities/mask.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/InputOTP/entities/mode.d.ts

@@ -0,0 +1,2 @@
+export declare const inputOTPAutoCompleteMode: readonly ["firstOnly", "all"];
+export type InputOTPAutoCompleteMode = (typeof inputOTPAutoCompleteMode)[number];

package/__inner__/cjs/components/InputOTP/entities/mode.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOTPAutoCompleteMode = void 0;
+exports.inputOTPAutoCompleteMode = ['firstOnly', 'all'];

package/__inner__/cjs/components/InputOTP/entities/size.d.ts

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

package/__inner__/cjs/components/InputOTP/entities/size.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOTPSizeVariant = void 0;
+exports.inputOTPSizeVariant = ['s', 'm'];

package/__inner__/cjs/components/InputOTP/entities/validate.d.ts

@@ -0,0 +1 @@
+export type InputOTPValidate = (value: string) => boolean;

package/__inner__/cjs/components/InputOTP/entities/validate.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/InputOTP/entities/value.d.ts

@@ -0,0 +1,2 @@
+export type InputOTPRawValue = string[];
+export type InputOTPValue = InputOTPRawValue | string;

package/__inner__/cjs/components/InputOTP/entities/value.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/InputOTP/helper.d.ts

@@ -1,4 +1,4 @@
-import type { InputOTPMask, InputOTPRawValue, InputOTPCalculatedInput } from './types';
+import type { InputOTPMask, InputOTPRawValue, InputOTPCalculatedInput } from './entities';
 export declare const maskSymbol: (mask: InputOTPMask | undefined, value: string, index: number) => string;
 export declare const maskValue: (mask: InputOTPMask | undefined, value: InputOTPRawValue | undefined) => string[];
 export declare const calculateInput: ({ valueByIndex, index, mask, length, disabled: isDisabledGlobal, focusedInputIndex, }: {

package/__inner__/cjs/components/InputOTP/helper.js

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.valueToArray = exports.valueToString = exports.calculateInput = exports.maskValue = exports.maskSymbol = void 0;
-var isFunction_1 = require("../../utils/isFunction");
-var isString_1 = require("../../utils/isString");
-var number_1 = require("../../utils/number");
+var utils_1 = require("../../utils");
 var maskSymbol = function (mask, value, index) {
     if (value === '') {
         return '';
     }
-    if ((0, isString_1.isString)(mask)) {
+    if ((0, utils_1.isString)(mask)) {
         return mask;
     }
-    if ((0, isFunction_1.isFunction)(mask)) {
+    if ((0, utils_1.isFunction)(mask)) {
         return mask(value, index);
     }
     return value;
@@ -31,7 +29,7 @@ var calculateInput = function (_a) {
     var isNext = index === lastFilledInputIndex + 2;
     var isCurrentInput = index === lastFilledInputIndex + 1;
     var isLast = index === length - 1;
-    var isPreviousByFocusedInput = (0, number_1.isNumber)(focusedInputIndex) && index < focusedInputIndex;
+    var isPreviousByFocusedInput = (0, utils_1.isNumber)(focusedInputIndex) && index < focusedInputIndex;
     var isFocusedInput = index === focusedInputIndex;
     var isDisabled = (function () {
         if (isDisabledGlobal) {

package/__inner__/cjs/components/InputOTP/hooks/useInputOTPEvents.d.ts

@@ -1,6 +1,6 @@
 import type { ChangeEvent, ClipboardEvent, ClipboardEventHandler, KeyboardEvent, KeyboardEventHandler } from 'react';
 import type { StoredValue } from '../../../hooks/useStoredValue';
-import type { InputOTPRawValue, InputOTPInputs, InputOTPOnFinish, InputOTPValidate, InputOTPMask, InputOTPFinishBehavior } from '../types';
+import type { InputOTPRawValue, InputOTPInputs, InputOTPOnFinish, InputOTPValidate, InputOTPMask, InputOTPFinishBehavior } from '../entities';
 export declare const useInputOTPEvents: ({ inputs, valueByIndex, setValueByIndex, validate: validateFromProps, length, onPaste: onPasteFromProps, onKeyDown: onKeyDownFromProps, onFinish, mask, finishBehavior, }: {
     inputs: StoredValue<InputOTPInputs>;
     valueByIndex: InputOTPRawValue | undefined;

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

@@ -1,3 +1,4 @@
+export * from './entities';
 export * from './presets';
 export * from './InputOTP';
 export * from './types';

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
 tslib_1.__exportStar(require("./presets"), exports);
 tslib_1.__exportStar(require("./InputOTP"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/InputOTP/presets.d.ts

@@ -11,7 +11,7 @@ export declare const INPUT_OTP_MASK_PRESET: {
 };
 export declare const INPUT_OTP_FINISH_BEHAVIOR_PRESET: {
     /** Реагирует на полный ввод на любом из input */
-    FULL_FILLED_NON_LAST_INPUT: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+    FULL_FILLED_NON_LAST_INPUT: ({ isFullFilled }: import("./entities").InputOTPFinishBehaviorContext) => boolean;
     /** Реагирует на полный ввод только на последнем input, либо на нажатие на Enter при полном заполнении */
-    FULL_FILLED_ON_LAST_INPUT: ({ isFullFilled, isChangeOnLastInput, isEnter, }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+    FULL_FILLED_ON_LAST_INPUT: ({ isFullFilled, isChangeOnLastInput, isEnter, }: import("./entities").InputOTPFinishBehaviorContext) => boolean;
 };

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

@@ -3,54 +3,7 @@ import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicCo
 import type { FIELD_CONTROL_DEFAULT_TAG, FieldControlBaseProps } from '../FieldControl';
 import type { FieldInputProps } from '../FieldInput';
 import type { INPUT_OTP_DEFAULT_TAG } from './constants';
-export declare const inputOTPAutoCompleteMode: readonly ["firstOnly", "all"];
-export type InputOTPAutoCompleteMode = (typeof inputOTPAutoCompleteMode)[number];
-export declare const inputOTPSizeVariant: readonly ["s", "m"];
-export type InputOTPSizeVariant = (typeof inputOTPSizeVariant)[number];
-export type InputOTPValidate = (value: string) => boolean;
-export type InputOTPRawValue = string[];
-export type InputOTPValue = InputOTPRawValue | string;
-export type InputOTPOnChange = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
-export type InputOTPOnFinish = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
-export type InputOTPInputs = HTMLInputElement[];
-export type InputOTPInputProps = FieldInputProps;
-export type InputOTPCalculatedInput = {
-    /** Значение input */
-    value: string;
-    /** Необработанное input */
-    rawValue: string;
-    /** Флаг: это предыдущий input */
-    isPrevious: boolean;
-    /** Флаг: это следующий input */
-    isNext: boolean;
-    /** Флаг: это текущий input */
-    isCurrentInput: boolean;
-    /** Флаг: это последний input */
-    isLast: boolean;
-    /** Флаг: input отключен */
-    isDisabled: boolean;
-};
-export type InputOTPMask = string | ((value: string, index: number) => string);
-export type InputOTPFinishBehaviorContext = {
-    /** Флаг: Поле полностью заполнено */
-    isFullFilled: boolean;
-    /** Значение */
-    value: string;
-    /** Необработанное значение */
-    rawValue: InputOTPRawValue;
-    /** Значение с примененной маской */
-    maskedValue: string;
-    /** Необработанное значение с примененной маской */
-    maskedRawValue: InputOTPRawValue;
-    /** Если `true` — это изменение на последнем input */
-    isChangeOnLastInput: boolean;
-    /** index input, на котором произошло изменение */
-    inputIndex: number;
-    /** Если `true` — это нажатие Enter */
-    isEnter: boolean;
-};
-export type InputOTPFinishBehavior = (context: InputOTPFinishBehaviorContext) => boolean;
-export type InputOTPDynamicInputParameter<Parameter> = Parameter | ((calculatedInput: InputOTPCalculatedInput, index: number) => Parameter);
+import type { InputOTPAutoCompleteMode, InputOTPSizeVariant, InputOTPValidate, InputOTPValue, InputOTPOnChange, InputOTPOnFinish, InputOTPInputProps, InputOTPFinishBehavior, InputOTPMask, InputOTPDynamicInputParameter, InputOTPBackgroundVariant } from './entities';
 export type InputOTPBaseProps = {
     /** Длина кода */
     length: number;
@@ -97,6 +50,8 @@ export type InputOTPBaseProps = {
     }>;
     /** Функция, которая определяет поведение финиша */
     finishBehavior?: InputOTPFinishBehavior;
+    /** Задний фон */
+    background?: InputOTPBackgroundVariant;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 };

package/__inner__/cjs/components/InputOTP/types.js

@@ -1,7 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputOTPSizeVariant = exports.inputOTPAutoCompleteMode = void 0;
-// ---- AUTO-COMPLETE MODE ----
-exports.inputOTPAutoCompleteMode = ['firstOnly', 'all'];
-// ---- SIZE ----
-exports.inputOTPSizeVariant = ['s', 'm'];

package/__inner__/cjs/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__/cjs/components/ListCard/PageListCard/PageListCard.js

@@ -15,7 +15,7 @@ exports.PageListCard = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
         props: inProps,
         name: 'PageListCard',
     });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_CARD_DEFAULT_TAG : _a, children = props.children, borderColorScheme = props.borderColorScheme, _b = props.size, size = _b === void 0 ? constants_1.LIST_CARD_DEFAULT_SIZE : _b, _c = props.contentTrailingRatio, contentTrailingRatio = _c === void 0 ? constants_1.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _c, _d = props.interactive, interactive = _d === void 0 ? constants_1.LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.backgroundColorScheme, backgroundColorScheme = _e === void 0 ? constants_1.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, className = props.className, other = tslib_1.__rest(props, ["as", "children", "borderColorScheme", "size", "contentTrailingRatio", "interactive", "backgroundColorScheme", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_CARD_DEFAULT_TAG : _a, children = props.children, borderColorScheme = props.borderColorScheme, _b = props.size, size = _b === void 0 ? constants_1.LIST_CARD_DEFAULT_SIZE : _b, _c = props.contentTrailingRatio, contentTrailingRatio = _c === void 0 ? constants_1.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _c, _d = props.interactive, interactive = _d === void 0 ? constants_1.LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.backgroundColorScheme, backgroundColorScheme = _e === void 0 ? constants_1.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, _f = props.align, align = _f === void 0 ? constants_1.LIST_CARD_DEFAULT_ALIGN : _f, className = props.className, padding = props.padding, other = tslib_1.__rest(props, ["as", "children", "borderColorScheme", "size", "contentTrailingRatio", "interactive", "backgroundColorScheme", "align", "className", "padding"]);
     return (react_1.default.createElement(ListCardContext_1.ListCardContext.Provider, { value: {
             variant: 'onPage',
             size: size,
@@ -23,6 +23,8 @@ exports.PageListCard = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
             backgroundColorScheme: backgroundColorScheme,
             interactive: interactive,
             contentTrailingRatio: contentTrailingRatio,
+            align: align,
+            padding: padding,
         } },
         react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnPageListCard)({
                 size: size,

package/__inner__/cjs/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__/cjs/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__/cjs/components/ListCard/constants.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LIST_CARD_DEFAULT_INTERACTIVE = exports.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = exports.LIST_CARD_DEFAULT_SIZE = exports.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.LIST_CARD_DEFAULT_TAG = void 0;
+exports.LIST_CARD_DEFAULT_ALIGN = exports.LIST_CARD_DEFAULT_INTERACTIVE = exports.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = exports.LIST_CARD_DEFAULT_SIZE = exports.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.LIST_CARD_DEFAULT_TAG = void 0;
+var ListCardItem_1 = require("../ListCardItem");
 var constants_1 = require("../ListCardItem/constants");
 exports.LIST_CARD_DEFAULT_TAG = 'div';
 exports.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME;
 exports.LIST_CARD_DEFAULT_SIZE = constants_1.LIST_CARD_ITEM_DEFAULT_SIZE;
 exports.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO;
 exports.LIST_CARD_DEFAULT_INTERACTIVE = constants_1.LIST_CARD_ITEM_DEFAULT_INTERACTIVE;
+exports.LIST_CARD_DEFAULT_ALIGN = ListCardItem_1.LIST_CARD_ITEM_DEFAULT_ALIGN;

package/__inner__/cjs/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__/cjs/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__/cjs/components/ListCardItem/ListCardItem.js

@@ -22,13 +22,14 @@ var classNames_1 = require("./classNames");
 var constants_1 = require("./constants");
 var hooks_1 = require("./hooks");
 var ListCardItemContext_1 = require("./ListCardItemContext");
+var utils_1 = require("./utils");
 exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var _a, _b;
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'ListCardItem',
     });
-    var _c = props.size, sizeProp = _c === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, other = tslib_1.__rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading"]);
+    var _c = props.size, sizeProp = _c === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? constants_1.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 ? constants_1.LIST_CARD_ITEM_DEFAULT_ALIGN : _j, paddingProp = props.padding, other = tslib_1.__rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading", "align", "padding"]);
     var hoverControl = (0, hooks_1.useListCardItemHover)();
     var listCardContext = (0, ListCardContext_1.useListCardContext)();
     var size = sizeProp;
@@ -37,6 +38,8 @@ exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
     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;
@@ -60,11 +63,19 @@ exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
             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 = (0, hooks_1.useListCardItemColorScheme)(backgroundColorScheme, 'background');
     var borderColorSchemeVariables = (0, hooks_1.useListCardItemColorScheme)(borderColorScheme, 'border');
     var hasBorder = !!borderColorSchemeVariables;
     var ratio = (0, hooks_1.useListCardItemRatio)(contentTrailingRatio);
+    var align = (0, utils_1.generateListCardItemAlign)(rawAlign);
+    var padding = (0, hooks_1.useListCardItemPadding)(rawPadding);
     return (react_1.default.createElement(ListCardItemContext_1.ListCardItemContext.Provider, { value: {
             size: size,
             variant: variant,
@@ -76,14 +87,14 @@ exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
                 variant: variant,
                 ignoreHover: hoverControl.isHoverChildren,
                 interactive: interactive,
-            }, [className]), radius: constants_1.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables) }),
-            leading && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Leading') }, leading),
+            }, [className]), radius: constants_1.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables), padding) }),
+            leading && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Leading'), display: "block", align: align.leading }, leading)),
             react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Main') },
-                react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Center'), style: (0, css_1.generateCSSVariables)((_a = {},
+                react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Center'), display: "block", style: (0, css_1.generateCSSVariables)((_a = {},
                         _a[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
-                        _a)) }, children),
-                trailing && (react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Trailing'), style: (0, css_1.generateCSSVariables)((_b = {},
+                        _a)), align: align.center }, children),
+                trailing && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Trailing'), display: "block", style: (0, css_1.generateCSSVariables)((_b = {},
                         _b[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
-                        _b)) }, trailing))),
-            control && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Controls') }, control))));
+                        _b)), justify: "end", align: align.trailing }, trailing))),
+            control && (react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Controls'), display: "block", align: align.controls }, control)))));
 });

package/__inner__/cjs/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__/cjs/components/ListCardItem/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LIST_CARD_ITEM_CSS_VARIABLES = exports.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS = exports.LIST_CARD_ITEM_DEFAULT_INTERACTIVE = exports.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO = exports.LIST_CARD_ITEM_DEFAULT_VARIANT = exports.LIST_CARD_ITEM_DEFAULT_SIZE = exports.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.LIST_CARD_ITEM_DEFAULT_TAG = void 0;
+exports.LIST_CARD_ITEM_CSS_VARIABLES = exports.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS = exports.LIST_CARD_ITEM_DEFAULT_ALIGN = exports.LIST_CARD_ITEM_DEFAULT_INTERACTIVE = exports.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO = exports.LIST_CARD_ITEM_DEFAULT_VARIANT = exports.LIST_CARD_ITEM_DEFAULT_SIZE = exports.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.LIST_CARD_ITEM_DEFAULT_TAG = void 0;
 var presets_1 = require("./presets");
 exports.LIST_CARD_ITEM_DEFAULT_TAG = 'div';
 exports.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME = presets_1.LIST_CARD_ITEM_BACKGROUND_COLOR_SCHEME.MAIN;
@@ -8,6 +8,7 @@ exports.LIST_CARD_ITEM_DEFAULT_SIZE = 'm';
 exports.LIST_CARD_ITEM_DEFAULT_VARIANT = 'onPage';
 exports.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
 exports.LIST_CARD_ITEM_DEFAULT_INTERACTIVE = true;
+exports.LIST_CARD_ITEM_DEFAULT_ALIGN = 'start';
 exports.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS = {
     xs: 'xs',
     s: 'xs',

package/__inner__/cjs/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__/cjs/components/ListCardItem/entities/align.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listCardItemAlignVariant = void 0;
+var Stack_1 = require("../../Stack");
+exports.listCardItemAlignVariant = Stack_1.stackAlignVariant;

package/__inner__/cjs/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__/cjs/components/ListCardItem/entities/block.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listCardItemBlock = void 0;
+exports.listCardItemBlock = [
+    'leading',
+    'center',
+    'trailing',
+    'controls',
+];

package/__inner__/cjs/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__/cjs/components/ListCardItem/entities/index.js

@@ -2,5 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./colorSchemes"), exports);
+tslib_1.__exportStar(require("./align"), exports);
+tslib_1.__exportStar(require("./block"), exports);
+tslib_1.__exportStar(require("./padding"), exports);
 tslib_1.__exportStar(require("./size"), exports);
 tslib_1.__exportStar(require("./variant"), exports);

package/__inner__/cjs/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__/cjs/components/ListCardItem/entities/padding.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listCardItemPadding = void 0;
+var OzenProvider_1 = require("../../OzenProvider");
+exports.listCardItemPadding = Object.keys(OzenProvider_1.themeSpacingTokenOzenDefault.properties);

package/__inner__/cjs/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__/cjs/components/ListCardItem/hooks/index.js

@@ -4,4 +4,5 @@ var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./hover"), exports);
 tslib_1.__exportStar(require("./useListCardItemAsInteractiveModule"), exports);
 tslib_1.__exportStar(require("./useListCardItemColorScheme"), exports);
+tslib_1.__exportStar(require("./useListCardItemPadding"), exports);
 tslib_1.__exportStar(require("./useListCardItemRatio"), exports);

package/__inner__/cjs/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__/cjs/components/ListCardItem/hooks/useListCardItemPadding.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListCardItemPadding = void 0;
+var tslib_1 = require("tslib");
+var useThemeTokens_1 = require("../../../hooks/useThemeTokens");
+var utils_1 = require("../../../utils");
+var CSS_VARIABLES = {
+    INLINE: 'list-card-item-inline-padding',
+    BLOCK: 'list-card-item-block-padding',
+};
+var useListCardItemPadding = function (padding) {
+    var _a;
+    var spacing = (0, useThemeTokens_1.useThemeTokens)().spacing;
+    if (!padding) {
+        return undefined;
+    }
+    if ((0, utils_1.isString)(padding)) {
+        return (0, utils_1.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 = tslib_1.__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 (0, utils_1.generateCSSVariables)(variables);
+};
+exports.useListCardItemPadding = useListCardItemPadding;

package/__inner__/cjs/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__/cjs/components/ListCardItem/index.js

@@ -4,6 +4,7 @@ var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./entities"), exports);
 tslib_1.__exportStar(require("./modules"), exports);
 tslib_1.__exportStar(require("./classNames"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./ListCardItem"), exports);
 tslib_1.__exportStar(require("./ListCardItemContext"), exports);
 tslib_1.__exportStar(require("./presets"), exports);