tailwind-grid-layout 0.0.1-beta.20250620111548

package/README.md

@@ -0,0 +1,411 @@
+# Tailwind Grid Layout
+
+A modern, lightweight grid layout system for React built with Tailwind CSS. A powerful alternative to react-grid-layout with full feature parity and a smaller bundle size.
+
+[![npm version](https://img.shields.io/npm/v/tailwind-grid-layout.svg)](https://www.npmjs.com/package/tailwind-grid-layout)
+[![license](https://img.shields.io/npm/l/tailwind-grid-layout.svg)](https://github.com/Seungwoo321/tailwind-grid-layout/blob/main/LICENSE)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/tailwind-grid-layout)](https://bundlephobia.com/package/tailwind-grid-layout)
+
+> English | [한국어](./README.ko.md)
+
+## Features
+
+- 🎯 **Full Feature Parity** with react-grid-layout
+- 🪶 **Lightweight** - Smaller bundle size using Tailwind CSS
+- 🎨 **Tailwind Native** - Built with Tailwind CSS utilities
+- 📱 **Responsive** - Works on all screen sizes
+- 🔧 **TypeScript** - Full TypeScript support
+- ⚡ **Performance** - Optimized rendering and animations
+- 🧪 **Well Tested** - 100% test coverage
+
+## Installation
+
+```bash
+npm install tailwind-grid-layout
+# or
+yarn add tailwind-grid-layout
+# or
+pnpm add tailwind-grid-layout
+```
+
+### Prerequisites
+
+- React 19.1.0
+- Tailwind CSS 4.1.8+ (v4 only - CSS-first configuration)
+- Node.js 20.0.0+
+- pnpm 10.11.0+
+
+## Tailwind CSS v4 Setup
+
+This library requires Tailwind CSS v4 with its new CSS-first configuration approach. No JavaScript configuration file is needed.
+
+```css
+/* In your main CSS file */
+@import "tailwindcss";
+
+/* Optional: Add custom theme configuration */
+@theme {
+  --color-grid-placeholder: oklch(0.7 0.15 210);
+  --color-grid-handle: oklch(0.3 0.05 210);
+}
+```
+
+## Quick Start
+
+```tsx
+import { GridContainer } from 'tailwind-grid-layout'
+
+const items = [
+  { id: '1', x: 0, y: 0, w: 2, h: 2 },
+  { id: '2', x: 2, y: 0, w: 2, h: 2 },
+  { id: '3', x: 0, y: 2, w: 4, h: 2 }
+]
+
+function App() {
+  return (
+    <GridContainer
+      items={items}
+      cols={12}
+      rowHeight={60}
+      onLayoutChange={(newLayout) => console.log(newLayout)}
+    >
+      {(item) => (
+        <div className="bg-blue-500 text-white p-4 rounded">
+          Item {item.id}
+        </div>
+      )}
+    </GridContainer>
+  )
+}
+```
+
+## Props Reference
+
+### GridContainer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| **items** | `GridItem[]` | required | Array of grid items with position and size |
+| **children** | `(item: GridItem) => ReactNode` | required | Render function for grid items |
+| **cols** | `number` | `12` | Number of columns in the grid |
+| **rowHeight** | `number` | `60` | Height of each row in pixels |
+| **gap** | `number` | `16` | Gap between grid items in pixels |
+| **margin** | `[number, number]` | `[gap, gap]` | Margin between items [horizontal, vertical] |
+| **containerPadding** | `[number, number]` | `[16, 16]` | Padding inside the grid container [horizontal, vertical] |
+| **maxRows** | `number` | - | Maximum number of rows |
+| **isDraggable** | `boolean` | `true` | Enable/disable dragging |
+| **isResizable** | `boolean` | `true` | Enable/disable resizing |
+| **preventCollision** | `boolean` | `false` | Prevent items from colliding |
+| **allowOverlap** | `boolean` | `false` | Allow items to overlap |
+| **isBounded** | `boolean` | `true` | Keep items within container bounds |
+| **compactType** | `'vertical' \| 'horizontal' \| null` | `'vertical'` | Compaction type |
+| **resizeHandles** | `Array<'s' \| 'w' \| 'e' \| 'n' \| 'sw' \| 'nw' \| 'se' \| 'ne'>` | `['se']` | Resize handle positions |
+| **draggableCancel** | `string` | - | CSS selector for elements that should not trigger drag |
+| **draggableHandle** | `string` | - | CSS selector for drag handle |
+| **autoSize** | `boolean` | `true` | Container height adjusts to fit all items |
+| **verticalCompact** | `boolean` | `true` | DEPRECATED: Use compactType |
+| **transformScale** | `number` | `1` | Scale factor for drag/resize when zoomed |
+| **droppingItem** | `Partial<GridItem>` | - | Preview item while dragging from outside |
+| **className** | `string` | - | Additional CSS classes for the container |
+| **style** | `React.CSSProperties` | - | Inline styles for the container |
+| **onLayoutChange** | `(layout: GridItem[]) => void` | - | Callback when layout changes |
+| **onDragStart** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Drag start callback |
+| **onDrag** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Drag callback |
+| **onDragStop** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Drag stop callback |
+| **onResizeStart** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Resize start callback |
+| **onResize** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Resize callback |
+| **onResizeStop** | `(layout, oldItem, newItem, placeholder, e, element) => void` | - | Resize stop callback |
+
+### GridItem Properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| **id** | `string` | ✓ | Unique identifier for the item |
+| **x** | `number` | ✓ | X position in grid units |
+| **y** | `number` | ✓ | Y position in grid units |
+| **w** | `number` | ✓ | Width in grid units |
+| **h** | `number` | ✓ | Height in grid units |
+| **minW** | `number` | - | Minimum width |
+| **minH** | `number` | - | Minimum height |
+| **maxW** | `number` | - | Maximum width |
+| **maxH** | `number` | - | Maximum height |
+| **isDraggable** | `boolean` | - | Override container's isDraggable |
+| **isResizable** | `boolean` | - | Override container's isResizable |
+| **static** | `boolean` | - | Make item static (unmovable/unresizable) |
+| **className** | `string` | - | Additional CSS classes for the item |
+
+## Comparison with react-grid-layout
+
+| Feature | react-grid-layout | tailwind-grid-layout | Notes |
+|---------|-------------------|---------------------|--------|
+| **Core Features** |
+| Drag & Drop | ✅ | ✅ | Full support |
+| Resize | ✅ | ✅ | 8-direction resize |
+| Collision Detection | ✅ | ✅ | 50% overlap rule |
+| Auto-compaction | ✅ | ✅ | Vertical, horizontal, or none |
+| Static Items | ✅ | ✅ | Full support |
+| Bounded Movement | ✅ | ✅ | Keep items in bounds |
+| **Layout Options** |
+| Responsive Breakpoints | ✅ | ✅ | Full support with ResponsiveGridContainer |
+| Persist Layout | ✅ | ✅ | Via onLayoutChange |
+| Min/Max Dimensions | ✅ | ✅ | Full support |
+| Prevent Collision | ✅ | ✅ | Full support |
+| Allow Overlap | ✅ | ✅ | Full support |
+| **Events** |
+| Layout Change | ✅ | ✅ | Full support |
+| Drag Events | ✅ | ✅ | Start, move, stop |
+| Resize Events | ✅ | ✅ | Start, resize, stop |
+| Drop from Outside | ✅ | ✅ | Full support with DroppableGridContainer |
+| **Styling** |
+| CSS-in-JS | ✅ | ❌ | Uses Tailwind |
+| Custom Classes | ✅ | ✅ | Full support |
+| Animations | ✅ | ✅ | Tailwind transitions |
+| **Performance** |
+| Bundle Size | ~30KB | ~15KB | 50% smaller |
+| Dependencies | React only | React + Tailwind | |
+| Tree-shaking | ✅ | ✅ | Full support |
+
+## Advanced Examples
+
+### With Custom Drag Handle
+
+```tsx
+<GridContainer items={items}>
+  {(item) => (
+    <div className="bg-white rounded-lg shadow p-4">
+      <div className="grid-drag-handle cursor-move p-2 bg-gray-100 rounded">
+        <GripIcon className="w-4 h-4" />
+      </div>
+      <div className="p-4">
+        Content for {item.id}
+      </div>
+    </div>
+  )}
+</GridContainer>
+```
+
+### Static Items
+
+```tsx
+const items = [
+  { id: '1', x: 0, y: 0, w: 4, h: 2, static: true }, // This item cannot be moved
+  { id: '2', x: 4, y: 0, w: 4, h: 2 },
+]
+```
+
+### Responsive Breakpoints
+
+```tsx
+import { ResponsiveGridContainer } from 'tailwind-grid-layout'
+
+const layouts = {
+  lg: [{ id: '1', x: 0, y: 0, w: 3, h: 2 }],
+  md: [{ id: '1', x: 0, y: 0, w: 6, h: 2 }],
+  sm: [{ id: '1', x: 0, y: 0, w: 12, h: 2 }],
+}
+
+<ResponsiveGridContainer
+  layouts={layouts}
+  breakpoints={{ lg: 1200, md: 768, sm: 480 }}
+  cols={{ lg: 12, md: 8, sm: 4 }}
+>
+  {(item) => <div>Responsive Item {item.id}</div>}
+</ResponsiveGridContainer>
+```
+
+### Drag and Drop from Outside
+
+```tsx
+import { DroppableGridContainer } from 'tailwind-grid-layout'
+
+<DroppableGridContainer
+  items={items}
+  onDrop={(newItem) => setItems([...items, newItem])}
+  droppingItem={{ w: 2, h: 2 }} // Default size for dropped items
+>
+  {(item) => <div>Dropped Item {item.id}</div>}
+</DroppableGridContainer>
+```
+
+### Custom Resize Handles
+
+```tsx
+<GridContainer
+  items={items}
+  resizeHandles={['se', 'sw', 'ne', 'nw']} // Enable corner handles only
+>
+  {(item) => <div>Item {item.id}</div>}
+</GridContainer>
+```
+
+### Prevent Collision
+
+```tsx
+<GridContainer
+  items={items}
+  preventCollision={true} // Items cannot overlap
+  allowOverlap={false}
+>
+  {(item) => <div>Item {item.id}</div>}
+</GridContainer>
+```
+
+### Bounded Grid with Max Rows
+
+```tsx
+<GridContainer
+  items={items}
+  isBounded={true}
+  maxRows={10}
+>
+  {(item) => <div>Item {item.id}</div>}
+</GridContainer>
+```
+
+### AutoSize Container
+
+```tsx
+<GridContainer
+  items={items}
+  autoSize={true} // Container height adjusts automatically
+>
+  {(item) => <div>Item {item.id}</div>}
+</GridContainer>
+
+// With fixed height
+<div style={{ height: 400, overflow: 'auto' }}>
+  <GridContainer
+    items={items}
+    autoSize={false}
+    style={{ height: '100%' }}
+  >
+    {(item) => <div>Item {item.id}</div>}
+  </GridContainer>
+</div>
+```
+
+### Dropping Item Preview
+
+```tsx
+<DroppableGridContainer
+  items={items}
+  droppingItem={{ w: 4, h: 2 }} // Shows preview while dragging
+  onDrop={(newItem) => setItems([...items, newItem])}
+>
+  {(item) => <div>Item {item.id}</div>}
+</DroppableGridContainer>
+```
+
+## Layout Utilities
+
+### generateLayouts
+
+Generate identical layouts for all breakpoints from a single layout definition.
+
+```tsx
+import { generateLayouts } from 'tailwind-grid-layout'
+
+const items = [
+  { id: '1', x: 0, y: 0, w: 4, h: 2 },
+  { id: '2', x: 4, y: 0, w: 4, h: 2 }
+]
+
+// Creates layouts for lg, md, sm, xs, xxs with identical positioning
+const layouts = generateLayouts(items)
+```
+
+### generateResponsiveLayouts
+
+Automatically adjust layouts to fit different column counts per breakpoint.
+
+```tsx
+import { generateResponsiveLayouts } from 'tailwind-grid-layout'
+
+const items = [
+  { id: '1', x: 0, y: 0, w: 12, h: 2 },
+  { id: '2', x: 0, y: 2, w: 6, h: 2 }
+]
+
+// Adjusts item widths and positions to fit column constraints
+const layouts = generateResponsiveLayouts(items, {
+  lg: 12,
+  md: 10, 
+  sm: 6,
+  xs: 4,
+  xxs: 2
+})
+```
+
+### WidthProvider HOC
+
+Automatically provides container width to ResponsiveGridContainer.
+
+```tsx
+import { ResponsiveGridContainer, WidthProvider } from 'tailwind-grid-layout'
+
+const ResponsiveGridWithWidth = WidthProvider(ResponsiveGridContainer)
+
+// No need to manually track container width
+<ResponsiveGridWithWidth
+  layouts={layouts}
+  measureBeforeMount={true} // Optional: prevent layout shift
+>
+  {(item) => <div>Item {item.id}</div>}
+</ResponsiveGridWithWidth>
+```
+
+
+## Styling Guide
+
+### Using with Tailwind CSS
+
+The library is built to work seamlessly with Tailwind CSS:
+
+```tsx
+<GridContainer items={items} className="bg-gray-50 rounded-lg">
+  {(item) => (
+    <div className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">
+      <div className="p-4">
+        <h3 className="text-lg font-semibold">Item {item.id}</h3>
+      </div>
+    </div>
+  )}
+</GridContainer>
+```
+
+### Custom Placeholders
+
+The drag and resize placeholders can be styled via CSS:
+
+```css
+/* Drag placeholder */
+.tailwind-grid-layout .drag-placeholder {
+  background: rgba(59, 130, 246, 0.15);
+  border: 2px dashed rgb(59, 130, 246);
+}
+
+/* Resize placeholder */
+.tailwind-grid-layout .resize-placeholder {
+  background: rgba(59, 130, 246, 0.1);
+  border: 2px dashed rgb(59, 130, 246);
+}
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+MIT © [Seungwoo, Lee](./LICENSE)
+
+## Acknowledgments
+
+This library is inspired by [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) and aims to provide a modern, Tailwind-first alternative.

package/dist/components/DroppableGridContainer.d.ts

@@ -0,0 +1,7 @@
+import { GridItem, GridContainerProps } from '../types';
+export interface DroppableGridContainerProps extends Omit<GridContainerProps, 'onDrop'> {
+    onDrop?: (item: GridItem) => void;
+    droppingItem?: Partial<GridItem>;
+}
+export declare function DroppableGridContainer({ onDrop, droppingItem, className, ...props }: DroppableGridContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DroppableGridContainer.d.ts.map

package/dist/components/DroppableGridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DroppableGridContainer.d.ts","sourceRoot":"","sources":["../../src/components/DroppableGridContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAG5D,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IACrF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;CACjC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,YAA6B,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAwF7B"}

package/dist/components/GridContainer.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { GridContainerProps } from '../types';
+export declare const GridContainer: React.FC<GridContainerProps>;
+//# sourceMappingURL=GridContainer.d.ts.map

package/dist/components/GridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../src/components/GridContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAoC,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI/E,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgjBtD,CAAA"}

package/dist/components/GridItem.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { GridItem, ResizeState } from '../types';
+interface GridItemComponentProps {
+    item: GridItem;
+    position: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    isDragging: boolean;
+    isResizing: boolean;
+    isDraggable: boolean;
+    isResizable: boolean;
+    resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>;
+    draggableCancel?: string;
+    onDragStart: (itemId: string, e: React.MouseEvent) => void;
+    onResizeStart: (itemId: string, handle: ResizeState['resizeHandle'], e: React.MouseEvent) => void;
+    children: React.ReactNode;
+}
+export declare const GridItemComponent: React.FC<GridItemComponentProps>;
+export {};
+//# sourceMappingURL=GridItem.d.ts.map

package/dist/components/GridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../src/components/GridItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGhD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACtE,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAA;IACxE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAC1D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsE9D,CAAA"}

package/dist/components/ResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface ResizeHandleProps {
+    position: 'se' | 'sw' | 'ne' | 'nw' | 'n' | 's' | 'e' | 'w';
+    onMouseDown: (e: React.MouseEvent) => void;
+    isActive?: boolean;
+    isVisible?: boolean;
+}
+export declare const ResizeHandle: React.FC<ResizeHandleProps>;
+export {};
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/components/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,iBAAiB;IACzB,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC3D,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuEpD,CAAA"}

package/dist/components/ResponsiveGridContainer.d.ts

@@ -0,0 +1,18 @@
+import { GridItem, GridContainerProps } from '../types';
+export interface BreakpointLayouts {
+    [breakpoint: string]: GridItem[];
+}
+export interface ResponsiveGridContainerProps extends Omit<GridContainerProps, 'items' | 'cols' | 'onLayoutChange'> {
+    layouts: BreakpointLayouts;
+    breakpoints?: {
+        [breakpoint: string]: number;
+    };
+    cols?: {
+        [breakpoint: string]: number;
+    };
+    onLayoutChange?: (layout: GridItem[], layouts: BreakpointLayouts) => void;
+    onBreakpointChange?: (newBreakpoint: string, cols: number) => void;
+    width?: number;
+}
+export declare function ResponsiveGridContainer({ layouts, breakpoints, cols, onLayoutChange, onBreakpointChange, width, ...props }: ResponsiveGridContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsiveGridContainer.d.ts.map

package/dist/components/ResponsiveGridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveGridContainer.d.ts","sourceRoot":"","sources":["../../src/components/ResponsiveGridContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,GAAG,gBAAgB,CAAC;IACjH,OAAO,EAAE,iBAAiB,CAAA;IAC1B,WAAW,CAAC,EAAE;QAAE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAC9C,IAAI,CAAC,EAAE;QAAE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzE,kBAAkB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAkBD,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,WAAgC,EAChC,IAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAiH9B"}

package/dist/components/WidthProvider.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+export interface WidthProviderProps {
+    measureBeforeMount?: boolean;
+}
+export declare function WidthProvider<P extends {
+    width?: number;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'width'> & WidthProviderProps>;
+//# sourceMappingURL=WidthProvider.d.ts.map

package/dist/components/WidthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidthProvider.d.ts","sourceRoot":"","sources":["../../src/components/WidthProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAA;AAElE,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EACxD,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,GAC1B,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,CAyDtD"}

package/dist/components/ui/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,IAAI,6GAYR,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,QAAA,MAAM,SAAS,6GAYb,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAKf,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react");function r(e){var t,o,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(o=r(e[t]))&&(n&&(n+=" "),n+=o)}else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}const o=e=>{const t=a(e),{conflictingClassGroups:r,conflictingClassGroupModifiers:o}=e;return{getClassGroupId:e=>{const r=e.split("-");return""===r[0]&&1!==r.length&&r.shift(),n(r,t)||i(e)},getConflictingClassGroupIds:(e,t)=>{const n=r[e]||[];return t&&o[e]?[...n,...o[e]]:n}}},n=(e,t)=>{var r;if(0===e.length)return t.classGroupId;const o=e[0],s=t.nextPart.get(o),i=s?n(e.slice(1),s):void 0;if(i)return i;if(0===t.validators.length)return;const a=e.join("-");return null==(r=t.validators.find((({validator:e})=>e(a))))?void 0:r.classGroupId},s=/^\[(.+)\]$/,i=e=>{if(s.test(e)){const t=s.exec(e)[1],r=null==t?void 0:t.substring(0,t.indexOf(":"));if(r)return"arbitrary.."+r}},a=e=>{const{theme:t,prefix:r}=e,o={nextPart:new Map,validators:[]};return u(Object.entries(e.classGroups),r).forEach((([e,r])=>{l(r,o,e,t)})),o},l=(e,t,r,o)=>{e.forEach((e=>{if("string"!=typeof e){if("function"==typeof e)return c(e)?void l(e(o),t,r,o):void t.validators.push({validator:e,classGroupId:r});Object.entries(e).forEach((([e,n])=>{l(n,d(t,e),r,o)}))}else{(""===e?t:d(t,e)).classGroupId=r}}))},d=(e,t)=>{let r=e;return t.split("-").forEach((e=>{r.nextPart.has(e)||r.nextPart.set(e,{nextPart:new Map,validators:[]}),r=r.nextPart.get(e)})),r},c=e=>e.isThemeGetter,u=(e,t)=>t?e.map((([e,r])=>[e,r.map((e=>"string"==typeof e?t+e:"object"==typeof e?Object.fromEntries(Object.entries(e).map((([e,r])=>[t+e,r]))):e))])):e,p=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,r=new Map,o=new Map;const n=(n,s)=>{r.set(n,s),t++,t>e&&(t=0,o=r,r=new Map)};return{get(e){let t=r.get(e);return void 0!==t?t:void 0!==(t=o.get(e))?(n(e,t),t):void 0},set(e,t){r.has(e)?r.set(e,t):n(e,t)}}},g=e=>{const{separator:t,experimentalParseClassName:r}=e,o=1===t.length,n=t[0],s=t.length,i=e=>{const r=[];let i,a=0,l=0;for(let u=0;u<e.length;u++){let d=e[u];if(0===a){if(d===n&&(o||e.slice(u,u+s)===t)){r.push(e.slice(l,u)),l=u+s;continue}if("/"===d){i=u;continue}}"["===d?a++:"]"===d&&a--}const d=0===r.length?e:e.substring(l),c=d.startsWith("!");return{modifiers:r,hasImportantModifier:c,baseClassName:c?d.substring(1):d,maybePostfixModifierPosition:i&&i>l?i-l:void 0}};return r?e=>r({className:e,parseClassName:i}):i},m=e=>{if(e.length<=1)return e;const t=[];let r=[];return e.forEach((e=>{"["===e[0]?(t.push(...r.sort(),e),r=[]):r.push(e)})),t.push(...r.sort()),t},b=/\s+/;function f(){let e,t,r=0,o="";for(;r<arguments.length;)(e=arguments[r++])&&(t=h(e))&&(o&&(o+=" "),o+=t);return o}const h=e=>{if("string"==typeof e)return e;let t,r="";for(let o=0;o<e.length;o++)e[o]&&(t=h(e[o]))&&(r&&(r+=" "),r+=t);return r};function x(e,...t){let r,n,s,i=function(l){const d=t.reduce(((e,t)=>t(e)),e());return r=(e=>({cache:p(e.cacheSize),parseClassName:g(e),...o(e)}))(d),n=r.cache.get,s=r.cache.set,i=a,a(l)};function a(e){const t=n(e);if(t)return t;const o=((e,t)=>{const{parseClassName:r,getClassGroupId:o,getConflictingClassGroupIds:n}=t,s=[],i=e.trim().split(b);let a="";for(let l=i.length-1;l>=0;l-=1){const e=i[l],{modifiers:t,hasImportantModifier:d,baseClassName:c,maybePostfixModifierPosition:u}=r(e);let p=Boolean(u),g=o(p?c.substring(0,u):c);if(!g){if(!p){a=e+(a.length>0?" "+a:a);continue}if(g=o(c),!g){a=e+(a.length>0?" "+a:a);continue}p=!1}const b=m(t).join(":"),f=d?b+"!":b,h=f+g;if(s.includes(h))continue;s.push(h);const x=n(g,p);for(let r=0;r<x.length;++r){const e=x[r];s.push(f+e)}a=e+(a.length>0?" "+a:a)}return a})(e,r);return s(e,o),o}return function(){return i(f.apply(null,arguments))}}const y=e=>{const t=t=>t[e]||[];return t.isThemeGetter=!0,t},w=/^\[(?:([a-z-]+):)?(.+)\]$/i,v=/^\d+\/\d+$/,z=new Set(["px","full","screen"]),k=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,I=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,S=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,M=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,C=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,P=e=>D(e)||z.has(e)||v.test(e),j=e=>Z(e,"length",$),D=e=>Boolean(e)&&!Number.isNaN(Number(e)),R=e=>Z(e,"number",D),N=e=>Boolean(e)&&Number.isInteger(Number(e)),E=e=>e.endsWith("%")&&D(e.slice(0,-1)),L=e=>w.test(e),G=e=>k.test(e),A=new Set(["length","size","percentage"]),T=e=>Z(e,A,X),H=e=>Z(e,"position",X),O=new Set(["image","url"]),W=e=>Z(e,O,V),B=e=>Z(e,"",F),Y=()=>!0,Z=(e,t,r)=>{const o=w.exec(e);return!!o&&(o[1]?"string"==typeof t?o[1]===t:t.has(o[1]):r(o[2]))},$=e=>I.test(e)&&!S.test(e),X=()=>!1,F=e=>M.test(e),V=e=>C.test(e),J=x((()=>{const e=y("colors"),t=y("spacing"),r=y("blur"),o=y("brightness"),n=y("borderColor"),s=y("borderRadius"),i=y("borderSpacing"),a=y("borderWidth"),l=y("contrast"),d=y("grayscale"),c=y("hueRotate"),u=y("invert"),p=y("gap"),g=y("gradientColorStops"),m=y("gradientColorStopPositions"),b=y("inset"),f=y("margin"),h=y("opacity"),x=y("padding"),w=y("saturate"),v=y("scale"),z=y("sepia"),k=y("skew"),I=y("space"),S=y("translate"),M=()=>["auto",L,t],C=()=>[L,t],A=()=>["",P,j],O=()=>["auto",D,L],Z=()=>["","0",L],$=()=>[D,L];return{cacheSize:500,separator:":",theme:{colors:[Y],spacing:[P,j],blur:["none","",G,L],brightness:$(),borderColor:[e],borderRadius:["none","","full",G,L],borderSpacing:C(),borderWidth:A(),contrast:$(),grayscale:Z(),hueRotate:$(),invert:Z(),gap:C(),gradientColorStops:[e],gradientColorStopPositions:[E,j],inset:M(),margin:M(),opacity:$(),padding:C(),saturate:$(),scale:$(),sepia:Z(),skew:$(),space:C(),translate:C()},classGroups:{aspect:[{aspect:["auto","square","video",L]}],container:["container"],columns:[{columns:[G]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top",L]}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[b]}],"inset-x":[{"inset-x":[b]}],"inset-y":[{"inset-y":[b]}],start:[{start:[b]}],end:[{end:[b]}],top:[{top:[b]}],right:[{right:[b]}],bottom:[{bottom:[b]}],left:[{left:[b]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",N,L]}],basis:[{basis:M()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",L]}],grow:[{grow:Z()}],shrink:[{shrink:Z()}],order:[{order:["first","last","none",N,L]}],"grid-cols":[{"grid-cols":[Y]}],"col-start-end":[{col:["auto",{span:["full",N,L]},L]}],"col-start":[{"col-start":O()}],"col-end":[{"col-end":O()}],"grid-rows":[{"grid-rows":[Y]}],"row-start-end":[{row:["auto",{span:[N,L]},L]}],"row-start":[{"row-start":O()}],"row-end":[{"row-end":O()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",L]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",L]}],gap:[{gap:[p]}],"gap-x":[{"gap-x":[p]}],"gap-y":[{"gap-y":[p]}],"justify-content":[{justify:["normal","start","end","center","between","around","evenly","stretch"]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal","start","end","center","between","around","evenly","stretch","baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":["start","end","center","between","around","evenly","stretch","baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[x]}],px:[{px:[x]}],py:[{py:[x]}],ps:[{ps:[x]}],pe:[{pe:[x]}],pt:[{pt:[x]}],pr:[{pr:[x]}],pb:[{pb:[x]}],pl:[{pl:[x]}],m:[{m:[f]}],mx:[{mx:[f]}],my:[{my:[f]}],ms:[{ms:[f]}],me:[{me:[f]}],mt:[{mt:[f]}],mr:[{mr:[f]}],mb:[{mb:[f]}],ml:[{ml:[f]}],"space-x":[{"space-x":[I]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[I]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",L,t]}],"min-w":[{"min-w":[L,t,"min","max","fit"]}],"max-w":[{"max-w":[L,t,"none","full","min","max","fit","prose",{screen:[G]},G]}],h:[{h:[L,t,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[L,t,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[L,t,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[L,t,"auto","min","max","fit"]}],"font-size":[{text:["base",G,j]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",R]}],"font-family":[{font:[Y]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",L]}],"line-clamp":[{"line-clamp":["none",D,R]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",P,L]}],"list-image":[{"list-image":["none",L]}],"list-style-type":[{list:["none","disc","decimal",L]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[h]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[h]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:["solid","dashed","dotted","double","none","wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",P,j]}],"underline-offset":[{"underline-offset":["auto",P,L]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:C()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",L]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",L]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[h]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top",H]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",T]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},W]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[m]}],"gradient-via-pos":[{via:[m]}],"gradient-to-pos":[{to:[m]}],"gradient-from":[{from:[g]}],"gradient-via":[{via:[g]}],"gradient-to":[{to:[g]}],rounded:[{rounded:[s]}],"rounded-s":[{"rounded-s":[s]}],"rounded-e":[{"rounded-e":[s]}],"rounded-t":[{"rounded-t":[s]}],"rounded-r":[{"rounded-r":[s]}],"rounded-b":[{"rounded-b":[s]}],"rounded-l":[{"rounded-l":[s]}],"rounded-ss":[{"rounded-ss":[s]}],"rounded-se":[{"rounded-se":[s]}],"rounded-ee":[{"rounded-ee":[s]}],"rounded-es":[{"rounded-es":[s]}],"rounded-tl":[{"rounded-tl":[s]}],"rounded-tr":[{"rounded-tr":[s]}],"rounded-br":[{"rounded-br":[s]}],"rounded-bl":[{"rounded-bl":[s]}],"border-w":[{border:[a]}],"border-w-x":[{"border-x":[a]}],"border-w-y":[{"border-y":[a]}],"border-w-s":[{"border-s":[a]}],"border-w-e":[{"border-e":[a]}],"border-w-t":[{"border-t":[a]}],"border-w-r":[{"border-r":[a]}],"border-w-b":[{"border-b":[a]}],"border-w-l":[{"border-l":[a]}],"border-opacity":[{"border-opacity":[h]}],"border-style":[{border:["solid","dashed","dotted","double","none","hidden"]}],"divide-x":[{"divide-x":[a]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[a]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[h]}],"divide-style":[{divide:["solid","dashed","dotted","double","none"]}],"border-color":[{border:[n]}],"border-color-x":[{"border-x":[n]}],"border-color-y":[{"border-y":[n]}],"border-color-s":[{"border-s":[n]}],"border-color-e":[{"border-e":[n]}],"border-color-t":[{"border-t":[n]}],"border-color-r":[{"border-r":[n]}],"border-color-b":[{"border-b":[n]}],"border-color-l":[{"border-l":[n]}],"divide-color":[{divide:[n]}],"outline-style":[{outline:["","solid","dashed","dotted","double","none"]}],"outline-offset":[{"outline-offset":[P,L]}],"outline-w":[{outline:[P,j]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:A()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[h]}],"ring-offset-w":[{"ring-offset":[P,j]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",G,B]}],"shadow-color":[{shadow:[Y]}],opacity:[{opacity:[h]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]}],filter:[{filter:["","none"]}],blur:[{blur:[r]}],brightness:[{brightness:[o]}],contrast:[{contrast:[l]}],"drop-shadow":[{"drop-shadow":["","none",G,L]}],grayscale:[{grayscale:[d]}],"hue-rotate":[{"hue-rotate":[c]}],invert:[{invert:[u]}],saturate:[{saturate:[w]}],sepia:[{sepia:[z]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[r]}],"backdrop-brightness":[{"backdrop-brightness":[o]}],"backdrop-contrast":[{"backdrop-contrast":[l]}],"backdrop-grayscale":[{"backdrop-grayscale":[d]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[c]}],"backdrop-invert":[{"backdrop-invert":[u]}],"backdrop-opacity":[{"backdrop-opacity":[h]}],"backdrop-saturate":[{"backdrop-saturate":[w]}],"backdrop-sepia":[{"backdrop-sepia":[z]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[i]}],"border-spacing-x":[{"border-spacing-x":[i]}],"border-spacing-y":[{"border-spacing-y":[i]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",L]}],duration:[{duration:$()}],ease:[{ease:["linear","in","out","in-out",L]}],delay:[{delay:$()}],animate:[{animate:["none","spin","ping","pulse","bounce",L]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[v]}],"scale-x":[{"scale-x":[v]}],"scale-y":[{"scale-y":[v]}],rotate:[{rotate:[N,L]}],"translate-x":[{"translate-x":[S]}],"translate-y":[{"translate-y":[S]}],"skew-x":[{"skew-x":[k]}],"skew-y":[{"skew-y":[k]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",L]}],accent:[{accent:["auto",e]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",L]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":C()}],"scroll-mx":[{"scroll-mx":C()}],"scroll-my":[{"scroll-my":C()}],"scroll-ms":[{"scroll-ms":C()}],"scroll-me":[{"scroll-me":C()}],"scroll-mt":[{"scroll-mt":C()}],"scroll-mr":[{"scroll-mr":C()}],"scroll-mb":[{"scroll-mb":C()}],"scroll-ml":[{"scroll-ml":C()}],"scroll-p":[{"scroll-p":C()}],"scroll-px":[{"scroll-px":C()}],"scroll-py":[{"scroll-py":C()}],"scroll-ps":[{"scroll-ps":C()}],"scroll-pe":[{"scroll-pe":C()}],"scroll-pt":[{"scroll-pt":C()}],"scroll-pr":[{"scroll-pr":C()}],"scroll-pb":[{"scroll-pb":C()}],"scroll-pl":[{"scroll-pl":C()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",L]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[P,j,R]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}}));function q(...e){return J(function(){for(var e,t,o=0,n="",s=arguments.length;o<s;o++)(e=arguments[o])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}(e))}function Q(e,t,r,o,n,s,i){const a=i?i[0]:n,l=i?i[1]:n,d=(s-a*(r-1))/r,c=Math.round(e/(d+a)),u=Math.round(t/(o+l));return{col:Math.max(0,c),row:Math.max(0,u)}}function U(e,t,r,o,n,s){const i=s?s[0]:o,a=s?s[1]:o,l=(n-i*(t-1))/t;return{left:e.x*(l+i),top:e.y*(r+a),width:e.w*l+(e.w-1)*i,height:e.h*r+(e.h-1)*a}}function _(e,t){return!(e.x+e.w<=t.x||t.x+t.w<=e.x||e.y+e.h<=t.y||t.y+t.h<=e.y)}function K(e,t,r="vertical"){if(!r)return e;const o=e.filter((e=>e.static)),n=[...e.filter((e=>!e.static))].sort(((e,t)=>"horizontal"===r?e.x===t.x?e.y-t.y:e.x-t.x:e.y===t.y?e.x-t.x:e.y-t.y)),s=[...o];return n.forEach((e=>{if("vertical"===r){let t=0,r=!1;for(let o=0;!r;o++){const n={...e,y:o,x:e.x};s.some((e=>_(n,e)))||(t=o,r=!0)}s.push({...e,y:t})}else if("horizontal"===r){let r=0,o=!1;for(let n=0;n<=t-e.w&&!o;n++){const t={...e,x:n,y:e.y};s.some((e=>_(t,e)))||(r=n,o=!0)}s.push({...e,x:r})}})),s}function ee(e,t,r,o){const n={...t},s=[...e],i=s.findIndex((e=>e.id===t.id));-1!==i&&(s[i]=n);const a=e=>s.filter((t=>t.id!==e.id&&!t.static&&_(e,t))),l=new Set,d=[n];for(;d.length>0;){const e=d.shift();if(l.has(e.id))continue;l.add(e.id);const t=a(e);for(const r of t){if(l.has(r.id))continue;const t=e.y+e.h,o={...r,y:t},n=s.findIndex((e=>e.id===r.id));-1!==n&&(s[n]=o,d.push(o))}}return s}function te(e,t){return e.filter((e=>e.id!==t.id&&_(e,t)))}const re=({position:t,onMouseDown:r,isActive:o=!0,isVisible:n=!0})=>{const s={se:{className:"bottom-0 right-0",cursor:"cursor-se-resize",backgroundPosition:"bottom right",transform:void 0},sw:{className:"bottom-0 left-0",cursor:"cursor-sw-resize",backgroundPosition:"bottom left",transform:"scaleX(-1)"},ne:{className:"top-0 right-0",cursor:"cursor-ne-resize",backgroundPosition:"top right",transform:"scaleY(-1)"},nw:{className:"top-0 left-0",cursor:"cursor-nw-resize",backgroundPosition:"top left",transform:"scale(-1, -1)"}};if(s[t]&&n){const n=s[t];return e.jsx("span",{className:q("react-grid-layout__resize-handle","absolute w-5 h-5",o?n.cursor:"cursor-not-allowed opacity-50","z-20"),onMouseDown:o?r:void 0,style:{..."se"===t&&{bottom:"0px",right:"0px"},..."sw"===t&&{bottom:"0px",left:"0px"},..."ne"===t&&{top:"0px",right:"0px"},..."nw"===t&&{top:"0px",left:"0px"},backgroundImage:'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=")',backgroundPosition:"bottom right",backgroundRepeat:"no-repeat",backgroundOrigin:"content-box",boxSizing:"border-box",transform:n.transform,padding:"3px"}})}const i={sw:"bottom-0 left-0 cursor-sw-resize",ne:"top-0 right-0 cursor-ne-resize",nw:"top-0 left-0 cursor-nw-resize",n:"top-0 left-1/2 -translate-x-1/2 w-10 h-2 cursor-n-resize",s:"bottom-0 left-1/2 -translate-x-1/2 w-10 h-2 cursor-s-resize",e:"right-0 top-1/2 -translate-y-1/2 w-2 h-10 cursor-e-resize",w:"left-0 top-1/2 -translate-y-1/2 w-2 h-10 cursor-w-resize"};return!n&&i[t]?e.jsx("div",{className:q("absolute",i[t],!o&&"pointer-events-none",["n","s","e","w"].includes(t)?"":"w-5 h-5","z-20"),onMouseDown:o?r:void 0}):null},oe=({item:t,position:r,isDragging:o,isResizing:n,isDraggable:s,isResizable:i,resizeHandles:a=["se"],draggableCancel:l,onDragStart:d,onResizeStart:c,children:u})=>e.jsxs("div",{"data-grid-id":t.id,className:q("absolute",!o&&"transition-all duration-200",o&&"opacity-80 z-50 cursor-grabbing shadow-2xl",n&&"z-40",!o&&!n&&"hover:z-30",t.static&&"cursor-not-allowed",t.className),style:{left:`${r.left}px`,top:`${r.top}px`,width:`${r.width}px`,height:`${r.height}px`,transform:o?"scale(1.02)":"scale(1)",cursor:s?"grab":"default"},onMouseDown:e=>{if(t.static)return;const r=e.target,o=r.closest(".grid-drag-handle"),n=r.closest(".grid-actions, button, a"),i=l&&r.closest(l);!s||e.defaultPrevented||!o&&r.closest(".grid-drag-handle")||n||i||d(t.id,e)},children:[u,i&&e.jsx(e.Fragment,{children:a.map((r=>e.jsx(re,{position:r,onMouseDown:e=>c(t.id,r,e),isActive:!0,isVisible:["se","sw","ne","nw"].includes(r)},r)))})]}),ne=({cols:r=12,rowHeight:o=60,gap:n=16,margin:s,containerPadding:i=[16,16],maxRows:a,isDraggable:l=!0,isResizable:d=!0,preventCollision:c=!1,allowOverlap:u=!1,isBounded:p=!0,compactType:g="vertical",resizeHandles:m=["se"],draggableCancel:b,autoSize:f=!0,verticalCompact:h=!0,transformScale:x=1,droppingItem:y,onLayoutChange:w,onDragStart:v,onDrag:z,onDragStop:k,onResizeStart:I,onResize:S,onResizeStop:M,onDrop:C,items:P,children:j,className:D,style:R})=>{const N=t.useRef(null),[E,L]=t.useState(0),[G,A]=t.useState(P);t.useEffect((()=>{A((e=>{const t=new Set(e.map((e=>e.id))),o=new Set(P.map((e=>e.id))),n=P.some((e=>!t.has(e.id))),s=e.some((e=>!o.has(e.id)));if(n||s){const t=new Map(e.map((e=>[e.id,e])));return K(P.map((e=>{const r=t.get(e.id);return r?{...e,x:r.x,y:r.y,w:r.w,h:r.h}:e})),r,g)}return P}))}),[P,r,g]),t.useEffect((()=>{const e=()=>{if(N.current){const e=N.current.offsetWidth-2*i[0];L(e)}};if(e(),"undefined"!=typeof ResizeObserver&&N.current){const t=new ResizeObserver(e);return t.observe(N.current),()=>t.disconnect()}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[i]);const[T,H]=t.useState({isDragging:!1,draggedItem:null,dragOffset:{x:0,y:0},placeholder:null,originalPosition:null,currentMousePos:void 0}),[O,W]=t.useState({isResizing:!1,resizedItem:null,resizeHandle:null,startSize:{w:0,h:0},startPos:{x:0,y:0}});t.useEffect((()=>{const e=()=>{N.current&&L(N.current.offsetWidth-2*i[0])};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[i]);const B=t.useCallback((e=>{const t=K(e,r,g);A(t),null==w||w(t)}),[r,g,w]),Y=t.useCallback(((e,t)=>{const r=G.find((t=>t.id===e)),o=t.currentTarget.getBoundingClientRect(),n={isDragging:!0,draggedItem:e,dragOffset:{x:t.clientX-o.left,y:t.clientY-o.top},placeholder:{...r},originalPosition:{...r},currentMousePos:{x:t.clientX,y:t.clientY}};if(H(n),v){const e=t.currentTarget;v(G,r,r,{...r},t.nativeEvent,e)}t.preventDefault()}),[G,v]),Z=t.useCallback((e=>{var t;if(!N.current)return;const l=N.current.getBoundingClientRect(),d=e.clientX-l.left-T.dragOffset.x-i[0],m=e.clientY-l.top-T.dragOffset.y-i[1],{col:b,row:f}=Q(d,m,r,o,n,E,s),h=G.find((e=>e.id===T.draggedItem));if(!h||h.static)return;const x={x:Math.max(0,Math.min(r-h.w,b)),y:Math.max(0,f),w:h.w,h:h.h};a&&x.y+x.h>a&&(x.y=Math.max(0,a-x.h)),p&&(x.x=Math.max(0,Math.min(r-x.w,x.x)),x.y=Math.max(0,x.y));const y=G.map((e=>e.id===T.draggedItem?{...e,...x}:e));if(c&&!u){if(te(y,{...h,...x}).filter((e=>e.static)).length>0)return}let w=y;if(!c&&!u){const e={...h,...x};T.originalPosition;w=ee(y,e)}const v=K(w,r,g);if(A(v),H((t=>({...t,placeholder:x,currentMousePos:{x:e.clientX,y:e.clientY}}))),z&&T.originalPosition){const r=null==(t=N.current)?void 0:t.querySelector(`[data-grid-id="${T.draggedItem}"]`);r&&z(v,{...h,...T.originalPosition},{...h,...x},{...h,...x},e,r)}}),[T,G,r,o,n,E,i,c,u,p,g,s,a,z]),$=t.useCallback((e=>{var t;const r=G.find((e=>e.id===T.draggedItem));if(r&&k&&T.originalPosition){const o=null==(t=N.current)?void 0:t.querySelector(`[data-grid-id="${T.draggedItem}"]`);o&&k(G,{...r,...T.originalPosition},r,{...r,...T.placeholder},e,o)}B(G),H({isDragging:!1,draggedItem:null,dragOffset:{x:0,y:0},placeholder:null,originalPosition:null,currentMousePos:void 0})}),[T,G,B,k]),X=t.useCallback(((e,t,r)=>{const o=G.find((t=>t.id===e));if(W({isResizing:!0,resizedItem:e,resizeHandle:t,startSize:{w:o.w,h:o.h},startPos:{x:r.clientX,y:r.clientY},originalPos:{x:o.x,y:o.y}}),I){const e=r.currentTarget;I(G,o,o,{...o},r.nativeEvent,e)}r.preventDefault(),r.stopPropagation()}),[G,I]),F=t.useCallback((e=>{var t,i,a;const l=G.find((e=>e.id===O.resizedItem));if(!l)return;const d=s?s[0]:n,c=s?s[1]:n,u=(E-d*(r-1))/r,p=.3,g=(e.clientX-O.startPos.x)/(u+d),m=(e.clientY-O.startPos.y)/(o+c),b=Math.round(g+(g>0?-.3:p)),f=Math.round(m+(m>0?-.3:p));let h=O.startSize.w,x=O.startSize.h,y=l.x,w=l.y;const v=(null==(t=O.originalPos)?void 0:t.x)||l.x,z=(null==(i=O.originalPos)?void 0:i.y)||l.y;switch(O.resizeHandle){case"se":h=O.startSize.w+b,x=O.startSize.h+f;break;case"sw":h=O.startSize.w-b,x=O.startSize.h+f,y=v+b;break;case"ne":h=O.startSize.w+b,x=O.startSize.h-f,w=z+f;break;case"nw":h=O.startSize.w-b,x=O.startSize.h-f,y=v+b,w=z+f;break;case"e":h=O.startSize.w+b;break;case"w":h=O.startSize.w-b,y=v+b;break;case"s":x=O.startSize.h+f;break;case"n":x=O.startSize.h-f,w=z+f}h=Math.max(l.minW||1,h),x=Math.max(l.minH||1,x),l.maxW&&(h=Math.min(h,l.maxW)),l.maxH&&(x=Math.min(x,l.maxH)),y=Math.max(0,y),w=Math.max(0,w),h=Math.min(h,r-y);const k=G.map((e=>e.id===O.resizedItem?{...e,x:y,y:w,w:h,h:x}:e));if(A(k),S&&O.originalPos){const t=null==(a=N.current)?void 0:a.querySelector(`[data-grid-id="${O.resizedItem}"]`);if(t){const r={...l,x:O.originalPos.x,y:O.originalPos.y,w:O.startSize.w,h:O.startSize.h},o={...l,x:y,y:w,w:h,h:x};S(k,r,o,o,e,t)}}}),[O,G,E,r,o,n,s,S]),V=t.useCallback((e=>{var t;const r=G.find((e=>e.id===O.resizedItem));if(r&&M&&O.originalPos){const o=null==(t=N.current)?void 0:t.querySelector(`[data-grid-id="${O.resizedItem}"]`);if(o){const t={...r,x:O.originalPos.x,y:O.originalPos.y,w:O.startSize.w,h:O.startSize.h};M(G,t,r,r,e,o)}}B(G),W({isResizing:!1,resizedItem:null,resizeHandle:null,startSize:{w:0,h:0},startPos:{x:0,y:0}})}),[O,G,B,M]);t.useEffect((()=>{if(T.isDragging)return document.addEventListener("mousemove",Z),document.addEventListener("mouseup",$),document.body.style.cursor="grabbing",document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",$),document.body.style.cursor="",document.body.style.userSelect=""}}),[T.isDragging,Z,$]),t.useEffect((()=>{if(O.isResizing)return document.addEventListener("mousemove",F),document.addEventListener("mouseup",V),document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",F),document.removeEventListener("mouseup",V),document.body.style.userSelect=""}}),[O.isResizing,F,V]);const J=s?s[1]:n,_=G.map((e=>(e.y+e.h)*(o+J))),re=_.length>0?Math.max(..._):0,ne=f?re:void 0;return e.jsxs("div",{ref:N,className:q("relative w-full overflow-auto",T.isDragging&&"select-none",D),style:{...void 0!==ne&&{minHeight:ne+2*i[1]},padding:`${i[1]}px ${i[0]}px`,...R},children:[G.map((t=>{const a=T.draggedItem===t.id;let c=U(t,r,o,n,E,s);if(a&&T.currentMousePos&&N.current){const e=N.current.getBoundingClientRect();c={...c,left:T.currentMousePos.x-e.left-T.dragOffset.x-i[0],top:T.currentMousePos.y-e.top-T.dragOffset.y-i[1]}}return e.jsx(oe,{item:t,position:c,isDragging:a,isResizing:O.resizedItem===t.id,isDraggable:l&&!1!==t.isDraggable,isResizable:d&&!1!==t.isResizable,resizeHandles:m,draggableCancel:b,onDragStart:Y,onResizeStart:X,children:j(t)},t.id)})),T.isDragging&&T.placeholder&&e.jsx("div",{className:"absolute rounded-lg transition-all duration-300 pointer-events-none",style:{...U(T.placeholder,r,o,n,E,s),zIndex:9,background:"rgba(59, 130, 246, 0.15)",border:"2px dashed rgb(59, 130, 246)",boxSizing:"border-box"}}),O.isResizing&&O.resizedItem&&(()=>{const t=G.find((e=>e.id===O.resizedItem));return t?e.jsx("div",{className:"absolute rounded-lg transition-all duration-200 pointer-events-none",style:{...U(t,r,o,n,E,s),zIndex:8,background:"rgba(59, 130, 246, 0.1)",border:"2px dashed rgb(59, 130, 246)",boxSizing:"border-box"}}):null})(),y&&!T.isDragging&&e.jsx("div",{className:"absolute bg-gray-200 border-2 border-dashed border-gray-400 rounded opacity-75 pointer-events-none flex items-center justify-center",style:{width:(y.w||1)*E/r-n,height:(y.h||1)*o-n,left:i[0],top:i[1]},children:e.jsx("span",{className:"text-gray-600 font-medium",children:"Drop here"})})]})},se={lg:1200,md:996,sm:768,xs:480,xxs:0},ie={lg:12,md:10,sm:6,xs:4,xxs:2};exports.DroppableGridContainer=function({onDrop:r,droppingItem:o={w:2,h:2},className:n,...s}){const[i,a]=t.useState(!1),l=t.useRef(null);return e.jsxs("div",{ref:l,className:q("relative",i&&"ring-2 ring-blue-500 ring-offset-2 rounded-lg",n),onDragOver:e=>{e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"),a(!0)},onDragLeave:e=>{var t;const r=null==(t=l.current)?void 0:t.getBoundingClientRect();if(r){const{clientX:t,clientY:o}=e;(t<r.left||t>r.right||o<r.top||o>r.bottom)&&a(!1)}},onDrop:e=>{var t;e.preventDefault(),a(!1);const n=e.dataTransfer.getData("application/json");if(n)try{const i=JSON.parse(n),a=null==(t=l.current)?void 0:t.getBoundingClientRect();if(!a)return;const d=e.clientX-a.left,c=e.clientY-a.top,u=s.cols||12,p=s.rowHeight||60,g=s.gap||16,m=a.width/u,b=p+g,f=Math.floor(d/m),h=Math.floor(c/b),x={id:i.id||`dropped-${Date.now()}`,x:Math.max(0,Math.min(f,u-(o.w||2))),y:Math.max(0,h),w:o.w||2,h:o.h||2,...i};null==r||r(x)}catch(i){console.error("Failed to parse dropped data:",i)}},children:[e.jsx(ne,{...s,droppingItem:i?o:void 0}),i&&e.jsx("div",{className:"absolute inset-0 bg-blue-500/10 rounded-lg pointer-events-none"})]})},exports.GridContainer=ne,exports.GridItemComponent=oe,exports.ResizeHandle=re,exports.ResponsiveGridContainer=function({layouts:r,breakpoints:o=se,cols:n=ie,onLayoutChange:s,onBreakpointChange:i,width:a,...l}){const[d,c]=t.useState((()=>{var e;const t=a??window.innerWidth,r=Object.entries(o).sort(((e,t)=>t[1]-e[1]));for(const[o,n]of r)if(t>=n)return o;return(null==(e=r[r.length-1])?void 0:e[0])||"lg"})),[u,p]=t.useState((()=>("object"==typeof n?n[d]:void 0)||ie[d]||12)),g=t.useMemo((()=>Object.entries(o).sort(((e,t)=>t[1]-e[1]))),[o]),m=t.useMemo((()=>e=>{if(0===g.length)return"lg";let t=g[g.length-1][0];for(const[r,o]of g)if(e>=o){t=r;break}return t}),[g]),b=t.useRef(null);t.useEffect((()=>{const e=()=>{const e=a??window.innerWidth,t=m(e);if(t!==d){c(t);const e="object"==typeof n&&n[t]||ie[t]||12;p(e),null==i||i(t,e)}},t=()=>{b.current&&clearTimeout(b.current),b.current=setTimeout(e,150)};if(e(),void 0===a)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),b.current&&clearTimeout(b.current)};e()}),[d,n,g,i,a,m]),t.useEffect((()=>{i&&i(d,u)}),[]);const f=r[d]||[];return e.jsx(ne,{...l,items:f,cols:u,onLayoutChange:e=>{const t={...r,[d]:e};null==s||s(e,t)}})},exports.WidthProvider=function(r){return function(o){const{measureBeforeMount:n=!1,...s}=o,[i,a]=t.useState(n?void 0:1280),l=t.useRef(null),d=t.useRef(!1);return t.useEffect((()=>{d.current=!0;const e=()=>{const e=l.current;if(!e)return;const t=e.offsetWidth;a(t)};n||e();let t=null;return l.current&&"ResizeObserver"in window?(t=new ResizeObserver(e),t.observe(l.current)):window.addEventListener("resize",e),()=>{d.current=!1,t?t.disconnect():window.removeEventListener("resize",e)}}),[n]),n&&void 0===i?e.jsx("div",{ref:l,style:{width:"100%"}}):e.jsx("div",{ref:l,style:{width:"100%"},children:e.jsx(r,{...s,width:i})})}},exports.calculateGridPosition=Q,exports.checkCollision=_,exports.cn=q,exports.compactLayout=K,exports.findFreeSpace=function(e,t,r,o){const n=o?e.filter((e=>e.id!==o)):e;if(!n.some((e=>_(t,e))))return t;let s=t.y;for(;;){for(let e=0;e<=r-t.w;e++){const r={...t,x:e,y:s};if(!n.some((e=>_(r,e))))return r}s++}},exports.generateLayouts=function(e,t=["lg","md","sm","xs","xxs"]){return t.reduce(((t,r)=>(t[r]=e.map((e=>({...e}))),t)),{})},exports.generateResponsiveLayouts=function(e,t={lg:12,md:10,sm:6,xs:4,xxs:2}){const r={};return Object.entries(t).forEach((([t,o])=>{r[t]=e.map((e=>{const t=Math.min(e.w,o),r=e.x+t>o?o-t:e.x;return{...e,w:t,x:r}}))})),r},exports.getAllCollisions=te,exports.getPixelPosition=U,exports.moveItems=ee;
+//# sourceMappingURL=index.cjs.map