@niche-works/css-layouts 0.1.0

package/_helpers/mergeLayoutResults.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/_helpers/mergeLayoutResults.ts
+function mergeLayoutResults(results) {
+	return results.reduce((layoutResult, result) => {
+		if (result.className) layoutResult.className = (0, clsx.default)(layoutResult.className, result.className);
+		if (result.style) layoutResult.style = {
+			...layoutResult.style,
+			...result.style
+		};
+		return layoutResult;
+	}, {});
+}
+
+//#endregion
+module.exports = mergeLayoutResults;

package/_helpers/mergeLayoutResults.d.cts

@@ -0,0 +1,5 @@
+import { LayoutResult } from "../types.cjs";
+
+//#region src/_helpers/mergeLayoutResults.d.ts
+declare function mergeLayoutResults(results: LayoutResult[]): LayoutResult;
+export = mergeLayoutResults;

package/_helpers/mergeLayoutResults.d.mts

@@ -0,0 +1,6 @@
+import { LayoutResult } from "../types.mjs";
+
+//#region src/_helpers/mergeLayoutResults.d.ts
+declare function mergeLayoutResults(results: LayoutResult[]): LayoutResult;
+//#endregion
+export { mergeLayoutResults as default };

package/_helpers/mergeLayoutResults.mjs

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+//#region src/_helpers/mergeLayoutResults.ts
+function mergeLayoutResults(results) {
+	return results.reduce((layoutResult, result) => {
+		if (result.className) layoutResult.className = clsx(layoutResult.className, result.className);
+		if (result.style) layoutResult.style = {
+			...layoutResult.style,
+			...result.style
+		};
+		return layoutResult;
+	}, {});
+}
+
+//#endregion
+export { mergeLayoutResults as default };

package/_helpers/unit.cjs

@@ -0,0 +1,16 @@
+
+//#region src/_helpers/unit.ts
+/**
+* valueが数値の場合、単位を付与して文字列に変換する
+* それ以外はそのまま返す
+* @param value
+* @param unit
+* @returns
+*/
+function unit(value, unit = "px") {
+	if (typeof value === "number") return `${value}${unit}`;
+	else return value;
+}
+
+//#endregion
+module.exports = unit;

package/_helpers/unit.d.cts

@@ -0,0 +1,10 @@
+//#region src/_helpers/unit.d.ts
+/**
+ * valueが数値の場合、単位を付与して文字列に変換する
+ * それ以外はそのまま返す
+ * @param value
+ * @param unit
+ * @returns
+ */
+declare function unit(value: string | number | null | undefined, unit?: string): string;
+export = unit;

package/_helpers/unit.d.mts

@@ -0,0 +1,11 @@
+//#region src/_helpers/unit.d.ts
+/**
+ * valueが数値の場合、単位を付与して文字列に変換する
+ * それ以外はそのまま返す
+ * @param value
+ * @param unit
+ * @returns
+ */
+declare function unit(value: string | number | null | undefined, unit?: string): string;
+//#endregion
+export { unit as default };

package/_helpers/unit.mjs

@@ -0,0 +1,15 @@
+//#region src/_helpers/unit.ts
+/**
+* valueが数値の場合、単位を付与して文字列に変換する
+* それ以外はそのまま返す
+* @param value
+* @param unit
+* @returns
+*/
+function unit(value, unit = "px") {
+	if (typeof value === "number") return `${value}${unit}`;
+	else return value;
+}
+
+//#endregion
+export { unit as default };

package/_types.d.cts

@@ -0,0 +1,118 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
+import CSS from "csstype";
+
+//#region src/_types.d.ts
+/**
+ * CSS変数を許容するCSSProperties
+ */
+type CSSPropertiesWithVars = CSSProperties & {
+  [key: `--${string}`]: string | number | undefined;
+};
+type CSSProperties = CSS.Properties<string | number>;
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * childSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust;
+  /**
+   * 子要素の高さの調整
+   * childSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust;
+};
+/**
+ * 要素間の余白
+ */
+type SpacingOptions = {
+  /**
+   * 余白
+   */
+  spacing?: ChildSpacing;
+  /**
+   * 横方向の余白
+   */
+  spacingX?: ChildSpacing;
+  /**
+   * 縦方向の余白
+   */
+  spacingY?: ChildSpacing;
+};
+/**
+ * 子要素のサイズ
+ */
+type ChildSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  childSizeX?: ChildSize;
+  /**
+   * 子要素の高さ
+   */
+  childSizeY?: ChildSize;
+};
+/**
+ * 子要素の数
+ */
+type ChildCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  childCountX?: number;
+  /**
+   * 縦方向の要素数
+   */
+  childCountY?: number;
+};
+/**
+ * childのテンプレート
+ */
+type ChildOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、childCountX,childSizeXは無効
+   */
+  childX?: (string | number)[];
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、childCountY,childSizeYは無効
+   */
+  childY?: (string | number)[];
+};
+/**
+ * 子要素の高さ or 幅
+ */
+type ChildSize = CSSProperties['flexBasis'];
+/**
+ * 余白
+ */
+type ChildSpacing = CSSProperties['gap'];
+//#endregion
+export { AdjustOptions, AlignOptions, CSSProperties, CSSPropertiesWithVars, ChildCountOptions, ChildOptions, ChildSize, ChildSizeOptions, ChildSpacing, DirectionOptions, SpacingOptions };

