@niche-works/style-layouts 0.2.0

package/core/_internal/applyChildSize.d.mts

@@ -0,0 +1,12 @@
+import { StyleLayoutResult } from "../types.mjs";
+
+//#region src/core/_internal/applyChildSize.d.ts
+/**
+ * 子要素のサイズに関する設定の適用
+ * @param result
+ * @param childSizeX
+ * @param childSizeY
+ */
+declare function applyChildSize(result: StyleLayoutResult, childSizeX: number | null | undefined, childSizeY: number | null | undefined): void;
+//#endregion
+export { applyChildSize as default };

package/core/_internal/applyChildSize.mjs

@@ -0,0 +1,25 @@
+import { clsLayoutChildSizeX, clsLayoutChildSizeY, varLayoutChildSizeX, varLayoutChildSizeY } from "../constants.mjs";
+import hasValue from "./hasValue.mjs";
+import unit from "./unit.mjs";
+import clsx from "clsx";
+
+//#region src/core/_internal/applyChildSize.ts
+/**
+* 子要素のサイズに関する設定の適用
+* @param result
+* @param childSizeX
+* @param childSizeY
+*/
+function applyChildSize(result, childSizeX, childSizeY) {
+	if (hasValue(childSizeX)) {
+		result.className = clsx(result.className, clsLayoutChildSizeX);
+		result.style[varLayoutChildSizeX] = unit(childSizeX);
+	}
+	if (hasValue(childSizeY)) {
+		result.className = clsx(result.className, clsLayoutChildSizeY);
+		result.style[varLayoutChildSizeY] = unit(childSizeY);
+	}
+}
+
+//#endregion
+export { applyChildSize as default };

package/core/_internal/applyGap.cjs

@@ -0,0 +1,30 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_core_constants = require('../constants.cjs');
+const require_core__internal_hasValue = require('./hasValue.cjs');
+const require_core__internal_unit = require('./unit.cjs');
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/core/_internal/applyGap.ts
+/**
+* スペーシングに関する設定の適用
+* @param result
+* @param gap
+* @param gapX
+* @param gapY
+*/
+function applyGap(result, gap, gapX, gapY) {
+	gapX = gapX ?? gap;
+	if (require_core__internal_hasValue(gapX)) {
+		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutGapX);
+		result.style[require_core_constants.varLayoutGapX] = require_core__internal_unit(gapX);
+	}
+	gapY = gapY ?? gap;
+	if (require_core__internal_hasValue(gapY)) {
+		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutGapY);
+		result.style[require_core_constants.varLayoutGapY] = require_core__internal_unit(gapY);
+	}
+}
+
+//#endregion
+module.exports = applyGap;

package/core/_internal/applyGap.d.cts

@@ -0,0 +1,12 @@
+import { StyleLayoutResult } from "../types.cjs";
+
+//#region src/core/_internal/applyGap.d.ts
+/**
+ * スペーシングに関する設定の適用
+ * @param result
+ * @param gap
+ * @param gapX
+ * @param gapY
+ */
+declare function applyGap(result: StyleLayoutResult, gap: number | null | undefined, gapX: number | null | undefined, gapY: number | null | undefined): void;
+export = applyGap;

package/core/_internal/applyGap.d.mts

@@ -0,0 +1,13 @@
+import { StyleLayoutResult } from "../types.mjs";
+
+//#region src/core/_internal/applyGap.d.ts
+/**
+ * スペーシングに関する設定の適用
+ * @param result
+ * @param gap
+ * @param gapX
+ * @param gapY
+ */
+declare function applyGap(result: StyleLayoutResult, gap: number | null | undefined, gapX: number | null | undefined, gapY: number | null | undefined): void;
+//#endregion
+export { applyGap as default };

package/core/_internal/applyGap.mjs

@@ -0,0 +1,28 @@
+import { clsLayoutGapX, clsLayoutGapY, varLayoutGapX, varLayoutGapY } from "../constants.mjs";
+import hasValue from "./hasValue.mjs";
+import unit from "./unit.mjs";
+import clsx from "clsx";
+
+//#region src/core/_internal/applyGap.ts
+/**
+* スペーシングに関する設定の適用
+* @param result
+* @param gap
+* @param gapX
+* @param gapY
+*/
+function applyGap(result, gap, gapX, gapY) {
+	gapX = gapX ?? gap;
+	if (hasValue(gapX)) {
+		result.className = clsx(result.className, clsLayoutGapX);
+		result.style[varLayoutGapX] = unit(gapX);
+	}
+	gapY = gapY ?? gap;
+	if (hasValue(gapY)) {
+		result.className = clsx(result.className, clsLayoutGapY);
+		result.style[varLayoutGapY] = unit(gapY);
+	}
+}
+
+//#endregion
+export { applyGap as default };

