@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/_constants.d.mts

@@ -0,0 +1,237 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.mjs";
+
+//#region src/_constants.d.ts
+/**
+ * レイアウト種別: stack
+ */
+declare const clsLayoutStack = "lx-layout-stack";
+/**
+ * レイアウト種別: flow
+ */
+declare const clsLayoutFlow = "lx-layout-flow";
+/**
+ * レイアウト種別: tile
+ */
+declare const clsLayoutTile = "lx-layout-tile";
+/**
+ * レイアウト種別: matrix
+ */
+declare const clsLayoutMatrix = "lx-layout-matrix";
+/**
+ * レイアウト種別: center
+ */
+declare const clsLayoutCenter = "lx-layout-center";
+/**
+ * レイアウト種別: pack
+ */
+declare const clsLayoutPack = "lx-layout-pack";
+/**
+ * レイアウト種別: balance
+ */
+declare const clsLayoutBalance = "lx-layout-balance";
+/**
+ * レイアウト種別: layer
+ */
+declare const clsLayoutLayer = "lx-layout-layer";
+/**
+ * レイアウト種別: pin
+ */
+declare const clsLayoutPin = "lx-layout-pin";
+/**
+ * 整列: 横方向
+ */
+declare const clsLayoutDirectionX = "lx-layout-direction-x";
+/**
+ * 整列: 縦方向
+ */
+declare const clsLayoutDirectionY = "lx-layout-direction-y";
+/**
+ * 横位置: 左
+ */
+declare const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+/**
+ * 横位置: 中央
+ */
+declare const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+/**
+ * 横位置: 右
+ */
+declare const clsLayoutAlignXRight = "lx-layout-alignX-right";
+/**
+ * 横位置: 両端揃え
+ */
+declare const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+/**
+ * 横位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+/**
+ * 横位置: 完全均等
+ */
+declare const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+/**
+ * 縦位置: 上
+ */
+declare const clsLayoutAlignYTop = "lx-layout-alignY-top";
+/**
+ * 縦位置: 中央
+ */
+declare const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+/**
+ * 縦位置: 下
+ */
+declare const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+/**
+ * 縦位置: 両端揃え
+ */
+declare const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+/**
+ * 縦位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+/**
+ * 縦位置: 完全均等
+ */
+declare const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+/**
+ * 子要素の幅調整: なし
+ */
+declare const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+/**
+ * 子要素の幅調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+/**
+ * 子要素の幅調整: 伸ばす
+ */
+declare const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+/**
+ * 子要素の幅調整: 縮める
+ */
+declare const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+/**
+ * 子要素の高さ調整: なし
+ */
+declare const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+/**
+ * 子要素の高さ調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+/**
+ * 子要素の高さ調整: 伸ばす
+ */
+declare const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+/**
+ * 子要素の高さ調整: 縮める
+ */
+declare const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+/**
+ * 間隔: 横方向
+ */
+declare const clsLayoutGapX = "lx-layout-gapX";
+/**
+ * 間隔: 縦方向
+ */
+declare const clsLayoutGapY = "lx-layout-gapY";
+/**
+ * 子要素の幅
+ */
+declare const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+/**
+ * 子要素の高さ
+ */
+declare const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+/**
+ * 子要素の縦横比
+ */
+declare const clsLayoutItemRatio = "lx-layout-itemRatio";
+/**
+ * 子要素の横方向の数
+ */
+declare const clsLayoutItemCountX = "lx-layout-itemCountX";
+/**
+ * 子要素の縦方向の数
+ */
+declare const clsLayoutItemCountY = "lx-layout-itemCountY";
+/**
+ * 横方向のテンプレート
+ */
+declare const clsLayoutTemplateX = "lx-layout-templateX";
+/**
+ * 縦方向のテンプレート
+ */
+declare const clsLayoutTemplateY = "lx-layout-templateY";
+/**
+ * 変数\
+ * 間隔: 横方向
+ */
+declare const varLayoutGapX = "--lx-layout-gapX";
+/**
+ * 変数\
+ * 間隔: 縦方向
+ */
+declare const varLayoutGapY = "--lx-layout-gapY";
+/**
+ * 変数\
+ * 子要素の幅
+ */
+declare const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+/**
+ * 変数\
+ * 子要素の高さ
+ */
+declare const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+/**
+ * 変数\
+ * 子要素の縦横比
+ */
+declare const varLayoutItemRatio = "--lx-layout-itemRatio";
+/**
+ * 変数\
+ * 子要素の横方向の数
+ */
+declare const varLayoutItemCountX = "--lx-layout-itemCountX";
+/**
+ * 変数\
+ * 子要素の縦方向の数
+ */
+declare const varLayoutItemCountY = "--lx-layout-itemCountY";
+/**
+ * 変数\
+ * 横方向のテンプレート
+ */
+declare const varLayoutTemplateX = "--lx-layout-templateX";
+/**
+ * 変数\
+ * 縦方向のテンプレート
+ */
+declare const varLayoutTemplateY = "--lx-layout-templateY";
+/**
+ * axis毎のクラス
+ */
+declare const clsLayout: {
+  direction: Record<Direction, string>;
+  align: Record<Direction, Partial<Record<AlignX | AlignY, string>>>;
+  adjust: Record<Direction, Record<Adjust, string>>;
+  itemSize: Record<Direction, string>;
+  template: Record<Direction, string>;
+};
+/**
+ * axis毎の変数
+ */
+declare const varLayout: {
+  readonly itemSize: {
+    readonly x: "--lx-layout-itemSizeX";
+    readonly y: "--lx-layout-itemSizeY";
+  };
+  readonly template: {
+    readonly x: "--lx-layout-templateX";
+    readonly y: "--lx-layout-templateY";
+  };
+  readonly gap: {
+    readonly x: "--lx-layout-gapX";
+    readonly y: "--lx-layout-gapY";
+  };
+};
+//#endregion
+export { clsLayout, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutItemCountX, clsLayoutItemCountY, clsLayoutItemRatio, clsLayoutItemSizeX, clsLayoutItemSizeY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayout, varLayoutGapX, varLayoutGapY, varLayoutItemCountX, varLayoutItemCountY, varLayoutItemRatio, varLayoutItemSizeX, varLayoutItemSizeY, varLayoutTemplateX, varLayoutTemplateY };

