@povio/ui 0.0.4 → 0.0.6

package/{src/components/inputs/DateTime/shared/MonthPicker.tsx → dist/components/inputs/DateTime/shared/MonthPicker.js}

@@ -1,33 +1,23 @@
+import { jsx } from "react/jsx-runtime";
 import { useDateFormatter } from "@react-aria/i18n";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
 import { clsx } from "clsx";
-import { type Key, ListBox, ListBoxItem } from "react-aria-components";
-
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-export interface MonthPickerProps {
-  state: CalendarState | RangeCalendarState;
-  onSelectionChange: (key: Set<Key>) => void;
-}
-
-export const MonthPicker = ({ state, onSelectionChange }: MonthPickerProps) => {
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { Typography } from "../../../text/Typography/Typography.js";
+const MonthPicker = ({ state, onSelectionChange }) => {
   const formatter = useDateFormatter({
     month: "long",
-    timeZone: state.timeZone,
+    timeZone: state.timeZone
   });
-
   const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-
   const getMonths = () => {
-    const months: string[] = [];
+    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;
   };
-
-  const isMonthDisabled = (month: number) => {
+  const isMonthDisabled = (month) => {
     if (state.minValue && state.focusedDate.set({ month }) < state.minValue) {
       return true;
     }
@@ -36,56 +26,57 @@ export const MonthPicker = ({ state, onSelectionChange }: MonthPickerProps) => {
     }
     return false;
   };
-
-  return (
-    <ListBox
-      autoFocus
-      aria-label="Month"
-      selectionMode="single"
-      layout="grid"
-      selectedKeys={[state.focusedDate.month]}
-      onSelectionChange={(key) => {
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      autoFocus: true,
+      "aria-label": "Month",
+      selectionMode: "single",
+      layout: "grid",
+      selectedKeys: [state.focusedDate.month],
+      onSelectionChange: (key) => {
         if (key === "all") {
           return;
         }
-
         const index = [...key][0];
-
         if (typeof index === "number") {
-          const date = state.focusedDate.set({ month: [...key][0] as number });
+          const date = state.focusedDate.set({ month: [...key][0] });
           state.setFocusedDate(date);
         }
-
         onSelectionChange(key);
-      }}
-      className="grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80"
-    >
-      {getMonths().map((month, index) => {
+      },
+      className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
+      children: getMonths().map((month, index) => {
         const isDisabled = isMonthDisabled(index + 1);
-        return (
-          <ListBoxItem
-            key={month}
-            id={index + 1}
-            textValue={month}
-            isDisabled={isDisabled}
-            className={clsx(
+        return /* @__PURE__ */ jsx(
+          ListBoxItem,
+          {
+            id: index + 1,
+            textValue: month,
+            isDisabled,
+            className: clsx(
               "flex items-center justify-center text-interactive-text-secondary-idle",
               "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1",
               "hover:text-interactive-text-secondary-hover",
               "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
               "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1",
-              isDisabled ? "cursor-default opacity-50" : "cursor-pointer",
-            )}
-          >
-            <Typography
-              as="span"
-              size="label-2"
-            >
-              {month}
-            </Typography>
-          </ListBoxItem>
+              isDisabled ? "cursor-default opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                as: "span",
+                size: "label-2",
+                children: month
+              }
+            )
+          },
+          month
         );
-      })}
-    </ListBox>
+      })
+    }
   );
 };
+export {
+  MonthPicker
+};

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

@@ -0,0 +1,26 @@
+import { RangeCalendarState, RangeCalendarStateOptions } from '@react-stately/calendar';
+import { KeyboardEvent } from 'react';
+import { DateValue } from 'react-aria';
+interface DateRange {
+    start: DateValue;
+    end: DateValue;
+}
+interface CalendarProps {
+    className?: string;
+    leftCalendarState: RangeCalendarState;
+    rightCalendarState: RangeCalendarState;
+    calendarProps: Omit<RangeCalendarStateOptions, "locale" | "createCalendar">;
+    onApply: () => void;
+    onRangeChange?: (value: DateRange | null) => void;
+    onDateSelection?: (date: DateValue, calendarSide?: "left" | "right") => void;
+    onDateHover?: (date: DateValue | null) => void;
+    rangeSelection?: {
+        start: DateValue | null;
+        end: DateValue | null;
+        isSelecting: boolean;
+    };
+    hoverDate?: DateValue | null;
+    onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue, calendarSide: "left" | "right") => boolean;
+}
+export declare const RangeCalendar: ({ className, leftCalendarState, rightCalendarState, calendarProps, onApply, onRangeChange: _onRangeChange, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRangeCalendar } from "@react-aria/calendar";
+import { clsx } from "clsx";
+import { useRef, useMemo } from "react";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { CalendarSelectHeader } from "./CalendarSelectHeader.js";
+const RangeCalendar = ({
+  className,
+  leftCalendarState,
+  rightCalendarState,
+  calendarProps,
+  onApply,
+  onRangeChange: _onRangeChange,
+  onDateSelection,
+  onDateHover,
+  rangeSelection,
+  hoverDate,
+  onKeyboardNavigation
+}) => {
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+  const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+  const leftDate = leftCalendarState.visibleRange.start;
+  const rightDate = rightCalendarState.visibleRange.start;
+  const handleLeftKeyboardNavigation = (event, date) => {
+    return onKeyboardNavigation?.(event, date, "left") ?? false;
+  };
+  const handleRightKeyboardNavigation = (event, date) => {
+    return onKeyboardNavigation?.(event, date, "right") ?? false;
+  };
+  const handleLeftNavigate = (newDate) => {
+    const rightCurrentDate = rightCalendarState.visibleRange.start;
+    if (newDate.year < rightCurrentDate.year || newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month) {
+      leftCalendarState.setFocusedDate(newDate);
+    } else {
+      const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+      leftCalendarState.setFocusedDate(closestValidDate);
+    }
+  };
+  const handleRightNavigate = (newDate) => {
+    const leftCurrentDate = leftCalendarState.visibleRange.start;
+    if (newDate.year > leftCurrentDate.year || newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month) {
+      rightCalendarState.setFocusedDate(newDate);
+    } else {
+      const closestValidDate = leftCurrentDate.add({ months: 1 });
+      rightCalendarState.setFocusedDate(closestValidDate);
+    }
+  };
+  const isNextDisabled = useMemo(() => {
+    return leftDate.year > rightDate.year || leftDate.year === rightDate.year && leftDate.add({ months: 1 }).month === rightDate.month;
+  }, [leftDate, rightDate]);
+  const isPrevDisabled = useMemo(() => {
+    return rightDate.year < leftDate.year || rightDate.year === leftDate.year && rightDate.subtract({ months: 1 }).month === leftDate.month;
+  }, [leftDate, rightDate]);
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className), children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...leftCalendarAriaProps,
+        ref: leftRef,
+        className: "flex flex-col items-center",
+        children: [
+          /* @__PURE__ */ jsx(
+            CalendarSelectHeader,
+            {
+              state: leftCalendarState,
+              isNextMonthDisabled: isNextDisabled,
+              isNextYearDisabled: isNextDisabled,
+              onNavigate: handleLeftNavigate,
+              maxDate: rightDate
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CalendarGrid,
+            {
+              state: leftCalendarState,
+              onApply,
+              shouldCloseOnSelect: false,
+              onDateSelection,
+              rangeSelection,
+              onDateHover,
+              hoverDate,
+              onKeyboardNavigation: handleLeftKeyboardNavigation,
+              className: "!w-[304px] h-64",
+              calendarSide: "left"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rightCalendarAriaProps,
+        ref: rightRef,
+        className: "hidden flex-col items-center md:flex",
+        children: [
+          /* @__PURE__ */ jsx(
+            CalendarSelectHeader,
+            {
+              state: rightCalendarState,
+              isPrevMonthDisabled: isPrevDisabled,
+              isPrevYearDisabled: isPrevDisabled,
+              onNavigate: handleRightNavigate,
+              minDate: leftDate
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CalendarGrid,
+            {
+              state: rightCalendarState,
+              onApply,
+              shouldCloseOnSelect: false,
+              onDateSelection,
+              rangeSelection,
+              onDateHover,
+              hoverDate,
+              onKeyboardNavigation: handleRightKeyboardNavigation,
+              className: "!w-[304px] h-64",
+              calendarSide: "right"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  RangeCalendar
+};

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

@@ -0,0 +1,12 @@
+import { GroupDOMAttributes } from '@react-types/shared';
+import { Ref } from 'react';
+import { TimeFieldState } from 'react-stately';
+interface TimeFieldProps {
+    ref?: Ref<HTMLDivElement>;
+    fieldProps: GroupDOMAttributes;
+    state: TimeFieldState;
+    isDisabled?: boolean;
+    hidePlaceholder?: boolean;
+}
+export declare const TimeField: ({ ref, fieldProps, state, isDisabled, hidePlaceholder }: TimeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { DateSegmentItem } from "./DateSegmentItem.js";
+const TimeField = ({ ref, fieldProps, state, isDisabled, hidePlaceholder }) => {
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...fieldProps,
+      ref,
+      className: "flex",
+      children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
+        DateSegmentItem,
+        {
+          segment,
+          state,
+          isDisabled,
+          timePickerOnly: true,
+          hidePlaceholder
+        },
+        i
+      ))
+    }
+  ) });
+};
+export {
+  TimeField
+};

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

@@ -0,0 +1,10 @@
+import { DatePickerState, TimeFieldState } from '@react-stately/datepicker';
+type TimePickerFormProps = {
+    state: TimeFieldState;
+    datePickerState?: never;
+} | {
+    state?: never;
+    datePickerState: DatePickerState;
+};
+export declare const TimePickerForm: ({ state, datePickerState }: TimePickerFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+import { useTimeFieldState } from "@react-stately/datepicker";
+import { clsx } from "clsx";
+import { useRef, useEffect } from "react";
+import { useLocale, useTimeField, useDateSegment } from "react-aria";
+import { ChevronDownIcon } from "../../../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../../../assets/icons/ChevronUp.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { getPlaceholder } from "./DateSegmentItem.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
+const INCREMENT_STEP_SIZE = 5;
+const TimePickerForm = ({ state, datePickerState }) => {
+  const isDesktop = useBreakpoint("md");
+  const { locale } = useLocale();
+  const fieldState = useTimeFieldState({
+    locale,
+    defaultValue: datePickerState?.timeValue,
+    onChange: (value) => {
+      datePickerState?.setTimeValue(value ?? new Time(0, 0));
+    },
+    hideTimeZone: true
+  });
+  const ref = useRef(null);
+  const innerState = state ?? fieldState;
+  const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
+  const getAutoFocus = (index) => {
+    if (!isDesktop) {
+      return false;
+    }
+    return index === innerState.segments.findIndex(({ type }) => ["hour", "minute", "dayPeriod"].includes(type));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+      TimeSegmentButton,
+      {
+        segment,
+        state: innerState,
+        type: "increment"
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...fieldProps,
+        className: "flex items-center justify-center gap-4 py-2",
+        children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+          TimeSegmentInput,
+          {
+            segment,
+            state: innerState,
+            autoFocus: getAutoFocus(i)
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+      TimeSegmentButton,
+      {
+        segment,
+        state: innerState,
+        type: "decrement"
+      },
+      i
+    )) })
+  ] });
+};
+const TimeSegmentInput = ({ segment, state, autoFocus }) => {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const isDesktop = useBreakpoint("md");
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, [autoFocus]);
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-col text-center",
+        ref,
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            variant: "prominent-1",
+            size: "label-2",
+            className: "text-text-default-2",
+            children: segment.text
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-2", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...isDesktop && segmentProps,
+      className: clsx(
+        "w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center",
+        "font-labels-default text-text-default-3",
+        "border border-input-filled-idle border-solid",
+        "hover:border-interactive-contained-primary-hover",
+        "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"
+      ),
+      children: getPlaceholder(segment) ?? segment.text
+    }
+  ) });
+};
+const TimeSegmentButton = ({ segment, state, type }) => {
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const onPress = (isLongPress) => {
+    if (isLongPress && segment.type === "minute") {
+      const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+      const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
+      const newValue = Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE;
+      const normalizedValue = (newValue % 60 + 60) % 60;
+      stateRef.current.setSegment(segment.type, normalizedValue);
+    } else {
+      stateRef.current[type](segment.type);
+    }
+  };
+  const { onPressStart, onPressEnd } = useLongPressRepeat({
+    onPress,
+    enabled: segment.type !== "dayPeriod",
+    timeout: 300,
+    interval: 300
+  });
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex shrink-0", children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        variant: "prominent-1",
+        size: "label-2",
+        className: "invisible text-text-default-2",
+        "aria-hidden": true,
+        children: segment.text
+      }
+    ) });
+  }
+  const Icon = type === "increment" ? ChevronUpIcon : ChevronDownIcon;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-11 select-none items-center justify-center",
+      onContextMenu: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          label: "",
+          color: "secondary",
+          onPressStart,
+          onPressEnd,
+          icon: Icon
+        }
+      )
+    }
+  );
+};
+const showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
+export {
+  TimePickerForm
+};

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

