@fringeworks/react-layouts 0.8.0

package/css/tile.css

@@ -0,0 +1,236 @@
+.lx-layout-tile {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: grid;
+}
+
+.lx-layout-tile > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.lx-layout-tile.lx-layout-direction-x {
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
+  width: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
+}
+
+.lx-layout-tile.lx-layout-direction-x {
+  grid-auto-rows: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit {
+  grid-auto-rows: minmax(0, 100%);
+  align-content: stretch;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit > * {
+  height: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow {
+  grid-auto-rows: minmax(auto, 100%);
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY {
+  grid-auto-rows: minmax(var(--lx-layout-itemSizeY), 100%);
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
+  min-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, auto);
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
+  grid-auto-rows: minmax(0, var(--lx-layout-itemSizeY));
+}
+
+.lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
+  max-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-tile.lx-layout-direction-y {
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
+  width: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit {
+  grid-auto-columns: minmax(0, 100%);
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow {
+  grid-auto-columns: minmax(auto, 100%);
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow.lx-layout-itemSizeX {
+  grid-auto-columns: minmax(var(--lx-layout-itemSizeX), 100%);
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, auto);
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
+  grid-auto-columns: minmax(0, var(--lx-layout-itemSizeX));
+}
+
+.lx-layout-tile.lx-layout-direction-y {
+  grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink {
+  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit {
+  align-content: stretch;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit > * {
+  height: auto;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
+  min-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
+}
+
+.lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
+  max-height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-tile.lx-layout-alignX-left {
+  justify-content: flex-start;
+}
+
+.lx-layout-tile.lx-layout-alignX-center {
+  justify-content: center;
+}
+
+.lx-layout-tile.lx-layout-alignX-right {
+  justify-content: flex-end;
+}
+
+.lx-layout-tile.lx-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+
+.lx-layout-tile.lx-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+
+.lx-layout-tile.lx-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+.lx-layout-tile.lx-layout-alignY-top {
+  align-content: flex-start;
+}
+
+.lx-layout-tile.lx-layout-alignY-middle {
+  align-content: center;
+}
+
+.lx-layout-tile.lx-layout-alignY-bottom {
+  align-content: flex-end;
+}
+
+.lx-layout-tile.lx-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+
+.lx-layout-tile.lx-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+
+.lx-layout-tile.lx-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+
+.lx-layout-tile.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+
+.lx-layout-tile.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+
+.lx-layout-tile.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+
+.lx-layout-tile.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+
+.lx-layout-tile.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/index.cjs

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_constants = require('./constants.cjs');
+const require_withBalanceLayout_withBalanceLayout = require('./withBalanceLayout/withBalanceLayout.cjs');
+const require_withCenterLayout_withCenterLayout = require('./withCenterLayout/withCenterLayout.cjs');
+const require_withFlowLayout_withFlowLayout = require('./withFlowLayout/withFlowLayout.cjs');
+const require_withLayerLayout_withLayerLayout = require('./withLayerLayout/withLayerLayout.cjs');
+const require_withLayout_withLayout = require('./withLayout/withLayout.cjs');
+const require_withMatrixLayout_withMatrixLayout = require('./withMatrixLayout/withMatrixLayout.cjs');
+const require_withPackLayout_withPackLayout = require('./withPackLayout/withPackLayout.cjs');
+const require_withPinLayout_withPinLayout = require('./withPinLayout/withPinLayout.cjs');
+const require_withStackLayout_withStackLayout = require('./withStackLayout/withStackLayout.cjs');
+const require_withTileLayout_withTileLayout = require('./withTileLayout/withTileLayout.cjs');
+let _fringeworks_style_layouts_constants = require("@fringeworks/style-layouts/constants");
+
+Object.defineProperty(exports, 'Adjust', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Adjust;
+  }
+});
+Object.defineProperty(exports, 'AlignX', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignX;
+  }
+});
+Object.defineProperty(exports, 'AlignXBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignXBase;
+  }
+});
+Object.defineProperty(exports, 'AlignY', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignY;
+  }
+});
+Object.defineProperty(exports, 'AlignYBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignYBase;
+  }
+});
+Object.defineProperty(exports, 'Direction', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Direction;
+  }
+});
+exports.LayoutType = require_constants.LayoutType;
+exports.withBalanceLayout = require_withBalanceLayout_withBalanceLayout;
+exports.withCenterLayout = require_withCenterLayout_withCenterLayout;
+exports.withFlowLayout = require_withFlowLayout_withFlowLayout;
+exports.withLayerLayout = require_withLayerLayout_withLayerLayout;
+exports.withLayout = require_withLayout_withLayout;
+exports.withMatrixLayout = require_withMatrixLayout_withMatrixLayout;
+exports.withPackLayout = require_withPackLayout_withPackLayout;
+exports.withPinLayout = require_withPinLayout_withPinLayout;
+exports.withStackLayout = require_withStackLayout_withStackLayout;
+exports.withTileLayout = require_withTileLayout_withTileLayout;

