@payfit/unity-components 1.1.1-beta.1 → 2.0.0

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

@@ -1,42 +1,57 @@
-import { jsx as N } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { flex as k } from "./Flex.variants.js";
-const e = j(
+import { jsx as E } from "react/jsx-runtime";
+import { forwardRef as M, useMemo as S } from "react";
+import { flex as b } from "./Flex.variants.js";
+const N = M(
   ({
-    asElement: o = "div",
-    children: r,
-    className: t,
-    inline: s,
-    direction: m,
-    isReversed: a,
-    wrap: l,
-    gap: f,
-    gapX: c,
-    gapY: i,
-    justify: n,
-    align: p,
-    alignContent: x,
-    ...d
-  }, y) => {
-    const F = k({
-      inline: s,
-      direction: m,
-      isReversed: a,
-      wrap: l,
-      gap: f,
-      gapX: c,
-      gapY: i,
-      justify: n,
-      align: p,
-      alignContent: x,
-      className: t
-    });
-    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
+    asElement: a = "div",
+    children: d,
+    className: m,
+    inline: o,
+    direction: r,
+    isReversed: e,
+    wrap: f,
+    gap: s,
+    gapX: t,
+    gapY: x,
+    justify: l,
+    align: c,
+    alignContent: F,
+    ...k
+  }, p) => {
+    const u = S(
+      () => b({
+        inline: o,
+        direction: r,
+        isReversed: e,
+        wrap: f,
+        gap: s,
+        gapX: t,
+        gapY: x,
+        justify: l,
+        align: c,
+        alignContent: F,
+        className: m
+      }),
+      [
+        c,
+        F,
+        m,
+        r,
+        s,
+        t,
+        x,
+        o,
+        e,
+        l,
+        f
+      ]
+    );
+    return /* @__PURE__ */ E(a, { ref: p, className: u, ...k, children: d });
   }
 );
-e.displayName = "Flex";
-const E = e;
+N.displayName = "Flex";
+const v = N;
 export {
-  e as Flex,
-  E as Stack
+  N as Flex,
+  v as Stack
 };

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

@@ -1,25 +1,31 @@
-import { PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren, Ref } from 'react';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { FormProps as AriaFormProps } from 'react-aria-components';
 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>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
+export interface FormProps<TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
     /** The form instance from react-hook-form */
-    form: UseFormReturn<TForm>;
+    form: UseFormReturn<TFormInputValues, any, TFormOutputs>;
     /** 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<TActionResult> | TActionResult;
+    action: (values: TFormOutputs) => 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;
+    onSuccess?: (result: TActionResult, data: TFormOutputs) => void;
     /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
-    onError?: (error: unknown, data: TForm) => void;
+    onError?: (error: unknown, data: TFormOutputs) => void;
     /** Handle form validation errors (when form data is invalid) */
-    onInvalid?: (errors: FieldErrors) => void;
+    onInvalid?: (errors: FieldErrors<TFormInputValues>) => void;
     /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
     debug?: boolean;
 }
