@payfit/unity-components 2.1.4 → 2.2.1

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

@@ -0,0 +1,64 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface InlineFieldGroupEditViewProps extends PropsWithChildren {
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+    /**
+     * Legend text for the fieldset. Should describe the group of fields.
+     * This is required for accessibility but will be visually hidden.
+     */
+    legend?: ReactNode;
+}
+/**
+ * InlineFieldGroupEditView displays form fields only when the parent InlineFieldGroup is in edit mode.
+ * Wrap form field components in this component to show them when editing.
+ * The component uses a semantic `<fieldset>` with a visually hidden `<legend>` for accessibility.
+ * It automatically disables all fields during loading states and hides content in read mode.
+ * @example Basic usage with form fields
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { email: 'john@example.com', phone: '+33123456789' }
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup>
+ *         <form.InlineFieldGroupHeader title="Contact" />
+ *         <form.InlineFieldGroupReadView>
+ *           <DefinitionList>
+ *             <DefinitionItem term="Email" description={form.state.values.email} />
+ *           </DefinitionList>
+ *         </form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit contact information">
+ *           <form.AppField name="email">
+ *             {field => <field.TextField label="Email" isRequired />}
+ *           </form.AppField>
+ *           <form.AppField name="phone">
+ *             {field => <field.PhoneNumberField label="Phone" />}
+ *           </form.AppField>
+ *         </form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineFieldGroup
+ * - Set the `legend` prop to describe the group of fields for screen readers
+ * - The fieldset is disabled automatically when the parent's `isLoading` prop is true
+ * - Uses `aria-busy` to indicate loading state to assistive technologies
+ * - Content remains in the DOM but is hidden with `hidden` and `inert` attributes in read mode
+ * @see {@link InlineFieldGroupEditViewProps} for all available props
+ * @see {@link InlineFieldGroup} for the parent container component
+ * @see {@link InlineFieldGroupReadView} 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-group GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
+ */
+export declare function InlineFieldGroupEditView({ children, className, legend, }: InlineFieldGroupEditViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupEditView {
+    var displayName: string;
+}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupEditView.js

@@ -0,0 +1,56 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useContext as g } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useIntl as x } from "react-intl";
+import { Button as v } from "../../button/Button.js";
+import { InlineFieldGroupContext as I } from "../InlineFieldGroup.context.js";
+const N = w({
+  slots: {
+    fieldset: "uy:border-0 uy:p-0 uy:m-0",
+    legend: "uy:sr-only",
+    fieldsContainer: "uy:flex uy:flex-col uy:gap-250",
+    hiddenButtons: "uy:sr-only"
+  }
+});
+function b({
+  children: d,
+  className: s,
+  legend: o
+}) {
+  const l = x(), t = g(I);
+  if (!t)
+    throw new Error(
+      "InlineFieldGroupEditView must be used within InlineFieldGroup"
+    );
+  const { mode: r, editViewId: a, isLoading: n, editViewRef: u } = t, i = r === "edit", {
+    fieldset: m,
+    legend: f,
+    fieldsContainer: c,
+    hiddenButtons: p
+  } = N(), y = l.formatMessage({
+    id: "unity:component:inline-field-group:save",
+    defaultMessage: "Save"
+  });
+  return /* @__PURE__ */ h(
+    "fieldset",
+    {
+      ref: u,
+      id: a,
+      className: m({ className: s }),
+      disabled: n,
+      hidden: !i,
+      "aria-hidden": !i,
+      "aria-busy": n,
+      ...!i && { inert: "" },
+      children: [
+        /* @__PURE__ */ e("legend", { className: f(), children: o }),
+        /* @__PURE__ */ e("div", { className: c(), children: d }),
+        /* @__PURE__ */ e("div", { className: p(), children: /* @__PURE__ */ e(v, { type: "submit", variant: "primary", children: y }) })
+      ]
+    }
+  );
+}
+b.displayName = "InlineFieldGroupEditView";
+export {
+  b as InlineFieldGroupEditView
+};

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

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+export interface InlineFieldGroupHeaderProps {
+    /**
+     * The title to display in the header.
+     * This will be used for aria-labelledby on the form element.
+     */
+    title: ReactNode;
+    /**
+     * Custom label for the edit button.
+     * @default "Edit" (translated)
+     */
+    editLabel?: string;
+    /**
+     * Custom label for the save button.
+     * @default "Save" (translated)
+     */
+    saveLabel?: string;
+    /**
+     * Custom label for the cancel button.
+     * @default "Cancel" (translated)
+     */
+    cancelLabel?: string;
+    /**
+     * Additional custom actions to render alongside the default buttons.
+     * These will be displayed between the title and the edit/save/cancel buttons.
+     */
+    customActions?: ReactNode;
+    /**
+     * Optional callback fired when the edit button is clicked.
+     * This is called before entering edit mode and is useful for analytics or side effects.
+     */
+    onEditPress?: () => 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.
+     */
+    onSavePress?: () => void;
+    /**
+     * 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.
+     */
+    onCancelPress?: () => void;
+}
+/**
+ * InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
+ * It automatically switches between Edit button (read mode) and Save/Cancel buttons (edit mode)
+ * based on the parent InlineFieldGroup's current mode.
+ * The Save button integrates with TanStack Form and remains disabled until the form has changes.
+ * Cancel resets the form and returns to read mode.
+ * @example Basic usage
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ defaultValues: { name: 'John' } })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup>
+ *         <form.InlineFieldGroupHeader title="Contact Information" />
+ *         <form.InlineFieldGroupReadView>...</form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit">...</form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @example Custom button labels and actions
+ * ```tsx
+ * <form.InlineFieldGroupHeader
+ *   title="Contact Information"
+ *   editLabel="Modify"
+ *   saveLabel="Confirm"
+ *   cancelLabel="Discard"
+ *   customActions={<Button onPress={handleDelete}>Delete</Button>}
+ *   onSavePress={() => trackAnalytics('save_clicked')}
+ * />
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineFieldGroup
+ * - The title serves as the accessible label for the form via `aria-labelledby`
+ * - The Edit button uses `aria-expanded` and `aria-controls` for accessibility
+ * - Use `customActions` to add buttons that appear in both read and edit modes
+ * - Use `onEditPress`, `onSavePress`, `onCancelPress` for analytics or side effects
+ * @see {@link InlineFieldGroupHeaderProps} for all available props
+ * @see {@link InlineFieldGroup} for the parent container component
+ * @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 function InlineFieldGroupHeader({ title, editLabel, saveLabel, cancelLabel, customActions, onEditPress, onSavePress, onCancelPress, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupHeader {
+    var displayName: string;
+}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.js

@@ -0,0 +1,106 @@
+import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useContext as L } from "react";
+import { uyTv as P } from "@payfit/unity-themes";
+import { useStore as S } from "@tanstack/react-form";
+import { useIntl as j } from "react-intl";
+import { useFormContext as z } from "../../../hooks/tanstack-form-context.js";
+import { Button as o } from "../../button/Button.js";
+import { Text as H } from "../../text/Text.js";
+import { InlineFieldGroupContext as B } from "../InlineFieldGroup.context.js";
+const T = P({
+  slots: {
+    base: "uy:flex uy:items-center uy:justify-between uy:w-full",
+    titleContainer: "uy:flex uy:flex-col uy:gap-0 uy:flex-1",
+    actions: "uy:flex uy:gap-100 uy:items-center"
+  }
+});
+function A({
+  title: a,
+  editLabel: s,
+  saveLabel: l,
+  cancelLabel: d,
+  customActions: u,
+  onEditPress: c,
+  onSavePress: m,
+  onCancelPress: f
+}) {
+  const i = j(), r = L(B);
+  if (!r)
+    throw new Error(
+      "InlineFieldGroupHeader must be used within InlineFieldGroup"
+    );
+  const {
+    mode: p,
+    enterEditMode: y,
+    exitEditMode: x,
+    headerId: g,
+    editViewId: h,
+    isLoading: t,
+    editButtonRef: b
+  } = r, v = z(), { isDirty: I } = S(v.store, (G) => ({
+    isDirty: G.isDirty
+  })), { base: C, titleContainer: M, actions: F } = T(), w = s || i.formatMessage({
+    id: "unity:component:inline-field-group:edit",
+    defaultMessage: "Edit"
+  }), D = l || i.formatMessage({
+    id: "unity:component:inline-field-group:save",
+    defaultMessage: "Save"
+  }), E = d || i.formatMessage({
+    id: "unity:component:inline-field-group:cancel",
+    defaultMessage: "Cancel"
+  });
+  return /* @__PURE__ */ n("header", { className: C(), children: [
+    /* @__PURE__ */ e("div", { className: M(), children: /* @__PURE__ */ e(H, { id: g, variant: "h3", color: "content.neutral", children: a }) }),
+    /* @__PURE__ */ n("div", { className: F(), role: "group", children: [
+      u,
+      p === "read" ? /* @__PURE__ */ e(
+        o,
+        {
+          ref: b,
+          variant: "secondary",
+          size: "default",
+          onPress: () => {
+            c?.(), y();
+          },
+          isDisabled: t,
+          prefixIcon: "PencilSimpleOutlined",
+          "aria-expanded": !1,
+          "aria-controls": h,
+          children: w
+        }
+      ) : /* @__PURE__ */ n(N, { children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            variant: "secondary",
+            size: "default",
+            onPress: () => {
+              f?.(), x();
+            },
+            isDisabled: t,
+            type: "button",
+            children: E
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            variant: "primary",
+            size: "default",
+            isDisabled: !I || t,
+            isLoading: t,
+            type: "submit",
+            onPress: () => {
+              m?.();
+            },
+            children: D
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+A.displayName = "InlineFieldGroupHeader";
+export {
+  A as InlineFieldGroupHeader
+};

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

@@ -0,0 +1,56 @@
+import { PropsWithChildren } from 'react';
+export interface InlineFieldGroupReadViewProps extends PropsWithChildren {
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+}
+/**
+ * InlineFieldGroupReadView displays content only when the parent InlineFieldGroup is in read mode.
+ * Wrap read-only data displays (like DefinitionList) in this component to show them when not editing.
+ * The component automatically hides its content when entering edit mode using the `hidden` attribute
+ * and `inert` for proper accessibility, ensuring screen readers and keyboard navigation skip it.
+ * @example Basic usage with DefinitionList
+ * ```tsx
+ * import { useTanstackUnityForm, DefinitionList, DefinitionItem } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup>
+ *         <form.InlineFieldGroupHeader title="Contact" />
+ *         <form.InlineFieldGroupReadView>
+ *           <form.Subscribe selector={state => state.values}>
+ *             {values => (
+ *               <DefinitionList>
+ *                 <DefinitionItem term="Email" description={values.email} />
+ *               </DefinitionList>
+ *             )}
+ *           </form.Subscribe>
+ *         </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
+ * - Must be used as a child of InlineFieldGroup
+ * - Use `form.Subscribe` to display current form values that update after saving
+ * - The content remains in the DOM but is hidden with `hidden` and `inert` attributes in edit mode
+ * @see {@link InlineFieldGroupReadViewProps} for all available props
+ * @see {@link InlineFieldGroup} for the parent container component
+ * @see {@link InlineFieldGroupEditView} for the corresponding edit mode component
+ * @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 function InlineFieldGroupReadView({ children, className, }: InlineFieldGroupReadViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupReadView {
+    var displayName: string;
+}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as d } from "react";
+import { InlineFieldGroupContext as t } from "../InlineFieldGroup.context.js";
+function l({
+  children: n,
+  className: o
+}) {
+  const i = d(t);
+  if (!i)
+    throw new Error(
+      "InlineFieldGroupReadView must be used within InlineFieldGroup"
+    );
+  const e = i.mode === "read";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o,
+      hidden: !e,
+      "aria-hidden": !e,
+      ...!e && { inert: "" },
+      children: n
+    }
+  );
+}
+l.displayName = "InlineFieldGroupReadView";
+export {
+  l as InlineFieldGroupReadView
+};

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -1,20 +1,29 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-const a = t({
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i, Children as a, isValidElement as m, cloneElement as l } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as d } from "../../button/Button.js";
+import { DialogButton as b } from "../../dialog/parts/DialogActions/DialogButton.js";
+const c = p({
   base: [
     "uy:py-200 uy:px-300 uy:w-full",
-    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0",
+    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0 uy:flex-col uy:md:flex-row",
     "uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
     "uy:sticky uy:bottom-0 uy:z-10",
     "uy:mt-auto",
     "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
   ]
-}), d = y(
-  ({ children: e, ...r }, o) => /* @__PURE__ */ u("footer", { ref: o, className: a(), ...r, children: e })
+}), x = i(
+  ({ children: r, ...t }, u) => {
+    const o = f(), n = o === "xs" || o === "sm", y = a.map(r, (e) => m(e) && (e.type === d || e.type === b) ? l(e, {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      size: n ? "full" : e.props.size
+    }) : e);
+    return /* @__PURE__ */ s("footer", { ref: u, className: c(), ...t, children: y });
+  }
 );
-d.displayName = "SidePanelFooter";
+x.displayName = "SidePanelFooter";
 export {
-  d as SidePanelFooter,
-  a as sidePanelFooter
+  x as SidePanelFooter,
+  c as sidePanelFooter
 };

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

@@ -1 +1 @@
-export declare const fieldContext: import('react').Context<import('@tanstack/react-form').AnyFieldApi>, formContext: import('react').Context<import('@tanstack/react-form').AnyFormApi>, useFieldContext: <TData>() => import('@tanstack/react-form').FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import('@tanstack/react-form').ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+export declare const fieldContext: import('react').Context<import('@tanstack/form-core').AnyFieldApi>, formContext: import('react').Context<import('@tanstack/form-core').AnyFormApi>, useFieldContext: <TData>() => import('@tanstack/form-core').FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import('@tanstack/react-form').ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;

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

@@ -1,5 +1,5 @@
 import { MultiSelectComponent } from '../components/multi-select/MultiselectTypes.js';
-export declare const useTanstackUnityForm: <TFormData, TOnMount extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import('@tanstack/react-form').FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import('@tanstack/react-form').AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+export declare const useTanstackUnityForm: <TFormData, TOnMount extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import('@tanstack/form-core').FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import('@tanstack/react-form').AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -59,8 +59,12 @@ export declare const useTanstackUnityForm: <TFormData, TOnMount extends import('
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
 }, {
     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>>;
+    readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+    readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+    readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
 }>;
-export declare const withForm: <TFormData, TOnMount extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props, }: import('@tanstack/react-form').WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+export declare const withForm: <TFormData, TOnMount extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props, }: import('@tanstack/react-form').WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -120,8 +124,12 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/re
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
 }, {
     readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
-}, TRenderProps>) => (props: import('react').PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
-    form: import('@tanstack/react-form').AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
+    readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
+    readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+    readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+    readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
+}, TRenderProps>) => import('react').FunctionComponent<import('react').PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: import('@tanstack/react-form').AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -181,8 +189,12 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/re
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     }, {
         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>>;
+        readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+        readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+        readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
     }>;
