@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/promo-dialog/PromoDialog.js

@@ -0,0 +1,220 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useRef as P, Children as m, isValidElement as l, useLayoutEffect as b } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { DialogContext as C, Dialog as A } from "react-aria-components/Dialog";
+import { ModalOverlay as E, Modal as I } from "react-aria-components/Modal";
+import { useId as j } from "react-aria/useId";
+import { useIntl as z } from "react-intl";
+import { useHasScroll as M } from "../../hooks/use-has-scroll.js";
+import { DialogButton as H } from "../dialog/parts/DialogActions/DialogButton.js";
+import { CircularIconButton as T } from "../icon-button/CircularIconButton.js";
+import { PromoDialogActions as v } from "./parts/PromoDialogActions.js";
+import { PromoDialogHero as W } from "./parts/PromoDialogHero.js";
+import { PromoDialogTitle as _ } from "./parts/PromoDialogTitle.js";
+const k = N({
+  slots: {
+    overlay: [
+      "uy:@container",
+      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
+      "uy:min-h-full",
+      "uy:flex uy:items-end uy:md:items-center uy:md:justify-center uy:md:text-center",
+      "uy:bg-utility-backdrop",
+      // enter/leave animation
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out",
+      "uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none"
+    ],
+    wrapper: [
+      "uy:w-full uy:relative uy:isolate",
+      "uy:m-0",
+      "uy:rounded-t-300 uy:md:rounded-300",
+      "uy:bg-surface-neutral",
+      "uy:text-left uy:align-middle uy:shadow-400",
+      // Mobile: enter/leave animation
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
+      "uy:md:[animation-delay:100ms]",
+      // Desktop: enter/leave animation
+      "uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out",
+      "uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none",
+      // Mobile: scrollable with max height
+      "uy:max-h-[95dvh] uy:overflow-y-auto",
+      // Desktop: max height (adapts to content), no overflow on wrapper
+      "uy:md:h-[82dvh] uy:md:max-h-65 uy:lg:max-h-85 uy:md:overflow-hidden",
+      "uy:md:w-10/12 uy:md:max-w-[1000px] uy:p-300 uy:pb-0 uy:md:p-200"
+    ],
+    content: [
+      "uy:group/promo-dialog uy:outline-none uy:relative",
+      // Mobile: auto height (wrapper scrolls)
+      "uy:h-auto",
+      // Desktop: full height (content scrolls internally)
+      "uy:md:h-full"
+    ],
+    dismissIcon: [
+      // Mobile: sticky button that takes some padding at the top
+      "uy:sticky uy:top-0 uy:right-0 uy:flex uy:justify-end",
+      // Desktop: close button is positioned absolutely at the top-right corner
+      "uy:md:absolute uy:md:right-100 uy:md:top-100 uy:md:z-20"
+    ],
+    // Layout slots
+    layoutWrapper: [
+      "uy:flex uy:flex-col uy:md:flex-row",
+      // Mobile: auto height (wrapper scrolls)
+      "uy:h-auto",
+      // Desktop: full height for flex layout
+      "uy:md:h-full uy:gap-300 uy:md:gap-0"
+    ],
+    contentColumn: [
+      "uy:group/content-column",
+      "uy:flex uy:flex-col",
+      // Mobile: auto height
+      "uy:h-auto",
+      // Desktop: takes 2/3 of width, fixed max height, enables scrolling
+      "uy:md:basis-2/3 uy:md:h-full uy:md:max-h-85 uy:md:overflow-y-auto uy:md:pt-600 uy:md:[scrollbar-gutter:stable]"
+    ],
+    scrollableContent: [
+      "uy:md:pl-[clamp(var(--uy-spacing-400),11%,var(--uy-spacing-800))] uy:md:pr-1000 uy:[scrollbar-width:thin] uy:md:scroll-mt-1000",
+      // Mobile: flex-1 to fill space (wrapper scrolls)
+      "uy:flex-1",
+      // desktop: centered layout
+      "uy:md:flex uy:md:flex-col uy:md:justify-center"
+    ],
+    actionsWrapper: [
+      "uy:py-300 uy:md:py-0 uy:sticky uy:-bottom-px uy:bg-surface-neutral",
+      // Apply shadow when parent group has scroll
+      "uy:group-data-[has-scroll=true]/content-column:shadow-[0_-1px_6px_0_var(--uy-color-utility-shadow-floating)]"
+    ]
+  }
+}), B = (r) => {
+  const n = m.toArray(r).find(
+    (e) => l(e) && e.type === v
+  );
+  return l(
+    n
+  ) ? m.toArray(n.props.children).some(
+    (e) => l(
+      e
+    ) && e.type === H && e.props.variant === "danger"
+  ) : !1;
+};
+function q({
+  children: r,
+  isOpen: n,
+  onOpenChange: e,
+  isDismissable: p = !0,
+  ...y
+}) {
+  const f = z(), d = j(), g = P(null), { hasAnyScroll: i } = M(g, {
+    strategy: "both",
+    watchMutations: !0
+  }), s = m.toArray(r), u = s.find(
+    (o) => l(o) && o.type === W
+  ), h = s.find(
+    (o) => l(o) && o.type === v
+  ), w = s.filter(
+    (o) => o !== u && o !== h
+  );
+  b(() => {
+    u || console.error(
+      "PromoDialog: PromoDialogHero is required. Please add <PromoDialogHero> as a child of your PromoDialog component."
+    );
+  }, [u]), b(() => {
+    const D = m.toArray(r).some(
+      (x) => l(x) && x.type === _
+    );
+    !y["aria-label"] && !D && console.error(
+      "PromoDialog: Either an aria-label or a PromoDialogTitle is required for accessibility. Provide one to ensure screen reader users can identify the dialog."
+    );
+  }, [r, y]);
+  const a = k();
+  return /* @__PURE__ */ t(
+    E,
+    {
+      isDismissable: p,
+      isOpen: n,
+      onOpenChange: e,
+      className: a.overlay(),
+      children: /* @__PURE__ */ t(
+        I,
+        {
+          className: a.wrapper(),
+          "data-unity-promo-dialog": !0,
+          "data-dd-privacy": "allow",
+          children: /* @__PURE__ */ t(C.Provider, { value: { "aria-describedby": d }, children: /* @__PURE__ */ c(
+            A,
+            {
+              role: B(r) ? "alertdialog" : "dialog",
+              "aria-modal": "true",
+              className: a.content(),
+              "aria-label": y["aria-label"],
+              "aria-describedby": d,
+              "data-unity-slot": "promo-dialog",
+              children: [
+                p && /* @__PURE__ */ t("div", { className: a.dismissIcon(), children: /* @__PURE__ */ t(
+                  T,
+                  {
+                    asElement: "button",
+                    icon: "CloseOutlined",
+                    color: "content.neutral.low",
+                    size: "large",
+                    title: f.formatMessage({
+                      id: "unity:component:common:close:label"
+                    }),
+                    slot: "close",
+                    className: "uy:relative uy:-top-100 uy:-right-100 uy:md:static"
+                  }
+                ) }),
+                /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: a.layoutWrapper(),
+                    "data-slot": "promo-dialog.layout-wrapper",
+                    children: [
+                      u,
+                      /* @__PURE__ */ c(
+                        "div",
+                        {
+                          ref: g,
+                          className: a.contentColumn(),
+                          "data-slot": "promo-dialog.content-column",
+                          "data-has-scroll": i,
+                          role: i ? "region" : void 0,
+                          "aria-label": i ? f.formatMessage({
+                            id: "unity:component:common:scrollable-content:label"
+                          }) : void 0,
+                          tabIndex: i ? 0 : void 0,
+                          children: [
+                            /* @__PURE__ */ t(
+                              "div",
+                              {
+                                id: d,
+                                className: a.scrollableContent(),
+                                "data-slot": "promo-dialog.scrollable-content",
+                                children: w
+                              }
+                            ),
+                            /* @__PURE__ */ t(
+                              "div",
+                              {
+                                className: a.actionsWrapper(),
+                                "data-slot": "promo-dialog.actions-wrapper",
+                                children: h
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+q.displayName = "PromoDialog";
+export {
+  q as PromoDialog,
+  k as promoDialog
+};

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

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+/**
+ * PromoDialogActions contains the action buttons for a promo dialog.
+ * It provides consistent layout and spacing for dialog action buttons.
+ *
+ * This component should be used within a `PromoDialog` to display action buttons like
+ * confirm, cancel, or close actions. The buttons are automatically arranged in a row
+ * on desktop and stacked on mobile.
+ * @param props - The props for the PromoDialogActions component
+ * @param props.children - The action buttons (typically DialogButton components)
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, 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>
+ *       <DialogTitle>Welcome</DialogTitle>
+ *       <PromoDialogContent>
+ *         <p>Content here...</p>
+ *       </PromoDialogContent>
+ *       <PromoDialogActions>
+ *         <DialogButton variant="close">Skip</DialogButton>
+ *         <DialogButton variant="confirm">Continue</DialogButton>
+ *       </PromoDialogActions>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Buttons are stacked vertically on mobile (reverse order) and horizontal on desktop
+ * - Use DialogButton components as children for consistent styling
+ * - **Accessibility**: Actions are grouped with role="group" for better screen reader navigation
+ */
+declare const PromoDialogActions: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogActions };

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

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { uyTv as i } from "@payfit/unity-themes";
+import { useIntl as r } from "react-intl";
+const s = i({
+  base: [
+    "uy:md:pt-250 uy:md:pb-100 uy:md:px-200 uy:flex uy:flex-col-reverse uy:md:flex-row uy:md:justify-end uy:md:items-start",
+    "uy:gap-150 uy:md:gap-100",
+    "uy:self-stretch"
+  ]
+}), e = ({ children: o }) => {
+  const t = r();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "group",
+      "aria-label": t.formatMessage({
+        id: "unity:component:dialog:actions:label"
+      }),
+      className: s(),
+      "data-unity-slot": "promo-dialog.actions",
+      "data-dd-privacy": "allow",
+      children: o
+    }
+  );
+};
+e.displayName = "PromoDialogActions";
+export {
+  e as PromoDialogActions
+};

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

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+/**
+ * PromoDialogContent contains the main content of a promo dialog.
+ * It provides consistent spacing and typography for dialog content.
+ *
+ * This component should be used within a `PromoDialog` to display the main message,
+ * description, or any other content that needs to be presented to the user.
+ * @param props - The props for the PromoDialogContent component
+ * @param props.children - The content to be displayed in the dialog body
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, 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>
+ *       <DialogTitle>Welcome</DialogTitle>
+ *       <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 the main body text and content
+ * - Content will automatically scroll when it overflows
+ * - Maintains consistent spacing with other promo dialog parts
+ */
+declare const PromoDialogContent: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogContent };

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

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as n } from "@payfit/unity-themes";
+const a = n({
+  base: [
+    "uy:flex uy:flex-col uy:gap-200",
+    "uy:text-content-neutral",
+    "uy:typography-body"
+  ]
+}), e = ({ children: o }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: a(),
+    "data-unity-slot": "promo-dialog.content",
+    children: o
+  }
+);
+e.displayName = "PromoDialogContent";
+export {
+  e as PromoDialogContent
+};

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/Heading";
+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/RadioButtonGroup.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupProps } from 'react-aria-components/RadioGroup';
+/**
+ * Props for the RadioButtonGroup component.
+ * Excludes className and style props as they are handled internally.
+ */
+export type RadioButtonGroupProps = Omit<RadioGroupProps, 'className' | 'style'>;
+/**
+ * The `RadioButtonGroup` component enables users to select a single option from a set of mutually exclusive choices.
+ * It manages the selection state, keyboard navigation, focus handling, and accessibility features for a group of RadioButton components.
+ * @example
+ * ```tsx
+ * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
+ *
+ * <RadioButtonGroup value="option1" onChange={setValue}>
+ *   <RadioButton value="option1">Option 1</RadioButton>
+ *   <RadioButton value="option2">Option 2</RadioButton>
+ *   <RadioButton value="option3">Option 3</RadioButton>
+ * </RadioButtonGroup>
+ * ```
+ */
+declare const RadioButtonGroup: import('react').ForwardRefExoticComponent<RadioButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { RadioButtonGroup };

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

@@ -0,0 +1,23 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { RadioGroup as d } from "react-aria-components/RadioGroup";
+const l = i(
+  ({ children: o, isReadOnly: r, isDisabled: t, value: a, onChange: p, onBlur: u, ...m }, e) => /* @__PURE__ */ f(
+    d,
+    {
+      ...m,
+      isReadOnly: r,
+      isDisabled: t,
+      value: a,
+      onBlur: u,
+      onChange: p,
+      className: "uy:flex uy:flex-col uy:gap-150",
+      ref: e,
+      children: o
+    }
+  )
+);
+l.displayName = "RadioButtonGroup";
+export {
+  l as RadioButtonGroup
+};

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
+};