@niche-works/style-layouts 0.3.1 → 0.4.0

package/core/constants.mjs

@@ -1,6 +1,9 @@
 //#region src/core/constants.ts
 /**
 * 整列方向
+*
+* - x: 横方向
+* - y: 縦方向
 */
 const Direction = {
 	x: "x",
@@ -93,211 +96,6 @@ const Adjust = {
 	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 clsLayoutTemplateX = "nws-layout-templateX";
-/**
-* 縦方向のテンプレート
-*/
-const clsLayoutTemplateY = "nws-layout-templateY";
-/**
-* 変数\
-* 間隔: 横方向
-*/
-const varLayoutGapX = "--nws-layout-gapX";
-/**
-* 変数\
-* 間隔: 縦方向
-*/
-const varLayoutGapY = "--nws-layout-gapY";
-/**
-* 変数\
-* 子要素の幅
-*/
-const varLayoutChildSizeX = "--nws-layout-childSizeX";
-/**
-* 変数\
-* 子要素の高さ
-*/
-const varLayoutChildSizeY = "--nws-layout-childSizeY";
-/**
-* 変数\
-* 子要素の縦横比
-*/
-const varLayoutChildRatio = "--nws-layout-childRatio";
-/**
-* 変数\
-* 子要素の横方向の数
-*/
-const varLayoutChildCountX = "--nws-layout-childCountX";
-/**
-* 変数\
-* 子要素の縦方向の数
-*/
-const varLayoutChildCountY = "--nws-layout-childCountY";
-/**
-* 変数\
-* 横方向のテンプレート
-*/
-const varLayoutTemplateX = "--nws-layout-templateX";
-/**
-* 変数\
-* 縦方向のテンプレート
-*/
-const varLayoutTemplateY = "--nws-layout-templateY";
 
 //#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, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction };

package/core/flow/flow.cjs

@@ -1,15 +1,13 @@
 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/flow/flow.ts
 /**
@@ -25,7 +23,7 @@ const flow = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutFlow, 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.clsLayoutFlow, 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);
@@ -46,9 +44,9 @@ const flow = (options = {}) => {
 * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
 */
 function _getFlowMainAxisStyle(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;
@@ -61,7 +59,7 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getFlowCrossAxisStyle(axis, align, childSize) {
 	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: require_core__constants.clsLayout.align[axis][align] };

package/core/flow/flow.mjs

@@ -1,12 +1,11 @@
-import { clsLayoutFlow } from "../constants.mjs";
-import { clsLayout, varLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutFlow, 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/flow/flow.ts
 /**
@@ -22,7 +21,7 @@ const flow = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutFlow, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
+		className: mergeClassName(clsLayoutFlow, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);
@@ -43,9 +42,9 @@ const flow = (options = {}) => {
 * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
 */
 function _getFlowMainAxisStyle(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;
@@ -58,7 +57,7 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getFlowCrossAxisStyle(axis, align, childSize) {
 	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: clsLayout.align[axis][align] };

package/core/index.d.cts

@@ -1,4 +1,4 @@
-import { StyleLayout, StyleLayoutResult } from "./types.cjs";
+import { CSSCustomProperties, StyleLayout, StyleLayoutResult } from "./types.cjs";
 import { BalanceLayoutOptions } from "./balance/types.cjs";
 import balance from "./balance/balance.cjs";
 import { CenterLayoutOptions } from "./center/types.cjs";
@@ -17,4 +17,4 @@ import { StackLayoutOptions } from "./stack/types.cjs";
 import stack from "./stack/stack.cjs";
 import { TileLayoutOptions } from "./tile/types.cjs";
 import tile from "./tile/tile.cjs";
-export { BalanceLayoutOptions, CenterLayoutOptions, FlowLayoutOptions, LayerLayoutOptions, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, StyleLayout, StyleLayoutResult, TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
+export { BalanceLayoutOptions, CSSCustomProperties, CenterLayoutOptions, FlowLayoutOptions, LayerLayoutOptions, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, StyleLayout, StyleLayoutResult, TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };

package/core/index.d.mts

@@ -1,4 +1,4 @@
-import { StyleLayout, StyleLayoutResult } from "./types.mjs";
+import { CSSCustomProperties, StyleLayout, StyleLayoutResult } from "./types.mjs";
 import { BalanceLayoutOptions } from "./balance/types.mjs";
 import balance from "./balance/balance.mjs";
 import { CenterLayoutOptions } from "./center/types.mjs";
@@ -17,4 +17,4 @@ import { StackLayoutOptions } from "./stack/types.mjs";
 import stack from "./stack/stack.mjs";
 import { TileLayoutOptions } from "./tile/types.mjs";
 import tile from "./tile/tile.mjs";
-export { BalanceLayoutOptions, CenterLayoutOptions, FlowLayoutOptions, LayerLayoutOptions, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, StyleLayout, StyleLayoutResult, TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
+export { BalanceLayoutOptions, CSSCustomProperties, CenterLayoutOptions, FlowLayoutOptions, LayerLayoutOptions, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, StyleLayout, StyleLayoutResult, TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };

package/core/layer/layer.cjs

@@ -1,12 +1,10 @@
 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');
 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/layer/layer.ts
 /**
@@ -22,7 +20,7 @@ const layer = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutLayer, 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.clsLayoutLayer, 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_applyChildSize(result, childSizeX, childSizeY);

package/core/layer/layer.mjs

@@ -1,9 +1,8 @@
-import { clsLayoutLayer } from "../constants.mjs";
-import { clsLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutLayer } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/layer/layer.ts
 /**
@@ -19,7 +18,7 @@ const layer = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutLayer, clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		className: mergeClassName(clsLayoutLayer, clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	applyChildSize(result, childSizeX, childSizeY);

package/core/matrix/matrix.cjs

@@ -1,6 +1,6 @@
 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_unit = require('../_internal/unit.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
@@ -9,14 +9,13 @@ const require_core__internal_mergeLayoutResults = require('../_internal/mergeLay
 const require_core__internal_applyChildCount = require('../_internal/applyChildCount.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/matrix/matrix.ts
 /**
 * matrixレイアウト
 *
 * - 子要素の縦の数、横の数を基準にして格子状に配置する
+* - 親要素のサイズが子要素に依存していないことを前提とする
 */
 const matrix = (options) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY, childCountX, childCountY, tracksX, tracksY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
@@ -25,7 +24,7 @@ const matrix = (options) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	let result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, 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.clsLayoutMatrix, 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/matrix/matrix.d.cts

@@ -6,6 +6,7 @@ import { MatrixLayoutOptions } from "./types.cjs";
  * matrixレイアウト
  *
  * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ * - 親要素のサイズが子要素に依存していないことを前提とする
  */
 declare const matrix: StyleLayout<MatrixLayoutOptions>;
 export = matrix;

package/core/matrix/matrix.d.mts

@@ -6,6 +6,7 @@ import { MatrixLayoutOptions } from "./types.mjs";
  * matrixレイアウト
  *
  * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ * - 親要素のサイズが子要素に依存していないことを前提とする
  */
 declare const matrix: StyleLayout<MatrixLayoutOptions>;
 //#endregion

package/core/matrix/matrix.mjs

@@ -1,5 +1,5 @@
-import { clsLayoutMatrix } from "../constants.mjs";
-import { clsLayout, varLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutMatrix, varLayout } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import unit from "../_internal/unit.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
@@ -7,13 +7,13 @@ import applyGap from "../_internal/applyGap.mjs";
 import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
 import applyChildCount from "../_internal/applyChildCount.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/matrix/matrix.ts
 /**
 * matrixレイアウト
 *
 * - 子要素の縦の数、横の数を基準にして格子状に配置する
+* - 親要素のサイズが子要素に依存していないことを前提とする
 */
 const matrix = (options) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX = gap, gapY = gap, childSizeX, childSizeY, childRatioX, childRatioY, childCountX, childCountY, tracksX, tracksY } = maybeDefault(options, {
@@ -22,7 +22,7 @@ const matrix = (options) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	let result = {
-		className: clsx(clsLayoutMatrix, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		className: mergeClassName(clsLayoutMatrix, 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/pack/pack.cjs

@@ -1,11 +1,9 @@
 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_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/pack/pack.ts
 /**
@@ -16,7 +14,7 @@ clsx = require_runtime.__toESM(clsx, 1);
 const pack = (options = {}) => {
 	const { direction, gap, gapX, gapY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutPack, require_core__constants.clsLayout.direction[direction]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayoutPack, require_core__constants.clsLayout.direction[direction]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);

package/core/pack/pack.mjs

@@ -1,8 +1,7 @@
-import { clsLayoutPack } from "../constants.mjs";
-import { clsLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutPack } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/pack/pack.ts
 /**
@@ -13,7 +12,7 @@ import clsx from "clsx";
 const pack = (options = {}) => {
 	const { direction, gap, gapX, gapY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutPack, clsLayout.direction[direction]),
+		className: mergeClassName(clsLayoutPack, clsLayout.direction[direction]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);

package/core/pin/pin.cjs

@@ -1,4 +1,4 @@
-const require_core_constants = require('../constants.cjs');
+const require_core__constants = require('../_constants.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 
@@ -11,7 +11,7 @@ const require_core__internal_applyChildSize = require('../_internal/applyChildSi
 const pin = (options = {}) => {
 	const { childSizeX, childSizeY, childRatioX, childRatioY } = options;
 	const result = {
-		className: require_core_constants.clsLayoutPin,
+		className: require_core__constants.clsLayoutPin,
 		style: {}
 	};
 	require_core__internal_applyChildSize(result, childSizeX, childSizeY);

package/core/pin/pin.mjs

@@ -1,4 +1,4 @@
-import { clsLayoutPin } from "../constants.mjs";
+import { clsLayoutPin } from "../_constants.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 

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