package/index.d.cts

@@ -0,0 +1,22 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "./constants.cjs";
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "./withBalanceLayout/types.cjs";
+import withBalanceLayout from "./withBalanceLayout/withBalanceLayout.cjs";
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "./withCenterLayout/types.cjs";
+import withCenterLayout from "./withCenterLayout/withCenterLayout.cjs";
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "./withFlowLayout/types.cjs";
+import withFlowLayout from "./withFlowLayout/withFlowLayout.cjs";
+import { LayerLayoutComponent, WithLayerLayoutOptions, WithLayerLayoutProps } from "./withLayerLayout/types.cjs";
+import withLayerLayout from "./withLayerLayout/withLayerLayout.cjs";
+import { MatrixLayoutComponent, WithMatrixLayoutOptions, WithMatrixLayoutProps } from "./withMatrixLayout/types.cjs";
+import withMatrixLayout from "./withMatrixLayout/withMatrixLayout.cjs";
+import { PackLayoutComponent, WithPackLayoutOptions, WithPackLayoutProps } from "./withPackLayout/types.cjs";
+import withPackLayout from "./withPackLayout/withPackLayout.cjs";
+import { PinLayoutComponent, WithPinLayoutOptions, WithPinLayoutProps } from "./withPinLayout/types.cjs";
+import withPinLayout from "./withPinLayout/withPinLayout.cjs";
+import { StackLayoutComponent, WithStackLayoutOptions, WithStackLayoutProps } from "./withStackLayout/types.cjs";
+import withStackLayout from "./withStackLayout/withStackLayout.cjs";
+import { TileLayoutComponent, WithTileLayoutOptions, WithTileLayoutProps } from "./withTileLayout/types.cjs";
+import withTileLayout from "./withTileLayout/withTileLayout.cjs";
+import { LayoutComponent, WithLayoutOptions, WithLayoutProps } from "./withLayout/types.cjs";
+import withLayout from "./withLayout/withLayout.cjs";
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, type BalanceLayoutComponent, type CenterLayoutComponent, Direction, type FlowLayoutComponent, type LayerLayoutComponent, type LayoutComponent, LayoutType, type MatrixLayoutComponent, type PackLayoutComponent, type PinLayoutComponent, type StackLayoutComponent, type TileLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, type WithCenterLayoutOptions, type WithCenterLayoutProps, type WithFlowLayoutOptions, type WithFlowLayoutProps, type WithLayerLayoutOptions, type WithLayerLayoutProps, type WithLayoutOptions, type WithLayoutProps, type WithMatrixLayoutOptions, type WithMatrixLayoutProps, type WithPackLayoutOptions, type WithPackLayoutProps, type WithPinLayoutOptions, type WithPinLayoutProps, type WithStackLayoutOptions, type WithStackLayoutProps, type WithTileLayoutOptions, type WithTileLayoutProps, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/index.d.mts