package/_constants.mjs

@@ -0,0 +1,275 @@
+//#region src/_constants.ts
+/**
+* レイアウト種別: stack
+*/
+const clsLayoutStack = "lx-layout-stack";
+/**
+* レイアウト種別: flow
+*/
+const clsLayoutFlow = "lx-layout-flow";
+/**
+* レイアウト種別: tile
+*/
+const clsLayoutTile = "lx-layout-tile";
+/**
+* レイアウト種別: matrix
+*/
+const clsLayoutMatrix = "lx-layout-matrix";
+/**
+* レイアウト種別: center
+*/
+const clsLayoutCenter = "lx-layout-center";
+/**
+* レイアウト種別: pack
+*/
+const clsLayoutPack = "lx-layout-pack";
+/**
+* レイアウト種別: balance
+*/
+const clsLayoutBalance = "lx-layout-balance";
+/**
+* レイアウト種別: layer
+*/
+const clsLayoutLayer = "lx-layout-layer";
+/**
+* レイアウト種別: pin
+*/
+const clsLayoutPin = "lx-layout-pin";
+/**
+* 整列: 横方向
+*/
+const clsLayoutDirectionX = "lx-layout-direction-x";
+/**
+* 整列: 縦方向
+*/
+const clsLayoutDirectionY = "lx-layout-direction-y";
+/**
+* 横位置: 左
+*/
+const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+/**
+* 横位置: 中央
+*/
+const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+/**
+* 横位置: 右
+*/
+const clsLayoutAlignXRight = "lx-layout-alignX-right";
+/**
+* 横位置: 両端揃え
+*/
+const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+/**
+* 横位置: 両端余白あり均等
+*/
+const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+/**
+* 横位置: 完全均等
+*/
+const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+/**
+* 縦位置: 上
+*/
+const clsLayoutAlignYTop = "lx-layout-alignY-top";
+/**
+* 縦位置: 中央
+*/
+const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+/**
+* 縦位置: 下
+*/
+const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+/**
+* 縦位置: 両端揃え
+*/
+const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+/**
+* 縦位置: 両端余白あり均等
+*/
+const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+/**
+* 縦位置: 完全均等
+*/
+const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+/**
+* 子要素の幅調整: なし
+*/
+const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+/**
+* 子要素の幅調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+/**
+* 子要素の幅調整: 伸ばす
+*/
+const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+/**
+* 子要素の幅調整: 縮める
+*/
+const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+/**
+* 子要素の高さ調整: なし
+*/
+const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+/**
+* 子要素の高さ調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+/**
+* 子要素の高さ調整: 伸ばす
+*/
+const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+/**
+* 子要素の高さ調整: 縮める
+*/
+const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+/**
+* 間隔: 横方向
+*/
+const clsLayoutGapX = "lx-layout-gapX";
+/**
+* 間隔: 縦方向
+*/
+const clsLayoutGapY = "lx-layout-gapY";
+/**
+* 子要素の幅
+*/
+const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+/**
+* 子要素の高さ
+*/
+const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+/**
+* 子要素の縦横比
+*/
+const clsLayoutItemRatio = "lx-layout-itemRatio";
+/**
+* 子要素の横方向の数
+*/
+const clsLayoutItemCountX = "lx-layout-itemCountX";
+/**
+* 子要素の縦方向の数
+*/
+const clsLayoutItemCountY = "lx-layout-itemCountY";
+/**
+* 横方向のテンプレート
+*/
+const clsLayoutTemplateX = "lx-layout-templateX";
+/**
+* 縦方向のテンプレート
+*/
+const clsLayoutTemplateY = "lx-layout-templateY";
+/**
+* 変数\
+* 間隔: 横方向
+*/
+const varLayoutGapX = "--lx-layout-gapX";
+/**
+* 変数\
+* 間隔: 縦方向
+*/
+const varLayoutGapY = "--lx-layout-gapY";
+/**
+* 変数\
+* 子要素の幅
+*/
+const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+/**
+* 変数\
+* 子要素の高さ
+*/
+const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+/**
+* 変数\
+* 子要素の縦横比
+*/
+const varLayoutItemRatio = "--lx-layout-itemRatio";
+/**
+* 変数\
+* 子要素の横方向の数
+*/
+const varLayoutItemCountX = "--lx-layout-itemCountX";
+/**
+* 変数\
+* 子要素の縦方向の数
+*/
+const varLayoutItemCountY = "--lx-layout-itemCountY";
+/**
+* 変数\
+* 横方向のテンプレート
+*/
+const varLayoutTemplateX = "--lx-layout-templateX";
+/**
+* 変数\
+* 縦方向のテンプレート
+*/
+const varLayoutTemplateY = "--lx-layout-templateY";
+/**
+* axis毎のクラス
+*/
+const clsLayout = {
+	direction: {
+		x: clsLayoutDirectionX,
+		y: clsLayoutDirectionY
+	},
+	align: {
+		x: {
+			left: clsLayoutAlignXLeft,
+			center: clsLayoutAlignXCenter,
+			right: clsLayoutAlignXRight,
+			"space-between": clsLayoutAlignXSpaceBetween,
+			"space-around": clsLayoutAlignXSpaceAround,
+			"space-evenly": clsLayoutAlignXSpaceEvenly
+		},
+		y: {
+			top: clsLayoutAlignYTop,
+			middle: clsLayoutAlignYMiddle,
+			bottom: clsLayoutAlignYBottom,
+			"space-between": clsLayoutAlignYSpaceBetween,
+			"space-around": clsLayoutAlignYSpaceAround,
+			"space-evenly": clsLayoutAlignYSpaceEvenly
+		}
+	},
+	adjust: {
+		x: {
+			none: clsLayoutAdjustXNone,
+			fit: clsLayoutAdjustXFit,
+			grow: clsLayoutAdjustXExpand,
+			shrink: clsLayoutAdjustXShrink
+		},
+		y: {
+			none: clsLayoutAdjustYNone,
+			fit: clsLayoutAdjustYFit,
+			grow: clsLayoutAdjustYExpand,
+			shrink: clsLayoutAdjustYShrink
+		}
+	},
+	itemSize: {
+		x: clsLayoutItemSizeX,
+		y: clsLayoutItemSizeY
+	},
+	template: {
+		x: clsLayoutTemplateX,
+		y: clsLayoutTemplateY
+	}
+};
+/**
+* axis毎の変数
+*/
+const varLayout = {
+	itemSize: {
+		x: varLayoutItemSizeX,
+		y: varLayoutItemSizeY
+	},
+	template: {
+		x: varLayoutTemplateX,
+		y: varLayoutTemplateY
+	},
+	gap: {
+		x: varLayoutGapX,
+		y: varLayoutGapY
+	}
+};
+
+//#endregion
+export { clsLayout, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutItemCountX, clsLayoutItemCountY, clsLayoutItemRatio, clsLayoutItemSizeX, clsLayoutItemSizeY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayout, varLayoutGapX, varLayoutGapY, varLayoutItemCountX, varLayoutItemCountY, varLayoutItemRatio, varLayoutItemSizeX, varLayoutItemSizeY, varLayoutTemplateX, varLayoutTemplateY };

