@aurora-ds/components 0.17.16 → 0.18.0

package/README.md

@@ -62,6 +62,7 @@ function App() {
 | **Menu** | Dropdown menu component positioned absolutely |
 | **Page** | Page layout component |
 | **PageSection** | Section within a page |
+| **Pagination** | Pagination component for navigating between pages |
 | **Separator** | Visual separator component |
 | **Select** | Dropdown select component for single item selection |
 | **DatePicker** | Date picker component with calendar popup |

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

@@ -22,6 +22,7 @@ export * from '@components/overlay/modal';
 export * from '@components/navigation/drawer-item';
 export * from '@components/navigation/breadcrumb';
 export * from '@components/navigation/tabs';
+export * from '@components/navigation/pagination';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';

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

@@ -3,10 +3,10 @@ import { CSSProperties, ReactNode } from 'react';
 export type GridProps = {
     /** Grid children elements */
     children: ReactNode;
-    /** Number of columns (number or CSS grid-template-columns value). Acts as max columns when minChildWidth is set. */
-    columns?: number | string;
-    /** Number of rows (number or CSS grid-template-rows value). */
-    rows?: number | string;
+    /** Number of columns. Acts as max columns when minChildWidth is set for responsive behavior. */
+    columns?: number;
+    /** Number of rows. */
+    rows?: number;
     /** Gap between columns (theme spacing key) */
     columnGap?: keyof Theme['spacing'];
     /** Gap between rows (theme spacing key) */
@@ -41,8 +41,8 @@ export type GridProps = {
     tabIndex?: number;
 };
 export type GridStyleParams = {
-    columns?: number | string;
-    rows?: number | string;
+    columns?: number;
+    rows?: number;
     columnGap?: keyof Theme['spacing'];
     rowGap?: keyof Theme['spacing'];
     width?: CSSProperties['width'];

package/dist/cjs/components/navigation/pagination/Pagination.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { PaginationProps } from '@components/navigation/pagination/Pagination.props';
+/**
+ * Pagination component for navigating between pages
+ */
+export declare const Pagination: FC<PaginationProps>;

package/dist/cjs/components/navigation/pagination/Pagination.props.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Props for the Pagination component
+ */
+export type PaginationProps = {
+    /** Current page number (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when clicking the previous button */
+    onPrevious?: (page: number) => void;
+    /** Callback when clicking the next button */
+    onNext?: (page: number) => void;
+    /** Maximum number of page buttons to display */
+    maxVisiblePages?: number;
+    /** Accessibility label for the pagination */
+    ariaLabel?: string;
+};
+export type PaginationStyleParams = {
+    disabled?: boolean;
+};

package/dist/cjs/components/navigation/pagination/Pagination.styles.d.ts

@@ -0,0 +1,7 @@
+import { PaginationStyleParams } from '@components/navigation/pagination/Pagination.props';
+export declare const PAGINATION_STYLES: {
+    root: string;
+    pageButton: (args_0: PaginationStyleParams) => string;
+    activePageButton: string;
+    navigationButton: (args_0: PaginationStyleParams) => string;
+};

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

@@ -0,0 +1,2 @@
+export * from '@components/navigation/pagination/Pagination';
+export type { PaginationProps } from '@components/navigation/pagination/Pagination.props';

package/dist/cjs/components/overlay/modal/Modal.props.d.ts

@@ -1,13 +1,10 @@
 import { ReactNode } from 'react';
+import { ButtonProps } from '@/components';
 export type ModalProps = {
     isOpen: boolean;
     onClose: () => void;
     label: string;
     children: ReactNode;
     isForm?: boolean;
-    action?: {
-        label: string;
-        onClick: () => void;
-        disabled?: boolean;
-    };
+    action?: ButtonProps;
 };

package/dist/cjs/index.js

@@ -942,25 +942,29 @@ const CalendarIcon = () => {
 };
 
 const ChevronDownIcon = () => {
-    return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsxRuntime.jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsxRuntime.jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+};
+
+const ChevronLeftIcon = () => {
+    return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-chevron-left-icon lucide-chevron-left', children: jsxRuntime.jsx("path", { d: 'm15 18-6-6 6-6' }) }));
 };
 
 const ChevronRightIcon = () => {
-    return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-right-icon lucide-chevron-right', children: jsxRuntime.jsx("path", { d: 'm9 18 6-6-6-6' }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-chevron-right-icon lucide-chevron-right', children: jsxRuntime.jsx("path", { d: 'm9 18 6-6-6-6' }) }));
 };
 
 const CloseIcon = () => (jsxRuntime.jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M12 4L4 12M4 4l8 8', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
 
 const EyeIcon = () => {
-    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-eye-icon lucide-eye', children: [jsxRuntime.jsx("path", { d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' }), jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-eye-icon lucide-eye', children: [jsxRuntime.jsx("path", { d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' }), jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
 };
 
 const EyeOffIcon = () => {
-    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-eye-off-icon lucide-eye-off', children: [jsxRuntime.jsx("path", { d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' }), jsxRuntime.jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), jsxRuntime.jsx("path", { d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' }), jsxRuntime.jsx("path", { d: 'm2 2 20 20' })] }));
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-eye-off-icon lucide-eye-off', children: [jsxRuntime.jsx("path", { d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' }), jsxRuntime.jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), jsxRuntime.jsx("path", { d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' }), jsxRuntime.jsx("path", { d: 'm2 2 20 20' })] }));
 };
 
 const MoreHorizontalIcon = () => {
-    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '19', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '19', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
 
 /**
@@ -1893,8 +1897,8 @@ Card.displayName = 'Card';
 /**
  * Generates the grid-template-columns value based on columns and minChildWidth props
  * - If only columns is defined: creates a fixed number of columns
- * - If only minChildWidth is defined: creates responsive auto-fill columns (items stretch)
- * - If both are defined: creates responsive columns with a maximum limit (items don't stretch beyond column width)
+ * - If only minChildWidth is defined: creates responsive auto-fill columns
+ * - If both are defined: creates responsive columns with a maximum limit (columns acts as max)
  *
  * Key difference between auto-fill and auto-fit:
  * - auto-fill: keeps empty column tracks, items don't stretch to fill container
@@ -1902,12 +1906,11 @@ Card.displayName = 'Card';
  */
 const getGridTemplateColumns = (columns, minChildWidth, columnGap) => {
     const minWidthValue = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
-    if (minChildWidth && typeof columns === 'number') {
+    if (minChildWidth && columns) {
         // Responsive grid with max columns limit
         // Uses auto-fill to preserve empty column tracks (items don't stretch beyond their column)
         // The min value ensures items are at least minChildWidth
         // The max value is 1fr to distribute space evenly within the max columns constraint
-        // The calc ensures we never exceed the specified number of columns
         const gapValue = columnGap || '0px';
         const minColumnWidth = `calc((100% - (${columns} - 1) * ${gapValue}) / ${columns})`;
         return `repeat(auto-fill, minmax(max(${minWidthValue}, ${minColumnWidth}), 1fr))`;
@@ -1916,20 +1919,20 @@ const getGridTemplateColumns = (columns, minChildWidth, columnGap) => {
         // Responsive grid without column limit - items will fill available space
         return `repeat(auto-fill, minmax(${minWidthValue}, 1fr))`;
     }
-    if (typeof columns === 'number') {
+    if (columns) {
         // Fixed number of columns - each column takes equal space
         return `repeat(${columns}, 1fr)`;
     }
-    return columns;
+    return undefined;
 };
 /**
  * Generates the grid-template-rows value based on rows prop
  */
 const getGridTemplateRows = (rows) => {
-    if (typeof rows === 'number') {
-        return `repeat(${rows}, 1fr)`;
+    if (rows) {
+        return `repeat(${rows}, auto)`;
     }
-    return rows;
+    return undefined;
 };
 /**
  * Grid styles using createStyles from @aurora-ds/theme
@@ -1967,7 +1970,7 @@ const GRID_STYLES = theme.createStyles((theme) => ({
  * - Use `minChildWidth` for responsive auto-fill grids
  * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
  */
-const Grid = ({ children, columns = 1, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 3, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,
@@ -2177,15 +2180,16 @@ const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [isOpen, onClose]);
-    // components
-    const Wrapper = isForm ? Form$1 : React.Fragment;
-    const wrapperProps = isForm ? {
-        onSubmit: (e) => {
-            e.preventDefault();
-            action?.onClick();
+    // actions
+    const safeInvokeAction = (e) => {
+        if (action && typeof action.onClick === 'function') {
+            // Cast e to required MouseEvent type (or undefined) and call
+            action.onClick(e);
         }
-    } : {};
-    return reactDom.createPortal(jsxRuntime.jsx(React.Fragment, { children: isVisible ? (jsxRuntime.jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsxRuntime.jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }) }) })) : null }), document.body);
+    };
+    // body of the modal
+    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }));
+    return reactDom.createPortal(jsxRuntime.jsx(React.Fragment, { children: isVisible ? (jsxRuntime.jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsxRuntime.jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: isForm ? (jsxRuntime.jsx(Form$1, { onSubmit: (e) => { e.preventDefault(); safeInvokeAction(); }, children: body })) : (jsxRuntime.jsx(React.Fragment, { children: body })) }) })) : null }), document.body);
 };
 Modal.displayName = 'Modal';
 
