@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/date-picker/parts/DateCalendar.js

@@ -0,0 +1,172 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { today as Y, getLocalTimeZone as m, isToday as j } from "@internationalized/date";
+import { Dialog as I, Calendar as k, Heading as B, CalendarGrid as F, CalendarGridHeader as M, CalendarHeaderCell as O, CalendarGridBody as T, CalendarCell as W } from "react-aria-components";
+import { tv as P } from "tailwind-variants";
+import { IconButton as h } from "../../icon-button/IconButton.js";
+import { useMonthsList as R } from "../hooks/useMonthsList.js";
+import { useYearsList as Z } from "../hooks/useYearsList.js";
+import { DateSegmentSelect as b } from "./DateSegmentSelect.js";
+const $ = P({
+  slots: {
+    dialog: "uy-p-150",
+    calendarWrapper: "uy-flex uy-flex-col uy-gap-100",
+    dialogHeader: "uy-flex uy-items-center uy-h-500 uy-w-full",
+    dialogHeaderGroup: "uy-flex uy-items-center",
+    calendarGrid: "uy-border-separate uy-border-spacing-25 uy-w-full",
+    calendarHeaderCell: "uy-typography-body-strong uy-text-content-neutral-low uy-w-[44px] uy-h-[44px] uy-p-[1px] uy-uppercase",
+    calendarCell: [
+      // base styles
+      "uy-typography-body uy-relative uy-text-content-form-enabled uy-w-[44px] uy-h-[44px] uy-p-[1px] uy-outline-hidden uy-cursor-pointer uy-rounded-circle uy-flex uy-items-center uy-justify-center",
+      // interaction states
+      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-form-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2",
+      // cells outside of current month
+      "data-[outside-month]:uy-text-content-neutral-disabled data-[outside-month]:uy-cursor-not-allowed data-[disabled]:uy-text-content-neutral-disabled data-[disabled]:uy-cursor-not-allowed data-[unavailable]:uy-text-content-neutral-disabled data-[unavailable]:uy-cursor-not-allowed",
+      // selected cells
+      "data-[selected]:uy-bg-surface-form-active data-[selected]:uy-text-content-inverted",
+      // "current day" (today) indicator
+      "data-[today]:after:uy-content-' ' data-[today]:after:uy-absolute data-[today]:after:uy-bottom-150 data-[today]:after:uy-w-100 data-[today]:after:uy-h-25 data-[today]:after:uy-bg-border-primary-active data-[today]:data-[selected]:after:uy-bg-content-inverted"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarHeaderCell: "uy-text-content-form-disabled"
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1
+  }
+});
+function q({
+  value: u,
+  defaultValue: l,
+  minValue: d,
+  maxValue: o,
+  ...t
+}) {
+  const y = Y(m()), [p, g] = f(
+    u ?? l ?? y
+  ), [s, n] = f(
+    u ?? l ?? y
+  ), v = R(), C = Z({
+    startYear: d == null ? void 0 : d.year,
+    endYear: o == null ? void 0 : o.year
+  }), D = (e) => {
+    n(
+      (i) => i.set({ month: parseInt(e, 10) })
+    );
+  }, x = (e) => {
+    n(
+      (i) => i.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    dialog: N,
+    calendarWrapper: w,
+    dialogHeader: H,
+    dialogHeaderGroup: c,
+    calendarGrid: G,
+    calendarHeaderCell: L,
+    calendarCell: S
+  } = $({ isDisabled: t.isDisabled });
+  return /* @__PURE__ */ a(I, { className: N(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    k,
+    {
+      ...t,
+      minValue: d,
+      maxValue: o,
+      value: p,
+      defaultValue: l,
+      onChange: (e) => {
+        g(e);
+      },
+      focusedValue: s,
+      onFocusChange: (e) => {
+        n(e);
+      },
+      children: /* @__PURE__ */ r("div", { className: w(), children: [
+        /* @__PURE__ */ r("header", { className: H(), children: [
+          /* @__PURE__ */ a(B, { className: "uy-sr-only" }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: c({
+                className: "uy-pl-100 uy-gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  b,
+                  {
+                    type: "month",
+                    items: v,
+                    value: s.month.toString(),
+                    onChange: D,
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  b,
+                  {
+                    type: "year",
+                    items: C,
+                    value: s.year.toString(),
+                    onChange: x,
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: c({
+                className: "uy-ml-auto uy-gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  h,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: "neutral",
+                    label: "Previous",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  h,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: "neutral",
+                    label: "Next",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(F, { className: G(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(M, { children: (e) => /* @__PURE__ */ a(O, { className: L(), children: e }) }),
+          /* @__PURE__ */ a(T, { children: (e) => /* @__PURE__ */ a(
+            W,
+            {
+              date: e,
+              "data-today": j(e, m()) ? !0 : void 0,
+              className: S()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+q.displayName = "DateCalendar";
+export {
+  q as DateCalendar
+};

package/dist/esm/components/date-picker/parts/DateInput.d.ts

@@ -0,0 +1,155 @@
+import { CalendarDate } from '@internationalized/date';
+import { ReactElement } from 'react';
+import { DateFieldProps } from 'react-aria-components';
+export declare const dateInput: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface DateInputProps extends DateFieldProps<CalendarDate> {
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Clear button click handler */
+    onClearButtonPress?: () => void;
+}
+export declare function DateInput({ isLoading, isInvalid, isReadOnly, isDisabled, onClearButtonPress, }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateInput {
+    var displayName: string;
+}

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -0,0 +1,124 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useContext as b } from "react";
+import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
+import { useIntl as I } from "react-intl";
+import { tv as d } from "tailwind-variants";
+import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
+import { Icon as D } from "../../icon/Icon.js";
+import { Spinner as M } from "../../spinner/Spinner.js";
+const N = d({
+  base: "uy-group uy-box-content uy-rounded-25 uy-px-25 uy-text-end uy-tabular-nums uy-outline-none uy-typography-body focus:uy-bg-surface-form-active focus:uy-rounded-25 focus:uy-text-content-inverted data-[disabled]:uy-text-content-form-disabled",
+  variants: {
+    isPlaceholder: {
+      true: "uy-text-content-neutral-lowest",
+      false: "uy-text-content-form-enabled"
+    },
+    isLiteral: {
+      true: "uy-text-content-form-enabled",
+      false: ""
+    }
+  }
+}), w = d({
+  slots: {
+    base: "uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",
+    input: "uy-flex uy-gap-25 uy-w-fit uy-grow",
+    state: "uy-flex uy-gap-50 uy-items-center"
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy-bg-surface-form-error",
+        state: "uy-text-content-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy-bg-surface-form-disabled uy-text-content-form-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+        state: "uy-text-content-neutral-disabled"
+      }
+    }
+  ]
+});
+function O({
+  isLoading: n,
+  isInvalid: s,
+  isReadOnly: u,
+  isDisabled: l,
+  onClearButtonPress: a
+}) {
+  const o = I(), t = b(g), { dateValue: c } = t, { base: m, input: y, state: f } = w({
+    isInvalid: !!s,
+    isReadOnly: !!u,
+    isDisabled: !!l
+  }), p = c && !n && !u && !l;
+  return /* @__PURE__ */ i("div", { className: m(), children: [
+    /* @__PURE__ */ e(x, { className: y(), children: (r) => /* @__PURE__ */ e(
+      v,
+      {
+        segment: r,
+        className: N({
+          isPlaceholder: r.isPlaceholder,
+          isLiteral: r.type === "literal"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: f(), children: [
+      n && /* @__PURE__ */ e(
+        M,
+        {
+          color: "inherit",
+          size: "small",
+          label: o.formatMessage({
+            id: "unity:component:common:loading:label",
+            defaultMessage: "Loading..."
+          })
+        }
+      ),
+      s && /* @__PURE__ */ e(
+        D,
+        {
+          src: "WarningCircleOutlined",
+          color: "content.form.invalid",
+          alt: o.formatMessage({
+            id: "unity:component:form-field:form-input:error:alt",
+            defaultMessage: "Error"
+          })
+        }
+      ),
+      p && /* @__PURE__ */ e(
+        h,
+        {
+          slot: null,
+          title: o.formatMessage({
+            id: "unity:component:common:clear:title",
+            defaultMessage: "Clear"
+          }),
+          icon: "CloseOutlined",
+          onPress: () => {
+            t == null || t.setValue(null), a == null || a();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+O.displayName = "DateInput";
+export {
+  O as DateInput,
+  w as dateInput
+};

package/dist/esm/components/date-picker/parts/DateSegmentSelect.d.ts

@@ -0,0 +1,15 @@
+export interface DateSegmentSelectProps {
+    items: Array<{
+        id: string | number;
+        name: string;
+    }>;
+    value: string;
+    onChange: (value: string) => void;
+    type: 'month' | 'year';
+    isDisabled?: boolean;
+}
+declare function DateSegmentSelect({ items, value, onChange, type, isDisabled, }: DateSegmentSelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateSegmentSelect {
+    var displayName: string;
+}
+export { DateSegmentSelect };

package/dist/esm/components/date-picker/parts/DateSegmentSelect.js

@@ -0,0 +1,69 @@
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { IconSprite as I } from "@payfit/unity-icons";
+import { useId as w } from "react-aria";
+import { useIntl as x } from "react-intl";
+function N({
+  items: o,
+  value: i,
+  onChange: y,
+  type: e,
+  isDisabled: s = !1
+}) {
+  const l = (t) => () => {
+    const a = o.find((b) => b.id === t);
+    return (a == null ? void 0 : a.name) ?? Array.from({ length: 3 }).join("\0");
+  }, r = w(), c = x(), [p, f] = $(l(i)), d = `${r}-calendar-${e}-select-label`, u = `${r}-calendar-${e}-select`, m = `${r}-calendar-${e}-select-description`, h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", g = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
+  return /* @__PURE__ */ v("div", { className: "uy-isolation-isolate uy-relative uy-inline-flex uy-items-center uy-cursor-pointer", children: [
+    /* @__PURE__ */ n(
+      "label",
+      {
+        id: d,
+        htmlFor: u,
+        className: "uy-sr-only",
+        "aria-hidden": "true",
+        children: c.formatMessage({
+          id: h,
+          defaultMessage: `Change current ${e}`
+        })
+      }
+    ),
+    /* @__PURE__ */ n(
+      "select",
+      {
+        id: u,
+        value: i,
+        onChange: (t) => {
+          y(t.target.value), f(l(t.target.value));
+        },
+        disabled: s,
+        className: "uy-appearance-none uy-box-border uy-w-[var(--uy-selected-item-width)] uy-bg-transparent uy-border-none uy-rounded-50 uy-capitalize uy-text-content-form-enabled uy-typography-action-large uy-cursor-pointer uy-pr-300 disabled:uy-text-content-form-disabled focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",
+        style: {
+          "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${p.length}ch)`
+        },
+        "aria-labelledby": d,
+        "aria-describedby": m,
+        children: o.map((t) => /* @__PURE__ */ n("option", { value: t.id, children: t.name }, t.id))
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "uy-absolute uy-right-0 uy-pointer-events-none", children: /* @__PURE__ */ n(
+      I,
+      {
+        src: "CaretDownOutlined",
+        width: 20,
+        height: 20,
+        color: "inherit",
+        role: "presentation",
+        className: s ? "uy-text-content-form-disabled" : ""
+      }
+    ) }),
+    /* @__PURE__ */ n("span", { id: m, className: "uy-sr-only", "aria-hidden": "true", children: c.formatMessage({
+      id: g,
+      defaultMessage: `Press Enter or Space to change ${e}, then use up and down arrows to select a ${e}`
+    }) })
+  ] });
+}
+N.displayName = "DateSegmentSelect";
+export {
+  N as DateSegmentSelect
+};

package/dist/esm/components/date-picker/utils.d.ts

@@ -0,0 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+/**
+ * Converts a JS Date or string to a CalendarDate, preserving the local date components
+ * regardless of timezone.
+ */
+export declare const parseDateValue: (value: Date | string | undefined) => CalendarDate | undefined;
+/**
+ * Converts a CalendarDate to a JS Date, preserving the local date components.
+ * This ensures that "2024-03-15" becomes "March 15, 2024" in the local timezone,
+ * without any unexpected shifts due to timezone conversion.
+ */
+export declare const calendarDateToDate: (date: CalendarDate | null) => Date | undefined;

package/dist/esm/components/date-picker-field/DatePickerField.d.ts

@@ -0,0 +1,83 @@
+import { CalendarDate } from '@internationalized/date';
+import { ForwardedRef, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { DatePickerProps } from '../date-picker/DatePicker.js';
+import { LabelProps } from '../label/Label.js';
+export interface DatePickerFieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, DatePickerProps {
+    /** The name of the field, which should match the form schema. */
+    name: string;
+    /** The label for the date picker field. */
+    label: string;
+    /** The default value of the date picker field. */
+    defaultValue?: CalendarDate;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the date picker field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+    /** Whether the field is in an invalid state. */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state. */
+    isLoading?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is read-only. */
+    isReadOnly?: boolean;
+    /** The minimum selectable date. */
+    minValue?: CalendarDate;
+    /** The maximum selectable date. */
+    maxValue?: CalendarDate;
+    /** Function to determine if a date should be disabled. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Handler called when the clear button is pressed. */
+    onClearButtonPress?: () => void;
+    /** Handler called when the calendar overlay opens or closes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Handler called when the field loses focus. */
+    onBlur?: () => void;
+    /** Handler called when the field gains focus. */
+    onFocus?: () => void;
+}
+export type TypedDatePickerFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<DatePickerFieldProps, 'name'> & {
+    name: TName;
+};
+type DatePickerFieldComponent = {
+    <TSchema extends Schema>(props: TypedDatePickerFieldProps<ZodInfer<TSchema>> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+/**
+ * The `DatePickerField` component renders a full field that can accept date input, integrating with the `Form` component automatically.
+ * It provides a calendar overlay for date selection and supports direct text input for dates.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   birthDate: z.custom<CalendarDate>(),
+ *   startDate: z.custom<CalendarDate>()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <DatePickerField<typeof schema>
+ *         name="birthDate"  // Only "birthDate" | "startDate" allowed
+ *         label="Birth Date"
+ *       />
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-datepickerfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DatePickerField: DatePickerFieldComponent;
+export { DatePickerField };