package/_types.d.mts

@@ -0,0 +1,118 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.mjs";
+import CSS from "csstype";
+
+//#region src/_types.d.ts
+/**
+ * CSS変数を許容するCSSProperties
+ */
+type CSSPropertiesWithVars = CSSProperties & {
+  [key: `--${string}`]: string | number | undefined;
+};
+type CSSProperties = CSS.Properties<string | number>;
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * childSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust;
+  /**
+   * 子要素の高さの調整
+   * childSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust;
+};
+/**
+ * 要素間の余白
+ */
+type SpacingOptions = {
+  /**
+   * 余白
+   */
+  spacing?: ChildSpacing;
+  /**
+   * 横方向の余白
+   */
+  spacingX?: ChildSpacing;
+  /**
+   * 縦方向の余白
+   */
+  spacingY?: ChildSpacing;
+};
+/**
+ * 子要素のサイズ
+ */
+type ChildSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  childSizeX?: ChildSize;
+  /**
+   * 子要素の高さ
+   */
+  childSizeY?: ChildSize;
+};
+/**
+ * 子要素の数
+ */
+type ChildCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  childCountX?: number;
+  /**
+   * 縦方向の要素数
+   */
+  childCountY?: number;
+};
+/**
+ * childのテンプレート
+ */
+type ChildOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、childCountX,childSizeXは無効
+   */
+  childX?: (string | number)[];
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、childCountY,childSizeYは無効
+   */
+  childY?: (string | number)[];
+};
+/**
+ * 子要素の高さ or 幅
+ */
+type ChildSize = CSSProperties['flexBasis'];
+/**
+ * 余白
+ */
+type ChildSpacing = CSSProperties['gap'];
+//#endregion
+export { AdjustOptions, AlignOptions, CSSProperties, CSSPropertiesWithVars, ChildCountOptions, ChildOptions, ChildSize, ChildSizeOptions, ChildSpacing, DirectionOptions, SpacingOptions };

package/_types.mjs

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

package/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/balance/balance.cjs

@@ -0,0 +1,34 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require__constants = require('../_constants.cjs');
+const require__helpers_applyChildSize = require('../_helpers/applyChildSize.cjs');
+const require__helpers_applySpacing = require('../_helpers/applySpacing.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/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+*/
+const balance = (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.clsLayoutBalance, 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 result;
+};
+
+//#endregion
+module.exports = balance;

package/balance/balance.d.cts

@@ -0,0 +1,11 @@
+import { CreateLayout } from "../types.cjs";
+import { BalanceLayoutOptions } from "./types.cjs";
+
+//#region src/balance/balance.d.ts
+/**
+ * balanceレイアウト
+ *
+ * - 子要素を均等に配置する
+ */
+declare const balance: CreateLayout<BalanceLayoutOptions>;
+export = balance;

package/balance/balance.d.mts

@@ -0,0 +1,12 @@
+import { CreateLayout } from "../types.mjs";
+import { BalanceLayoutOptions } from "./types.mjs";
+
+//#region src/balance/balance.d.ts
+/**
+ * balanceレイアウト
+ *
+ * - 子要素を均等に配置する
+ */
+declare const balance: CreateLayout<BalanceLayoutOptions>;
+//#endregion
+export { balance as default };

package/balance/balance.mjs

@@ -0,0 +1,31 @@
+import { clsLayoutBalance } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection } from "../_constants.mjs";
+import applyChildSize from "../_helpers/applyChildSize.mjs";
+import applySpacing from "../_helpers/applySpacing.mjs";
+import "./styles.css";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+*/
+const balance = (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(clsLayoutBalance, 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 result;
+};
+
+//#endregion
+export { balance as default };

package/balance/index.cjs

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

package/balance/index.d.cts

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

package/balance/index.d.mts

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

package/balance/index.mjs

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

package/balance/styles.css

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

package/balance/types.d.cts

@@ -0,0 +1,6 @@
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.cjs";
+
+//#region src/balance/types.d.ts
+type BalanceLayoutOptions = AdjustOptions & AlignOptions & ChildSizeOptions & DirectionOptions & SpacingOptions;
+//#endregion
+export { BalanceLayoutOptions };

package/balance/types.d.mts

@@ -0,0 +1,6 @@
+import { AdjustOptions, AlignOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.mjs";
+
+//#region src/balance/types.d.ts
+type BalanceLayoutOptions = AdjustOptions & AlignOptions & ChildSizeOptions & DirectionOptions & SpacingOptions;
+//#endregion
+export { BalanceLayoutOptions };

package/balance/types.mjs

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