package/_internal/applyGap.cjs

@@ -0,0 +1,30 @@
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('./hasValue.cjs');
+const require__internal_mergeClassName = require('./mergeClassName.cjs');
+const require__internal_unit = require('./unit.cjs');
+
+//#region src/_internal/applyGap.ts
+/**
+* スペーシングに関する設定の適用
+* @param result
+* @param gap
+* @param gapX
+* @param gapY
+*/
+function applyGap(result, gap, gapX, gapY) {
+	gapX = gapX ?? gap;
+	if (require__internal_hasValue(gapX)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutGapX);
+		result.style ??= {};
+		result.style[require__constants.varLayoutGapX] = require__internal_unit(gapX);
+	}
+	gapY = gapY ?? gap;
+	if (require__internal_hasValue(gapY)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutGapY);
+		result.style ??= {};
+		result.style[require__constants.varLayoutGapY] = require__internal_unit(gapY);
+	}
+}
+
+//#endregion
+module.exports = applyGap;

package/_internal/applyGap.d.cts

@@ -0,0 +1,12 @@
+import { LayoutStyle } from "../types.cjs";
+
+//#region src/_internal/applyGap.d.ts
+/**
+ * スペーシングに関する設定の適用
+ * @param result
+ * @param gap
+ * @param gapX
+ * @param gapY
+ */
+declare function applyGap(result: LayoutStyle, gap: number | null | undefined, gapX: number | null | undefined, gapY: number | null | undefined): void;
+export = applyGap;

