@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

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 { uyTv as d } from "@payfit/unity-themes";
+import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
+import { useIntl as I } from "react-intl";
+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 uy:focus:bg-surface-form-active uy:focus:rounded-25 uy:focus:text-content-inverted uy:data-[disabled]: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 o = I(), t = b(g), { dateValue: c } = t, { base: m, input: y, state: f } = w({
+    isInvalid: !!u,
+    isReadOnly: !!s,
+    isDisabled: !!l
+  }), p = c && !n && !s && !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..."
+          })
+        }
+      ),
+      u && /* @__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-field/DatePickerField.js

@@ -0,0 +1,73 @@
+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/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * 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>;
+};

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

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

package/dist/esm/components/definition-tooltip/DefinitionTooltip.d.ts

@@ -0,0 +1,23 @@
+import { ValidTextElements } from '../text/Text.js';
+import { TooltipProps } from '../tooltip/Tooltip.js';
+export interface DefinitionTooltipProps extends Omit<TooltipProps, 'children'> {
+    /** The HTML element to render the definition tooltip as. Defaults to a `<span>`. */
+    asElement?: Extract<ValidTextElements, 'abbr' | 'dfn' | 'span'>;
+    /** The text to trigger the tooltip. */
+    children: string;
+}
+/**
+ * Definition tooltips provide brief definitions for words through a tooltip on hover.
+ * They may appear within a sentence or as standalone text, and should be used only to define terms or acronyms.
+ * @param {DefinitionTooltipProps} props - The props for the `DefinitionTooltip` component.
+ * @example
+ * ```tsx
+ * import { DefinitionTooltip } from '@payfit/unity-components'
+ *
+ * <DefinitionTooltip title="I am the description of the definition tooltip">I am an definition tooltip</DefinitionTooltip>
+ * ```
+ * @see {@link DefinitionTooltipProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/05d163-info-link|Design docs}
+ */
+declare const DefinitionTooltip: import('react').ForwardRefExoticComponent<DefinitionTooltipProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DefinitionTooltip };

package/dist/esm/components/definition-tooltip/DefinitionTooltip.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Focusable as l } from "react-aria-components";
+import { Text as f } from "../text/Text.js";
+import { Tooltip as s } from "../tooltip/Tooltip.js";
+const a = u({
+  base: [
+    "uy:text-content-neutral-enabled uy:rounded-50 uy:py-75",
+    "uy:hover:text-content-neutral-hover",
+    "uy:active:text-content-neutral-active",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+  ]
+}), c = r(
+  ({ children: t, title: i, asElement: e = "span", ...n }, m) => /* @__PURE__ */ o(s, { title: i, ...n, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+    f,
+    {
+      variant: "actionInfo",
+      asElement: e,
+      role: "button",
+      className: a(),
+      children: t
+    }
+  ) }) })
+);
+c.displayName = "DefinitionTooltip";
+export {
+  c as DefinitionTooltip
+};

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

@@ -0,0 +1,101 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { DialogTrigger } from 'react-aria-components';
+export declare const dialog: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
+    /** 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 component provides a modal interface for displaying important information and gathering user input
+ * without requiring navigation to a different page. It maintains context and focus while demanding attention.
+ *
+ * Use Dialog when you need to capture user attention, gather critical input, or display important information
+ * that requires acknowledgment before proceeding.
+ *
+ * The Dialog consists of several parts that work together:
+ * - `DialogTitle`: Displays the title of the dialog
+ * - `DialogContent`: Contains the main content of the dialog (required)
+ * - `DialogActions`: Contains action buttons for user interaction
+ * - `DialogButton`: Handles specific actions (close, confirm, or danger)
+ * @param props - The props for the Dialog component
+ * @see {@link DialogProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   Dialog,
+ *   DialogTrigger,
+ *   DialogTitle,
+ *   DialogContent,
+ *   DialogActions,
+ *   DialogButton
+ * } from '@payfit/unity-components'
+ *
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open dialog</Button>
+ *       <Dialog>
+ *         <DialogTitle>Important information</DialogTitle>
+ *         <DialogContent>
+ *           This content requires your attention before proceeding.
+ *         </DialogContent>
+ *         <DialogActions>
+ *           <DialogButton variant="close">Cancel</DialogButton>
+ *           <DialogButton variant="confirm">Confirm</DialogButton>
+ *         </DialogActions>
+ *       </Dialog>
+ *     </DialogTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
+ */
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export { DialogTrigger };

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

