@aurora-ds/components 0.21.0 → 0.22.0

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,125 @@
+import { CSSProperties, 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;
+};
+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/index.js

@@ -254,14 +254,14 @@ const getStatusColorStyles = (theme, color, variant, disabled) => {
     const colorMap = {
         default: {
             filled: {
-                backgroundColor: theme.colors.border,
-                color: theme.colors.text,
+                backgroundColor: theme.colors.defaultSubtle,
+                color: theme.colors.default,
                 borderColor: 'transparent',
             },
             outlined: {
-                backgroundColor: 'transparent',
-                color: theme.colors.text,
-                borderColor: theme.colors.border,
+                backgroundColor: theme.colors.defaultSubtle,
+                color: theme.colors.default,
+                borderColor: theme.colors.default,
             },
         },
         primary: {
@@ -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, }) => {
+    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, children: children }));
+};
+Box.displayName = 'Box';
+
 /**
  * Card styles using createStyles from @aurora-ds/theme
  */
@@ -3085,12 +3184,12 @@ const themeColors = {
     warning: theme.colors.amber[600],
     warningSubtle: theme.colors.amber[100],
     // Semantic colors - Error (Red)
-    error: theme.colors.red[600],
+    error: theme.colors.red[500],
     errorHover: theme.colors.red[700],
     errorSubtle: theme.colors.red[100],
     onError: theme.colors.white,
     // Semantic colors - Info (Blue)
-    info: theme.colors.blue[600],
+    info: theme.colors.blue[500],
     infoSubtle: theme.colors.blue[100],
     // Semantic colors - Highlight (Orange)
     highlight: theme.colors.orange[500],
@@ -3098,6 +3197,9 @@ const themeColors = {
     // Semantic colors - Accent (Purple)
     accent: theme.colors.purple[500],
     accentSubtle: theme.colors.purple[100],
+    // Status colors - Default (Neutral slate)
+    default: theme.colors.slate[500],
+    defaultSubtle: theme.colors.slate[100],
     // Status colors - New (Cyan)
     new: theme.colors.cyan[600],
     newSubtle: theme.colors.cyan[100],
@@ -3280,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;