package/core/_internal/hasValue.cjs

@@ -0,0 +1,15 @@
+
+//#region src/core/_internal/hasValue.ts
+/**
+* 有効な値か
+* @param value
+* @returns
+*/
+function hasValue(value) {
+	if (typeof value === "number") return true;
+	else if (typeof value === "boolean") return true;
+	else return value !== null && value !== void 0 && value !== "";
+}
+
+//#endregion
+module.exports = hasValue;

package/core/_internal/hasValue.d.cts

@@ -0,0 +1,8 @@
+//#region src/core/_internal/hasValue.d.ts
+/**
+ * 有効な値か
+ * @param value
+ * @returns
+ */
+declare function hasValue(value: string | number | boolean | null | undefined): value is string | number | boolean;
+export = hasValue;

package/core/_internal/hasValue.d.mts

@@ -0,0 +1,9 @@
+//#region src/core/_internal/hasValue.d.ts
+/**
+ * 有効な値か
+ * @param value
+ * @returns
+ */
+declare function hasValue(value: string | number | boolean | null | undefined): value is string | number | boolean;
+//#endregion
+export { hasValue as default };

package/core/_internal/hasValue.mjs

@@ -0,0 +1,14 @@
+//#region src/core/_internal/hasValue.ts
+/**
+* 有効な値か
+* @param value
+* @returns
+*/
+function hasValue(value) {
+	if (typeof value === "number") return true;
+	else if (typeof value === "boolean") return true;
+	else return value !== null && value !== void 0 && value !== "";
+}
+
+//#endregion
+export { hasValue as default };

package/core/_internal/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/core/_internal/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/core/_internal/mergeLayoutResults.d.cts

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

package/core/_internal/mergeLayoutResults.d.mts

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

package/core/_internal/mergeLayoutResults.mjs

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+//#region src/core/_internal/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/core/_internal/unit.cjs

@@ -0,0 +1,16 @@
+
+//#region src/core/_internal/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/core/_internal/unit.d.cts

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

package/core/_internal/unit.d.mts

@@ -0,0 +1,11 @@
+//#region src/core/_internal/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/core/_internal/unit.mjs

@@ -0,0 +1,15 @@
+//#region src/core/_internal/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/core/_internal/warnIfUnsupported.cjs

@@ -0,0 +1,15 @@
+
+//#region src/core/_internal/warnIfUnsupported.ts
+const _checkCSSSupport = (property, value) => {
+	if (typeof CSS === "undefined" || !CSS.supports) return true;
+	return CSS.supports(property, value);
+};
+function warnIfUnsupported(layout, checks) {
+	if (process.env.NODE_ENV === "production") return;
+	checks.forEach(([property, value]) => {
+		if (!_checkCSSSupport(property, value)) console.warn(`[@niche-works/style-layouts] "${property}: ${value}" is not supported in this browser. The "${layout}" layout may not work as expected.`);
+	});
+}
+
+//#endregion
+module.exports = warnIfUnsupported;

package/core/_internal/warnIfUnsupported.d.cts

@@ -0,0 +1,3 @@
+//#region src/core/_internal/warnIfUnsupported.d.ts
+declare function warnIfUnsupported(layout: string, checks: [string, string][]): void;
+export = warnIfUnsupported;

package/core/_internal/warnIfUnsupported.d.mts

@@ -0,0 +1,4 @@
+//#region src/core/_internal/warnIfUnsupported.d.ts
+declare function warnIfUnsupported(layout: string, checks: [string, string][]): void;
+//#endregion
+export { warnIfUnsupported as default };

package/core/_internal/warnIfUnsupported.mjs

@@ -0,0 +1,14 @@
+//#region src/core/_internal/warnIfUnsupported.ts
+const _checkCSSSupport = (property, value) => {
+	if (typeof CSS === "undefined" || !CSS.supports) return true;
+	return CSS.supports(property, value);
+};
+function warnIfUnsupported(layout, checks) {
+	if (process.env.NODE_ENV === "production") return;
+	checks.forEach(([property, value]) => {
+		if (!_checkCSSSupport(property, value)) console.warn(`[@niche-works/style-layouts] "${property}: ${value}" is not supported in this browser. The "${layout}" layout may not work as expected.`);
+	});
+}
+
+//#endregion
+export { warnIfUnsupported as default };

package/core/_styles.scss.cjs

