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

package/dist/esm/components/flex/Flex.variants.js

@@ -0,0 +1,218 @@
+import { tv as s } from "tailwind-variants";
+const y = s(
+  {
+    base: "uy:flex",
+    variants: {
+      inline: {
+        true: "uy:inline-flex",
+        false: "uy:flex"
+      },
+      direction: {
+        row: "uy:flex-row",
+        col: "uy:flex-col"
+      },
+      isReversed: {
+        true: null,
+        false: null
+      },
+      wrap: {
+        wrap: "uy:flex-wrap",
+        "wrap-reverse": "uy:flex-wrap-reverse",
+        nowrap: "uy:flex-nowrap"
+      },
+      gap: {
+        0: "uy:gap-0",
+        25: "uy:gap-25",
+        50: "uy:gap-50",
+        75: "uy:gap-75",
+        100: "uy:gap-100",
+        125: "uy:gap-125",
+        150: "uy:gap-150",
+        200: "uy:gap-200",
+        250: "uy:gap-250",
+        300: "uy:gap-300",
+        400: "uy:gap-400",
+        500: "uy:gap-500",
+        600: "uy:gap-600",
+        800: "uy:gap-800",
+        1e3: "uy:gap-1000"
+      },
+      gapX: {
+        0: "uy:gap-x-0",
+        25: "uy:gap-x-25",
+        50: "uy:gap-x-50",
+        75: "uy:gap-x-75",
+        100: "uy:gap-x-100",
+        125: "uy:gap-x-125",
+        150: "uy:gap-x-150",
+        200: "uy:gap-x-200",
+        250: "uy:gap-x-250",
+        300: "uy:gap-x-300",
+        400: "uy:gap-x-400",
+        500: "uy:gap-x-500",
+        600: "uy:gap-x-600",
+        800: "uy:gap-x-800",
+        1e3: "uy:gap-x-1000"
+      },
+      gapY: {
+        0: "uy:gap-y-0",
+        25: "uy:gap-y-25",
+        50: "uy:gap-y-50",
+        75: "uy:gap-y-75",
+        100: "uy:gap-y-100",
+        125: "uy:gap-y-125",
+        150: "uy:gap-y-150",
+        200: "uy:gap-y-200",
+        250: "uy:gap-y-250",
+        300: "uy:gap-y-300",
+        400: "uy:gap-y-400",
+        500: "uy:gap-y-500",
+        600: "uy:gap-y-600",
+        800: "uy:gap-y-800",
+        1e3: "uy:gap-y-1000"
+      },
+      justify: {
+        start: "uy:justify-start",
+        end: "uy:justify-end",
+        center: "uy:justify-center",
+        between: "uy:justify-between",
+        around: "uy:justify-around",
+        evenly: "uy:justify-evenly"
+      },
+      align: {
+        start: "uy:items-start",
+        end: "uy:items-end",
+        center: "uy:items-center",
+        baseline: "uy:items-baseline",
+        stretch: "uy:items-stretch"
+      },
+      alignContent: {
+        start: "uy:content-start",
+        end: "uy:content-end",
+        center: "uy:content-center",
+        between: "uy:content-between",
+        around: "uy:content-around",
+        evenly: "uy:content-evenly"
+      }
+    },
+    defaultVariants: {
+      inline: !1,
+      direction: "row",
+      wrap: "nowrap",
+      justify: "start",
+      align: "stretch",
+      isReversed: !1
+    },
+    compoundVariants: [
+      {
+        isReversed: !0,
+        direction: "row",
+        className: "uy:flex-row-reverse"
+      },
+      {
+        isReversed: !0,
+        direction: void 0,
+        className: "uy:flex-row-reverse"
+      },
+      {
+        isReversed: !0,
+        direction: "col",
+        className: "uy:flex-col-reverse"
+      }
+    ]
+  },
+  {
+    /*
+     * FIXME: won't work because of tailwind-variants limitation.
+     *  Add the basic layout classes (flexbox) to tailwind's safelist
+     */
+    // responsiveVariants: ['sm', 'md', 'lg', 'xl'],
+  }
+), e = s(
+  {
+    variants: {
+      grow: {
+        0: "uy:grow-0",
+        1: "uy:grow"
+      },
+      shrink: {
+        0: "uy:shrink-0",
+        1: "uy:shrink"
+      },
+      basis: {
+        auto: "uy:basis-auto",
+        min: "uy:basis-min",
+        max: "uy:basis-max",
+        fit: "uy:basis-fit",
+        full: "uy:basis-full",
+        "1/2": "uy:basis-1/2",
+        "1/3": "uy:basis-1/3",
+        "2/3": "uy:basis-2/3",
+        "1/4": "uy:basis-1/4",
+        "2/4": "uy:basis-2/4",
+        "3/4": "uy:basis-3/4",
+        "1/6": "uy:basis-1/6",
+        "2/6": "uy:basis-2/6",
+        "3/6": "uy:basis-3/6",
+        "4/6": "uy:basis-4/6",
+        "5/6": "uy:basis-5/6",
+        "1/12": "uy:basis-1/12",
+        "2/12": "uy:basis-2/12",
+        "3/12": "uy:basis-3/12",
+        "4/12": "uy:basis-4/12",
+        "5/12": "uy:basis-5/12",
+        "6/12": "uy:basis-6/12",
+        "7/12": "uy:basis-7/12",
+        "8/12": "uy:basis-8/12",
+        "9/12": "uy:basis-9/12",
+        "10/12": "uy:basis-10/12",
+        "11/12": "uy:basis-11/12",
+        0: "uy:basis-0",
+        25: "uy:basis-25",
+        50: "uy:basis-50",
+        75: "uy:basis-75",
+        100: "uy:basis-100",
+        125: "uy:basis-125",
+        150: "uy:basis-150",
+        200: "uy:basis-200",
+        250: "uy:basis-250",
+        300: "uy:basis-300",
+        400: "uy:basis-400",
+        500: "uy:basis-500",
+        600: "uy:basis-600",
+        800: "uy:basis-800",
+        1e3: "uy:basis-1000"
+      },
+      order: {
+        first: "uy:order-first",
+        last: "uy:order-last",
+        none: "uy:order-none"
+      },
+      self: {
+        auto: "uy:self-auto",
+        start: "uy:self-start",
+        end: "uy:self-end",
+        center: "uy:self-center",
+        stretch: "uy:self-stretch",
+        baseline: "uy:self-baseline"
+      }
+    },
+    defaultVariants: {
+      grow: 0,
+      shrink: 1,
+      order: "none",
+      self: "auto"
+    }
+  },
+  {
+    /*
+     * FIXME: won't work because of tailwind-variants limitation.
+     *  Add the basic layout classes (flexbox) to tailwind's safelist
+     */
+    // responsiveVariants: ['sm', 'md', 'lg', 'xl'],
+  }
+);
+export {
+  y as flex,
+  e as flexItem
+};

