@povio/ui 0.0.7 → 0.0.8

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

@@ -1,160 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { isSameDay } from "@internationalized/date";
-import { useCalendarCell } from "@react-aria/calendar";
-import { useFocusRing } from "@react-aria/focus";
-import { mergeProps } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef, useCallback, useMemo } from "react";
-import { Typography } from "../../../text/Typography/Typography.js";
-const isRange = (state) => {
-  return "highlightedRange" in state;
-};
-const CalendarCell = ({
-  state,
-  onApply,
-  shouldCloseOnSelect = true,
-  onDateSelection,
-  onDateHover,
-  rangeSelection,
-  hoverDate,
-  onKeyboardNavigation,
-  ...props
-}) => {
-  const ref = useRef(null);
-  const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(
-    props,
-    state,
-    ref
-  );
-  const { focusProps } = useFocusRing();
-  const onClick = useCallback(
-    (event) => {
-      buttonProps.onClick?.(event);
-      if (onDateSelection) {
-        onDateSelection(props.date);
-      }
-      if (isSelected && shouldCloseOnSelect) {
-        onApply?.();
-      }
-    },
-    [buttonProps, onDateSelection, props.date, isSelected, shouldCloseOnSelect, onApply]
-  );
-  const selectionState = useMemo(() => {
-    let isSelectionStart = false;
-    let isSelectionEnd = false;
-    let isSelectedCell = false;
-    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;
-      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;
-      }
-      if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
-        const dateValue = props.date;
-        const { start } = rangeSelection;
-        const end = hoverDate;
-        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 {
-      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;
-      if (isRange(state) && state.highlightedRange && !isSelected) {
-        const dateValue = props.date;
-        const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
-        const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
-        isHoverRange = isAfterStart && isBeforeEnd;
-      }
-    }
-    return { isSelectionStart, isSelectionEnd, isSelectedCell, isInRange, isHoverRange, isSelectingMode };
-  }, [props.date, rangeSelection, state, isSelected, hoverDate]);
-  const handleEvent = (event, eventHandler) => {
-    if (isOutsideVisibleRange) {
-      state.selectDate(props.date);
-      state.setFocusedDate(props.date);
-    }
-    eventHandler?.(event);
-    if (isSelected && shouldCloseOnSelect) {
-      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;
-    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",
-      "border border-transparent border-solid",
-      // Base text colors
-      !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",
-      // Selection start cell styling
-      isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none",
-      // Selection end cell styling
-      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",
-      // Range styling - for dates between start and end
-      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",
-      // Hover state for selecting mode
-      !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"
-    );
-  }, [selectionState, isOutsideVisibleRange, rangeSelection, isDisabled]);
-  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.js

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

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

