@niche-works/style-layouts 0.3.0 → 0.4.0

package/core/stack/stack.cjs

@@ -1,21 +1,19 @@
 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_mergeClassName = require('../_internal/mergeClassName.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/stack/stack.ts
 /**
 * stackレイアウト
 *
-* - 子要素を並べて配置する
+* - 子要素を一列に並べて配置する
 */
 const stack = (options = {}) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
@@ -24,7 +22,7 @@ const stack = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutStack, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayoutStack, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);
@@ -48,9 +46,9 @@ const stack = (options = {}) => {
 * @returns スタイル
 */
 function _getStackMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]) };
+	const result = { className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]) };
 	if (require_core__internal_hasValue(childSize)) {
-		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayout.childSize[axis]);
 		result.style = { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) };
 	}
 	return result;
@@ -65,34 +63,34 @@ function _getStackMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getStackClossAxisStyle(axis, align, adjust, childSize) {
 	if (adjust === "fit") return {
-		className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
 		style: { [require_core__constants.varLayout.childSize[axis]]: `min(0, 100%)` }
 	};
 	else if (adjust === "grow") {
 		const result = {
-			className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+			className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
 			style: {}
 		};
 		if (require_core__internal_hasValue(childSize)) {
-			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+			result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayout.childSize[axis]);
 			result.style[require_core__constants.varLayout.childSize[axis]] = require_core__internal_unit(childSize);
 		}
 		return result;
 	} else if (adjust === "shrink") {
 		const result = {
-			className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
+			className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]),
 			style: {}
 		};
 		if (require_core__internal_hasValue(childSize)) {
-			result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+			result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayout.childSize[axis]);
 			result.style = { [require_core__constants.varLayout.childSize[axis]]: `min(${require_core__internal_unit(childSize)}, 100%)` };
 		}
 		return result;
 	} else if (require_core__internal_hasValue(childSize)) return {
-		className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.childSize[axis]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.childSize[axis]),
 		style: { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) }
 	};
-	else return { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align]) };
+	else return { className: require_core__internal_mergeClassName(require_core__constants.clsLayout.align[axis][align]) };
 }
 
 //#endregion

package/core/stack/stack.d.cts

@@ -5,7 +5,7 @@ import { StackLayoutOptions } from "./types.cjs";
 /**
  * stackレイアウト
  *
- * - 子要素を並べて配置する
+ * - 子要素を一列に並べて配置する
  */
 declare const stack: StyleLayout<StackLayoutOptions>;
 export = stack;

package/core/stack/stack.d.mts

@@ -5,7 +5,7 @@ import { StackLayoutOptions } from "./types.mjs";
 /**
  * stackレイアウト
  *
- * - 子要素を並べて配置する
+ * - 子要素を一列に並べて配置する
  */
 declare const stack: StyleLayout<StackLayoutOptions>;
 //#endregion

package/core/stack/stack.mjs

