@payfit/unity-components 2.0.0 → 2.2.0

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from 'react-aria-components';
+import { RawLinkProps } from '../../link/RawLink.js';
+export interface FormContextualLinkProps extends RawLinkProps {
+    /**
+     * The href of the contextual link
+     */
+    href: string;
+    onPress?: never;
+}
+export interface FormContextualLinkActionProps extends ButtonProps {
+    /**
+     * A function to open a contextual panel
+     */
+    onPress: () => void;
+    href?: never;
+}
+export type TanstackRawFormContextualLinkProps = PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps>;
+/**
+ * `TanstackRawFormContextualLink` renders a contextual action associated with the
+ * current TanStack form field. It can render either:
+ * - an anchor (`RawLink`) when `href` is provided; or
+ * - a button (from `react-aria-components`) when `onPress` is provided.
+ */
+declare const TanstackRawFormContextualLink: import('react').ForwardRefExoticComponent<TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { TanstackRawFormContextualLink };

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

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Button as s } from "react-aria-components";
+import { RawLink as m } from "../../link/RawLink.js";
+import { useFieldA11yContext as c } from "../TanstackFormField.context.js";
+const u = e((t, a) => {
+  const { children: o, href: n, onPress: d, ...i } = t, r = c();
+  return n ? (
+    // @ts-expect-error - it's okay in this case
+    /* @__PURE__ */ l(
+      m,
+      {
+        id: r.contextualLinkId || t.id,
+        size: "small",
+        color: "secondary",
+        variant: "standalone",
+        "data-unity-slot": "form-field-contextual-link",
+        href: n,
+        ref: a,
+        "data-dd-privacy": "allow",
+        ...i,
+        children: o
+      }
+    )
+  ) : (
+    // @ts-expect-error - it's okay in this case
+    /* @__PURE__ */ l(
+      s,
+      {
+        id: r.contextualLinkId || t.id,
+        onPress: d,
+        "data-unity-slot": "contextual-link",
+        className: "uy:typography-body-small uy:w-fit",
+        ref: a,
+        "data-dd-privacy": "allow",
+        ...i,
+        children: o
+      }
+    )
+  );
+});
+u.displayName = "TanstackRawFormContextualLink";
+export {
+  u as TanstackRawFormContextualLink
+};

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

@@ -7,9 +7,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, string[], {
     size: {
@@ -17,9 +17,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
@@ -27,9 +27,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {

package/dist/esm/components/icon-button/CircularIconButton.js

@@ -1,17 +1,15 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { uyTv as w } from "@payfit/unity-themes";
+import { uyTv as h } from "@payfit/unity-themes";
 import { Button as x, Pressable as z } from "react-aria-components";
 import I from "../../hooks/use-id.js";
 import { Icon as d } from "../icon/Icon.js";
 import { Spinner as y } from "../spinner/Spinner.js";
 import { Tooltip as b } from "../tooltip/Tooltip.js";
-const N = w({
+const N = h({
   base: [
     "uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
-    "uy:active:bg-surface-neutral-active",
-    "uy:data-[pressed]:bg-surface-neutral-pressed",
+    'uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled uy:disabled:data-[hovered="true"]:bg-transparent',
     "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-    "uy:data-[disabled]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled",
     "uy:aria-busy:text-content-neutral-disabled uy:aria-busy:cursor-progress"
   ],
   variants: {
@@ -20,9 +18,28 @@ const N = w({
       large: "uy:w-400 uy:h-400"
     },
     color: {
-      "content.neutral": "uy:text-content-neutral",
-      "content.neutral.low": "uy:text-content-neutral-low",
-      "content.neutral.lowest": "uy:text-content-neutral-lowest"
+      "content.neutral": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover',
+        "uy:active:bg-surface-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-active"
+      ],
+      "content.neutral.low": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover',
+        "uy:active:bg-surface-neutral-low-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-low-active",
+        "uy:focus-visible:bg-surface-neutral-low-focus",
+        "uy:disabled:bg-surface-neutral-low-disabled"
+      ],
+      "content.neutral.lowest": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover',
+        "uy:active:bg-surface-neutral-lowest-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-lowest-active",
+        "uy:focus-visible:bg-surface-neutral-lowest-focus",
+        "uy:disabled:bg-surface-neutral-lowest-disabled"
+      ]
     }
   },
   defaultVariants: {
@@ -30,63 +47,63 @@ const N = w({
     color: "content.neutral.low"
   }
 });
-function B(m) {
-  const f = I(), {
-    onPress: i,
-    icon: n,
-    color: p,
-    size: r,
+function B(f) {
+  const v = I(), {
+    onPress: o,
+    icon: u,
+    color: m,
+    size: l,
     isLoading: t,
     title: a,
-    isDisabled: o,
-    asElement: h = "default",
+    isDisabled: s,
+    asElement: p = "default",
     className: g,
-    "aria-labelledby": v,
-    ...s
-  } = m, l = `icon-button-label-${f}`, u = N({ class: g, color: p, size: r });
-  return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
+    "aria-labelledby": w,
+    ...i
+  } = f, r = `icon-button-label-${v}`, n = N({ class: g, color: m, size: l });
+  return p === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
     x,
     {
       "data-dd-privacy": "allow",
-      ...s,
-      onPress: i,
-      isDisabled: o || t,
-      "aria-labelledby": v ?? l,
+      ...i,
+      onPress: o,
+      isDisabled: s || t,
+      "aria-labelledby": w ?? r,
       "aria-busy": t,
-      className: u,
+      className: n,
       children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: n,
-            size: r === "large" ? 24 : 20,
+            src: u,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
       ]
     }
   ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
     z,
     {
       "data-dd-privacy": "allow",
-      ...s,
-      onPress: i,
-      isDisabled: o || t,
-      "aria-labelledby": l,
+      ...i,
+      onPress: o,
+      isDisabled: s || t,
+      "aria-labelledby": r,
       "aria-busy": t,
-      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": o, className: u, children: [
+      children: /* @__PURE__ */ c("div", { role: "button", className: n, children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: n,
-            size: r === "large" ? 24 : 20,
+            src: u,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
       ] })
     }
   ) });

package/dist/esm/components/icon-button/IconButton.variants.d.ts

@@ -195,6 +195,7 @@ export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
     };
     color: {
         neutral: string;
+        'neutral.lowest': string;
         primary: string;
         danger: string;
         warning: string;

package/dist/esm/components/icon-button/IconButton.variants.js

@@ -3,8 +3,9 @@ const t = e({
   slots: {
     button: [
       "uy:group",
-      "uy:w-500 uy:min-w-500 uy:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-75 uy:cursor-pointer",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+      "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+      "uy:transition-colors"
     ],
     icon: "uy:w-250 uy:h-250"
   },
@@ -31,7 +32,7 @@ const t = e({
     isDisabled: !1,
     isLoading: !1
   }
-}), n = e({
+}), a = e({
   extend: t,
   variants: {
     variant: {
@@ -53,14 +54,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-primary-enabled",
-          "uy:hover:bg-surface-primary-hover",
+          'uy:data-[hovered="true"]:bg-surface-primary-hover',
           "uy:active:bg-surface-primary-active",
           "uy:focus-visible:bg-surface-primary-focus",
           "uy:data-[pressed]:bg-surface-primary-pressed"
         ],
         icon: [
           "uy:text-content-inverted-enabled",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus",
           "uy:data-[pressed]:text-content-inverted-pressed"
@@ -75,14 +76,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-danger-enabled",
-          "uy:hover:bg-surface-danger-hover",
+          'uy:data-[hovered="true"]:bg-surface-danger-hover',
           "uy:active:bg-surface-danger-active",
           "uy:focus:bg-surface-danger-focus",
           "uy:data-[pressed]:bg-surface-danger-pressed"
         ],
         icon: [
           "uy:text-content-inverted-enabled",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:active:text-content-inverted-active",
           "uy:focus:text-content-inverted-focus",
           "uy:data-[pressed]:text-content-inverted-pressed"
@@ -97,14 +98,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-warning-enabled",
-          "uy:hover:bg-surface-warning-hover",
+          'uy:data-[hovered="true"]:bg-surface-warning-hover',
           "uy:active:bg-surface-warning-pressed",
           "uy:focus-visible:bg-surface-warning-focus",
           "uy:data-[pressed]:bg-surface-warning-pressed"
         ],
         icon: [
           "uy:text-content-neutral-enabled",
-          "uy:group-hover:text-content-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
           "uy:active:text-content-neutral-pressed",
           "uy:focus-visible:text-content-neutral-focus",
           "uy:data-[pressed]:text-content-neutral-pressed"
@@ -119,14 +120,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-neutral-enabled",
-          "uy:hover:bg-surface-neutral-hover",
+          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
           "uy:active:bg-surface-neutral-pressed",
           "uy:focus-visible:bg-surface-neutral-focus",
           "uy:data-[pressed]:bg-surface-neutral-pressed"
         ],
         icon: [
           "uy:text-content-neutral-enabled",
-          "uy:group-hover:text-content-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
           "uy:active:text-content-neutral-pressed",
           "uy:focus-visible:text-content-neutral-focus",
           "uy:data-[pressed]:text-content-neutral-pressed"
@@ -154,7 +155,7 @@ const t = e({
       }
     }
   ]
-}), a = e({
+}), n = e({
   extend: t,
   variants: {
     variant: {
@@ -173,13 +174,13 @@ const t = e({
       class: {
         button: [
           "uy:border uy:border-solid uy:border-border-neutral-high-enabled",
-          "uy:hover:border-border-neutral-high-hover",
+          'uy:data-[hovered="true"]:border-border-neutral-high-hover',
           "uy:active:border-border-neutral-high-active",
           "uy:data-[pressed]:border-border-neutral-high-pressed"
         ],
         icon: [
           "uy:text-content-neutral-low-enabled",
-          "uy:group-hover:text-content-low-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-low-neutral-hover',
           "uy:active:text-content-neutral-low-active",
           "uy:data-[pressed]:text-content-neutral-low-pressed",
           "uy:focus-visible:text-content-neutral-low-focus"
@@ -217,14 +218,14 @@ const t = e({
       class: {
         button: [
           "uy:border uy:border-solid uy:border-border-inverted",
-          "uy:hover:border-border-inverted-hover",
+          'uy:data-[hovered="true"]:border-border-inverted-hover',
           "uy:data-[pressed]:border-border-inverted-pressed",
           "uy:active:border-border-inverted-active",
           "uy:focus-visible:border-border-inverted-focus uy:focus-visible:outline-utility-inverted-focus-ring"
         ],
         icon: [
           "uy:text-content-inverted",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:data-[pressed]:text-content-inverted-pressed",
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus"
@@ -252,6 +253,7 @@ const t = e({
     },
     color: {
       neutral: "",
+      "neutral.lowest": "",
       primary: "",
       danger: "",
       warning: "",
@@ -266,7 +268,7 @@ const t = e({
       class: {
         button: [
           "uy:bg-transparent",
-          "uy:hover:bg-surface-inverted-hover",
+          'uy:data-[hovered="true"]:bg-surface-inverted-hover',
           "uy:active:bg-surface-inverted-active",
           "uy:data-[pressed=true]:bg-surface-inverted-pressed",
           "uy:focus-visible:outline-utility-inverted-focus-ring",
@@ -274,7 +276,7 @@ const t = e({
         ],
         icon: [
           "uy:text-content-inverted",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:data-[pressed]:text-content-inverted-pressed",
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus"
@@ -287,9 +289,23 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-neutral-hover",
+          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
           "uy:data-[pressed]:bg-surface-neutral-pressed",
-          "uy:active:bg-surface-neutral-active"
+          "uy:active:bg-surface-neutral-active",
+          "uy:data-[pressed=true]:bg-surface-neutral-pressed"
+        ],
+        icon: ["uy:text-content-neutral-low"]
+      }
+    },
+    {
+      color: "neutral.lowest",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover',
+          "uy:active:bg-surface-neutral-lowest-active",
+          "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed"
         ],
         icon: ["uy:text-content-neutral-low"]
       }
@@ -301,13 +317,13 @@ const t = e({
       class: {
         button: [
           "uy:text-content-primary-enabled",
-          "uy:hover:bg-surface-primary-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover',
           "uy:data-[pressed]:bg-surface-primary-lowest-pressed",
           "uy:active:bg-surface-primary-lowest-active"
         ],
         icon: [
           "uy:text-content-primary",
-          "uy:group-hover:text-content-primary",
+          'uy:group-data-[hovered="true"]:text-content-primary',
           "uy:data-[pressed]:text-content-primary",
           "uy:focus-visible:text-content-primary",
           "uy:active:text-content-primary"
@@ -320,13 +336,13 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-danger-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover',
           "uy:data-[pressed]:bg-surface-danger-lowest-pressed",
           "uy:active:bg-surface-danger-lowest-active"
         ],
         icon: [
           "uy:text-content-danger",
-          "uy:group-hover:text-content-danger",
+          'uy:group-data-[hovered="true"]:text-content-danger',
           "uy:data-[pressed]:text-content-danger",
           "uy:focus-visible:text-content-danger",
           "uy:active:text-content-danger"
@@ -339,13 +355,13 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-warning-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover',
           "uy:data-[pressed]:bg-surface-warning-lowest-pressed",
           "uy:active:bg-surface-warning-lowest-active"
         ],
         icon: [
           "uy:text-content-warning-high",
-          "uy:group-hover:text-content-warning-high",
+          'uy:group-data-[hovered="true"]:text-content-warning-high',
           "uy:data-[pressed]:text-content-warning-high",
           "uy:focus-visible:text-content-warning-high",
           "uy:active:text-content-warning-high"
@@ -374,6 +390,6 @@ const t = e({
 });
 export {
   s as iconButtonGhost,
-  n as iconButtonPrimary,
-  a as iconButtonSecondary
+  a as iconButtonPrimary,
+  n as iconButtonSecondary
 };

package/dist/esm/components/inline-field-group/InlineFieldGroup.context.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+export type InlineFieldGroupMode = 'read' | 'edit';
+export interface InlineFieldGroupContextValue {
+    /** Current mode: read or edit */
+    mode: InlineFieldGroupMode;
+    /** Switch to edit mode */
+    enterEditMode: () => void;
+    /** Exit edit mode (cancel or save) */
+    exitEditMode: () => void;
+    /** Unique ID for the field group (for aria attributes) */
+    groupId: string;
+    /** ID for the header title (for aria-labelledby) */
+    headerId: string;
+    /** ID for the edit view container (for aria-controls) */
+    editViewId: string;
+    /** Whether the component is in a loading state */
+    isLoading?: boolean;
+    /** Ref to the edit button for focus management */
+    editButtonRef?: RefObject<HTMLButtonElement>;
+    /** Ref to the edit view container for focus management */
+    editViewRef?: RefObject<HTMLFieldSetElement>;
+}
+export declare const InlineFieldGroupContext: import('react').Context<InlineFieldGroupContextValue | undefined>;

package/dist/esm/components/inline-field-group/InlineFieldGroup.context.js

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+const o = e(void 0);
+o.displayName = "InlineFieldGroupContext";
+export {
+  o as InlineFieldGroupContext
+};

package/dist/esm/components/inline-field-group/InlineFieldGroup.d.ts

@@ -0,0 +1,119 @@
+import { default as React, PropsWithChildren } from 'react';
+import { InlineFieldGroupMode } from './InlineFieldGroup.context.js';
+/**
+ * Imperative handle for InlineFieldGroup component.
+ * Provides methods for programmatic control when needed for advanced use cases.
+ */
+export interface InlineFieldGroupHandle {
+    /**
+     * Focuses the first invalid field in the edit view.
+     * Useful for custom validation error handling.
+     */
+    focusFirstInvalidField: () => void;
+    /**
+     * Exits edit mode programmatically.
+     */
+    exitEditMode: () => void;
+    /**
+     * Enters edit mode programmatically.
+     */
+    enterEditMode: () => void;
+}
+export interface InlineFieldGroupProps extends PropsWithChildren {
+    /**
+     * Controlled mode value. When provided, the component operates in controlled mode.
+     */
+    mode?: InlineFieldGroupMode;
+    /**
+     * Default mode value for uncontrolled mode.
+     * @default 'read'
+     */
+    defaultMode?: InlineFieldGroupMode;
+    /**
+     * Callback fired when mode changes.
+     */
+    onModeChange?: (mode: InlineFieldGroupMode) => void;
+    /**
+     * Callback to intercept and potentially prevent mode changes.
+     * Return `false` to prevent the mode transition.
+     * Return `true` or `undefined` to allow the transition.
+     */
+    shouldModeChange?: (fromMode: InlineFieldGroupMode, toMode: InlineFieldGroupMode) => boolean | undefined;
+    /**
+     * Whether the component is in a loading state (e.g., during async save).
+     */
+    isLoading?: boolean;
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+    /**
+     * Optional aria-label for the form element.
+     * If not provided, aria-labelledby will reference the header title.
+     */
+    'aria-label'?: string;
+    /**
+     * Success message to announce when save succeeds.
+     * If not provided, no success announcement is made.
+     */
+    successMessage?: string;
+    /**
+     * Error message to announce when save or validation fails.
+     * If not provided, generic validation errors are announced.
+     */
+    errorMessage?: string;
+}
+/**
+ * InlineFieldGroup enables group-level inline editing with read/edit mode switching.
+ * It integrates with TanStack Form for validation and state management, providing
+ * a complete pattern for displaying data in read mode and editing it in edit mode.
+ * The component handles the full edit lifecycle: mode transitions, form submission,
+ * validation error handling, and accessibility announcements.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function ContactForm() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'user@example.com', phone: '+1234567890' },
+ *     onSubmit: async ({ value }) => {
+ *       await saveContact(value)
+ *     }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup successMessage="Contact saved!">
+ *         <form.InlineFieldGroupHeader title="Contact Information" />
+ *         <form.InlineFieldGroupReadView>
+ *           <DefinitionList>
+ *             <DefinitionItem term="Email" description={form.state.values.email} />
+ *           </DefinitionList>
+ *         </form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit contact">
+ *           <form.AppField name="email">
+ *             {field => <field.TextField label="Email" />}
+ *           </form.AppField>
+ *         </form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component automatically exits edit mode on successful form submission
+ * - Press Escape to cancel editing and reset form values
+ * - Focus moves to the first form field when entering edit mode
+ * - Focus returns to the edit button when exiting edit mode
+ * - Focus is retained under a scope when in edit mode, to prevent users for leaving unfinished changes
+ * - Use `shouldModeChange` to intercept and conditionally prevent mode transitions
+ * - Use `successMessage` and `errorMessage` for accessible announcements via live regions
+ * @see {@link InlineFieldGroupProps} for all available props
+ * @see {@link InlineFieldGroupHandle} for imperative handle methods
+ * @see {@link InlineFieldGroupHeader} for the header component with action buttons
+ * @see {@link InlineFieldGroupReadView} for read mode content
+ * @see {@link InlineFieldGroupEditView} for edit mode form fields
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
+ */
+export declare const InlineFieldGroup: React.ForwardRefExoticComponent<InlineFieldGroupProps & React.RefAttributes<InlineFieldGroupHandle>>;