@thangdevalone/meet-layout-grid-react 1.0.0

package/README.md

@@ -0,0 +1,114 @@
+# @meet-layout-grid/react
+
+React integration for meet-layout-grid with Motion animations.
+
+## Installation
+
+```bash
+npm install @meet-layout-grid/react
+```
+
+## Quick Start
+
+```tsx
+import { GridContainer, GridItem } from '@meet-layout-grid/react'
+
+function MeetingGrid({ participants }) {
+  return (
+    <GridContainer
+      aspectRatio="16:9"
+      gap={8}
+      layoutMode="gallery"
+      count={participants.length}
+    >
+      {participants.map((p, index) => (
+        <GridItem key={p.id} index={index}>
+          <VideoTile participant={p} />
+        </GridItem>
+      ))}
+    </GridContainer>
+  )
+}
+```
+
+## Components
+
+### `<GridContainer>`
+
+Container component that calculates grid layout and provides context.
+
+```tsx
+<GridContainer
+  aspectRatio="16:9"        // Item aspect ratio
+  gap={8}                    // Gap between items (px)
+  count={6}                  // Number of items
+  layoutMode="gallery"       // Layout mode
+  speakerIndex={0}           // Active speaker
+  pinnedIndex={0}            // Pinned item
+  sidebarPosition="right"    // Sidebar position
+  sidebarRatio={0.25}        // Sidebar width ratio
+  springPreset="smooth"      // Animation preset
+>
+  {children}
+</GridContainer>
+```
+
+### `<GridItem>`
+
+Animated grid item with Motion spring animations.
+
+```tsx
+<GridItem
+  index={0}                  // Item index (required)
+  disableAnimation={false}   // Disable animations
+>
+  {content}
+</GridItem>
+```
+
+## Hooks
+
+### `useGridDimensions(ref)`
+
+Track element dimensions with ResizeObserver.
+
+```tsx
+const ref = useRef<HTMLDivElement>(null)
+const dimensions = useGridDimensions(ref)
+// { width: number, height: number }
+```
+
+### `useMeetGrid(options)`
+
+Calculate grid layout manually.
+
+```tsx
+const grid = useMeetGrid({
+  dimensions: { width: 800, height: 600 },
+  count: 6,
+  aspectRatio: '16:9',
+  gap: 8,
+  layoutMode: 'speaker',
+})
+
+const { top, left } = grid.getPosition(index)
+const { width, height } = grid.getItemDimensions(index)
+```
+
+## Layout Modes
+
+- **gallery** - Equal-sized tiles
+- **speaker** - Active speaker larger
+- **spotlight** - Single participant focus
+- **sidebar** - Main view + thumbnails
+
+## Animation Presets
+
+- `snappy` - Quick UI interactions
+- `smooth` - Layout changes (default)
+- `gentle` - Subtle effects
+- `bouncy` - Playful effects
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,213 @@
+'use strict';
+
+const React = require('react');
+const core = require('@meet-layout-grid/core');
+const react = require('motion/react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const GridContext = React.createContext(null);
+function useGridContext() {
+  const context = React.useContext(GridContext);
+  if (!context) {
+    throw new Error("useGridContext must be used within a GridContainer");
+  }
+  return context;
+}
+function useGridDimensions(ref) {
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { clientWidth: width, clientHeight: height } = entry.target;
+        setDimensions((prev) => {
+          if (prev.width === width && prev.height === height) {
+            return prev;
+          }
+          return { width, height };
+        });
+      }
+    });
+    observer.observe(element);
+    setDimensions({
+      width: element.clientWidth,
+      height: element.clientHeight
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return dimensions;
+}
+function useMeetGrid(options) {
+  return React.useMemo(() => {
+    return core.createMeetGrid(options);
+  }, [
+    options.dimensions.width,
+    options.dimensions.height,
+    options.count,
+    options.aspectRatio,
+    options.gap,
+    options.layoutMode,
+    options.pinnedIndex,
+    options.speakerIndex,
+    options.sidebarPosition,
+    options.sidebarRatio
+  ]);
+}
+function useGridAnimation(preset = "smooth") {
+  return React.useMemo(() => core.getSpringConfig(preset), [preset]);
+}
+
+const GridContainer = React.forwardRef(
+  function GridContainer2({
+    children,
+    aspectRatio = "16:9",
+    gap = 8,
+    count,
+    layoutMode = "gallery",
+    pinnedIndex,
+    speakerIndex,
+    sidebarPosition,
+    sidebarRatio,
+    springPreset = "smooth",
+    style,
+    className,
+    ...props
+  }, forwardedRef) {
+    const internalRef = React.useRef(null);
+    const ref = forwardedRef || internalRef;
+    const dimensions = useGridDimensions(ref);
+    const childCount = count ?? React__default.Children.count(children);
+    const gridOptions = {
+      dimensions,
+      count: childCount,
+      aspectRatio,
+      gap,
+      layoutMode,
+      pinnedIndex,
+      speakerIndex,
+      sidebarPosition,
+      sidebarRatio
+    };
+    const grid = useMeetGrid(gridOptions);
+    const containerStyle = {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      ...style
+    };
+    return /* @__PURE__ */ React__default.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React__default.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+  }
+);
+const GridItem = React.forwardRef(
+  function GridItem2({
+    index,
+    children,
+    transition: customTransition,
+    disableAnimation = false,
+    className,
+    style,
+    ...props
+  }, ref) {
+    const { grid, springPreset } = useGridContext();
+    if (!grid) {
+      return null;
+    }
+    const { top, left } = grid.getPosition(index);
+    const { width, height } = grid.getItemDimensions(index);
+    const isMain = grid.isMainItem(index);
+    if (grid.layoutMode === "spotlight" && !isMain) {
+      return null;
+    }
+    const springConfig = core.getSpringConfig(springPreset);
+    const transition = customTransition ?? {
+      type: springConfig.type,
+      stiffness: springConfig.stiffness,
+      damping: springConfig.damping
+    };
+    const animatedStyle = {
+      position: "absolute",
+      width,
+      height,
+      top,
+      left
+    };
+    if (disableAnimation) {
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref,
+          style: { ...animatedStyle, ...style },
+          className,
+          "data-grid-index": index,
+          "data-grid-main": isMain,
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      react.motion.div,
+      {
+        ref,
+        layout: true,
+        initial: false,
+        animate: animatedStyle,
+        transition,
+        style,
+        className,
+        "data-grid-index": index,
+        "data-grid-main": isMain,
+        ...props
+      },
+      children
+    );
+  }
+);
+const GridOverlay = React.forwardRef(
+  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+    if (!visible)
+      return null;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor,
+          ...style
+        },
+        ...props
+      },
+      children
+    );
+  }
+);
+
+exports.createGrid = core.createGrid;
+exports.createGridItemPositioner = core.createGridItemPositioner;
+exports.createMeetGrid = core.createMeetGrid;
+exports.getAspectRatio = core.getAspectRatio;
+exports.getGridItemDimensions = core.getGridItemDimensions;
+exports.getSpringConfig = core.getSpringConfig;
+exports.springPresets = core.springPresets;
+exports.GridContainer = GridContainer;
+exports.GridContext = GridContext;
+exports.GridItem = GridItem;
+exports.GridOverlay = GridOverlay;
+exports.useGridAnimation = useGridAnimation;
+exports.useGridContext = useGridContext;
+exports.useGridDimensions = useGridDimensions;
+exports.useMeetGrid = useMeetGrid;

