@aurora-ds/components 0.21.1 → 0.22.1

package/README.md

@@ -209,7 +209,7 @@ The `defaultTheme` includes these token categories:
 ## 🧩 Available Components
 
 **Buttons:** Button, IconButton  
-**Layout:** Card, Stack, Grid, Page, PageSection, Separator  
+**Layout:** Box, Card, Stack, Grid, Page, PageSection, Separator  
 **Typography:** Text  
 **Forms:** Input, TextArea, Select, DatePicker, Form  
 **Data Display:** Status, Avatar, AvatarGroup, Icon  

package/dist/cjs/components/index.d.ts

@@ -10,6 +10,7 @@ export * from '@components/forms/input';
 export * from '@components/forms/textarea';
 export * from '@components/forms/select';
 export * from '@components/forms/date-picker';
+export * from '@components/layout/box';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
 export * from '@components/layout/grid';

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { BoxProps } from '@components/layout/box/Box.props';
+/**
+ * Box component
+ *
+ * A versatile container component that acts as a flexible div with extensive styling props.
+ * Perfect for layout composition, spacing control, and creating custom containers.
+ *
+ * **Common use cases:**
+ * - Layout containers with specific dimensions
+ * - Spacing and positioning elements
+ * - Creating flexible layouts with flexbox
+ * - Wrapping content with background colors or borders
+ *
+ * @example
+ * ```tsx
+ * <Box width="300px" height="200px" padding="md" backgroundColor="surface">
+ *   Content here
+ * </Box>
+ * ```
+ */
+declare const Box: FC<BoxProps>;
+export default Box;

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

