@niche-works/style-layouts 0.2.0

package/core/constants.d.mts

@@ -0,0 +1,316 @@
+//#region src/core/constants.d.ts
+/**
+ * 整列方向
+ */
+declare const Direction: {
+  readonly x: "x";
+  readonly y: "y";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+/**
+ * 横位置
+ *
+ * - left: 左寄せ
+ * - center: 中央寄せ
+ * - right: 右寄せ
+ */
+declare const AlignXBase: {
+  readonly left: "left";
+  readonly center: "center";
+  readonly right: "right";
+};
+type AlignXBase = (typeof AlignXBase)[keyof typeof AlignXBase];
+/**
+ * 横位置
+ *
+ * - left: 左寄せ
+ * - center: 中央寄せ
+ * - right: 右寄せ
+ * - space-between: 両端揃え
+ * - space-around: 両端余白あり均等
+ * - space-evenly: 完全均等
+ */
+declare const AlignX: {
+  readonly 'space-between': "space-between";
+  readonly 'space-around': "space-around";
+  readonly 'space-evenly': "space-evenly";
+  readonly left: "left";
+  readonly center: "center";
+  readonly right: "right";
+};
+type AlignX = (typeof AlignX)[keyof typeof AlignX];
+/**
+ * 縦位置
+ *
+ * - top: 上寄せ
+ * - middle: 中央寄せ
+ * - bottom: 下寄せ
+ */
+declare const AlignYBase: {
+  readonly top: "top";
+  readonly middle: "middle";
+  readonly bottom: "bottom";
+};
+type AlignYBase = (typeof AlignYBase)[keyof typeof AlignYBase];
+/**
+ * 縦位置
+ *
+ * - top: 上寄せ
+ * - middle: 中央寄せ
+ * - bottom: 下寄せ
+ * - space-between: 両端揃え
+ * - space-around: 両端余白あり均等
+ * - space-evenly: 完全均等
+ */
+declare const AlignY: {
+  readonly 'space-between': "space-between";
+  readonly 'space-around': "space-around";
+  readonly 'space-evenly': "space-evenly";
+  readonly top: "top";
+  readonly middle: "middle";
+  readonly bottom: "bottom";
+};
+type AlignY = (typeof AlignY)[keyof typeof AlignY];
+/**
+ * 親要素のサイズを基準にした子要素のサイズ調整
+ *
+ * - `none`
+ *   - 親のサイズに足りないとき: そのまま
+ *   - 親のサイズを超えるとき: そのまま
+ */
+declare const AdjustBase: {
+  readonly none: "none";
+};
+type AdjustBase = (typeof AdjustBase)[keyof typeof AdjustBase];
+/**
+ * 親要素のサイズを基準にした子要素のサイズ調整
+ *
+ * - `none`
+ *   - 親のサイズに足りないとき: そのまま
+ *   - 親のサイズを超えるとき: そのまま
+ * - `fit`
+ *   - 親のサイズに足りないとき: 伸ばす
+ *   - 親のサイズを超えるとき: 縮める
+ * - `grow`
+ *   - 親のサイズに足りないとき: 伸ばす
+ *   - 親のサイズを超えるとき: そのまま
+ * - `shrink`
+ *   - 親のサイズに足りないとき: そのまま
+ *   - 親のサイズを超えるとき: 縮める
+ */
+declare const Adjust: {
+  readonly fit: "fit";
+  readonly grow: "grow";
+  readonly shrink: "shrink";
+  readonly none: "none";
+};
+type Adjust = (typeof Adjust)[keyof typeof Adjust];
+/**
+ * レイアウト種別: stack
+ */
+declare const clsLayoutStack = "nws-layout-stack";
+/**
+ * レイアウト種別: flow
+ */
+declare const clsLayoutFlow = "nws-layout-flow";
+/**
+ * レイアウト種別: tile
+ */
+declare const clsLayoutTile = "nws-layout-tile";
+/**
+ * レイアウト種別: matrix
+ */
+declare const clsLayoutMatrix = "nws-layout-matrix";
+/**
+ * レイアウト種別: center
+ */
+declare const clsLayoutCenter = "nws-layout-center";
+/**
+ * レイアウト種別: pack
+ */
+declare const clsLayoutPack = "nws-layout-pack";
+/**
+ * レイアウト種別: balance
+ */
+declare const clsLayoutBalance = "nws-layout-balance";
+/**
+ * レイアウト種別: layer
+ */
+declare const clsLayoutLayer = "nws-layout-layer";
+/**
+ * レイアウト種別: pin
+ */
+declare const clsLayoutPin = "nws-layout-pin";
+/**
+ * 整列: 横方向
+ */
+declare const clsLayoutDirectionX = "nws-layout-direction-x";
+/**
+ * 整列: 縦方向
+ */
+declare const clsLayoutDirectionY = "nws-layout-direction-y";
+/**
+ * 横位置: 左
+ */
+declare const clsLayoutAlignXLeft = "nws-layout-alignX-left";
+/**
+ * 横位置: 中央
+ */
+declare const clsLayoutAlignXCenter = "nws-layout-alignX-center";
+/**
+ * 横位置: 右
+ */
+declare const clsLayoutAlignXRight = "nws-layout-alignX-right";
+/**
+ * 横位置: 両端揃え
+ */
+declare const clsLayoutAlignXSpaceBetween = "nws-layout-alignX-spaceBetween";
+/**
+ * 横位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignXSpaceAround = "nws-layout-alignX-spaceAround";
+/**
+ * 横位置: 完全均等
+ */
+declare const clsLayoutAlignXSpaceEvenly = "nws-layout-alignX-spaceEvenly";
+/**
+ * 縦位置: 上
+ */
+declare const clsLayoutAlignYTop = "nws-layout-alignY-top";
+/**
+ * 縦位置: 中央
+ */
+declare const clsLayoutAlignYMiddle = "nws-layout-alignY-middle";
+/**
+ * 縦位置: 下
+ */
+declare const clsLayoutAlignYBottom = "nws-layout-alignY-bottom";
+/**
+ * 縦位置: 両端揃え
+ */
+declare const clsLayoutAlignYSpaceBetween = "nws-layout-alignY-spaceBetween";
+/**
+ * 縦位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignYSpaceAround = "nws-layout-alignY-spaceAround";
+/**
+ * 縦位置: 完全均等
+ */
+declare const clsLayoutAlignYSpaceEvenly = "nws-layout-alignY-spaceEvenly";
+/**
+ * 子要素の幅調整: なし
+ */
+declare const clsLayoutAdjustXNone = "nws-layout-adjustX-none";
+/**
+ * 子要素の幅調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustXFit = "nws-layout-adjustX-fit";
+/**
+ * 子要素の幅調整: 伸ばす
+ */
+declare const clsLayoutAdjustXExpand = "nws-layout-adjustX-grow";
+/**
+ * 子要素の幅調整: 縮める
+ */
+declare const clsLayoutAdjustXShrink = "nws-layout-adjustX-shrink";
+/**
+ * 子要素の高さ調整: なし
+ */
+declare const clsLayoutAdjustYNone = "nws-layout-adjustY-none";
+/**
+ * 子要素の高さ調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustYFit = "nws-layout-adjustY-fit";
+/**
+ * 子要素の高さ調整: 伸ばす
+ */
+declare const clsLayoutAdjustYExpand = "nws-layout-adjustY-grow";
+/**
+ * 子要素の高さ調整: 縮める
+ */
+declare const clsLayoutAdjustYShrink = "nws-layout-adjustY-shrink";
+/**
+ * 間隔: 横方向
+ */
+declare const clsLayoutGapX = "nws-layout-gapX";
+/**
+ * 間隔: 縦方向
+ */
+declare const clsLayoutGapY = "nws-layout-gapY";
+/**
+ * 子要素の幅
+ */
+declare const clsLayoutChildSizeX = "nws-layout-childSizeX";
+/**
+ * 子要素の高さ
+ */
+declare const clsLayoutChildSizeY = "nws-layout-childSizeY";
+/**
+ * 子要素の縦横比
+ */
+declare const clsLayoutChildRatio = "nws-layout-childRatio";
+/**
+ * 子要素の横方向の数
+ */
+declare const clsLayoutChildCountX = "nws-layout-childCountX";
+/**
+ * 子要素の縦方向の数
+ */
+declare const clsLayoutChildCountY = "nws-layout-childCountY";
+/**
+ * 変数\
+ * 間隔: 横方向
+ */
+declare const varLayoutGapX = "--nws-layout-gapX";
+/**
+ * 変数\
+ * 間隔: 縦方向
+ */
+declare const varLayoutGapY = "--nws-layout-gapY";
+/**
+ * 変数\
+ * 子要素の横方向の数
+ */
+declare const varLayoutChildCountX = "--nws-layout-childCountX";
+/**
+ * 変数\
+ * 子要素の縦方向の数
+ */
+declare const varLayoutChildCountY = "--nws-layout-childCountY";
+/**
+ * 変数\
+ * 子要素の幅
+ */
+declare const varLayoutChildSizeX = "--nws-layout-childSizeX";
+/**
+ * 変数\
+ * 子要素の高さ
+ */
+declare const varLayoutChildSizeY = "--nws-layout-childSizeY";
+/**
+ * 変数\
+ * 子要素の縦横比
+ */
+declare const varLayoutChildRatio = "--nws-layout-childRatio";
+/**
+ * 変数\
+ * 横方向のテンプレート
+ */
+declare const varLayoutTemplateX = "--nws-layout-templateX";
+/**
+ * 変数\
+ * 縦方向のテンプレート
+ */
+declare const varLayoutTemplateY = "--nws-layout-templateY";
+/**
+ * 変数\
+ * 横方向のオートトラック
+ */
+declare const varLayoutAutoTracX = "--nws-layout-autoTracX";
+/**
+ * 変数\
+ * 縦方向のオートトラック
+ */
+declare const varLayoutAutoTracY = "--nws-layout-autoTracY";
+//#endregion
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };

package/core/constants.mjs

@@ -0,0 +1,305 @@
+//#region src/core/constants.ts
+/**
+* 整列方向
+*/
+const Direction = {
+	x: "x",
+	y: "y"
+};
+const AlignBetween = {
+	"space-between": "space-between",
+	"space-around": "space-around",
+	"space-evenly": "space-evenly"
+};
+/**
+* 横位置
+*
+* - left: 左寄せ
+* - center: 中央寄せ
+* - right: 右寄せ
+*/
+const AlignXBase = {
+	left: "left",
+	center: "center",
+	right: "right"
+};
+/**
+* 横位置
+*
+* - left: 左寄せ
+* - center: 中央寄せ
+* - right: 右寄せ
+* - space-between: 両端揃え
+* - space-around: 両端余白あり均等
+* - space-evenly: 完全均等
+*/
+const AlignX = {
+	...AlignXBase,
+	...AlignBetween
+};
+/**
+* 縦位置
+*
+* - top: 上寄せ
+* - middle: 中央寄せ
+* - bottom: 下寄せ
+*/
+const AlignYBase = {
+	top: "top",
+	middle: "middle",
+	bottom: "bottom"
+};
+/**
+* 縦位置
+*
+* - top: 上寄せ
+* - middle: 中央寄せ
+* - bottom: 下寄せ
+* - space-between: 両端揃え
+* - space-around: 両端余白あり均等
+* - space-evenly: 完全均等
+*/
+const AlignY = {
+	...AlignYBase,
+	...AlignBetween
+};
+/**
+* 親要素のサイズを基準にした子要素のサイズ調整
+*
+* - `none`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: そのまま
+*/
+const AdjustBase = { none: "none" };
+/**
+* 親要素のサイズを基準にした子要素のサイズ調整
+*
+* - `none`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: そのまま
+* - `fit`
+*   - 親のサイズに足りないとき: 伸ばす
+*   - 親のサイズを超えるとき: 縮める
+* - `grow`
+*   - 親のサイズに足りないとき: 伸ばす
+*   - 親のサイズを超えるとき: そのまま
+* - `shrink`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: 縮める
+*/
+const Adjust = {
+	...AdjustBase,
+	fit: "fit",
+	grow: "grow",
+	shrink: "shrink"
+};
+/**
+* レイアウト種別: stack
+*/
+const clsLayoutStack = "nws-layout-stack";
+/**
+* レイアウト種別: flow
+*/
+const clsLayoutFlow = "nws-layout-flow";
+/**
+* レイアウト種別: tile
+*/
+const clsLayoutTile = "nws-layout-tile";
+/**
+* レイアウト種別: matrix
+*/
+const clsLayoutMatrix = "nws-layout-matrix";
+/**
+* レイアウト種別: center
+*/
+const clsLayoutCenter = "nws-layout-center";
+/**
+* レイアウト種別: pack
+*/
+const clsLayoutPack = "nws-layout-pack";
+/**
+* レイアウト種別: balance
+*/
+const clsLayoutBalance = "nws-layout-balance";
+/**
+* レイアウト種別: layer
+*/
+const clsLayoutLayer = "nws-layout-layer";
+/**
+* レイアウト種別: pin
+*/
+const clsLayoutPin = "nws-layout-pin";
+/**
+* 整列: 横方向
+*/
+const clsLayoutDirectionX = "nws-layout-direction-x";
+/**
+* 整列: 縦方向
+*/
+const clsLayoutDirectionY = "nws-layout-direction-y";
+/**
+* 横位置: 左
+*/
+const clsLayoutAlignXLeft = "nws-layout-alignX-left";
+/**
+* 横位置: 中央
+*/
+const clsLayoutAlignXCenter = "nws-layout-alignX-center";
+/**
+* 横位置: 右
+*/
+const clsLayoutAlignXRight = "nws-layout-alignX-right";
+/**
+* 横位置: 両端揃え
+*/
+const clsLayoutAlignXSpaceBetween = "nws-layout-alignX-spaceBetween";
+/**
+* 横位置: 両端余白あり均等
+*/
+const clsLayoutAlignXSpaceAround = "nws-layout-alignX-spaceAround";
+/**
+* 横位置: 完全均等
+*/
+const clsLayoutAlignXSpaceEvenly = "nws-layout-alignX-spaceEvenly";
+/**
+* 縦位置: 上
+*/
+const clsLayoutAlignYTop = "nws-layout-alignY-top";
+/**
+* 縦位置: 中央
+*/
+const clsLayoutAlignYMiddle = "nws-layout-alignY-middle";
+/**
+* 縦位置: 下
+*/
+const clsLayoutAlignYBottom = "nws-layout-alignY-bottom";
+/**
+* 縦位置: 両端揃え
+*/
+const clsLayoutAlignYSpaceBetween = "nws-layout-alignY-spaceBetween";
+/**
+* 縦位置: 両端余白あり均等
+*/
+const clsLayoutAlignYSpaceAround = "nws-layout-alignY-spaceAround";
+/**
+* 縦位置: 完全均等
+*/
+const clsLayoutAlignYSpaceEvenly = "nws-layout-alignY-spaceEvenly";
+/**
+* 子要素の幅調整: なし
+*/
+const clsLayoutAdjustXNone = "nws-layout-adjustX-none";
+/**
+* 子要素の幅調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustXFit = "nws-layout-adjustX-fit";
+/**
+* 子要素の幅調整: 伸ばす
+*/
+const clsLayoutAdjustXExpand = "nws-layout-adjustX-grow";
+/**
+* 子要素の幅調整: 縮める
+*/
+const clsLayoutAdjustXShrink = "nws-layout-adjustX-shrink";
+/**
+* 子要素の高さ調整: なし
+*/
+const clsLayoutAdjustYNone = "nws-layout-adjustY-none";
+/**
+* 子要素の高さ調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustYFit = "nws-layout-adjustY-fit";
+/**
+* 子要素の高さ調整: 伸ばす
+*/
+const clsLayoutAdjustYExpand = "nws-layout-adjustY-grow";
+/**
+* 子要素の高さ調整: 縮める
+*/
+const clsLayoutAdjustYShrink = "nws-layout-adjustY-shrink";
+/**
+* 間隔: 横方向
+*/
+const clsLayoutGapX = "nws-layout-gapX";
+/**
+* 間隔: 縦方向
+*/
+const clsLayoutGapY = "nws-layout-gapY";
+/**
+* 子要素の幅
+*/
+const clsLayoutChildSizeX = "nws-layout-childSizeX";
+/**
+* 子要素の高さ
+*/
+const clsLayoutChildSizeY = "nws-layout-childSizeY";
+/**
+* 子要素の縦横比
+*/
+const clsLayoutChildRatio = "nws-layout-childRatio";
+/**
+* 子要素の横方向の数
+*/
+const clsLayoutChildCountX = "nws-layout-childCountX";
+/**
+* 子要素の縦方向の数
+*/
+const clsLayoutChildCountY = "nws-layout-childCountY";
+/**
+* 変数\
+* 間隔: 横方向
+*/
+const varLayoutGapX = "--nws-layout-gapX";
+/**
+* 変数\
+* 間隔: 縦方向
+*/
+const varLayoutGapY = "--nws-layout-gapY";
+/**
+* 変数\
+* 子要素の横方向の数
+*/
+const varLayoutChildCountX = "--nws-layout-childCountX";
+/**
+* 変数\
+* 子要素の縦方向の数
+*/
+const varLayoutChildCountY = "--nws-layout-childCountY";
+/**
+* 変数\
+* 子要素の幅
+*/
+const varLayoutChildSizeX = "--nws-layout-childSizeX";
+/**
+* 変数\
+* 子要素の高さ
+*/
+const varLayoutChildSizeY = "--nws-layout-childSizeY";
+/**
+* 変数\
+* 子要素の縦横比
+*/
+const varLayoutChildRatio = "--nws-layout-childRatio";
+/**
+* 変数\
+* 横方向のテンプレート
+*/
+const varLayoutTemplateX = "--nws-layout-templateX";
+/**
+* 変数\
+* 縦方向のテンプレート
+*/
+const varLayoutTemplateY = "--nws-layout-templateY";
+/**
+* 変数\
+* 横方向のオートトラック
+*/
+const varLayoutAutoTracX = "--nws-layout-autoTracX";
+/**
+* 変数\
+* 縦方向のオートトラック
+*/
+const varLayoutAutoTracY = "--nws-layout-autoTracY";
+
+//#endregion
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };

package/core/flow/flow.cjs

@@ -0,0 +1,71 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_core_constants = require('../constants.cjs');
+const require_core__constants = require('../_constants.cjs');
+const require_core__internal_hasValue = require('../_internal/hasValue.cjs');
+const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
+const require_core__internal_unit = require('../_internal/unit.cjs');
+const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
+const require_core__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
+let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
+_niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/core/flow/flow.ts
+/**
+* flowレイアウト
+*
+* - 子要素を並べて配置し、親要素のサイズに達したら折り返す
+* - stackとの違いは flex-wrap: wrap が常に有効な点
+*/
+const flow = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutFlow, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY]),
+		style: {}
+	};
+	require_core__internal_applyGap(result, gap, gapX, gapY);
+	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getFlowMainAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getFlowCrossAxisStyle("y", alignY, childSizeY));
+	} else {
+		resultList.push(_getFlowCrossAxisStyle("x", alignX, childSizeX));
+		resultList.push(_getFlowMainAxisStyle("y", alignY, adjustY, childSizeY));
+	}
+	return require_core__internal_mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+*
+* stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
+*/
+function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
+	const result = { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]) };
+	if (require_core__internal_hasValue(childSize)) {
+		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
+		result.style = { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のスタイル
+*
+* stackの _getStackClossAxisStyle に相当。
+* flowは交差軸方向のadjustはできないため、常にnoneのスタイルを返す
+*/
+function _getFlowCrossAxisStyle(axis, align, childSize) {
+	if (require_core__internal_hasValue(childSize)) return {
+		className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutChildSize[axis]),
+		style: { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) }
+	};
+	else return { className: require_core__constants.clsLayoutAlign[axis][align] };
+}
+
+//#endregion
+module.exports = flow;

package/core/flow/flow.d.cts

@@ -0,0 +1,12 @@
+import { StyleLayout } from "../types.cjs";
+import { FlowLayoutOptions } from "./types.cjs";
+
+//#region src/core/flow/flow.d.ts
+/**
+ * flowレイアウト
+ *
+ * - 子要素を並べて配置し、親要素のサイズに達したら折り返す
+ * - stackとの違いは flex-wrap: wrap が常に有効な点
+ */
+declare const flow: StyleLayout<FlowLayoutOptions>;
+export = flow;