@fringeworks/react-layouts 0.8.0

package/_internal/applyLayout/types.d.cts

@@ -0,0 +1,37 @@
+import { LooseDictionary } from "@fringeworks/types";
+import { CSSProperties } from "react";
+
+//#region src/_internal/applyLayout/types.d.ts
+/**
+ * レイアウト機能が消費する共通のプロパティ
+ */
+type LayoutBaseProps = {
+  /**
+   * クラス
+   */
+  className?: string;
+  /**
+   * スクロールの有無
+   */
+  scroll?: boolean;
+  /**
+   * スタイル
+   */
+  style?: CSSProperties;
+};
+/**
+ * レイアウト用のスタイルを適用する際のオプション
+ */
+type ApplyLayoutOptions<O extends object = LooseDictionary> = O & LayoutBaseProps;
+type ApplyLayoutResult = {
+  /**
+   * クラス
+   */
+  className: string;
+  /**
+   * スタイル
+   */
+  style: CSSProperties;
+};
+//#endregion
+export { ApplyLayoutOptions, ApplyLayoutResult, LayoutBaseProps };

package/_internal/applyLayout/types.d.mts

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+import { LooseDictionary } from "@fringeworks/types";
+
+//#region src/_internal/applyLayout/types.d.ts
+/**
+ * レイアウト機能が消費する共通のプロパティ
+ */
+type LayoutBaseProps = {
+  /**
+   * クラス
+   */
+  className?: string;
+  /**
+   * スクロールの有無
+   */
+  scroll?: boolean;
+  /**
+   * スタイル
+   */
+  style?: CSSProperties;
+};
+/**
+ * レイアウト用のスタイルを適用する際のオプション
+ */
+type ApplyLayoutOptions<O extends object = LooseDictionary> = O & LayoutBaseProps;
+type ApplyLayoutResult = {
+  /**
+   * クラス
+   */
+  className: string;
+  /**
+   * スタイル
+   */
+  style: CSSProperties;
+};
+//#endregion
+export { ApplyLayoutOptions, ApplyLayoutResult, LayoutBaseProps };

package/_internal/applyLayout/types.mjs

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

package/_internal/withLayoutBase/index.cjs

@@ -0,0 +1,3 @@
+const require__internal_withLayoutBase_withLayoutBase = require('./withLayoutBase.cjs');
+
+module.exports = require__internal_withLayoutBase_withLayoutBase;

package/_internal/withLayoutBase/index.d.cts

@@ -0,0 +1,3 @@
+import { AllKeys, LayoutComponentBase, LayoutSource, WithLayoutBaseOptions, WithLayoutProps } from "./types.cjs";
+import withLayoutBase from "./withLayoutBase.cjs";
+export { type AllKeys, type LayoutComponentBase, type LayoutSource, type WithLayoutBaseOptions, type WithLayoutProps, withLayoutBase as default };

package/_internal/withLayoutBase/index.d.mts

@@ -0,0 +1,3 @@
+import { AllKeys, LayoutComponentBase, LayoutSource, WithLayoutBaseOptions, WithLayoutProps } from "./types.mjs";
+import withLayoutBase from "./withLayoutBase.mjs";
+export { type AllKeys, type LayoutComponentBase, type LayoutSource, type WithLayoutBaseOptions, type WithLayoutProps, withLayoutBase as default };

package/_internal/withLayoutBase/index.mjs

@@ -0,0 +1,3 @@
+import withLayoutBase from "./withLayoutBase.mjs";
+
+export { withLayoutBase as default };

package/_internal/withLayoutBase/types.d.cts