package/dist/esm/components/flex/FlexItem.js

@@ -0,0 +1,32 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { flexItem as I } from "./Flex.variants.js";
+const e = x(
+  ({
+    asElement: t = "div",
+    children: m,
+    className: o,
+    grow: r,
+    shrink: s,
+    basis: a,
+    order: l,
+    self: f,
+    ...c
+  }, i) => {
+    const n = I({
+      grow: r,
+      shrink: s,
+      basis: a,
+      order: l,
+      self: f,
+      className: o
+    });
+    return /* @__PURE__ */ p(t, { ref: i, className: n, ...c, children: m });
+  }
+);
+e.displayName = "FlexItem";
+const N = e;
+export {
+  e as FlexItem,
+  N as StackItem
+};

package/dist/esm/components/form/Form.context.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+interface UnityFormContextValue<TSchema extends Schema> {
+    schema: TSchema;
+    form: UseFormReturn<ZodInfer<TSchema>>;
+}
+export declare const UnityFormContext: import('react').Context<UnityFormContextValue<Schema> | null>;
+export declare function UnityFormProvider<TSchema extends Schema>({ children, schema, form, }: PropsWithChildren<UnityFormContextValue<TSchema>>): import("react/jsx-runtime").JSX.Element;
+export declare function useUnityFormProvider<TSchema extends Schema>(): UnityFormContextValue<TSchema>;
+export {};

package/dist/esm/components/form/Form.context.js

