@povio/ui 0.0.8 → 0.0.9

package/dist/components/inputs/DateTime/shared/CalendarCell.js

@@ -0,0 +1,160 @@
+import { jsx } from "react/jsx-runtime";
+import { isSameDay } from "@internationalized/date";
+import { useCalendarCell } from "@react-aria/calendar";
+import { useFocusRing } from "@react-aria/focus";
+import { mergeProps } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef, useCallback, useMemo } from "react";
+import { Typography } from "../../../text/Typography/Typography.js";
+const isRange = (state) => {
+  return "highlightedRange" in state;
+};
+const CalendarCell = ({
+  state,
+  onApply,
+  shouldCloseOnSelect = true,
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(
+    props,
+    state,
+    ref
+  );
+  const { focusProps } = useFocusRing();
+  const onClick = useCallback(
+    (event) => {
+      buttonProps.onClick?.(event);
+      if (onDateSelection) {
+        onDateSelection(props.date);
+      }
+      if (isSelected && shouldCloseOnSelect) {
+        onApply?.();
+      }
+    },
+    [buttonProps, onDateSelection, props.date, isSelected, shouldCloseOnSelect, onApply]
+  );
+  const selectionState = useMemo(() => {
+    let isSelectionStart = false;
+    let isSelectionEnd = false;
+    let isSelectedCell = false;
+    let isInRange = false;
+    let isHoverRange = false;
+    let isSelectingMode = false;
+    if (rangeSelection?.start) {
+      isSelectionStart = isSameDay(props.date, rangeSelection.start);
+      isSelectionEnd = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
+      isSelectedCell = isSelectionStart || isSelectionEnd;
+      isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
+      if (rangeSelection.start && rangeSelection.end) {
+        const dateValue = props.date;
+        const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
+        const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
+        isInRange = isAfterStart && isBeforeEnd;
+      }
+      if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
+        const dateValue = props.date;
+        const { start } = rangeSelection;
+        const end = hoverDate;
+        const earlierDate = start.compare(end) <= 0 ? start : end;
+        const laterDate = start.compare(end) <= 0 ? end : start;
+        const isAfterStart = dateValue.compare(earlierDate) > 0;
+        const isBeforeEnd = dateValue.compare(laterDate) < 0;
+        isHoverRange = isAfterStart && isBeforeEnd;
+      }
+    } else {
+      isSelectionStart = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
+      isSelectionEnd = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
+      isSelectedCell = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
+      isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
+      if (isRange(state) && state.highlightedRange && !isSelected) {
+        const dateValue = props.date;
+        const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
+        const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
+        isHoverRange = isAfterStart && isBeforeEnd;
+      }
+    }
+    return { isSelectionStart, isSelectionEnd, isSelectedCell, isInRange, isHoverRange, isSelectingMode };
+  }, [props.date, rangeSelection, state, isSelected, hoverDate]);
+  const handleEvent = (event, eventHandler) => {
+    if (isOutsideVisibleRange) {
+      state.selectDate(props.date);
+      state.setFocusedDate(props.date);
+    }
+    eventHandler?.(event);
+    if (isSelected && shouldCloseOnSelect) {
+      onApply?.();
+    }
+  };
+  const onMouseEnter = useCallback(() => {
+    if (onDateHover && selectionState.isSelectingMode) {
+      onDateHover(props.date);
+    }
+  }, [onDateHover, selectionState.isSelectingMode, props.date]);
+  const onMouseLeave = useCallback(() => {
+    if (onDateHover && selectionState.isSelectingMode) {
+      onDateHover(null);
+    }
+  }, [onDateHover, selectionState.isSelectingMode]);
+  const cellClassName = useMemo(() => {
+    const { isSelectedCell, isInRange, isHoverRange, isSelectingMode, isSelectionStart, isSelectionEnd } = selectionState;
+    return clsx(
+      "mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2",
+      "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1",
+      "border border-transparent border-solid",
+      // Base text colors
+      !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
+      !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-primary-disabled",
+      // Selected cell styling
+      isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-text-primary-idle-inverted",
+      // Selection start cell styling
+      isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none",
+      // Selection end cell styling
+      isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd && !isSelectionStart && "rounded-l-none",
+      // Disabled state
+      isDisabled && !isOutsideVisibleRange && "cursor-default",
+      // Disabled cell styling
+      isDisabled && "opacity-20",
+      // Regular hover state - only for non-selected, non-disabled, visible cells when not in selecting mode
+      !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !(isDisabled && !isOutsideVisibleRange) && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1",
+      // Range styling - for dates between start and end
+      isInRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover",
+      // Hover range styling - for potential range during hover
+      isHoverRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover",
+      // Hover state for selecting mode
+      !isInRange && !isSelectedCell && isSelectingMode && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted",
+      // css only hover effect during selection mode for better performance
+      isSelectingMode && !isSelectedCell && !isInRange && !isHoverRange && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1"
+    );
+  }, [selectionState, isOutsideVisibleRange, rangeSelection, isDisabled]);
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...mergeProps(buttonProps, focusProps),
+      "aria-disabled": void 0,
+      onMouseEnter,
+      onMouseLeave,
+      className: cellClassName,
+      onClick: (e) => handleEvent(e, onClick),
+      onKeyDown: (e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date)),
+      children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          as: "span",
+          size: "label-2",
+          className: "block w-6 overflow-hidden text-ellipsis text-center",
+          children: formattedDate
+        }
+      )
+    }
+  ) });
+};
+export {
+  CalendarCell
+};