@@ -0,0 +1,22 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "./constants.mjs";
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "./withBalanceLayout/types.mjs";
+import withBalanceLayout from "./withBalanceLayout/withBalanceLayout.mjs";
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "./withCenterLayout/types.mjs";
+import withCenterLayout from "./withCenterLayout/withCenterLayout.mjs";
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "./withFlowLayout/types.mjs";
+import withFlowLayout from "./withFlowLayout/withFlowLayout.mjs";
+import { LayerLayoutComponent, WithLayerLayoutOptions, WithLayerLayoutProps } from "./withLayerLayout/types.mjs";
+import withLayerLayout from "./withLayerLayout/withLayerLayout.mjs";
+import { MatrixLayoutComponent, WithMatrixLayoutOptions, WithMatrixLayoutProps } from "./withMatrixLayout/types.mjs";
+import withMatrixLayout from "./withMatrixLayout/withMatrixLayout.mjs";
+import { PackLayoutComponent, WithPackLayoutOptions, WithPackLayoutProps } from "./withPackLayout/types.mjs";
+import withPackLayout from "./withPackLayout/withPackLayout.mjs";
+import { PinLayoutComponent, WithPinLayoutOptions, WithPinLayoutProps } from "./withPinLayout/types.mjs";
+import withPinLayout from "./withPinLayout/withPinLayout.mjs";
+import { StackLayoutComponent, WithStackLayoutOptions, WithStackLayoutProps } from "./withStackLayout/types.mjs";
+import withStackLayout from "./withStackLayout/withStackLayout.mjs";
+import { TileLayoutComponent, WithTileLayoutOptions, WithTileLayoutProps } from "./withTileLayout/types.mjs";
+import withTileLayout from "./withTileLayout/withTileLayout.mjs";
+import { LayoutComponent, WithLayoutOptions, WithLayoutProps } from "./withLayout/types.mjs";
+import withLayout from "./withLayout/withLayout.mjs";
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, type BalanceLayoutComponent, type CenterLayoutComponent, Direction, type FlowLayoutComponent, type LayerLayoutComponent, type LayoutComponent, LayoutType, type MatrixLayoutComponent, type PackLayoutComponent, type PinLayoutComponent, type StackLayoutComponent, type TileLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, type WithCenterLayoutOptions, type WithCenterLayoutProps, type WithFlowLayoutOptions, type WithFlowLayoutProps, type WithLayerLayoutOptions, type WithLayerLayoutProps, type WithLayoutOptions, type WithLayoutProps, type WithMatrixLayoutOptions, type WithMatrixLayoutProps, type WithPackLayoutOptions, type WithPackLayoutProps, type WithPinLayoutOptions, type WithPinLayoutProps, type WithStackLayoutOptions, type WithStackLayoutProps, type WithTileLayoutOptions, type WithTileLayoutProps, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/index.mjs