package/_internal/applyGap.d.mts

@@ -0,0 +1,13 @@
+import { LayoutStyle } from "../types.mjs";
+
+//#region src/_internal/applyGap.d.ts
+/**
+ * スペーシングに関する設定の適用
+ * @param result
+ * @param gap
+ * @param gapX
+ * @param gapY
+ */
+declare function applyGap(result: LayoutStyle, gap: number | null | undefined, gapX: number | null | undefined, gapY: number | null | undefined): void;
+//#endregion
+export { applyGap as default };

package/_internal/applyGap.mjs

@@ -0,0 +1,30 @@
+import { clsLayoutGapX, clsLayoutGapY, varLayoutGapX, varLayoutGapY } from "../_constants.mjs";
+import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
+import unit from "./unit.mjs";
+
+//#region src/_internal/applyGap.ts
+/**
+* スペーシングに関する設定の適用
+* @param result
+* @param gap
+* @param gapX
+* @param gapY
+*/
+function applyGap(result, gap, gapX, gapY) {
+	gapX = gapX ?? gap;
+	if (hasValue(gapX)) {
+		result.className = mergeClassName(result.className, clsLayoutGapX);
+		result.style ??= {};
+		result.style[varLayoutGapX] = unit(gapX);
+	}
+	gapY = gapY ?? gap;
+	if (hasValue(gapY)) {
+		result.className = mergeClassName(result.className, clsLayoutGapY);
+		result.style ??= {};
+		result.style[varLayoutGapY] = unit(gapY);
+	}
+}
+
+//#endregion
+export { applyGap as default };

