@aurora-ds/components 0.22.0 → 0.22.1

package/dist/cjs/components/layout/box/Box.props.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, DragEvent, ReactNode } from 'react';
 import { ThemeContract } from '@/interfaces';
 export type BoxProps = {
     /** Box children elements */
@@ -87,6 +87,20 @@ export type BoxProps = {
     onMouseEnter?: () => void;
     /** onMouseLeave handler */
     onMouseLeave?: () => void;
+    /** Drag over event handler */
+    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag leave event handler */
+    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drop event handler */
+    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag start event handler */
+    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag end event handler */
+    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag enter event handler */
+    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Whether the element is draggable */
+    draggable?: boolean;
 };
 export type BoxStyleParams = {
     width?: CSSProperties['width'];

package/dist/cjs/components/layout/card/Card.props.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, DragEvent, ReactNode } from 'react';
 import { ThemeContract } from '@/interfaces';
 export type CardProps = {
     /** Card children elements */
@@ -35,6 +35,20 @@ export type CardProps = {
     role?: string;
     /** Tab index for keyboard navigation */
     tabIndex?: number;
+    /** Drag over event handler */
+    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag leave event handler */
+    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drop event handler */
+    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag start event handler */
+    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag end event handler */
+    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Drag enter event handler */
+    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
+    /** Whether the element is draggable */
+    draggable?: boolean;
 };
 export type CardStyleParams = {
     direction: CSSProperties['flexDirection'];

package/dist/cjs/index.js

@@ -1995,7 +1995,7 @@ const BOX_STYLES = theme.createStyles((theme) => ({
  * </Box>
  * ```
  */
-const Box = ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, padding, margin, backgroundColor, radius, display = 'block', position, top, right, bottom, left, overflow, overflowX, overflowY, borderColor, borderWidth, flexDirection, alignItems, justifyContent, gap, flexWrap, flexGrow, flexShrink, flexBasis, zIndex, opacity, cursor, shadow, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, id, onClick, onMouseEnter, onMouseLeave, }) => {
+const Box = ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, padding, margin, backgroundColor, radius, display = 'block', position, top, right, bottom, left, overflow, overflowX, overflowY, borderColor, borderWidth, flexDirection, alignItems, justifyContent, gap, flexWrap, flexGrow, flexShrink, flexBasis, zIndex, opacity, cursor, shadow, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, id, onClick, onMouseEnter, onMouseLeave, onDragOver, onDragLeave, onDrop, onDragStart, onDragEnd, onDragEnter, draggable, }) => {
     return (jsxRuntime.jsx("div", { id: id, className: BOX_STYLES.root({
             width,
             height,
@@ -2030,7 +2030,7 @@ const Box = ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight
             opacity,
             cursor,
             shadow,
-        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable, children: children }));
 };
 Box.displayName = 'Box';
 
@@ -2065,7 +2065,7 @@ const CARD_STYLES = theme.createStyles((theme) => ({
  * - `column`: Vertical layout (default)
  * - `row`: Horizontal layout
  */
-const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, onDragOver, onDragLeave, onDrop, onDragStart, onDragEnd, onDragEnter, draggable, }) => {
     return (jsxRuntime.jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
@@ -2078,7 +2078,7 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
             justify,
             backgroundColor,
             borderColor
-        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable, children: children }));
 };
 Card.displayName = 'Card';