@@ -0,0 +1 @@
+require('./styles.css');

package/core/_styles.scss.d.cts

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

package/core/_styles.scss.d.mts

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

package/core/_styles.scss.mjs

@@ -0,0 +1,3 @@
+import "./styles.css";
+
+export {  };

package/core/_types.d.cts

@@ -0,0 +1,123 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
+import CSS from "csstype";
+
+//#region src/core/_types.d.ts
+/**
+ * CSSカスタムプロパティ(変数)
+ */
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | number | undefined;
+};
+type CSSProperties = CSS.Properties<string | number>;
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D | null;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX | null;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY | null;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * childSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust | null;
+  /**
+   * 子要素の高さの調整
+   * childSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust | null;
+};
+/**
+ * 要素間の余白
+ */
+type GapOptions = {
+  /**
+   * 余白
+   */
+  gap?: number | null;
+  /**
+   * 横方向の余白
+   */
+  gapX?: number | null;
+  /**
+   * 縦方向の余白
+   */
+  gapY?: number | null;
+};
+/**
+ * 子要素のサイズ
+ */
+type ChildSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  childSizeX?: number | null;
+  /**
+   * 子要素の高さ
+   */
+  childSizeY?: number | null;
+};
+/**
+ * 子要素のサイズの縦横比
+ */
+type ChildRatioOptions = {
+  /**
+   * 子要素の縦横比(横)
+   */
+  childRatioX?: number;
+  /**
+   * 子要素の縦横比(縦)
+   */
+  childRatioY?: number;
+};
+/**
+ * 子要素の数
+ */
+type ChildCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  childCountX?: number | null;
+  /**
+   * 縦方向の要素数
+   */
+  childCountY?: number | null;
+};
+/**
+ * 子要素のサイズと数
+ */
+type TracksOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、childCountX,childSizeXは無効
+   */
+  tracksX?: (string | number)[] | null;
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、childCountY,childSizeYは無効
+   */
+  tracksY?: (string | number)[] | null;
+};
+//#endregion
+export { AdjustOptions, AlignOptions, CSSCustomProperties, CSSProperties, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };

package/core/_types.d.mts

@@ -0,0 +1,123 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.mjs";
+import CSS from "csstype";
+
+//#region src/core/_types.d.ts
+/**
+ * CSSカスタムプロパティ(変数)
+ */
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | number | undefined;
+};
+type CSSProperties = CSS.Properties<string | number>;
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D | null;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX | null;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY | null;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * childSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust | null;
+  /**
+   * 子要素の高さの調整
+   * childSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust | null;
+};
+/**
+ * 要素間の余白
+ */
+type GapOptions = {
+  /**
+   * 余白
+   */
+  gap?: number | null;
+  /**
+   * 横方向の余白
+   */
+  gapX?: number | null;
+  /**
+   * 縦方向の余白
+   */
+  gapY?: number | null;
+};
+/**
+ * 子要素のサイズ
+ */
+type ChildSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  childSizeX?: number | null;
+  /**
+   * 子要素の高さ
+   */
+  childSizeY?: number | null;
+};
+/**
+ * 子要素のサイズの縦横比
+ */
+type ChildRatioOptions = {
+  /**
+   * 子要素の縦横比(横)
+   */
+  childRatioX?: number;
+  /**
+   * 子要素の縦横比(縦)
+   */
+  childRatioY?: number;
+};
+/**
+ * 子要素の数
+ */
+type ChildCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  childCountX?: number | null;
+  /**
+   * 縦方向の要素数
+   */
+  childCountY?: number | null;
+};
+/**
+ * 子要素のサイズと数
+ */
+type TracksOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、childCountX,childSizeXは無効
+   */
+  tracksX?: (string | number)[] | null;
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、childCountY,childSizeYは無効
+   */
+  tracksY?: (string | number)[] | null;
+};
+//#endregion
+export { AdjustOptions, AlignOptions, CSSCustomProperties, CSSProperties, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };

package/core/_types.mjs

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

package/core/balance/balance.cjs

@@ -0,0 +1,35 @@
+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_applyChildRatio = require('../_internal/applyChildRatio.cjs');
+const require_core__internal_applyChildSize = require('../_internal/applyChildSize.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/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+*/
+const balance = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutBalance, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	require_core__internal_applyGap(result, gap, gapX, gapY);
+	require_core__internal_applyChildSize(result, childSizeX, childSizeY);
+	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
+	return result;
+};
+
+//#endregion
+module.exports = balance;

package/core/balance/balance.d.cts

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

package/core/balance/balance.d.mts

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