@povio/ui 2.1.14 → 2.1.16

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

@@ -1,206 +0,0 @@
-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 { Button } from "react-aria-components";
-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 { Typography } from "../../../text/Typography/Typography.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,
-  disableManualEntry,
-  placeholder,
-  onOpenDropdown,
-  ...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);
-    endDateFieldRef.current?.clearField();
-    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-is-empty": fieldProps.value === null || 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: [
-                disableManualEntry && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    onPress: onOpenDropdown,
-                    className: "absolute inset-0 z-0",
-                    isDisabled
-                  }
-                ),
-                todayIcon && /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    label: "",
-                    icon: TodayIcon,
-                    size: "none",
-                    onPress: onToday,
-                    className: "relative z-1"
-                  }
-                ),
-                disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    size: "label-1",
-                    className: "text-text-default-3",
-                    children: placeholder
-                  }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    DateField,
-                    {
-                      ref: dateFieldRef,
-                      ...fieldProps,
-                      isDisabled,
-                      isInvalid,
-                      onClearChange,
-                      hidePlaceholder,
-                      disableManualEntry
-                    }
-                  ),
-                  endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: clsx(
-                          "pointer-events-none select-none",
-                          isDisabled && "text-interactive-text-secondary-disabled"
-                        ),
-                        children: "–"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      DateField,
-                      {
-                        ref: endDateFieldRef,
-                        ...endFieldProps,
-                        isDisabled,
-                        isInvalid,
-                        onClearChange,
-                        hidePlaceholder,
-                        disableManualEntry
-                      }
-                    )
-                  ] })
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative z-1 flex items-center gap-2", children: [
-          isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }),
-          (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
-            InlineIconButton,
-            {
-              label: "",
-              color: "secondary",
-              ...buttonProps,
-              icon: isDateTime ? DateTimeIcon : CalendarIcon,
-              isDisabled
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-export {
-  DatePickerInput
-};

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

@@ -1,55 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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,
-  isDisabled = false,
-  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",
-            isDisabled,
-            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

@@ -1,82 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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(() => {
-    const leftNextDate = leftDate.add({ months: 1 });
-    return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
-  }, [leftDate, rightDate]);
-  const isPrevDisabled = useMemo(() => {
-    const rightPrevDate = rightDate.subtract({ months: 1 });
-    return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.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: "h-64 w-[304px]!",
-              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: "h-64 w-[304px]!",
-              calendarSide: "right"
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
-};
-export {
-  RangeCalendar
-};

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

@@ -1,26 +0,0 @@
-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
-};