@payfit/unity-components 1.0.0 → 1.1.0

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

@@ -1,217 +1,199 @@
-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"
-      }
+import { uyTv as s } from "@payfit/unity-themes";
+const y = s({
+  base: "uy:flex",
+  variants: {
+    inline: {
+      true: "uy:inline-flex",
+      false: "uy:flex"
     },
-    defaultVariants: {
-      inline: !1,
-      direction: "row",
-      wrap: "nowrap",
-      justify: "start",
-      align: "stretch",
-      isReversed: !1
+    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"
     },
-    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"
-      }
-    ]
+    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"
+    }
   },
-  {
-    /*
-     * 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: {
+    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"
+    }
+  ]
+}), 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"
     },
-    defaultVariants: {
-      grow: 0,
-      shrink: 1,
-      order: "none",
-      self: "auto"
+    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"
     }
   },
-  {
-    /*
-     * FIXME: won't work because of tailwind-variants limitation.
-     *  Add the basic layout classes (flexbox) to tailwind's safelist
-     */
-    // responsiveVariants: ['sm', 'md', 'lg', 'xl'],
+  defaultVariants: {
+    grow: 0,
+    shrink: 1,
+    order: "none",
+    self: "auto"
   }
-);
+});
 export {
   y as flex,
   e as flexItem

package/dist/esm/components/flex/FlexItem.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 import { flexItem } from './Flex.variants.js';
 export type FlexItemVariantProps = VariantProps<typeof flexItem>;
 type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';

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

@@ -1,12 +1,9 @@
 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 UnityFormProvider<TSchema extends Schema>({ children, schema, }: 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

@@ -1,30 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useContext as i, createContext as m } from "react";
-const o = m(null);
-function c({
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as n, createContext as i } from "react";
+const o = i(null);
+function s({
   children: t,
-  schema: r,
-  form: e
+  schema: r
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(
     o.Provider,
     {
       value: {
-        schema: r,
-        form: e
+        schema: r
       },
       children: t
     }
   );
 }
-function x() {
-  const t = i(o);
+function c() {
+  const t = n(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
+  s as UnityFormProvider,
+  c as useUnityFormProvider
 };

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

@@ -1,27 +1,29 @@
 import { PropsWithChildren } from 'react';
 import { FormProps as AriaFormProps } from 'react-aria-components';
-import { UseFormReturn } from 'react-hook-form';
-import { ZodError, infer as ZodInfer } from 'zod';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
 import { Schema, TFormValues } from '../../hooks/use-form.types.js';
 type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
-export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>> extends PropsWithChildren<AllowedAriaFormProps> {
+export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
     /** The form instance from react-hook-form */
     form: UseFormReturn<TForm>;
     /** The schema to validate the form data */
     schema: TSchema;
     /** The operations to execute when the form is submitted and the input data is valid */
-    action: (values: TForm) => Promise<void> | void;
-    /** Handle successful form submission (when `action` callback resolves its promise or does not throw an error) */
-    onSuccess?: (data: TForm) => void;
-    /** Handle form submission errors (when `action` callback rejects its promise or throws an error) */
-    onError?: (error: ZodError | Error) => void;
+    action: (values: TForm) => Promise<TActionResult> | TActionResult;
+    /** Handle successful form submission (when the `action` callback resolves its promise or does not throw an error) */
+    onSuccess?: (result: TActionResult, data: TForm) => void;
+    /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
+    onError?: (error: unknown, data: TForm) => void;
+    /** Handle form validation errors (when form data is invalid) */
+    onInvalid?: (errors: FieldErrors) => void;
     /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
     debug?: boolean;
 }
 /**
- * The `Form` component provides full state management for complex forms with validation, by following a schema-based approach.
+ * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
  *
- * Use this component to create complex form with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
+ * Use this component to create complex forms with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
  *
  * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
  *
@@ -29,5 +31,5 @@ export interface FormProps<TSchema extends Schema, TForm extends TFormValues = Z
  * $ yarn add zod react-hook-form
  * ```
  */
-declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues> & import('react').RefAttributes<HTMLFormElement>>;
+declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues, unknown> & import('react').RefAttributes<HTMLFormElement>>;
 export { Form };

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

@@ -1,58 +1,55 @@
-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(
+import { jsx as m, jsxs as v, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as F, Suspense as P, lazy as j } from "react";
+import { FormProvider as n } from "react-hook-form";
+import { UnityFormProvider as u } from "./Form.context.js";
+const D = j(
+  () => import("@hookform/devtools").then((e) => ({ default: e.DevTool }))
+), T = F(
   ({
-    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,
+    form: e,
+    schema: f,
+    onSuccess: r,
+    onError: i,
+    onInvalid: l,
+    action: p,
+    children: a,
+    className: d,
+    onReset: h,
+    debug: s = !1,
+    ...b
+  }, c) => {
+    const y = e.handleSubmit(
+      (t) => {
+        Promise.resolve().then(() => p(t)).then((o) => {
+          r == null || r(o, t);
+        }).catch((o) => {
+          i == null || i(o, t);
+        });
+      },
+      (t) => {
+        l == null || l(t);
+      }
+    );
+    return /* @__PURE__ */ m(u, { schema: f, children: /* @__PURE__ */ v(n, { ...e, children: [
+      s && /* @__PURE__ */ m(P, { fallback: /* @__PURE__ */ m(x, {}), children: /* @__PURE__ */ m(D, { control: e.control }) }),
+      /* @__PURE__ */ m(
+        "form",
         {
-          ...h,
-          ref: v,
-          onSubmit: F,
-          className: f,
-          validationErrors: y,
-          onReset: c,
+          ...b,
+          ref: c,
+          onSubmit: (t) => {
+            y(t);
+          },
+          className: d,
+          onReset: h,
           "data-dd-privacy": "mask",
-          children: d
+          children: a
         }
       )
     ] }) });
   }
 );
-S.displayName = "Form";
+T.displayName = "Form";
 export {
-  S as Form
+  T as Form
 };

package/dist/esm/components/form-field/FormField.context.d.ts

@@ -4,7 +4,6 @@ interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues,
     id: string;
     name: TName;
     isRequired?: boolean;
-    isInvalid?: boolean;
     isLoading?: boolean;
     isReadOnly?: boolean;
     isDisabled?: boolean;
@@ -12,17 +11,13 @@ interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues,
     hasContextualLink?: boolean;
 }
 export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
-export declare function FormFieldProvider({ children, id, name, isRequired, isInvalid, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function FormFieldProvider({ children, id, name, isRequired, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
 export declare function useFormField(): {
     fieldState: {
         isRequired: boolean | undefined;
-        isInvalid: boolean | undefined;
         isLoading: boolean | undefined;
         isReadOnly: boolean | undefined;
         isDisabled: boolean | undefined;
-        isDirty: boolean;
-        isTouched: boolean;
-        error?: import('react-hook-form').FieldError;
     };
     formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
     id: string;