@apotech-os/ui-sdk 0.10.0 → 2.0.0

package/dist/index.js

@@ -1,14 +1,22 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
+import * as React2 from 'react';
 import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { Menu } from '@base-ui/react/menu';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Select as Select$1 } from '@base-ui/react/select';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { fr } from 'date-fns/locale/fr';
+import { DayPicker } from 'react-day-picker';
+import { subYears, subMonths, endOfMonth, startOfMonth, addQuarters, endOfQuarter, startOfQuarter, endOfYear, startOfYear, differenceInCalendarDays, subDays, parse, format, addDays } from 'date-fns';
+import { BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, FunnelChart as FunnelChart$1, Funnel, Cell, LabelList, ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } from 'recharts';
 
 // src/cn.ts
 function cn(...inputs) {
@@ -295,7 +303,7 @@ function downloadCsv(rows, filename) {
   downloadBlob(blob, filename);
 }
 function triggerProps(trigger) {
-  if (React.isValidElement(trigger)) {
+  if (React2.isValidElement(trigger)) {
     return { render: trigger, nativeButton: trigger.type === "button" || trigger.type === Button };
   }
   return { render: /* @__PURE__ */ jsx("span", { children: trigger }), nativeButton: false };
@@ -309,7 +317,7 @@ var buttonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        destructive: "bg-destructive text-white hover:bg-destructive/90"
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -321,7 +329,7 @@ var buttonVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React.forwardRef(
+var Button = React2.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("button", { ref, className: cn(buttonVariants({ variant, size, className })), ...props })
 );
 Button.displayName = "Button";
@@ -375,7 +383,7 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
 }
-var Input = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
+var Input = React2.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     type,
@@ -433,21 +441,55 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
   return /* @__PURE__ */ jsx("td", { className: cn("p-4 align-middle", className), ...props });
 }
-var Select = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-    "select",
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  items,
+  placeholder = "Choisir\u2026",
+  disabled,
+  name,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Root,
     {
-      ref,
-      className: cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children
+      items,
+      value,
+      defaultValue,
+      onValueChange: (next) => onValueChange?.(String(next)),
+      disabled,
+      name,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select$1.Trigger,
+          {
+            className: cn(
+              "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+              className
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
+              /* @__PURE__ */ jsx(Select$1.Icon, { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "\u25BE" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { className: "z-50", sideOffset: 4, children: /* @__PURE__ */ jsx(Select$1.Popup, { className: "max-h-72 min-w-(--anchor-width) overflow-auto rounded-md border bg-card p-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsx(
+          Select$1.Item,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            className: "cursor-pointer rounded px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            children: /* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label })
+          },
+          item.value
+        )) }) }) })
+      ]
     }
-  )
-);
-Select.displayName = "Select";
+  );
+}
 function Tabs({ defaultValue, value, onValueChange, className, children }) {
   return /* @__PURE__ */ jsx(
     Tabs$1.Root,
@@ -500,7 +542,7 @@ function TabsContent({
 }
 function Modal({ open, onClose, title, children, className }) {
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Close", className: "fixed inset-0 z-50 bg-foreground/40" }),
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Close", className: "fixed inset-0 z-50 bg-overlay" }),
     /* @__PURE__ */ jsxs(
       Dialog.Popup,
       {
@@ -541,7 +583,7 @@ function Spinner({ className, size = "md" }) {
     }
   );
 }
-var Link = React.forwardRef(
+var Link = React2.forwardRef(
   ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
     "a",
     {
@@ -580,33 +622,6 @@ function Switch({
     }
   );
 }
-function DateRangePicker({ value, onChange, className, disabled }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "date",
-        disabled,
-        value: value.from,
-        max: value.to || void 0,
-        onChange: (e) => onChange({ ...value, from: e.target.value }),
-        className: "flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "\u2192" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "date",
-        disabled,
-        value: value.to,
-        min: value.from || void 0,
-        onChange: (e) => onChange({ ...value, to: e.target.value }),
-        className: "flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      }
-    )
-  ] });
-}
 function IconX({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -660,43 +675,69 @@ function IconCheck({ className }) {
     }
   );
 }
-var Textarea = React.forwardRef(
-  function Textarea2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref,
-        className: cn(
-          "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-var Checkbox = React.forwardRef(
-  function Checkbox2({ className, label, onCheckedChange, ...props }, ref) {
-    const input = /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        className: cn(
-          "size-4 shrink-0 cursor-pointer rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        onChange: (e) => onCheckedChange?.(e.target.checked),
-        ...props
-      }
-    );
-    if (!label) return input;
-    return /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm", children: [
-      input,
-      /* @__PURE__ */ jsx("span", { children: label })
-    ] });
-  }
-);
+var Textarea = React2.forwardRef(function Textarea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      className: cn(
+        "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Checkbox({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  label,
+  name,
+  className,
+  ...props
+}) {
+  const labelId = React2.useId();
+  const control = React2.useRef(null);
+  const box = /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      ref: control,
+      "aria-labelledby": label ? labelId : void 0,
+      checked,
+      defaultChecked,
+      onCheckedChange: (next) => onCheckedChange?.(next),
+      disabled,
+      name,
+      className: cn(
+        "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded border border-input text-primary-foreground transition-colors data-[checked]:border-primary data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "text-[10px] leading-none", children: "\u2713" })
+    }
+  );
+  if (!label) return box;
+  return (
+    // Not a wrapping <label>: Base UI would associate it AND keep its own label,
+    // so the text and the control would both answer to the same name and
+    // `getByLabelText` would go ambiguous. Pointing `aria-labelledby` at the text
+    // names the control once; the click handler keeps the label clickable.
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-sm", children: [
+      box,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: labelId,
+          className: "cursor-pointer",
+          onClick: () => control.current?.click(),
+          children: label
+        }
+      )
+    ] })
+  );
+}
 function SidePanel({
   open,
   onClose,
@@ -706,7 +747,7 @@ function SidePanel({
   className
 }) {
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Fermer", className: "fixed inset-0 z-50 bg-foreground/40" }),
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Fermer", className: "fixed inset-0 z-50 bg-overlay" }),
     /* @__PURE__ */ jsxs(
       Dialog.Popup,
       {
@@ -744,9 +785,9 @@ function CopyButton({
   size = "sm",
   className
 }) {
-  const [state, setState] = React.useState("idle");
-  const timeout = React.useRef(void 0);
-  React.useEffect(() => () => clearTimeout(timeout.current), []);
+  const [state, setState] = React2.useState("idle");
+  const timeout = React2.useRef(void 0);
+  React2.useEffect(() => () => clearTimeout(timeout.current), []);
   async function copy() {
     const ok = await copyToClipboard(value);
     setState(ok ? "copied" : "error");
@@ -818,6 +859,1286 @@ function DropdownMenu({ trigger, items, align = "end", className }) {
     ) }) })
   ] });
 }