@@ -0,0 +1,43 @@
+import { LayoutBaseProps } from "../applyLayout/types.cjs";
+import { CreateLayoutStyle } from "@fringeworks/style-layouts";
+import { ComponentPropsWithoutRef, ComponentRef, ElementType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import { StyleProxyOptions } from "@fringeworks/react-style-proxy/styleProxy";
+
+//#region src/_internal/withLayoutBase/types.d.ts
+/**
+ * ユニオン型を分配して全てのキーを取り出す
+ *
+ * `keyof`をユニオン型へそのまま適用すると共通のキーしか得られないため、
+ * 分配してから取り出す
+ */
+type AllKeys<T> = T extends unknown ? keyof T : never;
+/**
+ * 適用するレイアウト
+ *
+ * - レイアウト関数: 常にそのレイアウトを適用する（静的）
+ * - レイアウト関数のマップ: `layout`プロパティで選択したレイアウトを適用する（動的）
+ */
+type LayoutSource<O> = CreateLayoutStyle<O> | Record<string, CreateLayoutStyle<never>>;
+/**
+ * HOCのオプション
+ */
+type WithLayoutBaseOptions = Omit<StyleProxyOptions, 'styleAsDefault'> & {
+  /**
+   * コンポーネントに設定するdisplayName
+   */
+  displayName?: string;
+  /**
+   * クラス名
+   */
+  className?: string;
+};
+/**
+ * レイアウト機能を追加したコンポーネントのプロパティ
+ */
+type WithLayoutProps<C extends ElementType, O> = Omit<ComponentPropsWithoutRef<C>, AllKeys<O> | keyof LayoutBaseProps> & O & LayoutBaseProps;
+/**
+ * レイアウト機能を追加したコンポーネント
+ */
+type LayoutComponentBase<C extends ElementType, O> = ForwardRefExoticComponent<PropsWithoutRef<WithLayoutProps<C, O>> & RefAttributes<ComponentRef<C>>>;
+//#endregion
+export { AllKeys, LayoutComponentBase, LayoutSource, WithLayoutBaseOptions, WithLayoutProps };

package/_internal/withLayoutBase/types.d.mts

@@ -0,0 +1,43 @@
+import { LayoutBaseProps } from "../applyLayout/types.mjs";
+import { ComponentPropsWithoutRef, ComponentRef, ElementType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import { CreateLayoutStyle } from "@fringeworks/style-layouts";
+import { StyleProxyOptions } from "@fringeworks/react-style-proxy/styleProxy";
+
+//#region src/_internal/withLayoutBase/types.d.ts
+/**
+ * ユニオン型を分配して全てのキーを取り出す
+ *
+ * `keyof`をユニオン型へそのまま適用すると共通のキーしか得られないため、
+ * 分配してから取り出す
+ */
+type AllKeys<T> = T extends unknown ? keyof T : never;
+/**
+ * 適用するレイアウト
+ *
+ * - レイアウト関数: 常にそのレイアウトを適用する（静的）
+ * - レイアウト関数のマップ: `layout`プロパティで選択したレイアウトを適用する（動的）
+ */
+type LayoutSource<O> = CreateLayoutStyle<O> | Record<string, CreateLayoutStyle<never>>;
+/**
+ * HOCのオプション
+ */
+type WithLayoutBaseOptions = Omit<StyleProxyOptions, 'styleAsDefault'> & {
+  /**
+   * コンポーネントに設定するdisplayName
+   */
+  displayName?: string;
+  /**
+   * クラス名
+   */
+  className?: string;
+};
+/**
+ * レイアウト機能を追加したコンポーネントのプロパティ
+ */
+type WithLayoutProps<C extends ElementType, O> = Omit<ComponentPropsWithoutRef<C>, AllKeys<O> | keyof LayoutBaseProps> & O & LayoutBaseProps;
+/**
+ * レイアウト機能を追加したコンポーネント
+ */
+type LayoutComponentBase<C extends ElementType, O> = ForwardRefExoticComponent<PropsWithoutRef<WithLayoutProps<C, O>> & RefAttributes<ComponentRef<C>>>;
+//#endregion
+export { AllKeys, LayoutComponentBase, LayoutSource, WithLayoutBaseOptions, WithLayoutProps };

package/_internal/withLayoutBase/types.mjs

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

package/_internal/withLayoutBase/withLayoutBase.cjs

@@ -0,0 +1,50 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require__internal__constants = require('../_constants.cjs');
+const require__internal_applyLayout_applyLayout = require('../applyLayout/applyLayout.cjs');
+let _fringeworks_react_style_proxy = require("@fringeworks/react-style-proxy");
+let _fringeworks_react_utils_utils_ensureComponent = require("@fringeworks/react-utils/utils/ensureComponent");
+_fringeworks_react_utils_utils_ensureComponent = require_runtime.__toESM(_fringeworks_react_utils_utils_ensureComponent, 1);
+let _fringeworks_utils = require("@fringeworks/utils");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+let react = require("react");
+
+//#region src/_internal/withLayoutBase/withLayoutBase.tsx
+/**
+* コンテナーのレイアウト機能を追加するHOC
+* @param Component コンポーネント
+* @param layout 適用するレイアウト
+* @param options オプション
+* @returns
+*/
+function withLayoutBase(Component, layout, options = {}) {
+	const EnsuredComponent = (0, _fringeworks_react_utils_utils_ensureComponent.default)((0, _fringeworks_utils.unsafeCast)(Component));
+	const name = EnsuredComponent.displayName ?? EnsuredComponent.name ?? "Unknown";
+	const { displayName = `withLayout(${name})`, className: staticClassName, ...restOptions } = options;
+	const styleProxyOptions = {
+		styleAsDefault: true,
+		...restOptions
+	};
+	const resolveLayout = typeof layout === "function" ? (layout, props) => {
+		return [(0, _fringeworks_utils.unsafeCast)(layout), props];
+	} : (layout, props) => {
+		const { layout: type, ...rest } = props;
+		return [(0, _fringeworks_utils.unsafeCast)(layout[type]), rest];
+	};
+	const LayoutComponent = (0, react.forwardRef)((props, ref) => {
+		const [createLayoutStyle, layoutOptions] = resolveLayout(layout, props);
+		const layoutProps = require__internal_applyLayout_applyLayout(createLayoutStyle, (0, _fringeworks_utils.unsafeCast)(layoutOptions));
+		const containerProps = { ...layoutOptions };
+		for (const key in require__internal__constants.LAYOUT_PROPS_KEYS) delete containerProps[key];
+		return (0, react.createElement)(EnsuredComponent, {
+			ref,
+			className: (0, clsx.default)(staticClassName, layoutProps.className),
+			...(0, _fringeworks_react_style_proxy.styleProxy)(containerProps, layoutProps.style, styleProxyOptions)
+		});
+	});
+	LayoutComponent.displayName = displayName;
+	return LayoutComponent;
+}
+
+//#endregion
+module.exports = withLayoutBase;

package/_internal/withLayoutBase/withLayoutBase.d.cts

@@ -0,0 +1,13 @@
+import { LayoutComponentBase, LayoutSource, WithLayoutBaseOptions } from "./types.cjs";
+import { ElementType } from "react";
+
+//#region src/_internal/withLayoutBase/withLayoutBase.d.ts
+/**
+ * コンテナーのレイアウト機能を追加するHOC
+ * @param Component コンポーネント
+ * @param layout 適用するレイアウト
+ * @param options オプション
+ * @returns
+ */
+declare function withLayoutBase<C extends ElementType, O extends object>(Component: C, layout: LayoutSource<O>, options?: WithLayoutBaseOptions): LayoutComponentBase<C, O>;
+export = withLayoutBase;

package/_internal/withLayoutBase/withLayoutBase.d.mts

@@ -0,0 +1,14 @@
+import { LayoutComponentBase, LayoutSource, WithLayoutBaseOptions } from "./types.mjs";
+import { ElementType } from "react";
+
+//#region src/_internal/withLayoutBase/withLayoutBase.d.ts
+/**
+ * コンテナーのレイアウト機能を追加するHOC
+ * @param Component コンポーネント
+ * @param layout 適用するレイアウト
+ * @param options オプション
+ * @returns
+ */
+declare function withLayoutBase<C extends ElementType, O extends object>(Component: C, layout: LayoutSource<O>, options?: WithLayoutBaseOptions): LayoutComponentBase<C, O>;
+//#endregion
+export { withLayoutBase as default };

package/_internal/withLayoutBase/withLayoutBase.mjs

@@ -0,0 +1,47 @@
+import { LAYOUT_PROPS_KEYS } from "../_constants.mjs";
+import applyLayout from "../applyLayout/applyLayout.mjs";
+import { styleProxy } from "@fringeworks/react-style-proxy";
+import ensureComponent from "@fringeworks/react-utils/utils/ensureComponent";
+import { unsafeCast } from "@fringeworks/utils";
+import clsx from "clsx";
+import { createElement, forwardRef } from "react";
+
+//#region src/_internal/withLayoutBase/withLayoutBase.tsx
+/**
+* コンテナーのレイアウト機能を追加するHOC
+* @param Component コンポーネント
+* @param layout 適用するレイアウト
+* @param options オプション
+* @returns
+*/
+function withLayoutBase(Component, layout, options = {}) {
+	const EnsuredComponent = ensureComponent(unsafeCast(Component));
+	const name = EnsuredComponent.displayName ?? EnsuredComponent.name ?? "Unknown";
+	const { displayName = `withLayout(${name})`, className: staticClassName, ...restOptions } = options;
+	const styleProxyOptions = {
+		styleAsDefault: true,
+		...restOptions
+	};
+	const resolveLayout = typeof layout === "function" ? (layout, props) => {
+		return [unsafeCast(layout), props];
+	} : (layout, props) => {
+		const { layout: type, ...rest } = props;
+		return [unsafeCast(layout[type]), rest];
+	};
+	const LayoutComponent = forwardRef((props, ref) => {
+		const [createLayoutStyle, layoutOptions] = resolveLayout(layout, props);
+		const layoutProps = applyLayout(createLayoutStyle, unsafeCast(layoutOptions));
+		const containerProps = { ...layoutOptions };
+		for (const key in LAYOUT_PROPS_KEYS) delete containerProps[key];
+		return createElement(EnsuredComponent, {
+			ref,
+			className: clsx(staticClassName, layoutProps.className),
+			...styleProxy(containerProps, layoutProps.style, styleProxyOptions)
+		});
+	});
+	LayoutComponent.displayName = displayName;
+	return LayoutComponent;
+}
+
+//#endregion
+export { withLayoutBase as default };

package/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,43 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__exportAll = __exportAll;
+exports.__toESM = __toESM;

package/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/constants.cjs

@@ -0,0 +1,57 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _fringeworks_style_layouts_constants = require("@fringeworks/style-layouts/constants");
+
+//#region src/constants.ts
+/**
+* レイアウト種別
+*/
+const LayoutType = {
+	balance: "balance",
+	center: "center",
+	flow: "flow",
+	layer: "layer",
+	matrix: "matrix",
+	pack: "pack",
+	pin: "pin",
+	stack: "stack",
+	tile: "tile"
+};
+
+//#endregion
+Object.defineProperty(exports, 'Adjust', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Adjust;
+  }
+});
+Object.defineProperty(exports, 'AlignX', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignX;
+  }
+});
+Object.defineProperty(exports, 'AlignXBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignXBase;
+  }
+});
+Object.defineProperty(exports, 'AlignY', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignY;
+  }
+});
+Object.defineProperty(exports, 'AlignYBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignYBase;
+  }
+});
+Object.defineProperty(exports, 'Direction', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Direction;
+  }
+});
+exports.LayoutType = LayoutType;