@@ -1,18 +1,17 @@
-import { clsLayoutStack } from "../constants.mjs";
-import { clsLayout, varLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutStack, varLayout } from "../_constants.mjs";
 import hasValue from "../_internal/hasValue.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import unit from "../_internal/unit.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/stack/stack.ts
 /**
 * stackレイアウト
 *
-* - 子要素を並べて配置する
+* - 子要素を一列に並べて配置する
 */
 const stack = (options = {}) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY } = maybeDefault(options, {
@@ -21,7 +20,7 @@ const stack = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutStack, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
+		className: mergeClassName(clsLayoutStack, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);
@@ -45,9 +44,9 @@ const stack = (options = {}) => {
 * @returns スタイル
 */
 function _getStackMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
+	const result = { className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
 	if (hasValue(childSize)) {
-		result.className = clsx(result.className, clsLayout.childSize[axis]);
+		result.className = mergeClassName(result.className, clsLayout.childSize[axis]);
 		result.style = { [varLayout.childSize[axis]]: unit(childSize) };
 	}
 	return result;
@@ -62,34 +61,34 @@ function _getStackMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getStackClossAxisStyle(axis, align, adjust, childSize) {
 	if (adjust === "fit") return {
-		className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+		className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
 		style: { [varLayout.childSize[axis]]: `min(0, 100%)` }
 	};
 	else if (adjust === "grow") {
 		const result = {
-			className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
 			style: {}
 		};
 		if (hasValue(childSize)) {
-			result.className = clsx(result.className, clsLayout.childSize[axis]);
+			result.className = mergeClassName(result.className, clsLayout.childSize[axis]);
 			result.style[varLayout.childSize[axis]] = unit(childSize);
 		}
 		return result;
 	} else if (adjust === "shrink") {
 		const result = {
-			className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
 			style: {}
 		};
 		if (hasValue(childSize)) {
-			result.className = clsx(result.className, clsLayout.childSize[axis]);
+			result.className = mergeClassName(result.className, clsLayout.childSize[axis]);
 			result.style = { [varLayout.childSize[axis]]: `min(${unit(childSize)}, 100%)` };
 		}
 		return result;
 	} else if (hasValue(childSize)) return {
-		className: clsx(clsLayout.align[axis][align], clsLayout.childSize[axis]),
+		className: mergeClassName(clsLayout.align[axis][align], clsLayout.childSize[axis]),
 		style: { [varLayout.childSize[axis]]: unit(childSize) }
 	};
-	else return { className: clsx(clsLayout.align[axis][align]) };
+	else return { className: mergeClassName(clsLayout.align[axis][align]) };
 }
 
 //#endregion

package/core/stack/styles.css

@@ -79,7 +79,6 @@
   min-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
-  min-height: 0;
   max-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y {
@@ -135,7 +134,6 @@
   min-width: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
-  min-width: 0;
   max-width: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {

package/core/styles.css

@@ -79,7 +79,6 @@
   min-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
-  min-height: 0;
   max-height: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y {
@@ -135,7 +134,6 @@
   min-width: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
-  min-width: 0;
   max-width: 100%;
 }
 .nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
@@ -624,9 +622,6 @@
 .nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childCountX {
   grid-template-columns: repeat(var(--nws-layout-childCountX), 1fr);
 }
-.nws-layout-matrix.nws-layout-adjustX-shrink {
-  grid-template-columns: repeat(auto-fit, auto);
-}
 .nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childSizeX {
   grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
 }
@@ -675,9 +670,6 @@
 .nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childCountY {
   grid-template-rows: repeat(var(--nws-layout-childCountY), 1fr);
 }
-.nws-layout-matrix.nws-layout-adjustY-shrink {
-  grid-template-rows: repeat(auto-fit, auto);
-}
 .nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childSizeY {
   grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
 }
@@ -720,6 +712,7 @@
 }
 .nws-layout-center.nws-layout-direction-x > * {
   max-width: none;
+  max-height: none;
   flex-grow: 0;
   flex-shrink: 0;
   margin-top: auto;
@@ -735,9 +728,6 @@
   width: var(--nws-layout-childSizeX);
   flex-basis: var(--nws-layout-childSizeX);
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
   width: 100%;
   max-width: none;
@@ -745,29 +735,19 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
   width: 100%;
   min-width: var(--nws-layout-childSizeX);
   max-width: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   width: var(--nws-layout-childSizeX);
   max-width: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeX);
 }
-.nws-layout-center.nws-layout-direction-x > * {
-  max-height: none;
-  margin-top: auto;
-  margin-bottom: auto;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
@@ -811,6 +791,9 @@
 }
 .nws-layout-center.nws-layout-direction-y > * {
   max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
   margin-left: auto;
   margin-right: auto;
 }
@@ -844,18 +827,10 @@
   margin-left: auto;
   margin-right: auto;
 }
-.nws-layout-center.nws-layout-direction-y > * {
-  max-height: none;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
   height: 100%;
   max-height: none;
@@ -863,21 +838,16 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
   height: 100%;
   min-height: var(--nws-layout-childSizeY);
   max-height: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeY);
 }
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
   height: var(--nws-layout-childSizeY);
   max-height: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeY);
 }
