@alveole/components 1.9.0 → 2.0.0-alpha

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

@@ -0,0 +1,180 @@
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+const tableau = ({ 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%',
+    },
+    emptyState: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: spacing('6W'),
+    },
+    emptyStateLabel: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['mention-grey'],
+    },
+});
+const entete = ({ color, text, spacing }) => ({
+    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,
+    },
+    // `position: sticky` n'existe pas nativement (RN n'accepte que absolute/relative pour
+    // `position`) : sans le garde-fou web, la valeur traverserait telle quelle jusqu'à iOS/Android.
+    headerRowSticky: {
+        ...(Platform.OS === 'web' ? { position: 'sticky', top: 0, zIndex: 1 } : {}),
+    },
+    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'],
+    },
+});
+const ligne = ({ color }) => ({
+    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'],
+    },
+});
+const cellule = ({ spacing }) => ({
+    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',
+    },
+});
+const colonneDeSelection = ({ spacing }) => ({
+    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'),
+    },
+    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'),
+    },
+});
+export const useStyles = makeStyles(theme => ({
+    ...tableau(theme),
+    ...entete(theme),
+    ...ligne(theme),
+    ...cellule(theme),
+    ...colonneDeSelection(theme),
+}));

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,13 @@
+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;
+    noPadding?: boolean;
+};
+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;AAGlE,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;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAWtD,CAAC"}