@@ -0,0 +1,72 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as i, isValidElement as t } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { useId as g } from "react-aria";
+import { ModalOverlay as p, Modal as f, DialogContext as c, Dialog as b, DialogTrigger as x } from "react-aria-components";
+import { DialogTrigger as E } from "react-aria-components";
+import { DialogActions as D } from "./parts/DialogActions.js";
+import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
+const w = s({
+  slots: {
+    overlay: [
+      "uy:fixed uy:inset-0 uy:z-30 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"
+    ],
+    wrapper: [
+      "uy:w-full uy:md:max-w-[640px]",
+      "uy:m-400 uy:md:m-0",
+      "uy:overflow-hidden uy:rounded-200 uy:bg-white uy:p-300 uy:md:p-400",
+      "uy:text-left uy:align-middle uy:shadow-floating",
+      "uy:bg-surface-neutral"
+    ],
+    content: [
+      "uy:outline-none uy:relative uy:flex uy:flex-col uy:gap-300 uy:md:gap-400"
+    ]
+  }
+}), h = (e) => {
+  const a = i.toArray(e).find(
+    (r) => t(r) && r.type === D
+  );
+  return t(a) ? i.toArray(a.props.children).some(
+    (r) => t(
+      r
+    ) && r.type === v && r.props.variant === "danger"
+  ) : !1;
+};
+function N({
+  children: e,
+  isOpen: a,
+  onOpenChange: r,
+  isDismissable: u = !0,
+  ...y
+}) {
+  const l = g(), { overlay: n, wrapper: d, content: m } = w();
+  return /* @__PURE__ */ o(
+    p,
+    {
+      isDismissable: u,
+      isOpen: a,
+      onOpenChange: r,
+      className: n(),
+      children: /* @__PURE__ */ o(f, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(c.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
+        b,
+        {
+          role: h(e) ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          className: m(),
+          "aria-label": y["aria-label"],
+          "aria-describedby": l,
+          children: e
+        }
+      ) }) })
+    }
+  );
+}
+N.displayName = "Dialog";
+x.displayName = "DialogTrigger";
+export {
+  N as Dialog,
+  E as DialogTrigger,
+  w as dialog
+};

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

@@ -0,0 +1,22 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../../button/Button.js';
+type ButtonVariant = 'close' | 'confirm' | 'danger';
+type OnPressParameters = Parameters<NonNullable<ButtonProps['onPress']>>[0];
+export type DialogButtonProps<T extends ButtonVariant> = Omit<ButtonProps, 'variant' | 'color'> & {
+    /** the different variants for the button */
+    variant: T;
+    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
+    icon?: UnityIcon;
+    isLoading?: T extends 'close' ? never : ButtonProps['isLoading'];
+    onPress?: T extends 'close' ? ButtonProps['onPress'] : ButtonProps['onPress'] | ((e: OnPressParameters) => Promise<OnPressParameters>);
+};
+/**
+ * A `DialogButton` is a button which has to be included into `DialogActions` container
+ *
+ */
+declare const DialogButton: {
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogButton };

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { useContextProps as n, DialogContext as d } from "react-aria-components";
+const m = i(
+  (t, o) => {
+    [t] = n(t, o, d);
+    const { children: r, ...a } = t;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        id: a["aria-describedby"],
+        "data-dd-privacy": "mask",
+        className: "uy:typography-body uy:text-content-neutral",
+        children: r
+      }
+    );
+  }
+);
+m.displayName = "DialogContent";
+export {
+  m as DialogContent
+};

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

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