@payfit/unity-components 2.46.12 → 2.46.13

package/dist/esm/components/date-picker-field/DatePickerField.js

@@ -1,73 +0,0 @@
-import { jsxs as D, jsx as e } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { useFormContext as B } from "react-hook-form";
-import { DatePicker as T } from "../date-picker/DatePicker.js";
-import { FormField as j } from "../form-field/FormField.js";
-import { FormControl as I } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as V } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as g } from "../form-field/parts/FormLabel.js";
-const v = b({
-  base: "uy:flex uy:flex-col uy:gap-100"
-});
-function w({
-  name: r,
-  label: o,
-  defaultValue: t,
-  helperText: i,
-  feedbackText: m,
-  contextualLink: n,
-  isRequired: s,
-  isInvalid: a,
-  isLoading: c,
-  isDisabled: d,
-  isReadOnly: f,
-  requiredVariant: p,
-  ...l
-}, u) {
-  const { control: F, resetField: k, setValue: P } = B(), h = {
-    isRequired: s,
-    isInvalid: a,
-    isLoading: c,
-    isDisabled: d,
-    isReadOnly: f
-  }, x = () => {
-    k(r, {
-      keepTouched: !1,
-      keepDirty: !1,
-      keepError: !1
-    }), P(r, null, { shouldValidate: !1 });
-  }, y = l.onClearButtonPress ?? x;
-  return /* @__PURE__ */ D(
-    j,
-    {
-      control: F,
-      name: r,
-      className: v(),
-      ...h,
-      children: [
-        /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
-        i && /* @__PURE__ */ e(V, { children: i }),
-        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
-          T,
-          {
-            ref: u,
-            defaultValue: t,
-            onClearButtonPress: y,
-            ...l
-          }
-        ) }),
-        /* @__PURE__ */ e(N, { children: m }),
-        n
-      ]
-    }
-  );
-}
-const E = C(function(o, t) {
-  return w(o, t);
-});
-E.displayName = "DatePickerField";
-export {
-  E as DatePickerField
-};

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

@@ -1,71 +0,0 @@
-import { ReactNode } from 'react';
-import { TanstackDatePickerProps } from '../date-picker/TanstackDatePicker.js';
-import { LabelProps } from '../label/Label.js';
-export type TanstackDatePickerFieldProps = TanstackDatePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
-    /** The label for the date picker field. */
-    label: string;
-    /** Helper text to display below the date picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date picker field. */
-    contextualLink?: ReactNode;
-};
-/**
- * The `TanstackDatePickerField` component renders a full field (label, date picker)
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
- *
- * Behavior:
- * - Renders `TanstackDatePicker` with calendar overlay for date selection.
- * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
- *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
- *
- * Accessibility:
- * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
- *   `aria-details` using identifiers from the `a11y` context.
- *
- * Key props:
- * - `label: string` — label text.
- * - `helperText?: ReactNode` — helper text displayed below the field.
- * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
- * - Inherits props from `TanstackDatePicker`.
- * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
- *
- * Example:
- * ```tsx
- * import { TanstackDatePickerField } from "@/components/date-picker-field/TanstackDatePickerField"
- * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
- * import { parseDate } from '@internationalized/date'
- *
- * function Example() {
- *  const schema = z.object({
- *     birthDate: z.custom<CalendarDate | null>()
- *       .refine(date => date !== null, 'Birth date is required'),
- *  })
- *
- *   const form = useTanstackUnityForm({ validators: {
- *     onBlur: schema,
- *   } })
- *   return (
- *     <form>
- *       <form.AppField name="birthDate">
- *         {() => (
- *           <TanstackDatePickerField
- *             label="Birth Date"
- *             helperText="Select your date of birth"
- *           />
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- */
-declare const TanstackDatePickerField: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
-    /** The label for the date picker field. */
-    label: string;
-    /** Helper text to display below the date picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date picker field. */
-    contextualLink?: ReactNode;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackDatePickerField };

package/dist/esm/components/date-picker-field/TanstackDatePickerField.js

@@ -1,41 +0,0 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { TanstackDatePicker as f } from "../date-picker/TanstackDatePicker.js";
-import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as F } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as T } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as P } from "../form-field/TanstackFormField.js";
-const x = d(
-  ({
-    label: m,
-    helperText: o,
-    contextualLink: a,
-    isRequired: t,
-    isLoading: e,
-    isDisabled: c,
-    isReadOnly: i,
-    requiredVariant: n,
-    ...s
-  }, k) => /* @__PURE__ */ p(P, { children: [
-    /* @__PURE__ */ r(
-      T,
-      {
-        requiredVariant: n,
-        isRequired: t,
-        children: m
-      }
-    ),
-    o && /* @__PURE__ */ r(F, { children: o }),
-    /* @__PURE__ */ r(f, { ref: k, ...{
-      isLoading: e,
-      isDisabled: c,
-      isReadOnly: i
-    }, ...s }),
-    /* @__PURE__ */ r(l, {}),
-    a
-  ] })
-);
-x.displayName = "TanstackDatePickerField";
-export {
-  x as TanstackDatePickerField
-};

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

