@povio/ui 0.0.6 → 0.0.8

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

@@ -1,163 +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 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.js

@@ -1,54 +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"
-      ),
-      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.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,41 +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, 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

@@ -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,131 +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(() => {
-    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

@@ -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
-};