@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.7

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

@@ -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').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

@@ -0,0 +1,124 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useContext as b } from "react";
+import { DatePickerStateContext as x, DateInput as g, 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(x), { dateValue: f } = t, { base: c, input: m, state: y } = w({
+    isInvalid: !!u,
+    isReadOnly: !!s,
+    isDisabled: !!l
+  }), p = f && !n && !s && !l;
+  return /* @__PURE__ */ i("div", { className: c(), children: [
+    /* @__PURE__ */ e(g, { 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:form-field:form-input:spinner: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.mjs

@@ -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" : "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-field/DatePickerField.d.mts

@@ -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.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 };

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

@@ -0,0 +1,73 @@
+import { jsxs as D, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as b } from "react-hook-form";
+import { tv as B } from "tailwind-variants";
+import { DatePicker as j } from "../date-picker/DatePicker.mjs";
+import { FormField as I } from "../form-field/FormField.mjs";
+import { FormControl as N } from "../form-field/parts/FormControl.mjs";
+import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.mjs";
+import { FormHelperText as V } from "../form-field/parts/FormHelperText.mjs";
+import { FormLabel as g } from "../form-field/parts/FormLabel.mjs";
+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(
+    I,
+    {
+      control: F,
+      name: r,
+      className: v(),
+      ...h,
+      children: [
+        /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
+        i && /* @__PURE__ */ e(V, { children: i }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
+          j,
+          {
+            ref: u,
+            defaultValue: t,
+            onClearButtonPress: y,
+            ...l
+          }
+        ) }),
+        /* @__PURE__ */ e(T, { children: m }),
+        n
+      ]
+    }
+  );
+}
+const E = C(function(o, t) {
+  return w(o, t);
+});
+E.displayName = "DatePickerField";
+export {
+  E as DatePickerField
+};

package/dist/esm/components/dialog/Dialog.d.mts

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { DialogTrigger } from 'react-aria-components';
+interface DialogProps {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The `Dialog` is the container component for the dialog, it will contain the different parts of the dialog:
+ * - `DialogTitle`: It contains the title of the dialog
+ * - `DialogContent`: It contains the content of the dialog, **this component has to be defined**
+ * - `DialogActions`: It contains the action buttons
+ * - `DialogButton`: It can be:
+ *  - `close`: The one in charge to close the modal
+ *  - `confirm`: The one in charge to trigger an action
+ *  - `danger`: The one in charge to trigger a dangerous action
+ *
+ *
+ * **If the title is not a visible label, the `aria-abel` property has to be defined**
+ */
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export { DialogTrigger };

package/dist/esm/components/dialog/Dialog.mjs

@@ -0,0 +1,49 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as l, isValidElement as t } from "react";
+import { useId as y } from "react-aria";
+import { ModalOverlay as s, Modal as d, DialogContext as m, Dialog as f } from "react-aria-components";
+import { DialogTrigger as A } from "react-aria-components";
+import { DialogActions as g } from "./parts/DialogActions.mjs";
+import { DialogButton as p } from "./parts/DialogActions/DialogButton.mjs";
+const c = (r) => {
+  const a = l.toArray(r).find(
+    (e) => t(e) && e.type === g
+  );
+  return t(a) ? l.toArray(a.props.children).some(
+    (e) => t(e) && e.type === p && e.props.variant === "danger"
+  ) : !1;
+};
+function b({
+  children: r,
+  isOpen: a,
+  onOpenChange: e,
+  isDismissable: u = !0,
+  ...n
+}) {
+  const i = y();
+  return /* @__PURE__ */ o(
+    s,
+    {
+      isDismissable: u,
+      isOpen: a,
+      onOpenChange: e,
+      className: "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
+      children: /* @__PURE__ */ o(d, { className: "uy-bg-surface-neutral uy-max-w-[640px] uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-400 uy-text-left uy-align-middle uy-shadow-floating", children: /* @__PURE__ */ o(m.Provider, { value: { "aria-describedby": i }, children: /* @__PURE__ */ o(
+        f,
+        {
+          role: c(r) ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          className: "uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-400",
+          "aria-label": n["aria-label"],
+          "aria-describedby": i,
+          children: r
+        }
+      ) }) })
+    }
+  );
+}
+b.displayName = "Dialog";
+export {
+  b as Dialog,
+  A as DialogTrigger
+};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.mts

@@ -0,0 +1,18 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../../button/Button.mjs';
+export interface DialogButtonProps extends Omit<ButtonProps, 'variant' | 'color'> {
+    /** the different variants for the button */
+    variant: 'close' | 'confirm' | 'danger';
+    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
+    icon?: UnityIcon;
+}
+/**
+ * A `DialogButton` is a button which has to be included into `DialogActions` container
+ *
+ */
+declare const DialogButton: {
+    ({ children, variant, onPress, icon, }: PropsWithChildren<DialogButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogButton };

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.mjs

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as p } from "react";
+import { OverlayTriggerStateContext as c } from "react-aria-components";
+import { Button as i } from "../../../button/Button.mjs";
+const f = ({
+  children: t,
+  variant: n,
+  onPress: r,
+  icon: o
+}) => {
+  const a = p(c);
+  switch (n) {
+    case "close":
+      return /* @__PURE__ */ e(
+        i,
+        {
+          prefixIcon: o,
+          variant: "secondary",
+          onPress: (m) => {
+            r && r(m), a == null || a.close();
+          },
+          children: t
+        }
+      );
+    case "confirm":
+      return /* @__PURE__ */ e(i, { prefixIcon: o, variant: "primary", onPress: r, children: t });
+    case "danger":
+      return /* @__PURE__ */ e(
+        i,
+        {
+          variant: "primary",
+          color: "danger",
+          prefixIcon: o ?? "WarningCircleOutlined",
+          onPress: r,
+          children: t
+        }
+      );
+  }
+};
+f.displayName = "DialogButton";
+export {
+  f as DialogButton
+};

package/dist/esm/components/dialog/parts/DialogActions.mjs

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+const e = ({ children: s }) => /* @__PURE__ */ t("div", { className: "uy-flex uy-justify-end uy-items-start uy-gap-100 uy-self-stretch", children: s });
+e.displayName = "DialogActions";
+export {
+  e as DialogActions
+};

package/dist/esm/components/dialog/parts/DialogContent.mjs

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { useContextProps as a, DialogContext as d } from "react-aria-components";
+const m = n(
+  (o, t) => {
+    [o] = a(o, t, d);
+    const { children: r, ...e } = o;
+    return /* @__PURE__ */ i("div", { id: e["aria-describedby"], children: r });
+  }
+);
+m.displayName = "DialogContent";
+export {
+  m as DialogContent
+};

package/dist/esm/components/dialog/parts/DialogTitle.mjs

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Heading as i } from "react-aria-components";
+const a = ({ children: t }) => /* @__PURE__ */ o(i, { slot: "title", className: "uy-typography-h2", children: t });
+a.displayName = "DialogTitle";
+export {
+  a as DialogTitle
+};