@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

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

@@ -1,172 +0,0 @@
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { today as Y, getLocalTimeZone as h, isToday as j } from "@internationalized/date";
-import { Dialog as I, Calendar as B, Heading as F, CalendarGrid as M, CalendarGridHeader as O, CalendarHeaderCell as T, CalendarGridBody as W, CalendarCell as k } from "react-aria-components";
-import { tv as P } from "tailwind-variants";
-import { IconButton as m } from "../../icon-button/IconButton.mjs";
-import { useMonthsList as R } from "../hooks/useMonthsList.mjs";
-import { useYearsList as Z } from "../hooks/useYearsList.mjs";
-import { DateSegmentSelect as b } from "./DateSegmentSelect.mjs";
-const $ = P({
-  slots: {
-    dialog: "uy-p-150",
-    calendarWrapper: "uy-flex uy-flex-col uy-gap-150",
-    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-0 uy-w-full",
-    calendarHeaderCell: "uy-typography-body-strong uy-text-content-neutral-low uy-w-[44px] uy-h-[44px] uy-uppercase",
-    calendarCell: [
-      // base styles
-      "uy-typography-body uy-relative uy-text-content-form-enabled uy-w-[44px] uy-h-[44px] 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(h()), [g, p] = 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(), children: /* @__PURE__ */ a(
-    B,
-    {
-      ...t,
-      minValue: d,
-      maxValue: o,
-      value: g,
-      defaultValue: l,
-      onChange: (e) => {
-        p(e);
-      },
-      focusedValue: s,
-      onFocusChange: (e) => {
-        n(e);
-      },
-      children: /* @__PURE__ */ r("div", { className: w(), children: [
-        /* @__PURE__ */ r("header", { className: H(), children: [
-          /* @__PURE__ */ a(F, { 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(
-                  m,
-                  {
-                    slot: "previous",
-                    icon: "CaretLeftOutlined",
-                    color: "neutral",
-                    label: "Previous",
-                    variant: "ghost",
-                    isDisabled: t.isDisabled
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  m,
-                  {
-                    slot: "next",
-                    icon: "CaretRightOutlined",
-                    color: "neutral",
-                    label: "Next",
-                    variant: "ghost",
-                    isDisabled: t.isDisabled
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r(M, { className: G(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(O, { children: (e) => /* @__PURE__ */ a(T, { className: L(), children: e }) }),
-          /* @__PURE__ */ a(W, { children: (e) => /* @__PURE__ */ a(
-            k,
-            {
-              date: e,
-              "data-today": j(e, h()) ? !0 : void 0,
-              className: S()
-            }
-          ) })
-        ] })
-      ] })
-    }
-  ) });
-}
-q.displayName = "DateCalendar";
-export {
-  q as DateCalendar
-};

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

@@ -1,155 +0,0 @@
-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').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').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.mjs

@@ -1,124 +0,0 @@
-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.mjs";
-import { Icon as D } from "../../icon/Icon.mjs";
-import { Spinner as M } from "../../spinner/Spinner.mjs";
-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: u,
-  isReadOnly: s,
-  isDisabled: l,
-  onClearButtonPress: a
-}) {
-  const r = I(), t = b(g), { dateValue: c } = t, { base: f, input: m, state: y } = w({
-    isInvalid: !!u,
-    isReadOnly: !!s,
-    isDisabled: !!l
-  }), p = c && !n && !s && !l;
-  return /* @__PURE__ */ i("div", { className: f(), children: [
-    /* @__PURE__ */ e(x, { className: m(), children: (o) => /* @__PURE__ */ e(
-      v,
-      {
-        segment: o,
-        className: N({
-          isPlaceholder: o.isPlaceholder,
-          isLiteral: o.type === "literal"
-        })
-      }
-    ) }),
-    /* @__PURE__ */ i("div", { className: y(), children: [
-      n && /* @__PURE__ */ e(
-        M,
-        {
-          color: "inherit",
-          size: "small",
-          label: r.formatMessage({
-            id: "unity:component:common:loading:label",
-            defaultMessage: "Loading..."
-          })
-        }
-      ),
-      u && /* @__PURE__ */ e(
-        D,
-        {
-          src: "WarningCircleOutlined",
-          color: "content.form.invalid",
-          alt: r.formatMessage({
-            id: "unity:component:form-field:form-input:error:alt",
-            defaultMessage: "Error"
-          })
-        }
-      ),
-      p && /* @__PURE__ */ e(
-        h,
-        {
-          slot: null,
-          title: r.formatMessage({
-            id: "unity:component:form-field:form-input: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.mts

@@ -1,15 +0,0 @@
-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.mjs

@@ -1,69 +0,0 @@
-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" : "unity:component:form-field:date-picker:segment-select:year", 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.mts

@@ -1,12 +0,0 @@
-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.mts

@@ -1,83 +0,0 @@
-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.mjs';
-import { DatePickerProps } from '../date-picker/DatePicker.mjs';
-import { LabelProps } from '../label/Label.mjs';
-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 };