@niche-works/css-layouts 0.1.0

package/flow/flow.mjs

@@ -0,0 +1,67 @@
+import { clsLayoutFlow } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, varLayoutChildSize } from "../_constants.mjs";
+import hasValue from "../_helpers/hasValue.mjs";
+import unit from "../_helpers/unit.mjs";
+import applySpacing from "../_helpers/applySpacing.mjs";
+import mergeLayoutResults from "../_helpers/mergeLayoutResults.mjs";
+import "./styles.css";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/flow/flow.ts
+/**
+* flowレイアウト
+*
+* - 子要素を並べて配置し、親要素のサイズに達したら折り返す
+* - stackとの違いは flex-wrap: wrap が常に有効な点
+*/
+const flow = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX = spacing, spacingY = spacing, childSizeX, childSizeY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutFlow, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY]),
+		style: {}
+	};
+	applySpacing(result, spacing, spacingX, spacingY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getFlowMainAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getFlowCrossAxisStyle("y", alignY, childSizeY));
+	} else {
+		resultList.push(_getFlowCrossAxisStyle("x", alignX, childSizeX));
+		resultList.push(_getFlowMainAxisStyle("y", alignY, adjustY, childSizeY));
+	}
+	return mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+*
+* stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
+*/
+function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
+	const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
+	if (hasValue(childSize)) {
+		result.className = clsx(result.className, clsLayoutChildSize[axis]);
+		result.style = { [varLayoutChildSize[axis]]: unit(childSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のスタイル
+*
+* stackの _getStackClossAxisStyle に相当。
+* flowは交差軸方向のadjustはできないため、常にnoneのスタイルを返す
+*/
+function _getFlowCrossAxisStyle(axis, align, childSize) {
+	if (hasValue(childSize)) return {
+		className: clsx(clsLayoutAlign[axis][align], clsLayoutChildSize[axis]),
+		style: { [varLayoutChildSize[axis]]: unit(childSize) }
+	};
+	else return { className: clsLayoutAlign[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 { FlowLayoutOptions, flow as default };

package/flow/index.d.mts

@@ -0,0 +1,3 @@
+import { FlowLayoutOptions } from "./types.mjs";
+import flow from "./flow.mjs";
+export { 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,162 @@
+.nws-layout-flow {
+  --nws-layout-spacingX: 0px;
+  --nws-layout-spacingY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+.nws-layout-flow.nws-layout-spacingX {
+  column-gap: var(--nws-layout-spacingX);
+}
+.nws-layout-flow.nws-layout-spacingY {
+  row-gap: var(--nws-layout-spacingY);
+}
+.nws-layout-flow.nws-layout-direction-x {
+  flex-direction: row;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-left {
+  justify-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-center {
+  justify-content: center;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-right {
+  justify-content: flex-end;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-top {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-middle {
+  align-items: center;
+  align-content: center;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-bottom {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+.nws-layout-flow.nws-layout-direction-x > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit {
+  justify-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-width: 0;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-grow > * {
+  flex-grow: 1;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
+  flex-shrink: 1;
+}
+.nws-layout-flow.nws-layout-direction-x > * {
+  min-height: 0;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
+.nws-layout-flow.nws-layout-direction-y {
+  flex-direction: column;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-left {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-center {
+  align-items: center;
+  align-content: center;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-right {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-spaceBetween {
+  align-content: space-between;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-spaceAround {
+  align-content: space-around;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignX-spaceEvenly {
+  align-content: space-evenly;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-top {
+  justify-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-middle {
+  justify-content: center;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-bottom {
+  justify-content: flex-end;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-flow.nws-layout-direction-y > * {
+  min-width: 0;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-flow.nws-layout-direction-y > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 0;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeY > * {
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit {
+  justify-content: flex-start;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-height: 0;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-grow > * {
+  flex-grow: 1;
+}
+.nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
+  flex-shrink: 1;
+}

package/flow/types.d.cts

@@ -0,0 +1,21 @@
+import { AdjustBase } from "../constants.cjs";
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } 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 & ChildSizeOptions & SpacingOptions & FlowDirectionWithAdjustOptions;
+/**
+ * direction & adjustのオプション
+ */
+type FlowDirectionWithAdjustOptions = (DirectionOptions<'x'> & Omit<AdjustOptions, 'adjustY'> & {
+  adjustY?: AdjustBase;
+}) | (DirectionOptions<'y'> & Omit<AdjustOptions, 'adjustX'> & {
+  adjustX?: AdjustBase;
+});
+//#endregion
+export { FlowLayoutOptions };

package/flow/types.d.mts

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

package/flow/types.mjs

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

package/index.cjs

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_balance_balance = require('./balance/balance.cjs');
+require('./balance/index.cjs');
+const require_flow_flow = require('./flow/flow.cjs');
+require('./flow/index.cjs');
+const require_matrix_matrix = require('./matrix/matrix.cjs');
+require('./matrix/index.cjs');
+const require_pack_pack = require('./pack/pack.cjs');
+require('./pack/index.cjs');
+const require_pin_pin = require('./pin/pin.cjs');
+require('./pin/index.cjs');
+const require_stack_stack = require('./stack/stack.cjs');
+require('./stack/index.cjs');
+const require_tile_tile = require('./tile/tile.cjs');
+require('./tile/index.cjs');
+
+exports.balance = require_balance_balance;
+exports.flow = require_flow_flow;
+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,16 @@
+import { CreateLayout, LayoutResult } from "./types.cjs";
+import { BalanceLayoutOptions } from "./balance/types.cjs";
+import balance from "./balance/balance.cjs";
+import { FlowLayoutOptions } from "./flow/types.cjs";
+import flow from "./flow/flow.cjs";
+import { MatrixLayoutOptions } from "./matrix/types.cjs";
+import matrix from "./matrix/matrix.cjs";
+import { PackLayoutOptions } from "./pack/types.cjs";
+import pack from "./pack/pack.cjs";
+import { PinLayoutOptions } from "./pin/types.cjs";
+import pin from "./pin/pin.cjs";
+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, CreateLayout, FlowLayoutOptions, LayoutResult, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, TileLayoutOptions, balance, flow, matrix, pack, pin, stack, tile };

package/index.d.mts

@@ -0,0 +1,16 @@
+import { CreateLayout, LayoutResult } from "./types.mjs";
+import { BalanceLayoutOptions } from "./balance/types.mjs";
+import balance from "./balance/balance.mjs";
+import { FlowLayoutOptions } from "./flow/types.mjs";
+import flow from "./flow/flow.mjs";
+import { MatrixLayoutOptions } from "./matrix/types.mjs";
+import matrix from "./matrix/matrix.mjs";
+import { PackLayoutOptions } from "./pack/types.mjs";
+import pack from "./pack/pack.mjs";
+import { PinLayoutOptions } from "./pin/types.mjs";
+import pin from "./pin/pin.mjs";
+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, CreateLayout, FlowLayoutOptions, LayoutResult, MatrixLayoutOptions, PackLayoutOptions, PinLayoutOptions, StackLayoutOptions, TileLayoutOptions, balance, flow, matrix, pack, pin, stack, tile };

package/index.mjs

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

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 { MatrixLayoutOptions, matrix as default };

package/matrix/index.d.mts

@@ -0,0 +1,3 @@
+import { MatrixLayoutOptions } from "./types.mjs";
+import matrix from "./matrix.mjs";
+export { 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,109 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require__constants = require('../_constants.cjs');
+const require__helpers_hasValue = require('../_helpers/hasValue.cjs');
+const require__helpers_unit = require('../_helpers/unit.cjs');
+const require__helpers_applySpacing = require('../_helpers/applySpacing.cjs');
+const require__helpers_mergeLayoutResults = require('../_helpers/mergeLayoutResults.cjs');
+require('./styles.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/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+*/
+const matrix = (options) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX = spacing, spacingY = spacing, childSizeX, childSizeY, childCountX, childCountY, childX, childY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_constants.clsLayoutMatrix, require__constants.clsLayoutDirection[direction], require__constants.clsLayoutAlign.x[alignX], require__constants.clsLayoutAlign.y[alignY], require__constants.clsLayoutAdjust.x[adjustX], require__constants.clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	require__helpers_applySpacing(result, spacing, spacingX, spacingY);
+	return require__helpers_mergeLayoutResults([
+		result,
+		_getGridTemplate("x", adjustX, childSizeX, childCountX, childX),
+		_getGridTemplate("y", adjustY, childSizeY, childCountY, childY)
+	]);
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param childSize 子要素のサイズ
+* @param childCount 子要素数
+* @param child 子要素数 & サイズ
+* @returns
+*/
+function _getGridTemplate(axis, adjust, childSize, childCount, child) {
+	let template;
+	if (Array.isArray(child)) {
+		const pxTotal = child.reduce((sum, value) => {
+			const px = _extractPx(value);
+			return px !== null ? sum + px : sum;
+		}, 0);
+		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
+	} else {
+		const hasChildSize = require__helpers_hasValue(childSize);
+		const hasCount = require__helpers_hasValue(childCount);
+		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${require__constants.varLayoutSpacing[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${require__helpers_unit(childSize)}), 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require__helpers_unit(childSize)}), 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${require__helpers_unit(childSize)}, 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(${require__helpers_unit(childSize)}, 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${require__helpers_unit(childSize)}))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${require__helpers_unit(childSize)}))`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${require__helpers_unit(childSize)})`;
+		else if (hasChildSize) template = `repeat(auto-fit, ${require__helpers_unit(childSize)})`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+	}
+	return { style: { [require__constants.varLayoutTemplate[axis]]: template } };
+}
+/**
+* childX/childYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
+	const childSize = require__helpers_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.varLayoutSpacing[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require__constants.varLayoutSpacing[axis]}) * (${childCount} - 1))))`;
+		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require__constants.varLayoutSpacing[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	}
+	return childSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(childSize) {
+	if (typeof childSize === "number") return childSize;
+	const match = childSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+module.exports = matrix;

package/matrix/matrix.d.cts

@@ -0,0 +1,11 @@
+import { CreateLayout } from "../types.cjs";
+import { MatrixLayoutOptions } from "./types.cjs";
+
+//#region src/matrix/matrix.d.ts
+/**
+ * matrixレイアウト
+ *
+ * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ */
+declare const matrix: CreateLayout<MatrixLayoutOptions>;
+export = matrix;

package/matrix/matrix.d.mts

@@ -0,0 +1,12 @@
+import { CreateLayout } from "../types.mjs";
+import { MatrixLayoutOptions } from "./types.mjs";
+
+//#region src/matrix/matrix.d.ts
+/**
+ * matrixレイアウト
+ *
+ * - 子要素の縦の数、横の数を基準にして格子状に配置する
+ */
+declare const matrix: CreateLayout<MatrixLayoutOptions>;
+//#endregion
+export { matrix as default };

package/matrix/matrix.mjs

@@ -0,0 +1,106 @@
+import { clsLayoutMatrix } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection, varLayoutSpacing, varLayoutTemplate } from "../_constants.mjs";
+import hasValue from "../_helpers/hasValue.mjs";
+import unit from "../_helpers/unit.mjs";
+import applySpacing from "../_helpers/applySpacing.mjs";
+import mergeLayoutResults from "../_helpers/mergeLayoutResults.mjs";
+import "./styles.css";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/matrix/matrix.ts
+/**
+* matrixレイアウト
+*
+* - 子要素の縦の数、横の数を基準にして格子状に配置する
+*/
+const matrix = (options) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX = spacing, spacingY = spacing, childSizeX, childSizeY, childCountX, childCountY, childX, childY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutMatrix, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	applySpacing(result, spacing, spacingX, spacingY);
+	return mergeLayoutResults([
+		result,
+		_getGridTemplate("x", adjustX, childSizeX, childCountX, childX),
+		_getGridTemplate("y", adjustY, childSizeY, childCountY, childY)
+	]);
+};
+/**
+* gridTemplateColumns / gridTemplateRowsを生成する
+* @param axis 軸
+* @param adjust 子要素のサイズ調整
+* @param childSize 子要素のサイズ
+* @param childCount 子要素数
+* @param child 子要素数 & サイズ
+* @returns
+*/
+function _getGridTemplate(axis, adjust, childSize, childCount, child) {
+	let template;
+	if (Array.isArray(child)) {
+		const pxTotal = child.reduce((sum, value) => {
+			const px = _extractPx(value);
+			return px !== null ? sum + px : sum;
+		}, 0);
+		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
+	} else {
+		const hasChildSize = hasValue(childSize);
+		const hasCount = hasValue(childCount);
+		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${varLayoutSpacing[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${unit(childSize)}), 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${unit(childSize)}, 1fr))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
+		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
+		else template = "repeat(auto-fit, 1fr)";
+		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${unit(childSize)}))`;
+		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${unit(childSize)})`;
+		else if (hasChildSize) template = `repeat(auto-fit, ${unit(childSize)})`;
+		else if (hasCount) template = `repeat(${childCount}, auto)`;
+		else template = "repeat(auto-fit, auto)";
+	}
+	return { style: { [varLayoutTemplate[axis]]: template } };
+}
+/**
+* childX/childYの各トラック値にadjustを適用する
+* fr単位の値はminmax()のminに使えないため特別扱いになり、
+* 伸縮の比率には影響しない
+*/
+function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
+	const childSize = 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(${varLayoutSpacing[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	} else if (adjust === "grow") {
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayoutSpacing[axis]}) * (${childCount} - 1))))`;
+		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
+	} else if (adjust === "shrink") {
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayoutSpacing[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		return isFr ? childSize : `minmax(0, ${childSize})`;
+	}
+	return childSize;
+}
+/**
+* px値を数値として抽出する
+* px以外の単位はnullを返す
+*/
+function _extractPx(childSize) {
+	if (typeof childSize === "number") return childSize;
+	const match = childSize.trim().match(/^([\d.]+)px$/);
+	return match ? parseFloat(match[1]) : null;
+}
+
+//#endregion
+export { matrix as default };