@povio/ui 0.0.4 → 0.0.6

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.d.ts

@@ -0,0 +1,12 @@
+import { DateFieldStateOptions } from '@react-stately/datepicker';
+import { Ref } from 'react';
+export interface DateFieldHandle {
+    clearField: () => void;
+}
+interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createCalendar"> {
+    ref?: Ref<DateFieldHandle>;
+    onClearChange?: (canClear: boolean) => void;
+    hidePlaceholder?: boolean;
+}
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -0,0 +1,20 @@
+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';
+interface DatePickerInputProps extends InputVariantProps {
+    ref?: Ref<HTMLDivElement>;
+    groupProps: DatePickerAria["groupProps"];
+    fieldProps: DatePickerAria["fieldProps"];
+    endFieldProps?: DatePickerAria["fieldProps"];
+    buttonProps: DatePickerAria["buttonProps"];
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    disableDropdown?: boolean;
+    isDateTime?: boolean;
+    isClearable?: boolean;
+    headerProps?: FormFieldHeaderProps;
+    todayIcon?: boolean;
+}
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,163 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { now, getLocalTimeZone, today } from "@internationalized/date";
+import { clsx } from "clsx";
+import { useState, useRef, useCallback, useMemo } from "react";
+import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import useMeasure from "react-use-measure";
+import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
+import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { DateField } from "./DateField.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { useInputCva } from "../../shared/input.cva.js";
+const DatePickerInput = ({
+  ref,
+  as,
+  groupProps,
+  fieldProps,
+  endFieldProps,
+  buttonProps,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isDateTime,
+  isClearable,
+  headerProps,
+  todayIcon,
+  ...props
+}) => {
+  const inputCva = useInputCva();
+  const [canClear, setCanClear] = useState(false);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+  const { isFocusVisible } = useFocusVisible();
+  const dateFieldRef = useRef(null);
+  const endDateFieldRef = useRef(null);
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+  const onClearChange = useCallback((canClearInput) => {
+    setCanClear(canClearInput);
+  }, []);
+  const onClear = () => {
+    dateFieldRef.current?.clearField();
+    fieldProps.onChange?.(null);
+    const timeout = setTimeout(() => {
+      endDateFieldRef.current?.clearField();
+      clearTimeout(timeout);
+    }, 0);
+    setCanClear(false);
+  };
+  const onToday = () => {
+    if (isDateTime) {
+      fieldProps.onChange?.(now(getLocalTimeZone()));
+    } else {
+      fieldProps.onChange?.(today(getLocalTimeZone()));
+    }
+  };
+  const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    return {
+      paddingLeft: `calc(${leftPadding}px)`
+    };
+  }, [labelWidth, as]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: inputCva({
+        variant,
+        as,
+        size,
+        ...props,
+        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2")
+      }),
+      "data-rac": "",
+      "data-hovered": isHovered || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-focus-within": isFocused || void 0,
+      "data-focus-visible": isFocused && isFocusVisible || void 0,
+      "data-has-selection": fieldProps.value !== null || void 0,
+      ...groupProps,
+      ...focusWithinProps,
+      ...hoverProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+            FormFieldLabel,
+            {
+              ref: labelContentRef,
+              as,
+              ...headerProps
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2",
+              style,
+              children: [
+                todayIcon && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: "",
+                    icon: TodayIcon,
+                    size: "xxs",
+                    onPress: onToday
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DateField,
+                  {
+                    ref: dateFieldRef,
+                    ...fieldProps,
+                    isDisabled,
+                    isInvalid,
+                    onClearChange,
+                    hidePlaceholder
+                  }
+                ),
+                endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", { className: "select-none", children: "–" }),
+                  /* @__PURE__ */ jsx(
+                    DateField,
+                    {
+                      ref: endDateFieldRef,
+                      ...endFieldProps,
+                      isDisabled,
+                      isInvalid,
+                      onClearChange,
+                      hidePlaceholder
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center gap-2", as === "floating" && "-mt-4"), children: [
+          isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }),
+          !disableDropdown && /* @__PURE__ */ jsx(
+            InlineIconButton,
+            {
+              label: "",
+              color: "secondary",
+              ...buttonProps,
+              icon: isDateTime ? DateTimeIcon : CalendarIcon,
+              isDisabled
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  DatePickerInput
+};

package/dist/components/inputs/DateTime/shared/DateSegmentItem.d.ts

@@ -0,0 +1,11 @@
+import { DateFieldState, DateSegment } from '@react-stately/datepicker';
+interface DateSegmentProps {
+    state: DateFieldState;
+    segment: DateSegment;
+    isDisabled?: boolean;
+    timePickerOnly?: boolean;
+    hidePlaceholder?: boolean;
+}
+export declare const getPlaceholder: (segment: DateSegment) => string | null;
+export declare const DateSegmentItem: ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }: DateSegmentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useDateSegment } from "react-aria";
+const getPlaceholder = (segment) => {
+  if (!segment.isPlaceholder) {
+    return null;
+  }
+  switch (segment.type) {
+    case "hour":
+      return "hh";
+    case "minute":
+      return "mm";
+    case "second":
+      return "ss";
+    default:
+      return segment.placeholder;
+  }
+};
+const DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const isInputEmpty = !state.value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...segmentProps,
+      ref,
+      className: clsx(
+        "box-content rounded-input-rounding-default",
+        isDisabled && "text-interactive-text-secondary-disabled",
+        !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1",
+        !isDisabled && !isInputEmpty && "text-text-default-1",
+        "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1",
+        ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1"
+      ),
+      children: !hidePlaceholder && /* @__PURE__ */ jsxs(Fragment, { children: [
+        segment.isPlaceholder && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none",
+            children: getPlaceholder(segment)
+          }
+        ),
+        segment.isPlaceholder ? "" : segment.text
+      ] })
+    }
+  );
+};
+export {
+  DateSegmentItem,
+  getPlaceholder
+};

