@aurora-ds/components 0.17.17 → 0.18.0

package/dist/cjs/resources/Icons.d.ts

@@ -1,9 +1,10 @@
 import { CalendarIcon } from '@resources/icons/CalendarIcon.tsx';
 import { ChevronDownIcon } from '@resources/icons/ChevronDownIcon.tsx';
+import { ChevronLeftIcon } from '@resources/icons/ChevronLeftIcon.tsx';
 import { ChevronRightIcon } from '@resources/icons/ChevronRightIcon.tsx';
 import { CloseIcon } from '@resources/icons/CloseIcon.tsx';
 import { EyeIcon } from '@resources/icons/EyeIcon.tsx';
 import { EyeOffIcon } from '@resources/icons/EyeOffIcon.tsx';
 import { InfoIcon } from '@resources/icons/InfoIcon.tsx';
 import { MoreHorizontalIcon } from '@resources/icons/MoreHorizontalIcon.tsx';
-export { CalendarIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon };
+export { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon };

package/dist/cjs/resources/icons/ChevronLeftIcon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronLeftIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/index.js

@@ -940,25 +940,29 @@ const CalendarIcon = () => {
 };
 
 const ChevronDownIcon = () => {
-    return (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: jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+    return (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: jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+};
+
+const ChevronLeftIcon = () => {
+    return (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: jsx("path", { d: 'm15 18-6-6 6-6' }) }));
 };
 
 const ChevronRightIcon = () => {
-    return (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: jsx("path", { d: 'm9 18 6-6-6-6' }) }));
+    return (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: jsx("path", { d: 'm9 18 6-6-6-6' }) }));
 };
 
 const CloseIcon = () => (jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { d: 'M12 4L4 12M4 4l8 8', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
 
 const EyeIcon = () => {
-    return (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: [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' }), jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
+    return (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: [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' }), jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
 };
 
 const EyeOffIcon = () => {
-    return (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: [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' }), jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), 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' }), jsx("path", { d: 'm2 2 20 20' })] }));
+    return (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: [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' }), jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), 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' }), jsx("path", { d: 'm2 2 20 20' })] }));
 };
 
 const MoreHorizontalIcon = () => {
-    return (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: [jsx("circle", { cx: '12', cy: '12', r: '1' }), jsx("circle", { cx: '19', cy: '12', r: '1' }), jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
+    return (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: [jsx("circle", { cx: '12', cy: '12', r: '1' }), jsx("circle", { cx: '19', cy: '12', r: '1' }), jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
 
 /**
@@ -2174,15 +2178,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 : 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 createPortal(jsx(Fragment, { children: isVisible ? (jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: jsxs(Wrapper, { ...wrapperProps, children: [jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsx(Text, { variant: 'h3', children: label }), !action && (jsx(IconButton, { icon: jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), 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 = (jsxs(Fragment$1, { children: [jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsx(Text, { variant: 'h3', children: label }), !action && (jsx(IconButton, { icon: jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }));
+    return createPortal(jsx(Fragment, { children: isVisible ? (jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: isForm ? (jsx(Form, { onSubmit: (e) => { e.preventDefault(); safeInvokeAction(); }, children: body })) : (jsx(Fragment, { children: body })) }) })) : null }), document.body);
 };
 Modal.displayName = 'Modal';
 
@@ -2498,5 +2503,134 @@ const TabItem = ({ label, isActive = false, onClick, startIcon, endIcon }) => {
 };
 TabItem.displayName = 'TabItem';
 
-export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
+const PAGINATION_STYLES = 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 = 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 (jsxs("nav", { "aria-label": ariaLabel, className: styles.root, children: [jsx("button", { type: 'button', onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": 'Page précédente', className: styles.navigationButton({ disabled: isPreviousDisabled }), children: jsx(ChevronLeftIcon, {}) }), visiblePages.map((page) => {
+                const isActive = page === currentPage;
+                return (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));
+            }), jsx("button", { type: 'button', onClick: handleNext, disabled: isNextDisabled, "aria-label": 'Page suivante', className: styles.navigationButton({ disabled: isNextDisabled }), children: jsx(ChevronRightIcon, {}) })] }));
+};
+Pagination.displayName = 'Pagination';
+
+export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
 //# sourceMappingURL=index.js.map