package/dist/components/inputs/DateTime/shared/CalendarGrid.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCalendarGrid } from "@react-aria/calendar";
+import { clsx } from "clsx";
+import { CalendarCell } from "./CalendarCell.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+const WEEK_INDICES = [0, 1, 2, 3, 4, 5];
+const CalendarGrid = ({
+  state,
+  onApply,
+  shouldCloseOnSelect,
+  offset = {},
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation,
+  className,
+  calendarSide,
+  ...props
+}) => {
+  const { gridProps, headerProps, weekDays } = useCalendarGrid({ ...props, weekdayStyle: "short" }, state);
+  const startDate = state.visibleRange.start.add(offset);
+  const handleDateSelection = (date) => {
+    onDateSelection?.(date, calendarSide);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx("h-72 w-full px-3 py-1 md:w-80", className), children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ...gridProps,
+      cellPadding: "0",
+      className: "w-full",
+      children: [
+        /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day) => /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            size: "label-2",
+            className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
+            children: day.substring(0, 2)
+          }
+        ) }, day)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map(
+          (date, i) => date ? /* @__PURE__ */ jsx(
+            CalendarCell,
+            {
+              state,
+              date,
+              onApply,
+              shouldCloseOnSelect,
+              onDateSelection: handleDateSelection,
+              onDateHover,
+              rangeSelection,
+              hoverDate,
+              onKeyboardNavigation
+            },
+            i
+          ) : (
+            // oxlint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsx("td", {}, i)
+          )
+        ) }, weekIndex)) })
+      ]
+    }
+  ) });
+};
+export {
+  CalendarGrid
+};

package/{src → dist}/components/inputs/DateTime/shared/CalendarHeader.d.ts

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from '@react-aria/button';
 import { CalendarState } from '@react-stately/calendar';
 import { DatePickerState } from 'react-stately';
