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

package/dist/esm/components/fieldset/Fieldset.d.mts

@@ -0,0 +1,150 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const fieldset: import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
+    /**
+     * The legend of the fieldset.
+     */
+    legend: string;
+    /**
+     * An optional description of the fieldset.
+     */
+    description?: string;
+    /**
+     * Whether to hide the legend of the fieldset.
+     */
+    isLegendHidden?: boolean;
+}
+/**
+ * The `Fieldset` component groups related form fields together with an accessible structure.
+ * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
+ * @param {FieldsetProps} props - The props for the `Fieldset` component
+ * @see {@link FieldsetProps} for all available props
+ * @example
+ * ```tsx
+ * import { Fieldset } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset
+ *       legend="Personal Information"
+ *       description="Please provide your contact details"
+ *       isLegendHidden={false}
+ *     >
+ *       <TextField name="firstName" label="First name" />
+ *       <TextField name="lastName" label="Last name" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.mjs

@@ -0,0 +1,65 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useId as g } from "react-aria";
+import { tv as b } from "tailwind-variants";
+const x = b({
+  slots: {
+    base: "uy-p-0 uy-m-0 [&+&]:uy-mt-500 [&:last-of-type]:uy-mb-500",
+    legend: "uy-typography-h3 uy-text-content-neutral",
+    description: "uy-block uy-typography-body uy-mt-100 uy-text-content-neutral",
+    fieldsContainer: "uy-flex uy-flex-col uy-gap-250"
+  },
+  variants: {
+    isLegendHidden: {
+      true: {
+        legend: "uy-sr-only",
+        description: "uy-sr-only",
+        fieldsContainer: "uy-mt-0"
+      },
+      false: {
+        legend: "uy-block",
+        description: "uy-block",
+        fieldsContainer: "uy-mt-300"
+      }
+    }
+  },
+  defaultVariants: {
+    isLegendHidden: !1
+  }
+}), h = m(
+  ({ children: i, ...d }, n) => {
+    const s = g(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
+      base: a,
+      legend: y,
+      description: c,
+      fieldsContainer: u
+    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
+    return /* @__PURE__ */ f(
+      "fieldset",
+      {
+        ...r,
+        ref: n,
+        className: a(),
+        "aria-describedby": p,
+        children: [
+          /* @__PURE__ */ t("legend", { className: y(), children: l }),
+          e && /* @__PURE__ */ t(
+            "span",
+            {
+              id: `${s}-fieldset-description`,
+              "data-fieldset-slot": "description",
+              className: c(),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: u(), children: i })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Fieldset";
+export {
+  h as Fieldset,
+  x as fieldset
+};

package/dist/esm/components/fieldset/parts/FieldGroup.d.mts

@@ -0,0 +1,27 @@
+/**
+ * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
+ * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
+ * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
+ * @example
+ * ```tsx
+ * import { Fieldset, FieldGroup } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset legend="Personal Information">
+ *       <FieldGroup>
+ *         <TextField name="firstName" label="First name" />
+ *         <TextField name="lastName" label="Last name" />
+ *       </FieldGroup>
+ *       <TextField name="email" label="Email" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { FieldGroup };

package/dist/esm/components/fieldset/parts/FieldGroup.mjs

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+const u = p(
+  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
+    "div",
+    {
+      ...o,
+      ref: d,
+      role: "group",
+      className: "uy-grid uy-grid-cols-1 uy-gap-y-250 md:uy-grid-cols-2 md:uy-gap-x-200",
+      children: r
+    }
+  )
+);
+u.displayName = "FieldGroup";
+export {
+  u as FieldGroup
+};

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

@@ -7,6 +7,6 @@ interface UnityFormContextValue<TSchema extends Schema> {
     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>>): JSX.Element;
+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.mjs

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

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

@@ -1,11 +1,11 @@
 import { jsx as i, jsxs as b, Fragment as g } from "react/jsx-runtime";
-import { lazy as u, forwardRef as j, useMemo as x, Suspense as D } from "react";
+import { forwardRef as u, useMemo as j, Suspense as x, lazy as D } from "react";
 import { Form as k } from "react-aria-components";
 import { FormProvider as w } from "react-hook-form";
 import { UnityFormProvider as O } from "./Form.context.mjs";
-const P = u(
+const P = D(
   () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
-), S = j(
+), S = u(
   ({
     form: t,
     schema: n,
@@ -18,7 +18,7 @@ const P = u(
     debug: p = !1,
     ...h
   }, v) => {
-    const y = x(() => {
+    const y = j(() => {
       const e = t.formState.errors;
       if (!Object.keys(e).length) return;
       const o = {};
@@ -35,7 +35,7 @@ const P = u(
       })(e);
     };
     return /* @__PURE__ */ i(O, { schema: n, form: t, children: /* @__PURE__ */ b(w, { ...t, children: [
-      p && /* @__PURE__ */ i(D, { fallback: () => /* @__PURE__ */ i(g, {}), children: /* @__PURE__ */ i(P, { control: t.control }) }),
+      p && /* @__PURE__ */ i(x, { fallback: /* @__PURE__ */ i(g, {}), children: /* @__PURE__ */ i(P, { control: t.control }) }),
       /* @__PURE__ */ i(
         k,
         {

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

@@ -1,20 +1,38 @@
 import { PropsWithChildren } from 'react';
-import { TextFieldProps } from 'react-aria-components';
-import { FieldError, FieldPath, FieldValues } from 'react-hook-form';
+import { FieldPath, FieldValues } from 'react-hook-form';
 interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
     name: TName;
-    value: TextFieldProps['value'];
-    type: TextFieldProps['type'];
-    isRequired: boolean;
-    requiredVariant: 'required' | 'optional';
-    isInvalid: boolean;
-    isLoading: boolean;
-    isReadOnly: boolean;
-    isDisabled: boolean;
-    validationError?: FieldError;
-    resetField: (() => void) | undefined;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    hasHelperText?: boolean;
+    hasContextualLink?: boolean;
 }
 export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
-export declare function FormFieldProvider({ children, name, value, resetField, type, isRequired, requiredVariant, isInvalid, isLoading, isReadOnly, isDisabled, validationError, }: PropsWithChildren<FormFieldContextValue>): JSX.Element;
-export declare function useFormField(): 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 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;
+    name: string;
+    hasHelperText: boolean | undefined;
+    hasContextualLink: boolean | undefined;
+    formLabelId: string;
+    formItemId: string;
+    formDescriptionId: string | undefined;
+    formMessageId: string;
+    formContextualLinkId: string | undefined;
+};
 export {};

package/dist/esm/components/form-field/FormField.context.mjs

@@ -0,0 +1,81 @@
+import { jsx as F } from "react/jsx-runtime";
+import { createContext as x, useContext as p } from "react";
+import { useFormContext as I, useFormState as v } from "react-hook-form";
+const u = x({
+  id: "",
+  name: ""
+});
+function $({
+  children: o,
+  id: i,
+  name: t,
+  isRequired: s,
+  isInvalid: r,
+  isLoading: e,
+  isReadOnly: n,
+  isDisabled: d,
+  hasHelperText: m,
+  hasContextualLink: a
+}) {
+  return /* @__PURE__ */ F(
+    u.Provider,
+    {
+      value: {
+        id: i,
+        name: t,
+        isRequired: s,
+        isInvalid: r,
+        isLoading: e,
+        isReadOnly: n,
+        isDisabled: d,
+        hasHelperText: m,
+        hasContextualLink: a
+      },
+      children: o
+    }
+  );
+}
+function k() {
+  const o = p(u), { getFieldState: i } = I(), t = v({ name: o.name }), { invalid: s, ...r } = i(
+    o.name,
+    t
+  ), {
+    id: e,
+    isRequired: n,
+    isInvalid: d,
+    isLoading: m,
+    isReadOnly: a,
+    isDisabled: c,
+    hasHelperText: l,
+    hasContextualLink: f
+  } = o;
+  if (!o)
+    throw new Error("useFormField should be used within <FormField> component");
+  return {
+    ...{
+      id: e,
+      name: o.name,
+      hasHelperText: l,
+      hasContextualLink: f,
+      formLabelId: `${e}-form-field-label`,
+      formItemId: `${e}-form-item`,
+      formDescriptionId: l ? `${e}-form-field-description` : void 0,
+      formMessageId: `${e}-form-field-feedback-text`,
+      formContextualLinkId: f ? `${e}-form-field-contextual-link` : void 0
+    },
+    fieldState: {
+      ...r,
+      isRequired: n,
+      isInvalid: d,
+      isLoading: m,
+      isReadOnly: a,
+      isDisabled: c
+    },
+    formState: t
+  };
+}
+export {
+  u as FormFieldContext,
+  $ as FormFieldProvider,
+  k as useFormField
+};

package/dist/esm/components/form-field/FormField.d.mts

@@ -1,16 +1,12 @@
-import { TextFieldProps } from 'react-aria-components';
+import { default as React } from 'react';
 import { Control, FieldPath, FieldValues } from 'react-hook-form';
-export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends TextFieldProps {
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
     /** The form control from react-hook-form */
     control: Control<TFieldValues>;
     /** The name of the field in the form */
     name: TName;
-    /** The type of the field */
-    type: TextFieldProps['type'];
     /** Whether the field is required */
     isRequired?: boolean;
-    /** The variant of the required indicator */
-    requiredVariant?: 'required' | 'optional';
     /** Whether the field is in an invalid state */
     isInvalid?: boolean;
     /** Whether the field is in a loading state */
@@ -19,19 +15,47 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues,
     isDisabled?: boolean;
     /** Whether the field is read-only */
     isReadOnly?: boolean;
+    /** Additional class name */
+    className?: string;
 }
 /**
  * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
- *
  * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
+ * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
+ * @see {@link FormFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const { Form, FormField } = useUnityForm(loginSchema)
  *
- * A `FormField` is composed of the following parts:
- * - `FormLabel`: The label of the field.
- * - `FormHelperText`: A helper text that gives additional context to the field.
- * - `FormFeedbackText`: An error message that appears when the field is in an invalid state.
- * - `FormInput`: The input element of the field.
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <Form action={submitForm}>
+ *       <FormField name="email">
+ *         <FormLabel>Email</FormLabel>
+ *         <FormHelperText>Enter your primary email address</FormHelperText>
+ *         <FormControl>
+ *          <Input type="email"/>
+ *         </FormControl>
+ *         <FormFeedbackText/>
+ *       </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
  */
-export declare function FormField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ children, control, type, name, isRequired: isRequiredProp, requiredVariant, isInvalid, isLoading, isDisabled: isDisabledProp, isReadOnly, }: FormFieldProps<TFieldValues, TName>): JSX.Element;
-export declare namespace FormField {
-    var displayName: string;
-}
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
+export { FormField };

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

@@ -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.mjs";
+import { useUnityFormProvider as j } from "../form/Form.context.mjs";
+import { FormFieldProvider as D } from "./FormField.context.mjs";
+import { FormContextualLink as E } from "./parts/FormContextualLink.mjs";
+import { FormHelperText as N } from "./parts/FormHelperText.mjs";
+import { isFieldRequired as _ } from "./utils/isFieldRequired.mjs";
+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.mjs

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