@@ -1,203 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useDateFormatter } from "@react-aria/i18n";
-import { useMemo } from "react";
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
-import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
-import { ChevronsLeftIcon } from "../../../../assets/icons/ChevronsLeft.js";
-import { ChevronsRightIcon } from "../../../../assets/icons/ChevronsRight.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { PillButton } from "../../../buttons/PillButton/PillButton.js";
-import { Select } from "../../Selection/Select/Select.js";
-const CalendarSelectHeader = ({
-  state,
-  isPrevMonthDisabled,
-  isPrevYearDisabled,
-  isNextMonthDisabled,
-  isNextYearDisabled,
-  offset = { months: 0 },
-  onNavigate,
-  maxDate,
-  minDate
-}) => {
-  const displayDate = state.visibleRange.start.add(offset);
-  const currentMonth = displayDate.month - 1;
-  const currentYear = displayDate.year;
-  const formatter = useDateFormatter({
-    month: "long",
-    timeZone: state.timeZone
-  });
-  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-  const MONTHS = useMemo(() => {
-    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;
-  }, [formatter, numMonths, state.focusedDate, state.timeZone]);
-  const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
-  const getAvailableMonths = () => {
-    return MONTHS.map((month, i) => {
-      const monthDate = displayDate.set({ month: i + 1 });
-      let isDisabled = false;
-      if (maxDate) {
-        isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
-      }
-      if (minDate) {
-        isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
-      }
-      return { month, value: i, isDisabled };
-    });
-  };
-  const getAvailableYears = () => {
-    return years.map((year) => {
-      let isDisabled = false;
-      if (maxDate) {
-        isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
-      }
-      if (minDate && !isDisabled) {
-        isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
-      }
-      return { year, isDisabled };
-    });
-  };
-  const availableMonths = getAvailableMonths();
-  const availableYears = getAvailableYears();
-  const handleMonthChange = (value) => {
-    if (value === null) {
-      return;
-    }
-    const newDate = displayDate.set({ month: value + 1 });
-    onNavigate?.(newDate);
-  };
-  const handleYearChange = (value) => {
-    if (value === null) {
-      return;
-    }
-    const newDate = displayDate.set({ year: value });
-    onNavigate?.(newDate);
-  };
-  const handlePrevMonth = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.subtract({ months: 1 });
-    onNavigate?.(newDate);
-  };
-  const handleNextMonth = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.add({ months: 1 });
-    onNavigate?.(newDate);
-  };
-  const handlePrevYear = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.subtract({ years: 1 });
-    onNavigate?.(newDate);
-  };
-  const handleNextYear = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.add({ years: 1 });
-    onNavigate?.(newDate);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          color: "secondary",
-          isDisabled: isPrevYearDisabled,
-          onClick: handlePrevYear,
-          icon: ChevronsLeftIcon,
-          label: "Previous year"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          color: "secondary",
-          isDisabled: isPrevMonthDisabled,
-          onClick: handlePrevMonth,
-          icon: ChevronLeftIcon,
-          label: "Previous month"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          label: "Month",
-          hideLabel: true,
-          customTrigger: /* @__PURE__ */ jsx(
-            PillButton,
-            {
-              color: "secondary",
-              iconPosition: "right",
-              icon: ArrowDropDownIcon,
-              children: MONTHS[currentMonth]
-            }
-          ),
-          ignoreTriggerWidth: true,
-          items: availableMonths.map(({ month, value, isDisabled }) => ({
-            label: month,
-            id: value,
-            isDisabled
-          })).filter(({ isDisabled }) => !isDisabled),
-          value: currentMonth,
-          onChange: handleMonthChange
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          label: "Year",
-          hideLabel: true,
-          customTrigger: /* @__PURE__ */ jsx(
-            PillButton,
-            {
-              color: "secondary",
-              iconPosition: "right",
-              icon: ArrowDropDownIcon,
-              children: currentYear.toString()
-            }
-          ),
-          items: availableYears.map(({ year, isDisabled }) => ({
-            label: year.toString(),
-            id: year,
-            isDisabled
-          })).filter(({ isDisabled }) => !isDisabled),
-          value: currentYear,
-          onChange: handleYearChange
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          color: "secondary",
-          isDisabled: isNextMonthDisabled,
-          onClick: handleNextMonth,
-          icon: ChevronRightIcon,
-          label: "Next month"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          color: "secondary",
-          isDisabled: isNextYearDisabled,
-          onClick: handleNextYear,
-          icon: ChevronsRightIcon,
-          label: "Next year"
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  CalendarSelectHeader
-};

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

@@ -1,62 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createCalendar } from "@internationalized/date";
-import { useRef, useImperativeHandle, useEffect } from "react";
-import { useLocale, useDateField } from "react-aria";
-import { useDateFieldState } from "react-stately";
-import { DateSegmentItem } from "./DateSegmentItem.js";
-const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }) => {
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-  const dataFieldRef = useRef(null);
-  const { fieldProps } = useDateField(props, state, dataFieldRef);
-  const handleBlur = (e) => {
-    fieldProps.onBlur?.(e);
-    if (!state.value) {
-      return;
-    }
-    const currentValue = state.value;
-    const { year } = currentValue;
-    if (year >= 0 && year <= 99) {
-      const correctedYear = year <= 50 ? 2e3 + year : 1900 + year;
-      const correctedDate = currentValue.set({ year: correctedYear });
-      if (correctedDate) {
-        state.setValue(correctedDate);
-        props.onChange?.(correctedDate);
-      }
-    }
-  };
-  useImperativeHandle(ref, () => ({
-    clearField: () => {
-      state.setValue(null);
-    }
-  }));
-  useEffect(() => {
-    onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
-  }, [state.segments, onClearChange]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...fieldProps,
-      ref: dataFieldRef,
-      onBlur: handleBlur,
-      className: "relative w-full",
-      children: /* @__PURE__ */ jsx("div", { className: "flex", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
-        DateSegmentItem,
-        {
-          segment,
-          state,
-          isDisabled: props.isDisabled,
-          hidePlaceholder
-        },
-        i
-      )) })
-    }
-  );
-};
-export {
-  DateField
-};