package/dist/components/inputs/DateTime/shared/DateTimeDialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from 'react';
+import { AriaDialogProps } from 'react-aria';
+interface DateTimeDialogProps {
+    children: ReactNode;
+    footer: ReactNode;
+    sidebar?: ReactNode;
+    hideSidebar?: boolean;
+    label: string;
+    isOpen: boolean;
+    triggerRef?: RefObject<HTMLElement | null>;
+    dialogProps?: AriaDialogProps;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const DateTimeDialog: ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange, }: DateTimeDialogProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,76 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Popover, Dialog } from "react-aria-components";
+import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
+import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+const DateTimeDialog = ({
+  hideSidebar,
+  children,
+  footer,
+  sidebar,
+  label,
+  isOpen,
+  triggerRef,
+  dialogProps,
+  onOpenChange
+}) => {
+  const isDesktop = useBreakpoint("md");
+  if (isDesktop) {
+    if (!isOpen) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        triggerRef,
+        isOpen,
+        placement: "bottom start",
+        onOpenChange,
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            ...dialogProps,
+            className: "!outline-none",
+            "aria-label": label,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5", children: [
+              !hideSidebar && sidebar,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between", children: [
+                children,
+                footer
+              ] })
+            ] })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    BottomSheet,
+    {
+      label,
+      footer,
+      isOpen,
+      onOpenChange,
+      sheetMarginBottom: 0,
+      isScrollable: false,
+      height: "auto",
+      isDismissable: true,
+      children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          FormFieldHeader,
+          {
+            label,
+            className: "!mb-8 shrink-0 px-4 pt-3",
+            rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
+          }
+        ),
+        children,
+        !hideSidebar && sidebar
+      ] })
+    }
+  );
+};
+export {
+  DateTimeDialog
+};

package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.d.ts

@@ -0,0 +1,7 @@
+interface DatePickerFooterProps {
+    isValid?: boolean;
+    onTodayPress?: () => void;
+    onApply: () => void;
+}
+export declare const DateTimeDialogFooter: ({ isValid, onTodayPress, onApply }: DatePickerFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
+const DateTimeDialogFooter = ({ isValid = true, onTodayPress, onApply }) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: clsx(
+        "flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5",
+        onTodayPress ? "justify-between" : "justify-end"
+      ),
+      children: [
+        onTodayPress && /* @__PURE__ */ jsx(
+          TextButton,
+          {
+            type: "button",
+            color: "primary",
+            onPress: onTodayPress,
+            children: t(($) => $.ui.datePicker.today)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextButton,
+          {
+            type: "button",
+            color: "secondary",
+            onPress: onApply,
+            isDisabled: !isValid,
+            children: t(($) => $.ui.datePicker.save)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  DateTimeDialogFooter
+};

package/dist/components/inputs/DateTime/shared/MonthPicker.d.ts

@@ -0,0 +1,7 @@
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { Key } from 'react-aria-components';
+export interface MonthPickerProps {
+    state: CalendarState | RangeCalendarState;
+    onSelectionChange: (key: Set<Key>) => void;
+}
+export declare const MonthPicker: ({ state, onSelectionChange }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;