-import { ToggleState } from '#ui/components/inputs/DateTime/shared/Calendar';
+import { ToggleState } from './Calendar';
 interface CalendarProps {
     calendarState: CalendarState;
     datePickerState?: DatePickerState;

package/dist/components/inputs/DateTime/shared/CalendarHeader.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+import { Button, ToggleButtonGroup } from "react-aria-components";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
+import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+const HourCycle = {
+  12: "h12",
+  24: "h23"
+};
+const CalendarHeader = ({
+  calendarState,
+  datePickerState,
+  prevButtonProps,
+  nextButtonProps,
+  includesTime,
+  hourCycle,
+  toggleState,
+  setToggleState
+}) => {
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: calendarState.timeZone
+  });
+  const timeFormatter = useDateFormatter({
+    timeStyle: "short",
+    timeZone: calendarState.timeZone,
+    hourCycle: hourCycle ? HourCycle[hourCycle] : void 0
+  });
+  const year = calendarState.focusedDate.year.toString();
+  const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
+  const timeValue = datePickerState?.timeValue || new Time();
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(timeValue.hour, timeValue.minute);
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "inline-flex h-12 items-center p-3", children: !toggleState && /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...prevButtonProps,
+        className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ToggleButtonGroup, { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        PillButton,
+        {
+          color: "secondary",
+          toggle: true,
+          isSelected: toggleState === "month",
+          onChange: (isSelected) => setToggleState(isSelected ? "month" : null),
+          children: month
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PillButton,
+        {
+          color: "secondary",
+          toggle: true,
+          isSelected: toggleState === "year",
+          onChange: (isSelected) => setToggleState(isSelected ? "year" : null),
+          children: year
+        }
+      ),
+      includesTime && /* @__PURE__ */ jsx(
+        PillButton,
+        {
+          color: "secondary",
+          toggle: true,
+          isSelected: toggleState === "time",
+          onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
+          children: timeFormatter.format(date)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex h-12 items-center p-3", children: !toggleState && /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...nextButtonProps,
+        className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+      }
+    ) })
+  ] });
+};
+export {
+  CalendarHeader
+};

package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js

@@ -0,0 +1,203 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useDateFormatter } from "@react-aria/i18n";
+import { useMemo } from "react";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../../assets/icons/ChevronsRight.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+import { Select } from "../../Selection/Select/Select.js";
+const CalendarSelectHeader = ({
+  state,
+  isPrevMonthDisabled,
+  isPrevYearDisabled,
+  isNextMonthDisabled,
+  isNextYearDisabled,
+  offset = { months: 0 },
+  onNavigate,
+  maxDate,
+  minDate
+}) => {
+  const displayDate = state.visibleRange.start.add(offset);
+  const currentMonth = displayDate.month - 1;
+  const currentYear = displayDate.year;
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+  const MONTHS = useMemo(() => {
+    const months = [];
+    for (let i = 1; i <= numMonths; i++) {
+      const date = state.focusedDate.set({ month: i });
+      months.push(formatter.format(date.toDate(state.timeZone)));
+    }
+    return months;
+  }, [formatter, numMonths, state.focusedDate, state.timeZone]);
+  const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+  const getAvailableMonths = () => {
+    return MONTHS.map((month, i) => {
+      const monthDate = displayDate.set({ month: i + 1 });
+      let isDisabled = false;
+      if (maxDate) {
+        isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+      }
+      if (minDate) {
+        isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+      }
+      return { month, value: i, isDisabled };
+    });
+  };
+  const getAvailableYears = () => {
+    return years.map((year) => {
+      let isDisabled = false;
+      if (maxDate) {
+        isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+      }
+      if (minDate && !isDisabled) {
+        isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+      }
+      return { year, isDisabled };
+    });
+  };
+  const availableMonths = getAvailableMonths();
+  const availableYears = getAvailableYears();
+  const handleMonthChange = (value) => {
+    if (value === null) {
+      return;
+    }
+    const newDate = displayDate.set({ month: value + 1 });
+    onNavigate?.(newDate);
+  };
+  const handleYearChange = (value) => {
+    if (value === null) {
+      return;
+    }
+    const newDate = displayDate.set({ year: value });
+    onNavigate?.(newDate);
+  };
+  const handlePrevMonth = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.subtract({ months: 1 });
+    onNavigate?.(newDate);
+  };
+  const handleNextMonth = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.add({ months: 1 });
+    onNavigate?.(newDate);
+  };
+  const handlePrevYear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.subtract({ years: 1 });
+    onNavigate?.(newDate);
+  };
+  const handleNextYear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newDate = displayDate.add({ years: 1 });
+    onNavigate?.(newDate);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          color: "secondary",
+          isDisabled: isPrevYearDisabled,
+          onClick: handlePrevYear,
+          icon: ChevronsLeftIcon,
+          label: "Previous year"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          color: "secondary",
+          isDisabled: isPrevMonthDisabled,
+          onClick: handlePrevMonth,
+          icon: ChevronLeftIcon,
+          label: "Previous month"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Month",
+          hideLabel: true,
+          customTrigger: /* @__PURE__ */ jsx(
+            PillButton,
+            {
+              color: "secondary",
+              iconPosition: "right",
+              icon: ArrowDropDownIcon,
+              children: MONTHS[currentMonth]
+            }
+          ),
+          ignoreTriggerWidth: true,
+          items: availableMonths.map(({ month, value, isDisabled }) => ({
+            label: month,
+            id: value,
+            isDisabled
+          })).filter(({ isDisabled }) => !isDisabled),
+          value: currentMonth,
+          onChange: handleMonthChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Year",
+          hideLabel: true,
+          customTrigger: /* @__PURE__ */ jsx(
+            PillButton,
+            {
+              color: "secondary",
+              iconPosition: "right",
+              icon: ArrowDropDownIcon,
+              children: currentYear.toString()
+            }
+          ),
+          items: availableYears.map(({ year, isDisabled }) => ({
+            label: year.toString(),
+            id: year,
+            isDisabled
+          })).filter(({ isDisabled }) => !isDisabled),
+          value: currentYear,
+          onChange: handleYearChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          color: "secondary",
+          isDisabled: isNextMonthDisabled,
+          onClick: handleNextMonth,
+          icon: ChevronRightIcon,
+          label: "Next month"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          color: "secondary",
+          isDisabled: isNextYearDisabled,
+          onClick: handleNextYear,
+          icon: ChevronsRightIcon,
+          label: "Next year"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CalendarSelectHeader
+};