@@ -1,15 +0,0 @@
-import { PlayCtx } from '../../types/testing.js';
-import { CalendarDate } from '@internationalized/date';
-/**
- * Factory to get date picker testing utils
- * @param context the story context
- */
-export declare const getTestingUtilsDatePicker: (context: PlayCtx) => {
-    fillCalendarDate: ({ labelText, calendarDate, }: {
-        labelText: string;
-        calendarDate: CalendarDate;
-    }) => Promise<void>;
-    getCalendarDateValue: ({ labelText }: {
-        labelText: string;
-    }) => CalendarDate;
-};

package/dist/esm/components/date-picker-field/test-utils.js

@@ -1,52 +0,0 @@
-import { CalendarDate as o } from "@internationalized/date";
-import { userEvent as r, within as l } from "storybook/test";
-const c = (i) => {
-  const d = (e) => {
-    const t = l(i.canvasElement).getAllByLabelText(
-      e,
-      {
-        exact: !1,
-        selector: "span"
-      }
-    );
-    if (t.length !== 3)
-      throw new Error(`Date field for ${e} not found`);
-    return t;
-  };
-  return {
-    fillCalendarDate: async ({
-      labelText: e,
-      calendarDate: t
-    }) => {
-      await i.step(`Fill date picker ${e}`, async () => {
-        const a = d(e);
-        await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "day"),
-          String(t.day)
-        ), await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "month"),
-          String(t.month)
-        ), await r.type(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          a.find((n) => n.getAttribute("data-type") === "year"),
-          String(t.year)
-        );
-      });
-    },
-    getCalendarDateValue: ({ labelText: e }) => {
-      const t = d(e), a = (n) => parseInt(
-        t.find((s) => s.getAttribute("data-type") === n)?.textContent ?? ""
-      );
-      return new o(
-        a("year"),
-        a("month"),
-        a("day")
-      );
-    }
-  };
-};
-export {
-  c as getTestingUtilsDatePicker
-};

package/dist/esm/components/date-range-calendar/DateRangeCalendar.d.ts

