@niche-works/css-layouts 0.1.0

package/stack/stack.mjs

@@ -0,0 +1,95 @@
+import { clsLayoutStack } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, cssLayoutAxisSizeProp, 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/stack/stack.ts
+/**
+* stackレイアウト
+*
+* - 子要素を並べて配置する
+*/
+const stack = (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(clsLayoutStack, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY]),
+		style: {}
+	};
+	applySpacing(result, spacing, spacingX, spacingY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getStackMainAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getStackClossAxisStyle("y", alignY, adjustY, childSizeY));
+	} else {
+		resultList.push(_getStackClossAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getStackMainAxisStyle("y", alignY, adjustY, childSizeY));
+	}
+	return mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param childSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackMainAxisStyle(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;
+}
+/**
+* 交差軸方向のクラス
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param childSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackClossAxisStyle(axis, align, adjust, childSize) {
+	if (adjust === "fit") return {
+		className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]),
+		style: {
+			[`min-${cssLayoutAxisSizeProp[axis]}`]: "100%",
+			[varLayoutChildSize[axis]]: `min(0, 100%)`
+		}
+	};
+	else if (adjust === "grow") {
+		const result = {
+			className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]),
+			style: { [`min-${cssLayoutAxisSizeProp[axis]}`]: "100%" }
+		};
+		if (hasValue(childSize)) {
+			result.className = clsx(result.className, clsLayoutChildSize[axis]);
+			result.style[varLayoutChildSize[axis]] = unit(childSize);
+		}
+		return result;
+	} else if (adjust === "shrink") {
+		const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
+		if (hasValue(childSize)) {
+			result.className = clsx(result.className, clsLayoutChildSize[axis]);
+			result.style = { [varLayoutChildSize[axis]]: `min(${unit(childSize)}, 100%)` };
+		}
+		return result;
+	} else if (hasValue(childSize)) return {
+		className: clsx(clsLayoutAlign[axis][align], clsLayoutChildSize[axis]),
+		style: { [varLayoutChildSize[axis]]: unit(childSize) }
+	};
+	else return { className: clsx(clsLayoutAlign[axis][align]) };
+}
+
+//#endregion
+export { stack as default };

package/stack/styles.css

@@ -0,0 +1,171 @@
+.nws-layout-stack {
+  --nws-layout-spacingX: 0px;
+  --nws-layout-spacingY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  display: flex;
+}
+.nws-layout-stack.nws-layout-spacingX {
+  column-gap: var(--nws-layout-spacingX);
+}
+.nws-layout-stack.nws-layout-spacingY {
+  row-gap: var(--nws-layout-spacingY);
+}
+.nws-layout-stack.nws-layout-direction-x {
+  flex-direction: row;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-left {
+  justify-content: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-center {
+  justify-content: center;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-right {
+  justify-content: flex-end;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignY-top {
+  align-items: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignY-middle {
+  align-items: center;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-alignY-bottom {
+  align-items: flex-end;
+}
+.nws-layout-stack.nws-layout-direction-x > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-fit {
+  justify-content: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-width: 0;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-grow > * {
+  flex-grow: 1;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
+  flex-shrink: 1;
+}
+.nws-layout-stack.nws-layout-direction-x > * {
+  min-height: 0;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-fit {
+  align-items: stretch;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-fit > * {
+  min-height: 100%;
+  max-height: 100%;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
+  height: auto;
+}
+.nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-grow > * {
+  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 {
+  flex-direction: column;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignX-left {
+  align-items: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignX-center {
+  align-items: center;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignX-right {
+  align-items: flex-end;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-top {
+  justify-content: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-middle {
+  justify-content: center;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-bottom {
+  justify-content: flex-end;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-stack.nws-layout-direction-y > * {
+  min-width: 0;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-fit {
+  align-items: stretch;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-fit > * {
+  min-width: 100%;
+  max-width: 100%;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
+  width: auto;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-grow > * {
+  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 > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 0;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-fit {
+  justify-content: flex-start;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-fit > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-height: 0;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-grow > * {
+  flex-grow: 1;
+}
+.nws-layout-stack.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
+  flex-shrink: 1;
+}

package/stack/types.d.cts

@@ -0,0 +1,21 @@
+import { AlignXBase, AlignYBase } from "../constants.cjs";
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.cjs";
+
+//#region src/stack/types.d.ts
+/**
+ * stackのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type StackLayoutOptions = AdjustOptions & ChildSizeOptions & SpacingOptions & StackDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type StackDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { StackLayoutOptions };

package/stack/types.d.mts

@@ -0,0 +1,21 @@
+import { AlignXBase, AlignYBase } from "../constants.mjs";
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.mjs";
+
+//#region src/stack/types.d.ts
+/**
+ * stackのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type StackLayoutOptions = AdjustOptions & ChildSizeOptions & SpacingOptions & StackDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type StackDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { StackLayoutOptions };

package/stack/types.mjs

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

package/tile/index.cjs

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

package/tile/index.d.cts

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

package/tile/index.d.mts

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

package/tile/index.mjs

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

package/tile/styles.css

@@ -0,0 +1,104 @@
+.nws-layout-tile {
+  --nws-layout-childX: none;
+  --nws-layout-childY: none;
+  --nws-layout-autoTracX: auto;
+  --nws-layout-autoTracY: auto;
+  --nws-layout-spacingX: 0px;
+  --nws-layout-spacingY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  display: grid;
+}
+.nws-layout-tile.nws-layout-spacingX {
+  column-gap: var(--nws-layout-spacingX);
+}
+.nws-layout-tile.nws-layout-spacingY {
+  row-gap: var(--nws-layout-spacingY);
+}
+.nws-layout-tile.nws-layout-direction-x {
+  grid-auto-flow: row;
+  grid-template-columns: var(--nws-layout-childX);
+  grid-auto-rows: var(--nws-layout-autoTracY);
+}
+.nws-layout-tile.nws-layout-direction-y {
+  grid-auto-flow: column;
+  grid-auto-columns: var(--nws-layout-autoTracX);
+  grid-template-rows: var(--nws-layout-childY);
+}
+.nws-layout-tile.nws-layout-alignX-left {
+  justify-content: flex-start;
+}
+.nws-layout-tile.nws-layout-alignX-center {
+  justify-content: center;
+}
+.nws-layout-tile.nws-layout-alignX-right {
+  justify-content: flex-end;
+}
+.nws-layout-tile.nws-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-tile.nws-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-tile.nws-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-tile.nws-layout-alignY-top {
+  align-content: flex-start;
+}
+.nws-layout-tile.nws-layout-alignY-middle {
+  align-content: center;
+}
+.nws-layout-tile.nws-layout-alignY-bottom {
+  align-content: flex-end;
+}
+.nws-layout-tile.nws-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.nws-layout-tile.nws-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.nws-layout-tile.nws-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+.nws-layout-tile > * {
+  min-width: 0;
+}
+.nws-layout-tile.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-tile.nws-layout-adjustX-fit > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-adjustX-grow > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-adjustX-shrink > * {
+  width: auto;
+}
+.nws-layout-tile > * {
+  min-height: 0;
+}
+.nws-layout-tile.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-adjustY-fit {
+  align-content: stretch;
+}
+.nws-layout-tile.nws-layout-adjustY-fit > * {
+  height: auto;
+}
+.nws-layout-tile.nws-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
+  min-height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
+  max-height: var(--nws-layout-childSizeY);
+}

package/tile/tile.cjs

@@ -0,0 +1,85 @@
+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_applyChildSize = require('../_helpers/applyChildSize.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/tile/tile.ts
+/**
+* tileレイアウト
+*
+* - 子要素の高さ・幅を基準にして格子状に並べる
+* - 親要素のサイズが子要素に依存していないことを前提とする
+*/
+const tile = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX, spacingY, childSizeX, childSizeY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_constants.clsLayoutTile, 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);
+	require__helpers_applyChildSize(result, childSizeX, childSizeY);
+	return require__helpers_mergeLayoutResults([result, _getLayoutResultByDirection[direction](options)]);
+};
+/**
+* 並べる方向によるスタイル
+*/
+const _getLayoutResultByDirection = {
+	x: ({ adjustX, adjustY, childSizeX, childSizeY }) => {
+		return require__helpers_mergeLayoutResults([_getGridMainAxisTemplate(adjustX, childSizeX, require_constants.varLayoutTemplateX), _getGridClossAxisAuto(adjustY, childSizeY, require_constants.varLayoutAutoTracY)]);
+	},
+	y: ({ adjustX, adjustY, childSizeY, childSizeX }) => {
+		return require__helpers_mergeLayoutResults([_getGridClossAxisAuto(adjustX, childSizeX, require_constants.varLayoutAutoTracX), _getGridMainAxisTemplate(adjustY, childSizeY, require_constants.varLayoutTemplateY)]);
+	}
+};
+/**
+* direction方向の子要素のサイズを指定するためのテンプレート
+* @param align 子要素の配置
+* @param childSize 子要素のサイズ
+* @returns
+*/
+function _getGridMainAxisTemplate(adjust, childSize, varName) {
+	const hasChildSize = require__helpers_hasValue(childSize);
+	const style = {};
+	if (adjust === "fit") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require__helpers_unit(childSize)}), 1fr))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (adjust === "grow") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(${require__helpers_unit(childSize)}, 1fr))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (adjust === "shrink") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(0, ${require__helpers_unit(childSize)}))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (hasChildSize) style[varName] = `repeat(auto-fit, ${require__helpers_unit(childSize)})`;
+	else style[varName] = "repeat(auto-fit, minmax(max-content, 100%))";
+	return { style };
+}
+/**
+* 交差軸方向
+* @param adjust
+* @param childSize
+* @returns
+*/
+function _getGridClossAxisAuto(adjust, childSize, varName) {
+	const hasChildSize = require__helpers_hasValue(childSize);
+	const style = {};
+	if (adjust === "fit") if (hasChildSize) style[varName] = `minmax(0, 100%)`;
+	else style[varName] = `minmax(0, 100%)`;
+	else if (adjust === "grow") if (hasChildSize) style[varName] = `minmax(${require__helpers_unit(childSize)}, 100%)`;
+	else style[varName] = `minmax(auto, 100%)`;
+	else if (adjust === "shrink") if (hasChildSize) style[varName] = `minmax(0, ${require__helpers_unit(childSize)})`;
+	else style[varName] = `minmax(0, auto)`;
+	return { style };
+}
+
+//#endregion
+module.exports = tile;

