@niche-works/style-layouts 0.2.0

package/core/balance/balance.mjs

@@ -0,0 +1,32 @@
+import { clsLayoutBalance } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection } from "../_constants.mjs";
+import applyChildRatio from "../_internal/applyChildRatio.mjs";
+import applyChildSize from "../_internal/applyChildSize.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/core/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+*/
+const balance = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = 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: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyChildSize(result, childSizeX, childSizeY);
+	applyChildRatio(result, childRatioX, childRatioY);
+	return result;
+};
+
+//#endregion
+export { balance as default };

package/core/balance/index.cjs

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

package/core/balance/index.d.cts

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

package/core/balance/index.d.mts

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

package/core/balance/index.mjs

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

package/core/balance/styles.css

@@ -0,0 +1,113 @@
+.nws-layout-balance {
+  --nws-layout-gapX: 0px;
+  --nws-layout-gapY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  --nws-layout-childRatio: auto;
+  display: grid;
+}
+.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.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-balance.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
+.nws-layout-balance > * {
+  min-width: 0;
+}
+.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-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);
+}
+.nws-layout-balance.nws-layout-childRatio > * {
+  aspect-ratio: var(--nws-layout-childRatio);
+}
+.nws-layout-balance.nws-layout-gapX {
+  column-gap: var(--nws-layout-gapX);
+}
+.nws-layout-balance.nws-layout-gapY {
+  row-gap: var(--nws-layout-gapY);
+}

package/core/balance/types.d.cts

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

package/core/balance/types.d.mts

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

package/core/balance/types.mjs

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

package/core/center/center.cjs

@@ -0,0 +1,31 @@
+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/center/center.ts
+/**
+* centerレイアウト
+*
+* - 子要素を中央に配置する
+*/
+const center = (options = {}) => {
+	const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutCenter, require_core__constants.clsLayoutDirection[direction], 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 = center;

package/core/center/center.d.cts

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

package/core/center/center.d.mts

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

package/core/center/center.mjs

@@ -0,0 +1,28 @@
+import { clsLayoutCenter } from "../constants.mjs";
+import { clsLayoutAdjust, clsLayoutDirection } from "../_constants.mjs";
+import applyChildRatio from "../_internal/applyChildRatio.mjs";
+import applyChildSize from "../_internal/applyChildSize.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/core/center/center.ts
+/**
+* centerレイアウト
+*
+* - 子要素を中央に配置する
+*/
+const center = (options = {}) => {
+	const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutCenter, clsLayoutDirection[direction], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyChildSize(result, childSizeX, childSizeY);
+	applyChildRatio(result, childRatioX, childRatioY);
+	return result;
+};
+
+//#endregion
+export { center as default };

package/core/center/index.cjs

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

package/core/center/index.d.cts

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

package/core/center/index.d.mts

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

package/core/center/index.mjs

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

package/core/center/styles.css

@@ -0,0 +1,166 @@
+.nws-layout-center {
+  --nws-layout-gapX: 0px;
+  --nws-layout-gapY: 0px;
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  --nws-layout-childRatio: auto;
+  display: flex;
+  justify-content: safe center;
+  align-content: safe center;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+.nws-layout-center > * {
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  margin: 0;
+}
+.nws-layout-center.nws-layout-direction-x {
+  flex-direction: row;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-center.nws-layout-direction-x > * {
+  max-width: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
+  justify-content: stretch;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
+  justify-content: stretch;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
+  width: 100%;
+  min-width: var(--nws-layout-childSizeX);
+  max-width: none;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
+  width: var(--nws-layout-childSizeX);
+  max-width: 100%;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: var(--nws-layout-childSizeX);
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}
+.nws-layout-center.nws-layout-direction-x > * {
+  max-height: none;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit {
+  align-items: stretch;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-grow {
+  align-items: stretch;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--nws-layout-childSizeY);
+  max-height: none;
+}
+.nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
+  height: var(--nws-layout-childSizeY);
+  max-height: 100%;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.nws-layout-center.nws-layout-direction-y {
+  flex-direction: column;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-center.nws-layout-direction-y > * {
+  max-width: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-fit {
+  align-items: stretch;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-grow {
+  align-items: stretch;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-grow > * {
+  width: 100%;
+  max-width: none;
+  min-width: var(--nws-layout-childSizeX);
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
+  width: var(--nws-layout-childSizeX);
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-center.nws-layout-direction-y > * {
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
+  justify-content: stretch;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
+  justify-content: stretch;
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--nws-layout-childSizeY);
+  max-height: none;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
+  height: var(--nws-layout-childSizeY);
+  max-height: 100%;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: var(--nws-layout-childSizeY);
+}
+.nws-layout-center.nws-layout-childRatio > * {
+  aspect-ratio: var(--nws-layout-childRatio);
+}
+.nws-layout-center.nws-layout-gapX {
+  column-gap: var(--nws-layout-gapX);
+}
+.nws-layout-center.nws-layout-gapY {
+  row-gap: var(--nws-layout-gapY);
+}

package/core/center/types.d.cts

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

package/core/center/types.d.mts

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

package/core/center/types.mjs

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