@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/promo-dialog/parts/PromoDialogHero.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren } from 'react';
+export interface PromoDialogHeroProps extends PropsWithChildren {
+    /**
+     * Additional class names for the hero
+     */
+    className?: string;
+}
+/**
+ * PromoDialogHero displays a promotional illustration or hero image in promo dialogs.
+ * It's designed to complement important announcements, feature introductions, or promotional content.
+ *
+ * This component is required when using `PromoDialog` and automatically triggers
+ * a special layout with the hero section on the left (desktop) or top (mobile), and content on the right/bottom.
+ * @param props - The props for the PromoDialogHero component
+ * @param props.children - The hero content, typically an Illustration component
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, DialogContent } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <DialogTitle>Welcome to our new feature</DialogTitle>
+ *       <DialogContent>
+ *         Discover how this feature can help you...
+ *       </DialogContent>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This component is specifically designed for promo dialogs and triggers a special horizontal split layout on desktop
+ * - On mobile devices, the layout automatically adjusts to a vertical stack
+ * - The hero section has a light blue background by default
+ * - Use with illustrations from `@payfit/unity-illustrations` for consistent branding
+ * - **Accessibility**: Hero content is marked as decorative (aria-hidden) as it's purely visual
+ */
+declare const PromoDialogHero: {
+    ({ children, className }: PromoDialogHeroProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogHero };

package/dist/esm/components/promo-dialog/parts/PromoDialogHero.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  base: [
+    "uy:rounded-150 uy:bg-surface-neutral-lowest",
+    "uy:flex uy:items-center uy:justify-center",
+    // Mobile: auto height for vertical stack
+    "uy:h-auto",
+    // Desktop: takes 1/3 of width, stretches to row height
+    "uy:md:basis-[40%] uy:lg:basis-[37.2%] uy:md:shrink-0"
+  ]
+}), u = ({ children: o, className: r }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: t({ className: r }),
+    "data-unity-slot": "promo-dialog.hero",
+    "data-dd-privacy": "allow",
+    "aria-hidden": "true",
+    children: o
+  }
+);
+u.displayName = "PromoDialogHero";
+export {
+  u as PromoDialogHero
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogSubtitle.d.ts

@@ -0,0 +1,53 @@
+import { TextProps } from '../../text/Text.js';
+export type PromoDialogSubtitleProps = Omit<TextProps, 'variant' | 'color'>;
+/**
+ * PromoDialogSubtitle displays a subtitle text above the title in a promo dialog.
+ * It provides consistent styling with body variant and neutral lowest color.
+ *
+ * This component should be used within a `PromoDialog` to display additional context
+ * or information above the main title, such as step indicators or feature labels.
+ * @param props - The props for the PromoDialogSubtitle component
+ * @param props.children - The subtitle text to be displayed
+ * @example
+ * ```tsx
+ * import {
+ *   PromoDialog,
+ *   PromoDialogHero,
+ *   PromoDialogSubtitle,
+ *   PromoDialogTitle,
+ *   PromoDialogContent,
+ *   PromoDialogActions,
+ *   DialogButton,
+ * } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <PromoDialogSubtitle>Step 1/3</PromoDialogSubtitle>
+ *       <PromoDialogTitle>Welcome</PromoDialogTitle>
+ *       <PromoDialogContent>
+ *         <p>This is the main content of the promo dialog.</p>
+ *       </PromoDialogContent>
+ *       <PromoDialogActions>
+ *         <DialogButton variant="close">Skip</DialogButton>
+ *         <DialogButton variant="confirm">Continue</DialogButton>
+ *       </PromoDialogActions>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use this component for displaying contextual information above the title
+ * - Styled with body variant and content.neutral.lowest color
+ * - Automatically positioned above PromoDialogTitle when used together
+ */
+declare const PromoDialogSubtitle: {
+    ({ children, ...rest }: PromoDialogSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogSubtitle };

package/dist/esm/components/promo-dialog/parts/PromoDialogSubtitle.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Text as l } from "../../text/Text.js";
+const r = ({
+  children: o,
+  ...t
+}) => /* @__PURE__ */ a(
+  l,
+  {
+    ...t,
+    variant: "body",
+    asElement: "h4",
+    color: "content.neutral.lowest",
+    "data-unity-slot": "promo-dialog.subtitle",
+    className: "uy:typography-body-small uy:md:typography-body uy:mb-100",
+    children: o
+  }
+);
+r.displayName = "PromoDialogSubtitle";
+export {
+  r as PromoDialogSubtitle
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const PromoDialogTitle: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogTitle };

package/dist/esm/components/promo-dialog/parts/PromoDialogTitle.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Heading as m } from "react-aria-components";
+const r = a({
+  base: ["uy:typography-h2 uy:md:typography-h1", "uy:mb-150 uy:md:mb-250"]
+}), i = ({ children: o }) => /* @__PURE__ */ t(
+  m,
+  {
+    slot: "title",
+    className: r(),
+    "data-dd-privacy": "allow",
+    children: o
+  }
+);
+i.displayName = "PromoDialogTitle";
+export {
+  i as PromoDialogTitle
+};

