@apotech-os/ui-sdk 2.5.0 → 2.6.0

package/dist/index.js

@@ -14,8 +14,8 @@ 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 { DayPicker, labelDayButton } from 'react-day-picker';
+import { subYears, differenceInCalendarDays, subDays, parse, format, startOfYear, subMonths, startOfQuarter, endOfMonth, startOfMonth } 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
@@ -1079,8 +1079,15 @@ function DataTable({
               TableRow,
               {
                 "data-state": selected.has(row.id) ? "selected" : void 0,
-                className: onRowClick ? "cursor-pointer" : "hover:bg-transparent",
+                className: onRowClick ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" : "hover:bg-transparent",
+                tabIndex: onRowClick ? 0 : void 0,
                 onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+                onKeyDown: onRowClick ? (event) => {
+                  if (event.target !== event.currentTarget) return;
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  onRowClick(row.original);
+                } : void 0,
                 children: [
                   selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(
                     Checkbox,
@@ -1354,20 +1361,20 @@ var PERIOD_PRESETS = [
   { key: "all", label: "Tout l'historique" }
 ];
 var COMPARE_LABELS = {
-  none: "Aucune",
+  none: "Ne pas comparer",
   previous_period: "P\xE9riode pr\xE9c\xE9dente",
   previous_year: "Ann\xE9e pr\xE9c\xE9dente",
-  custom: "Personnalis\xE9e"
+  custom: "P\xE9riode personnalis\xE9e"
+};
+var COMPARE_SHORT_LABELS = {
+  none: "",
+  previous_period: "p\xE9riode pr\xE9c.",
+  previous_year: "N-1",
+  custom: "p\xE9riode choisie"
 };
 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) {
@@ -1384,17 +1391,17 @@ function presetRange(preset, today) {
     case "last90":
       return { from: toDay(subDays(today, 89)), to: day };
     case "thisMonth":
-      return { from: toDay(startOfMonth(today)), to: toDay(endOfMonth(today)) };
+      return { from: toDay(startOfMonth(today)), to: day };
     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)) };
+      return { from: toDay(startOfQuarter(today)), to: day };
     case "last12Months":
-      return { from: toDay(addDays(subYears(today, 1), 1)), to: day };
+      return { from: toDay(subMonths(today, 12)), to: day };
     case "thisYear":
-      return { from: toDay(startOfYear(today)), to: toDay(endOfYear(today)) };
+      return { from: toDay(startOfYear(today)), to: day };
     case "all":
       return { to: day };
     case "custom":
@@ -1408,19 +1415,6 @@ function comparisonRange(preset, range, compare2) {
   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)) };
 }
@@ -1510,12 +1504,20 @@ var DAY_PICKER_CLASS_NAMES = {
   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"
+  // A cell DayPicker decided not to fill still occupies the grid, and still
+  // matches the range modifiers below — without this it would show a stretch of
+  // painted band with no number in it. `invisible`, not `hidden`: the six-week
+  // grid keeps its height either way.
+  hidden: "invisible"
+};
+var DAY_MODIFIER_CLASS_NAMES = {
+  period_middle: "bg-primary/15",
+  period_start: "rounded-l-md [&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary",
+  period_end: "rounded-r-md [&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary",
+  compare_middle: "bg-chart-2/30",
+  compare_start: "rounded-l-md bg-chart-2/30 [&_button]:ring-2 [&_button]:ring-inset [&_button]:ring-chart-2 [&_button]:font-semibold [&_button]:text-chart-2",
+  compare_end: "rounded-r-md bg-chart-2/30 [&_button]:ring-2 [&_button]:ring-inset [&_button]:ring-chart-2 [&_button]:font-semibold [&_button]:text-chart-2"
 };