-}>) => import('react').ReactNode;
+}>>;
 export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues, }: import('@tanstack/react-form').WithFieldGroupProps<TFieldGroupData, {
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
@@ -243,7 +255,11 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
     readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
 }, {
     readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
-}, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import('@tanstack/react-form').DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import('@tanstack/react-form').FieldsMap<TFormData, TFieldGroupData>, TOnMount extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/react-form').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/react-form').FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import('react').PropsWithChildren<NoInfer<TRenderProps> & {
+    readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
+    readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+    readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+    readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
+}, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import('@tanstack/form-core').DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import('@tanstack/form-core').FieldsMap<TFormData, TFieldGroupData>, TOnMount extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChange extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import('@tanstack/form-core').FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import('@tanstack/form-core').FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import('react').PropsWithChildren<NoInfer<TRenderProps> & {
     form: import('@tanstack/react-form').AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
@@ -304,7 +320,11 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     }, {
         readonly Form: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
-    }> | import('@tanstack/react-form').AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import('@tanstack/react-form').FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
+        readonly InlineFieldGroup: import('react').ForwardRefExoticComponent<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupProps & import('react').RefAttributes<import('../components/inline-field-group/InlineFieldGroup.js').InlineFieldGroupHandle>>;
+        readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+        readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+        readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
+    }> | import('@tanstack/react-form').AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import('@tanstack/form-core').FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -364,6 +384,10 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly ToggleSwitchGroupField: import('react').ForwardRefExoticComponent<import('../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js').TanstackToggleSwitchGroupFieldProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     }, {
         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>>;
+        readonly InlineFieldGroupHeader: typeof import('../components/inline-field-group/parts/InlineFieldGroupHeader.js').InlineFieldGroupHeader;
+        readonly InlineFieldGroupReadView: typeof import('../components/inline-field-group/parts/InlineFieldGroupReadView.js').InlineFieldGroupReadView;
+        readonly InlineFieldGroupEditView: typeof import('../components/inline-field-group/parts/InlineFieldGroupEditView.js').InlineFieldGroupEditView;
     }>;
     fields: TFields;
-}>) => import('react').ReactNode;
+}>) => ReturnType<import('react').FunctionComponent>;