@@ -0,0 +1,13 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "./constants.mjs";
+import withBalanceLayout from "./withBalanceLayout/withBalanceLayout.mjs";
+import withCenterLayout from "./withCenterLayout/withCenterLayout.mjs";
+import withFlowLayout from "./withFlowLayout/withFlowLayout.mjs";
+import withLayerLayout from "./withLayerLayout/withLayerLayout.mjs";
+import withLayout from "./withLayout/withLayout.mjs";
+import withMatrixLayout from "./withMatrixLayout/withMatrixLayout.mjs";
+import withPackLayout from "./withPackLayout/withPackLayout.mjs";
+import withPinLayout from "./withPinLayout/withPinLayout.mjs";
+import withStackLayout from "./withStackLayout/withStackLayout.mjs";
+import withTileLayout from "./withTileLayout/withTileLayout.mjs";
+
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@fringeworks/react-layouts",
+  "version": "0.8.0",
+  "keywords": [
+    "react",
+    "layout",
+    "style"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fringeworks-js/react-layouts.git"
+  },
+  "license": "MIT",
+  "author": "Mitsuhiro Seino",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./constants": {
+      "import": "./constants.mjs",
+      "require": "./constants.cjs"
+    },
+    "./*.css": "./css/*.css",
+    "./with-css": {
+      "import": "./with-css/index.mjs",
+      "require": "./with-css/index.cjs"
+    },
+    "./with-css/*": {
+      "import": "./with-css/*/index.mjs",
+      "require": "./with-css/*/index.cjs"
+    },
+    "./*": {
+      "import": "./*/index.mjs",
+      "require": "./*/index.cjs"
+    }
+  },
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "dependencies": {
+    "@fringeworks/react-style-proxy": "^0.8.0",
+    "@fringeworks/react-utils": "^0.8.0",
+    "@fringeworks/style-layouts": "^0.8.0",
+    "@fringeworks/types": "^0.8.0",
+    "@fringeworks/utils": "^0.8.0",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/with-css/index.cjs

@@ -0,0 +1,68 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_constants = require('../constants.cjs');
+const require_withBalanceLayout_withBalanceLayout = require('../withBalanceLayout/withBalanceLayout.cjs');
+const require_withCenterLayout_withCenterLayout = require('../withCenterLayout/withCenterLayout.cjs');
+const require_withFlowLayout_withFlowLayout = require('../withFlowLayout/withFlowLayout.cjs');
+const require_withLayerLayout_withLayerLayout = require('../withLayerLayout/withLayerLayout.cjs');
+const require_withLayout_withLayout = require('../withLayout/withLayout.cjs');
+const require_withMatrixLayout_withMatrixLayout = require('../withMatrixLayout/withMatrixLayout.cjs');
+const require_withPackLayout_withPackLayout = require('../withPackLayout/withPackLayout.cjs');
+const require_withPinLayout_withPinLayout = require('../withPinLayout/withPinLayout.cjs');
+const require_withStackLayout_withStackLayout = require('../withStackLayout/withStackLayout.cjs');
+const require_withTileLayout_withTileLayout = require('../withTileLayout/withTileLayout.cjs');
+const require_with_css_styles = require('./styles.cjs');
+let _fringeworks_style_layouts_constants = require("@fringeworks/style-layouts/constants");
+
+Object.defineProperty(exports, 'Adjust', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Adjust;
+  }
+});
+Object.defineProperty(exports, 'AlignX', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignX;
+  }
+});
+Object.defineProperty(exports, 'AlignXBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignXBase;
+  }
+});
+Object.defineProperty(exports, 'AlignY', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignY;
+  }
+});
+Object.defineProperty(exports, 'AlignYBase', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.AlignYBase;
+  }
+});
+Object.defineProperty(exports, 'Direction', {
+  enumerable: true,
+  get: function () {
+    return _fringeworks_style_layouts_constants.Direction;
+  }
+});
+exports.LayoutType = require_constants.LayoutType;
+Object.defineProperty(exports, 'styles', {
+  enumerable: true,
+  get: function () {
+    return require_with_css_styles.styles_exports;
+  }
+});
+exports.withBalanceLayout = require_withBalanceLayout_withBalanceLayout;
+exports.withCenterLayout = require_withCenterLayout_withCenterLayout;
+exports.withFlowLayout = require_withFlowLayout_withFlowLayout;
+exports.withLayerLayout = require_withLayerLayout_withLayerLayout;
+exports.withLayout = require_withLayout_withLayout;
+exports.withMatrixLayout = require_withMatrixLayout_withMatrixLayout;
+exports.withPackLayout = require_withPackLayout_withPackLayout;
+exports.withPinLayout = require_withPinLayout_withPinLayout;
+exports.withStackLayout = require_withStackLayout_withStackLayout;
+exports.withTileLayout = require_withTileLayout_withTileLayout;

