@povio/ui 0.0.4 → 0.0.6

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

@@ -1,44 +1,15 @@
-/* oxlint-disable jsx-a11y/no-static-element-interactions */
-
+import { jsx } from "react/jsx-runtime";
 import { isSameDay } from "@internationalized/date";
-import { type AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
+import { useCalendarCell } from "@react-aria/calendar";
 import { useFocusRing } from "@react-aria/focus";
 import { mergeProps } from "@react-aria/utils";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
 import { clsx } from "clsx";
-import {
-  type EventHandler,
-  type KeyboardEvent,
-  type MouseEvent,
-  type SyntheticEvent,
-  useCallback,
-  useMemo,
-  useRef,
-} from "react";
-import type { DateValue } from "react-aria";
-
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-const isRange = (state: CalendarState | RangeCalendarState): state is RangeCalendarState => {
+import { useRef, useCallback, useMemo } from "react";
+import { Typography } from "../../../text/Typography/Typography.js";
+const isRange = (state) => {
   return "highlightedRange" in state;
 };
-
-interface CalendarCellProps extends AriaCalendarCellProps {
-  state: CalendarState | RangeCalendarState;
-  onApply?: () => void;
-  shouldCloseOnSelect?: boolean;
-  onDateSelection?: (date: DateValue) => void;
-  onDateHover?: (date: DateValue | null) => void;
-  rangeSelection?: {
-    start: DateValue | null;
-    end: DateValue | null;
-    isSelecting: boolean;
-  };
-  hoverDate?: DateValue | null;
-  onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue) => boolean;
-}
-
-export const CalendarCell = ({
+const CalendarCell = ({
   state,
   onApply,
   shouldCloseOnSelect = true,
@@ -48,31 +19,26 @@ export const CalendarCell = ({
   hoverDate,
   onKeyboardNavigation,
   ...props
-}: CalendarCellProps) => {
-  const ref = useRef<HTMLDivElement>(null);
+}) => {
+  const ref = useRef(null);
   const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(
     props,
     state,
-    ref,
+    ref
   );
-
   const { focusProps } = useFocusRing();
-
   const onClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
+    (event) => {
       buttonProps.onClick?.(event);
-
       if (onDateSelection) {
         onDateSelection(props.date);
       }
-
       if (isSelected && shouldCloseOnSelect) {
         onApply?.();
       }
     },
-    [buttonProps, onDateSelection, props.date, isSelected, shouldCloseOnSelect, onApply],
+    [buttonProps, onDateSelection, props.date, isSelected, shouldCloseOnSelect, onApply]
   );
-
   const selectionState = useMemo(() => {
     let isSelectionStart = false;
     let isSelectionEnd = false;
@@ -80,45 +46,32 @@ export const CalendarCell = ({
     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;
-
-      // Check if date is in completed range (between start and end, exclusive of endpoints)
       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;
       }
-
-      // Check for hover range preview during selection
       if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
         const dateValue = props.date;
         const { start } = rangeSelection;
         const end = hoverDate;
-
-        // Ensure proper order for comparison
         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 {
-      // Fall back to default state-based selection
-      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);
+      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;
-
-      // Check for hover range from the built-in state
       if (isRange(state) && state.highlightedRange && !isSelected) {
         const dateValue = props.date;
         const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
@@ -126,14 +79,9 @@ export const CalendarCell = ({
         isHoverRange = isAfterStart && isBeforeEnd;
       }
     }
-
     return { isSelectionStart, isSelectionEnd, isSelectedCell, isInRange, isHoverRange, isSelectingMode };
   }, [props.date, rangeSelection, state, isSelected, hoverDate]);
-
-  const handleEvent = <T extends MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>>(
-    event: T,
-    eventHandler?: EventHandler<SyntheticEvent>,
-  ) => {
+  const handleEvent = (event, eventHandler) => {
     if (isOutsideVisibleRange) {
       state.selectDate(props.date);
       state.setFocusedDate(props.date);
@@ -143,23 +91,18 @@ export const CalendarCell = ({
       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;
-
+    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",
@@ -168,80 +111,50 @@ export const CalendarCell = ({
       !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",
+      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",
+      isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none",
       // Selection end cell styling
-      isSelectedCell &&
-        !isOutsideVisibleRange &&
-        rangeSelection &&
-        !rangeSelection.isSelecting &&
-        isSelectionEnd &&
-        !isSelectionStart &&
-        "rounded-l-none",
+      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",
+      !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",
+      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",
+      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",
+      !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",
+      isSelectingMode && !isSelectedCell && !isInRange && !isHoverRange && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1"
     );
   }, [selectionState, isOutsideVisibleRange, rangeSelection, isDisabled]);
-
-  return (
-    <td {...cellProps}>
-      <div
-        ref={ref}
-        {...mergeProps(buttonProps, focusProps)}
-        aria-disabled={undefined}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className={cellClassName}
-        onClick={(e) => handleEvent(e, onClick)}
-        onKeyDown={(e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date))}
-      >
-        <Typography
-          as="span"
-          size="label-2"
-          className="block w-6 overflow-hidden text-ellipsis text-center"
-        >
-          {formattedDate}
-        </Typography>
-      </div>
-    </td>
-  );
+  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.d.ts

@@ -0,0 +1,25 @@
+import { AriaCalendarGridProps } from '@react-aria/calendar';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { KeyboardEvent } from 'react';
+import { DateValue } from 'react-aria';
+interface CalendarGridProps extends AriaCalendarGridProps {
+    state: CalendarState | RangeCalendarState;
+    onApply?: () => void;
+    offset?: {
+        months?: number;
+    };
+    shouldCloseOnSelect?: boolean;
+    onDateSelection?: (date: DateValue, calendarSide?: "left" | "right") => void;
+    onDateHover?: (date: DateValue | null) => void;
+    rangeSelection?: {
+        start: DateValue | null;
+        end: DateValue | null;
+        isSelecting: boolean;
+    };
+    hoverDate?: DateValue | null;
+    className?: string;
+    onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue) => boolean;
+    calendarSide?: "left" | "right";
+}
+export declare const CalendarGrid: ({ state, onApply, shouldCloseOnSelect, offset, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+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';
+interface CalendarProps {
+    calendarState: CalendarState;
+    datePickerState?: DatePickerState;
+    prevButtonProps: AriaButtonProps;
+    nextButtonProps: AriaButtonProps;
+    includesTime?: boolean;
+    hourCycle?: 12 | 24;
+    toggleState: ToggleState | null;
+    setToggleState: (state: ToggleState | null) => void;
+}
+export declare const CalendarHeader: ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, toggleState, setToggleState, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { CalendarDate } from '@internationalized/date';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+interface CalendarSelectHeaderProps {
+    state: CalendarState | RangeCalendarState;
+    isPrevMonthDisabled?: boolean;
+    isPrevYearDisabled?: boolean;
+    isNextMonthDisabled?: boolean;
+    isNextYearDisabled?: boolean;
+    offset?: {
+        months: number;
+    };
+    onNavigate?: (newDate: CalendarDate) => void;
+    maxDate?: CalendarDate;
+    minDate?: CalendarDate;
+}
+export declare const CalendarSelectHeader: ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset, onNavigate, maxDate, minDate, }: CalendarSelectHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};