package/dist/index.d.cts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@meet-layout-grid/core';
+export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
+import { HTMLMotionProps, Transition } from 'motion/react';
+
+interface GridContextValue {
+    dimensions: GridDimensions;
+    grid: MeetGridResult | null;
+    springPreset: SpringPreset;
+}
+declare const GridContext: React.Context<GridContextValue | null>;
+/**
+ * Hook to access the grid context
+ */
+declare function useGridContext(): GridContextValue;
+
+/**
+ * A React hook to calculate dimensions of an element using ResizeObserver.
+ * @param ref An element ref
+ * @returns Dimensions of the element
+ */
+declare function useGridDimensions(ref: RefObject<HTMLElement | null>): GridDimensions;
+/**
+ * React hook for creating a meet-style responsive grid.
+ * @param options Grid options including dimensions, count, aspectRatio, gap, and layoutMode
+ * @returns Grid result with width, height, and position getter
+ */
+declare function useMeetGrid(options: MeetGridOptions): MeetGridResult;
+/**
+ * Hook to get animation configuration for Motion
+ */
+declare function useGridAnimation(preset?: SpringPreset): {
+    stiffness: 400;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 300;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 200;
+    damping: 25;
+    type: "spring";
+} | {
+    stiffness: 400;
+    damping: 15;
+    type: "spring";
+};
+
+interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Children to render inside the grid */
+    children: ReactNode;
+    /** Aspect ratio in format "width:height" (e.g., "16:9") */
+    aspectRatio?: string;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Number of items (if not using GridItem children) */
+    count?: number;
+    /** Layout mode */
+    layoutMode?: LayoutMode;
+    /** Index of pinned item */
+    pinnedIndex?: number;
+    /** Index of active speaker */
+    speakerIndex?: number;
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right' | 'bottom';
+    /** Sidebar ratio (0-1) */
+    sidebarRatio?: number;
+    /** Spring animation preset */
+    springPreset?: SpringPreset;
+    /** Custom container style */
+    style?: CSSProperties;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Container component for the meet grid.
+ * Provides grid context to child GridItem components.
+ */
+declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+    /** Index of this item in the grid */
+    index: number;
+    /** Children to render inside the item */
+    children: ReactNode;
+    /** Custom transition override */
+    transition?: Transition;
+    /** Whether to disable animations */
+    disableAnimation?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Custom style (merged with animated styles) */
+    style?: CSSProperties;
+}
+/**
+ * Grid item component with Motion animations.
+ * Automatically positions itself based on index in the grid.
+ */
+declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Overlay background color */
+    backgroundColor?: string;
+}
+/**
+ * Overlay component for grid items (e.g., for muted indicator, name label)
+ */
+declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.d.mts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@meet-layout-grid/core';
+export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
+import { HTMLMotionProps, Transition } from 'motion/react';
+
+interface GridContextValue {
+    dimensions: GridDimensions;
+    grid: MeetGridResult | null;
+    springPreset: SpringPreset;
+}
+declare const GridContext: React.Context<GridContextValue | null>;
+/**
+ * Hook to access the grid context
+ */
+declare function useGridContext(): GridContextValue;
+
+/**
+ * A React hook to calculate dimensions of an element using ResizeObserver.
+ * @param ref An element ref
+ * @returns Dimensions of the element
+ */
+declare function useGridDimensions(ref: RefObject<HTMLElement | null>): GridDimensions;
+/**
+ * React hook for creating a meet-style responsive grid.
+ * @param options Grid options including dimensions, count, aspectRatio, gap, and layoutMode
+ * @returns Grid result with width, height, and position getter
+ */
+declare function useMeetGrid(options: MeetGridOptions): MeetGridResult;
+/**
+ * Hook to get animation configuration for Motion
+ */
+declare function useGridAnimation(preset?: SpringPreset): {
+    stiffness: 400;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 300;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 200;
+    damping: 25;
+    type: "spring";
+} | {
+    stiffness: 400;
+    damping: 15;
+    type: "spring";
+};
+
+interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Children to render inside the grid */
+    children: ReactNode;
+    /** Aspect ratio in format "width:height" (e.g., "16:9") */
+    aspectRatio?: string;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Number of items (if not using GridItem children) */
+    count?: number;
+    /** Layout mode */
+    layoutMode?: LayoutMode;
+    /** Index of pinned item */
+    pinnedIndex?: number;
+    /** Index of active speaker */
+    speakerIndex?: number;
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right' | 'bottom';
+    /** Sidebar ratio (0-1) */
+    sidebarRatio?: number;
+    /** Spring animation preset */
+    springPreset?: SpringPreset;
+    /** Custom container style */
+    style?: CSSProperties;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Container component for the meet grid.
+ * Provides grid context to child GridItem components.
+ */
+declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+    /** Index of this item in the grid */
+    index: number;
+    /** Children to render inside the item */
+    children: ReactNode;
+    /** Custom transition override */
+    transition?: Transition;
+    /** Whether to disable animations */
+    disableAnimation?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Custom style (merged with animated styles) */
+    style?: CSSProperties;
+}
+/**
+ * Grid item component with Motion animations.
+ * Automatically positions itself based on index in the grid.
+ */
+declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Overlay background color */
+    backgroundColor?: string;
+}
+/**
+ * Overlay component for grid items (e.g., for muted indicator, name label)
+ */
+declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
+export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { HTMLMotionProps, Transition } from 'motion/react';
+
+interface GridContextValue {
+    dimensions: GridDimensions;
+    grid: MeetGridResult | null;
+    springPreset: SpringPreset;
+}
+declare const GridContext: React.Context<GridContextValue | null>;
+/**
+ * Hook to access the grid context
+ */
+declare function useGridContext(): GridContextValue;
+
+/**
+ * A React hook to calculate dimensions of an element using ResizeObserver.
+ * @param ref An element ref
+ * @returns Dimensions of the element
+ */
+declare function useGridDimensions(ref: RefObject<HTMLElement | null>): GridDimensions;
+/**
+ * React hook for creating a meet-style responsive grid.
+ * @param options Grid options including dimensions, count, aspectRatio, gap, and layoutMode
+ * @returns Grid result with width, height, and position getter
+ */
+declare function useMeetGrid(options: MeetGridOptions): MeetGridResult;
+/**
+ * Hook to get animation configuration for Motion
+ */
+declare function useGridAnimation(preset?: SpringPreset): {
+    stiffness: 400;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 300;
+    damping: 30;
+    type: "spring";
+} | {
+    stiffness: 200;
+    damping: 25;
+    type: "spring";
+} | {
+    stiffness: 400;
+    damping: 15;
+    type: "spring";
+};
+
+interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Children to render inside the grid */
+    children: ReactNode;
+    /** Aspect ratio in format "width:height" (e.g., "16:9") */
+    aspectRatio?: string;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Number of items (if not using GridItem children) */
+    count?: number;
+    /** Layout mode */
+    layoutMode?: LayoutMode;
+    /** Index of pinned item */
+    pinnedIndex?: number;
+    /** Index of active speaker */
+    speakerIndex?: number;
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right' | 'bottom';
+    /** Sidebar ratio (0-1) */
+    sidebarRatio?: number;
+    /** Spring animation preset */
+    springPreset?: SpringPreset;
+    /** Custom container style */
+    style?: CSSProperties;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Container component for the meet grid.
+ * Provides grid context to child GridItem components.
+ */
+declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+    /** Index of this item in the grid */
+    index: number;
+    /** Children to render inside the item */
+    children: ReactNode;
+    /** Custom transition override */
+    transition?: Transition;
+    /** Whether to disable animations */
+    disableAnimation?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Custom style (merged with animated styles) */
+    style?: CSSProperties;
+}
+/**
+ * Grid item component with Motion animations.
+ * Automatically positions itself based on index in the grid.
+ */
+declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Overlay background color */
+    backgroundColor?: string;
+}
+/**
+ * Overlay component for grid items (e.g., for muted indicator, name label)
+ */
+declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.mjs