package/dist/components/inputs/DateTime/shared/DateField.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { createCalendar } from "@internationalized/date";
+import { useRef, useImperativeHandle, useEffect } from "react";
+import { useLocale, useDateField } from "react-aria";
+import { useDateFieldState } from "react-stately";
+import { DateSegmentItem } from "./DateSegmentItem.js";
+const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }) => {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const dataFieldRef = useRef(null);
+  const { fieldProps } = useDateField(props, state, dataFieldRef);
+  const handleBlur = (e) => {
+    fieldProps.onBlur?.(e);
+    if (!state.value) {
+      return;
+    }
+    const currentValue = state.value;
+    const { year } = currentValue;
+    if (year >= 0 && year <= 99) {
+      const correctedYear = year <= 50 ? 2e3 + year : 1900 + year;
+      const correctedDate = currentValue.set({ year: correctedYear });
+      if (correctedDate) {
+        state.setValue(correctedDate);
+        props.onChange?.(correctedDate);
+      }
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    clearField: () => {
+      state.setValue(null);
+    }
+  }));
+  useEffect(() => {
+    onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
+  }, [state.segments, onClearChange]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...fieldProps,
+      ref: dataFieldRef,
+      onBlur: handleBlur,
+      className: "relative w-full",
+      children: /* @__PURE__ */ jsx("div", { className: "flex", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
+        DateSegmentItem,
+        {
+          segment,
+          state,
+          isDisabled: props.isDisabled,
+          hidePlaceholder
+        },
+        i
+      )) })
+    }
+  );
+};
+export {
+  DateField
+};

package/{src → dist}/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
-import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
+import { InputVariantProps } from '../../shared/input.cva';
 interface DatePickerInputProps extends InputVariantProps {
     ref?: Ref<HTMLDivElement>;
     groupProps: DatePickerAria["groupProps"];