@sguisse/react-grid-layout 2.2.3-sguisse.3

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Samuel Reed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+<p align="center">
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/test.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/test.yml/badge.svg?branch=release-sguisse" alt="CI Test">
+  </a>
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/lint.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/lint.yml/badge.svg?branch=release-sguisse" alt="Lint">
+  </a>
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/audit.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/audit.yml/badge.svg?branch=release-sguisse" alt="Dependency Audit">
+  </a>
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/release.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/release.yml/badge.svg?branch=release-sguisse" alt="Release">
+  </a>
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/gh-pages.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/gh-pages.yml/badge.svg?branch=release-sguisse" alt="Deployment">
+  </a>
+  <a href="https://github.com/sguisse/react-grid-layout/actions/workflows/stale.yml">
+    <img src="https://github.com/sguisse/react-grid-layout/actions/workflows/stale.yml/badge.svg" alt="Stale Management">
+  </a>
+</p>
+
+---
+
+# React-Grid-Layout ==> Forked
+
+- See original [README-origin.md](README-origin.md)
+- [Forked repo
+  ](https://github.com/sguisse/react-grid-layout)
+- [DnD-kit samples](https://sguisse.github.io/react-grid-layout/examples/00-showcase.html)
+
+## DND-kit migration & cross-grid drag-and-drop
+
+This fork replaces the previous drag/resize implementation (react-draggable + react-resizable) with the @dnd-kit suite (v0.3.2) to enable native drag-and-drop transfers between different Grid instances (cross-grid DnD).
+
+Fork based from :
+
+```json
+"name": "react-grid-layout",
+"version": "2.2.3",
+```
+
+## Why we want to add cross-grid DnD support
+
+**React-Grid-Layout** remains the premier choice for building responsive grids in React. Its robust architecture is the perfect foundation for complex layouts, though users have often sought a way to move items between separate grid instances—a feature known as **cross-grid drag-and-drop**.
+
+Recognizing this as a key requirement for multi-section dashboards and a long-standing request within the community, I have extended the library to include native support for cross-grid interactions. This fork aims to provide that missing piece while staying true to the original's excellent design:
+
+- https://github.com/react-grid-layout/react-grid-layout/pull/1462
+- https://github.com/react-grid-layout/react-grid-layout/discussions/2078#discussioncomment-15990728
+
+## Why use Dnd-Kit
+
+- @dnd-kit provides composable primitives for drag/drop and collision detection that make it possible to move items between separate droppable containers.
+- Enables cross-grid transfers (drag item from Grid A and drop into Grid B) which was not feasible with the old libraries.
+- Modern, actively maintained, and flexible for custom behaviors.
+
+## What changed
+
+- Internal drag and resize handling now uses the following packages (already added as dependencies in this fork):
+  - `@dnd-kit/react` (v0.3.2)
+  - `@dnd-kit/dom` (v0.3.2)
+  - `@dnd-kit/collision` (v0.3.2)
+  - `@dnd-kit/abstract` (v0.3.2)
+- The older `react-draggable` / `react-resizable` primitives were removed from the grid internals in favor of DND-kit primitives and custom positioning/collision strategies.
+- A little bit of source code, ...
+
+## How I have done the migration
+
+- After trying several different approaches, I finally achieved a successful migration by building a dedicated team of AI agents and custom skills to handle the heavy lifting.
+  - The most challenging part was engineering the specific instructions needed to structure the team effectively.
+  - I’ve left the implementation details in the `tools` folder if you’d like to explore them
+  - Just keep in mind that the current version isn't quite 'plug-and-play' for repeated runs yet!
+
+## Demo / sample
+
+A new example demonstrates cross-grid transfers and is included under:
+
+- `test/examples/22-cross-grid-transfer.jsx`
+
+This example shows two independent grids where items can be dragged from one grid and dropped into the other. Use it to verify cross-grid behavior and to experiment with interactions.
+
+## How to run the sample (recommended: yarn)
+
+1. Install dependencies:
+
+```bash
+cd /Users/mac-SGUISS21/01-work/01-projects/02-web/fork/react-grid-layout
+yarn
+```
+
+2. Generate the static example pages and view them:
+
+```bash
+yarn view-example   # runs the example generator and serves the examples
+# or
+make build-example  # build + generate example HTML
+```
+
+3. Open the example in your browser:
+
+```
+http://localhost:4002/react-grid-layout/examples/22-cross-grid-transfer.html
+```
+
+## What to look for
+
+- Drag an item from the left grid and drop it onto the right grid (and vice-versa).
+- The example preserves item size and updates layouts on drop.
+- Resize behavior is managed via the DND-kit integration.
+
+## Notes for contributors
+
+- The public Grid API remains mostly compatible, but internals and event flows changed — if you implement custom grid children, ensure they forward refs and standard event props (`style`, `className`, `onMouseDown`, `onMouseUp`, `onTouchEnd`).
+- The repository recommends using `yarn` to avoid npm peer-dependency resolution differences.
+
+## Sample
+
+[DnD-kit samples](https://sguisse.github.io/react-grid-layout/examples/00-showcase.html)
+
+![22-cross-grid-transfer.png](22-cross-grid-transfer.png)
+
+## Migration Status
+
+- 🚧 Non Regression Testing still in progress ... 🚧
+  - Continue to Review AI generated Code. I have push this version **seems** to be already "usable"

package/css/styles.css

@@ -0,0 +1,120 @@
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top, width, height;
+}
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+.react-grid-item.cssTransforms {
+  transition-property: transform, width, height;
+}
+.react-grid-item.resizing {
+  transition: none;
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  user-select: none;
+}
+
+.react-grid-item.react-grid-placeholder.placeholder-resizing {
+  transition: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+}
+
+.react-grid-item:hover > .react-resizable-handle {
+  opacity: 1;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

package/dist/ResponsiveGridLayout-B_6TXsWM.d.ts

@@ -0,0 +1,80 @@
+import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
+import { m as GridConfig, j as DragConfig, r as ResizeConfig, l as DropConfig, p as PositionStrategy, b as Compactor, f as LayoutConstraint, L as Layout, d as LayoutItem, E as EventCallback, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-Dbg8jAWj.js';
+
+/**
+ * GridLayout component
+ *
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
+
+interface GridLayoutProps {
+    children: React__default.ReactNode;
+    width: number;
+    gridConfig?: Partial<GridConfig>;
+    dragConfig?: Partial<DragConfig>;
+    resizeConfig?: Partial<ResizeConfig>;
+    dropConfig?: Partial<DropConfig>;
+    positionStrategy?: PositionStrategy;
+    compactor?: Compactor;
+    constraints?: LayoutConstraint[];
+    layout?: Layout;
+    droppingItem?: LayoutItem;
+    autoSize?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    innerRef?: React__default.Ref<HTMLDivElement>;
+    onLayoutChange?: (layout: Layout) => void;
+    onDragStart?: EventCallback;
+    onDrag?: EventCallback;
+    onDragStop?: EventCallback;
+    onResizeStart?: EventCallback;
+    onResize?: EventCallback;
+    onResizeStop?: EventCallback;
+    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
+    onDropDragOver?: (e: DragEvent) => {
+        w?: number;
+        h?: number;
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+    } | false | void;
+}
+declare function GridLayout(props: GridLayoutProps): ReactElement;
+
+/**
+ * ResponsiveGridLayout component
+ *
+ * A responsive grid layout that automatically adjusts to container width.
+ */
+
+interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
+    /** Current breakpoint (optional, auto-detected from width) */
+    breakpoint?: B;
+    /** Breakpoint definitions (name → min-width) */
+    breakpoints?: Breakpoints<B>;
+    /** Column counts per breakpoint */
+    cols?: Breakpoints<B>;
+    /** Layouts for each breakpoint */
+    layouts?: ResponsiveLayouts<B>;
+    /** Row height (default: 150) */
+    rowHeight?: number;
+    /** Maximum rows (default: Infinity) */
+    maxRows?: number;
+    /** Margin between items - can be fixed or per-breakpoint */
+    margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
+    /** Container padding - can be fixed or per-breakpoint */
+    containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
+    /** Compactor for layout compaction */
+    compactor?: Compactor;
+    /** Called when breakpoint changes */
+    onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
+    /** Called when width changes */
+    onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
+}
+/**
+ * ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
+ */
+declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
+
+export { GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };

package/dist/ResponsiveGridLayout-Bin5MBC3.d.mts

@@ -0,0 +1,80 @@
+import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
+import { m as GridConfig, j as DragConfig, r as ResizeConfig, l as DropConfig, p as PositionStrategy, b as Compactor, f as LayoutConstraint, L as Layout, d as LayoutItem, E as EventCallback, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-Dbg8jAWj.mjs';
+
+/**
+ * GridLayout component
+ *
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
+
+interface GridLayoutProps {
+    children: React__default.ReactNode;
+    width: number;
+    gridConfig?: Partial<GridConfig>;
+    dragConfig?: Partial<DragConfig>;
+    resizeConfig?: Partial<ResizeConfig>;
+    dropConfig?: Partial<DropConfig>;
+    positionStrategy?: PositionStrategy;
+    compactor?: Compactor;
+    constraints?: LayoutConstraint[];
+    layout?: Layout;
+    droppingItem?: LayoutItem;
+    autoSize?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    innerRef?: React__default.Ref<HTMLDivElement>;
+    onLayoutChange?: (layout: Layout) => void;
+    onDragStart?: EventCallback;
+    onDrag?: EventCallback;
+    onDragStop?: EventCallback;
+    onResizeStart?: EventCallback;
+    onResize?: EventCallback;
+    onResizeStop?: EventCallback;
+    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
+    onDropDragOver?: (e: DragEvent) => {
+        w?: number;
+        h?: number;
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+    } | false | void;
+}
+declare function GridLayout(props: GridLayoutProps): ReactElement;
+
+/**
+ * ResponsiveGridLayout component
+ *
+ * A responsive grid layout that automatically adjusts to container width.
+ */
+
+interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
+    /** Current breakpoint (optional, auto-detected from width) */
+    breakpoint?: B;
+    /** Breakpoint definitions (name → min-width) */
+    breakpoints?: Breakpoints<B>;
+    /** Column counts per breakpoint */
+    cols?: Breakpoints<B>;
+    /** Layouts for each breakpoint */
+    layouts?: ResponsiveLayouts<B>;
+    /** Row height (default: 150) */
+    rowHeight?: number;
+    /** Maximum rows (default: Infinity) */
+    maxRows?: number;
+    /** Margin between items - can be fixed or per-breakpoint */
+    margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
+    /** Container padding - can be fixed or per-breakpoint */
+    containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
+    /** Compactor for layout compaction */
+    compactor?: Compactor;
+    /** Called when breakpoint changes */
+    onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
+    /** Called when width changes */
+    onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
+}
+/**
+ * ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
+ */
+declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
+
+export { GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };

package/dist/calculate-CoBSgofg.d.mts

@@ -0,0 +1,196 @@
+import { P as Position, R as ResizeHandleAxis } from './types-Dbg8jAWj.mjs';
+
+/**
+ * Grid calculation utilities.
+ *
+ * These functions convert between grid units and pixel positions.
+ */
+
+/**
+ * Parameters needed for position calculations.
+ */
+interface PositionParams {
+    readonly margin: readonly [number, number];
+    readonly containerPadding: readonly [number, number];
+    readonly containerWidth: number;
+    readonly cols: number;
+    readonly rowHeight: number;
+    readonly maxRows: number;
+}
+/**
+ * Calculate the width of a single grid column in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @returns Column width in pixels
+ */
+declare function calcGridColWidth(positionParams: PositionParams): number;
+/**
+ * Calculate the pixel size for a grid unit dimension (width or height).
+ *
+ * Can be called as:
+ * - calcGridItemWHPx(w, colWidth, margin[0]) for width
+ * - calcGridItemWHPx(h, rowHeight, margin[1]) for height
+ *
+ * @param gridUnits - Size in grid units
+ * @param colOrRowSize - Column width or row height in pixels
+ * @param marginPx - Margin between items in pixels
+ * @returns Size in pixels
+ */
+declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+/**
+ * Calculate pixel position for a grid item.
+ *
+ * Returns left, top, width, height in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @param x - X coordinate in grid units
+ * @param y - Y coordinate in grid units
+ * @param w - Width in grid units
+ * @param h - Height in grid units
+ * @param dragPosition - If present, use exact left/top from drag callbacks
+ * @param resizePosition - If present, use exact dimensions from resize callbacks
+ * @returns Position in pixels
+ */
+declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
+    top: number;
+    left: number;
+} | null, resizePosition?: {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+} | null): Position;
+/**
+ * Translate pixel coordinates to grid units.
+ *
+ * @param positionParams - Grid parameters
+ * @param top - Top position in pixels (relative to parent)
+ * @param left - Left position in pixels (relative to parent)
+ * @param w - Width in grid units (for clamping)
+ * @param h - Height in grid units (for clamping)
+ * @returns x and y in grid units
+ */
+declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Translate pixel coordinates to grid units without clamping.
+ *
+ * Use this with the constraint system for custom boundary control.
+ *
+ * @param positionParams - Grid parameters
+ * @param top - Top position in pixels (relative to parent)
+ * @param left - Left position in pixels (relative to parent)
+ * @returns x and y in grid units (unclamped)
+ */
+declare function calcXYRaw(positionParams: PositionParams, top: number, left: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate grid units from pixel dimensions.
+ *
+ * @param positionParams - Grid parameters
+ * @param width - Width in pixels
+ * @param height - Height in pixels
+ * @param x - X coordinate in grid units (for clamping)
+ * @param y - Y coordinate in grid units (for clamping)
+ * @param handle - Resize handle being used
+ * @returns w, h in grid units
+ */
+declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
+    w: number;
+    h: number;
+};
+/**
+ * Calculate grid units from pixel dimensions without clamping.
+ *
+ * Use this with the constraint system for custom size control.
+ *
+ * @param positionParams - Grid parameters
+ * @param width - Width in pixels
+ * @param height - Height in pixels
+ * @returns w, h in grid units (unclamped, minimum 1)
+ */
+declare function calcWHRaw(positionParams: PositionParams, width: number, height: number): {
+    w: number;
+    h: number;
+};
+/**
+ * Clamp a number between bounds.
+ *
+ * @param num - Number to clamp
+ * @param lowerBound - Minimum value
+ * @param upperBound - Maximum value
+ * @returns Clamped value
+ */
+declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+/**
+ * Grid cell dimension information for rendering backgrounds or overlays.
+ */
+interface GridCellDimensions {
+    /** Width of a single cell in pixels */
+    readonly cellWidth: number;
+    /** Height of a single cell in pixels */
+    readonly cellHeight: number;
+    /** Horizontal offset from container edge to first cell */
+    readonly offsetX: number;
+    /** Vertical offset from container edge to first cell */
+    readonly offsetY: number;
+    /** Horizontal gap between cells */
+    readonly gapX: number;
+    /** Vertical gap between cells */
+    readonly gapY: number;
+    /** Number of columns */
+    readonly cols: number;
+    /** Total container width */
+    readonly containerWidth: number;
+}
+/**
+ * Configuration for grid cell dimension calculation.
+ */
+interface GridCellConfig {
+    /** Container width in pixels */
+    width: number;
+    /** Number of columns */
+    cols: number;
+    /** Row height in pixels */
+    rowHeight: number;
+    /** Margin between items [x, y] */
+    margin?: readonly [number, number];
+    /** Container padding [x, y], defaults to margin if not specified */
+    containerPadding?: readonly [number, number] | null;
+}
+/**
+ * Calculate grid cell dimensions for rendering backgrounds or overlays.
+ *
+ * This function provides all the measurements needed to render a visual
+ * grid background that aligns with the actual grid cells.
+ *
+ * @param config - Grid configuration
+ * @returns Cell dimensions and offsets
+ *
+ * @example
+ * ```tsx
+ * import { calcGridCellDimensions } from 'react-grid-layout/core';
+ *
+ * const dims = calcGridCellDimensions({
+ *   width: 1200,
+ *   cols: 12,
+ *   rowHeight: 30,
+ *   margin: [10, 10],
+ *   containerPadding: [10, 10]
+ * });
+ *
+ * // dims.cellWidth = 88.33...
+ * // dims.cellHeight = 30
+ * // dims.offsetX = 10 (containerPadding[0])
+ * // dims.offsetY = 10 (containerPadding[1])
+ * // dims.gapX = 10 (margin[0])
+ * // dims.gapY = 10 (margin[1])
+ * ```
+ */
+declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
+
+export { type GridCellConfig as G, type PositionParams as P, calcWH as a, calcXY as b, calcGridItemPosition as c, type GridCellDimensions as d, calcGridCellDimensions as e, calcGridColWidth as f, calcGridItemWHPx as g, calcWHRaw as h, calcXYRaw as i, clamp as j };