@@ -0,0 +1,194 @@
+import React, { createContext, useContext, useState, useEffect, useMemo, forwardRef, useRef } from 'react';
+import { createMeetGrid, getSpringConfig } from '@meet-layout-grid/core';
+export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@meet-layout-grid/core';
+import { motion } from 'motion/react';
+
+const GridContext = createContext(null);
+function useGridContext() {
+  const context = useContext(GridContext);
+  if (!context) {
+    throw new Error("useGridContext must be used within a GridContainer");
+  }
+  return context;
+}
+function useGridDimensions(ref) {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { clientWidth: width, clientHeight: height } = entry.target;
+        setDimensions((prev) => {
+          if (prev.width === width && prev.height === height) {
+            return prev;
+          }
+          return { width, height };
+        });
+      }
+    });
+    observer.observe(element);
+    setDimensions({
+      width: element.clientWidth,
+      height: element.clientHeight
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return dimensions;
+}
+function useMeetGrid(options) {
+  return useMemo(() => {
+    return createMeetGrid(options);
+  }, [
+    options.dimensions.width,
+    options.dimensions.height,
+    options.count,
+    options.aspectRatio,
+    options.gap,
+    options.layoutMode,
+    options.pinnedIndex,
+    options.speakerIndex,
+    options.sidebarPosition,
+    options.sidebarRatio
+  ]);
+}
+function useGridAnimation(preset = "smooth") {
+  return useMemo(() => getSpringConfig(preset), [preset]);
+}
+
+const GridContainer = forwardRef(
+  function GridContainer2({
+    children,
+    aspectRatio = "16:9",
+    gap = 8,
+    count,
+    layoutMode = "gallery",
+    pinnedIndex,
+    speakerIndex,
+    sidebarPosition,
+    sidebarRatio,
+    springPreset = "smooth",
+    style,
+    className,
+    ...props
+  }, forwardedRef) {
+    const internalRef = useRef(null);
+    const ref = forwardedRef || internalRef;
+    const dimensions = useGridDimensions(ref);
+    const childCount = count ?? React.Children.count(children);
+    const gridOptions = {
+      dimensions,
+      count: childCount,
+      aspectRatio,
+      gap,
+      layoutMode,
+      pinnedIndex,
+      speakerIndex,
+      sidebarPosition,
+      sidebarRatio
+    };
+    const grid = useMeetGrid(gridOptions);
+    const containerStyle = {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      ...style
+    };
+    return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+  }
+);
+const GridItem = forwardRef(
+  function GridItem2({
+    index,
+    children,
+    transition: customTransition,
+    disableAnimation = false,
+    className,
+    style,
+    ...props
+  }, ref) {
+    const { grid, springPreset } = useGridContext();
+    if (!grid) {
+      return null;
+    }
+    const { top, left } = grid.getPosition(index);
+    const { width, height } = grid.getItemDimensions(index);
+    const isMain = grid.isMainItem(index);
+    if (grid.layoutMode === "spotlight" && !isMain) {
+      return null;
+    }
+    const springConfig = getSpringConfig(springPreset);
+    const transition = customTransition ?? {
+      type: springConfig.type,
+      stiffness: springConfig.stiffness,
+      damping: springConfig.damping
+    };
+    const animatedStyle = {
+      position: "absolute",
+      width,
+      height,
+      top,
+      left
+    };
+    if (disableAnimation) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref,
+          style: { ...animatedStyle, ...style },
+          className,
+          "data-grid-index": index,
+          "data-grid-main": isMain,
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        ref,
+        layout: true,
+        initial: false,
+        animate: animatedStyle,
+        transition,
+        style,
+        className,
+        "data-grid-index": index,
+        "data-grid-main": isMain,
+        ...props
+      },
+      children
+    );
+  }
+);
+const GridOverlay = forwardRef(
+  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+    if (!visible)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor,
+          ...style
+        },
+        ...props
+      },
+      children
+    );
+  }
+);
+
+export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "@thangdevalone/meet-layout-grid-react",
+    "version": "1.0.0",
+    "description": "React integration for meet-layout-grid with Motion animations",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.mts",
+                "default": "./dist/index.mjs"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "unbuild",
+        "dev": "unbuild --watch",
+        "clean": "rimraf dist",
+        "test": "vitest run",
+        "test:watch": "vitest"
+    },
+    "keywords": [
+        "react",
+        "grid",
+        "meeting",
+        "video",
+        "motion",
+        "animation"
+    ],
+    "author": "ThangDevAlone",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/thangdevalone/meet-layout-grid"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "dependencies": {
+        "@thangdevalone/meet-layout-grid-core": "workspace:*",
+        "motion": "^11.15.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "unbuild": "^2.0.0",
+        "vitest": "^1.0.0",
+        "rimraf": "^5.0.0"
+    }
+}