@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,93 @@
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as j, useMemo as v } from "react";
+import { useUnityTheme as z, uyMerge as o, cn as C } from "@payfit/unity-themes";
+import { Button as M } from "react-aria-components/Button";
+import P from "../../hooks/use-id.js";
+import { Icon as T } from "../icon/Icon.js";
+import { Spinner as A } from "../spinner/Spinner.js";
+import { Tooltip as F } from "../tooltip/Tooltip.js";
+import { iconButtonOutlined as c, iconButtonGhost as G, iconButtonFilled as p } from "./IconButton.variants.js";
+const O = j(
+  ({
+    variant: i,
+    color: t = "primary",
+    icon: u,
+    iconRole: d,
+    label: s,
+    isDisabled: a = !1,
+    isLoading: r = !1,
+    onClick: f,
+    onPress: h,
+    className: y,
+    ...b
+  }, B) => {
+    const I = P(), { theme: l } = z(), m = `icon-button-label-${I}`, w = v(() => {
+      const e = { isDisabled: a, isLoading: r };
+      switch (i) {
+        case "primary":
+          return o(
+            p({
+              ...e,
+              color: t
+            })
+          );
+        case "secondary":
+          return l === "rebrand" ? o(
+            p({ ...e, color: t === "inverted" ? "inverted.low" : "neutral" })
+          ) : o(
+            c({
+              ...e,
+              color: t
+            })
+          );
+        case "ghost":
+          return o(
+            G({
+              ...e,
+              color: t
+            })
+          );
+        case "outlined":
+          return o(
+            c({
+              ...e,
+              color: t
+            })
+          );
+      }
+    }, [i, t, a, r, l]), x = {
+      ...r && { "data-loading": r }
+    };
+    return /* @__PURE__ */ n(F, { title: s, children: /* @__PURE__ */ N(
+      M,
+      {
+        ref: B,
+        "data-dd-privacy": "allow",
+        ...b,
+        className: C(w, y),
+        onPress: h ?? f,
+        isDisabled: a || r,
+        isPending: r,
+        "aria-label": s,
+        ...x,
+        children: [
+          r ? /* @__PURE__ */ n(A, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ n(
+            T,
+            {
+              role: d,
+              src: u,
+              size: 20,
+              color: "inherit",
+              "aria-labelledby": m
+            }
+          ),
+          /* @__PURE__ */ n("span", { id: m, className: "uy:sr-only", children: s })
+        ]
+      }
+    ) });
+  }
+);
+O.displayName = "IconButton";
+export {
+  O as IconButton
+};

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

@@ -0,0 +1,191 @@
+import { VariantProps } from '@payfit/unity-themes';
+declare const iconButtonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const iconButtonFilled: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        inverted: string[];
+        'inverted.low': string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const iconButtonOutlined: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "uy:border uy:border-solid uy:bg-transparent", {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        'neutral.lowest': string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export type IconButtonBase = VariantProps<typeof iconButtonBase>;
+export type IconButtonFilled = VariantProps<typeof iconButtonFilled>;
+export type IconButtonOutlined = VariantProps<typeof iconButtonOutlined>;
+export type IconButtonGhost = VariantProps<typeof iconButtonGhost>;
+export {};

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

@@ -0,0 +1,177 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  base: [
+    "uy:group",
+    "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500",
+    "uy:inline-flex uy:justify-center uy:items-center",
+    "uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer",
+    "uy:transition-colors",
+    'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
+  ],
+  variants: {
+    isDisabled: {
+      true: "uy:disabled:cursor-not-allowed",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isLoading: !1
+  }
+}), r = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
+        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed"
+      ],
+      warning: [
+        "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      danger: [
+        "uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted",
+        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted",
+        "uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted"
+      ],
+      neutral: [
+        "uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      inverted: [
+        "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
+      ],
+      "inverted.low": [
+        "uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-low-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active",
+        'uy:data-[pressed="true"]:bg-surface-inverted-low-pressed uy:data-[pressed="true"]:text-content-inverted-pressed',
+        'uy:data-[focus-visible="true"]:outline-utility-inverted-focus-ring uy:data-[focus-visible="true"]:text-content-inverted-focus uy:data-[focus-visible="true"]:bg-surface-inverted-low-focus'
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    }
+  }
+}), u = e({
+  extend: t,
+  base: "uy:border uy:border-solid uy:bg-transparent",
+  variants: {
+    color: {
+      primary: [
+        "uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
+        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
+        'uy:theme-legacy:data-[pressed="true"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed="true"]:border-border-neutral-high-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        'uy:data-[focus-visible="true"]:border-border-neutral-high-focus uy:data-[focus-visible="true"]:text-content-neutral-focus'
+      ],
+      inverted: [
+        "uy:text-content-inverted-enabled uy:border-border-inverted-enabled",
+        'uy:theme-legacy:data-[pressed="true"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed="true"]:border-border-inverted-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
+    }
+  }
+}), n = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered="true"]:text-content-primary-hover uy:theme-rebrand:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active",
+        "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus"
+      ],
+      warning: [
+        "uy:bg-transparent uy:text-content-warning-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover uy:data-[hovered="true"]:text-content-warning-hover',
+        "uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active",
+        "uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      danger: [
+        "uy:bg-transparent uy:text-content-danger-enabled",
+        'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover uy:data-[hovered="true"]:text-content-danger-hover',
+        "uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active",
+        "uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      neutral: [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      "neutral.lowest": [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      inverted: [
+        "uy:bg-transparent uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active",
+        "uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !0,
+      color: "inverted",
+      className: ["uy:disabled:text-content-inverted-disabled"]
+    },
+    {
+      isLoading: !0,
+      color: "inverted",
+      className: ["uy:data-[loading]:text-content-inverted-disabled"]
+    }
+  ]
+});
+export {
+  r as iconButtonFilled,
+  n as iconButtonGhost,
+  u as iconButtonOutlined
+};

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

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

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,58 @@
+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 t = r(null), e = r(null), l = r(!0), { mode: i, enterEditMode: s, exitEditMode: d } = w({
+    mode: a,
+    defaultMode: F,
+    onModeChange: x,
+    shouldModeChange: p
+  }), n = `inline-field-${b()}`, c = `${n}__edit-view`, I = E(
+    () => ({
+      mode: i,
+      enterEditMode: s,
+      exitEditMode: d,
+      fieldId: n,
+      isLoading: o,
+      triggerRef: t,
+      editViewRef: e,
+      editViewId: c
+    }),
+    [
+      i,
+      s,
+      d,
+      n,
+      o,
+      t,
+      e,
+      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;
+    }
+    i === "edit" ? u() : t.current && t.current.focus();
+  }, [i, u]), /* @__PURE__ */ R(V.Provider, { value: I, children: m });
+};
+g.displayName = "InlineField";
+export {
+  g as InlineField
+};