@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-VOCA4KZB.js

@@ -0,0 +1,655 @@
+import { Calendar } from './chunk-7QDWREVG.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-ZUFM33AV.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-AFCSDND5.js';
+import { Button } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { endOfWeek, startOfWeek, endOfDay, startOfDay, endOfMonth, startOfMonth, endOfYear, startOfYear, subDays, subMonths, subYears, isBefore, isAfter, format, parse, isValid } from 'date-fns';
+import { XIcon, CalendarIcon, ArrowRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var dateRangePickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-[var(--date-picker-trigger-radius)] border bg-transparent font-normal transition-[color,box-shadow] outline-none",
+    "text-left",
+    "placeholder:text-muted-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]",
+    "min-w-[var(--date-range-picker-trigger-width)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--date-picker-trigger-height-sm)] px-[var(--date-picker-trigger-padding-x-sm)] py-[var(--date-picker-trigger-padding-y-sm)] text-[length:var(--date-picker-trigger-text-sm)]",
+        md: "h-[var(--date-picker-trigger-height-md)] px-[var(--date-picker-trigger-padding-x-md)] py-[var(--date-picker-trigger-padding-y-md)] text-[length:var(--date-picker-trigger-text-md)]",
+        lg: "h-[var(--date-picker-trigger-height-lg)] px-[var(--date-picker-trigger-padding-x-lg)] py-[var(--date-picker-trigger-padding-y-lg)] text-[length:var(--date-picker-trigger-text-lg)]"
+      },
+      variant: {
+        default: "border-input shadow-xs dark:bg-input/30",
+        outline: "border-input bg-transparent",
+        ghost: "border-transparent hover:bg-accent"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var dateRangePresetVariants = cva(
+  [
+    // Base - works for both orientations
+    "text-sm rounded-md transition-colors whitespace-nowrap",
+    "hover:bg-accent hover:text-accent-foreground",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "data-[selected=true]:bg-primary/10 data-[selected=true]:text-primary data-[selected=true]:font-medium",
+    // Mobile: pill-like compact tabs
+    "px-3 py-1.5 flex-shrink-0",
+    // Desktop (sm+): full-width list items
+    "sm:w-full sm:text-left sm:py-2"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var dateRangePresetsContainerVariants = cva(
+  [
+    // Mobile: horizontal scrollable tabs
+    "flex flex-row gap-1 p-2 overflow-x-auto",
+    "border-b border-border",
+    "-webkit-overflow-scrolling-touch scrollbar-hide",
+    // Desktop (sm+): vertical sidebar
+    "sm:flex-col sm:overflow-x-visible sm:border-b-0 sm:border-r",
+    "sm:min-w-[var(--date-picker-preset-min-width)]"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var dateRangePickerFooterVariants = cva(
+  [
+    "flex items-center justify-end gap-2 border-t border-border",
+    "p-[var(--date-picker-footer-padding)]"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var dateRangeInputContainerVariants = cva(
+  [
+    "flex items-center gap-2"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var dateRangeInputFieldVariants = cva(
+  [
+    "flex-1 min-w-0 rounded-md border border-input bg-transparent px-2 py-1 text-sm",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-7 text-xs",
+        md: "h-8 text-sm",
+        lg: "h-9 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function DateRangePresets({
+  presets,
+  selectedPreset,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Date range presets",
+      className: cn(dateRangePresetsContainerVariants()),
+      "data-slot": "date-range-presets",
+      role: "listbox",
+      children: presets.map((preset) => {
+        const isSelected = selectedPreset === preset.label;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-selected": isSelected,
+            className: cn(dateRangePresetVariants()),
+            "data-selected": isSelected || void 0,
+            role: "option",
+            type: "button",
+            onClick: () => {
+              onSelect(preset.getValue(), preset.label);
+            },
+            children: preset.label
+          },
+          preset.label
+        );
+      })
+    }
+  );
+}
+var defaultPresets = [
+  {
+    label: "Today",
+    getValue: () => {
+      const today = startOfDay(/* @__PURE__ */ new Date());
+      return { from: today, to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Yesterday",
+    getValue: () => {
+      const yesterday = subDays(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfDay(yesterday), to: endOfDay(yesterday) };
+    }
+  },
+  {
+    label: "This week",
+    getValue: () => ({
+      from: startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }),
+      to: endOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 })
+    })
+  },
+  {
+    label: "Last 7 days",
+    getValue: () => ({
+      from: startOfDay(subDays(/* @__PURE__ */ new Date(), 6)),
+      to: endOfDay(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last 14 days",
+    getValue: () => ({
+      from: startOfDay(subDays(/* @__PURE__ */ new Date(), 13)),
+      to: endOfDay(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last 30 days",
+    getValue: () => ({
+      from: startOfDay(subDays(/* @__PURE__ */ new Date(), 29)),
+      to: endOfDay(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "This month",
+    getValue: () => ({
+      from: startOfMonth(/* @__PURE__ */ new Date()),
+      to: endOfMonth(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last month",
+    getValue: () => {
+      const lastMonth = subMonths(/* @__PURE__ */ new Date(), 1);
+      return {
+        from: startOfMonth(lastMonth),
+        to: endOfMonth(lastMonth)
+      };
+    }
+  },
+  {
+    label: "This year",
+    getValue: () => ({
+      from: startOfYear(/* @__PURE__ */ new Date()),
+      to: endOfYear(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last year",
+    getValue: () => {
+      const lastYear = subYears(/* @__PURE__ */ new Date(), 1);
+      return {
+        from: startOfYear(lastYear),
+        to: endOfYear(lastYear)
+      };
+    }
+  },
+  {
+    label: "All time",
+    getValue: () => ({
+      from: void 0,
+      to: void 0
+    })
+  }
+];
+function DateRangePicker({
+  ref,
+  className,
+  value,
+  defaultValue,
+  placeholder = "Select date range",
+  disabled = false,
+  disabledDates,
+  readOnly = false,
+  minDate,
+  maxDate,
+  format: format$1 = "PP",
+  locale,
+  onChange,
+  onOpenChange,
+  onClear,
+  size = "md",
+  variant = "default",
+  displayMode = "popover",
+  modalTitle = "Select Date Range",
+  required = false,
+  invalid = false,
+  clearable = false,
+  numberOfMonths = 2,
+  presets = defaultPresets,
+  showPresets = true,
+  requireConfirmation = false,
+  showTodayButton = true,
+  activeDates,
+  calendarProps,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalRange, setInternalRange] = React.useState(defaultValue);
+  const [pendingRange, setPendingRange] = React.useState();
+  const [selectedPreset, setSelectedPreset] = React.useState();
+  const [month, setMonth] = React.useState();
+  const selectedRange = value ?? internalRange;
+  const displayRange = requireConfirmation && open ? pendingRange ?? selectedRange : selectedRange;
+  React.useEffect(() => {
+    if (open && requireConfirmation) {
+      setPendingRange(selectedRange);
+    }
+  }, [open, requireConfirmation, selectedRange]);
+  const handleRangeSelect = (range) => {
+    setSelectedPreset(void 0);
+    if (requireConfirmation) {
+      setPendingRange(range);
+    } else {
+      if (value === void 0) {
+        setInternalRange(range);
+      }
+      onChange?.(range);
+    }
+  };
+  const handlePresetSelect = (range, label) => {
+    setSelectedPreset(label);
+    if (requireConfirmation) {
+      setPendingRange(range);
+    } else {
+      if (value === void 0) {
+        setInternalRange(range);
+      }
+      onChange?.(range);
+      setOpen(false);
+    }
+  };
+  const handleApply = () => {
+    if (pendingRange) {
+      if (value === void 0) {
+        setInternalRange(pendingRange);
+      }
+      onChange?.(pendingRange);
+    }
+    setPendingRange(void 0);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setPendingRange(void 0);
+    setSelectedPreset(void 0);
+    setOpen(false);
+  };
+  const handleOpenChange = (isOpen) => {
+    if (readOnly && isOpen) return;
+    if (!isOpen && requireConfirmation) {
+      setPendingRange(void 0);
+      setSelectedPreset(void 0);
+    }
+    setOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+  const handleClear = (event) => {
+    event.stopPropagation();
+    if (value === void 0) {
+      setInternalRange(void 0);
+    }
+    onChange?.();
+    setSelectedPreset(void 0);
+    onClear?.();
+  };
+  const handleTodayClick = () => {
+    setMonth(startOfMonth(/* @__PURE__ */ new Date()));
+  };
+  const formatRange = (range) => {
+    if (!range?.from) return null;
+    const formatOptions = locale ? { locale } : void 0;
+    const formattedFrom = format(range.from, format$1, formatOptions);
+    if (!range.to) {
+      return formattedFrom;
+    }
+    const formattedTo = format(range.to, format$1, formatOptions);
+    return `${formattedFrom} - ${formattedTo}`;
+  };
+  const displayValue = formatRange(selectedRange);
+  const showClearButton = clearable && selectedRange?.from && !disabled && !readOnly;
+  const isDateDisabled = React.useCallback(
+    (date) => {
+      const normalizedDate = startOfDay(date);
+      if (minDate && isBefore(normalizedDate, startOfDay(minDate))) return true;
+      if (maxDate && isAfter(normalizedDate, startOfDay(maxDate))) return true;
+      if (disabledDates?.(date)) return true;
+      return false;
+    },
+    [minDate, maxDate, disabledDates]
+  );
+  const calendarMonth = month ?? displayRange?.from ?? minDate;
+  const calendarContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+    showPresets && presets.length > 0 && /* @__PURE__ */ jsx(
+      DateRangePresets,
+      {
+        presets,
+        selectedPreset,
+        onSelect: handlePresetSelect
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      showTodayButton && /* @__PURE__ */ jsx("div", { className: "flex justify-end border-b px-3 py-2", "data-slot": "date-range-picker-header", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "h-[var(--date-range-picker-today-button-height)] text-[length:var(--date-range-picker-today-button-text-size)]",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleTodayClick,
+          children: "Today"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          autoFocus: true,
+          activeDates,
+          className: "gap-[var(--date-range-picker-calendar-gap)]",
+          disabled: isDateDisabled,
+          locale,
+          mode: "range",
+          month: calendarMonth,
+          numberOfMonths,
+          selected: displayRange,
+          onMonthChange: setMonth,
+          onSelect: handleRangeSelect,
+          ...calendarProps
+        }
+      ),
+      requireConfirmation && /* @__PURE__ */ jsxs("div", { className: cn(dateRangePickerFooterVariants()), "data-slot": "date-range-picker-footer", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: handleCancel,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: !pendingRange?.from,
+            size: "sm",
+            onClick: handleApply,
+            children: "Apply"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const triggerButton = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: cn(
+        dateRangePickerTriggerVariants({ size, variant }),
+        !displayValue && "text-muted-foreground"
+      ),
+      "aria-describedby": ariaDescribedby,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-invalid": invalid,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-readonly": readOnly,
+      "aria-required": required,
+      "data-readonly": readOnly || void 0,
+      "data-size": size,
+      "data-slot": "date-range-picker-trigger",
+      "data-state": open ? "open" : "closed",
+      "data-variant": variant,
+      disabled,
+      id,
+      role: "combobox",
+      type: "button",
+      onClick: displayMode === "modal" ? () => {
+        handleOpenChange(true);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: displayValue ?? placeholder }),
+        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+          showClearButton && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-label": "Clear date range",
+              className: "rounded-sm opacity-50 hover:opacity-100 focus:outline-none",
+              "data-slot": "date-range-picker-clear",
+              role: "button",
+              tabIndex: 0,
+              onClick: handleClear,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClear(e);
+                }
+              },
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 opacity-50" })
+        ] })
+      ]
+    }
+  );
+  const hiddenInputs = /* @__PURE__ */ jsxs(Fragment, { children: [
+    name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        name: `${name}-from`,
+        type: "hidden",
+        value: selectedRange?.from?.toISOString() ?? ""
+      }
+    ),
+    name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        name: `${name}-to`,
+        type: "hidden",
+        value: selectedRange?.to?.toISOString() ?? ""
+      }
+    )
+  ] });
+  if (displayMode === "modal") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "data-mode": "modal", "data-slot": "date-range-picker", ...props, children: [
+      triggerButton,
+      /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "max-w-fit p-0",
+          "data-slot": "date-range-picker-content",
+          children: [
+            /* @__PURE__ */ jsxs(DialogHeader, { className: "border-b px-4 py-3", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { children: modalTitle }),
+              /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "Use the calendar to select a start and end date for your range" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-0", children: calendarContent })
+          ]
+        }
+      ) }),
+      hiddenInputs
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "data-mode": "popover", "data-slot": "date-range-picker", ...props, children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-auto p-0",
+          "data-slot": "date-range-picker-content",
+          children: calendarContent
+        }
+      )
+    ] }),
+    hiddenInputs
+  ] });
+}
+function DateRangeInput({
+  value,
+  format: format$1,
+  locale,
+  onChange,
+  disabled = false,
+  readOnly = false,
+  startPlaceholder = "Start date",
+  endPlaceholder = "End date"
+}) {
+  const [startInput, setStartInput] = React.useState("");
+  const [endInput, setEndInput] = React.useState("");
+  React.useEffect(() => {
+    if (value?.from) {
+      setStartInput(format(value.from, format$1, locale ? { locale } : void 0));
+    } else {
+      setStartInput("");
+    }
+    if (value?.to) {
+      setEndInput(format(value.to, format$1, locale ? { locale } : void 0));
+    } else {
+      setEndInput("");
+    }
+  }, [value, format$1, locale]);
+  const parseDate = (input) => {
+    if (!input.trim()) return void 0;
+    try {
+      const parsed = parse(input, format$1, /* @__PURE__ */ new Date(), locale ? { locale } : void 0);
+      return isValid(parsed) ? parsed : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+  const handleStartBlur = () => {
+    const parsedStart = parseDate(startInput);
+    const currentEnd = value?.to;
+    if (parsedStart || !startInput.trim()) {
+      onChange({
+        from: parsedStart,
+        to: currentEnd
+      });
+    } else {
+      if (value?.from) {
+        setStartInput(format(value.from, format$1, locale ? { locale } : void 0));
+      } else {
+        setStartInput("");
+      }
+    }
+  };
+  const handleEndBlur = () => {
+    const parsedEnd = parseDate(endInput);
+    const currentStart = value?.from;
+    if (parsedEnd || !endInput.trim()) {
+      onChange({
+        from: currentStart,
+        to: parsedEnd
+      });
+    } else {
+      if (value?.to) {
+        setEndInput(format(value.to, format$1, locale ? { locale } : void 0));
+      } else {
+        setEndInput("");
+      }
+    }
+  };
+  const handleStartKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleStartBlur();
+    }
+  };
+  const handleEndKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleEndBlur();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(dateRangeInputContainerVariants()),
+      "data-slot": "date-range-input",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": "Start date",
+            className: cn(dateRangeInputFieldVariants()),
+            "data-slot": "date-range-input-start",
+            disabled,
+            placeholder: startPlaceholder,
+            readOnly,
+            type: "text",
+            value: startInput,
+            onBlur: handleStartBlur,
+            onChange: (e) => {
+              setStartInput(e.target.value);
+            },
+            onKeyDown: handleStartKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true", className: "size-4 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": "End date",
+            className: cn(dateRangeInputFieldVariants()),
+            "data-slot": "date-range-input-end",
+            disabled,
+            placeholder: endPlaceholder,
+            readOnly,
+            type: "text",
+            value: endInput,
+            onBlur: handleEndBlur,
+            onChange: (e) => {
+              setEndInput(e.target.value);
+            },
+            onKeyDown: handleEndKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DateRangeInput, DateRangePicker, DateRangePresets, dateRangeInputContainerVariants, dateRangeInputFieldVariants, dateRangePickerFooterVariants, dateRangePickerTriggerVariants, dateRangePresetVariants, dateRangePresetsContainerVariants, defaultPresets };
+//# sourceMappingURL=chunk-VOCA4KZB.js.map
+//# sourceMappingURL=chunk-VOCA4KZB.js.map