package/with-css/index.d.cts

@@ -0,0 +1,23 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "../constants.cjs";
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "../withBalanceLayout/types.cjs";
+import withBalanceLayout from "../withBalanceLayout/withBalanceLayout.cjs";
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "../withCenterLayout/types.cjs";
+import withCenterLayout from "../withCenterLayout/withCenterLayout.cjs";
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "../withFlowLayout/types.cjs";
+import withFlowLayout from "../withFlowLayout/withFlowLayout.cjs";
+import { LayerLayoutComponent, WithLayerLayoutOptions, WithLayerLayoutProps } from "../withLayerLayout/types.cjs";
+import withLayerLayout from "../withLayerLayout/withLayerLayout.cjs";
+import { MatrixLayoutComponent, WithMatrixLayoutOptions, WithMatrixLayoutProps } from "../withMatrixLayout/types.cjs";
+import withMatrixLayout from "../withMatrixLayout/withMatrixLayout.cjs";
+import { PackLayoutComponent, WithPackLayoutOptions, WithPackLayoutProps } from "../withPackLayout/types.cjs";
+import withPackLayout from "../withPackLayout/withPackLayout.cjs";
+import { PinLayoutComponent, WithPinLayoutOptions, WithPinLayoutProps } from "../withPinLayout/types.cjs";
+import withPinLayout from "../withPinLayout/withPinLayout.cjs";
+import { StackLayoutComponent, WithStackLayoutOptions, WithStackLayoutProps } from "../withStackLayout/types.cjs";
+import withStackLayout from "../withStackLayout/withStackLayout.cjs";
+import { TileLayoutComponent, WithTileLayoutOptions, WithTileLayoutProps } from "../withTileLayout/types.cjs";
+import withTileLayout from "../withTileLayout/withTileLayout.cjs";
+import { LayoutComponent, WithLayoutOptions, WithLayoutProps } from "../withLayout/types.cjs";
+import withLayout from "../withLayout/withLayout.cjs";
+import { styles_d_exports } from "./styles.cjs";
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, type BalanceLayoutComponent, type CenterLayoutComponent, Direction, type FlowLayoutComponent, type LayerLayoutComponent, type LayoutComponent, LayoutType, type MatrixLayoutComponent, type PackLayoutComponent, type PinLayoutComponent, type StackLayoutComponent, type TileLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, type WithCenterLayoutOptions, type WithCenterLayoutProps, type WithFlowLayoutOptions, type WithFlowLayoutProps, type WithLayerLayoutOptions, type WithLayerLayoutProps, type WithLayoutOptions, type WithLayoutProps, type WithMatrixLayoutOptions, type WithMatrixLayoutProps, type WithPackLayoutOptions, type WithPackLayoutProps, type WithPinLayoutOptions, type WithPinLayoutProps, type WithStackLayoutOptions, type WithStackLayoutProps, type WithTileLayoutOptions, type WithTileLayoutProps, styles_d_exports as styles, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/with-css/index.d.mts