package/dist/ui/DataTable/DataTableCell.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { useStyles } from './DataTable.styles';
+import { dataTableCellStyle } from './dataTableCellStyle';
+export const DataTableCell = (props) => {
+    const { align = 'start', width, children, variant = 'body', size = 'sm', onPress, noPadding = false } = props;
+    const styles = useStyles();
+    const aspect = dataTableCellStyle(styles, { variant, size, align, width, noPadding, pressable: onPress != null });
+    return (_jsx(Box, { tag: aspect.tag, onPress: onPress, hoverStyle: aspect.hover, style: aspect.style, 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;AAuB1B,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,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@alveole/theme';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+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/Typography';
+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/DataTableHeaderRow.d.ts

@@ -0,0 +1,14 @@
+import { DataTableColumn, DataTableSize, DataTableSort } from './DataTable.types';
+export type DataTableHeaderRowProps<Row> = {
+    columns: DataTableColumn<Row>[];
+    sort: DataTableSort | null;
+    size: DataTableSize;
+    selectable: boolean;
+    allSelected: boolean;
+    someSelected: boolean;
+    sticky?: boolean;
+    onToggleAll: () => void;
+    onHeaderPress: (column: DataTableColumn<Row>) => void;
+};
+export declare const DataTableHeaderRow: <Row>(props: DataTableHeaderRowProps<Row>) => import("react").JSX.Element;
+//# sourceMappingURL=DataTableHeaderRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeaderRow.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableHeaderRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlF,MAAM,MAAM,uBAAuB,CAAC,GAAG,IAAI;IACzC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CACvD,CAAC;AAcF,eAAO,MAAM,kBAAkB,GAAI,GAAG,EAAG,OAAO,uBAAuB,CAAC,GAAG,CAAC,gCAoC3E,CAAC"}

package/dist/ui/DataTable/DataTableHeaderRow.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
+import { useStyles } from './DataTable.styles';
+import { DataTableHeaderCell } from './DataTableHeaderCell';
+const headerSelectionCellStyleBySize = {
+    sm: 'headerSelectionCellSm',
+    md: 'headerSelectionCellMd',
+    lg: 'headerSelectionCellLg',
+};
+const headerRowStyleBySize = {
+    sm: 'headerRowSm',
+    md: 'headerRowMd',
+    lg: 'headerRowLg',
+};
+export const DataTableHeaderRow = (props) => {
+    const { columns, sort, size, selectable, allSelected, someSelected, sticky, onToggleAll, onHeaderPress } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "data-table-header-row", style: [styles.headerRow, styles[headerRowStyleBySize[size]], sticky && styles.headerRowSticky], children: [selectable && (_jsx(Box, { tag: "data-table-header-selection-cell", style: [styles.headerSelectionCell, styles[headerSelectionCellStyleBySize[size]]], children: _jsx(CheckboxContainer, { id: "data-table--select-all", "aria-label": "Tout s\u00E9lectionner", variant: "small", checked: someSelected ? 'indeterminate' : allSelected, onCheckedChange: onToggleAll, children: _jsx(CheckboxIndicator, { variant: "small", indeterminate: someSelected }) }) })), columns.map(column => (_jsx(DataTableHeaderCell, { column: column, sortDirection: sort?.columnId === column.id ? sort.direction : undefined, size: size, onPress: () => onHeaderPress(column) }, column.id)))] }));
+};

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":"AA4DA,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,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@alveole/theme';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+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,gCAoD/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/Box';
+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`, "aria-label": `Sélectionner la ligne ${rowIndex + 1}`, 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/DataTableRows.d.ts

@@ -0,0 +1,14 @@
+import { DataTableColumn, DataTableSize } from './DataTable.types';
+export type DataTableRowsProps<Row> = {
+    data: Row[];
+    rowKeys: string[];
+    columns: DataTableColumn<Row>[];
+    selectable: boolean;
+    selectedKeys: string[];
+    size: DataTableSize;
+    hasFooter: boolean;
+    onRowSelectedChange: (rowKey: string, checked: boolean) => void;
+    onRowPress?: (row: Row, index: number) => void;
+};
+export declare const DataTableRows: <Row>(props: DataTableRowsProps<Row>) => import("react").JSX.Element;
+//# sourceMappingURL=DataTableRows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRows.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTableRows.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,kBAAkB,CAAC,GAAG,IAAI;IACpC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,GAAG,EAAG,OAAO,kBAAkB,CAAC,GAAG,CAAC,gCAyBjE,CAAC"}

package/dist/ui/DataTable/DataTableRows.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataTableRow } from './DataTableRow';
+export const DataTableRows = (props) => {
+    const { data, rowKeys, columns, selectable, selectedKeys, size, hasFooter, onRowSelectedChange, onRowPress } = props;
+    return (_jsx(_Fragment, { children: data.map((row, index) => {
+            const rowKey = rowKeys[index];
+            return (_jsx(DataTableRow, { row: row, rowIndex: index, rowKey: rowKey, columns: columns, selectable: selectable, selected: selectedKeys.includes(rowKey), size: size, noBorderBottom: !hasFooter && index === data.length - 1, onSelectedChange: checked => onRowSelectedChange(rowKey, checked), onPress: onRowPress ? () => onRowPress(row, index) : undefined }, rowKey));
+        }) }));
+};

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

@@ -0,0 +1,57 @@
+import type { useStyles } from './DataTable.styles';
+import { DataTableAlign, DataTableSize } from './DataTable.types';
+type DataTableStyles = ReturnType<typeof useStyles>;
+export type DataTableCellState = {
+    variant: 'header' | 'body';
+    size: DataTableSize;
+    align: DataTableAlign;
+    width?: number;
+    noPadding: boolean;
+    pressable: boolean;
+};
+/**
+ * L'aspect d'une cellule : son retrait selon la variante et la taille, son alignement, sa
+ * largeur fixe ou elastique, et ce que le survol en dit quand elle est cliquable. Ces regles
+ * s'empilaient en ternaires dans le rendu, ou elles ne disaient pas leur nom et ou elles
+ * faisaient a elles seules toute la complexite du composant.
+ */
+export declare const dataTableCellStyle: (styles: DataTableStyles, { variant, size, align, width, noPadding, pressable }: DataTableCellState) => {
+    tag: "data-table-header-cell" | "data-table-cell";
+    hover: {
+        opacity: number;
+    } | undefined;
+    style: ({
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+    } | {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    } | {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        minWidth: number;
+    } | {
+        justifyContent: "flex-end";
+    } | {
+        width?: undefined;
+        flex?: undefined;
+        cursor?: undefined;
+    } | {
+        width: number;
+        flex: "none";
+        cursor?: undefined;
+    } | {
+        flex: number;
+        width?: undefined;
+        cursor?: undefined;
+    } | {
+        cursor: string;
+        width?: undefined;
+        flex?: undefined;
+    })[];
+};
+export {};
+//# sourceMappingURL=dataTableCellStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableCellStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/dataTableCellStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElE,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,eAAe,EACvB,uDAAuD,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoB1E,CAAC"}

package/dist/ui/DataTable/dataTableCellStyle.js

@@ -0,0 +1,25 @@
+/**
+ * L'aspect d'une cellule : son retrait selon la variante et la taille, son alignement, sa
+ * largeur fixe ou elastique, et ce que le survol en dit quand elle est cliquable. Ces regles
+ * s'empilaient en ternaires dans le rendu, ou elles ne disaient pas leur nom et ou elles
+ * faisaient a elles seules toute la complexite du composant.
+ */
+export const dataTableCellStyle = (styles, { variant, size, align, width, noPadding, pressable }) => {
+    const retrait = {
+        header: { sm: styles.headerCellSm, md: styles.headerCellMd, lg: styles.headerCellLg },
+        body: { sm: styles.cellSm, md: styles.cellMd, lg: styles.cellLg },
+    }[variant][size];
+    return {
+        tag: variant === 'header' ? 'data-table-header-cell' : 'data-table-cell',
+        // Le survol ne repond que la ou il y a quelque chose a presser.
+        hover: pressable ? { opacity: 0.8 } : undefined,
+        style: [
+            variant === 'header' ? styles.headerCell : styles.cell,
+            noPadding ? {} : retrait,
+            align === 'end' ? styles.cellAlignEnd : {},
+            // Une largeur donnee fige la colonne ; sans elle, les cellules se partagent la place.
+            width !== undefined ? { width, flex: 'none' } : { flex: 1 },
+            pressable ? { cursor: 'pointer' } : {},
+        ],
+    };
+};

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/DataTable/selectionDataTable.d.ts

@@ -0,0 +1,8 @@
+/** Dérive les indicateurs de la case "tout sélectionner" à partir des lignes et clés sélectionnées. */
+export declare const etatSelectionDataTable: (rowKeys: string[], selectedKeys: string[], selectable: boolean) => {
+    allSelected: boolean;
+    someSelected: boolean;
+};
+export declare const clesApresBasculeTout: (rowKeys: string[], allSelected: boolean) => string[];
+export declare const clesApresBasculeLigne: (selectedKeys: string[], rowKey: string, checked: boolean) => string[];
+//# sourceMappingURL=selectionDataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectionDataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/selectionDataTable.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,eAAO,MAAM,sBAAsB,GACjC,SAAS,MAAM,EAAE,EACjB,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,KAClB;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAI/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,EAAE,EAAE,aAAa,OAAO,KAAG,MAAM,EAEpF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,cAAc,MAAM,EAAE,EAAE,QAAQ,MAAM,EAAE,SAAS,OAAO,KAAG,MAAM,EAEtG,CAAC"}