@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,174 @@
+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, inputSide } from "../../shared/input.cva.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+const DatePickerInput = ({
+  ref,
+  as,
+  groupProps,
+  fieldProps,
+  endFieldProps,
+  buttonProps,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isDateTime,
+  isClearable,
+  headerProps,
+  todayIcon,
+  ...props
+}) => {
+  const inputCva = useInputCva();
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+  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()));
+      if (endFieldProps) {
+        endFieldProps.onChange?.(now(getLocalTimeZone()));
+      }
+    } else {
+      fieldProps.onChange?.(today(getLocalTimeZone()));
+      if (endFieldProps) {
+        endFieldProps.onChange?.(today(getLocalTimeZone()));
+      }
+    }
+  };
+  const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+  const style = useMemo(() => {
+    const paddingLeft = as === "filter" ? `calc(var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)` : "0px";
+    return {
+      paddingLeft
+    };
+  }, [labelWidth, as, size, inputSideCva]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: inputCva({
+        variant,
+        as,
+        size,
+        ...props,
+        className: clsx(
+          "group/date-picker-content relative flex min-w-input-width-min-width 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.js

@@ -0,0 +1,55 @@
+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",
+        hidePlaceholder && "opacity-0"
+      ),
+      children: /* @__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.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.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.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { useDateFormatter } from "@react-aria/i18n";
+import { clsx } from "clsx";
+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
+  });
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+  const getMonths = () => {
+    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) => {
+    if (state.minValue && state.focusedDate.set({ month }) < state.minValue) {
+      return true;
+    }
+    if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) {
+      return true;
+    }
+    return false;
+  };
+  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] });
+          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",
+      children: getMonths().map((month, index) => {
+        const isDisabled = isMonthDisabled(index + 1);
+        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"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                as: "span",
+                size: "label-2",
+                children: month
+              }
+            )
+          },
+          month
+        );
+      })
+    }
+  );
+};
+export {
+  MonthPicker
+};

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.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
+};