@@ -0,0 +1,23 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "../constants.mjs";
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "../withBalanceLayout/types.mjs";
+import withBalanceLayout from "../withBalanceLayout/withBalanceLayout.mjs";
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "../withCenterLayout/types.mjs";
+import withCenterLayout from "../withCenterLayout/withCenterLayout.mjs";
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "../withFlowLayout/types.mjs";
+import withFlowLayout from "../withFlowLayout/withFlowLayout.mjs";
+import { LayerLayoutComponent, WithLayerLayoutOptions, WithLayerLayoutProps } from "../withLayerLayout/types.mjs";
+import withLayerLayout from "../withLayerLayout/withLayerLayout.mjs";
+import { MatrixLayoutComponent, WithMatrixLayoutOptions, WithMatrixLayoutProps } from "../withMatrixLayout/types.mjs";
+import withMatrixLayout from "../withMatrixLayout/withMatrixLayout.mjs";
+import { PackLayoutComponent, WithPackLayoutOptions, WithPackLayoutProps } from "../withPackLayout/types.mjs";
+import withPackLayout from "../withPackLayout/withPackLayout.mjs";
+import { PinLayoutComponent, WithPinLayoutOptions, WithPinLayoutProps } from "../withPinLayout/types.mjs";
+import withPinLayout from "../withPinLayout/withPinLayout.mjs";
+import { StackLayoutComponent, WithStackLayoutOptions, WithStackLayoutProps } from "../withStackLayout/types.mjs";
+import withStackLayout from "../withStackLayout/withStackLayout.mjs";
+import { TileLayoutComponent, WithTileLayoutOptions, WithTileLayoutProps } from "../withTileLayout/types.mjs";
+import withTileLayout from "../withTileLayout/withTileLayout.mjs";
+import { LayoutComponent, WithLayoutOptions, WithLayoutProps } from "../withLayout/types.mjs";
+import withLayout from "../withLayout/withLayout.mjs";
+import { styles_d_exports } from "./styles.mjs";
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, type BalanceLayoutComponent, type CenterLayoutComponent, Direction, type FlowLayoutComponent, type LayerLayoutComponent, type LayoutComponent, LayoutType, type MatrixLayoutComponent, type PackLayoutComponent, type PinLayoutComponent, type StackLayoutComponent, type TileLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, type WithCenterLayoutOptions, type WithCenterLayoutProps, type WithFlowLayoutOptions, type WithFlowLayoutProps, type WithLayerLayoutOptions, type WithLayerLayoutProps, type WithLayoutOptions, type WithLayoutProps, type WithMatrixLayoutOptions, type WithMatrixLayoutProps, type WithPackLayoutOptions, type WithPackLayoutProps, type WithPinLayoutOptions, type WithPinLayoutProps, type WithStackLayoutOptions, type WithStackLayoutProps, type WithTileLayoutOptions, type WithTileLayoutProps, styles_d_exports as styles, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/with-css/index.mjs

@@ -0,0 +1,14 @@
+import { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType } from "../constants.mjs";
+import withBalanceLayout from "../withBalanceLayout/withBalanceLayout.mjs";
+import withCenterLayout from "../withCenterLayout/withCenterLayout.mjs";
+import withFlowLayout from "../withFlowLayout/withFlowLayout.mjs";
+import withLayerLayout from "../withLayerLayout/withLayerLayout.mjs";
+import withLayout from "../withLayout/withLayout.mjs";
+import withMatrixLayout from "../withMatrixLayout/withMatrixLayout.mjs";
+import withPackLayout from "../withPackLayout/withPackLayout.mjs";
+import withPinLayout from "../withPinLayout/withPinLayout.mjs";
+import withStackLayout from "../withStackLayout/withStackLayout.mjs";
+import withTileLayout from "../withTileLayout/withTileLayout.mjs";
+import { styles_exports } from "./styles.mjs";
+
+export { Adjust, AlignX, AlignXBase, AlignY, AlignYBase, Direction, LayoutType, styles_exports as styles, withBalanceLayout, withCenterLayout, withFlowLayout, withLayerLayout, withLayout, withMatrixLayout, withPackLayout, withPinLayout, withStackLayout, withTileLayout };

package/with-css/styles.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+require("@fringeworks/style-layouts/styles.css");
+
+//#region src/with-css/styles.ts
+var styles_exports = /* @__PURE__ */ require_runtime.__exportAll({});
+
+//#endregion
+Object.defineProperty(exports, 'styles_exports', {
+  enumerable: true,
+  get: function () {
+    return styles_exports;
+  }
+});

package/with-css/styles.d.cts

@@ -0,0 +1,2 @@
+//#endregion
+export { styles_d_exports };