@@ -0,0 +1,30 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as i, createContext as m } from "react";
+const o = m(null);
+function c({
+  children: t,
+  schema: r,
+  form: e
+}) {
+  return /* @__PURE__ */ n(
+    o.Provider,
+    {
+      value: {
+        schema: r,
+        form: e
+      },
+      children: t
+    }
+  );
+}
+function x() {
+  const t = i(o);
+  if (!t)
+    throw new Error("useFormContext must be used within a Form component");
+  return t;
+}
+export {
+  o as UnityFormContext,
+  c as UnityFormProvider,
+  x as useUnityFormProvider
+};

package/dist/esm/components/form/Form.js

@@ -0,0 +1,58 @@
+import { jsx as a, jsxs as b, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as u, useMemo as j, Suspense as k, lazy as x } from "react";
+import { Form as D } from "react-aria-components";
+import { FormProvider as w } from "react-hook-form";
+import { UnityFormProvider as O } from "./Form.context.js";
+const P = x(
+  () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
+), S = u(
+  ({
+    form: t,
+    schema: n,
+    onSuccess: m,
+    onError: s,
+    action: l,
+    children: d,
+    className: f,
+    onReset: c,
+    debug: p = !1,
+    ...h
+  }, v) => {
+    const y = j(() => {
+      const e = t.formState.errors;
+      if (!Object.keys(e).length) return;
+      const o = {};
+      return Object.entries(e).forEach(([i, r]) => {
+        r != null && r.message && typeof r.message == "string" && (o[i] = r.message);
+      }), o;
+    }, [t.formState.errors]), F = (e) => {
+      e.preventDefault(), t.handleSubmit(async (o) => {
+        try {
+          await l(o), m == null || m(o);
+        } catch (i) {
+          console.error(i), s == null || s(i);
+        }
+      })(e);
+    };
+    return /* @__PURE__ */ a(O, { schema: n, form: t, children: /* @__PURE__ */ b(w, { ...t, children: [
+      p && /* @__PURE__ */ a(k, { fallback: /* @__PURE__ */ a(g, {}), children: /* @__PURE__ */ a(P, { control: t.control }) }),
+      /* @__PURE__ */ a(
+        D,
+        {
+          ...h,
+          ref: v,
+          onSubmit: F,
+          className: f,
+          validationErrors: y,
+          onReset: c,
+          "data-dd-privacy": "mask",
+          children: d
+        }
+      )
+    ] }) });
+  }
+);
+S.displayName = "Form";
+export {
+  S as Form
+};

package/dist/esm/components/form-field/FormField.js

@@ -0,0 +1,60 @@
+import { jsx as a } from "react/jsx-runtime";
+import d, { forwardRef as T, useMemo as p } from "react";
+import { useController as I } from "react-hook-form";
+import { tv as P } from "tailwind-variants";
+import g from "../../hooks/use-id.js";
+import { useUnityFormProvider as j } from "../form/Form.context.js";
+import { FormFieldProvider as D } from "./FormField.context.js";
+import { FormContextualLink as E } from "./parts/FormContextualLink.js";
+import { FormHelperText as N } from "./parts/FormHelperText.js";
+import { isFieldRequired as _ } from "./utils/isFieldRequired.js";
+const w = P({
+  slots: {
+    base: "uy:flex uy:flex-col uy:gap-100"
+  }
+}), M = T(
+  ({
+    children: o,
+    control: f,
+    name: r,
+    isInvalid: u,
+    isLoading: c,
+    isReadOnly: x,
+    className: F,
+    isRequired: h,
+    isDisabled: y
+  }, b) => {
+    const C = g(), { schema: t } = j(), {
+      fieldState: { invalid: v },
+      formState: i
+    } = I({ name: r, control: f }), R = p(
+      () => _(t, r),
+      [t, r]
+    ), { hasHelperText: k, hasContextualLink: q } = p(() => {
+      let s = !1, l = !1;
+      const m = (S) => {
+        d.Children.forEach(S, (n) => {
+          if (!d.isValidElement(n)) return;
+          const e = n;
+          e.type === N ? s = !0 : e.type === E && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
+        });
+      };
+      return m(o), { hasHelperText: s, hasContextualLink: l };
+    }, [o]), H = {
+      name: r,
+      isLoading: c,
+      isReadOnly: x,
+      hasHelperText: k,
+      hasContextualLink: q,
+      id: C,
+      isRequired: h ?? R,
+      isInvalid: u ?? v,
+      isDisabled: y ?? (i.isSubmitting || i.disabled)
+    }, { base: L } = w();
+    return /* @__PURE__ */ a("div", { ref: b, className: L({ className: F }), children: /* @__PURE__ */ a(D, { ...H, children: o }) });
+  }
+);
+M.displayName = "FormField";
+export {
+  M as FormField
+};