@@ -0,0 +1,139 @@
+import { CSSProperties, DragEvent, ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
+export type BoxProps = {
+    /** Box children elements */
+    children?: ReactNode;
+    /** Width of the box */
+    width?: CSSProperties['width'];
+    /** Height of the box */
+    height?: CSSProperties['height'];
+    /** Minimum width */
+    minWidth?: CSSProperties['minWidth'];
+    /** Minimum height */
+    minHeight?: CSSProperties['minHeight'];
+    /** Maximum width */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** Maximum height */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Padding inside the box (theme spacing key) */
+    padding?: keyof ThemeContract['spacing'];
+    /** Margin around the box (theme spacing key) */
+    margin?: keyof ThemeContract['spacing'];
+    /** Background color of the box */
+    backgroundColor?: keyof ThemeContract['colors'];
+    /** Border radius of the box */
+    radius?: keyof ThemeContract['radius'];
+    /** Display type */
+    display?: CSSProperties['display'];
+    /** Position type */
+    position?: CSSProperties['position'];
+    /** Top position */
+    top?: CSSProperties['top'];
+    /** Right position */
+    right?: CSSProperties['right'];
+    /** Bottom position */
+    bottom?: CSSProperties['bottom'];
+    /** Left position */
+    left?: CSSProperties['left'];
+    /** Overflow behavior */
+    overflow?: CSSProperties['overflow'];
+    /** Overflow X behavior */
+    overflowX?: CSSProperties['overflowX'];
+    /** Overflow Y behavior */
+    overflowY?: CSSProperties['overflowY'];
+    /** Border color */
+    borderColor?: keyof ThemeContract['colors'];
+    /** Border width */
+    borderWidth?: string;
+    /** Flex direction (when display is flex) */
+    flexDirection?: CSSProperties['flexDirection'];
+    /** Align items (when display is flex) */
+    alignItems?: CSSProperties['alignItems'];
+    /** Justify content (when display is flex) */
+    justifyContent?: CSSProperties['justifyContent'];
+    /** Gap between children (theme spacing key) */
+    gap?: keyof ThemeContract['spacing'];
+    /** Flex wrap */
+    flexWrap?: CSSProperties['flexWrap'];
+    /** Flex grow */
+    flexGrow?: CSSProperties['flexGrow'];
+    /** Flex shrink */
+    flexShrink?: CSSProperties['flexShrink'];
+    /** Flex basis */
+    flexBasis?: CSSProperties['flexBasis'];
+    /** Z-index */
+    zIndex?: CSSProperties['zIndex'];
+    /** Opacity */
+    opacity?: CSSProperties['opacity'];
+    /** Cursor */
+    cursor?: CSSProperties['cursor'];
+    /** Box shadow */
+    shadow?: keyof ThemeContract['shadows'];
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this box */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this box */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** HTML id attribute */
+    id?: string;
+    /** onClick handler */
+    onClick?: () => void;
+    /** onMouseEnter handler */
+    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'];
+    height?: CSSProperties['height'];
+    minWidth?: CSSProperties['minWidth'];
+    minHeight?: CSSProperties['minHeight'];
+    maxWidth?: CSSProperties['maxWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
+    padding?: keyof ThemeContract['spacing'];
+    margin?: keyof ThemeContract['spacing'];
+    backgroundColor?: keyof ThemeContract['colors'];
+    radius?: keyof ThemeContract['radius'];
+    display?: CSSProperties['display'];
+    position?: CSSProperties['position'];
+    top?: CSSProperties['top'];
+    right?: CSSProperties['right'];
+    bottom?: CSSProperties['bottom'];
+    left?: CSSProperties['left'];
+    overflow?: CSSProperties['overflow'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    borderColor?: keyof ThemeContract['colors'];
+    borderWidth?: string;
+    flexDirection?: CSSProperties['flexDirection'];
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    gap?: keyof ThemeContract['spacing'];
+    flexWrap?: CSSProperties['flexWrap'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexBasis?: CSSProperties['flexBasis'];
+    zIndex?: CSSProperties['zIndex'];
+    opacity?: CSSProperties['opacity'];
+    cursor?: CSSProperties['cursor'];
+    shadow?: keyof ThemeContract['shadows'];
+};

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

@@ -0,0 +1,7 @@
+import { BoxStyleParams } from '@components/layout/box/Box.props';
+/**
+ * Box styles using createStyles from @aurora-ds/theme
+ */
+export declare const BOX_STYLES: {
+    root: (args_0: BoxStyleParams) => string;
+};

package/dist/cjs/components/layout/box/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Box } from '@components/layout/box/Box';
+export type { BoxProps } from '@components/layout/box/Box.props';

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

@@ -1935,6 +1935,105 @@ const DatePicker = ({ value, onChange, label, mandatory = false, placeholder, di
 DatePicker.displayName = 'DatePicker';
 var DatePicker_default = React.memo(DatePicker);
 
+/**
+ * Box styles using createStyles from @aurora-ds/theme
+ */
+const BOX_STYLES = theme.createStyles((theme) => ({
+    root: ({ width, height, minWidth, minHeight, maxWidth, maxHeight, padding, margin, backgroundColor, radius, display, position, top, right, bottom, left, overflow, overflowX, overflowY, borderColor, borderWidth, flexDirection, alignItems, justifyContent, gap, flexWrap, flexGrow, flexShrink, flexBasis, zIndex, opacity, cursor, shadow, }) => ({
+        display,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        padding: padding ? theme.spacing[padding] : undefined,
+        margin: margin ? theme.spacing[margin] : undefined,
+        backgroundColor: backgroundColor ? theme.colors[backgroundColor] : undefined,
+        borderRadius: radius ? theme.radius[radius] : undefined,
+        position,
+        top,
+        right,
+        bottom,
+        left,
+        overflow,
+        overflowX,
+        overflowY,
+        border: borderColor ? `${borderWidth || '1px'} solid ${theme.colors[borderColor]}` : undefined,
+        flexDirection,
+        alignItems,
+        justifyContent,
+        gap: gap ? theme.spacing[gap] : undefined,
+        flexWrap,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        zIndex,
+        opacity,
+        cursor,
+        boxShadow: shadow ? theme.shadows[shadow] : undefined,
+        boxSizing: 'border-box',
+    }),
+}));
+
+/**
+ * Box component
+ *
+ * A versatile container component that acts as a flexible div with extensive styling props.
+ * Perfect for layout composition, spacing control, and creating custom containers.
+ *
+ * **Common use cases:**
+ * - Layout containers with specific dimensions
+ * - Spacing and positioning elements
+ * - Creating flexible layouts with flexbox
+ * - Wrapping content with background colors or borders
+ *
+ * @example
+ * ```tsx
+ * <Box width="300px" height="200px" padding="md" backgroundColor="surface">
+ *   Content here
+ * </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, onDragOver, onDragLeave, onDrop, onDragStart, onDragEnd, onDragEnter, draggable, }) => {
+    return (jsxRuntime.jsx("div", { id: id, className: BOX_STYLES.root({
+            width,
+            height,
+            minWidth,
+            minHeight,
+            maxWidth,
+            maxHeight,
+            padding,
+            margin,
+            backgroundColor,
+            radius,
+            display,
+            position,
+            top,
+            right,
+            bottom,
+            left,
+            overflow,
+            overflowX,
+            overflowY,
+            borderColor,
+            borderWidth,
+            flexDirection,
+            alignItems,
+            justifyContent,
+            gap,
+            flexWrap,
+            flexGrow,
+            flexShrink,
+            flexBasis,
+            zIndex,
+            opacity,
+            cursor,
+            shadow,
+        }), "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';
+
 /**
  * Card styles using createStyles from @aurora-ds/theme
  */
@@ -1966,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,
@@ -1979,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';
 
@@ -3283,6 +3382,7 @@ exports.Alert = Alert;
 exports.AlertProvider = AlertProvider;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
+exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbLink = BreadcrumbLink;