@alveole/components 1.9.0 → 1.10.0

package/dist/ui/DataTable/DataTable.styles.d.ts

@@ -0,0 +1,175 @@
+export declare const useStyles: () => {
+    table: {
+        display: "flex";
+        flexDirection: "column";
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        overflow: "hidden";
+        backgroundColor: string;
+    };
+    scrollContent: {
+        display: "flex";
+        flexDirection: "column";
+        flexGrow: number;
+        minWidth: string;
+    };
+    headerRow: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        backgroundColor: string;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    headerRowSm: {
+        minHeight: number;
+    };
+    headerRowMd: {
+        minHeight: number;
+    };
+    headerRowLg: {
+        minHeight: number;
+    };
+    headerCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+    };
+    headerCellSm: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerCellMd: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerCellLg: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerLabel: {
+        color: string;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    headerLabelActive: {
+        color: string;
+    };
+    headerSelectionCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    headerSelectionCellSm: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerSelectionCellMd: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    headerSelectionCellLg: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    row: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        backgroundColor: string;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    rowSm: {
+        minHeight: number;
+    };
+    rowMd: {
+        minHeight: number;
+    };
+    rowLg: {
+        minHeight: number;
+    };
+    rowHoverable: {
+        cursor: "pointer";
+    };
+    rowHover: {
+        backgroundColor: string;
+    };
+    rowSelected: {
+        backgroundColor: string;
+    };
+    cell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        minWidth: number;
+    };
+    cellSm: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellMd: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellLg: {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    cellAlignEnd: {
+        justifyContent: "flex-end";
+    };
+    cellText: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    selectionCell: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    selectionCellSm: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    selectionCellMd: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    selectionCellLg: {
+        width: number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    emptyState: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        padding: string | number;
+    };
+    emptyStateLabel: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=DataTable.styles.d.ts.map

package/dist/ui/DataTable/DataTable.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKnB,CAAC"}

package/dist/ui/DataTable/DataTable.styles.js

@@ -0,0 +1,163 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
+    table: {
+        display: 'flex',
+        flexDirection: 'column',
+        borderWidth: 1,
+        borderColor: color.light.border['default-grey'],
+        borderRadius: radius('md'),
+        overflow: 'hidden',
+        backgroundColor: color.light.background['default-grey'],
+    },
+    scrollContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        minWidth: '100%',
+    },
+    headerRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        backgroundColor: color.light.background['alt-grey'],
+        borderBottomWidth: 1,
+        borderBottomColor: color.light.border['default-grey'],
+    },
+    headerRowSm: {
+        minHeight: 28,
+    },
+    headerRowMd: {
+        minHeight: 32,
+    },
+    headerRowLg: {
+        minHeight: 36,
+    },
+    headerCell: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1V'),
+    },
+    headerCellSm: {
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+    },
+    headerCellMd: {
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+    },
+    headerCellLg: {
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+    },
+    headerLabel: {
+        ...text['Corps de texte'].XS.SemiBold,
+        color: color.light.text['mention-grey'],
+    },
+    headerLabelActive: {
+        color: color.light.text['default-grey'],
+    },
+    headerSelectionCell: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerSelectionCellSm: {
+        width: 40,
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+    },
+    headerSelectionCellMd: {
+        width: 44,
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+    },
+    headerSelectionCellLg: {
+        width: 48,
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+    },
+    row: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        backgroundColor: color.light.background['default-grey'],
+        borderBottomWidth: 1,
+        borderBottomColor: color.light.border['default-grey'],
+    },
+    rowSm: {
+        minHeight: 28,
+    },
+    rowMd: {
+        minHeight: 44,
+    },
+    rowLg: {
+        minHeight: 52,
+    },
+    rowHoverable: {
+        cursor: 'pointer',
+    },
+    rowHover: {
+        backgroundColor: color.light.background['alt-grey'],
+    },
+    rowSelected: {
+        backgroundColor: color.light.background['action-low-primary'],
+    },
+    cell: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+    },
+    cellSm: {
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+    },
+    cellMd: {
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+    },
+    cellLg: {
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+    },
+    cellAlignEnd: {
+        justifyContent: 'flex-end',
+    },
+    cellText: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+    },
+    selectionCell: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    selectionCellSm: {
+        width: 40,
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+    },
+    selectionCellMd: {
+        width: 44,
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+    },
+    selectionCellLg: {
+        width: 48,
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+    },
+    emptyState: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: spacing('6W'),
+    },
+    emptyStateLabel: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['mention-grey'],
+    },
+}));

package/dist/ui/DataTable/DataTable.types.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type DataTableAlign = 'start' | 'end';
+/** Densité du tableau : influence les paddings des cellules (en-têtes, corps, colonne de sélection). */
+export type DataTableSize = 'sm' | 'md' | 'lg';
+export type DataTableSortDirection = 'asc' | 'desc';
+export type DataTableSort = {
+    columnId: string;
+    direction: DataTableSortDirection;
+};
+export type DataTableColumn<Row> = {
+    /** Identifiant unique de la colonne, utilisé pour le tri. */
+    id: string;
+    header: React.ReactNode;
+    renderCell: (row: Row, rowIndex: number) => React.ReactNode;
+    align?: DataTableAlign;
+    sortable?: boolean;
+    /** Largeur fixe en px. Sans valeur, la colonne se répartit l'espace disponible (flex: 1). */
+    width?: number;
+};
+//# sourceMappingURL=DataTable.types.d.ts.map

package/dist/ui/DataTable/DataTable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,wGAAwG;AACxG,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,sBAAsB,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,GAAG,IAAI;IACjC,6DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/ui/DataTable/DataTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/DataTable/DataTableCell.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DataTableAlign, DataTableSize } from './DataTable.types';
+export type DataTableCellProps = {
+    align?: DataTableAlign;
+    width?: number;
+    children: React.ReactNode;
+    variant?: 'header' | 'body';
+    size?: DataTableSize;
+    onPress?: () => void;
+};
+export declare const DataTableCell: (props: DataTableCellProps) => React.JSX.Element;
+//# sourceMappingURL=DataTableCell.d.ts.map

package/dist/ui/DataTable/DataTableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAyBtD,CAAC"}

package/dist/ui/DataTable/DataTableCell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { useStyles } from './DataTable.styles';
+export const DataTableCell = (props) => {
+    const { align = 'start', width, children, variant = 'body', size = 'sm', onPress } = props;
+    const styles = useStyles();
+    const paddingStyles = {
+        header: { sm: styles.headerCellSm, md: styles.headerCellMd, lg: styles.headerCellLg },
+        body: { sm: styles.cellSm, md: styles.cellMd, lg: styles.cellLg },
+    }[variant][size];
+    return (_jsx(Box, { tag: variant === 'header' ? 'data-table-header-cell' : 'data-table-cell', onPress: onPress, hoverStyle: onPress ? { opacity: 0.8 } : undefined, style: [
+            variant === 'header' ? styles.headerCell : styles.cell,
+            paddingStyles,
+            align === 'end' ? styles.cellAlignEnd : {},
+            width !== undefined ? { width, flex: 'none' } : { flex: 1 },
+            onPress ? { cursor: 'pointer' } : {},
+        ], children: children }));
+};

package/dist/ui/DataTable/DataTableFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type DataTableFooterProps = {
+    /** Ex : "21-40 sur 70" */
+    counter?: React.ReactNode;
+    children?: React.ReactNode;
+};
+export declare const DataTableFooter: (props: DataTableFooterProps) => React.JSX.Element;
+//# sourceMappingURL=DataTableFooter.d.ts.map

package/dist/ui/DataTable/DataTableFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,MAAM,MAAM,oBAAoB,GAAG;IACjC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAU1D,CAAC"}

package/dist/ui/DataTable/DataTableFooter.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@alveole/theme';
+import { Box, Typography } from '../../core';
+const useFooterStyles = makeStyles(({ color, text, spacing }) => ({
+    footer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: spacing('2W'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
+        backgroundColor: color.light.background['default-grey'],
+    },
+    counter: {
+        ...text['Corps de texte'].XS.Regular,
+        color: color.light.text['mention-grey'],
+    },
+}));
+export const DataTableFooter = (props) => {
+    const { counter, children } = props;
+    const styles = useFooterStyles();
+    return (_jsxs(Box, { tag: "data-table-footer", style: styles.footer, children: [_jsx(Box, { children: typeof counter === 'string' ? _jsx(Typography, { style: styles.counter, children: counter }) : counter }), _jsx(Box, { children: children })] }));
+};

package/dist/ui/DataTable/DataTableHeaderCell.d.ts

@@ -0,0 +1,9 @@
+import { DataTableColumn, DataTableSize, DataTableSortDirection } from './DataTable.types';
+export type DataTableHeaderCellProps<Row> = {
+    column: DataTableColumn<Row>;
+    sortDirection?: DataTableSortDirection;
+    size?: DataTableSize;
+    onPress?: () => void;
+};
+export declare const DataTableHeaderCell: <Row>(props: DataTableHeaderCellProps<Row>) => import("react").JSX.Element;
+//# sourceMappingURL=DataTableHeaderCell.d.ts.map

package/dist/ui/DataTable/DataTableHeaderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeaderCell.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableHeaderCell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3F,MAAM,MAAM,wBAAwB,CAAC,GAAG,IAAI;IAC1C,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,GAAG,EAAG,OAAO,wBAAwB,CAAC,GAAG,CAAC,gCA2B7E,CAAC"}

package/dist/ui/DataTable/DataTableHeaderCell.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './DataTable.styles';
+import { DataTableCell } from './DataTableCell';
+export const DataTableHeaderCell = (props) => {
+    const { column, sortDirection, size, onPress } = props;
+    const styles = useStyles();
+    const isSortable = column.sortable === true;
+    const isActive = sortDirection !== undefined;
+    return (_jsxs(DataTableCell, { variant: "header", align: column.align, width: column.width, size: size, onPress: isSortable ? onPress : undefined, children: [_jsx(Typography, { tag: "data-table-header-label", style: [styles.headerLabel, isActive ? styles.headerLabelActive : {}], children: column.header }), isSortable && isActive && (_jsx(LucideIcon, { name: sortDirection === 'asc' ? 'ArrowUp' : 'ArrowDown', size: "xs", color: styles.headerLabelActive.color }))] }));
+};

package/dist/ui/DataTable/DataTablePagination.d.ts

@@ -0,0 +1,12 @@
+export type DataTablePaginationProps = {
+    /** Page courante, 1-indexée. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Nombre maximum de numéros de page affichés simultanément. */
+    maxVisiblePages?: number;
+};
+export declare const DataTablePagination: (props: DataTablePaginationProps) => import("react").JSX.Element;
+//# sourceMappingURL=DataTablePagination.d.ts.map

package/dist/ui/DataTable/DataTablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA2DA,MAAM,MAAM,wBAAwB,GAAG;IACrC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,gCAiDlE,CAAC"}

package/dist/ui/DataTable/DataTablePagination.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@alveole/theme';
+import { Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
+    pagination: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1W'),
+    },
+    navButton: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1W'),
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
+        borderRadius: radius('sm'),
+        cursor: 'pointer',
+    },
+    navButtonDisabled: {
+        opacity: 0.4,
+        cursor: 'default',
+    },
+    navLabel: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.light.text['default-grey'],
+    },
+    pages: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1,5V'),
+    },
+    pageButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 32,
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
+        borderRadius: radius('sm'),
+        cursor: 'pointer',
+    },
+    pageButtonActive: {
+        backgroundColor: color.light.background['active-primary'],
+    },
+    pageLabel: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+    },
+    pageLabelActive: {
+        color: color.light.text['inverted-grey'],
+    },
+}));
+const getVisiblePages = (page, pageCount, maxVisiblePages) => {
+    if (pageCount <= maxVisiblePages)
+        return Array.from({ length: pageCount }, (_, index) => index + 1);
+    const half = Math.floor(maxVisiblePages / 2);
+    let start = Math.max(1, page - half);
+    const end = Math.min(pageCount, start + maxVisiblePages - 1);
+    start = Math.max(1, end - maxVisiblePages + 1);
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+};
+export const DataTablePagination = (props) => {
+    const { page, pageCount, onPageChange, previousLabel = 'Précédent', nextLabel = 'Suivant', maxVisiblePages = 10, } = props;
+    const styles = useStyles();
+    const canGoPrevious = page > 1;
+    const canGoNext = page < pageCount;
+    const visiblePages = getVisiblePages(page, pageCount, maxVisiblePages);
+    return (_jsxs(Box, { tag: "data-table-pagination", style: styles.pagination, children: [_jsxs(Box, { onPress: canGoPrevious ? () => onPageChange(page - 1) : undefined, style: [styles.navButton, !canGoPrevious ? styles.navButtonDisabled : {}], children: [_jsx(LucideIcon, { name: "ChevronLeft", size: "sm", color: styles.navLabel.color }), _jsx(Typography, { style: styles.navLabel, children: previousLabel })] }), _jsx(Box, { style: styles.pages, children: visiblePages.map(pageNumber => {
+                    const isActive = pageNumber === page;
+                    return (_jsx(Box, { onPress: () => onPageChange(pageNumber), style: [styles.pageButton, isActive ? styles.pageButtonActive : {}], children: _jsx(Typography, { style: [styles.pageLabel, isActive ? styles.pageLabelActive : {}], children: pageNumber }) }, pageNumber));
+                }) }), _jsxs(Box, { onPress: canGoNext ? () => onPageChange(page + 1) : undefined, style: [styles.navButton, !canGoNext ? styles.navButtonDisabled : {}], children: [_jsx(Typography, { style: styles.navLabel, children: nextLabel }), _jsx(LucideIcon, { name: "ChevronRight", size: "sm", color: styles.navLabel.color })] })] }));
+};

package/dist/ui/DataTable/DataTableRow.d.ts

@@ -0,0 +1,16 @@
+import { DataTableColumn, DataTableSize } from './DataTable.types';
+export type DataTableRowProps<Row> = {
+    row: Row;
+    rowIndex: number;
+    rowKey: string;
+    columns: DataTableColumn<Row>[];
+    selectable?: boolean;
+    selected?: boolean;
+    size?: DataTableSize;
+    /** Retire la bordure basse (dernière ligne quand le tableau n'a pas de footer, pour éviter un double trait avec la bordure du conteneur). */
+    noBorderBottom?: boolean;
+    onSelectedChange?: (checked: boolean) => void;
+    onPress?: () => void;
+};
+export declare const DataTableRow: <Row>(props: DataTableRowProps<Row>) => import("react").JSX.Element;
+//# sourceMappingURL=DataTableRow.d.ts.map

package/dist/ui/DataTable/DataTableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRow.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,iBAAiB,CAAC,GAAG,IAAI;IACnC,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6IAA6I;IAC7I,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,GAAG,EAAG,OAAO,iBAAiB,CAAC,GAAG,CAAC,gCAmD/D,CAAC"}

package/dist/ui/DataTable/DataTableRow.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
+import { useStyles } from './DataTable.styles';
+import { DataTableCell } from './DataTableCell';
+const selectionCellStyleBySize = {
+    sm: 'selectionCellSm',
+    md: 'selectionCellMd',
+    lg: 'selectionCellLg',
+};
+const rowStyleBySize = {
+    sm: 'rowSm',
+    md: 'rowMd',
+    lg: 'rowLg',
+};
+export const DataTableRow = (props) => {
+    const { row, rowIndex, rowKey, columns, selectable, selected, size = 'sm', noBorderBottom, onSelectedChange, onPress, } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "data-table-row", onPress: onPress, hoverStyle: onPress ? styles.rowHover : {}, style: [
+            styles.row,
+            styles[rowStyleBySize[size]],
+            selected ? styles.rowSelected : {},
+            onPress ? styles.rowHoverable : {},
+            noBorderBottom ? { borderBottomWidth: 0 } : {},
+        ], children: [selectable && (_jsx(Box, { tag: "data-table-selection-cell", style: [styles.selectionCell, styles[selectionCellStyleBySize[size]]], onPress: event => event.stopPropagation(), children: _jsx(CheckboxContainer, { id: `${rowKey}--checkbox`, variant: "small", checked: selected, onCheckedChange: checked => onSelectedChange?.(checked === true), children: _jsx(CheckboxIndicator, { variant: "small" }) }) })), columns.map(column => (_jsx(DataTableCell, { align: column.align, width: column.width, size: size, children: column.renderCell(row, rowIndex) }, column.id)))] }));
+};

package/dist/ui/DataTable/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DataTable';
+export * from './DataTable.types';
+export * from './DataTableFooter';
+export * from './DataTablePagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/ui/DataTable/index.js

@@ -0,0 +1,4 @@
+export * from './DataTable';
+export * from './DataTable.types';
+export * from './DataTableFooter';
+export * from './DataTablePagination';

package/dist/ui/index.d.ts

@@ -10,6 +10,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Counter';
+export * from './DataTable';
 export * from './DateInput';
 export * from './Divider';
 export * from './DocumentViewer';

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -10,6 +10,7 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Counter';
+export * from './DataTable';
 export * from './DateInput';
 export * from './Divider';
 export * from './DocumentViewer';