@payfit/unity-components 2.2.7 → 2.3.0

package/dist/esm/components/definition-list/parts/DefinitionItem.d.ts

@@ -17,6 +17,12 @@ export interface DefinitionItemProps {
      * Children of the component.
      */
     children?: ReactNode;
+    /**
+     * The vertical alignment of the term.
+     * Note: Normally, you should not need to set this property, if you follow the design guidelines.
+     * @default 'undefined'
+     */
+    verticalAlign?: 'start' | 'center';
 }
 /**
  * DefinitionItem displays a term (`dt`) and its description (`dd`) within a `DefinitionList`.

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

@@ -40,7 +40,4 @@ export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'classNam
     isDisabled?: boolean;
     className?: string;
 }
-export declare function CircularIconButton(props: CircularIconButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace CircularIconButton {
-    var displayName: string;
-}
+export declare const CircularIconButton: import('react').ForwardRefExoticComponent<CircularIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,11 +1,12 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-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 = h({
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as z } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { Button as N, Pressable as B } from "react-aria-components";
+import L from "../../hooks/use-id.js";
+import { Icon as y } from "../icon/Icon.js";
+import { Spinner as b } from "../spinner/Spinner.js";
+import { Tooltip as f } from "../tooltip/Tooltip.js";
+const j = I({
   base: [
     "uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
     'uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled uy:disabled:data-[hovered="true"]:bg-transparent',
@@ -46,34 +47,36 @@ const N = h({
     size: "default",
     color: "content.neutral.low"
   }
-});
-function B(f) {
-  const v = I(), {
-    onPress: o,
+}), D = z((m, o) => {
+  const v = L(), {
+    type: p,
+    onPress: s,
     icon: u,
-    color: m,
+    color: g,
     size: l,
     isLoading: t,
     title: a,
-    isDisabled: s,
-    asElement: p = "default",
-    className: g,
-    "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,
+    isDisabled: i,
+    asElement: w = "default",
+    className: h,
+    "aria-labelledby": x,
+    ...n
+  } = m, r = `icon-button-label-${v}`, c = j({ class: h, color: g, size: l });
+  return w === "button" ? /* @__PURE__ */ e(f, { title: a, children: /* @__PURE__ */ d(
+    N,
     {
+      ref: o,
       "data-dd-privacy": "allow",
-      ...i,
-      onPress: o,
-      isDisabled: s || t,
-      "aria-labelledby": w ?? r,
+      ...n,
+      type: p,
+      onPress: s,
+      isDisabled: i || t,
+      "aria-labelledby": x ?? r,
       "aria-busy": t,
-      className: n,
+      className: c,
       children: [
-        t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-          d,
+        t ? /* @__PURE__ */ e(b, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          y,
           {
             src: u,
             size: l === "large" ? 24 : 20,
@@ -84,18 +87,19 @@ function B(f) {
         /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
       ]
     }
-  ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
-    z,
+  ) }) : /* @__PURE__ */ e(f, { title: a, children: /* @__PURE__ */ e(
+    B,
     {
+      ref: o,
       "data-dd-privacy": "allow",
-      ...i,
-      onPress: o,
-      isDisabled: s || t,
+      ...n,
+      onPress: s,
+      isDisabled: i || t,
       "aria-labelledby": r,
       "aria-busy": t,
-      children: /* @__PURE__ */ c("div", { role: "button", className: n, children: [
-        t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-          d,
+      children: /* @__PURE__ */ d("div", { role: "button", className: c, children: [
+        t ? /* @__PURE__ */ e(b, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          y,
           {
             src: u,
             size: l === "large" ? 24 : 20,
@@ -107,9 +111,9 @@ function B(f) {
       ] })
     }
   ) });
-}
-B.displayName = "CircularIconButton";
+});
+D.displayName = "CircularIconButton";
 export {
-  B as CircularIconButton,
-  N as circularIconButton
+  D as CircularIconButton,
+  j as circularIconButton
 };

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

@@ -1,5 +1,5 @@
 import { UnityIcon } from '@payfit/unity-icons';
-import { AriaRole } from 'react';
+import { AriaRole, ButtonHTMLAttributes } from 'react';
 import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.js';
 interface IconButtonBaseProps {
     /** Label used to describe the action of the button */
@@ -12,6 +12,8 @@ interface IconButtonBaseProps {
     iconRole?: AriaRole;
     /** className to add to the button */
     className?: string;
+    /** The button type */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }
 interface IconButtonVariantsPrimaryProps extends IconButtonBaseProps, Omit<IconButtonPrimary, 'variant' | 'color'>, Required<Pick<IconButtonPrimary, 'variant' | 'color'>> {
 }

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

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+export type InlineFieldMode = 'read' | 'edit';
+export interface InlineFieldContextValue {
+    /** Current mode: read or edit */
+    mode: InlineFieldMode;
+    /** Switch to edit mode */
+    enterEditMode: () => void;
+    /** Exit edit mode (cancel or save) */
+    exitEditMode: () => void;
+    /** Unique ID for the field (for aria attributes) */
+    fieldId: string;
+    /** Whether the field is currently loading (saving) */
+    isLoading?: boolean;
+    /** Ref to the edit view container for focus management */
+    editViewRef: RefObject<HTMLDivElement>;
+    /** The ID for the edit view container (for aria-controls) */
+    editViewId: string;
+    triggerRef: RefObject<HTMLButtonElement>;
+}
+export declare const InlineFieldContext: import('react').Context<InlineFieldContextValue | undefined>;
+export declare function useInlineField(): InlineFieldContextValue | undefined;

package/dist/esm/components/inline-field/InlineField.context.js

@@ -0,0 +1,10 @@
+import { createContext as n, useContext as t } from "react";
+const e = n(void 0);
+e.displayName = "InlineFieldContext";
+function o() {
+  return t(e);
+}
+export {
+  e as InlineFieldContext,
+  o as useInlineField
+};

package/dist/esm/components/inline-field/InlineField.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+import { InlineFieldMode } from './InlineField.context.js';
+export interface InlineFieldProps {
+    /**
+     * The form field to display in edit mode.
+     */
+    children?: ReactNode;
+    /**
+     * Controlled mode value. When provided, the component operates in controlled mode.
+     */
+    mode?: InlineFieldMode;
+    /**
+     * Default mode value for uncontrolled mode.
+     * `@default` 'read'
+     */
+    defaultMode?: InlineFieldMode;
+    /**
+     * Callback fired when mode changes.
+     */
+    onModeChange?: (mode: InlineFieldMode) => void;
+    /**
+     * Whether the field is currently loading (saving).
+     */
+    isLoading?: boolean;
+    /**
+     * Callback to determine if mode should change.
+     * Return `false` to prevent the mode transition.
+     * Return `true` or `undefined` to allow the transition.
+     */
+    shouldModeChange?: (fromMode: InlineFieldMode, toMode: InlineFieldMode) => boolean | undefined;
+}
+/**
+ * InlineField enables individual field inline editing with read/edit mode switching.
+ * It integrates with TanStack Form for validation and state management, providing
+ * a pattern for displaying a value in read mode and editing it in edit mode.
+ * The component handles the edit lifecycle: mode transitions, form submission,
+ * validation error handling, and accessibility announcements.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function EmailField() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'user@example.com' },
+ *     onSubmit: async ({ value }) => {
+ *       await saveEmail(value)
+ *     }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <DefinitionList>
+ *         <form.AppField name="email">
+ *           {field => (
+ *             <field.InlineField>
+ *               <field.InlineFieldReadView>
+ *                 <DefinitionItem
+ *                   term="Email"
+ *                   description={form.state.values.email}
+ *                   action={<field.InlineFieldEditTrigger />}
+ *                 />
+ *               </field.InlineFieldReadView>
+ *               <field.InlineFieldEditView successMessage="Email updated!">
+ *                 <field.TextField label="Email" isRequired />
+ *               </field.InlineFieldEditView>
+ *             </field.InlineField>
+ *           )}
+ *         </form.AppField>
+ *       </DefinitionList>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component automatically exits edit mode on successful form submission.
+ * - Press Escape to cancel editing and reset the field value.
+ * - Focus moves to the 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.
+ * - Use `shouldModeChange` to intercept and conditionally prevent mode transitions.
+ * - Use `successMessage` and `errorMessage` for accessible announcements via live regions.
+ * @see {@link InlineFieldProps} for all available props
+ * @see {@link InlineFieldReadView} for read mode content
+ * @see {@link InlineFieldEditView} 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 GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
+ */
+export declare const InlineField: {
+    ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/components/inline-field/InlineField.js

@@ -0,0 +1,49 @@
+import { jsx as R } from "react/jsx-runtime";
+import { useRef as r, useId as b, useMemo as E, useCallback as M, useEffect as v } from "react";
+import { useInlineFieldMode as w } from "./hooks/useInlineFieldMode.js";
+import { InlineFieldContext as V } from "./InlineField.context.js";
+const g = ({
+  children: m,
+  mode: a,
+  defaultMode: F,
+  onModeChange: x,
+  isLoading: o,
+  shouldModeChange: p
+}) => {
+  const i = r(null), e = r(null), l = r(!0), { mode: t, enterEditMode: s, exitEditMode: d } = w({
+    mode: a,
+    defaultMode: F,
+    onModeChange: x,
+    shouldModeChange: p
+  }), n = `inline-field-${b()}`, c = `${n}__edit-view`, I = E(
+    () => ({
+      mode: t,
+      enterEditMode: s,
+      exitEditMode: d,
+      fieldId: n,
+      isLoading: o,
+      triggerRef: i,
+      editViewRef: e,
+      editViewId: c
+    }),
+    [t, s, d, n, o, c]
+  ), u = M(() => {
+    if (e.current) {
+      const f = e.current.querySelectorAll(
+        'input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      f.length > 0 && f[0].focus();
+    }
+  }, [e]);
+  return v(() => {
+    if (l.current) {
+      l.current = !1;
+      return;
+    }
+    t === "edit" ? u() : i.current && i.current.focus();
+  }, [t, u]), /* @__PURE__ */ R(V.Provider, { value: I, children: m });
+};
+g.displayName = "InlineField";
+export {
+  g as InlineField
+};

package/dist/esm/components/inline-field/hooks/useInlineFieldMode.d.ts

@@ -0,0 +1,46 @@
+import { InlineFieldMode } from '../InlineField.context.js';
+export interface UseInlineFieldModeProps {
+    /**
+     * Controlled mode value. When provided, the component operates in controlled mode.
+     */
+    mode?: InlineFieldMode;
+    /**
+     * Default mode value for uncontrolled mode.
+     * @default 'read'
+     */
+    defaultMode?: InlineFieldMode;
+    /**
+     * Callback fired when mode changes.
+     */
+    onModeChange?: (mode: InlineFieldMode) => 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: InlineFieldMode, toMode: InlineFieldMode) => boolean | undefined;
+}
+export interface UseInlineFieldModeReturn {
+    /** Current mode value */
+    mode: InlineFieldMode;
+    /** Switch to edit mode */
+    enterEditMode: () => void;
+    /** Exit edit mode (return to read mode) */
+    exitEditMode: () => void;
+    /** Check if component is in controlled mode */
+    isControlled: boolean;
+}
+/**
+ * Hook to manage the mode state (read/edit) for InlineField.
+ * Supports both controlled and uncontrolled modes, following the pattern
+ * established by NavGroup.tsx
+ * @param props - Configuration for the mode hook
+ * @param props.mode - Controlled mode value. When provided, the component operates in controlled mode.
+ * @param props.defaultMode - Default mode value for uncontrolled mode.
+ * @param props.onModeChange - Callback fired when mode changes.
+ * @param props.shouldModeChange - Callback to intercept and potentially prevent mode changes.
+ * Return `false` to prevent the mode transition.
+ * Return `true` or `undefined` to allow the transition.
+ * @returns Mode state and handlers
+ */
+export declare function useInlineFieldMode({ mode: controlledMode, defaultMode, onModeChange, shouldModeChange, }: UseInlineFieldModeProps): UseInlineFieldModeReturn;

package/dist/esm/components/inline-field/hooks/useInlineFieldMode.js

@@ -0,0 +1,27 @@
+import { useState as m, useCallback as r } from "react";
+function x({
+  mode: d,
+  defaultMode: c = "read",
+  onModeChange: s,
+  shouldModeChange: o
+}) {
+  const [l, a] = m(c), t = d !== void 0, n = t ? d : l, e = r(
+    (i) => {
+      o && o(n, i) === !1 || (t || a(i), s?.(i));
+    },
+    [t, n, s, o]
+  ), f = r(() => {
+    e("edit");
+  }, [e]), u = r(() => {
+    e("read");
+  }, [e]);
+  return {
+    mode: n,
+    enterEditMode: f,
+    exitEditMode: u,
+    isControlled: t
+  };
+}
+export {
+  x as useInlineFieldMode
+};

package/dist/esm/components/inline-field/parts/InlineFieldEditTrigger.d.ts

@@ -0,0 +1,59 @@
+export interface InlineFieldEditTriggerProps {
+    /**
+     * Custom label for the edit button.
+     * @default "Edit" (translated)
+     */
+    editLabel?: string;
+}
+/**
+ * InlineFieldEditTrigger renders an icon button that switches the InlineField to edit mode.
+ * It automatically displays only when the parent InlineField is in read mode.
+ * The button uses a pencil icon and handles entering edit mode when clicked.
+ * @example Basic usage
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="email">
+ *         {field => (
+ *           <field.InlineField>
+ *             <field.InlineFieldReadView>
+ *               <div className="flex items-center gap-2">
+ *                 <Text>{form.state.values.email}</Text>
+ *                 <field.InlineFieldEditTrigger />
+ *               </div>
+ *             </field.InlineFieldReadView>
+ *             <field.InlineFieldEditView>
+ *               <field.TextField label="Email" />
+ *             </field.InlineFieldEditView>
+ *           </field.InlineField>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @example Custom edit label
+ * ```tsx
+ * <field.InlineFieldEditTrigger editLabel="Modify" />
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineField
+ * - Automatically disabled when InlineField is in edit mode
+ * - Uses `aria-controls` and `aria-expanded` for accessibility
+ * - Typically placed alongside the read-only value in InlineFieldReadView
+ * @see {@link InlineFieldEditTriggerProps} for all available props
+ * @see {@link InlineField} for the parent container component
+ * @see {@link InlineFieldReadView} for the read mode container
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
+ */
+declare const InlineFieldEditTrigger: {
+    ({ editLabel }: InlineFieldEditTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { InlineFieldEditTrigger };

package/dist/esm/components/inline-field/parts/InlineFieldEditView.d.ts

@@ -0,0 +1,106 @@
+import { ReactNode } from 'react';
+export interface InlineFieldEditViewProps {
+    /**
+     * The form field to display in edit mode.
+     */
+    children?: ReactNode;
+    /**
+     * Optional callback fired when the cancel button is clicked.
+     * This is called before canceling and is useful for analytics or side effects.
+     * The form will be reset and edit mode exited automatically.
+     */
+    onCancel?: () => void;
+    /**
+     * Optional callback fired when the save button is clicked.
+     * This is called before form submission and is useful for analytics or side effects.
+     * Note: Form submission is handled via the form's onSubmit configuration.
+     */
+    onSave?: () => void;
+    /**
+     * Custom label for the save button.
+     * @default "Save" (translated)
+     */
+    saveLabel?: string;
+    /**
+     * Custom label for the cancel button.
+     * @default "Cancel" (translated)
+     */
+    cancelLabel?: string;
+    /**
+     * Helper text to display below the field.
+     * Useful for providing additional context or instructions.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message to announce when save or validation fails.
+     * If not provided, generic validation errors are announced.
+     */
+    errorMessage?: string;
+}
+/**
+ * InlineFieldEditView displays form fields only when the parent InlineField is in edit mode.
+ * Wrap form field components in this component to show them when editing.
+ * The component integrates with TanStack Form for validation and state management,
+ * automatically handling form submission, cancellation, and validation errors.
+ * It includes save and cancel icon buttons, keyboard navigation (Escape to cancel),
+ * and accessibility announcements via live regions.
+ * @example Basic usage with a text field
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'john@example.com' }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="email">
+ *         {field => (
+ *           <field.InlineField>
+ *             <field.InlineFieldReadView>
+ *               <div className="flex items-center gap-2">
+ *                 <Text>{form.state.values.email}</Text>
+ *                 <field.InlineFieldEditTrigger />
+ *               </div>
+ *             </field.InlineFieldReadView>
+ *             <field.InlineFieldEditView>
+ *               <field.TextField label="Email" isRequired />
+ *             </field.InlineFieldEditView>
+ *           </field.InlineField>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @example With custom messages and callbacks
+ * ```tsx
+ * <field.InlineFieldEditView
+ *   successMessage="Email updated successfully!"
+ *   errorMessage="Failed to update email. Please try again."
+ *   helperText="Enter a valid email address"
+ *   onSave={() => trackAnalytics('email_save_clicked')}
+ *   onCancel={() => trackAnalytics('email_edit_cancelled')}
+ * >
+ *   <field.TextField label="Email" isRequired />
+ * </field.InlineFieldEditView>
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineField
+ * - Automatically exits edit mode on successful form submission
+ * - Press Escape to cancel editing and reset form values
+ * - Focus is retained within the edit view (FocusScope) while editing
+ * - The save button is disabled until the form has changes (isDirty)
+ * - Validation errors are announced via screen reader live regions
+ * - Content remains in the DOM but is hidden with `hidden`, `aria-hidden`, and `inert` attributes in read mode
+ * @see {@link InlineFieldEditViewProps} for all available props
+ * @see {@link InlineField} for the parent container component
+ * @see {@link InlineFieldReadView} for the corresponding read mode component
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
+ */
+export declare function InlineFieldEditView({ children, onCancel, onSave, saveLabel, cancelLabel, helperText, errorMessage, }: InlineFieldEditViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldEditView {
+    var displayName: string;
+}

package/dist/esm/components/inline-field/parts/InlineFieldEditView.js

@@ -0,0 +1,149 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { useRef as S, useState as N, useEffect as m, useCallback as v } from "react";
+import { uyTv as L } from "@payfit/unity-themes";
+import { useStore as P } from "@tanstack/react-form";
+import { useKeyboard as T, FocusScope as R } from "react-aria";
+import { Group as j } from "react-aria-components";
+import { useIntl as K } from "react-intl";
+import { useFormContext as O } from "../../../hooks/tanstack-form-context.js";
+import { TanstackFormFeedbackText as B } from "../../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as G } from "../../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormField as H } from "../../form-field/TanstackFormField.js";
+import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
+import { useInlineField as q } from "../InlineField.context.js";
+const z = L({
+  slots: {
+    base: "uy:flex uy:flex-row uy:gap-100 uy:items-start"
+  }
+});
+function J({
+  children: x,
+  onCancel: f,
+  onSave: F,
+  saveLabel: C,
+  cancelLabel: E,
+  helperText: p,
+  errorMessage: b
+}) {
+  const i = q(), n = K(), o = O(), {
+    isDirty: M,
+    isSubmitting: t,
+    submissionAttempts: u,
+    isValid: y,
+    isSubmitSuccessful: r
+  } = P(o.store, (e) => ({
+    isDirty: e.isDirty,
+    isSubmitting: e.isSubmitting,
+    isValid: e.isValid,
+    isSubmitSuccessful: e.isSubmitSuccessful,
+    submissionAttempts: e.submissionAttempts
+  })), a = S(t), w = S(u), [k, d] = N(""), c = i?.mode === "edit";
+  m(() => {
+    t && !a.current && d("");
+  }, [t]), m(() => {
+    a.current && !t && r && i?.exitEditMode();
+  }, [t, r, i]), m(() => {
+    if (a.current && !t && !r && y) {
+      const I = b ?? n.formatMessage({
+        id: "unity:component:inline-field:save-error",
+        defaultMessage: "An error occurred while saving. Please try again."
+      });
+      d(I);
+    }
+  }, [t, r, y, b, n]), m(() => {
+    a.current = t, w.current = u;
+  }, [t, u]);
+  const { base: D } = z(), V = v(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), o.handleSubmit();
+    },
+    [o]
+  ), g = v(() => {
+    o.reset(), i?.exitEditMode(), d("");
+  }, [o, i]), { keyboardProps: A } = T({
+    onKeyDown: (e) => {
+      e.key === "Escape" && i?.mode === "edit" && (e.preventDefault(), f?.(), g());
+    }
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: D(),
+      ref: i?.editViewRef,
+      hidden: !c,
+      "aria-hidden": !c,
+      ...!c && { inert: "" },
+      children: [
+        /* @__PURE__ */ s(R, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ s(
+          "form",
+          {
+            ...A,
+            className: "uy:flex uy:flex-1 uy:min-w-0",
+            onSubmit: V,
+            id: i?.editViewId,
+            children: /* @__PURE__ */ l(H, { children: [
+              p && /* @__PURE__ */ s(G, { children: p }),
+              /* @__PURE__ */ l("div", { className: "uy:flex", children: [
+                x,
+                /* @__PURE__ */ l(
+                  j,
+                  {
+                    className: "uy:flex uy:gap-50 uy:items-center uy:ml-100",
+                    "aria-busy": i?.isLoading,
+                    children: [
+                      /* @__PURE__ */ s(
+                        h,
+                        {
+                          asElement: "button",
+                          icon: "CloseOutlined",
+                          onPress: () => {
+                            f?.(), g();
+                          },
+                          isDisabled: i?.isLoading,
+                          title: E ?? n.formatMessage({
+                            id: "unity:component:inline-field:cancel",
+                            defaultMessage: "Cancel"
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        h,
+                        {
+                          asElement: "button",
+                          icon: "CheckOutlined",
+                          type: "submit",
+                          isLoading: i?.isLoading || t,
+                          isDisabled: !M || i?.isLoading || t,
+                          title: C ?? n.formatMessage({
+                            id: "unity:component:inline-field:save",
+                            defaultMessage: "Save"
+                          }),
+                          onPress: F
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s(B, {})
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            role: "alert",
+            "aria-live": "assertive",
+            "aria-atomic": "true",
+            className: "uy:sr-only",
+            children: k
+          }
+        )
+      ]
+    }
+  );
+}
+J.displayName = "InlineFieldEditView";
+export {
+  J as InlineFieldEditView
+};

package/dist/esm/components/inline-field/parts/InlineFieldReadView.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+export interface InlineFieldReadViewProps {
+    /**
+     * Content to display in read mode.
+     * Typically includes the read-only value and an InlineFieldEditTrigger.
+     */
+    children: ReactNode;
+    /**
+     * Success message to announce when save succeeds.
+     * If not provided, no success announcement is made.
+     */
+    successMessage?: string;
+}
+/**
+ * InlineFieldReadView displays content only when the parent InlineField is in read mode.
+ * Wrap read-only content and the edit trigger button in this component.
+ * The component automatically hides its content when the parent switches to edit mode,
+ * using semantic HTML attributes for accessibility.
+ * @example Basic usage with read-only value
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'john@example.com' }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="email">
+ *         {field => (
+ *           <field.InlineField>
+ *             <field.InlineFieldReadView>
+ *               <div className="flex items-center gap-2">
+ *                 <Text>{form.state.values.email}</Text>
+ *                 <field.InlineFieldEditTrigger />
+ *               </div>
+ *             </field.InlineFieldReadView>
+ *             <field.InlineFieldEditView>
+ *               <field.TextField label="Email" />
+ *             </field.InlineFieldEditView>
+ *           </field.InlineField>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @example With formatted display
+ * ```tsx
+ * <field.InlineFieldReadView>
+ *   <div className="flex items-center justify-between">
+ *     <div>
+ *       <Label>Email</Label>
+ *       <Text>{form.state.values.email}</Text>
+ *     </div>
+ *     <field.InlineFieldEditTrigger />
+ *   </div>
+ * </field.InlineFieldReadView>
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineField
+ * - Content remains in the DOM but is hidden with `hidden`, `aria-hidden`, and `inert` attributes in edit mode
+ * - Use this component to wrap both the read-only value and the InlineFieldEditTrigger
+ * @see {@link InlineFieldReadViewProps} for all available props
+ * @see {@link InlineField} for the parent container component
+ * @see {@link InlineFieldEditView} for the corresponding edit mode component
+ * @see {@link InlineFieldEditTrigger} for the button to enter edit mode
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
+ */
+export declare function InlineFieldReadView({ children, successMessage, }: InlineFieldReadViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldReadView {
+    var displayName: string;
+}

package/dist/esm/components/inline-field/parts/InlineFieldReadView.js

@@ -0,0 +1,58 @@
+import { jsxs as a, jsx as p } from "react/jsx-runtime";
+import { useState as S, useRef as c, useEffect as r } from "react";
+import { useStore as b } from "@tanstack/react-form";
+import { useFormContext as R } from "../../../hooks/tanstack-form-context.js";
+import { useInlineField as A } from "../InlineField.context.js";
+const I = 5e3;
+function x({
+  children: d,
+  successMessage: i
+}) {
+  const n = A(), [l, s] = S(""), f = R(), { isSubmitting: e, submissionAttempts: E, isSubmitSuccessful: m } = b(
+    f.store,
+    (t) => ({
+      isSubmitting: t.isSubmitting,
+      isSubmitSuccessful: t.isSubmitSuccessful,
+      submissionAttempts: t.submissionAttempts
+    })
+  ), u = c(e), o = n?.mode === "read";
+  return r(() => {
+    u.current && !e && m && i && s(i);
+  }, [e, m, i, n]), r(() => {
+    if (i && !n?.isLoading && o && m) {
+      s(i);
+      const t = setTimeout(() => {
+        s("");
+      }, I);
+      return () => {
+        clearTimeout(t);
+      };
+    }
+  }, [i, n, o, m]), r(() => {
+    e && !u.current && s("");
+  }, [e]), /* @__PURE__ */ a(
+    "div",
+    {
+      hidden: !o,
+      "aria-hidden": !o,
+      ...!o && { inert: "" },
+      children: [
+        d,
+        /* @__PURE__ */ p(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: "uy:sr-only",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+x.displayName = "InlineFieldReadView";
+export {
+  x as InlineFieldReadView
+};

package/dist/esm/hooks/use-tanstack-form.d.ts

@@ -57,6 +57,12 @@ export declare const useTanstackUnityForm: <TFormData, TOnMount extends import('
     readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
     readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+    readonly InlineField: {
+        ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+    readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
 }, {
     readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
     readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
@@ -122,6 +128,12 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/fo
     readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
     readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+    readonly InlineField: {
+        ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+    readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
 }, {
     readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
     readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
@@ -187,6 +199,12 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/fo
         readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
         readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+        readonly InlineField: {
+            ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+        readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
     }, {
         readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
         readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
@@ -253,6 +271,12 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
     readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
     readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+    readonly InlineField: {
+        ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+    readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
 }, {
     readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
     readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
@@ -318,6 +342,12 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
         readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+        readonly InlineField: {
+            ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+        readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
     }, {
         readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
         readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
@@ -382,6 +412,12 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly TextField: import('react').ForwardRefExoticComponent<import('../components/text-field/TanstackTextField.js').TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
         readonly ToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<import('../components/toggle-switch-field/TanstackToggleSwitchField.js').TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+        readonly InlineField: {
+            ({ children, mode: controlledMode, defaultMode, onModeChange, isLoading, shouldModeChange, }: import('../components/inline-field/InlineField.js').InlineFieldProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        readonly InlineFieldReadView: typeof import('../components/inline-field/parts/InlineFieldReadView.js').InlineFieldReadView;
+        readonly InlineFieldEditView: typeof import('../components/inline-field/parts/InlineFieldEditView.js').InlineFieldEditView;
     }, {
         readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
         readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;

package/dist/esm/hooks/use-tanstack-form.js

@@ -1,6 +1,6 @@
 import { lazy as e } from "react";
-import { createFormHook as o } from "@tanstack/react-form";
-import { TanstackForm as n } from "../components/form/TanstackForm.js";
+import { createFormHook as n } from "@tanstack/react-form";
+import { TanstackForm as o } from "../components/form/TanstackForm.js";
 import { formContext as l, fieldContext as c } from "./tanstack-form-context.js";
 const i = e(
   () => import("../components/checkbox-field/TanstackCheckboxField.js").then((t) => ({
@@ -12,11 +12,11 @@ const i = e(
       default: t.TanstackFormFeedbackText
     })
   )
-), u = e(
+), d = e(
   () => import("../components/form-field/parts/TanstackFormHelperText.js").then((t) => ({
     default: t.TanstackFormHelperText
   }))
-), d = e(
+), u = e(
   () => import("../components/form-field/parts/TanstackFormLabel.js").then((t) => ({
     default: t.TanstackFormLabel
   }))
@@ -38,11 +38,11 @@ const i = e(
   () => import("../components/checkbox/TanstackCheckbox.js").then((t) => ({
     default: t.TanstackCheckbox
   }))
-), m = e(
+), F = e(
   () => import("../components/date-picker/TanstackDatePicker.js").then((t) => ({
     default: t.TanstackDatePicker
   }))
-), F = e(
+), m = e(
   () => import("../components/multi-select/TanstackMultiSelect.js").then((t) => ({
     default: t.TanstackMultiSelect
   }))
@@ -82,11 +82,11 @@ const i = e(
   () => import("../components/select/TanstackSelect.js").then((t) => ({
     default: t.TanstackSelect
   }))
-), g = e(
+), w = e(
   () => import("../components/text-area/TanstackTextArea.js").then((t) => ({
     default: t.TanstackTextArea
   }))
-), w = e(
+), g = e(
   () => import("../components/input/TanstackInput.js").then((t) => ({
     default: t.TanstackInput
   }))
@@ -112,37 +112,37 @@ const i = e(
       default: t.TanstackDatePickerField
     })
   )
-), H = e(
+), V = e(
   () => import("../components/multi-select-field/TanstackMultiSelectField.js").then(
     (t) => ({
       default: t.TanstackMultiSelectField
     })
   )
-), D = e(
+), H = e(
   () => import("../components/number-field/TanstackNumberField.js").then((t) => ({
     default: t.TanstackNumberField
   }))
-), L = e(
+), D = e(
   () => import("../components/radio-button-group-field/TanstackRadioButtonGroupField.js").then((t) => ({
     default: t.TanstackRadioButtonGroupField
   }))
-), M = e(
+), L = e(
   () => import("../components/select-field/TanstackSelectField.js").then((t) => ({
     default: t.TanstackSelectField
   }))
-), A = e(
+), M = e(
   () => import("../components/selectable-button-group-field/TanstackSelectableButtonGroupField.js").then((t) => ({
     default: t.TanstackSelectableButtonGroupField
   }))
-), V = e(
+), A = e(
   () => import("../components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js").then((t) => ({
     default: t.TanstackSelectableCardCheckboxGroupField
   }))
-), y = e(
+), E = e(
   () => import("../components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js").then((t) => ({
     default: t.TanstackSelectableCardRadioGroupField
   }))
-), E = e(
+), y = e(
   () => import("../components/text-field/TanstackTextField.js").then((t) => ({
     default: t.TanstackTextField
   }))
@@ -174,19 +174,31 @@ const i = e(
   () => import("../components/inline-field-group/parts/InlineFieldGroupEditView.js").then((t) => ({
     default: t.InlineFieldGroupEditView
   }))
-), a = o({
+), K = e(
+  () => import("../components/inline-field/parts/InlineFieldEditView.js").then((t) => ({
+    default: t.InlineFieldEditView
+  }))
+), O = e(
+  () => import("../components/inline-field/parts/InlineFieldReadView.js").then((t) => ({
+    default: t.InlineFieldReadView
+  }))
+), Q = e(
+  () => import("../components/inline-field/InlineField.js").then((t) => ({
+    default: t.InlineField
+  }))
+), a = n({
   fieldComponents: {
     // Base components for field building
     FieldFeedbackText: r,
-    FieldHelperText: u,
-    FieldLabel: d,
+    FieldHelperText: d,
+    FieldLabel: u,
     FieldRawContextualLink: p,
     Field: s,
     // bound input components
     CheckboxGroupInput: k,
     CheckboxInput: T,
-    DatePickerInput: m,
-    MultiSelectInput: F,
+    DatePickerInput: F,
+    MultiSelectInput: m,
     PhoneNumberInput: h,
     NumberInput: f,
     RadioButtonInput: G,
@@ -194,28 +206,32 @@ const i = e(
     SelectableCardCheckboxGroupInput: C,
     SelectableCardRadioGroupInput: x,
     SelectInput: I,
-    TextAreaInput: g,
-    TextInput: w,
+    TextAreaInput: w,
+    TextInput: g,
     ToggleSwitchGroupInput: R,
     ToggleSwitchInput: B,
     // Field organisms
     CheckboxField: i,
     CheckboxGroupField: N,
     DatePickerField: P,
-    MultiSelectField: H,
-    NumberField: D,
+    MultiSelectField: V,
+    NumberField: H,
     PhoneNumberField: b,
-    RadioButtonGroupField: L,
-    SelectableButtonGroupField: A,
-    SelectableCardCheckboxGroupField: V,
-    SelectableCardRadioGroupField: y,
-    SelectField: M,
-    TextField: E,
+    RadioButtonGroupField: D,
+    SelectableButtonGroupField: M,
+    SelectableCardCheckboxGroupField: A,
+    SelectableCardRadioGroupField: E,
+    SelectField: L,
+    TextField: y,
     ToggleSwitchField: z,
-    ToggleSwitchGroupField: U
+    ToggleSwitchGroupField: U,
+    // Inline Edition components
+    InlineField: Q,
+    InlineFieldReadView: O,
+    InlineFieldEditView: K
   },
   formComponents: {
-    Form: n,
+    Form: o,
     // Inline Edition components
     InlineFieldGroup: j,
     InlineFieldGroupHeader: q,
@@ -224,9 +240,9 @@ const i = e(
   },
   fieldContext: c,
   formContext: l
-}), X = a.useAppForm, Y = a.withForm, Z = a.withFieldGroup;
+}), _ = a.useAppForm, $ = a.withForm, tt = a.withFieldGroup;
 export {
-  X as useTanstackUnityForm,
-  Z as withFieldGroup,
-  Y as withForm
+  _ as useTanstackUnityForm,
+  tt as withFieldGroup,
+  $ as withForm
 };

package/dist/esm/integrations/tanstack-router/components/tabs/Tabs.js

@@ -1,18 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useLocation as f, useNavigate as I, useChildMatches as p } from "@tanstack/react-router";
+import { jsx as i } from "react/jsx-runtime";
+import { useLocation as f, useNavigate as p, useChildMatches as I } from "@tanstack/react-router";
 import { RouterProvider as v } from "react-aria-components";
 import { Tabs as R } from "../../../../components/tabs/Tabs.js";
 function S({
-  children: i,
-  selectedKey: a,
-  onSelectionChange: u,
-  routeMatch: c = "fuzzy",
-  ...d
+  children: a,
+  selectedKey: u,
+  onSelectionChange: c,
+  routeMatch: d = "fuzzy",
+  ...s
 }) {
-  const s = f(), g = I(), l = p({
+  const g = f(), l = p(), r = I({
     select: (e) => {
       if (e.length !== 0)
-        return c === "exact" ? e.reduce((t, o) => {
+        return d === "exact" ? e.reduce((t, o) => {
           const n = String(t.routeId);
           return String(o.routeId).length > n.length ? o : t;
         }) : e.reduce((t, o) => {
@@ -20,18 +20,18 @@ function S({
           return String(o.routeId).length < n.length ? o : t;
         });
     }
-  }), h = a ?? l?.id ?? s.pathname;
-  return /* @__PURE__ */ r(v, { navigate: (e) => {
-    g({ to: e });
-  }, children: /* @__PURE__ */ r(
+  }), h = u ?? (r ? r.pathname : void 0) ?? g.pathname;
+  return /* @__PURE__ */ i(v, { navigate: (e) => {
+    l({ to: e });
+  }, children: /* @__PURE__ */ i(
     R,
     {
-      ...d,
+      ...s,
       selectedKey: h,
       onSelectionChange: (e) => {
-        u?.(e);
+        c?.(e);
       },
-      children: i
+      children: a
     }
   ) });
 }

package/i18n/en-GB.json

@@ -63,6 +63,11 @@
   "unity:component:inline-field-group:loading": "Loading...",
   "unity:component:inline-field-group:validation-error": "Please fix the errors before saving.",
   "unity:component:inline-field-group:save-error": "An error occurred while saving. Please try again.",
+  "unity:component:inline-field:cancel": "Cancel",
+  "unity:component:inline-field:save": "Save",
+  "unity:component:inline-field:validation-error": "Please fix the errors before saving.",
+  "unity:component:inline-field:save-error": "An error occurred while saving. Please try again.",
+  "unity:component:inline-field:edit": "Edit",
   "unity:component:label:required": "required",
   "unity:component:label:optional": "(optional)",
   "unity:component:pagination:label": "Pagination",

package/i18n/es-ES.json

@@ -63,6 +63,11 @@
   "unity:component:inline-field-group:loading": "Guardando...",
   "unity:component:inline-field-group:validation-error": "Por favor, corrige los errores antes de guardar.",
   "unity:component:inline-field-group:save-error": "Se produjo un error al guardar. Por favor, inténtalo de nuevo.",
+  "unity:component:inline-field:cancel": "Cancelar",
+  "unity:component:inline-field:save": "Guardar",
+  "unity:component:inline-field:validation-error": "Por favor, corrige los errores antes de guardar.",
+  "unity:component:inline-field:save-error": "Se produjo un error al guardar. Por favor, inténtalo de nuevo.",
+  "unity:component:inline-field:edit": "Editar",
   "unity:component:label:required": "obligatorio",
   "unity:component:label:optional": "(opcional)",
   "unity:component:pagination:label": "Paginación",

package/i18n/fr-FR.json

@@ -63,6 +63,11 @@
   "unity:component:inline-field-group:loading": "En cours de sauvegarde...",
   "unity:component:inline-field-group:validation-error": "Veuillez corriger les erreurs avant d'enregistrer.",
   "unity:component:inline-field-group:save-error": "Une erreur s'est produite lors de l'enregistrement. Veuillez réessayer.",
+  "unity:component:inline-field:cancel": "Annuler",
+  "unity:component:inline-field:save": "Enregistrer",
+  "unity:component:inline-field:validation-error": "Veuillez corriger les erreurs avant d'enregistrer.",
+  "unity:component:inline-field:save-error": "Une erreur s'est produite lors de l'enregistrement. Veuillez réessayer.",
+  "unity:component:inline-field:edit": "Modifier",
   "unity:component:label:required": "obligatoire",
   "unity:component:label:optional": "(optionnel)",
   "unity:component:pagination:label": "Pagination",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.10.0",
-    "@payfit/unity-illustrations": "2.2.7",
+    "@payfit/unity-illustrations": "2.3.0",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.25.6",
@@ -70,8 +70,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.2.7",
-    "@payfit/unity-themes": "2.2.7",
+    "@payfit/unity-icons": "2.3.0",
+    "@payfit/unity-themes": "2.3.0",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -90,9 +90,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.2.7",
-    "@payfit/unity-illustrations": "2.2.7",
-    "@payfit/unity-themes": "2.2.7",
+    "@payfit/unity-icons": "2.3.0",
+    "@payfit/unity-illustrations": "2.3.0",
+    "@payfit/unity-themes": "2.3.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.2",
     "@storybook/addon-docs": "10.2.2",
@@ -102,8 +102,8 @@
     "@tanstack/react-devtools": "0.9.4",
     "@tanstack/react-form-devtools": "0.2.13",
     "@tanstack/react-query": "5.90.20",
-    "@tanstack/react-router": "1.133.13",
-    "@tanstack/react-router-devtools": "1.133.13",
+    "@tanstack/react-router": "1.157.18",
+    "@tanstack/react-router-devtools": "1.157.18",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@types/react": "18.3.18",