package/_internal/applyItemCount.cjs

@@ -0,0 +1,20 @@
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('./hasValue.cjs');
+const require__internal_mergeClassName = require('./mergeClassName.cjs');
+
+//#region src/_internal/applyItemCount.ts
+function applyItemCount(result, itemCountX, itemCountY) {
+	if (require__internal_hasValue(itemCountX)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutItemCountX);
+		result.style ??= {};
+		result.style[require__constants.varLayoutItemCountX] = `${itemCountX}`;
+	}
+	if (require__internal_hasValue(itemCountY)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutItemCountY);
+		result.style ??= {};
+		result.style[require__constants.varLayoutItemCountY] = `${itemCountY}`;
+	}
+}
+
+//#endregion
+module.exports = applyItemCount;

package/_internal/applyItemCount.d.cts

@@ -0,0 +1,5 @@
+import { LayoutStyle } from "../types.cjs";
+
+//#region src/_internal/applyItemCount.d.ts
+declare function applyItemCount(result: LayoutStyle, itemCountX: number | null | undefined, itemCountY: number | null | undefined): void;
+export = applyItemCount;

package/_internal/applyItemCount.d.mts

@@ -0,0 +1,6 @@
+import { LayoutStyle } from "../types.mjs";
+
+//#region src/_internal/applyItemCount.d.ts
+declare function applyItemCount(result: LayoutStyle, itemCountX: number | null | undefined, itemCountY: number | null | undefined): void;
+//#endregion
+export { applyItemCount as default };

package/_internal/applyItemCount.mjs

@@ -0,0 +1,20 @@
+import { clsLayoutItemCountX, clsLayoutItemCountY, varLayoutItemCountX, varLayoutItemCountY } from "../_constants.mjs";
+import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
+
+//#region src/_internal/applyItemCount.ts
+function applyItemCount(result, itemCountX, itemCountY) {
+	if (hasValue(itemCountX)) {
+		result.className = mergeClassName(result.className, clsLayoutItemCountX);
+		result.style ??= {};
+		result.style[varLayoutItemCountX] = `${itemCountX}`;
+	}
+	if (hasValue(itemCountY)) {
+		result.className = mergeClassName(result.className, clsLayoutItemCountY);
+		result.style ??= {};
+		result.style[varLayoutItemCountY] = `${itemCountY}`;
+	}
+}
+
+//#endregion
+export { applyItemCount as default };

package/_internal/applyItemRatio.cjs

@@ -0,0 +1,21 @@
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('./hasValue.cjs');
+const require__internal_mergeClassName = require('./mergeClassName.cjs');
+
+//#region src/_internal/applyItemRatio.ts
+/**
+* 子要素の縦横比に関する設定の適用
+* @param result
+* @param itemRatioX
+* @param itemRatioY
+*/
+function applyItemRatio(result, itemRatioX, itemRatioY) {
+	if (require__internal_hasValue(itemRatioX) || require__internal_hasValue(itemRatioY)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutItemRatio);
+		result.style ??= {};
+		result.style[require__constants.varLayoutItemRatio] = `${itemRatioX ?? 1} / ${itemRatioY ?? 1}`;
+	}
+}
+
+//#endregion
+module.exports = applyItemRatio;

package/_internal/applyItemRatio.d.cts

@@ -0,0 +1,11 @@
+import { LayoutStyle } from "../types.cjs";
+
+//#region src/_internal/applyItemRatio.d.ts
+/**
+ * 子要素の縦横比に関する設定の適用
+ * @param result
+ * @param itemRatioX
+ * @param itemRatioY
+ */
+declare function applyItemRatio(result: LayoutStyle, itemRatioX: number | null | undefined, itemRatioY: number | null | undefined): void;
+export = applyItemRatio;