+var EMPTY_STATE = {
+  search: "",
+  sort: null,
+  filters: {},
+  hidden: [],
+  selected: []
+};
+var MIN_COLUMN_WIDTH_PX = 64;
+var DEFAULT_VIRTUALIZE_FROM = 100;
+var ROW_HEIGHT_PX = 53;
+var VIRTUAL_VIEWPORT_PX = 640;
+function useDataTableState(controlled, initial, onStateChange) {
+  const [internal, setInternal] = React2.useState({ ...EMPTY_STATE, ...initial });
+  const state = React2.useMemo(
+    () => ({ ...EMPTY_STATE, ...initial, ...internal, ...controlled }),
+    [controlled, initial, internal]
+  );
+  const patch = (next) => {
+    const merged = { ...state, ...next };
+    setInternal(merged);
+    onStateChange?.(merged);
+  };
+  return [state, patch];
+}
+function DataTable({
+  columns,
+  rows,
+  rowId,
+  state: controlled,
+  defaultState,
+  onStateChange,
+  facets = [],
+  searchPlaceholder = "Rechercher\u2026",
+  selectable = false,
+  onRowClick,
+  pagination,
+  manual = false,
+  loading = false,
+  error,
+  empty = "Aucun r\xE9sultat.",
+  virtualizeFrom = DEFAULT_VIRTUALIZE_FROM,
+  className
+}) {
+  const [state, patch] = useDataTableState(controlled, defaultState, onStateChange);
+  const [widths, setWidths] = React2.useState({});
+  const hidden = React2.useMemo(() => new Set(state.hidden), [state.hidden]);
+  const selected = React2.useMemo(() => new Set(state.selected), [state.selected]);
+  const visibleColumns = React2.useMemo(
+    () => columns.filter((column) => !hidden.has(column.key)),
+    [columns, hidden]
+  );
+  const columnDefs = React2.useMemo(
+    () => visibleColumns.map((column) => ({
+      id: column.key,
+      accessorFn: (row) => column.value ? column.value(row) : row[column.key],
+      enableSorting: column.sortable ?? false,
+      size: column.width,
+      cell: ({ row }) => column.cell ? column.cell(row.original) : String(row.original[column.key] ?? "")
+    })),
+    [visibleColumns]
+  );
+  const sorting = React2.useMemo(
+    () => state.sort ? [{ id: state.sort.key, desc: state.sort.direction === "desc" }] : [],
+    [state.sort]
+  );
+  const table = useReactTable({
+    data: rows,
+    columns: columnDefs,
+    state: { sorting, globalFilter: manual ? "" : state.search },
+    getRowId: (row) => rowId(row),
+    getCoreRowModel: getCoreRowModel(),
+    ...manual ? { manualSorting: true, manualFiltering: true } : { getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel() }
+  });
+  const facetedRows = React2.useMemo(() => {
+    const active = Object.entries(state.filters).filter(([, filter]) => isApplied(filter));
+    if (manual || active.length === 0) return table.getRowModel().rows;
+    return table.getRowModel().rows.filter(
+      (row) => active.every(([key, filter]) => {
+        const column = columns.find((c) => c.key === key);
+        const raw = column?.value ? column.value(row.original) : row.original[key];
+        return matches(raw, filter);
+      })
+    );
+  }, [columns, manual, state.filters, table.getRowModel().rows]);
+  const bodyRef = React2.useRef(null);
+  const longEnoughToVirtualise = facetedRows.length > virtualizeFrom;
+  const virtualizer = useVirtualizer({
+    count: facetedRows.length,
+    getScrollElement: () => bodyRef.current,
+    estimateSize: () => ROW_HEIGHT_PX,
+    overscan: 8,
+    enabled: longEnoughToVirtualise
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const virtualise = longEnoughToVirtualise && virtualItems.length > 0;
+  const toggleSort = (key) => {
+    const next = state.sort?.key !== key ? { key, direction: "asc" } : state.sort.direction === "asc" ? { key, direction: "desc" } : null;
+    patch({ sort: next });
+  };
+  const toggleSelected = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    patch({ selected: [...next] });
+  };
+  const allVisibleSelected = facetedRows.length > 0 && facetedRows.every((row) => selected.has(row.id));
+  const toggleAll = () => {
+    patch({ selected: allVisibleSelected ? [] : facetedRows.map((row) => row.id) });
+  };
+  const setFilter = (facetKey, filter) => {
+    const next = { ...state.filters };
+    if (filter) next[facetKey] = filter;
+    else delete next[facetKey];
+    patch({ filters: next });
+  };
+  const renderedRows = virtualise ? virtualItems.map((item) => facetedRows[item.index]) : facetedRows;
+  const spaceAbove = virtualise ? virtualItems[0]?.start ?? 0 : 0;
+  const spaceBelow = virtualise ? virtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1]?.end ?? 0) : 0;
+  const columnCount = visibleColumns.length + (selectable ? 1 : 0);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: state.search,
+          onChange: (event) => patch({ search: event.target.value }),
+          placeholder: searchPlaceholder,
+          "aria-label": searchPlaceholder,
+          className: "h-9 max-w-xs"
+        }
+      ),
+      facets.map((facet) => /* @__PURE__ */ jsx(
+        FacetFilter,
+        {
+          facet,
+          filter: state.filters[facet.key],
+          onChange: (filter) => setFilter(facet.key, filter)
+        },
+        facet.key
+      )),
+      /* @__PURE__ */ jsx(
+        ColumnPicker,
+        {
+          columns,
+          hidden,
+          onToggle: (key) => patch({
+            hidden: hidden.has(key) ? state.hidden.filter((k) => k !== key) : [...state.hidden, key]
+          })
+        }
+      ),
+      selectable && selected.size > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", role: "status", children: [
+        selected.size,
+        " s\xE9lectionn\xE9",
+        selected.size > 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: bodyRef,
+        className: cn("overflow-auto rounded-xl border bg-card", virtualise && "max-h-160"),
+        style: virtualise ? { maxHeight: VIRTUAL_VIEWPORT_PX } : void 0,
+        children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { className: virtualise ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allVisibleSelected,
+                onCheckedChange: toggleAll,
+                "aria-label": "Tout s\xE9lectionner"
+              }
+            ) }),
+            visibleColumns.map((column) => {
+              const label = typeof column.header === "string" ? column.header : column.key;
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  style: { width: widths[column.key] ?? column.width },
+                  className: cn("relative", column.align === "right" && "text-right"),
+                  "aria-sort": !column.sortable ? void 0 : state.sort?.key === column.key ? state.sort.direction === "asc" ? "ascending" : "descending" : "none",
+                  children: [
+                    column.sortable ? /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => toggleSort(column.key),
+                        className: "inline-flex cursor-pointer items-center gap-1 hover:text-foreground",
+                        children: [
+                          column.header,
+                          /* @__PURE__ */ jsx(
+                            SortGlyph,
+                            {
+                              direction: state.sort?.key === column.key ? state.sort.direction : null
+                            }
+                          )
+                        ]
+                      }
+                    ) : column.header,
+                    /* @__PURE__ */ jsx(
+                      ResizeHandle,
+                      {
+                        label,
+                        onResize: (delta, from) => setWidths((current) => ({
+                          ...current,
+                          [column.key]: Math.max(MIN_COLUMN_WIDTH_PX, from + delta)
+                        }))
+                      }
+                    )
+                  ]
+                },
+                column.key
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: error ? /* @__PURE__ */ jsx(StatusRow, { colSpan: columnCount, tone: "error", children: error }) : loading ? /* @__PURE__ */ jsx(SkeletonRows, { columns: columnCount }) : facetedRows.length === 0 ? /* @__PURE__ */ jsx(StatusRow, { colSpan: columnCount, children: empty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            spaceAbove > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: spaceAbove } }),
+            renderedRows.map((row) => /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                "data-state": selected.has(row.id) ? "selected" : void 0,
+                className: onRowClick ? "cursor-pointer" : "hover:bg-transparent",
+                onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+                children: [
+                  selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selected.has(row.id),
+                      onCheckedChange: () => toggleSelected(row.id),
+                      "aria-label": `S\xE9lectionner ${row.id}`
+                    }
+                  ) }),
+                  row.getVisibleCells().map((cell) => {
+                    const column = visibleColumns.find((c) => c.key === cell.column.id);
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        className: column?.align === "right" ? "text-right" : void 0,
+                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      },
+                      cell.id
+                    );
+                  })
+                ]
+              },
+              row.id
+            )),
+            spaceBelow > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: spaceBelow } })
+          ] }) })
+        ] })
+      }
+    ),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          disabled: !pagination.hasPrevious,
+          onClick: pagination.onPrevious,
+          children: "Pr\xE9c\xE9dent"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          disabled: !pagination.hasNext,
+          onClick: pagination.onNext,
+          children: "Suivant"
+        }
+      )
+    ] })
+  ] });
+}
+function ResizeHandle({
+  label,
+  onResize
+}) {
+  const start = (event) => {
+    const header = event.currentTarget.parentElement;
+    if (!header) return;
+    const from = header.getBoundingClientRect().width;
+    const originX = event.clientX;
+    const move = (moveEvent) => onResize(moveEvent.clientX - originX, from);
+    const stop = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", stop);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", stop);
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-resize-handle": label,
+      onPointerDown: start,
+      className: "absolute inset-y-0 right-0 w-1 cursor-col-resize select-none hover:bg-border"
+    }
+  );
+}
+function SortGlyph({ direction }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[10px] leading-none", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" });
+}
+function StatusRow({
+  colSpan,
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan,
+      className: cn(
+        "text-sm",
+        tone === "error" ? "text-status-blocked" : "text-muted-foreground"
+      ),
+      children
+    }
+  ) });
+}
+function SkeletonRows({ columns }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 5 }, (_, row) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columns }, (_2, cell) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, cell)) }, row)) });
+}
+var VALUELESS = /* @__PURE__ */ new Set(["empty", "nempty"]);
+var SINGLE_VALUE = /* @__PURE__ */ new Set([
+  "contains",
+  "ncontains",
+  "gt",
+  "lt",
+  "gte",
+  "lte"
+]);
+var OPERATOR_LABELS = {
+  eq: "est",
+  neq: "n'est pas",
+  contains: "contient",
+  ncontains: "ne contient pas",
+  gt: "sup\xE9rieur \xE0",
+  lt: "inf\xE9rieur \xE0",
+  gte: "sup\xE9rieur ou \xE9gal \xE0",
+  lte: "inf\xE9rieur ou \xE9gal \xE0",
+  empty: "est vide",
+  nempty: "n'est pas vide"
+};
+function isApplied(filter) {
+  if (!filter) return false;
+  return VALUELESS.has(filter.operator) || filter.values.length > 0;
+}
+function compare(value, bound) {
+  if (value === "" || bound === "") return null;
+  const boundNumber = Number(bound);
+  if (!Number.isNaN(boundNumber)) {
+    const valueNumber = Number(value);
+    return Number.isNaN(valueNumber) ? null : valueNumber - boundNumber;
+  }
+  const boundDate = Date.parse(bound);
+  if (!Number.isNaN(boundDate)) {
+    const valueDate = Date.parse(value);
+    return Number.isNaN(valueDate) ? null : valueDate - boundDate;
+  }
+  return value < bound ? -1 : value > bound ? 1 : 0;
+}
+function matches(raw, filter) {
+  const value = raw == null ? "" : String(raw);
+  const [bound = ""] = filter.values;
+  const ordering = compare(value, bound);
+  switch (filter.operator) {
+    case "eq":
+      return filter.values.includes(value);
+    case "neq":
+      return !filter.values.includes(value);
+    case "contains":
+      return value.toLowerCase().includes(bound.toLowerCase());
+    case "ncontains":
+      return !value.toLowerCase().includes(bound.toLowerCase());
+    case "gt":
+      return ordering !== null && ordering > 0;
+    case "lt":
+      return ordering !== null && ordering < 0;
+    case "gte":
+      return ordering !== null && ordering >= 0;
+    case "lte":
+      return ordering !== null && ordering <= 0;
+    case "empty":
+      return value === "";
+    case "nempty":
+      return value !== "";
+  }
+}
+function FacetFilter({
+  facet,
+  filter,
+  onChange
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const operators = facet.operators ?? ["eq"];
+  const operator = filter?.operator ?? operators[0] ?? "eq";
+  const values = filter?.values ?? [];
+  const summary = !isApplied(filter) ? facet.label : VALUELESS.has(operator) ? `${facet.label} \xB7 ${OPERATOR_LABELS[operator]}` : `${facet.label} \xB7 ${values.length}`;
+  const setOperator = (next) => {
+    const sameKind = SINGLE_VALUE.has(next) === SINGLE_VALUE.has(operator);
+    onChange({
+      operator: next,
+      values: VALUELESS.has(next) || !sameKind ? [] : SINGLE_VALUE.has(next) ? values.slice(0, 1) : values
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      trigger: (
+        // Named for what it does: a chip reading just "Nom" tells a screen-reader
+        // user nothing, and collides with the sortable column header of that name.
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", "aria-label": `Filtrer par ${summary}`, children: summary })
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col gap-2", children: [
+        operators.length > 1 && /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: operator,
+            "aria-label": `Op\xE9rateur \u2014 ${facet.label}`,
+            onValueChange: (next) => setOperator(next),
+            items: operators.map((candidate) => ({
+              value: candidate,
+              label: OPERATOR_LABELS[candidate]
+            }))
+          }
+        ),
+        VALUELESS.has(operator) ? null : SINGLE_VALUE.has(operator) || !facet.options ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values[0] ?? "",
+            "aria-label": `Valeur \u2014 ${facet.label}`,
+            onChange: (event) => onChange({ operator, values: event.target.value ? [event.target.value] : [] })
+          }
+        ) : facet.options.map((option) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: values.includes(option.value),
+            onCheckedChange: () => onChange({
+              operator,
+              values: values.includes(option.value) ? values.filter((v) => v !== option.value) : [...values, option.value]
+            }),
+            label: option.label ?? option.value
+          },
+          option.value
+        )),
+        isApplied(filter) && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(null), children: "Effacer" })
+      ] })
+    }
+  );
+}
+function ColumnPicker({
+  columns,
+  hidden,
+  onToggle
+}) {
+  const [open, setOpen] = React2.useState(false);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      align: "end",
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Colonnes" }),
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: columns.map((column) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: !hidden.has(column.key),
+          onCheckedChange: () => onToggle(column.key),
+          label: typeof column.header === "string" ? column.header : column.key
+        },
+        column.key
+      )) })
+    }
+  );
+}
+var PERIOD_PRESETS = [
+  { key: "today", label: "Aujourd'hui" },
+  { key: "yesterday", label: "Hier" },
+  { key: "last7", label: "7 derniers jours" },
+  { key: "last30", label: "30 derniers jours" },
+  { key: "last90", label: "90 derniers jours" },
+  { key: "thisMonth", label: "Mois en cours" },
+  { key: "lastMonth", label: "Mois dernier" },
+  { key: "thisQuarter", label: "Trimestre en cours" },
+  { key: "last12Months", label: "12 derniers mois" },
+  { key: "thisYear", label: "Ann\xE9e en cours" },
+  { key: "all", label: "Tout l'historique" }
+];
+var COMPARE_LABELS = {
+  none: "Aucune",
+  previous_period: "P\xE9riode pr\xE9c\xE9dente",
+  previous_year: "Ann\xE9e pr\xE9c\xE9dente",
+  custom: "Personnalis\xE9e"
+};
+var DAY_FORMAT = "yyyy-MM-dd";
+var toDay = (date) => format(date, DAY_FORMAT);
+var fromDay = (day) => parse(day, DAY_FORMAT, /* @__PURE__ */ new Date());
+var CALENDAR_UNIT = {
+  thisMonth: "month",
+  lastMonth: "month",
+  thisQuarter: "quarter",
+  thisYear: "year"
+};
+function presetRange(preset, today) {
+  const day = toDay(today);
+  switch (preset) {
+    case "today":
+      return { from: day, to: day };
+    case "yesterday": {
+      const yesterday = toDay(subDays(today, 1));
+      return { from: yesterday, to: yesterday };
+    }
+    case "last7":
+      return { from: toDay(subDays(today, 6)), to: day };
+    case "last30":
+      return { from: toDay(subDays(today, 29)), to: day };
+    case "last90":
+      return { from: toDay(subDays(today, 89)), to: day };
+    case "thisMonth":
+      return { from: toDay(startOfMonth(today)), to: toDay(endOfMonth(today)) };
+    case "lastMonth": {
+      const previous = subMonths(today, 1);
+      return { from: toDay(startOfMonth(previous)), to: toDay(endOfMonth(previous)) };
+    }
+    case "thisQuarter":
+      return { from: toDay(startOfQuarter(today)), to: toDay(endOfQuarter(today)) };
+    case "last12Months":
+      return { from: toDay(addDays(subYears(today, 1), 1)), to: day };
+    case "thisYear":
+      return { from: toDay(startOfYear(today)), to: toDay(endOfYear(today)) };
+    case "all":
+      return { to: day };
+    case "custom":
+      return { from: day, to: day };
+  }
+}
+function comparisonRange(preset, range, compare2) {
+  if (compare2 === "none" || compare2 === "custom" || range.from === void 0) return void 0;
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  if (compare2 === "previous_year") {
+    return { from: toDay(subYears(from, 1)), to: toDay(subYears(to, 1)) };
+  }
+  const unit = CALENDAR_UNIT[preset];
+  if (unit === "month") {
+    const previous = subMonths(from, 1);
+    return { from: toDay(startOfMonth(previous)), to: toDay(endOfMonth(previous)) };
+  }
+  if (unit === "quarter") {
+    const previous = addQuarters(from, -1);
+    return { from: toDay(startOfQuarter(previous)), to: toDay(endOfQuarter(previous)) };
+  }
+  if (unit === "year") {
+    const previous = subYears(from, 1);
+    return { from: toDay(startOfYear(previous)), to: toDay(endOfYear(previous)) };
+  }
+  const length = differenceInCalendarDays(to, from) + 1;
+  return { from: toDay(subDays(from, length)), to: toDay(subDays(to, length)) };
+}
+function makePeriod(preset, range, compare2, customCompareRange) {
+  const resolved = compare2 === "custom" ? customCompareRange : comparisonRange(preset, range, compare2);
+  const effective = resolved === void 0 ? "none" : compare2;
+  return {
+    preset,
+    range,
+    compare: effective,
+    ...resolved ? { compareRange: resolved } : {}
+  };
+}
+function periodFromPreset(preset, today, compare2 = "none") {
+  return makePeriod(preset, presetRange(preset, today), compare2);
+}
+var MONTHS_ABBR = [
+  "janv.",
+  "f\xE9vr.",
+  "mars",
+  "avr.",
+  "mai",
+  "juin",
+  "juil.",
+  "ao\xFBt",
+  "sept.",
+  "oct.",
+  "nov.",
+  "d\xE9c."
+];
+var formatDay = (day) => {
+  const date = fromDay(day);
+  return `${date.getDate()} ${MONTHS_ABBR[date.getMonth()]} ${date.getFullYear()}`;
+};
+function formatRange(range) {
+  if (range.from === void 0) return `Jusqu'au ${formatDay(range.to)}`;
+  if (range.from === range.to) return formatDay(range.from);
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  if (from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth()) {
+    return `${from.getDate()} \u2013 ${to.getDate()} ${MONTHS_ABBR[to.getMonth()]} ${to.getFullYear()}`;
+  }
+  return `${formatDay(range.from)} \u2013 ${formatDay(range.to)}`;
+}
+function formatPeriod(value) {
+  const preset = PERIOD_PRESETS.find((entry) => entry.key === value.preset);
+  if (preset) return preset.label;
+  return isCompleteRange(value.range) ? formatRange(value.range) : "P\xE9riode";
+}
+var DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+var isDay = (value) => value !== void 0 && DAY_PATTERN.test(value);
+function isCompleteRange(range) {
+  return isDay(range.to) && (range.from === void 0 || isDay(range.from));
+}
+function spansTwoMonths(range) {
+  if (!isDay(range.from) || !isDay(range.to)) return false;
+  const from = fromDay(range.from);
+  const to = fromDay(range.to);
+  return from.getFullYear() !== to.getFullYear() || from.getMonth() !== to.getMonth();
+}
+function orderedRange(from, to) {
+  return from <= to ? { from, to } : { from: to, to: from };
+}
+var COMPARE_MODES = [
+  "none",
+  "previous_period",
+  "previous_year",
+  "custom"
+];
+var DAY_PICKER_CLASS_NAMES = {
+  // DayPicker renders its Nav as a sibling of the months, before them, so the
+  // arrows are positioned against this box rather than against a caption.
+  months: "relative flex gap-4",
+  month: "space-y-2",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-sm font-medium capitalize",
+  nav: "flex items-center justify-between absolute inset-x-0 h-8 px-1 pointer-events-none",
+  button_previous: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
+  button_next: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
+  chevron: "h-4 w-4 fill-current",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "w-9 text-xs font-normal text-muted-foreground",
+  week: "flex w-full",
+  day: "h-9 w-9 p-0 text-center text-sm",
+  day_button: "h-9 w-9 rounded-md transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  today: "font-semibold text-primary",
+  outside: "text-muted-foreground/50",
+  disabled: "opacity-40",
+  selected: "bg-primary/15",
+  range_start: "rounded-l-md bg-primary [&_button]:bg-primary [&_button]:text-primary-foreground",
+  range_end: "rounded-r-md bg-primary [&_button]:bg-primary [&_button]:text-primary-foreground",
+  range_middle: "bg-primary/15 [&_button]:hover:bg-primary/25"
+};
+var COMPARE_MODIFIER_CLASS = "bg-chart-2/25 ring-1 ring-inset ring-chart-2/40";
+function draftOf(value) {
+  return {
+    preset: value.preset,
+    // Anything that is not a day is "not chosen yet". The picker this replaced
+    // accepted `{ from: '', to: '' }` for exactly that, and its callers still do.
+    from: isDay(value.range.from) ? value.range.from : void 0,
+    to: isDay(value.range.to) ? value.range.to : void 0,
+    compare: value.compare,
+    compareFrom: value.compareRange?.from,
+    compareTo: value.compareRange?.to
+  };
+}
+function rangeOf(draft) {
+  if (!isDay(draft.to)) return null;
+  if (draft.preset === "all") return { to: draft.to };
+  if (!isDay(draft.from)) return null;
+  return { from: draft.from, to: draft.to };
+}
+function customCompareOf(draft) {
+  if (!isDay(draft.compareFrom) || !isDay(draft.compareTo)) return void 0;
+  return orderedRange(draft.compareFrom, draft.compareTo);
+}
+function previewCompare(draft) {
+  const range = rangeOf(draft);
+  if (!range) return void 0;
+  if (draft.compare === "custom") return customCompareOf(draft);
+  return comparisonRange(draft.preset, range, draft.compare);
+}
+function activeCompare(draft) {
+  return draft.preset === "all" ? "none" : draft.compare;
+}
+function anchorMonth(range) {
+  if (!range) return void 0;
+  if (isDay(range.from)) return fromDay(range.from);
+  return isDay(range.to) ? fromDay(range.to) : void 0;
+}
+function DateRangeCompare({
+  value,
+  onChange,
+  comparable = true,
+  presets = PERIOD_PRESETS,
+  align = "start",
+  disabled,
+  className
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const [draft, setDraft] = React2.useState(() => draftOf(value));
+  const [month, setMonth] = React2.useState(void 0);
+  const [months, setMonths] = React2.useState(1);
+  const showRange = (range2) => {
+    setMonth(anchorMonth(range2));
+    setMonths(spansTwoMonths(range2) ? 2 : 1);
+  };
+  const openPanel = () => {
+    setDraft(draftOf(value));
+    showRange(value.range);
+    setOpen(true);
+  };
+  const pickPreset = (preset) => {
+    const resolved = periodFromPreset(preset, /* @__PURE__ */ new Date(), activeCompare(draft));
+    setDraft({
+      ...draftOf(resolved),
+      // The rail changes the period, not the comparison: the mode the user chose
+      // survives, and `activeCompare` decides whether it can apply here.
+      compare: draft.compare,
+      compareFrom: draft.compareFrom,
+      compareTo: draft.compareTo
+    });
+    showRange(resolved.range);
+  };
+  const pickDays = (selected) => {
+    setDraft({
+      ...draft,
+      preset: "custom",
+      from: selected?.from ? toDay(selected.from) : void 0,
+      to: selected?.to ? toDay(selected.to) : void 0
+    });
+  };
+  const range = rangeOf(draft);
+  const compareRange = previewCompare(draft);
+  const apply = () => {
+    if (!range) return;
+    onChange(makePeriod(draft.preset, range, activeCompare(draft), customCompareOf(draft)));
+    setOpen(false);
+  };
+  const selectedDays = isDay(draft.from) ? { from: fromDay(draft.from), to: isDay(draft.to) ? fromDay(draft.to) : void 0 } : void 0;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => next ? openPanel() : setOpen(false),
+      align,
+      className: cn("w-auto p-0", className),
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", disabled, children: formatPeriod(value) }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        presets.length > 0 && /* @__PURE__ */ jsx(PresetRail, { presets, selected: draft.preset, onSelect: pickPreset }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative p-3", children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "range",
+              locale: fr,
+              weekStartsOn: 1,
+              numberOfMonths: months,
+              month,
+              onMonthChange: setMonth,
+              selected: selectedDays,
+              onSelect: pickDays,
+              modifiers: {
+                compare: compareRange?.from ? [{ from: fromDay(compareRange.from), to: fromDay(compareRange.to) }] : []
+              },
+              modifiersClassNames: { compare: COMPARE_MODIFIER_CLASS },
+              classNames: DAY_PICKER_CLASS_NAMES
+            }
+          ) }),
+          comparable && /* @__PURE__ */ jsx(
+            CompareSection,
+            {
+              draft,
+              compareRange,
+              onModeChange: (compare2) => setDraft({ ...draft, compare: compare2 }),
+              onCustomChange: (from, to) => setDraft({ ...draft, compareFrom: from, compareTo: to })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-t px-3 py-2", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              range ? formatRange(range) : "Choisissez une date de fin",
+              compareRange && ` vs ${formatRange(compareRange)}`
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setOpen(false), children: "Annuler" }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", onClick: apply, disabled: !range, children: "Appliquer" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DateRangePicker({ value, onChange, className, disabled }) {
+  return /* @__PURE__ */ jsx(
+    DateRangeCompare,
+    {
+      value: { preset: "custom", range: value, compare: "none" },
+      onChange: (next) => {
+        if (next.range.from !== void 0) onChange({ from: next.range.from, to: next.range.to });
+      },
+      comparable: false,
+      presets: [],
+      disabled,
+      className
+    }
+  );
+}
+function PresetRail({
+  presets,
+  selected,
+  onSelect
+}) {
+  const refs = React2.useRef([]);
+  const activeIndex = Math.max(
+    0,
+    presets.findIndex((preset) => preset.key === selected)
+  );
+  const moveTo = (index) => {
+    const next = (index + presets.length) % presets.length;
+    refs.current[next]?.focus();
+    onSelect(presets[next].key);
+  };
+  const onKeyDown = (event, index) => {
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (step !== void 0) {
+      event.preventDefault();
+      moveTo(index + step);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      moveTo(event.key === "Home" ? 0 : presets.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "P\xE9riode pr\xE9d\xE9finie",
+      className: "flex w-44 shrink-0 flex-col gap-0.5 border-r p-2",
+      children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (node) => {
+            refs.current[index] = node;
+          },
+          type: "button",
+          role: "radio",
+          "aria-checked": preset.key === selected,
+          tabIndex: index === activeIndex ? 0 : -1,
+          onKeyDown: (event) => onKeyDown(event, index),
+          onClick: () => onSelect(preset.key),
+          className: cn(
+            "rounded px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            preset.key === selected ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+          ),
+          children: preset.label
+        },
+        preset.key
+      ))
+    }
+  );
+}
+function CompareSection({
+  draft,
+  compareRange,
+  onModeChange,
+  onCustomChange
+}) {
+  const derivable = draft.preset !== "all";
+  const active = activeCompare(draft);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t px-3 py-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Comparer \xE0" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: COMPARE_MODES.map((mode) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active === mode,
+        disabled: mode !== "none" && !derivable,
+        onClick: () => onModeChange(mode),
+        className: cn(
+          "rounded-full border px-2.5 py-1 text-xs transition-colors disabled:opacity-40",
+          active === mode ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+        ),
+        children: COMPARE_LABELS[mode]
+      },
+      mode
+    )) }),
+    active === "custom" && // Two inputs rather than a second selection mode in the calendar: with
+    // one grid and two ranges to fill, nothing on screen would say which one
+    // a click is about to change.
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": "D\xE9but de la comparaison",
+          value: draft.compareFrom ?? "",
+          max: draft.compareTo,
+          onChange: (event) => onCustomChange(event.target.value || void 0, draft.compareTo),
+          className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\u2192" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": "Fin de la comparaison",
+          value: draft.compareTo ?? "",
+          min: draft.compareFrom,
+          onChange: (event) => onCustomChange(draft.compareFrom, event.target.value || void 0),
+          className: "h-8 rounded-md border border-input bg-transparent px-2 text-sm"
+        }
+      )
+    ] }),
+    compareRange && active !== "custom" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatRange(compareRange) })
+  ] });
+}
+var CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+var COMPARE_COLOR = CHART_COLORS[1];
+var colorAt = (index) => CHART_COLORS[index % CHART_COLORS.length];
+var formatNumber = (value) => new Intl.NumberFormat("fr-FR").format(Math.round(value));
+var ChartContext = React2.createContext({ formatValue: formatNumber });
+function ChartContainer({
+  children,
+  height = 320,
+  formatValue = formatNumber,
+  label,
+  className
+}) {
+  const context = React2.useMemo(() => ({ formatValue }), [formatValue]);
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "img",
+      "aria-label": label,
+      style: { height },
+      className: cn(
+        "w-full text-xs",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+        "[&_.recharts-cartesian-grid_line]:stroke-border",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
+        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/40",
+        "[&_.recharts-sector]:outline-none",
+        "[&_.recharts-surface]:outline-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children })
+    }
+  ) });
+}
+function ChartTooltipContent({
+  active,
+  payload,
+  label
+}) {
+  const { formatValue } = React2.useContext(ChartContext);
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-card px-2.5 py-1.5 text-xs shadow-md", children: [
+    label !== void 0 && /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-0.5", children: payload.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-2 w-2 shrink-0 rounded-[2px]",
+          style: { backgroundColor: entry.color }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: entry.name }),
+      /* @__PURE__ */ jsx("span", { className: "ml-auto font-medium tabular-nums text-foreground", children: typeof entry.value === "number" ? formatValue(entry.value) : entry.value })
+    ] }, `${entry.dataKey}-${index}`)) })
+  ] });
+}
+var ChartTooltip = /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    cursor: { strokeWidth: 1 },
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, {}),
+    wrapperStyle: { outline: "none" }
+  }
+);
+function ChartLegendContent({ payload }) {
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", children: payload.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "h-2 w-2 shrink-0 rounded-[2px]",
+        style: { backgroundColor: entry.color }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: entry.value })
+  ] }, `${entry.dataKey}-${index}`)) });
+}
+var ChartLegend = /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) });
+var COMPARE_LINE_PROPS = {
+  stroke: COMPARE_COLOR,
+  strokeDasharray: "4 4",
+  strokeOpacity: 0.4,
+  strokeWidth: 2,
+  dot: false,
+  activeDot: false,
+  // Not a preference: Recharts animates `strokeDasharray` from `0px 0px`, so an
+  // animated comparison line is drawn solid and only becomes dashed once the
+  // animation ends. Off, it is dashed from the first frame — and a reference
+  // line that draws itself in is pulling the eye towards the thing meant to
+  // recede behind the real series anyway.
+  isAnimationActive: false
+};
+var AXIS_PROPS = {
+  tickLine: false,
+  axisLine: false,
+  tickMargin: 8
+};
+var MARK_PROPS = { isAnimationActive: false };
+function CartesianFrame({ x, formatValue }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: x, ...AXIS_PROPS }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS_PROPS, width: 56, tickFormatter: formatValue })
+  ] });
+}
+function accessibleLabel(series, label) {
+  return label ?? series.map((entry) => entry.label).join(", ");
+}
+function showsLegend(props) {
+  if (props.hideLegend) return false;
+  return props.series.length > 1 || props.compareSeries !== void 0;
+}
+function BarChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxs(BarChart$1, { data, children: [
+        /* @__PURE__ */ jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: entry.key,
+            name: entry.label,
+            fill: colorAt(entry.colorIndex ?? index),
+            radius: [4, 4, 0, 0],
+            ...MARK_PROPS
+          },
+          entry.key
+        )),
+        compareSeries && /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            fill: COMPARE_LINE_PROPS.stroke,
+            fillOpacity: COMPARE_LINE_PROPS.strokeOpacity,
+            radius: [4, 4, 0, 0],
+            ...MARK_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function StackedBarChart(props) {
+  const { data, x, series, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxs(BarChart$1, { data, children: [
+        /* @__PURE__ */ jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: entry.key,
+            name: entry.label,
+            stackId: "stack",
+            fill: colorAt(entry.colorIndex ?? index),
+            radius: 0,
+            ...MARK_PROPS
+          },
+          entry.key
+        ))
+      ] })
+    }
+  );
+}
+function LineChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxs(LineChart$1, { data, children: [
+        /* @__PURE__ */ jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "monotone",
+            dataKey: entry.key,
+            name: entry.label,
+            stroke: colorAt(entry.colorIndex ?? index),
+            strokeWidth: 2,
+            dot: false,
+            ...MARK_PROPS
+          },
+          entry.key
+        )),
+        compareSeries && /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: "monotone",
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            ...COMPARE_LINE_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function AreaChart(props) {
+  const { data, x, series, compareSeries, formatValue = formatNumber } = props;
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      height: props.height,
+      formatValue,
+      label: accessibleLabel(series, props.label),
+      className: props.className,
+      children: /* @__PURE__ */ jsxs(AreaChart$1, { data, children: [
+        /* @__PURE__ */ jsx(CartesianFrame, { x, formatValue }),
+        ChartTooltip,
+        showsLegend(props) && ChartLegend,
+        series.map((entry, index) => {
+          const color = colorAt(entry.colorIndex ?? index);
+          return /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: entry.key,
+              name: entry.label,
+              stroke: color,
+              strokeWidth: 2,
+              fill: color,
+              fillOpacity: 0.15,
+              ...MARK_PROPS
+            },
+            entry.key
+          );
+        }),
+        compareSeries && /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: compareSeries.key,
+            name: compareSeries.label,
+            fill: "none",
+            ...COMPARE_LINE_PROPS
+          }
+        )
+      ] })
+    }
+  );
+}
+function FunnelChart({
+  data,
+  formatValue = formatNumber,
+  height,
+  label,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      height,
+      formatValue,
+      label: label ?? data.map((step) => step.label).join(", "),
+      className,
+      children: /* @__PURE__ */ jsxs(FunnelChart$1, { children: [
+        ChartTooltip,
+        /* @__PURE__ */ jsxs(Funnel, { dataKey: "value", nameKey: "label", data, ...MARK_PROPS, children: [
+          data.map((step, index) => /* @__PURE__ */ jsx(Cell, { fill: colorAt(index) }, step.label)),
+          /* @__PURE__ */ jsx(
+            LabelList,
+            {
+              dataKey: "label",
+              position: "right",
+              className: "fill-foreground",
+              stroke: "none",
+              fontSize: 12
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function relativeDelta(value, compareValue) {
+  if (compareValue === void 0 || compareValue === 0) return null;
+  return (value - compareValue) / Math.abs(compareValue);
+}
+var DELTA_FORMAT = new Intl.NumberFormat("fr-FR", {
+  style: "percent",
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero"
+});
+function KpiCard({
+  label,
+  value,
+  compareValue,
+  formatValue = formatNumber,
+  lowerIsBetter = false,
+  sparkline,
+  className
+}) {
+  const delta = relativeDelta(value, compareValue);
+  const improved = delta === null ? null : delta > 0 !== lowerIsBetter;
+  return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-1 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums text-foreground", children: formatValue(value) }),
+    delta !== null && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: cn(
+          "text-xs font-medium tabular-nums",
+          // Direction is in the sign as well as the colour: a red figure and
+          // a green one differ by more than hue for nobody who cannot see it.
+          improved ? "text-status-success" : "text-status-blocked"
+        ),
+        children: [
+          DELTA_FORMAT.format(delta),
+          compareValue !== void 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 font-normal text-muted-foreground", children: [
+            "vs ",
+            formatValue(compareValue)
+          ] })
+        ]
+      }
+    ),
+    sparkline && sparkline.length > 1 && /* @__PURE__ */ jsx(ChartContainer, { height: 40, label: `Tendance \u2014 ${label}`, className: "pt-1", children: /* @__PURE__ */ jsx(LineChart$1, { data: sparkline.map((point, index) => ({ index, point })), children: /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: "point",
+        stroke: colorAt(0),
+        strokeWidth: 1.5,
+        dot: false,
+        ...MARK_PROPS
+      }
+    ) }) })
+  ] }) });
+}
 var ToastContext = createContext(null);
 function useToast() {
   const toast = useContext(ToastContext);
@@ -863,7 +2184,7 @@ var SIDES = {
   bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
   left: "right-full top-1/2 -translate-y-1/2 mr-1.5"
 };
-function Tooltip({ label, children, side = "top", className }) {
+function Tooltip2({ label, children, side = "top", className }) {
   return /* @__PURE__ */ jsxs("span", { className: "group/tt relative inline-flex", children: [
     children,
     /* @__PURE__ */ jsx(
@@ -881,6 +2202,6 @@ function Tooltip({ label, children, side = "top", className }) {
   ] });
 }
 
-export { AppApiProvider, AppContextProvider, AppInvokeError, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CopyButton, DateRangePicker, DropdownMenu, Input, Link, Modal, Popover, Select, SidePanel, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, copyToClipboard, downloadBlob, downloadCsv, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings, useToast };
+export { AppApiProvider, AppContextProvider, AppInvokeError, AreaChart, Badge, BarChart, Button, COMPARE_LABELS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CopyButton, DataTable, DateRangeCompare, DateRangePicker, DropdownMenu, FunnelChart, Input, KpiCard, LineChart, Link, Modal, PERIOD_PRESETS, Popover, Select, SidePanel, Spinner, StackedBarChart, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip2 as Tooltip, badgeVariants, buttonVariants, cn, comparisonRange, copyToClipboard, downloadBlob, downloadCsv, formatPeriod, formatRange, makePeriod, periodFromPreset, relativeDelta, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map