package/dist/esm/components/radio-button-group/TanstackRadioButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { RadioButtonGroupProps } from './RadioButtonGroup.js';
+/**
+ * Props for `TanstackRadioButtonGroup`.
+ *
+ * Inherits all visual/interaction props from the base `RadioButtonGroup`, but removes
+ * form‑control props that are provided by the TanStack Form field context instead.
+ *
+ * Omitted props:
+ * - `name`, `value`, `defaultValue`, `isInvalid` — these are driven by the form context.
+ */
+export type TanstackRadioButtonGroupProps = Omit<RadioButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid' | 'name'>;
+declare const TanstackRadioButtonGroup: import('react').ForwardRefExoticComponent<TanstackRadioButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackRadioButtonGroup };

package/dist/esm/components/radio-button-group/TanstackRadioButtonGroup.js

@@ -0,0 +1,43 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as B } from "../form-field/TanstackFormField.context.js";
+import { RadioButtonGroup as b } from "./RadioButtonGroup.js";
+function h({
+  onChange: d,
+  onBlur: n,
+  isDisabled: r,
+  isReadOnly: l,
+  children: s,
+  ...u
+}, c) {
+  const a = f(), t = B(), e = a.state.meta.isTouched && !a.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m(
+    b,
+    {
+      ...u,
+      ref: c,
+      id: t.inputId,
+      value: a.state.value,
+      onChange: (o) => {
+        a.handleChange(o), d?.(o);
+      },
+      onBlur: (o) => {
+        a.handleBlur(), n?.(o);
+      },
+      isDisabled: r,
+      isReadOnly: l,
+      "aria-labelledby": t.labelId,
+      "aria-describedby": i.length > 0 ? i : void 0,
+      "aria-details": t.contextualLinkId,
+      "aria-invalid": e || void 0,
+      "data-invalid": e || void 0,
+      children: s
+    }
+  );
+}
+const v = p(h);
+v.displayName = "TanstackRadioButtonGroup";
+export {
+  v as TanstackRadioButtonGroup
+};

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -2,26 +2,44 @@ import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components';
 export declare const radioButton: import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];
 }, undefined, {
-    isFocusVisible: {
-        true: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
     };
-}, {
+} | {}, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,79 +1,81 @@
-import { jsxs as a, jsx as r, Fragment as m } from "react/jsx-runtime";
-import { forwardRef as b, useContext as f, useMemo as p } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { RadioGroupStateContext as v, Radio as x } from "react-aria-components";
-import { Flex as R } from "../../flex/Flex.js";
-import { Text as S } from "../../text/Text.js";
+import { jsxs as u, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as g, useContext as v, useMemo as l } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { RadioGroupStateContext as S, Radio as h } from "react-aria-components";
+import { Flex as w } from "../../flex/Flex.js";
+import { Text as N } from "../../text/Text.js";
 import B from "./radio-input-selected.svg.js";
-import h from "./radio-input-unselected.svg.js";
-import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
-const F = g({
+import O from "./radio-input-unselected.svg.js";
+import { RadioButtonHelper as F } from "./RadioButtonHelper.js";
+const j = R({
   slots: {
-    base: [
-      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-center uy:cursor-pointer",
-      "uy:data-[disabled]:cursor-not-allowed",
-      "uy:data-[readonly]:cursor-not-allowed"
+    container: [
+      "uy:group uy:inline-flex uy:flex-col uy:gap-50",
+      "uy:rounded-md uy:sm:rounded-25",
+      "uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
+      "uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
+      "uy:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
+      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
     ],
-    radio: [
-      "uy:border-border-form-enabled uy:border-solid uy:bg-surface-form-enabled",
-      "uy:group-data-[disabled]:border-border-form-disabled"
+    base: [
+      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
+      "uy:data-[disabled=true]:cursor-not-allowed",
+      "uy:data-[readonly=true]:cursor-not-allowed"
     ],
+    radio: ["uy:mt-25 uy:sm:mt-px"],
     label: [
       "uy:text-content-neutral",
-      "uy:group-data-[disabled]:text-content-neutral-disabled",
-      "uy:group-data-[readonly]:text-content-neutral uy:group-data-[readonly]:cursor-text"
+      "uy:group-data-[disabled=true]:text-content-neutral-disabled",
+      "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
     ]
-  },
-  variants: {
-    isFocusVisible: {
-      true: "uy:outline-none uy:ring-2 uy:ring-offset-2 uy:ring-utility-focus-ring"
-    }
   }
-}), N = b(
-  ({ children: d, value: l, isDisabled: i, helperText: t, ...u }, n) => {
-    const { base: s, label: c } = F(), o = f(v), y = p(() => o?.isReadOnly ? {
+}), C = g(
+  ({ children: i, value: n, isDisabled: e, helperText: t, ...s }, y) => {
+    const { base: c, label: m, container: b, radio: a } = j(), r = v(S), p = l(() => r?.isReadOnly ? {
       "--radio-fill-color": "var(--uy-color-border-form-read-only)",
       "--radio-border-color": "var(--uy-color-border-form-disabled)"
     } : {
       "--radio-fill-color": "var(--uy-color-surface-primary-active)",
       "--radio-border-color": "var(--uy-color-border-form-active)"
-    }, [o?.isReadOnly]);
-    return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
-      /* @__PURE__ */ r(
-        x,
+    }, [r?.isReadOnly]), f = l(() => r?.isReadOnly || r?.isDisabled || e ? {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    } : {
+      "--radio-border-color": "var(--uy-color-border-form-enabled)"
+    }, [e, r?.isDisabled, r?.isReadOnly]);
+    return /* @__PURE__ */ u(w, { direction: "col", gap: "50", className: b(), children: [
+      /* @__PURE__ */ o(
+        h,
         {
-          ...u,
-          value: l,
-          isDisabled: i,
-          className: ({ isFocusVisible: e }) => s({ isFocusVisible: e }),
-          ref: n,
-          children: ({ isSelected: e }) => /* @__PURE__ */ a(m, { children: [
-            e ? /* @__PURE__ */ r(
+          ...s,
+          value: n,
+          isDisabled: e,
+          className: ({ isFocusVisible: d }) => c(),
+          ref: y,
+          children: ({ isSelected: d }) => /* @__PURE__ */ u(x, { children: [
+            d ? /* @__PURE__ */ o(
               B,
               {
-                style: y
+                style: p,
+                className: a()
               }
-            ) : /* @__PURE__ */ r(
-              h,
+            ) : /* @__PURE__ */ o(
+              O,
               {
-                style: o?.isReadOnly ? {
-                  // @ts-expect-error – annoying TS
-                  "--radio-border-color": "var(--uy-color-border-form-disabled)"
-                } : {
-                  "--radio-border-color": "var(--uy-color-border-form-enabled)"
-                }
+                style: f,
+                className: a()
               }
             ),
-            /* @__PURE__ */ r(S, { variant: "body", className: c(), children: d })
+            /* @__PURE__ */ o(N, { variant: "body", className: m(), children: i })
           ] })
         }
       ),
-      t ? /* @__PURE__ */ r(w, { children: t }) : null
+      t ? /* @__PURE__ */ o(F, { children: t }) : null
     ] });
   }
 );
-N.displayName = "RadioButton";
+C.displayName = "RadioButton";
 export {
-  N as RadioButton,
-  F as radioButton
+  C as RadioButton,
+  j as radioButton
 };

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts

@@ -42,6 +42,8 @@ interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldVal
  * @remarks
  * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
  * ```
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
 export { RadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/TanstackRadioButtonGroupField.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackRadioButtonGroupProps } from '../radio-button-group/TanstackRadioButtonGroup.js';
+export interface TanstackRadioButtonGroupFieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, TanstackRadioButtonGroupProps {
+    /** The label for the radio group. Required for accessibility. */
+    label: string;
+    /** Helper text to display above the radio group. Can be any React node. */
+    helperText?: ReactNode;
+    /** A contextual link to display under the field. Rendered after feedback. */
+    contextualLink?: ReactNode;
+}
+declare const TanstackRadioButtonGroupField: import('react').ForwardRefExoticComponent<TanstackRadioButtonGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackRadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/TanstackRadioButtonGroupField.js

@@ -0,0 +1,38 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { TanstackFormFeedbackText as p } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as l } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as u } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as f } from "../form-field/TanstackFormField.js";
+import { TanstackRadioButtonGroup as k } from "../radio-button-group/TanstackRadioButtonGroup.js";
+function F({
+  label: t,
+  helperText: r,
+  contextualLink: a,
+  isRequired: i,
+  requiredVariant: m,
+  children: n,
+  ...e
+}, c) {
+  return /* @__PURE__ */ d(f, { children: [
+    /* @__PURE__ */ o(
+      u,
+      {
+        isRequired: i,
+        requiredVariant: m,
+        children: t
+      }
+    ),
+    r && /* @__PURE__ */ o(l, { children: r }),
+    /* @__PURE__ */ o("div", { className: "uy:mt-25", children: /* @__PURE__ */ o(k, { ref: c, ...e, children: n }) }),
+    /* @__PURE__ */ o(p, {}),
+    a
+  ] });
+}
+const T = s(
+  F
+);
+T.displayName = "TanstackRadioButtonGroupField";
+export {
+  T as TanstackRadioButtonGroupField
+};