@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/constants.d.cts

@@ -0,0 +1,112 @@
+//#region src/constants.d.ts
+/**
+ * 整列方向
+ *
+ * - x: 横方向
+ * - y: 縦方向
+ */
+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];
+//#endregion
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction };

package/constants.d.mts

@@ -0,0 +1,112 @@
+//#region src/constants.d.ts
+/**
+ * 整列方向
+ *
+ * - x: 横方向
+ * - y: 縦方向
+ */
+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];
+//#endregion
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction };

package/constants.mjs

@@ -0,0 +1,101 @@
+//#region src/constants.ts
+/**
+* 整列方向
+*
+* - x: 横方向
+* - y: 縦方向
+*/
+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"
+};
+
+//#endregion
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction };

package/flow/flow.cjs

@@ -0,0 +1,71 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('../_internal/hasValue.cjs');
+const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
+const require__internal_unit = require('../_internal/unit.cjs');
+const require__internal_applyGap = require('../_internal/applyGap.cjs');
+const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
+const require__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
+let _fringeworks_utils_object_maybeDefault = require("@fringeworks/utils/object/maybeDefault");
+_fringeworks_utils_object_maybeDefault = require_runtime.__toESM(_fringeworks_utils_object_maybeDefault, 1);
+
+//#region src/flow/flow.ts
+/**
+* flowレイアウト
+*
+* - 子要素を並べて配置し、親要素のサイズに達したら折り返す
+* - stackとの違いは flex-wrap: wrap が常に有効な点
+*/
+const flow = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutFlow, require__constants.clsLayout.direction[direction], require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY]),
+		style: {}
+	};
+	require__internal_applyGap(result, gap, gapX, gapY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getFlowMainAxisStyle("x", alignX, adjustX, itemSizeX));
+		resultList.push(_getFlowCrossAxisStyle("y", alignY, itemSizeY));
+	} else {
+		resultList.push(_getFlowCrossAxisStyle("x", alignX, itemSizeX));
+		resultList.push(_getFlowMainAxisStyle("y", alignY, adjustY, itemSizeY));
+	}
+	return require__internal_mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+*
+* stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
+*/
+function _getFlowMainAxisStyle(axis, align, adjust, itemSize) {
+	const result = { className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.adjust[axis][adjust]) };
+	if (require__internal_hasValue(itemSize)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayout.itemSize[axis]);
+		result.style = { [require__constants.varLayout.itemSize[axis]]: require__internal_unit(itemSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のスタイル
+*
+* stackの _getStackClossAxisStyle に相当。
+* flowは交差軸方向のadjustはできないため、常にnoneのスタイルを返す
+*/
+function _getFlowCrossAxisStyle(axis, align, itemSize) {
+	if (require__internal_hasValue(itemSize)) return {
+		className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.itemSize[axis]),
+		style: { [require__constants.varLayout.itemSize[axis]]: require__internal_unit(itemSize) }
+	};
+	else return { className: require__constants.clsLayout.align[axis][align] };
+}
+
+//#endregion
+module.exports = flow;

package/flow/flow.d.cts

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

package/flow/flow.d.mts

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

package/flow/flow.mjs

@@ -0,0 +1,69 @@
+import { clsLayout, clsLayoutFlow, varLayout } from "../_constants.mjs";
+import hasValue from "../_internal/hasValue.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
+import unit from "../_internal/unit.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import applyItemRatio from "../_internal/applyItemRatio.mjs";
+import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/flow/flow.ts
+/**
+* flowレイアウト
+*
+* - 子要素を並べて配置し、親要素のサイズに達したら折り返す
+* - stackとの違いは flex-wrap: wrap が常に有効な点
+*/
+const flow = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: mergeClassName(clsLayoutFlow, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getFlowMainAxisStyle("x", alignX, adjustX, itemSizeX));
+		resultList.push(_getFlowCrossAxisStyle("y", alignY, itemSizeY));
+	} else {
+		resultList.push(_getFlowCrossAxisStyle("x", alignX, itemSizeX));
+		resultList.push(_getFlowMainAxisStyle("y", alignY, adjustY, itemSizeY));
+	}
+	return mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+*
+* stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
+*/
+function _getFlowMainAxisStyle(axis, align, adjust, itemSize) {
+	const result = { className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
+	if (hasValue(itemSize)) {
+		result.className = mergeClassName(result.className, clsLayout.itemSize[axis]);
+		result.style = { [varLayout.itemSize[axis]]: unit(itemSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のスタイル
+*
+* stackの _getStackClossAxisStyle に相当。
+* flowは交差軸方向のadjustはできないため、常にnoneのスタイルを返す
+*/
+function _getFlowCrossAxisStyle(axis, align, itemSize) {
+	if (hasValue(itemSize)) return {
+		className: mergeClassName(clsLayout.align[axis][align], clsLayout.itemSize[axis]),
+		style: { [varLayout.itemSize[axis]]: unit(itemSize) }
+	};
+	else return { className: clsLayout.align[axis][align] };
+}
+
+//#endregion
+export { flow as default };

package/flow/index.cjs

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

package/flow/index.d.cts

@@ -0,0 +1,3 @@
+import { FlowLayoutOptions } from "./types.cjs";
+import flow from "./flow.cjs";
+export { type FlowLayoutOptions, flow as default };

package/flow/index.d.mts

@@ -0,0 +1,3 @@
+import { FlowLayoutOptions } from "./types.mjs";
+import flow from "./flow.mjs";
+export { type FlowLayoutOptions, flow as default };

package/flow/index.mjs

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

package/flow/styles.css

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

package/flow/types.d.cts

@@ -0,0 +1,21 @@
+import { AdjustBase } from "../constants.cjs";
+import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
+
+//#region src/flow/types.d.ts
+/**
+ * flowのオプション
+ *
+ * - `direction='x'` 時: `adjustY` に `fit`,`grow`,`shrink` 指定不可
+ * - `direction='y'` 時: `adjustX` に `fit`,`grow`,`shrink` 指定不可
+ */
+type FlowLayoutOptions = AlignOptions & GapOptions & ItemSizeOptions & ItemRatioOptions & FlowDirectionWithAdjustOptions;
+/**
+ * direction & adjustのオプション
+ */
+type FlowDirectionWithAdjustOptions = (DirectionOptions<'x'> & Omit<AdjustOptions, 'adjustY'> & {
+  adjustY?: AdjustBase;
+}) | (DirectionOptions<'y'> & Omit<AdjustOptions, 'adjustX'> & {
+  adjustX?: AdjustBase;
+});
+//#endregion
+export { FlowLayoutOptions };