@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/helpers/index.d.cts

@@ -0,0 +1,10 @@
+import _default from "./extractBalanceOptions.cjs";
+import _default$1 from "./extractCenterOptions.cjs";
+import _default$2 from "./extractFlowOptions.cjs";
+import _default$3 from "./extractLayerOptions.cjs";
+import _default$4 from "./extractMatrixOptions.cjs";
+import _default$5 from "./extractPackOptions.cjs";
+import _default$6 from "./extractPinOptions.cjs";
+import _default$7 from "./extractStackOptions.cjs";
+import _default$8 from "./extractTileOptions.cjs";
+export { _default as extractBalanceOptions, _default$1 as extractCenterOptions, _default$2 as extractFlowOptions, _default$3 as extractLayerOptions, _default$4 as extractMatrixOptions, _default$5 as extractPackOptions, _default$6 as extractPinOptions, _default$7 as extractStackOptions, _default$8 as extractTileOptions };

package/helpers/index.d.mts

@@ -0,0 +1,10 @@
+import _default from "./extractBalanceOptions.mjs";
+import _default$1 from "./extractCenterOptions.mjs";
+import _default$2 from "./extractFlowOptions.mjs";
+import _default$3 from "./extractLayerOptions.mjs";
+import _default$4 from "./extractMatrixOptions.mjs";
+import _default$5 from "./extractPackOptions.mjs";
+import _default$6 from "./extractPinOptions.mjs";
+import _default$7 from "./extractStackOptions.mjs";
+import _default$8 from "./extractTileOptions.mjs";
+export { _default as extractBalanceOptions, _default$1 as extractCenterOptions, _default$2 as extractFlowOptions, _default$3 as extractLayerOptions, _default$4 as extractMatrixOptions, _default$5 as extractPackOptions, _default$6 as extractPinOptions, _default$7 as extractStackOptions, _default$8 as extractTileOptions };

package/helpers/index.mjs

@@ -0,0 +1,11 @@
+import extractBalanceOptions_default from "./extractBalanceOptions.mjs";
+import extractCenterOptions_default from "./extractCenterOptions.mjs";
+import extractFlowOptions_default from "./extractFlowOptions.mjs";
+import extractLayerOptions_default from "./extractLayerOptions.mjs";
+import extractMatrixOptions_default from "./extractMatrixOptions.mjs";
+import extractPackOptions_default from "./extractPackOptions.mjs";
+import extractPinOptions_default from "./extractPinOptions.mjs";
+import extractStackOptions_default from "./extractStackOptions.mjs";
+import extractTileOptions_default from "./extractTileOptions.mjs";
+
+export { extractBalanceOptions_default as extractBalanceOptions, extractCenterOptions_default as extractCenterOptions, extractFlowOptions_default as extractFlowOptions, extractLayerOptions_default as extractLayerOptions, extractMatrixOptions_default as extractMatrixOptions, extractPackOptions_default as extractPackOptions, extractPinOptions_default as extractPinOptions, extractStackOptions_default as extractStackOptions, extractTileOptions_default as extractTileOptions };

package/index.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_balance_balance = require('./balance/balance.cjs');
+const require_center_center = require('./center/center.cjs');
+const require_flow_flow = require('./flow/flow.cjs');
+const require_layer_layer = require('./layer/layer.cjs');
+const require_matrix_matrix = require('./matrix/matrix.cjs');
+const require_pack_pack = require('./pack/pack.cjs');
+const require_pin_pin = require('./pin/pin.cjs');
+const require_stack_stack = require('./stack/stack.cjs');
+const require_tile_tile = require('./tile/tile.cjs');
+
+exports.balance = require_balance_balance;
+exports.center = require_center_center;
+exports.flow = require_flow_flow;
+exports.layer = require_layer_layer;
+exports.matrix = require_matrix_matrix;
+exports.pack = require_pack_pack;
+exports.pin = require_pin_pin;
+exports.stack = require_stack_stack;
+exports.tile = require_tile_tile;

package/index.d.cts

@@ -0,0 +1,20 @@
+import { CreateLayoutStyle, LayoutStyle } from "./types.cjs";
+import { BalanceLayoutOptions } from "./balance/types.cjs";
+import balance from "./balance/balance.cjs";
+import { CenterLayoutOptions } from "./center/types.cjs";
+import center from "./center/center.cjs";
+import { FlowLayoutOptions } from "./flow/types.cjs";
+import flow from "./flow/flow.cjs";
+import { LayerLayoutOptions } from "./layer/types.cjs";
+import { MatrixLayoutOptions } from "./matrix/types.cjs";
+import { PackLayoutOptions } from "./pack/types.cjs";
+import { PinLayoutOptions } from "./pin/types.cjs";
+import { StackLayoutOptions } from "./stack/types.cjs";
+import { TileLayoutOptions } from "./tile/types.cjs";
+import layer from "./layer/layer.cjs";
+import matrix from "./matrix/matrix.cjs";
+import pack from "./pack/pack.cjs";
+import pin from "./pin/pin.cjs";
+import stack from "./stack/stack.cjs";
+import tile from "./tile/tile.cjs";
+export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };

package/index.d.mts

@@ -0,0 +1,20 @@
+import { CreateLayoutStyle, LayoutStyle } from "./types.mjs";
+import { BalanceLayoutOptions } from "./balance/types.mjs";
+import balance from "./balance/balance.mjs";
+import { CenterLayoutOptions } from "./center/types.mjs";
+import center from "./center/center.mjs";
+import { FlowLayoutOptions } from "./flow/types.mjs";
+import flow from "./flow/flow.mjs";
+import { LayerLayoutOptions } from "./layer/types.mjs";
+import { MatrixLayoutOptions } from "./matrix/types.mjs";
+import { PackLayoutOptions } from "./pack/types.mjs";
+import { PinLayoutOptions } from "./pin/types.mjs";
+import { StackLayoutOptions } from "./stack/types.mjs";
+import { TileLayoutOptions } from "./tile/types.mjs";
+import layer from "./layer/layer.mjs";
+import matrix from "./matrix/matrix.mjs";
+import pack from "./pack/pack.mjs";
+import pin from "./pin/pin.mjs";
+import stack from "./stack/stack.mjs";
+import tile from "./tile/tile.mjs";
+export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };

package/index.mjs

@@ -0,0 +1,11 @@
+import balance from "./balance/balance.mjs";
+import center from "./center/center.mjs";
+import flow from "./flow/flow.mjs";
+import layer from "./layer/layer.mjs";
+import matrix from "./matrix/matrix.mjs";
+import pack from "./pack/pack.mjs";
+import pin from "./pin/pin.mjs";
+import stack from "./stack/stack.mjs";
+import tile from "./tile/tile.mjs";
+
+export { balance, center, flow, layer, matrix, pack, pin, stack, tile };

package/layer/index.cjs

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

package/layer/index.d.cts

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

package/layer/index.d.mts

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

package/layer/index.mjs

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

package/layer/layer.cjs