package/dist/esm/components/form-field/parts/FormContextualLink.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Button as m } from "react-aria-components";
+import { Link as d } from "../../link/Link.js";
+import { Text as e } from "../../text/Text.js";
+import { useFormField as u } from "../FormField.context.js";
+const p = l(({ children: o, href: a, onPress: n }, r) => {
+  const { formContextualLinkId: i } = u();
+  return a ? /* @__PURE__ */ t(
+    d,
+    {
+      id: i,
+      color: "secondary",
+      variant: "standalone",
+      "data-unity-slot": "contextual-link",
+      href: a,
+      ref: r,
+      "data-dd-privacy": "allow",
+      children: /* @__PURE__ */ t(e, { variant: "actionSmall", children: o })
+    }
+  ) : /* @__PURE__ */ t(
+    m,
+    {
+      id: i,
+      onPress: n,
+      "data-unity-slot": "contextual-link",
+      className: "uy:typography-body-small uy:w-fit",
+      ref: r,
+      "data-dd-privacy": "allow",
+      children: o
+    }
+  );
+});
+p.displayName = "FormContextualLink";
+export {
+  p as FormContextualLink
+};

package/dist/esm/components/form-field/parts/FormControl.js

@@ -0,0 +1,50 @@
+import { jsx as v } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { Slot as g } from "@radix-ui/react-slot";
+import { mergeProps as x } from "react-aria";
+import { useFormContext as C, useController as L } from "react-hook-form";
+import { useFormField as D } from "../FormField.context.js";
+function F({ ...t }) {
+  const {
+    name: d,
+    hasHelperText: r,
+    hasContextualLink: n,
+    fieldState: i,
+    formLabelId: l,
+    formItemId: m,
+    formDescriptionId: e,
+    formMessageId: s,
+    formContextualLinkId: f
+  } = D(), { control: c } = C(), {
+    field: { ref: p, ...u }
+  } = L({ name: d, control: c }), { error: a } = i, b = y(() => [
+    a ? s : void 0,
+    r ? e : void 0
+  ].filter(Boolean).join(" "), [a, r, e, s]), o = {
+    isDisabled: i.isDisabled,
+    isInvalid: i.isInvalid,
+    isLoading: i.isLoading,
+    isReadOnly: i.isReadOnly,
+    isRequired: i.isRequired
+  }, I = x(t, o, u);
+  return /* @__PURE__ */ v(
+    g,
+    {
+      ...I,
+      ref: p,
+      "data-slot": "form-control",
+      id: m,
+      "aria-labelledby": l,
+      "aria-describedby": b,
+      "aria-details": n ? f : void 0,
+      "aria-invalid": o.isInvalid,
+      "aria-disabled": o.isDisabled,
+      "aria-required": o.isRequired,
+      "aria-busy": o.isLoading
+    }
+  );
+}
+F.displayName = "FormControl";
+export {
+  F as FormControl
+};

package/dist/esm/components/form-field/parts/FormFeedbackText.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Text as l } from "../../text/Text.js";
+import { useFormField as n } from "../FormField.context.js";
+const f = s(
+  ({ children: t, ...o }, a) => {
+    const {
+      fieldState: { error: r, isInvalid: d },
+      formMessageId: m
+    } = n(), e = r ? String(r.message) : t;
+    return !d || !e ? null : /* @__PURE__ */ i(
+      l,
+      {
+        ...o,
+        id: m,
+        ref: a,
+        "data-unity-slot": "form-feedback-text",
+        className: "uy:typography-body-small-strong uy:text-content-form-invalid",
+        "data-dd-privacy": "allow",
+        children: e
+      }
+    );
+  }
+);
+f.displayName = "FormFeedbackText";
+export {
+  f as FormFeedbackText
+};

