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

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,66 @@
+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",
+      {
+        "data-dd-privacy": "allow",
+        ...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.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 { Form as k } from "react-aria-components";
+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.mjs";
-const P = u(
+const P = x(
   () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
-), S = j(
+), S = u(
   ({
     form: t,
     schema: n,
@@ -18,26 +18,26 @@ 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 = {};
-      return Object.entries(e).forEach(([a, r]) => {
-        r != null && r.message && typeof r.message == "string" && (o[a] = r.message);
+      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 (a) {
-          console.error(a), s == null || s(a);
+        } catch (i) {
+          console.error(i), s == null || s(i);
         }
       })(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 }) }),
-      /* @__PURE__ */ i(
-        k,
+    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,
@@ -45,6 +45,7 @@ const P = u(
           className: f,
           validationErrors: y,
           onReset: c,
+          "data-dd-privacy": "mask",
           children: d
         }
       )

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

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

package/dist/esm/components/form-field/parts/FormControl.d.mts

@@ -1,5 +1,28 @@
 import { Slot } from '@radix-ui/react-slot';
 export type FormControlProps = React.ComponentProps<typeof Slot>;
+/**
+ * FormControl is a wrapper component that connects input components to form state within a FormField.
+ * It handles accessibility concerns like proper ARIA attributes and focus states.
+ *
+ * This component is required when building custom form fields - it must wrap the actual input element
+ * to connect it properly to the form state.
+ * @example
+ * ```tsx
+ * import { FormControl, FormField, Input } from '@payfit/unity-components'
+ *
+ * function MyFormField() {
+ *   return (
+ *     <FormField name="email">
+ *       <FormControl>
+ *         <Input />
+ *       </FormControl>
+ *     </FormField>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
+ */
 declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormControl {
     var displayName: string;

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

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

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

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

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

@@ -1,23 +1,32 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useId as o } from "react-aria";
-import { FormattedMessage as s } from "react-intl";
-import { tv as t } from "tailwind-variants";
+import { FormattedMessage as t } from "react-intl";
+import { tv as s } from "tailwind-variants";
 import { Spinner as i } from "../spinner/Spinner.mjs";
-const n = t({
+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: r }) => {
-  const a = o();
-  return /* @__PURE__ */ l("main", { id: a, className: n(), "aria-busy": "true", children: [
-    /* @__PURE__ */ e("h1", { className: "uy-sr-only", children: r ?? /* @__PURE__ */ e(
-      s,
-      {
-        id: "unity:component:full-page-loader:label",
-        defaultMessage: "Content is loading..."
-      }
-    ) }),
-    /* @__PURE__ */ e(i, { label: "", size: "medium", role: "presentation" })
-  ] });
+}), 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 {

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

@@ -100,6 +100,7 @@ function f({
   return /* @__PURE__ */ e(
     "span",
     {
+      "data-dd-privacy": "allow",
       ...t,
       role: a,
       "aria-label": t["aria-labelledby"] ? void 0 : n,

package/dist/esm/components/icon-button/CircularIconButton.d.mts

@@ -1,12 +1,77 @@
 import { UnityIcon } from '@payfit/unity-icons';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-export type CircularIconButtonProps = AriaButtonProps & {
+import { VariantProps } from 'tailwind-variants';
+export declare const circularIconButton: import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}>, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface CircularIconButtonProps extends AriaButtonProps, VariantProps<typeof circularIconButton> {
     icon: UnityIcon;
     title: string;
+    asElement?: 'button' | 'default';
     isLoading?: boolean;
     isDisabled?: boolean;
-};
-export declare const circularIconButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+}
 export declare function CircularIconButton(props: CircularIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CircularIconButton {
     var displayName: string;