@@ -2501,6 +2505,135 @@ const TabItem = ({ label, isActive = false, onClick, startIcon, endIcon }) => {
 };
 TabItem.displayName = 'TabItem';
 
+const PAGINATION_STYLES = theme.createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.xs,
+    },
+    pageButton: ({ disabled = false }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.md,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+        minHeight: '40px',
+        maxHeight: '40px',
+        minWidth: '40px',
+        maxWidth: '40px',
+        fontFamily: 'inherit',
+        fontSize: theme.fontSize.md,
+        fontWeight: theme.fontWeight.medium,
+        backgroundColor: 'transparent',
+        color: theme.colors.text,
+        border: 'none',
+        opacity: disabled ? 0.4 : 1,
+        ':hover': disabled ? {} : {
+            backgroundColor: theme.colors.surfaceHover,
+        },
+        ':active': disabled ? {} : {
+            backgroundColor: theme.colors.surfaceActive,
+        },
+    }),
+    activePageButton: {
+        backgroundColor: theme.colors.primary,
+        color: theme.colors.onPrimary,
+        ':hover': {
+            backgroundColor: theme.colors.primary,
+        },
+        ':active': {
+            backgroundColor: theme.colors.primary,
+        },
+    },
+    navigationButton: ({ disabled = false }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.md,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+        minHeight: '40px',
+        maxHeight: '40px',
+        minWidth: '40px',
+        maxWidth: '40px',
+        fontFamily: 'inherit',
+        backgroundColor: 'transparent',
+        color: theme.colors.text,
+        border: 'none',
+        opacity: disabled ? 0.4 : 1,
+        ':hover': disabled ? {} : {
+            backgroundColor: theme.colors.surfaceHover,
+        },
+        ':active': disabled ? {} : {
+            backgroundColor: theme.colors.surfaceActive,
+        },
+    }),
+}));
+
+/**
+ * Pagination component for navigating between pages
+ */
+const Pagination = ({ currentPage, totalPages, onPageChange, onPrevious, onNext, maxVisiblePages = 7, ariaLabel = 'Pagination' }) => {
+    const styles = PAGINATION_STYLES;
+    // Calculate which page numbers to display
+    const visiblePages = React.useMemo(() => {
+        const pages = [];
+        if (totalPages <= maxVisiblePages) {
+            // Show all pages if they fit
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // Calculate range around current page
+            const halfVisible = Math.floor(maxVisiblePages / 2);
+            const start = Math.max(1, currentPage - halfVisible);
+            const end = Math.min(totalPages, start + maxVisiblePages - 1);
+            // Adjust start if we're near the end
+            const adjustedStart = end === totalPages ? Math.max(1, end - maxVisiblePages + 1) : start;
+            for (let i = adjustedStart; i <= end; i++) {
+                pages.push(i);
+            }
+        }
+        return pages;
+    }, [currentPage, totalPages, maxVisiblePages]);
+    const handlePrevious = () => {
+        if (currentPage > 1) {
+            const newPage = currentPage - 1;
+            if (onPrevious) {
+                onPrevious(newPage);
+            }
+            onPageChange(newPage);
+        }
+    };
+    const handleNext = () => {
+        if (currentPage < totalPages) {
+            const newPage = currentPage + 1;
+            if (onNext) {
+                onNext(newPage);
+            }
+            onPageChange(newPage);
+        }
+    };
+    const handlePageClick = (page) => {
+        if (page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    const isPreviousDisabled = currentPage === 1;
+    const isNextDisabled = currentPage === totalPages;
+    return (jsxRuntime.jsxs("nav", { "aria-label": ariaLabel, className: styles.root, children: [jsxRuntime.jsx("button", { type: 'button', onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": 'Page précédente', className: styles.navigationButton({ disabled: isPreviousDisabled }), children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), visiblePages.map((page) => {
+                const isActive = page === currentPage;
+                return (jsxRuntime.jsx("button", { type: 'button', onClick: () => handlePageClick(page), "aria-label": `Page ${page}`, "aria-current": isActive ? 'page' : undefined, className: `${styles.pageButton({ disabled: false })} ${isActive ? styles.activePageButton : ''}`, children: page }, page));
+            }), jsxRuntime.jsx("button", { type: 'button', onClick: handleNext, disabled: isNextDisabled, "aria-label": 'Page suivante', className: styles.navigationButton({ disabled: isNextDisabled }), children: jsxRuntime.jsx(ChevronRightIcon, {}) })] }));
+};
+Pagination.displayName = 'Pagination';
+
 exports.Accordion = Accordion;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
@@ -2525,6 +2658,7 @@ exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.Page = Page;
 exports.PageSection = PageSection;
+exports.Pagination = Pagination;
 exports.Select = Select;
 exports.Separator = Separator;
 exports.Skeleton = Skeleton;