@@ -1,22 +0,0 @@
-import { DateValue } from '@internationalized/date';
-import { RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components/RangeCalendar';
-type PropsFromAriaRangeCalendar<TDate extends DateValue> = AriaRangeCalendarProps<TDate>;
-export type DateRangeCalendarProps<TDate extends DateValue> = PropsFromAriaRangeCalendar<TDate>;
-/**
- * The `DateRangeCalendar` component displays a calendar grid and allows users to select a date range (start and end dates).
- * @param {DateRangeCalendarProps} props - The props for the `DateRangeCalendar` component
- * @example
- * ```tsx
- * import { DateRangeCalendar } from '@payfit/unity-components'
- * import { CalendarDate } from '@internationalized/date'
- *
- * const [range, setRange] = useState({ start: new CalendarDate(2024, 1, 1), end: new CalendarDate(2024, 1, 15) })
- * <DateRangeCalendar value={range} onChange={setRange} />
- * ```
- * @see {@link DateRangeCalendarProps} for all available props
- */
-declare function DateRangeCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateRangeCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
-declare namespace DateRangeCalendar {
-    var displayName: string;
-}
-export { DateRangeCalendar };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.js

@@ -1,213 +0,0 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { useState as S } from "react";
-import { today as B, getLocalTimeZone as f, isToday as T } from "@internationalized/date";
-import { useUnityTheme as Y, uyTv as O } from "@payfit/unity-themes";
-import { Heading as j } from "react-aria-components/Heading";
-import { RangeCalendar as k, CalendarGrid as F, CalendarGridHeader as P, CalendarHeaderCell as U, CalendarGridBody as W, CalendarCell as Z } from "react-aria-components/RangeCalendar";
-import { useIntl as $ } from "react-intl";
-import { calendarBase as q } from "../date-calendar/DateCalendar.variants.js";
-import { useMonthsList as z } from "../date-calendar/hooks/useMonthsList.js";
-import { useYearsList as A } from "../date-calendar/hooks/useYearsList.js";
-import { DateSegmentSelect as g } from "../date-calendar/parts/DateSegmentSelect.js";
-import { IconButton as v } from "../icon-button/IconButton.js";
-const E = O({
-  extend: q,
-  slots: {
-    calendarGrid: [
-      //theme:  common
-      "uy:border-spacing-y-25 uy:border-spacing-x-0",
-      // All <td> with selected cells need relative positioning for pseudo-elements
-      "uy:[&_td:has(>[data-selected])]:relative",
-      // Middle cells: full background on the <td>
-      "uy:[&_td:has(>[data-selection-start])]:bg-transparent uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:content-[''] uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:absolute uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:top-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:right-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:w-1/2 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:h-full uy:theme-legacy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-primary-lowest",
-      "uy:[&_td:has(>[data-selection-end])]:bg-transparent",
-      // Single day range — no band at all
-      "uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent",
-      //theme: legacy
-      "uy:theme-legacy:[&_td:has(>[data-selected])]:bg-surface-primary-lowest",
-      //theme: rebrand
-      // Start td: no bg, use :before for right-half band
-      "uy:theme-rebrand:[&_td:has(>[data-selected])]:bg-surface-form-selected",
-      "uy:theme-rebrand:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-form-selected",
-      // End td: no bg, use :before for left-half band
-      "uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:content-[''] uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:absolute uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:top-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:left-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:w-1/2 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:h-full uy:theme-legacy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-primary-lowest uy:theme-rebrand:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-form-selected"
-    ],
-    calendarHeaderCell: "uy:text-center",
-    calendarCell: [
-      //theme: common
-      "uy:data-[selected]:rounded-none",
-      "uy:data-[selection-start]:bg-surface-form-active uy:data-[selection-start]:rounded-circle",
-      "uy:data-[selection-end]:bg-surface-form-active",
-      "uy:data-[selection-end]:rounded-circle",
-      //theme: legacy
-      "uy:theme-legacy:data-[selection-start]:text-content-inverted",
-      "uy:theme-legacy:data-[selection-end]:text-content-inverted",
-      "uy:theme-legacy:data-[today]:data-[selection-start]:after:bg-content-inverted",
-      "uy:theme-legacy:data-[today]:data-[selection-end]:after:bg-content-inverted",
-      //theme: rebrand
-      "uy:theme-rebrand:data-[selection-start]:text-content-form-active",
-      "uy:theme-rebrand:data-[selection-end]:text-content-form-active",
-      "uy:theme-rebrand:data-[today]:data-[selection-start]:after:bg-border-form-active",
-      "uy:theme-rebrand:data-[today]:data-[selection-end]:after:bg-border-form-active"
-    ]
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        calendarGrid: "uy:[&_td]:bg-transparent uy:[&_td]:before:hidden",
-        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selection-start]:bg-transparent uy:data-[selection-start]:text-content-neutral-disabled uy:data-[selection-end]:bg-transparent uy:data-[selection-end]:text-content-neutral-disabled uy:cursor-not-allowed"
-      }
-    },
-    isInteractive: {
-      true: {
-        calendarCell: [
-          //theme: common
-          "uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:rounded-circle",
-          //theme: legacy
-          "uy:theme-legacy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-primary-lowest-hover",
-          //theme: rebrand
-          "uy:theme-rebrand:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-neutral-hover"
-        ]
-      }
-    }
-  }
-});
-function J({
-  value: c,
-  defaultValue: i,
-  minValue: n,
-  maxValue: r,
-  onChange: p,
-  onFocusChange: C,
-  ...a
-}) {
-  const u = $(), { theme: y } = Y(), _ = B(f()), D = z(), N = A({
-    startYear: n?.year,
-    endYear: r?.year
-  }), [s, o] = S(() => {
-    const e = c?.start ?? i?.start ?? _;
-    return n && e.compare(n) < 0 ? n : r && e.compare(r) > 0 ? r : e;
-  }), x = (e) => {
-    o(
-      (l) => l.set({ month: parseInt(e, 10) })
-    );
-  }, w = (e) => {
-    o(
-      (l) => l.set({ year: parseInt(e, 10) })
-    );
-  }, {
-    base: G,
-    calendarWrapper: H,
-    dialogHeader: I,
-    dialogHeaderGroup: m,
-    calendarGrid: L,
-    calendarHeaderCell: M,
-    calendarCell: R
-  } = E({
-    isDisabled: a.isDisabled,
-    isInteractive: !a.isDisabled && !a.isReadOnly
-  }), h = y === "rebrand" ? "outlined" : "ghost", b = y === "rebrand" ? "primary" : "neutral";
-  return /* @__PURE__ */ t("div", { className: G(), "data-dd-privacy": "mask", children: /* @__PURE__ */ t(
-    k,
-    {
-      ...a,
-      minValue: n,
-      maxValue: r,
-      value: c,
-      defaultValue: i,
-      onChange: p,
-      focusedValue: s,
-      onFocusChange: (e) => {
-        o(e), C?.(e);
-      },
-      children: /* @__PURE__ */ d("div", { className: H(), children: [
-        /* @__PURE__ */ d("header", { className: I(), children: [
-          /* @__PURE__ */ t(j, { className: "uy:sr-only" }),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: m({
-                className: "uy:pl-100 uy:gap-200"
-              }),
-              children: [
-                /* @__PURE__ */ t(
-                  g,
-                  {
-                    type: "month",
-                    items: D,
-                    value: s.month.toString(),
-                    onChange: x,
-                    isDisabled: a.isDisabled
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  g,
-                  {
-                    type: "year",
-                    items: N,
-                    value: s.year.toString(),
-                    onChange: w,
-                    isDisabled: a.isDisabled
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: m({
-                className: "uy:ml-auto uy:gap-100"
-              }),
-              children: [
-                /* @__PURE__ */ t(
-                  v,
-                  {
-                    slot: "previous",
-                    icon: "CaretLeftOutlined",
-                    color: b,
-                    label: u.formatMessage({
-                      id: "unity:component:common:previous",
-                      defaultMessage: "Previous"
-                    }),
-                    variant: h,
-                    isDisabled: a.isDisabled
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  v,
-                  {
-                    slot: "next",
-                    icon: "CaretRightOutlined",
-                    color: b,
-                    label: u.formatMessage({
-                      id: "unity:component:common:next",
-                      defaultMessage: "Next"
-                    }),
-                    variant: h,
-                    isDisabled: a.isDisabled
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ d(F, { className: L(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ t(P, { children: (e) => /* @__PURE__ */ t(U, { className: M(), children: e }) }),
-          /* @__PURE__ */ t(W, { children: (e) => /* @__PURE__ */ t(
-            Z,
-            {
-              date: e,
-              "data-today": T(e, f()) ? !0 : void 0,
-              className: R()
-            }
-          ) })
-        ] })
-      ] })
-    }
-  ) });
-}
-J.displayName = "DateRangeCalendar";
-export {
-  J as DateRangeCalendar
-};

package/dist/esm/components/date-range-picker/DateRangePicker.d.ts

@@ -1,68 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
-type DateRange = {
-    start: CalendarDate;
-    end: CalendarDate;
-};
-export interface DateRangePickerProps extends Pick<AriaDateRangePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
-    /** The currently selected date range */
-    value?: DateRange | null;
-    /** The default selected date range (uncontrolled) */
-    defaultValue?: DateRange | null;
-    /** The minimum allowed date */
-    minValue?: CalendarDate;
-    /** The maximum allowed date */
-    maxValue?: CalendarDate;
-    /** Callback fired when the date range value changes */
-    onChange?: (value: DateRange | null) => void;
-    /** Callback fired when the clear button is clicked */
-    onClearButtonPress?: () => void;
-    /** Callback fired when the picker loses focus */
-    onBlur?: () => void;
-    /** Callback fired when the picker gains focus */
-    onFocus?: () => void;
-    /** Callback fired when the calendar overlay's open state changes */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** Whether the picker is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the picker is in a loading state */
-    isLoading?: boolean;
-    /** Whether the picker is disabled */
-    isDisabled?: boolean;
-    /** Whether the picker is read-only */
-    isReadOnly?: boolean;
-    /** Function to determine if a date should be disabled */
-    isDateUnavailable?: (date: CalendarDate) => boolean;
-    /** Whether to force leading zeros for days and months */
-    shouldForceLeadingZeros?: boolean;
-    /** Whether to close the calendar after a date range is selected */
-    shouldCloseOnSelect?: boolean;
-    /** Whether to open the calendar by default */
-    defaultOpen?: boolean;
-}
-/**
- * The DateRangePicker component allows users to select a date range either by typing it in directly or choosing from a calendar overlay.
- * @param {DateRangePickerProps} props - Props for configuring the DateRangePicker's behavior and appearance
- * @see {@link DateRangePickerProps} for all available props
- * @example
- * ```tsx
- * import { DateRangePicker } from '@payfit/unity-components'
- * import { CalendarDate } from '@internationalized/date'
- *
- * function Example() {
- *   const [range, setRange] = useState<{ start: CalendarDate; end: CalendarDate }>()
- *
- *   return (
- *     <DateRangePicker
- *       value={range}
- *       onChange={setRange}
- *       minValue={new CalendarDate(2024, 1, 1)}
- *     />
- *   )
- * }
- * ```
- * @note
- * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
- */
-declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DateRangePicker };