@povio/ui 0.0.4 → 0.0.6

package/src/components/inputs/DateTime/shared/CalendarGrid.tsx

@@ -1,102 +0,0 @@
-import { type AriaCalendarGridProps, useCalendarGrid } from "@react-aria/calendar";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
-import { clsx } from "clsx";
-import type { KeyboardEvent } from "react";
-import type { DateValue } from "react-aria";
-
-import { CalendarCell } from "#ui/components/inputs/DateTime/shared/CalendarCell";
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-const WEEK_INDICES = [0, 1, 2, 3, 4, 5];
-
-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 const CalendarGrid = ({
-  state,
-  onApply,
-  shouldCloseOnSelect,
-  offset = {},
-  onDateSelection,
-  onDateHover,
-  rangeSelection,
-  hoverDate,
-  onKeyboardNavigation,
-  className,
-  calendarSide,
-  ...props
-}: CalendarGridProps) => {
-  const { gridProps, headerProps, weekDays } = useCalendarGrid({ ...props, weekdayStyle: "short" }, state);
-
-  const startDate = state.visibleRange.start.add(offset);
-
-  const handleDateSelection = (date: DateValue) => {
-    onDateSelection?.(date, calendarSide);
-  };
-
-  return (
-    <div className={clsx("h-72 w-full px-3 py-1 md:w-80", className)}>
-      <table
-        {...gridProps}
-        cellPadding="0"
-        className="w-full"
-      >
-        <thead {...headerProps}>
-          <tr>
-            {weekDays.map((day) => (
-              <th key={day}>
-                <Typography
-                  size="label-2"
-                  className="bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle"
-                >
-                  {day.substring(0, 2)}
-                </Typography>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {WEEK_INDICES.map((weekIndex) => (
-            <tr key={weekIndex}>
-              {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>
-                date ? (
-                  <CalendarCell
-                    // oxlint-disable-next-line react/no-array-index-key
-                    key={i}
-                    state={state}
-                    date={date}
-                    onApply={onApply}
-                    shouldCloseOnSelect={shouldCloseOnSelect}
-                    onDateSelection={handleDateSelection}
-                    onDateHover={onDateHover}
-                    rangeSelection={rangeSelection}
-                    hoverDate={hoverDate}
-                    onKeyboardNavigation={onKeyboardNavigation}
-                  />
-                ) : (
-                  // oxlint-disable-next-line react/no-array-index-key
-                  <td key={i} />
-                ),
-              )}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};

package/src/components/inputs/DateTime/shared/CalendarHeader.tsx

@@ -1,110 +0,0 @@
-import { Time } from "@internationalized/date";
-import type { AriaButtonProps } from "@react-aria/button";
-import { useDateFormatter } from "@react-aria/i18n";
-import type { CalendarState } from "@react-stately/calendar";
-import { Button as AriaButton, ToggleButtonGroup as AriaToggleButtonGroup } from "react-aria-components";
-import type { DatePickerState } from "react-stately";
-
-import { ChevronLeftIcon } from "#ui/assets/icons/ChevronLeft";
-import { ChevronRightIcon } from "#ui/assets/icons/ChevronRight";
-import { PillButton } from "#ui/components/buttons/PillButton/PillButton";
-import type { ToggleState } from "#ui/components/inputs/DateTime/shared/Calendar";
-
-const HourCycle = {
-  12: "h12",
-  24: "h23",
-} as const;
-
-interface CalendarProps {
-  calendarState: CalendarState;
-  datePickerState?: DatePickerState;
-  prevButtonProps: AriaButtonProps;
-  nextButtonProps: AriaButtonProps;
-  includesTime?: boolean;
-  hourCycle?: 12 | 24;
-  toggleState: ToggleState | null;
-  setToggleState: (state: ToggleState | null) => void;
-}
-
-export const CalendarHeader = ({
-  calendarState,
-  datePickerState,
-  prevButtonProps,
-  nextButtonProps,
-  includesTime,
-  hourCycle,
-  toggleState,
-  setToggleState,
-}: CalendarProps) => {
-  const formatter = useDateFormatter({
-    month: "long",
-    timeZone: calendarState.timeZone,
-  });
-  const timeFormatter = useDateFormatter({
-    timeStyle: "short",
-    timeZone: calendarState.timeZone,
-    hourCycle: hourCycle ? HourCycle[hourCycle] : undefined,
-  });
-
-  const year = calendarState.focusedDate.year.toString();
-  const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-
-  const timeValue = datePickerState?.timeValue || new Time();
-  const date = new Date();
-  date.setHours(timeValue.hour, timeValue.minute);
-
-  return (
-    <div className="inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1">
-      <div className="inline-flex h-12 items-center p-3">
-        {!toggleState && (
-          <AriaButton
-            {...prevButtonProps}
-            className="shrink-0 focus-visible:outline-interactive-contained-secondary-focus"
-          >
-            <ChevronLeftIcon className="size-6 text-interactive-text-secondary-idle" />
-          </AriaButton>
-        )}
-      </div>
-
-      <AriaToggleButtonGroup className="flex gap-2">
-        <PillButton
-          color="secondary"
-          toggle
-          isSelected={toggleState === "month"}
-          onChange={(isSelected) => setToggleState(isSelected ? "month" : null)}
-        >
-          {month}
-        </PillButton>
-        <PillButton
-          color="secondary"
-          toggle
-          isSelected={toggleState === "year"}
-          onChange={(isSelected) => setToggleState(isSelected ? "year" : null)}
-        >
-          {year}
-        </PillButton>
-        {includesTime && (
-          <PillButton
-            color="secondary"
-            toggle
-            isSelected={toggleState === "time"}
-            onChange={(isSelected) => setToggleState(isSelected ? "time" : null)}
-          >
-            {timeFormatter.format(date)}
-          </PillButton>
-        )}
-      </AriaToggleButtonGroup>
-
-      <div className="inline-flex h-12 items-center p-3">
-        {!toggleState && (
-          <AriaButton
-            {...nextButtonProps}
-            className="shrink-0 focus-visible:outline-interactive-contained-secondary-focus"
-          >
-            <ChevronRightIcon className="size-6 text-interactive-text-secondary-idle" />
-          </AriaButton>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx

@@ -1,228 +0,0 @@
-import type { CalendarDate } from "@internationalized/date";
-import { useDateFormatter } from "@react-aria/i18n";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
-import { type MouseEvent, useMemo } from "react";
-
-import { ArrowDropDownIcon } from "#ui/assets/icons/ArrowDropDown";
-import { ChevronLeftIcon } from "#ui/assets/icons/ChevronLeft";
-import { ChevronRightIcon } from "#ui/assets/icons/ChevronRight";
-import { ChevronsLeftIcon } from "#ui/assets/icons/ChevronsLeft";
-import { ChevronsRightIcon } from "#ui/assets/icons/ChevronsRight";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import { PillButton } from "#ui/components/buttons/PillButton/PillButton";
-import { Select } from "#ui/components/inputs/Selection/Select/Select";
-
-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 const CalendarSelectHeader = ({
-  state,
-  isPrevMonthDisabled,
-  isPrevYearDisabled,
-  isNextMonthDisabled,
-  isNextYearDisabled,
-  offset = { months: 0 },
-  onNavigate,
-  maxDate,
-  minDate,
-}: CalendarSelectHeaderProps) => {
-  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: string[] = [];
-    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: number | null) => {
-    if (value === null) {
-      return;
-    }
-    const newDate = displayDate.set({ month: value + 1 });
-    onNavigate?.(newDate);
-  };
-
-  const handleYearChange = (value: number | null) => {
-    if (value === null) {
-      return;
-    }
-
-    const newDate = displayDate.set({ year: value });
-    onNavigate?.(newDate);
-  };
-
-  const handlePrevMonth = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.subtract({ months: 1 });
-    onNavigate?.(newDate);
-  };
-
-  const handleNextMonth = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.add({ months: 1 });
-    onNavigate?.(newDate);
-  };
-
-  const handlePrevYear = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.subtract({ years: 1 });
-    onNavigate?.(newDate);
-  };
-
-  const handleNextYear = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newDate = displayDate.add({ years: 1 });
-    onNavigate?.(newDate);
-  };
-
-  return (
-    <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">
-      <div className="flex items-center">
-        <InlineIconButton
-          color="secondary"
-          isDisabled={isPrevYearDisabled}
-          onClick={handlePrevYear}
-          icon={ChevronsLeftIcon}
-          label="Previous year"
-        />
-        <InlineIconButton
-          color="secondary"
-          isDisabled={isPrevMonthDisabled}
-          onClick={handlePrevMonth}
-          icon={ChevronLeftIcon}
-          label="Previous month"
-        />
-      </div>
-
-      <div className="flex gap-2">
-        <Select
-          label="Month"
-          hideLabel
-          customTrigger={
-            <PillButton
-              color="secondary"
-              iconPosition="right"
-              icon={ArrowDropDownIcon}
-            >
-              {MONTHS[currentMonth]}
-            </PillButton>
-          }
-          ignoreTriggerWidth
-          items={availableMonths
-            .map(({ month, value, isDisabled }) => ({
-              label: month,
-              id: value,
-              isDisabled,
-            }))
-            .filter(({ isDisabled }) => !isDisabled)}
-          value={currentMonth}
-          onChange={handleMonthChange}
-        />
-        <Select
-          label="Year"
-          hideLabel
-          customTrigger={
-            <PillButton
-              color="secondary"
-              iconPosition="right"
-              icon={ArrowDropDownIcon}
-            >
-              {currentYear.toString()}
-            </PillButton>
-          }
-          items={availableYears
-            .map(({ year, isDisabled }) => ({
-              label: year.toString(),
-              id: year,
-              isDisabled,
-            }))
-            .filter(({ isDisabled }) => !isDisabled)}
-          value={currentYear}
-          onChange={handleYearChange}
-        />
-      </div>
-
-      <div className="flex items-center">
-        <InlineIconButton
-          color="secondary"
-          isDisabled={isNextMonthDisabled}
-          onClick={handleNextMonth}
-          icon={ChevronRightIcon}
-          label="Next month"
-        />
-        <InlineIconButton
-          color="secondary"
-          isDisabled={isNextYearDisabled}
-          onClick={handleNextYear}
-          icon={ChevronsRightIcon}
-          label="Next year"
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/inputs/DateTime/shared/DateField.tsx

@@ -1,83 +0,0 @@
-import { type CalendarDate, createCalendar } from "@internationalized/date";
-import type { DateFieldStateOptions } from "@react-stately/datepicker";
-import { type FocusEvent, type Ref, useEffect, useImperativeHandle, useRef } from "react";
-import { useDateField, useLocale } from "react-aria";
-import { useDateFieldState } from "react-stately";
-
-import { DateSegmentItem } from "#ui/components/inputs/DateTime/shared/DateSegmentItem";
-
-export interface DateFieldHandle {
-  clearField: () => void;
-}
-
-interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createCalendar"> {
-  ref?: Ref<DateFieldHandle>;
-  onClearChange?: (canClear: boolean) => void;
-  hidePlaceholder?: boolean;
-}
-
-export const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }: DateFieldProps) => {
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  });
-
-  const dataFieldRef = useRef<HTMLDivElement>(null);
-  const { fieldProps } = useDateField(props, state, dataFieldRef);
-
-  const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
-    fieldProps.onBlur?.(e);
-
-    if (!state.value) {
-      return;
-    }
-
-    const currentValue = state.value as CalendarDate;
-    const { year } = currentValue;
-
-    if (year >= 0 && year <= 99) {
-      const correctedYear = year <= 50 ? 2000 + 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 (
-    <div
-      {...fieldProps}
-      ref={dataFieldRef}
-      onBlur={handleBlur}
-      className="relative w-full"
-    >
-      <div className="flex">
-        {state.segments.map((segment, i) => (
-          <DateSegmentItem
-            // oxlint-disable-next-line react/no-array-index-key
-            key={i}
-            segment={segment}
-            state={state}
-            isDisabled={props.isDisabled}
-            hidePlaceholder={hidePlaceholder}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/inputs/DateTime/shared/DatePickerInput.tsx

@@ -1,170 +0,0 @@
-import { getLocalTimeZone, now, today } from "@internationalized/date";
-import { clsx } from "clsx";
-import { type Ref, useCallback, useMemo, useRef, useState } from "react";
-import { type DatePickerAria, useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import useMeasure from "react-use-measure";
-
-import { CalendarIcon } from "#ui/assets/icons/Calendar";
-import { DateTimeIcon } from "#ui/assets/icons/DateTime";
-import { TodayIcon } from "#ui/assets/icons/Today";
-import { IconButton } from "#ui/components/buttons/IconButton/IconButton";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import { DateField, type DateFieldHandle } from "#ui/components/inputs/DateTime/shared/DateField";
-import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
-import { InputClear } from "#ui/components/inputs/shared/InputClear";
-import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
-
-interface DatePickerInputProps extends InputVariantProps {
-  ref?: Ref<HTMLDivElement>;
-  groupProps: DatePickerAria["groupProps"];
-  fieldProps: DatePickerAria["fieldProps"];
-  endFieldProps?: DatePickerAria["fieldProps"];
-  buttonProps: DatePickerAria["buttonProps"];
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  disableDropdown?: boolean;
-  isDateTime?: boolean;
-  isClearable?: boolean;
-  headerProps?: FormFieldHeaderProps;
-  todayIcon?: boolean;
-}
-
-export const DatePickerInput = ({
-  ref,
-  as,
-  groupProps,
-  fieldProps,
-  endFieldProps,
-  buttonProps,
-  isDisabled,
-  isInvalid,
-  disableDropdown,
-  variant,
-  size,
-  isDateTime,
-  isClearable,
-  headerProps,
-  todayIcon,
-  ...props
-}: DatePickerInputProps) => {
-  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<DateFieldHandle>(null);
-  const endDateFieldRef = useRef<DateFieldHandle>(null);
-  const [labelContentRef, { width: labelWidth }] = useMeasure();
-
-  const onClearChange = useCallback((canClearInput: boolean) => {
-    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 (
-    <div
-      ref={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 || undefined}
-      data-disabled={isDisabled || undefined}
-      data-invalid={isInvalid || undefined}
-      data-focus-within={isFocused || undefined}
-      data-focus-visible={(isFocused && isFocusVisible) || undefined}
-      data-has-selection={fieldProps.value !== null || undefined}
-      {...groupProps}
-      {...focusWithinProps}
-      {...hoverProps}
-    >
-      <div>
-        {as && ["filter", "floating"].includes(as) && headerProps && (
-          <FormFieldLabel
-            ref={labelContentRef}
-            as={as}
-            {...headerProps}
-          />
-        )}
-        <div
-          className="flex items-center gap-2"
-          style={style}
-        >
-          {todayIcon && (
-            <IconButton
-              label=""
-              icon={TodayIcon}
-              size="xxs"
-              onPress={onToday}
-            />
-          )}
-          <DateField
-            ref={dateFieldRef}
-            {...fieldProps}
-            isDisabled={isDisabled}
-            isInvalid={isInvalid}
-            onClearChange={onClearChange}
-            hidePlaceholder={hidePlaceholder}
-          />
-          {endFieldProps && (
-            <>
-              {!((as === "floating" || as === "filter") && hidePlaceholder) && <span className="select-none">–</span>}
-              <DateField
-                ref={endDateFieldRef}
-                {...endFieldProps}
-                isDisabled={isDisabled}
-                isInvalid={isInvalid}
-                onClearChange={onClearChange}
-                hidePlaceholder={hidePlaceholder}
-              />
-            </>
-          )}
-        </div>
-      </div>
-      <div className={clsx("flex items-center gap-2", as === "floating" && "-mt-4")}>
-        {isClearable && canClear && <InputClear onClear={onClear} />}
-        {!disableDropdown && (
-          <InlineIconButton
-            label=""
-            color="secondary"
-            {...buttonProps}
-            icon={isDateTime ? DateTimeIcon : CalendarIcon}
-            isDisabled={isDisabled}
-          />
-        )}
-      </div>
-    </div>
-  );
-};