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

package/dist/esm/components/text-area/TextArea.js

@@ -0,0 +1,163 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { TextArea as M } from "react-aria-components";
+import { useIntl as z } from "react-intl";
+import { useResizable as L } from "../../hooks/use-resizable.js";
+import { Icon as D } from "../icon/Icon.js";
+import { Spinner as N } from "../spinner/Spinner.js";
+const W = w({
+  slots: {
+    base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
+    inputWrapper: "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-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:resize-none",
+    state: "uy:flex uy:gap-50 uy:flex-shrink-0 uy:basis-250",
+    resizeHandle: "uy:absolute uy:bottom-25 uy:right-25 uy:w-100 uy:h-100 uy:cursor-se-resize uy:flex uy:items-center uy:justify-center"
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        inputWrapper: "uy:bg-surface-form-error",
+        input: "uy:bg-surface-form-error",
+        state: "uy:text-content-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-readonly"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        input: "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",
+        inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+        state: "uy:text-content-neutral-disabled"
+      }
+    }
+  ],
+  defaultVariants: {
+    isInvalid: !1,
+    isDisabled: !1,
+    isReadOnly: !1
+  }
+}), k = v(
+  ({
+    isInvalid: n,
+    isLoading: s,
+    isDisabled: a,
+    isReadOnly: r,
+    isResizable: i = !1,
+    ...y
+  }, b) => {
+    const o = z(), { containerRef: l, handleResizeStart: m } = L({
+      isDisabled: !i || a || r
+    }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
+      isInvalid: n,
+      isDisabled: a,
+      isReadOnly: r
+    });
+    return /* @__PURE__ */ t("div", { ref: l, className: c(), children: [
+      /* @__PURE__ */ t("div", { className: p(), children: [
+        /* @__PURE__ */ e(
+          M,
+          {
+            "data-dd-privacy": "mask",
+            ...y,
+            ref: b,
+            className: g(),
+            "aria-busy": s,
+            readOnly: r
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: x(), children: [
+          s && /* @__PURE__ */ e(
+            N,
+            {
+              color: "inherit",
+              size: "small",
+              label: o.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            D,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: o.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          )
+        ] })
+      ] }),
+      i && !a && !r && /* @__PURE__ */ e(
+        "div",
+        {
+          className: h(),
+          onMouseDown: m,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": o.formatMessage({
+            id: "unity:component:form-field:textarea:resize-handle:label",
+            defaultMessage: "Resize textarea"
+          }),
+          onKeyDown: (u) => {
+            var d, f;
+            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (f = (d = l.current) == null ? void 0 : d.querySelector("textarea")) == null || f.focus());
+          },
+          children: /* @__PURE__ */ t(
+            "svg",
+            {
+              role: "presentation",
+              width: "8",
+              height: "8",
+              viewBox: "0 0 8 8",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",
+                    fill: "#8B8D98"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",
+                    fill: "#8B8D98"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+k.displayName = "TextArea";
+export {
+  k as TextArea,
+  W as textArea
+};

package/dist/esm/components/text-field/TextField.js

@@ -0,0 +1,78 @@
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { useFormContext as j } from "react-hook-form";
+import { FormField as k } from "../form-field/FormField.js";
+import { FormControl as L } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as P } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as v } from "../form-field/parts/FormLabel.js";
+import { Input as w } from "../input/Input.js";
+import { TextArea as A } from "../text-area/TextArea.js";
+const H = g({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function R({
+  name: t,
+  label: e,
+  defaultValue: r,
+  helperText: m,
+  feedbackText: l,
+  contextualLink: c,
+  multiline: i,
+  isRequired: p,
+  isInvalid: a,
+  isLoading: f,
+  isDisabled: d,
+  isReadOnly: u,
+  requiredVariant: x,
+  ...n
+}, s) {
+  const { control: F, setValue: C } = j(), T = {
+    isRequired: p,
+    isInvalid: a,
+    isLoading: f,
+    isDisabled: d,
+    isReadOnly: u
+  }, y = !i, { onClearButtonPress: h } = y ? n : {}, b = h ?? (() => {
+    C(t, "");
+  });
+  return /* @__PURE__ */ B(
+    k,
+    {
+      control: F,
+      name: t,
+      className: H(),
+      ...T,
+      children: [
+        /* @__PURE__ */ o(v, { requiredVariant: x, children: e }),
+        m && /* @__PURE__ */ o(P, { children: m }),
+        /* @__PURE__ */ o(L, { children: i ? /* @__PURE__ */ o(
+          A,
+          {
+            ref: s,
+            defaultValue: r,
+            ...n
+          }
+        ) : /* @__PURE__ */ o(
+          w,
+          {
+            ref: s,
+            defaultValue: r,
+            onClearButtonPress: b,
+            ...n
+          }
+        ) }),
+        /* @__PURE__ */ o(N, { children: l }),
+        c
+      ]
+    }
+  );
+}
+const S = I(function(e, r) {
+  return R(e, r);
+});
+S.displayName = "TextField";
+export {
+  S as TextField
+};

package/dist/esm/components/toast/UnityToast.d.ts

@@ -0,0 +1,71 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+declare const unityToast: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, undefined, {
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface UnityToastProps extends Required<Pick<VariantProps<typeof unityToast>, 'variant'>> {
+    /** callback to call to close the toast*/
+    onClose: () => void;
+    /** render the toast in inline mode or not (by default true) */
+    inline?: boolean;
+}
+/**
+ * The `UnityToast` is the component which will contain a title, a content, and action
+ * - `ToastTitle`: The title of the toast
+ * - `ToastContent`(optional): The content of the toast
+ * - `ToastAction`(optional): The action on the toast
+ */
+declare const UnityToast: {
+    ({ children, onClose, variant, inline, ...rest }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { UnityToast };

package/dist/esm/components/toast/UnityToast.js

@@ -0,0 +1,96 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { isValidElement as l, Fragment as d, Children as m } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useIntl as f } from "react-intl";
+import { IconButton as b } from "../icon-button/IconButton.js";
+import { Icon as g } from "../icon/Icon.js";
+import { ToastTitle as x } from "./parts/ToastTitle.js";
+import { ToastProvider as T } from "./Toast.context.js";
+const h = p({
+  slots: {
+    base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-floating uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral-high",
+    contentWrapper: "uy:flex uy:grow uy:ml-125",
+    divider: "uy:border-l-[1px] uy:border-solid uy:border-border-neutral uy:self-stretch"
+  },
+  variants: {
+    variant: {
+      success: "",
+      error: ""
+    },
+    isInline: {
+      true: {
+        contentWrapper: "uy:flex-col"
+      },
+      false: {
+        contentWrapper: "uy:flex-row uy:justify-between"
+      }
+    }
+  }
+}), v = (e) => {
+  const s = l(e) && e.type === d ? e.props.children : e;
+  if (m.toArray(s).filter(
+    (r) => l(r) && r.type === x
+  ).length !== 1)
+    throw new Error("UnityToast must have one ToastTitle component");
+}, w = ({
+  children: e,
+  onClose: s,
+  variant: t,
+  inline: r = !0,
+  ...i
+}) => {
+  const a = f();
+  v(e);
+  const { base: u, contentWrapper: c, divider: y } = h({
+    variant: t,
+    isInline: r
+  });
+  return /* @__PURE__ */ o(T, { inline: r, children: /* @__PURE__ */ n(
+    "div",
+    {
+      "data-dd-privacy": "mask",
+      ...i,
+      tabIndex: -1,
+      role: t === "error" ? "alert" : "status",
+      "aria-atomic": "true",
+      "aria-live": t === "error" ? "assertive" : "polite",
+      className: u(),
+      children: [
+        /* @__PURE__ */ n("div", { className: "uy:flex uy:flex-row uy:grow", children: [
+          /* @__PURE__ */ o(
+            g,
+            {
+              src: t === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
+              color: t === "success" ? "content.success" : "content.danger",
+              className: "uy:mt-100",
+              alt: a.formatMessage({
+                id: "unity:component:toast:icon:status",
+                defaultMessage: "Status"
+              })
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: c(), children: e })
+        ] }),
+        /* @__PURE__ */ o("div", { role: "presentation", className: y() }),
+        /* @__PURE__ */ o(
+          b,
+          {
+            icon: "CloseOutlined",
+            iconRole: "presentation",
+            label: a.formatMessage({
+              id: "unity:component:common:close:label",
+              defaultMessage: "Close"
+            }),
+            variant: "ghost",
+            color: "neutral",
+            onClick: s
+          }
+        )
+      ]
+    }
+  ) });
+};
+w.displayName = "UnityToast";
+export {
+  w as UnityToast
+};

package/dist/esm/components/toast/parts/ToastAction.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Button as i } from "../../button/Button.js";
+function a({
+  children: t,
+  onPress: r
+}) {
+  return /* @__PURE__ */ o("div", { className: "uy:self-end", children: /* @__PURE__ */ o(i, { variant: "ghost", color: "primary", onPress: r, children: t }) });
+}
+a.displayName = "ToastAction";
+export {
+  a as ToastAction
+};

package/dist/esm/components/toast/parts/ToastContent.js

@@ -0,0 +1,11 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Text as r } from "../../text/Text.js";
+import { useToastContext as e } from "../Toast.context.js";
+function a({ children: t }) {
+  const { inline: o } = e();
+  return o ? /* @__PURE__ */ n(r, { variant: "body", className: "uy:mb-100", children: t }) : null;
+}
+a.displayName = "ToastContent";
+export {
+  a as ToastContent
+};

package/dist/esm/components/toast/parts/ToastTitle.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Text as a } from "../../text/Text.js";
+function e({ children: t }) {
+  return /* @__PURE__ */ o(a, { asElement: "h4", variant: "bodyStrong", className: "uy:mt-100", children: t });
+}
+e.displayName = "ToastTitle";
+export {
+  e as ToastTitle
+};

package/dist/esm/components/toast/toast.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import m from "react-hot-toast";
+import { ToastAction as p } from "./parts/ToastAction.js";
+import { ToastContent as f } from "./parts/ToastContent.js";
+import { ToastTitle as T } from "./parts/ToastTitle.js";
+import { TOAST_CONFIG as u } from "./ToastManager.js";
+import { UnityToast as c } from "./UnityToast.js";
+function k({
+  title: s,
+  content: o,
+  variant: i,
+  action: t,
+  actionOnPress: n,
+  duration: d,
+  datadogPrivacy: l = "mask"
+}) {
+  return m.custom(
+    (a) => /* @__PURE__ */ e(
+      c,
+      {
+        onClose: () => {
+          m.dismiss(a.id);
+        },
+        variant: i,
+        inline: !!o,
+        "data-dd-privacy": l,
+        children: [
+          /* @__PURE__ */ r(T, { children: s }),
+          o ? /* @__PURE__ */ r(f, { children: o }) : null,
+          t ? /* @__PURE__ */ r(p, { onPress: n, children: t }) : null
+        ]
+      }
+    ),
+    { duration: d ?? u[i].duration }
+  );
+}
+export {
+  k as toast
+};

package/dist/esm/components/toggle-switch/ToggleSwitch.d.ts

@@ -0,0 +1,89 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, undefined, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, undefined, unknown, unknown, undefined>>;
+interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
+    /** The label for the toggle switch. */
+    label: string;
+    /** Whether the label is visually hidden and accessible only to screen readers. */
+    isLabelSrOnly?: boolean;
+    /** A helper text to display below the toggle switch's label. */
+    helperText?: string;
+}
+/**
+ * The `ToggleSwitch` component provides a binary choice input that allows users to toggle between two states.c
+ * The component includes a sliding knob animation and supports various states like disabled, selected, and pressed.
+ * It can be used standalone or within a form context using the ToggleSwitchField component.
+ * @param {ToggleSwitchProps} props - Props for the ToggleSwitch component
+ * @example
+ * ```tsx
+ * import { ToggleSwitch } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleSwitch
+ *       label="Enable notifications"
+ *       helperText="Receive updates about your account"
+ *     />
+ *   )
+ * }
+ * ```
+ * @see {@link ToggleSwitchProps} for all available props
+ * @remarks
+ * [API](/?path=/docs/inputs-toggleswitch--docs) • [Demo](/?path=/story/inputs-toggleswitch--primary)
+ */
+export declare const ToggleSwitch: import('react').ForwardRefExoticComponent<ToggleSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/esm/components/toggle-switch/ToggleSwitch.js

@@ -0,0 +1,81 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { Switch as m } from "react-aria-components";
+const v = g({
+  slots: {
+    container: ["uy:flex uy:gap-100 uy:group"],
+    textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
+    label: ["uy:typography-body uy:text-content-form-enabled"],
+    hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
+    indicator: [
+      "uy:p-50 uy:w-500 uy:h-300 uy:flex uy:items-center",
+      "uy:rounded-pill",
+      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
+      "uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
+      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
+      "uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
+    ],
+    knob: [
+      "uy:w-200 uy:h-200 uy:rounded-circle",
+      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
+      "uy:transition-all uy:duration-200 uy:ease-in-out",
+      'uy:group-data-[selected="true"]:translate-x-[90%]',
+      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      false: {
+        indicator: 'uy:group-data-[selected="true"]:bg-surface-form-active uy:group-data-[selected="true"]:border-border-form-active uy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-active uy:group-data-[selected="true"]:group-data-[pressed]:border-border-form-active',
+        knob: 'uy:group-data-[selected="true"]:border-border-inverted-enabled uy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[selected="true"]:group-data-[pressed]:border-border-inverted-pressed'
+      },
+      true: {
+        indicator: "",
+        knob: ""
+      }
+    }
+  }
+}), h = f(
+  ({
+    label: d,
+    helperText: r,
+    isLabelSrOnly: u = !1,
+    isDisabled: a,
+    ...t
+  }, s) => {
+    const { container: l, indicator: i, knob: y, textWrapper: c, label: p, hintText: b } = v({ isDisabled: a }), n = { ...t, role: "switch" };
+    return /* @__PURE__ */ o(
+      m,
+      {
+        ...n,
+        ref: s,
+        className: l(),
+        isDisabled: a,
+        children: [
+          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: y() }) }),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: c({
+                className: u ? "uy:sr-only" : ""
+              }),
+              "data-dd-privacy": "allow",
+              children: [
+                /* @__PURE__ */ e("span", { className: p(), children: d }),
+                r && /* @__PURE__ */ e("span", { className: b(), children: r })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+h.displayName = "ToggleSwitch";
+export {
+  h as ToggleSwitch,
+  v as toggleSwitch
+};