package/constants.d.cts

@@ -0,0 +1,20 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction } from "@fringeworks/style-layouts/constants";
+
+//#region src/constants.d.ts
+/**
+ * レイアウト種別
+ */
+declare const LayoutType: {
+  readonly balance: "balance";
+  readonly center: "center";
+  readonly flow: "flow";
+  readonly layer: "layer";
+  readonly matrix: "matrix";
+  readonly pack: "pack";
+  readonly pin: "pin";
+  readonly stack: "stack";
+  readonly tile: "tile";
+};
+type LayoutType = (typeof LayoutType)[keyof typeof LayoutType];
+//#endregion
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType };

package/constants.d.mts

@@ -0,0 +1,20 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction } from "@fringeworks/style-layouts/constants";
+
+//#region src/constants.d.ts
+/**
+ * レイアウト種別
+ */
+declare const LayoutType: {
+  readonly balance: "balance";
+  readonly center: "center";
+  readonly flow: "flow";
+  readonly layer: "layer";
+  readonly matrix: "matrix";
+  readonly pack: "pack";
+  readonly pin: "pin";
+  readonly stack: "stack";
+  readonly tile: "tile";
+};
+type LayoutType = (typeof LayoutType)[keyof typeof LayoutType];
+//#endregion
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType };

package/constants.mjs

@@ -0,0 +1,20 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction } from "@fringeworks/style-layouts/constants";
+
+//#region src/constants.ts
+/**
+* レイアウト種別
+*/
+const LayoutType = {
+	balance: "balance",
+	center: "center",
+	flow: "flow",
+	layer: "layer",
+	matrix: "matrix",
+	pack: "pack",
+	pin: "pin",
+	stack: "stack",
+	tile: "tile"
+};
+
+//#endregion
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType };

package/css/balance.css

@@ -0,0 +1,171 @@
+.lx-layout-balance {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: grid;
+}
+
+.lx-layout-balance.lx-layout-direction-x {
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+
+.lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-fit {
+  grid-auto-columns: auto;
+}
+
+.lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, max-content);
+}
+
+.lx-layout-balance.lx-layout-direction-x.lx-layout-itemSizeX {
+  grid-auto-columns: auto;
+}
+
+.lx-layout-balance.lx-layout-direction-y {
+  grid-auto-flow: row;
+  grid-auto-rows: max-content;
+}
+
+.lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-fit {
+  grid-auto-rows: auto;
+}
+
+.lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, max-content);
+}
+
+.lx-layout-balance.lx-layout-direction-y.lx-layout-itemSizeY {
+  grid-auto-rows: auto;
+}
+
+.lx-layout-balance.lx-layout-alignX-left {
+  justify-items: flex-start;
+}
+
+.lx-layout-balance.lx-layout-alignX-center {
+  justify-items: center;
+}
+
+.lx-layout-balance.lx-layout-alignX-right {
+  justify-items: flex-end;
+}
+
+.lx-layout-balance.lx-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+
+.lx-layout-balance.lx-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+
+.lx-layout-balance.lx-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.lx-layout-balance.lx-layout-alignY-top {
+  align-items: flex-start;
+}
+
+.lx-layout-balance.lx-layout-alignY-middle {
+  align-items: center;
+}
+
+.lx-layout-balance.lx-layout-alignY-bottom {
+  align-items: flex-end;
+}
+
+.lx-layout-balance.lx-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+
+.lx-layout-balance.lx-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+
+.lx-layout-balance.lx-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+
+.lx-layout-balance > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.lx-layout-balance.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-balance.lx-layout-adjustX-fit {
+  justify-items: stretch;
+}
+
+.lx-layout-balance.lx-layout-adjustX-fit > * {
+  width: auto;
+}
+
+.lx-layout-balance.lx-layout-adjustX-grow > *, .lx-layout-balance.lx-layout-adjustX-shrink > * {
+  width: 100%;
+}
+
+.lx-layout-balance.lx-layout-adjustX-grow > * {
+  min-width: max-content;
+}
+
+.lx-layout-balance.lx-layout-adjustX-grow.lx-layout-itemSizeX > * {
+  min-width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-balance.lx-layout-adjustX-shrink > * {
+  max-width: max-content;
+}
+
+.lx-layout-balance.lx-layout-adjustX-shrink.lx-layout-itemSizeX > * {
+  max-width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-balance.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-balance.lx-layout-adjustY-fit {
+  align-items: stretch;
+}
+
+.lx-layout-balance.lx-layout-adjustY-fit > * {
+  height: auto;
+}
+
+.lx-layout-balance.lx-layout-adjustY-grow > *, .lx-layout-balance.lx-layout-adjustY-shrink > * {
+  height: 100%;
+}
+
+.lx-layout-balance.lx-layout-adjustY-grow:not(.lx-layout-itemSizeY) > * {
+  min-height: max-content;
+}
+
+.lx-layout-balance.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
+  min-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-balance.lx-layout-adjustY-shrink:not(.lx-layout-itemSizeY) > * {
+  max-height: max-content;
+}
+
+.lx-layout-balance.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
+  max-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-balance.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+
+.lx-layout-balance.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-balance.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}