@@ -0,0 +1,18 @@
+import { Ref } from 'react';
+import { DateFieldAria } from 'react-aria';
+import { TimeFieldState } from 'react-stately';
+import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+interface DatePickerInputProps extends InputVariantProps {
+    ref?: Ref<HTMLDivElement>;
+    fieldProps: DateFieldAria["fieldProps"];
+    state: TimeFieldState;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    disableDropdown?: boolean;
+    headerProps?: FormFieldHeaderProps;
+    isClearable?: boolean;
+    onPress: () => void;
+}
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isInvalid, disableDropdown, variant, size, isClearable, headerProps, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState, useMemo } from "react";
+import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import useMeasure from "react-use-measure";
+import { ClockIcon } from "../../../../assets/icons/Clock.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TimeField } from "./TimeField.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { useInputCva } from "../../shared/input.cva.js";
+const TimePickerInput = ({
+  ref,
+  as,
+  fieldProps,
+  state,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isClearable,
+  headerProps,
+  onPress,
+  ...props
+}) => {
+  const inputCva = useInputCva();
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+  const { isFocusVisible } = useFocusVisible();
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+  const hidePlaceholder = (as === "floating" || as === "filter") && !state.value && !isFocused;
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
+    return {
+      paddingLeft: `calc(${leftPadding}px)`
+    };
+  }, [labelWidth, as]);
+  const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+  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": state.value !== null || void 0,
+      ...fieldProps,
+      ...focusWithinProps,
+      ...hoverProps,
+      children: [
+        as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+          FormFieldLabel,
+          {
+            ref: labelContentRef,
+            as,
+            ...headerProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+          TimeField,
+          {
+            fieldProps,
+            state,
+            isDisabled,
+            hidePlaceholder
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("flex items-center gap-2", {
+              "-mt-4": as === "floating"
+            }),
+            children: [
+              isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }),
+              !disableDropdown && /* @__PURE__ */ jsx(
+                InlineIconButton,
+                {
+                  label: "",
+                  color: "secondary",
+                  onPress,
+                  icon: ClockIcon,
+                  isDisabled
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TimePickerInput
+};

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

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