-var COMPARE_MODIFIER_CLASS = "bg-chart-2/25 ring-1 ring-inset ring-chart-2/40";
 function draftOf(value) {
   return {
     preset: value.preset,
@@ -1547,16 +1549,38 @@ function previewCompare(draft) {
 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 bandOf(from, to) {
+  if (!isDay(from)) return void 0;
+  const start = fromDay(from);
+  return { from: start, to: isDay(to) ? fromDay(to) : start };
+}
+var inBand = (band, date) => band !== void 0 && date >= band.from && date <= band.to;
+var isBound = (date, bound) => bound !== void 0 && date.getTime() === bound.getTime();
+function compareBandOf(draft) {
+  const active = activeCompare(draft);
+  if (active === "none") return void 0;
+  if (active === "custom") return bandOf(draft.compareFrom, draft.compareTo);
+  const derived = previewCompare(draft);
+  return derived?.from ? { from: fromDay(derived.from), to: fromDay(derived.to) } : void 0;
+}
+function anchorMonth(range, visible, today) {
+  const from = isDay(range.from) ? fromDay(range.from) : void 0;
+  const to = isDay(range.to) ? fromDay(range.to) : void 0;
+  if (visible === 2) return from ?? to;
+  if (!to) return from;
+  if (to <= today) return to;
+  return from && from <= today ? today : from ?? today;
+}
+function selectionOf(from, to) {
+  if (!isDay(from)) return void 0;
+  return { from: fromDay(from), to: isDay(to) ? fromDay(to) : void 0 };
 }
 function DateRangeCompare({
   value,
   onChange,
   comparable = true,
   presets = PERIOD_PRESETS,
+  months = 1,
   align = "start",
   disabled,
   className
@@ -1564,44 +1588,76 @@ function DateRangeCompare({
   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 [autoMonths, setAutoMonths] = React2.useState(1);
+  const [target, setTarget] = React2.useState("period");
+  const [today, setToday] = React2.useState(() => /* @__PURE__ */ new Date());
+  const visibleMonths = months === "auto" ? autoMonths : months;
+  const showRange = (range2, at = today) => {
+    const next = months === "auto" ? spansTwoMonths(range2) ? 2 : 1 : months;
+    setAutoMonths(next);
+    setMonth(anchorMonth(range2, next, at));
   };
   const openPanel = () => {
+    const now = /* @__PURE__ */ new Date();
+    setToday(now);
     setDraft(draftOf(value));
-    showRange(value.range);
+    setTarget("period");
+    showRange(value.range, now);
     setOpen(true);
   };
-  const pickPreset = (preset) => {
-    const resolved = periodFromPreset(preset, /* @__PURE__ */ new Date(), activeCompare(draft));
-    setDraft({
+  const range = rangeOf(draft);
+  const compareRange = previewCompare(draft);
+  const compareEditable = comparable && activeCompare(draft) === "custom";
+  const activeTarget = compareEditable ? target : "period";
+  const periodBand = bandOf(draft.from, draft.to);
+  const compareBand = compareBandOf(draft);
+  const emit = (candidate) => {
+    const complete = rangeOf(candidate);
+    if (!complete) return false;
+    onChange(
+      makePeriod(candidate.preset, complete, activeCompare(candidate), customCompareOf(candidate))
+    );
+    setOpen(false);
+    return true;
+  };
+  const apply = () => emit(draft);
+  const pickPreset = (preset, commit) => {
+    const resolved = periodFromPreset(preset, today, activeCompare(draft));
+    const next = {
       ...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
-    });
+    };
+    setDraft(next);
+    setTarget("period");
     showRange(resolved.range);
+    if (!comparable && commit) emit(next);
   };
   const pickDays = (selected) => {
-    setDraft({
-      ...draft,
-      preset: "custom",
-      from: selected?.from ? toDay(selected.from) : void 0,
-      to: selected?.to ? toDay(selected.to) : void 0
-    });
+    const from = selected?.from ? toDay(selected.from) : void 0;
+    const to = selected?.to ? toDay(selected.to) : void 0;
+    if (activeTarget === "compare") {
+      setDraft({ ...draft, compare: "custom", compareFrom: from, compareTo: to });
+      return;
+    }
+    setDraft({ ...draft, preset: "custom", from, to });
   };
-  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 chooseCompare = (mode) => {
+    const next = { ...draft, compare: mode };
+    setDraft(next);
+    setTarget(mode === "custom" ? "compare" : "period");
+    const shown = mode === "custom" ? customCompareOf(next) : range;
+    if (shown) showRange(shown);
+  };
+  const focusTarget = (next) => {
+    setTarget(next);
+    const shown = next === "compare" ? customCompareOf(draft) : range;
+    if (shown) showRange(shown);
   };
-  const selectedDays = isDay(draft.from) ? { from: fromDay(draft.from), to: isDay(draft.to) ? fromDay(draft.to) : void 0 } : void 0;
+  const footer = activeTarget === "compare" ? compareRange ? formatRange(compareRange) : "P\xE9riode de comparaison \xE0 choisir" : range ? `${formatRange(range)}${compareRange ? ` vs ${formatRange(compareRange)}` : ""}` : "Date de fin \xE0 choisir";
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -1609,42 +1665,81 @@ function DateRangeCompare({
       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 }),
+      trigger: /* @__PURE__ */ jsxs(Button, { variant: "outline", disabled, children: [
+        /* @__PURE__ */ jsx(IconCalendar, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { children: formatPeriod(value) }),
+        value.compare !== "none" && value.compareRange !== void 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-md bg-chart-2/15 px-1.5 py-0.5 text-xs font-medium text-chart-2", children: [
+          "vs ",
+          COMPARE_SHORT_LABELS[value.compare]
+        ] }),
+        /* @__PURE__ */ jsx(IconChevronDown, { className: "size-4 text-muted-foreground" })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[80vh] items-stretch", children: [
+        (presets.length > 0 || comparable) && /* @__PURE__ */ jsxs("div", { className: "flex w-48 shrink-0 flex-col border-r", children: [
+          presets.length > 0 && /* @__PURE__ */ jsx(
+            PresetRail,
+            {
+              presets,
+              selected: draft.preset,
+              onSelect: pickPreset,
+              className: "min-h-0 flex-1 overflow-y-auto p-2"
+            }
+          ),
+          comparable && /* @__PURE__ */ jsx(
+            CompareSection,
+            {
+              draft,
+              compareRange,
+              onModeChange: chooseCompare
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          comparable && /* @__PURE__ */ jsx(
+            TargetPills,
+            {
+              target: activeTarget,
+              onSelect: focusTarget,
+              compareEditable
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: "relative p-3", children: /* @__PURE__ */ jsx(
             DayPicker,
             {
               mode: "range",
               locale: fr,
               weekStartsOn: 1,
-              numberOfMonths: months,
+              numberOfMonths: visibleMonths,
               month,
               onMonthChange: setMonth,
-              selected: selectedDays,
+              today,
+              disabled: { after: today },
+              fixedWeeks: true,
+              showOutsideDays: visibleMonths === 1,
+              selected: activeTarget === "compare" ? selectionOf(draft.compareFrom, draft.compareTo) : selectionOf(draft.from, draft.to),
               onSelect: pickDays,
               modifiers: {
-                compare: compareRange?.from ? [{ from: fromDay(compareRange.from), to: fromDay(compareRange.to) }] : []
+                period_middle: periodBand ? [{ from: periodBand.from, to: periodBand.to }] : [],
+                period_start: periodBand ? [periodBand.from] : [],
+                period_end: periodBand ? [periodBand.to] : [],
+                // The period wins any cell both ranges claim.
+                compare_middle: (date) => inBand(compareBand, date) && !inBand(periodBand, date),
+                compare_start: (date) => isBound(date, compareBand?.from) && !inBand(periodBand, date),
+                compare_end: (date) => isBound(date, compareBand?.to) && !inBand(periodBand, date)
               },
-              modifiersClassNames: { compare: COMPARE_MODIFIER_CLASS },
-              classNames: DAY_PICKER_CLASS_NAMES
+              modifiersClassNames: DAY_MODIFIER_CLASS_NAMES,
+              classNames: DAY_PICKER_CLASS_NAMES,
+              "aria-label": activeTarget === "compare" ? "Calendrier \u2014 s\xE9lection de la comparaison" : "Calendrier \u2014 s\xE9lection de la p\xE9riode",
+              labels: {
+                // Suffixed rather than replaced: which range a click lands in is
+                // the one thing a screen reader cannot get from the grid, and the
+                // default label still carries the date and its state.
+                labelDayButton: (date, modifiers, options, dateLib) => `${labelDayButton(date, modifiers, options, dateLib)} \u2014 ${activeTarget === "compare" ? "comparaison" : "p\xE9riode"}`
+              }
             }
           ) }),
-          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: "mt-auto flex items-center justify-between gap-4 border-t px-3 py-2", children: [
+            /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "text-xs text-muted-foreground", children: footer }),
             /* @__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" })
@@ -1665,6 +1760,7 @@ function DateRangePicker({ value, onChange, className, disabled }) {
       },
       comparable: false,
       presets: [],
+      months: "auto",
       disabled,
       className
     }
@@ -1673,7 +1769,8 @@ function DateRangePicker({ value, onChange, className, disabled }) {
 function PresetRail({
   presets,
   selected,
-  onSelect
+  onSelect,
+  className
 }) {
   const refs = React2.useRef([]);
   const activeIndex = Math.max(
@@ -1683,7 +1780,7 @@ function PresetRail({
   const moveTo = (index) => {
     const next = (index + presets.length) % presets.length;
     refs.current[next]?.focus();
-    onSelect(presets[next].key);
+    onSelect(presets[next].key, false);
   };
   const onKeyDown = (event, index) => {
     const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
@@ -1702,7 +1799,7 @@ function PresetRail({
     {
       role: "radiogroup",
       "aria-label": "P\xE9riode pr\xE9d\xE9finie",
-      className: "flex w-44 shrink-0 flex-col gap-0.5 border-r p-2",
+      className: cn("flex flex-col gap-0.5", className),
       children: presets.map((preset, index) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -1714,9 +1811,9 @@ function PresetRail({
           "aria-checked": preset.key === selected,
           tabIndex: index === activeIndex ? 0 : -1,
           onKeyDown: (event) => onKeyDown(event, index),
-          onClick: () => onSelect(preset.key),
+          onClick: () => onSelect(preset.key, true),
           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",
+            "shrink-0 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
@@ -1726,17 +1823,62 @@ function PresetRail({
     }
   );
 }
+var TARGETS = [
+  { key: "period", label: "P\xE9riode", swatch: "bg-primary" },
+  { key: "compare", label: "Comparaison", swatch: "ring-2 ring-inset ring-chart-2" }
+];
+function TargetPills({
+  target,
+  onSelect,
+  compareEditable
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Cible de la s\xE9lection",
+      className: "flex items-center gap-1 border-b px-3 py-2",
+      children: TARGETS.map((entry) => {
+        const enabled = entry.key === "period" || compareEditable;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": target === entry.key,
+            disabled: !enabled,
+            tabIndex: target === entry.key ? 0 : -1,
+            onKeyDown: (event) => {
+              if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(event.key)) return;
+              event.preventDefault();
+              if (compareEditable) onSelect(target === "period" ? "compare" : "period");
+            },
+            onClick: () => onSelect(entry.key),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40",
+              target === entry.key ? "border-border bg-muted font-medium text-foreground" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("size-2.5 rounded-sm", entry.swatch) }),
+              entry.label
+            ]
+          },
+          entry.key
+        );
+      })
+    }
+  );
+}
 function CompareSection({
   draft,
   compareRange,
-  onModeChange,
-  onCustomChange
+  onModeChange
 }) {
   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(
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 border-t p-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-xs font-medium text-muted-foreground", children: "Comparer \xE0" }),
+    COMPARE_MODES.map((mode) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1744,44 +1886,53 @@ function CompareSection({
         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"
+          "shrink-0 rounded px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40",
+          active === mode ? "bg-muted font-medium text-foreground" : "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) })
+    )),
+    compareRange && active !== "custom" && /* @__PURE__ */ jsx("p", { className: "px-3 pt-1 text-xs text-muted-foreground", children: formatRange(compareRange) })
   ] });
 }
+function IconCalendar({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 2v4M16 2v4M3 10h18" }),
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" })
+      ]
+    }
+  );
+}
+function IconChevronDown({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
 var CHART_COLORS = [
   "var(--chart-1)",
   "var(--chart-2)",
@@ -2202,6 +2353,6 @@ function Tooltip2({ label, children, side = "top", className }) {
   ] });
 }
 
-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 };
+export { AppApiProvider, AppContextProvider, AppInvokeError, AreaChart, Badge, BarChart, Button, COMPARE_LABELS, COMPARE_SHORT_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