@@ -0,0 +1,34 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require__constants = require('../_constants.cjs');
+const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
+const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
+const require__internal_applyItemSize = require('../_internal/applyItemSize.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/layer/layer.ts
+/**
+* layerレイアウト
+*
+* - 子要素を重ねて配置する
+* - alignX / alignY で重なる位置を制御する
+* - 子要素の重なり順はDOM順に従う
+*/
+const layer = (options = {}) => {
+	const { alignX, alignY, adjustX, adjustY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutLayer, require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY], require__constants.clsLayout.adjust.x[adjustX], require__constants.clsLayout.adjust.y[adjustY]),
+		style: {}
+	};
+	require__internal_applyItemSize(result, itemSizeX, itemSizeY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+module.exports = layer;

package/layer/layer.d.cts

@@ -0,0 +1,13 @@
+import { CreateLayoutStyle } from "../types.cjs";
+import { LayerLayoutOptions } from "./types.cjs";
+
+//#region src/layer/layer.d.ts
+/**
+ * layerレイアウト
+ *
+ * - 子要素を重ねて配置する
+ * - alignX / alignY で重なる位置を制御する
+ * - 子要素の重なり順はDOM順に従う
+ */
+declare const layer: CreateLayoutStyle<LayerLayoutOptions>;
+export = layer;

package/layer/layer.d.mts

@@ -0,0 +1,14 @@
+import { CreateLayoutStyle } from "../types.mjs";
+import { LayerLayoutOptions } from "./types.mjs";
+
+//#region src/layer/layer.d.ts
+/**
+ * layerレイアウト
+ *
+ * - 子要素を重ねて配置する
+ * - alignX / alignY で重なる位置を制御する
+ * - 子要素の重なり順はDOM順に従う
+ */
+declare const layer: CreateLayoutStyle<LayerLayoutOptions>;
+//#endregion
+export { layer as default };

package/layer/layer.mjs

@@ -0,0 +1,32 @@
+import { clsLayout, clsLayoutLayer } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
+import applyItemRatio from "../_internal/applyItemRatio.mjs";
+import applyItemSize from "../_internal/applyItemSize.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/layer/layer.ts
+/**
+* layerレイアウト
+*
+* - 子要素を重ねて配置する
+* - alignX / alignY で重なる位置を制御する
+* - 子要素の重なり順はDOM順に従う
+*/
+const layer = (options = {}) => {
+	const { alignX, alignY, adjustX, adjustY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: mergeClassName(clsLayoutLayer, clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		style: {}
+	};
+	applyItemSize(result, itemSizeX, itemSizeY);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+export { layer as default };

package/layer/styles.css

@@ -0,0 +1,56 @@
+.lx-layout-layer {
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: grid;
+}
+.lx-layout-layer > * {
+  grid-area: 1/1;
+}
+.lx-layout-layer.lx-layout-alignX-left > * {
+  justify-self: start;
+}
+.lx-layout-layer.lx-layout-alignX-center > * {
+  justify-self: center;
+}
+.lx-layout-layer.lx-layout-alignX-right > * {
+  justify-self: end;
+}
+.lx-layout-layer.lx-layout-alignY-top > * {
+  align-self: start;
+}
+.lx-layout-layer.lx-layout-alignY-middle > * {
+  align-self: center;
+}
+.lx-layout-layer.lx-layout-alignY-bottom > * {
+  align-self: end;
+}
+.lx-layout-layer.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+.lx-layout-layer.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+.lx-layout-layer.lx-layout-adjustX-fit > *, .lx-layout-layer.lx-layout-adjustX-grow > * {
+  justify-self: stretch;
+  width: auto;
+}
+.lx-layout-layer.lx-layout-adjustX-grow > * {
+  min-width: var(--lx-layout-itemSizeX);
+}
+.lx-layout-layer.lx-layout-adjustX-shrink > * {
+  width: clamp(0px, 100%, var(--lx-layout-itemSizeX));
+}
+.lx-layout-layer.lx-layout-adjustY-fit > *, .lx-layout-layer.lx-layout-adjustY-grow > * {
+  align-self: stretch;
+  height: auto;
+}
+.lx-layout-layer.lx-layout-adjustY-grow > * {
+  min-height: var(--lx-layout-itemSizeY);
+}
+.lx-layout-layer.lx-layout-adjustY-shrink > * {
+  height: clamp(0px, 100%, var(--lx-layout-itemSizeY));
+}
+.lx-layout-layer.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}

package/layer/types.d.cts

@@ -0,0 +1,13 @@
+import { AlignXBase, AlignYBase } from "../constants.cjs";
+import { AdjustOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
+
+//#region src/layer/types.d.ts
+/**
+ * layerのオプション
+ */
+type LayerLayoutOptions = AdjustOptions & ItemSizeOptions & ItemRatioOptions & {
+  alignX?: AlignXBase;
+  alignY?: AlignYBase;
+};
+//#endregion
+export { LayerLayoutOptions };

package/layer/types.d.mts

@@ -0,0 +1,13 @@
+import { AlignXBase, AlignYBase } from "../constants.mjs";
+import { AdjustOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
+
+//#region src/layer/types.d.ts
+/**
+ * layerのオプション
+ */
+type LayerLayoutOptions = AdjustOptions & ItemSizeOptions & ItemRatioOptions & {
+  alignX?: AlignXBase;
+  alignY?: AlignYBase;
+};
+//#endregion
+export { LayerLayoutOptions };

package/layer/types.mjs

@@ -0,0 +1 @@
+export {  };

package/matrix/index.cjs

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

package/matrix/index.d.cts

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

package/matrix/index.d.mts

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

package/matrix/index.mjs

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

package/matrix/matrix.cjs

@@ -0,0 +1,110 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require__constants = require('../_constants.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_applyItemSize = require('../_internal/applyItemSize.cjs');
+const require__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
+const require__internal_applyItemCount = require('../_internal/applyItemCount.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/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+* - 親要素のサイズが子要素に依存していないことを前提とする
+*/
+const matrix = (options = {
+	itemCountX: 8,
+	itemCountY: 8
+}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY, itemCountX, itemCountY, tracksX, tracksY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	let result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutMatrix, require__constants.clsLayout.direction[direction], require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY], require__constants.clsLayout.adjust.x[adjustX], require__constants.clsLayout.adjust.y[adjustY]),
+		style: {}
+	};
+	require__internal_applyGap(result, gap, gapX, gapY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	let sizeX;
+	let sizeY;
+	let countX;
+	let countY;
+	let trxX;
+	let trxY;
+	if (Array.isArray(tracksX)) trxX = tracksX;
+	else {
+		sizeX = itemSizeX;
+		countX = itemCountX;
+	}
+	if (Array.isArray(tracksY)) trxY = tracksY;
+	else {
+		sizeY = itemSizeY;
+		countY = itemCountY;
+	}
+	require__internal_applyItemSize(result, sizeX, sizeY);
+	require__internal_applyItemCount(result, countX, countY);
+	if (trxX) result = require__internal_mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
+	if (trxY) result = require__internal_mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
+	return result;
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param tracks 子要素数 & サイズ
+* @returns
+*/
+function _getTemplate(axis, adjust, tracks) {
+	const pxTotal = tracks.reduce((sum, value) => {
+		const px = _extractPx(value);
+		return px !== null ? sum + px : sum;
+	}, 0);
+	const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
+	return {
+		className: require__constants.clsLayout.template[axis],
+		style: { [require__constants.varLayout.template[axis]]: template }
+	};
+}
+/**
+* tracksX/tracksYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, itemCount, pxTotal) {
+	const itemSize = require__internal_unit(size);
+	const isFr = typeof size === "string" && size.trim().endsWith("fr");
+	const pxValue = _extractPx(size);
+	const isPx = pxValue !== null;
+	if (adjust === "fit") {
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require__constants.varLayout.gap[axis]}) * ${itemCount - 1}) * ${pxValue} / ${pxTotal})`}, ${itemSize}))`;
+		return isFr ? itemSize : `minmax(0, ${itemSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${itemSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require__constants.varLayout.gap[axis]}) * ${itemCount - 1})))`;
+		return isFr ? itemSize : `minmax(${itemSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require__constants.varLayout.gap[axis]}) * ${itemCount - 1}) * ${pxValue} / ${pxTotal})`}, ${itemSize}))`;
+		return isFr ? itemSize : `minmax(0, ${itemSize})`;
+	}
+	return itemSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(itemSize) {
+	if (typeof itemSize === "number") return itemSize;
+	const match = itemSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+module.exports = matrix;

package/matrix/matrix.d.cts

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

package/matrix/matrix.d.mts

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

package/matrix/matrix.mjs

@@ -0,0 +1,108 @@
+import { clsLayout, clsLayoutMatrix, varLayout } from "../_constants.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 applyItemSize from "../_internal/applyItemSize.mjs";
+import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
+import applyItemCount from "../_internal/applyItemCount.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+* - 親要素のサイズが子要素に依存していないことを前提とする
+*/
+const matrix = (options = {
+	itemCountX: 8,
+	itemCountY: 8
+}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY, itemCountX, itemCountY, tracksX, tracksY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	let result = {
+		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);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	let sizeX;
+	let sizeY;
+	let countX;
+	let countY;
+	let trxX;
+	let trxY;
+	if (Array.isArray(tracksX)) trxX = tracksX;
+	else {
+		sizeX = itemSizeX;
+		countX = itemCountX;
+	}
+	if (Array.isArray(tracksY)) trxY = tracksY;
+	else {
+		sizeY = itemSizeY;
+		countY = itemCountY;
+	}
+	applyItemSize(result, sizeX, sizeY);
+	applyItemCount(result, countX, countY);
+	if (trxX) result = mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
+	if (trxY) result = mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
+	return result;
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param tracks 子要素数 & サイズ
+* @returns
+*/
+function _getTemplate(axis, adjust, tracks) {
+	const pxTotal = tracks.reduce((sum, value) => {
+		const px = _extractPx(value);
+		return px !== null ? sum + px : sum;
+	}, 0);
+	const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
+	return {
+		className: clsLayout.template[axis],
+		style: { [varLayout.template[axis]]: template }
+	};
+}
+/**
+* tracksX/tracksYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, itemCount, pxTotal) {
+	const itemSize = unit(size);
+	const isFr = typeof size === "string" && size.trim().endsWith("fr");
+	const pxValue = _extractPx(size);
+	const isPx = pxValue !== null;
+	if (adjust === "fit") {
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayout.gap[axis]}) * ${itemCount - 1}) * ${pxValue} / ${pxTotal})`}, ${itemSize}))`;
+		return isFr ? itemSize : `minmax(0, ${itemSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${itemSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayout.gap[axis]}) * ${itemCount - 1})))`;
+		return isFr ? itemSize : `minmax(${itemSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayout.gap[axis]}) * ${itemCount - 1}) * ${pxValue} / ${pxTotal})`}, ${itemSize}))`;
+		return isFr ? itemSize : `minmax(0, ${itemSize})`;
+	}
+	return itemSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(itemSize) {
+	if (typeof itemSize === "number") return itemSize;
+	const match = itemSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+export { matrix as default };