package/dist/esm/components/form-field/parts/FormHelperText.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Text as m } from "../../text/Text.js";
+import { useFormField as i } from "../FormField.context.js";
+const p = l(
+  ({ children: r, ...o }, t) => {
+    const { formDescriptionId: e } = i();
+    return /* @__PURE__ */ a(
+      m,
+      {
+        ...o,
+        id: e,
+        "data-unity-slot": "helper-text",
+        variant: "bodySmall",
+        color: "content.neutral.low",
+        ref: t,
+        "data-dd-privacy": "allow",
+        children: r
+      }
+    );
+  }
+);
+p.displayName = "HelperText";
+export {
+  p as FormHelperText
+};

package/dist/esm/components/form-field/parts/FormLabel.js

@@ -0,0 +1,30 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Label as f } from "../../label/Label.js";
+import { useFormField as s } from "../FormField.context.js";
+const n = l(
+  ({ children: e, ...r }, o) => {
+    const { requiredVariant: m } = r, {
+      formLabelId: t,
+      formItemId: a,
+      fieldState: { isRequired: i }
+    } = s();
+    return /* @__PURE__ */ d(
+      f,
+      {
+        ref: o,
+        id: t,
+        isRequired: i,
+        requiredVariant: m,
+        htmlFor: a,
+        className: "uy:leading-[1]!",
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+n.displayName = "Label";
+export {
+  n as FormLabel
+};

package/dist/esm/components/full-page-loader/FullPageLoader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const fullPageLoader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center", unknown, unknown, undefined>>;
+export type FullPageLoaderProps = {
+    label?: ReactNode;
+};
+/**
+ * The `FullPageLoader` component should used to inform the user that the entire page content is loading
+ */
+declare const FullPageLoader: {
+    ({ label }: FullPageLoaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FullPageLoader };

package/dist/esm/components/full-page-loader/FullPageLoader.js

@@ -0,0 +1,35 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useId as o } from "react-aria";
+import { FormattedMessage as t } from "react-intl";
+import { tv as s } from "tailwind-variants";
+import { Spinner as i } from "../spinner/Spinner.js";
+const n = s({
+  // add the component styles
+  base: "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center"
+}), m = ({ label: a }) => {
+  const r = o();
+  return /* @__PURE__ */ l(
+    "main",
+    {
+      id: r,
+      className: n(),
+      "aria-busy": "true",
+      "data-dd-privacy": "allow",
+      children: [
+        /* @__PURE__ */ e("h1", { className: "uy:sr-only", children: a ?? /* @__PURE__ */ e(
+          t,
+          {
+            id: "unity:component:full-page-loader:label",
+            defaultMessage: "Content is loading..."
+          }
+        ) }),
+        /* @__PURE__ */ e(i, { label: "", size: "medium", role: "presentation" })
+      ]
+    }
+  );
+};
+m.displayName = "FullPageLoader";
+export {
+  m as FullPageLoader,
+  n as fullPageLoader
+};

package/dist/esm/components/funnel-layout/FunnelLayout.context.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+interface FunnelLayoutContextValue {
+    ids: {
+        topbarId: string;
+        asideId: string;
+        mainContentId: string;
+        funnelTitleId: string;
+        funnelDescriptionId: string;
+        funnelStatusId: string;
+        footerId: string;
+    };
+}
+export declare const useFunnelLayoutContext: () => FunnelLayoutContextValue;
+interface FunnelLayoutProviderProps extends PropsWithChildren {
+    ids: FunnelLayoutContextValue['ids'];
+}
+export declare const FunnelLayoutProvider: ({ children, ids, }: FunnelLayoutProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/funnel-layout/FunnelLayout.context.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, useContext as u } from "react";
+const e = r(
+  void 0
+), a = () => {
+  const t = u(e);
+  if (!t)
+    throw new Error(
+      "useFunnelLayout must be used within a FunnelLayoutProvider"
+    );
+  return t;
+}, x = ({
+  children: t,
+  ids: o
+}) => /* @__PURE__ */ n(
+  e.Provider,
+  {
+    value: {
+      ids: o
+    },
+    children: t
+  }
+);
+export {
+  x as FunnelLayoutProvider,
+  a as useFunnelLayoutContext
+};