@payfit/unity-components 2.1.4 → 2.2.0

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

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

@@ -1,12 +1,12 @@
 import { lazy as e } from "react";
 import { createFormHook as o } from "@tanstack/react-form";
 import { TanstackForm as n } from "../components/form/TanstackForm.js";
-import { formContext as c, fieldContext as l } from "./tanstack-form-context.js";
-const r = e(
+import { formContext as l, fieldContext as c } from "./tanstack-form-context.js";
+const i = e(
   () => import("../components/checkbox-field/TanstackCheckboxField.js").then((t) => ({
     default: t.TanstackCheckboxField
   }))
-), i = e(
+), r = e(
   () => import("../components/form-field/parts/TanstackFormFeedbackText.js").then(
     (t) => ({
       default: t.TanstackFormFeedbackText
@@ -20,13 +20,13 @@ const r = e(
   () => import("../components/form-field/parts/TanstackFormLabel.js").then((t) => ({
     default: t.TanstackFormLabel
   }))
-), s = e(
+), p = e(
   () => import("../components/form-field/parts/TanstackRawFormContextualLink.js").then(
     (t) => ({
       default: t.TanstackRawFormContextualLink
     })
   )
-), p = e(
+), s = e(
   () => import("../components/form-field/TanstackFormField.js").then((t) => ({
     default: t.TanstackFormField
   }))
@@ -42,11 +42,11 @@ const r = e(
   () => import("../components/date-picker/TanstackDatePicker.js").then((t) => ({
     default: t.TanstackDatePicker
   }))
-), h = e(
+), F = e(
   () => import("../components/multi-select/TanstackMultiSelect.js").then((t) => ({
     default: t.TanstackMultiSelect
   }))
-), F = e(
+), h = e(
   () => import("../components/phone-number/TanstackPhoneNumberInput.js").then((t) => ({
     default: t.TanstackPhoneNumberInput
   }))
@@ -60,17 +60,17 @@ const r = e(
   () => import("../components/number-input/TanstackNumberInput.js").then((t) => ({
     default: t.TanstackNumberInput
   }))
-), S = e(
+), G = e(
   () => import("../components/radio-button-group/TanstackRadioButtonGroup.js").then(
     (t) => ({
       default: t.TanstackRadioButtonGroup
     })
   )
-), C = e(
+), S = e(
   () => import("../components/selectable-button-group/TanstackSelectableButtonGroup.js").then((t) => ({
     default: t.TanstackSelectableButtonGroup
   }))
-), G = e(
+), C = e(
   () => import("../components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js").then((t) => ({
     default: t.TanstackSelectableCardCheckboxGroup
   }))
@@ -78,11 +78,11 @@ const r = e(
   () => import("../components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js").then((t) => ({
     default: t.TanstackSelectableCardRadioGroup
   }))
-), g = e(
+), I = e(
   () => import("../components/select/TanstackSelect.js").then((t) => ({
     default: t.TanstackSelect
   }))
-), I = e(
+), g = e(
   () => import("../components/text-area/TanstackTextArea.js").then((t) => ({
     default: t.TanstackTextArea
   }))
@@ -112,21 +112,21 @@ const r = e(
       default: t.TanstackDatePickerField
     })
   )
-), D = e(
+), H = e(
   () => import("../components/multi-select-field/TanstackMultiSelectField.js").then(
     (t) => ({
       default: t.TanstackMultiSelectField
     })
   )
-), L = e(
+), D = e(
   () => import("../components/number-field/TanstackNumberField.js").then((t) => ({
     default: t.TanstackNumberField
   }))
-), M = e(
+), L = e(
   () => import("../components/radio-button-group-field/TanstackRadioButtonGroupField.js").then((t) => ({
     default: t.TanstackRadioButtonGroupField
   }))
-), H = e(
+), M = e(
   () => import("../components/select-field/TanstackSelectField.js").then((t) => ({
     default: t.TanstackSelectField
   }))
@@ -134,76 +134,99 @@ const r = e(
   () => import("../components/selectable-button-group-field/TanstackSelectableButtonGroupField.js").then((t) => ({
     default: t.TanstackSelectableButtonGroupField
   }))
-), y = e(
+), V = e(
   () => import("../components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js").then((t) => ({
     default: t.TanstackSelectableCardCheckboxGroupField
   }))
-), z = e(
+), y = e(
   () => import("../components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js").then((t) => ({
     default: t.TanstackSelectableCardRadioGroupField
   }))
-), U = e(
+), E = e(
   () => import("../components/text-field/TanstackTextField.js").then((t) => ({
     default: t.TanstackTextField
   }))
-), j = e(
+), z = e(
   () => import("../components/toggle-switch-field/TanstackToggleSwitchField.js").then(
     (t) => ({
       default: t.TanstackToggleSwitchField
     })
   )
-), q = e(
+), U = e(
   () => import("../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js").then((t) => ({
     default: t.TanstackToggleSwitchGroupField
   }))
+), j = e(
+  () => import("../components/inline-field-group/InlineFieldGroup.js").then((t) => ({
+    default: t.InlineFieldGroup
+  }))
+), q = e(
+  () => import("../components/inline-field-group/parts/InlineFieldGroupHeader.js").then(
+    (t) => ({
+      default: t.InlineFieldGroupHeader
+    })
+  )
+), v = e(
+  () => import("../components/inline-field-group/parts/InlineFieldGroupReadView.js").then((t) => ({
+    default: t.InlineFieldGroupReadView
+  }))
+), J = e(
+  () => import("../components/inline-field-group/parts/InlineFieldGroupEditView.js").then((t) => ({
+    default: t.InlineFieldGroupEditView
+  }))
 ), a = o({
   fieldComponents: {
     // Base components for field building
-    FieldFeedbackText: i,
+    FieldFeedbackText: r,
     FieldHelperText: u,
     FieldLabel: d,
-    FieldRawContextualLink: s,
-    Field: p,
+    FieldRawContextualLink: p,
+    Field: s,
     // bound input components
     CheckboxGroupInput: k,
     CheckboxInput: T,
     DatePickerInput: m,
-    MultiSelectInput: h,
-    PhoneNumberInput: F,
+    MultiSelectInput: F,
+    PhoneNumberInput: h,
     NumberInput: f,
-    RadioButtonInput: S,
-    SelectableButtonGroupInput: C,
-    SelectableCardCheckboxGroupInput: G,
+    RadioButtonInput: G,
+    SelectableButtonGroupInput: S,
+    SelectableCardCheckboxGroupInput: C,
     SelectableCardRadioGroupInput: x,
-    SelectInput: g,
-    TextAreaInput: I,
+    SelectInput: I,
+    TextAreaInput: g,
     TextInput: w,
     ToggleSwitchGroupInput: R,
     ToggleSwitchInput: B,
     // Field organisms
-    CheckboxField: r,
+    CheckboxField: i,
     CheckboxGroupField: N,
     DatePickerField: P,
-    MultiSelectField: D,
-    NumberField: L,
+    MultiSelectField: H,
+    NumberField: D,
     PhoneNumberField: b,
-    RadioButtonGroupField: M,
+    RadioButtonGroupField: L,
     SelectableButtonGroupField: A,
-    SelectableCardCheckboxGroupField: y,
-    SelectableCardRadioGroupField: z,
-    SelectField: H,
-    TextField: U,
-    ToggleSwitchField: j,
-    ToggleSwitchGroupField: q
+    SelectableCardCheckboxGroupField: V,
+    SelectableCardRadioGroupField: y,
+    SelectField: M,
+    TextField: E,
+    ToggleSwitchField: z,
+    ToggleSwitchGroupField: U
   },
   formComponents: {
-    Form: n
+    Form: n,
+    // Inline Edition components
+    InlineFieldGroup: j,
+    InlineFieldGroupHeader: q,
+    InlineFieldGroupReadView: v,
+    InlineFieldGroupEditView: J
   },
-  fieldContext: l,
-  formContext: c
-}), O = a.useAppForm, Q = a.withForm, V = a.withFieldGroup;
+  fieldContext: c,
+  formContext: l
+}), X = a.useAppForm, Y = a.withForm, Z = a.withFieldGroup;
 export {
-  O as useTanstackUnityForm,
-  V as withFieldGroup,
-  Q as withForm
+  X as useTanstackUnityForm,
+  Z as withFieldGroup,
+  Y as withForm
 };

package/dist/esm/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/autocomplete/parts/AutocompleteItem.js';
 export * from './components/autocomplete/parts/AutocompleteItemGroup.js';
 export * from './components/avatar/Avatar.js';
 export * from './components/avatar/parts/AvatarFallback.js';
+export * from './components/avatar/parts/AvatarIcon.js';
 export * from './components/avatar/parts/AvatarImage.js';
 export * from './components/avatar/parts/AvatarPair.js';
 export * from './components/avatar/utils.js';