package/tile/tile.d.cts

@@ -0,0 +1,12 @@
+import { CreateLayout } from "../types.cjs";
+import { TileLayoutOptions } from "./types.cjs";
+
+//#region src/tile/tile.d.ts
+/**
+ * tileレイアウト
+ *
+ * - 子要素の高さ・幅を基準にして格子状に並べる
+ * - 親要素のサイズが子要素に依存していないことを前提とする
+ */
+declare const tile: CreateLayout<TileLayoutOptions>;
+export = tile;

package/tile/tile.d.mts

@@ -0,0 +1,13 @@
+import { CreateLayout } from "../types.mjs";
+import { TileLayoutOptions } from "./types.mjs";
+
+//#region src/tile/tile.d.ts
+/**
+ * tileレイアウト
+ *
+ * - 子要素の高さ・幅を基準にして格子状に並べる
+ * - 親要素のサイズが子要素に依存していないことを前提とする
+ */
+declare const tile: CreateLayout<TileLayoutOptions>;
+//#endregion
+export { tile as default };

package/tile/tile.mjs

@@ -0,0 +1,82 @@
+import { clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutTemplateX, varLayoutTemplateY } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection } from "../_constants.mjs";
+import hasValue from "../_helpers/hasValue.mjs";
+import unit from "../_helpers/unit.mjs";
+import applyChildSize from "../_helpers/applyChildSize.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/tile/tile.ts
+/**
+* tileレイアウト
+*
+* - 子要素の高さ・幅を基準にして格子状に並べる
+* - 親要素のサイズが子要素に依存していないことを前提とする
+*/
+const tile = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX, spacingY, childSizeX, childSizeY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutTile, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	applySpacing(result, spacing, spacingX, spacingY);
+	applyChildSize(result, childSizeX, childSizeY);
+	return mergeLayoutResults([result, _getLayoutResultByDirection[direction](options)]);
+};
+/**
+* 並べる方向によるスタイル
+*/
+const _getLayoutResultByDirection = {
+	x: ({ adjustX, adjustY, childSizeX, childSizeY }) => {
+		return mergeLayoutResults([_getGridMainAxisTemplate(adjustX, childSizeX, varLayoutTemplateX), _getGridClossAxisAuto(adjustY, childSizeY, varLayoutAutoTracY)]);
+	},
+	y: ({ adjustX, adjustY, childSizeY, childSizeX }) => {
+		return mergeLayoutResults([_getGridClossAxisAuto(adjustX, childSizeX, varLayoutAutoTracX), _getGridMainAxisTemplate(adjustY, childSizeY, varLayoutTemplateY)]);
+	}
+};
+/**
+* direction方向の子要素のサイズを指定するためのテンプレート
+* @param align 子要素の配置
+* @param childSize 子要素のサイズ
+* @returns
+*/
+function _getGridMainAxisTemplate(adjust, childSize, varName) {
+	const hasChildSize = hasValue(childSize);
+	const style = {};
+	if (adjust === "fit") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (adjust === "grow") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (adjust === "shrink") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
+	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
+	else if (hasChildSize) style[varName] = `repeat(auto-fit, ${unit(childSize)})`;
+	else style[varName] = "repeat(auto-fit, minmax(max-content, 100%))";
+	return { style };
+}
+/**
+* 交差軸方向
+* @param adjust
+* @param childSize
+* @returns
+*/
+function _getGridClossAxisAuto(adjust, childSize, varName) {
+	const hasChildSize = hasValue(childSize);
+	const style = {};
+	if (adjust === "fit") if (hasChildSize) style[varName] = `minmax(0, 100%)`;
+	else style[varName] = `minmax(0, 100%)`;
+	else if (adjust === "grow") if (hasChildSize) style[varName] = `minmax(${unit(childSize)}, 100%)`;
+	else style[varName] = `minmax(auto, 100%)`;
+	else if (adjust === "shrink") if (hasChildSize) style[varName] = `minmax(0, ${unit(childSize)})`;
+	else style[varName] = `minmax(0, auto)`;
+	return { style };
+}
+
+//#endregion
+export { tile as default };

package/tile/types.d.cts

@@ -0,0 +1,9 @@
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.cjs";
+
+//#region src/tile/types.d.ts
+/**
+ * tileのオプション
+ */
+type TileLayoutOptions = AdjustOptions & AlignOptions & ChildSizeOptions & DirectionOptions & SpacingOptions;
+//#endregion
+export { TileLayoutOptions };

package/tile/types.d.mts

@@ -0,0 +1,9 @@
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.mjs";
+
+//#region src/tile/types.d.ts
+/**
+ * tileのオプション
+ */
+type TileLayoutOptions = AdjustOptions & AlignOptions & ChildSizeOptions & DirectionOptions & SpacingOptions;
+//#endregion
+export { TileLayoutOptions };

package/tile/types.mjs

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