@@ -955,9 +925,29 @@
 }
 .nws-layout-balance.nws-layout-direction-x {
   grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-grow, .nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-fit {
+  grid-auto-columns: auto;
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, max-content);
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-childSizeX {
+  grid-auto-columns: auto;
 }
 .nws-layout-balance.nws-layout-direction-y {
   grid-auto-flow: row;
+  grid-auto-rows: max-content;
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-grow, .nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-fit {
+  grid-auto-rows: auto;
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, max-content);
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-childSizeY {
+  grid-auto-rows: auto;
 }
 .nws-layout-balance.nws-layout-alignX-left {
   justify-items: flex-start;
@@ -969,13 +959,13 @@
   justify-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignX-spaceBetween {
-  justify-items: space-between;
+  justify-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignX-spaceAround {
-  justify-items: space-around;
+  justify-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignX-spaceEvenly {
-  justify-items: space-evenly;
+  justify-content: space-evenly;
 }
 .nws-layout-balance.nws-layout-alignY-top {
   align-items: flex-start;
@@ -987,13 +977,13 @@
   align-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignY-spaceBetween {
-  align-items: space-between;
+  align-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignY-spaceAround {
-  align-items: space-around;
+  align-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignY-spaceEvenly {
-  align-items: space-evenly;
+  align-content: space-evenly;
 }
 .nws-layout-balance > * {
   min-width: 0;
@@ -1011,9 +1001,15 @@
 .nws-layout-balance.nws-layout-adjustX-grow > *, .nws-layout-balance.nws-layout-adjustX-shrink > * {
   width: 100%;
 }
+.nws-layout-balance.nws-layout-adjustX-grow > * {
+  min-width: max-content;
+}
 .nws-layout-balance.nws-layout-adjustX-grow.nws-layout-childSizeX > * {
   min-width: var(--nws-layout-childSizeX);
 }
+.nws-layout-balance.nws-layout-adjustX-shrink > * {
+  max-width: max-content;
+}
 .nws-layout-balance.nws-layout-adjustX-shrink.nws-layout-childSizeX > * {
   max-width: var(--nws-layout-childSizeX);
 }
@@ -1029,9 +1025,15 @@
 .nws-layout-balance.nws-layout-adjustY-grow > *, .nws-layout-balance.nws-layout-adjustY-shrink > * {
   height: 100%;
 }
+.nws-layout-balance.nws-layout-adjustY-grow:not(.nws-layout-childSizeY) > * {
+  min-height: max-content;
+}
 .nws-layout-balance.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
   min-height: var(--nws-layout-childSizeY);
 }
+.nws-layout-balance.nws-layout-adjustY-shrink:not(.nws-layout-childSizeY) > * {
+  max-height: max-content;
+}
 .nws-layout-balance.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
   max-height: var(--nws-layout-childSizeY);
 }
@@ -1087,8 +1089,6 @@
 }
 .nws-layout-layer.nws-layout-adjustX-shrink > * {
   width: clamp(0px, 100%, var(--nws-layout-childSizeX));
-  min-width: 0;
-  max-width: 100%;
 }
 .nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
   align-self: stretch;
@@ -1099,8 +1099,6 @@
 }
 .nws-layout-layer.nws-layout-adjustY-shrink > * {
   height: clamp(0px, 100%, var(--nws-layout-childSizeY));
-  min-height: 0;
-  max-height: 100%;
 }
 .nws-layout-layer.nws-layout-childRatio > * {
   aspect-ratio: var(--nws-layout-childRatio);

package/core/tile/tile.cjs

@@ -1,13 +1,11 @@
 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_mergeClassName = require('../_internal/mergeClassName.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 const require_core__internal_applyGap = require('../_internal/applyGap.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/tile/tile.ts
 /**
@@ -23,7 +21,7 @@ const tile = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutTile, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayoutTile, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);

package/core/tile/tile.mjs

@@ -1,10 +1,9 @@
-import { clsLayoutTile } from "../constants.mjs";
-import { clsLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutTile } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/tile/tile.ts
 /**
@@ -20,7 +19,7 @@ const tile = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutTile, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		className: mergeClassName(clsLayoutTile, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);

package/core/types.d.cts

@@ -1,4 +1,3 @@
-import { CSSCustomProperties } from "./_types.cjs";
 import { LooseDictionary } from "@niche-works/types";
 
 //#region src/core/types.d.ts
@@ -19,5 +18,11 @@ type StyleLayoutResult = {
    */
   style?: CSSCustomProperties;
 };
+/**
+ * CSSカスタムプロパティ(変数)
+ */
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | undefined;
+};
 //#endregion
-export { StyleLayout, StyleLayoutResult };
+export { CSSCustomProperties, StyleLayout, StyleLayoutResult };

package/core/types.d.mts

@@ -1,4 +1,3 @@
-import { CSSCustomProperties } from "./_types.mjs";
 import { LooseDictionary } from "@niche-works/types";
 
 //#region src/core/types.d.ts
@@ -19,5 +18,11 @@ type StyleLayoutResult = {
    */
   style?: CSSCustomProperties;
 };
+/**
+ * CSSカスタムプロパティ(変数)
+ */
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | undefined;
+};
 //#endregion
-export { StyleLayout, StyleLayoutResult };
+export { CSSCustomProperties, StyleLayout, StyleLayoutResult };

package/flow/index.cjs

@@ -1,4 +1,8 @@
-require('../core/flow/styles.css');
 const require_core_flow_flow = require('../core/flow/flow.cjs');
+require('../core/flow/styles.css');
+
+//#region src/flow/index.ts
+var flow_default = require_core_flow_flow;
 
-module.exports = require_core_flow_flow;
+//#endregion
+module.exports = flow_default;

package/flow/index.mjs

@@ -1,4 +1,8 @@
-import "../core/flow/styles.css";
 import flow from "../core/flow/flow.mjs";
+import "../core/flow/styles.css";
+
+//#region src/flow/index.ts
+var flow_default = flow;
 
-export { flow as default };
+//#endregion
+export { flow_default as default };

package/helpers/_internal/constants.cjs

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/helpers/_internal/constants.ts
+const DIRECTION_OPTIONS_KEYS = ["direction"];
+const ALIGN_OPTIONS_KEYS = ["alignX", "alignY"];
+const ADJUST_OPTIONS_KEYS = ["adjustX", "adjustY"];
+const GAP_OPTIONS_KEYS = [
+	"gap",
+	"gapX",
+	"gapY"
+];
+const CHILD_SIZE_OPTIONS_KEYS = ["childSizeX", "childSizeY"];
+const CHILD_RATIO_OPTIONS_KEYS = ["childRatioX", "childRatioY"];
+const CHILD_COUNT_OPTIONS_KEYS = ["childCountX", "childCountY"];
+const TRACKS_OPTIONS_KEYS = ["tracksX", "tracksY"];
+
+//#endregion
+exports.ADJUST_OPTIONS_KEYS = ADJUST_OPTIONS_KEYS;
+exports.ALIGN_OPTIONS_KEYS = ALIGN_OPTIONS_KEYS;
+exports.CHILD_COUNT_OPTIONS_KEYS = CHILD_COUNT_OPTIONS_KEYS;
+exports.CHILD_RATIO_OPTIONS_KEYS = CHILD_RATIO_OPTIONS_KEYS;
+exports.CHILD_SIZE_OPTIONS_KEYS = CHILD_SIZE_OPTIONS_KEYS;
+exports.DIRECTION_OPTIONS_KEYS = DIRECTION_OPTIONS_KEYS;
+exports.GAP_OPTIONS_KEYS = GAP_OPTIONS_KEYS;
+exports.TRACKS_OPTIONS_KEYS = TRACKS_OPTIONS_KEYS;

package/helpers/_internal/constants.d.cts

@@ -0,0 +1,13 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions } from "../../core/_types.cjs";
+
+//#region src/helpers/_internal/constants.d.ts
+declare const DIRECTION_OPTIONS_KEYS: (keyof DirectionOptions)[];
+declare const ALIGN_OPTIONS_KEYS: (keyof AlignOptions)[];
+declare const ADJUST_OPTIONS_KEYS: (keyof AdjustOptions)[];
+declare const GAP_OPTIONS_KEYS: (keyof GapOptions)[];
+declare const CHILD_SIZE_OPTIONS_KEYS: (keyof ChildSizeOptions)[];
+declare const CHILD_RATIO_OPTIONS_KEYS: (keyof ChildRatioOptions)[];
+declare const CHILD_COUNT_OPTIONS_KEYS: (keyof ChildCountOptions)[];
+declare const TRACKS_OPTIONS_KEYS: (keyof TracksOptions)[];
+//#endregion
+export { ADJUST_OPTIONS_KEYS, ALIGN_OPTIONS_KEYS, CHILD_COUNT_OPTIONS_KEYS, CHILD_RATIO_OPTIONS_KEYS, CHILD_SIZE_OPTIONS_KEYS, DIRECTION_OPTIONS_KEYS, GAP_OPTIONS_KEYS, TRACKS_OPTIONS_KEYS };

package/helpers/_internal/constants.d.mts

@@ -0,0 +1,13 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions } from "../../core/_types.mjs";
+
+//#region src/helpers/_internal/constants.d.ts
+declare const DIRECTION_OPTIONS_KEYS: (keyof DirectionOptions)[];
+declare const ALIGN_OPTIONS_KEYS: (keyof AlignOptions)[];
+declare const ADJUST_OPTIONS_KEYS: (keyof AdjustOptions)[];
+declare const GAP_OPTIONS_KEYS: (keyof GapOptions)[];
+declare const CHILD_SIZE_OPTIONS_KEYS: (keyof ChildSizeOptions)[];
+declare const CHILD_RATIO_OPTIONS_KEYS: (keyof ChildRatioOptions)[];
+declare const CHILD_COUNT_OPTIONS_KEYS: (keyof ChildCountOptions)[];
+declare const TRACKS_OPTIONS_KEYS: (keyof TracksOptions)[];
+//#endregion
+export { ADJUST_OPTIONS_KEYS, ALIGN_OPTIONS_KEYS, CHILD_COUNT_OPTIONS_KEYS, CHILD_RATIO_OPTIONS_KEYS, CHILD_SIZE_OPTIONS_KEYS, DIRECTION_OPTIONS_KEYS, GAP_OPTIONS_KEYS, TRACKS_OPTIONS_KEYS };

package/helpers/_internal/constants.mjs

@@ -0,0 +1,16 @@
+//#region src/helpers/_internal/constants.ts
+const DIRECTION_OPTIONS_KEYS = ["direction"];
+const ALIGN_OPTIONS_KEYS = ["alignX", "alignY"];
+const ADJUST_OPTIONS_KEYS = ["adjustX", "adjustY"];
+const GAP_OPTIONS_KEYS = [
+	"gap",
+	"gapX",
+	"gapY"
+];
+const CHILD_SIZE_OPTIONS_KEYS = ["childSizeX", "childSizeY"];
+const CHILD_RATIO_OPTIONS_KEYS = ["childRatioX", "childRatioY"];
+const CHILD_COUNT_OPTIONS_KEYS = ["childCountX", "childCountY"];
+const TRACKS_OPTIONS_KEYS = ["tracksX", "tracksY"];
+
+//#endregion
+export { ADJUST_OPTIONS_KEYS, ALIGN_OPTIONS_KEYS, CHILD_COUNT_OPTIONS_KEYS, CHILD_RATIO_OPTIONS_KEYS, CHILD_SIZE_OPTIONS_KEYS, DIRECTION_OPTIONS_KEYS, GAP_OPTIONS_KEYS, TRACKS_OPTIONS_KEYS };

package/helpers/_internal/createExtractLayoutOptions.cjs

@@ -0,0 +1,25 @@
+
+//#region src/helpers/_internal/createExtractLayoutOptions.ts
+/**
+* レコードからレイアウトオプションとそれ以外のプロパティを分離する関数を作成する
+*
+* @param optionsKeys レイアウトオプションのキー
+*/
+function createExtractLayoutOptions(optionKeys) {
+	const keySet = new Set(optionKeys);
+	/**
+	* レコードからレイアウトオプションとそれ以外のプロパティを分離する
+	*
+	* @param record レイアウトオプションとその他のプロパティを含むレコード
+	* @returns `[layoutOptions, rest]` のタプル。`layoutOptions` はレイアウトに対応するプロパティ、`rest` はそれ以外のプロパティ
+	*/
+	return (record) => {
+		const options = {};
+		const rest = {};
+		if (record) for (const [k, v] of Object.entries(record)) (keySet.has(k) ? options : rest)[k] = v;
+		return [options, rest];
+	};
+}
+
+//#endregion
+module.exports = createExtractLayoutOptions;