package/with-css/styles.d.mts

@@ -0,0 +1,2 @@
+//#endregion
+export { styles_d_exports };

package/with-css/styles.mjs

@@ -0,0 +1,8 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import "@fringeworks/style-layouts/styles.css";
+
+//#region src/with-css/styles.ts
+var styles_exports = /* @__PURE__ */ __exportAll({});
+
+//#endregion
+export { styles_exports };

package/with-css/withBalanceLayout/index.cjs

@@ -0,0 +1,4 @@
+const require_withBalanceLayout_withBalanceLayout = require('../../withBalanceLayout/withBalanceLayout.cjs');
+require('../../css/balance.css');
+
+module.exports = require_withBalanceLayout_withBalanceLayout;

package/with-css/withBalanceLayout/index.d.cts

@@ -0,0 +1,3 @@
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "../../withBalanceLayout/types.cjs";
+import withBalanceLayout from "../../withBalanceLayout/withBalanceLayout.cjs";
+export { type BalanceLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, withBalanceLayout as default };

package/with-css/withBalanceLayout/index.d.mts

@@ -0,0 +1,3 @@
+import { BalanceLayoutComponent, WithBalanceLayoutOptions, WithBalanceLayoutProps } from "../../withBalanceLayout/types.mjs";
+import withBalanceLayout from "../../withBalanceLayout/withBalanceLayout.mjs";
+export { type BalanceLayoutComponent, type WithBalanceLayoutOptions, type WithBalanceLayoutProps, withBalanceLayout as default };

package/with-css/withBalanceLayout/index.mjs

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

package/with-css/withCenterLayout/index.cjs

@@ -0,0 +1,4 @@
+const require_withCenterLayout_withCenterLayout = require('../../withCenterLayout/withCenterLayout.cjs');
+require('../../css/center.css');
+
+module.exports = require_withCenterLayout_withCenterLayout;

package/with-css/withCenterLayout/index.d.cts

@@ -0,0 +1,3 @@
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "../../withCenterLayout/types.cjs";
+import withCenterLayout from "../../withCenterLayout/withCenterLayout.cjs";
+export { type CenterLayoutComponent, type WithCenterLayoutOptions, type WithCenterLayoutProps, withCenterLayout as default };

package/with-css/withCenterLayout/index.d.mts

@@ -0,0 +1,3 @@
+import { CenterLayoutComponent, WithCenterLayoutOptions, WithCenterLayoutProps } from "../../withCenterLayout/types.mjs";
+import withCenterLayout from "../../withCenterLayout/withCenterLayout.mjs";
+export { type CenterLayoutComponent, type WithCenterLayoutOptions, type WithCenterLayoutProps, withCenterLayout as default };

package/with-css/withCenterLayout/index.mjs

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

package/with-css/withFlowLayout/index.cjs

@@ -0,0 +1,4 @@
+const require_withFlowLayout_withFlowLayout = require('../../withFlowLayout/withFlowLayout.cjs');
+require('../../css/flow.css');
+
+module.exports = require_withFlowLayout_withFlowLayout;

package/with-css/withFlowLayout/index.d.cts

@@ -0,0 +1,3 @@
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "../../withFlowLayout/types.cjs";
+import withFlowLayout from "../../withFlowLayout/withFlowLayout.cjs";
+export { type FlowLayoutComponent, type WithFlowLayoutOptions, type WithFlowLayoutProps, withFlowLayout as default };

package/with-css/withFlowLayout/index.d.mts

@@ -0,0 +1,3 @@
+import { FlowLayoutComponent, WithFlowLayoutOptions, WithFlowLayoutProps } from "../../withFlowLayout/types.mjs";
+import withFlowLayout from "../../withFlowLayout/withFlowLayout.mjs";
+export { type FlowLayoutComponent, type WithFlowLayoutOptions, type WithFlowLayoutProps, withFlowLayout as default };