+type FormComponent = {
+    <TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown>(props: FormProps<TSchema, TFormInputValues, TFormOutputs, TActionResult> & {
+        ref?: Ref<HTMLFormElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
 /**
  * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
  *
@@ -31,5 +37,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, unknown> & import('react').RefAttributes<HTMLFormElement>>;
+declare const Form: FormComponent;
 export { Form };

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

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

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

@@ -1,12 +1,13 @@
 import { jsx as p } from "react/jsx-runtime";
-import a, { forwardRef as H, useMemo as d } from "react";
+import n, { forwardRef as H, useMemo as d } from "react";
 import { uyTv as L } from "@payfit/unity-themes";
-import { useController as P } from "react-hook-form";
-import S from "../../hooks/use-id.js";
-import { useUnityFormProvider as g } from "../form/Form.context.js";
-import { FormFieldProvider as j } from "./FormField.context.js";
-import { FormContextualLink as D } from "./parts/FormContextualLink.js";
-import { FormHelperText as E } from "./parts/FormHelperText.js";
+import { useController as S } from "react-hook-form";
+import P from "../../hooks/use-id.js";
+import { createSchemaAdapter as g } from "../../utils/createSchemaAdapter.js";
+import { useUnityFormProvider as j } from "../form/Form.context.js";
+import { FormFieldProvider as w } from "./FormField.context.js";
+import { FormHelperText as D } from "./parts/FormHelperText.js";
+import { RawFormContextualLink as E } from "./parts/RawFormContextualLink.js";
 import { isFieldRequired as I } from "./utils/isFieldRequired.js";
 const N = L({
   slots: {
@@ -23,19 +24,19 @@ const N = L({
     isRequired: F,
     isDisabled: h
   }, y) => {
-    const b = S(), { schema: t } = g(), { formState: i } = P({ name: r, control: f }), C = d(
-      () => I(t, r),
+    const b = P(), { schema: t } = j(), { formState: i } = S({ name: r, control: f }), C = d(
+      () => I(g(t), r),
       [t, r]
     ), { hasHelperText: R, hasContextualLink: T } = d(() => {
-      let s = !1, l = !1;
-      const m = (v) => {
-        a.Children.forEach(v, (n) => {
-          if (!a.isValidElement(n)) return;
-          const e = n;
-          e.type === E ? s = !0 : e.type === D && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
+      let s = !1, m = !1;
+      const l = (v) => {
+        n.Children.forEach(v, (a) => {
+          if (!n.isValidElement(a)) return;
+          const e = a;
+          e.type === D ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
         });
       };
-      return m(o), { hasHelperText: s, hasContextualLink: l };
+      return l(o), { hasHelperText: s, hasContextualLink: m };
     }, [o]), k = {
       name: r,
       isLoading: u,
@@ -46,7 +47,7 @@ const N = L({
       isRequired: F ?? C,
       isDisabled: h ?? (i.isSubmitting || i.disabled)
     }, { base: q } = N();
-    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(j, { ...k, children: o }) });
+    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(w, { ...k, children: o }) });
   }
 );
 _.displayName = "FormField";

package/dist/esm/components/form-field/parts/{FormContextualLink.d.ts → RawFormContextualLink.d.ts}

@@ -16,5 +16,5 @@ interface FormContextualLinkActionProps {
 /**
  * FormContextualLink is a component that displays a contextual link for a form field.
  */
-declare const FormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export { FormContextualLink };
+declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawFormContextualLink };

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

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

package/dist/esm/components/form-field/utils/isFieldRequired.d.ts

@@ -1,8 +1,8 @@
-import { ZodObject, ZodRawShape } from 'zod';
+import { StandardSchema } from '../../../types/schema.js';
 /**
- * Determines if a field is required based on its path in a Zod schema
- * @param schema - The Zod schema object
+ * Determines if a field is required based on its path in a schema
+ * @param schema - The schema adapter object
  * @param fieldPath - The path to the field (e.g., "preferences.marketing")
  * @returns true if the field is required, false if optional or not found
  */
-export declare function isFieldRequired(schema: ZodObject<ZodRawShape> | null | undefined, fieldPath: string): boolean;
+export declare function isFieldRequired(schema: StandardSchema | null | undefined, fieldPath: string): boolean;

package/dist/esm/components/form-field/utils/isFieldRequired.js

@@ -1,23 +1,8 @@
-import { z as f } from "zod";
-function p(r, s) {
-  try {
-    if (!r) return !1;
-    const n = s.split(".");
-    let a = r.shape, e;
-    for (let t = 0; t < n.length; t++) {
-      const l = n[t];
-      if (e = a[l], !e) return !1;
-      if (t < n.length - 1) {
-        const i = e instanceof f.ZodOptional ? e._def.innerType.shape : e.shape;
-        if (!i) return !1;
-        a = i;
-      }
-    }
-    return e ? !(e instanceof f.ZodOptional) : !1;
-  } catch {
-    return !1;
-  }
+function l(e, t) {
+  if (!e) return !1;
+  const i = e.getField(t);
+  return i ? !i.isOptional : !1;
 }
 export {
-  p as isFieldRequired
+  l as isFieldRequired
 };

package/dist/esm/components/funnel-layout/parts/FunnelPageActions.js

@@ -1,32 +1,32 @@
-import { jsxs as l, Fragment as u, jsx as s } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
-const b = p({
+import { jsxs as e, Fragment as l, jsx as c } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useBreakpointListener as y } from "../../../hooks/use-breakpoint-listener.js";
+const d = m({
   base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between"
-}), w = h(
-  ({ renderNext: y, renderPrevious: a, renderOptionalActions: m, ...g }, x) => {
-    const f = t(), c = f === "xs" || f === "sm";
-    return /* @__PURE__ */ l(
+}), f = u(
+  ({ renderNext: a, renderPrevious: n, renderOptionalActions: o, ...t }, r) => {
+    const s = y(), i = s === "xs" || s === "sm";
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: x,
+        ref: r,
         "data-dd-privacy": "allow",
-        ...g,
-        className: b(),
+        ...t,
+        className: d(),
         role: "group",
         "data-unity-component": "FunnelPageActions",
         children: [
-          c && /* @__PURE__ */ l(u, { children: [
-            y(),
-            a == null ? void 0 : a(),
-            m == null ? void 0 : m()
+          i && /* @__PURE__ */ e(l, { children: [
+            a(),
+            n?.(),
+            o?.()
           ] }),
-          !c && /* @__PURE__ */ l(u, { children: [
-            /* @__PURE__ */ s("div", { className: "uy:flex uy:gap-100", children: m == null ? void 0 : m() }),
-            /* @__PURE__ */ l("div", { className: "uy:flex uy:gap-100", children: [
-              a == null ? void 0 : a(),
-              y()
+          !i && /* @__PURE__ */ e(l, { children: [
+            /* @__PURE__ */ c("div", { className: "uy:flex uy:gap-100", children: o?.() }),
+            /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100", children: [
+              n?.(),
+              a()
             ] })
           ] })
         ]
@@ -34,8 +34,8 @@ const b = p({
     );
   }
 );
-w.displayName = "FunnelPageActions";
+f.displayName = "FunnelPageActions";
 export {
-  w as FunnelPageActions,
-  b as funnelPageActions
+  f as FunnelPageActions,
+  d as funnelPageActions
 };

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts

@@ -32,9 +32,9 @@ export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeo
  *   return (
  *     <FunnelSidebar>
  *       <TaskMenu>
- *         <Task>
+ *         <RawTask>
  *           <TaskTitle>Task 1</TaskTitle>
- *         </Task>
+ *         </RawTask>
  *       </TaskMenu>
  *     </FunnelSidebar>
  *   )

package/dist/esm/components/icon/Icon.js

@@ -1,7 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconSprite as i } from "@payfit/unity-icons";
-import { uyTv as d } from "@payfit/unity-themes";
-const l = d({
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { IconSprite as d } from "@payfit/unity-icons";
+import { uyTv as l } from "@payfit/unity-themes";
+const y = l({
   variants: {
     size: {
       20: "uy:w-250 uy:h-250",
@@ -87,27 +88,30 @@ const l = d({
     display: "block"
   }
 });
-function f({
-  alt: n,
-  color: o,
-  size: c,
-  src: r,
-  role: a = "img",
-  display: s = "block",
-  ...t
+function b({
+  alt: r,
+  color: t,
+  size: e,
+  src: a,
+  role: s = "img",
+  display: n = "block",
+  ...o
 }) {
-  const u = l({ size: c, color: o, display: s });
-  return /* @__PURE__ */ e(
+  const u = i(
+    () => y({ size: e, color: t, display: n }),
+    [e, t, n]
+  );
+  return /* @__PURE__ */ c(
     "span",
     {
       "data-dd-privacy": "allow",
-      ...t,
-      role: a,
-      "aria-label": t["aria-labelledby"] ? void 0 : n,
-      children: /* @__PURE__ */ e(i, { className: u, src: r })
+      ...o,
+      role: s,
+      "aria-label": o["aria-labelledby"] ? void 0 : r,
+      children: /* @__PURE__ */ c(d, { className: u, src: a })
     }
   );
 }
 export {
-  f as Icon
+  b as Icon
 };