@aurora-ds/components 0.5.2 → 0.6.3

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

@@ -5,10 +5,9 @@ export * from '@components/inputs/button';
 export * from '@components/inputs/icon-button';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
+export * from '@components/layout/grid';
 export * from '@components/layout/accordion';
 export * from '@components/navigation/drawer-item';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
-export type { StackDirection, StackAlign, StackJustify, StackWrap } from '@interfaces/stack.types';
-export type { CardDirection } from '@interfaces/card.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';

package/dist/cjs/components/inputs/button/Button.props.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@aurora-ds/theme';
 import { ReactNode } from 'react';
 import { ButtonVariants } from '@interfaces/button.types.ts';
 export type ButtonProps = {
@@ -17,6 +18,8 @@ export type ButtonProps = {
     active?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Custom text color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
 };
 export type ButtonStyleParams = {
     variant?: ButtonVariants;

package/dist/cjs/components/inputs/icon-button/IconButton.props.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@aurora-ds/theme';
 import { ReactNode } from 'react';
 import { ButtonVariants } from '@/interfaces';
 export type IconButtonProps = {
@@ -13,6 +14,8 @@ export type IconButtonProps = {
     active?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Custom text/icon color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
 };
 export type IconButtonStyleParams = {
     variant?: ButtonVariants;

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

@@ -1,12 +1,10 @@
 import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
-import { CardDirection } from '@interfaces/card.types.ts';
-import { StackAlign, StackJustify } from '@interfaces/stack.types.ts';
 export type CardProps = {
     /** Card children elements */
     children: ReactNode;
     /** Flex direction of the card content */
-    direction?: CardDirection;
+    direction?: CSSProperties['flexDirection'];
     /** Padding inside the card (theme spacing key) */
     padding?: keyof Theme['spacing'];
     /** Width of the card */
@@ -20,24 +18,24 @@ export type CardProps = {
     /** Shadow depth of the card */
     shadow?: keyof Theme['shadows'];
     /** Alignment of items on the cross axis */
-    align?: StackAlign;
+    align?: CSSProperties['alignItems'];
     /** Justification of items on the main axis */
-    justify?: StackJustify;
+    justify?: CSSProperties['justifyContent'];
     /** Background color of the card */
     backgroundColor?: keyof Theme['colors'];
     /** Border color of the card */
     borderColor?: keyof Theme['colors'];
 };
 export type CardStyleParams = {
-    direction: CardDirection;
+    direction: CSSProperties['flexDirection'];
     padding?: keyof Theme['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     gap?: keyof Theme['spacing'];
     radius: keyof Theme['radius'];
     shadow: keyof Theme['shadows'];
-    align?: StackAlign;
-    justify?: StackJustify;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
     backgroundColor: keyof Theme['colors'];
     borderColor?: keyof Theme['colors'];
 };

package/dist/cjs/components/layout/grid/Grid.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { GridProps } from '@components/layout/grid/Grid.props.ts';
+/**
+ * Grid component
+ *
+ * A CSS Grid container for laying out children in a two-dimensional grid.
+ *
+ * **Usage:**
+ * - Use `columns` to define the number of columns or a custom grid-template-columns value
+ * - Use `rows` to define the number of rows or a custom grid-template-rows value
+ * - Use `minChildWidth` for responsive auto-fill grids
+ */
+declare const Grid: FC<GridProps>;
+export default Grid;

package/dist/cjs/components/layout/grid/Grid.props.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from '@aurora-ds/theme';
+import { CSSProperties, ReactNode } from 'react';
+export type GridProps = {
+    /** Grid children elements */
+    children: ReactNode;
+    /** Number of columns (number or CSS grid-template-columns value) */
+    columns?: number | string;
+    /** Number of rows (number or CSS grid-template-rows value) */
+    rows?: number | string;
+    /** Gap between items (theme spacing key) */
+    gap?: keyof Theme['spacing'];
+    /** Gap between columns (theme spacing key) */
+    columnGap?: keyof Theme['spacing'];
+    /** Gap between rows (theme spacing key) */
+    rowGap?: keyof Theme['spacing'];
+    /** Width of the grid container */
+    width?: CSSProperties['width'];
+    /** Height of the grid container */
+    height?: CSSProperties['height'];
+    /** Alignment of items within their grid area (cross axis) */
+    alignItems?: CSSProperties['alignItems'];
+    /** Justification of items within their grid area (main axis) */
+    justifyItems?: CSSProperties['justifyItems'];
+    /** Alignment of the entire grid within its container (cross axis) */
+    alignContent?: CSSProperties['alignContent'];
+    /** Justification of the entire grid within its container (main axis) */
+    justifyContent?: CSSProperties['justifyContent'];
+    /** Padding inside the grid */
+    padding?: keyof Theme['spacing'];
+    /** Minimum width for auto-fill/auto-fit columns */
+    minChildWidth?: CSSProperties['width'];
+};
+export type GridStyleParams = {
+    columns?: number | string;
+    rows?: number | string;
+    gap?: keyof Theme['spacing'];
+    columnGap?: keyof Theme['spacing'];
+    rowGap?: keyof Theme['spacing'];
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    alignItems?: CSSProperties['alignItems'];
+    justifyItems?: CSSProperties['justifyItems'];
+    alignContent?: CSSProperties['alignContent'];
+    justifyContent?: CSSProperties['justifyContent'];
+    padding?: keyof Theme['spacing'];
+    minChildWidth?: CSSProperties['width'];
+};

package/dist/cjs/components/layout/grid/Grid.styles.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Grid } from '@components/layout/grid/Grid.tsx';
+export type { GridProps } from '@components/layout/grid/Grid.props.ts';

package/dist/cjs/components/layout/stack/Stack.props.d.ts

@@ -1,11 +1,10 @@
 import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
-import { StackAlign, StackDirection, StackJustify, StackWrap } from '@interfaces/stack.types.ts';
 export type StackProps = {
     /** Stack children elements */
     children: ReactNode;
     /** Flex direction of the stack */
-    direction?: StackDirection;
+    direction?: CSSProperties['flexDirection'];
     /** Gap between children (theme spacing or CSS value) */
     gap?: keyof Theme['spacing'];
     /** Width of the stack container */
@@ -13,21 +12,21 @@ export type StackProps = {
     /** Height of the stack container */
     height?: CSSProperties['height'];
     /** Alignment of items on the cross axis */
-    align?: StackAlign;
+    align?: CSSProperties['alignItems'];
     /** Justification of items on the main axis */
-    justify?: StackJustify;
+    justify?: CSSProperties['justifyContent'];
     /** Whether items should wrap */
-    wrap?: StackWrap;
+    wrap?: CSSProperties['flexWrap'];
     /** Padding inside the stack */
     padding?: keyof Theme['spacing'];
 };
 export type StackStyleParams = {
-    direction: StackDirection;
+    direction: CSSProperties['flexDirection'];
     gap?: keyof Theme['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
-    align?: StackAlign;
-    justify?: StackJustify;
-    wrap?: StackWrap;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    wrap?: CSSProperties['flexWrap'];
     padding?: keyof Theme['spacing'];
 };

package/dist/cjs/index.js

@@ -499,10 +499,10 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
  * - `outlined`: Border only button
  * - `text`: Text only button without background
  */
-const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', }) => {
+const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
-    const textColor = disabled ? 'disabledText' : variantStyles[variant].textColor;
+    const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active }), children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
@@ -534,10 +534,10 @@ const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
     };
 });
 
-const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled }) => {
+const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
-    const textColor = disabled ? 'disabledText' : variantStyles[variant].textColor;
+    const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active }), children: jsxRuntime.jsx(Icon, { color: textColor, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';
@@ -630,6 +630,77 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
 };
 Card.displayName = 'Card';
 
+/**
+ * Generates the grid-template-columns value based on columns and minChildWidth props
+ */
+const getGridTemplateColumns = (columns, minChildWidth) => {
+    if (minChildWidth) {
+        return `repeat(auto-fill, minmax(${typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth}, 1fr))`;
+    }
+    if (typeof columns === 'number') {
+        return `repeat(${columns}, 1fr)`;
+    }
+    return columns;
+};
+/**
+ * Generates the grid-template-rows value based on rows prop
+ */
+const getGridTemplateRows = (rows) => {
+    if (typeof rows === 'number') {
+        return `repeat(${rows}, 1fr)`;
+    }
+    return rows;
+};
+/**
+ * Grid styles using createStyles from @aurora-ds/theme
+ */
+const GRID_STYLES = theme.createStyles((theme) => ({
+    root: ({ columns, rows, gap, columnGap, rowGap, width, height, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => ({
+        display: 'grid',
+        gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
+        gridTemplateRows: getGridTemplateRows(rows),
+        gap: gap ? theme.spacing[gap] : undefined,
+        columnGap: columnGap ? theme.spacing[columnGap] : undefined,
+        rowGap: rowGap ? theme.spacing[rowGap] : undefined,
+        width,
+        height,
+        alignItems,
+        justifyItems,
+        alignContent,
+        justifyContent,
+        padding: padding ? theme.spacing[padding] : undefined,
+    }),
+}));
+
+/**
+ * Grid component
+ *
+ * A CSS Grid container for laying out children in a two-dimensional grid.
+ *
+ * **Usage:**
+ * - Use `columns` to define the number of columns or a custom grid-template-columns value
+ * - Use `rows` to define the number of rows or a custom grid-template-rows value
+ * - Use `minChildWidth` for responsive auto-fill grids
+ */
+const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+    return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
+            columns,
+            rows,
+            gap,
+            columnGap,
+            rowGap,
+            width,
+            height,
+            alignItems,
+            justifyItems,
+            alignContent,
+            justifyContent,
+            padding,
+            minChildWidth,
+        }), children: children }));
+};
+Grid.displayName = 'Grid';
+
 const ACCORDION_STYLES = theme.createStyles((theme) => {
     return {
         root: ({ disabled, width }) => ({
@@ -746,6 +817,7 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.DrawerItem = DrawerItem;
+exports.Grid = Grid;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Stack = Stack;