@povio/ui 0.0.4 → 0.0.6

package/{src/components/inputs/Checkbox/checkbox.cva.ts → dist/components/inputs/Checkbox/checkbox.cva.js}

@@ -1,10 +1,7 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const checkbox = cva(
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const checkbox = cva(
   ["flex items-center justify-center border-2", "relative size-4 shrink-0 rounded-xs p-1", uiGroupOutlineClass],
   {
     variants: {
@@ -27,25 +24,24 @@ export const checkbox = cva(
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
           "group-invalid:border-interactive-contained-error-idle",
-          "group-focus-visible:outline-interactive-contained-primary-focus",
-        ],
-      },
+          "group-focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface CheckboxVariantProps extends VariantProps<typeof checkbox> {}
-
-export const checkboxIndicatorClass = "group flex items-center gap-2";
-
-export const checkboxTypography = compoundMapper<TypographyVariantProps, CheckboxVariantProps>({
+const checkboxIndicatorClass = "group flex items-center gap-2";
+const checkboxTypography = compoundMapper({
   default: {
     size: "label-1",
-    variant: "default",
-  },
+    variant: "default"
+  }
 });
+export {
+  checkbox,
+  checkboxIndicatorClass,
+  checkboxTypography
+};

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { Ref } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { DatePickerStateOptions } from 'react-stately';
+import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
+import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+    ref?: Ref<HTMLDivElement>;
+    disableDropdown?: boolean;
+    isClearable?: boolean;
+    className?: string;
+    todayIcon?: boolean;
+}
+export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    fullIso?: boolean;
+    minValue?: DateValue | string;
+    maxValue?: DateValue | string;
+}
+export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
+export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -0,0 +1,234 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toCalendarDate, today, getLocalTimeZone, createCalendar, CalendarDate } from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { DateTime } from "luxon";
+import { useRef } from "react";
+import { useDatePicker, useLocale } from "react-aria";
+import { Controller } from "react-hook-form";
+import { useDatePickerState, useCalendarState } from "react-stately";
+import { Calendar } from "../shared/Calendar.js";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
+const DatePickerBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    className,
+    todayIcon,
+    as = ui.input.as,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const dialogState = useDatePickerState({
+    ...rest,
+    defaultValue: value || rest.defaultValue,
+    shouldCloseOnSelect: false
+  });
+  const state = useDatePickerState({
+    ...rest,
+    value,
+    onChange: (val) => {
+      if (val && (rest.minValue && val < rest?.minValue || rest?.maxValue && val > rest?.maxValue)) {
+        state.setValue(state.value);
+        return;
+      }
+      onChange?.(val);
+      dialogState.setValue(val);
+      calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+    },
+    shouldCloseOnSelect: false
+  });
+  const datePickerRef = useRef(null);
+  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
+    { ...rest, label },
+    state,
+    datePickerRef
+  );
+  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
+  const { locale } = useLocale();
+  const calendarState = useCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar
+  });
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const onApply = () => {
+    state.setValue(dialogState.value);
+    state.toggle();
+  };
+  const onTodayPress = () => {
+    dialogState.setValue(today(getLocalTimeZone()));
+    calendarState.setFocusedDate(today(getLocalTimeZone()));
+  };
+  const onOpenChange = (isOpen) => {
+    state.toggle();
+    calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: clsx("relative inline-flex w-full flex-col text-left", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          DatePickerInput,
+          {
+            ref: mergeRefs(ref, datePickerRef),
+            as,
+            groupProps,
+            fieldProps: { ...fieldProps, placeholderValue: PLACEHOLDER_VALUE },
+            buttonProps,
+            isDisabled,
+            isInvalid: !!error,
+            disableDropdown,
+            variant,
+            size,
+            isClearable,
+            headerProps,
+            todayIcon
+          }
+        ),
+        !disableDropdown && /* @__PURE__ */ jsx(
+          DateTimeDialog,
+          {
+            footer: /* @__PURE__ */ jsx(
+              DateTimeDialogFooter,
+              {
+                isValid: !dialogState.isInvalid && !!dialogState.value,
+                onTodayPress,
+                onApply
+              }
+            ),
+            label,
+            triggerRef: datePickerRef,
+            dialogProps,
+            isOpen: state.isOpen,
+            onOpenChange,
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                state: calendarState,
+                calendarProps,
+                onApply
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const DatePicker = ({
+  fullIso = true,
+  minValue,
+  maxValue,
+  ...props
+}) => {
+  const formatCalendarDate = (calendarDate) => {
+    if (calendarDate === null) {
+      return null;
+    }
+    if (fullIso) {
+      return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
+    }
+    const date = DateTimeUtils.fromDateValueToLocal(calendarDate);
+    return DateTime.fromJSDate(date).toISODate();
+  };
+  const parseCalendarDate = (formattedDate) => {
+    if (formattedDate == null) {
+      return formattedDate;
+    }
+    const date = DateTime.fromISO(formattedDate).toJSDate();
+    const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date);
+    return toCalendarDate(zonedDateTime);
+  };
+  const dateLimits = {
+    minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+  };
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          DatePickerBase,
+          {
+            ...innerProps,
+            ...dateLimits,
+            ref: mergeRefs(ref, field.ref),
+            value: parseCalendarDate(field.value),
+            onChange: (value) => field.onChange(formatCalendarDate(value)),
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DatePickerBase,
+    {
+      ...props,
+      ...dateLimits,
+      value: parseCalendarDate(props.value),
+      onChange: (value) => props.onChange?.(formatCalendarDate(value))
+    }
+  );
+};
+export {
+  DatePicker
+};

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,32 @@
+import { CalendarDate } from '@internationalized/date';
+import { Ref } from 'react';
+import { DateValue } from 'react-aria';
+import { FieldValues } from 'react-hook-form';
+import { DateRangePickerStateOptions } from 'react-stately';
+import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
+import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+    ref?: Ref<HTMLDivElement>;
+    disableDropdown?: boolean;
+    isClearable?: boolean;
+    hideSidebar?: boolean;
+    className?: string;
+    todayIcon?: boolean;
+}
+export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+    value?: {
+        start: string | null;
+        end: string | null;
+    } | null;
+    onChange?: (value: {
+        start: string | null;
+        end: string | null;
+    } | null) => void;
+    fullIso?: boolean;
+    minValue?: DateValue | string;
+    maxValue?: DateValue | string;
+}
+export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
+export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};