@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/flex/FlexItem.js

@@ -0,0 +1,32 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { flexItem as I } from "./Flex.variants.js";
+const e = x(
+  ({
+    asElement: t = "div",
+    children: m,
+    className: o,
+    grow: r,
+    shrink: s,
+    basis: a,
+    order: l,
+    self: f,
+    ...c
+  }, i) => {
+    const n = I({
+      grow: r,
+      shrink: s,
+      basis: a,
+      order: l,
+      self: f,
+      className: o
+    });
+    return /* @__PURE__ */ p(t, { ref: i, className: n, ...c, children: m });
+  }
+);
+e.displayName = "FlexItem";
+const N = e;
+export {
+  e as FlexItem,
+  N as StackItem
+};

package/dist/esm/components/floating-action-bar/FloatingActionBar.d.ts

@@ -0,0 +1,87 @@
+import { ReactElement, RefObject } from 'react';
+export declare const floatingActionBar: import('tailwind-variants').TVReturnType<{
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface FloatingActionBarProps {
+    /**
+     * Accessible label for the toolbar.
+     * @default "Page actions"
+     */
+    'aria-label'?: string;
+    /**
+     * 1 to 3 action buttons. Exceeding 3 is a type error and triggers a
+     * runtime warning in development.
+     */
+    children: ReactElement | [ReactElement, ReactElement] | [ReactElement, ReactElement, ReactElement];
+    /**
+     * Optional explicit scroll container ref. If omitted, the component
+     * auto-detects the nearest scrollable ancestor.
+     */
+    scrollContainerRef?: RefObject<Element | null>;
+}
+/**
+ * `FloatingActionBar` renders a fixed-bottom action bar on mobile viewports (`xs` and `sm`).
+ * On `md` and larger breakpoints the component renders `null`.
+ * The bar hides when the user scrolls down and reappears when they scroll up.
+ * It always snaps back into view when the user reaches the bottom of the page,
+ * ensuring actions are accessible regardless of scroll position.
+ * When placed inside a `Page` component, the page automatically adds bottom padding
+ * via `:has([data-unity-fab])` so content is never hidden behind the bar.
+ * When `prefers-reduced-motion: reduce` is active, the bar stays always visible and
+ * no CSS transitions are applied.
+ * @param props.aria-label - Accessible label for the toolbar. Announced by screen readers
+ *   when the FAB receives focus. Defaults to `"Page actions"`.
+ * @param props.children - 1 to 3 `Button` components rendered full-width and stacked
+ *   vertically. Passing more than 3 is a TypeScript type error.
+ * @param props.scrollContainerRef - Optional explicit scroll container ref. If omitted,
+ *   the component auto-detects the nearest scrollable ancestor.
+ * @example
+ * ```tsx
+ * // Single primary action
+ * <FloatingActionBar aria-label="Page actions">
+ *   <Button variant="primary" size="full">Request leave</Button>
+ * </FloatingActionBar>
+ *
+ * // Two stacked actions
+ * <FloatingActionBar aria-label="Page actions">
+ *   <Button variant="primary" size="full">Save changes</Button>
+ *   <Button variant="secondary" size="full">Cancel</Button>
+ * </FloatingActionBar>
+ * ```
+ * @remarks
+ * - Always provide an `aria-label` that describes the toolbar's purpose to screen reader users.
+ * - Buttons passed as children should use `size="full"` to fill the available width.
+ * - Place the component as the last child of a `Page` to get automatic bottom-padding.
+ * - For a custom scroll container (e.g. a modal body), pass a `scrollContainerRef` to
+ *   opt out of ancestor auto-detection.
+ * @see {@link FloatingActionBarProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/floating-action-bar GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-floatingactionbar--docs unity-components.payfit.io}
+ */
+declare const FloatingActionBar: import('react').ForwardRefExoticComponent<FloatingActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FloatingActionBar };

package/dist/esm/components/floating-action-bar/FloatingActionBar.js

@@ -0,0 +1,68 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as g, useState as v, useCallback as r } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { Toolbar as B } from "react-aria-components/Toolbar";
+import { useBreakpointListener as k, isDesktopBreakpoint as F } from "../../hooks/use-breakpoint-listener.js";
+import { useMediaQuery as M } from "../../hooks/use-media-query.js";
+import { useScrollDirection as h } from "../../hooks/use-scroll-direction.js";
+const R = x({
+  base: [
+    "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-20",
+    "uy:flex uy:flex-col uy:gap-125",
+    "uy:px-200 uy:pt-300",
+    // Safe-area bottom padding — at least spacing-100
+    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-100))]",
+    // Gradient: transparent at top → surface-neutral at 14% → solid for the rest
+    "uy:bg-linear-to-b uy:from-surface-neutral/0 uy:from-0% uy:via-surface-neutral uy:via-9% uy:to-surface-neutral uy:to-100%"
+  ],
+  variants: {
+    isHidden: {
+      true: "uy:translate-y-full uy:focus-within:translate-0",
+      false: "uy:translate-y-0"
+    },
+    reduceMotion: {
+      true: "",
+      false: "uy:transition-transform uy:duration-300 uy:ease-in-out"
+    }
+  },
+  defaultVariants: {
+    isHidden: !1,
+    reduceMotion: !1
+  }
+}), w = g(
+  ({ children: n, "aria-label": s = "Page actions", scrollContainerRef: l }, e) => {
+    const c = k(), a = M(
+      "(prefers-reduced-motion: reduce)"
+    ), [i, f] = h(l), [y, u] = v(!1), t = !a && !y && f === "down", d = r(() => {
+      t && u(!0);
+    }, [t]), m = r(() => {
+      u(!1);
+    }, []), p = r(
+      (o) => {
+        i.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
+      },
+      [i, e]
+    );
+    return F(c) ? null : /* @__PURE__ */ b(
+      B,
+      {
+        ref: p,
+        "data-unity-fab": !0,
+        "aria-label": s,
+        orientation: "vertical",
+        className: R({
+          isHidden: t,
+          reduceMotion: a
+        }),
+        onFocus: d,
+        onBlur: m,
+        children: n
+      }
+    );
+  }
+);
+w.displayName = "FloatingActionBar";
+export {
+  w as FloatingActionBar,
+  R as floatingActionBar
+};

package/dist/esm/components/floating-action-bar/figma/FloatingActionBar.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/form/Form.context.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { Schema } from '../../hooks/use-form.types.js';
+interface UnityFormContextValue<TSchema extends Schema> {
+    schema: TSchema;
+}
+export declare const UnityFormContext: import('react').Context<UnityFormContextValue<Schema> | null>;
+export declare function UnityFormProvider<TSchema extends Schema>({ children, schema, }: PropsWithChildren<UnityFormContextValue<TSchema>>): import("react/jsx-runtime").JSX.Element;
+export declare function useUnityFormProvider<TSchema extends Schema>(): UnityFormContextValue<TSchema>;
+export {};

package/dist/esm/components/form/Form.context.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as n, createContext as i } from "react";
+const o = i(null);
+function s({
+  children: t,
+  schema: r
+}) {
+  return /* @__PURE__ */ e(
+    o.Provider,
+    {
+      value: {
+        schema: r
+      },
+      children: t
+    }
+  );
+}
+function c() {
+  const t = n(o);
+  if (!t)
+    throw new Error("useFormContext must be used within a Form component");
+  return t;
+}
+export {
+  o as UnityFormContext,
+  s as UnityFormProvider,
+  c as useUnityFormProvider
+};

package/dist/esm/components/form/Form.d.ts

@@ -0,0 +1,43 @@
+import { default as React, PropsWithChildren, Ref } from 'react';
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { FormProps as AriaFormProps } from 'react-aria-components/Form';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
+import { Schema, TFormValues } from '../../hooks/use-form.types.js';
+type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
+export interface FormProps<TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
+    /** The form instance from react-hook-form */
+    form: UseFormReturn<TFormInputValues, any, TFormOutputs>;
+    /** The schema to validate the form data */
+    schema: TSchema;
+    /** The operations to execute when the form is submitted and the input data is valid */
+    action: (values: TFormOutputs) => Promise<TActionResult> | TActionResult;
+    /** Handle successful form submission (when the `action` callback resolves its promise or does not throw an error) */
+    onSuccess?: (result: TActionResult, data: TFormOutputs) => void;
+    /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
+    onError?: (error: unknown, data: TFormOutputs) => void;
+    /** Handle form validation errors (when form data is invalid) */
+    onInvalid?: (errors: FieldErrors<TFormInputValues>) => void;
+    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
+    debug?: boolean;
+}
+type FormComponent = {
+    <TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown>(props: FormProps<TSchema, TFormInputValues, TFormOutputs, TActionResult> & {
+        ref?: Ref<HTMLFormElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+/**
+ * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
+ *
+ * Use this component to create complex forms with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
+ *
+ * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
+ *
+ * ```bash
+ * $ yarn add zod react-hook-form
+ * ```
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+declare const Form: FormComponent;
+export { Form };

package/dist/esm/components/form/Form.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as v, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as F, Suspense as b, lazy as S } from "react";
+import { FormProvider as x } from "react-hook-form";
+import { UnityFormProvider as P } from "./Form.context.js";
+const j = S(
+  () => import("@hookform/devtools").then((o) => ({ default: o.DevTool }))
+), D = ({
+  form: o,
+  schema: t,
+  onSuccess: m,
+  onError: i,
+  onInvalid: l,
+  action: c,
+  children: s,
+  className: a,
+  onReset: d,
+  debug: f = !1,
+  ...p
+}, u) => {
+  const h = o.handleSubmit(
+    (r) => {
+      Promise.resolve().then(() => c(r)).then((n) => {
+        m?.(n, r);
+      }).catch((n) => {
+        i?.(n, r);
+      });
+    },
+    (r) => {
+      l?.(r);
+    }
+  );
+  return /* @__PURE__ */ e(P, { schema: t, children: /* @__PURE__ */ v(x, { ...o, children: [
+    f && /* @__PURE__ */ e(b, { fallback: /* @__PURE__ */ e(y, {}), children: /* @__PURE__ */ e(j, { control: o.control }) }),
+    /* @__PURE__ */ e(
+      "form",
+      {
+        ...p,
+        ref: u,
+        onSubmit: (r) => {
+          h(r);
+        },
+        className: a,
+        onReset: d,
+        "data-dd-privacy": "mask",
+        children: s
+      }
+    )
+  ] }) });
+}, T = F(function(t, m) {
+  return D(
+    t,
+    m
+  );
+});
+T.displayName = "Form";
+export {
+  T as Form
+};

package/dist/esm/components/form/TanstackForm.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `TanstackForm` is a form wrapper bound to the TanStack form context.
+ * It prevents the default browser submission, delegates to the TanStack form
+ * `handleSubmit`, and then invokes the provided `onSubmit` (if any).
+ *
+ * Behavior:
+ * - `onSubmit` handler: prevents default, calls `form.handleSubmit(event)`, then
+ *   forwards the event to the user-provided `onSubmit`.
+ * - Exposes a standard `<form>` element API via `ComponentProps<'form'>`.
+ *
+ * Usage:
+ * ```tsx
+ * function Example() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <TanstackForm>
+ *       <form.AppField name="name">{() => <TanstackInput />}</form.AppField>
+ *     </TanstackForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackForm: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
+export { TanstackForm };

package/dist/esm/components/form/TanstackForm.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { useFormContext as f } from "../../hooks/tanstack-form-context.js";
+const u = c({
+  base: []
+}), d = p(
+  ({ children: t, onSubmit: r, className: a, ...m }, s) => {
+    const i = f();
+    return /* @__PURE__ */ n(
+      "form",
+      {
+        "data-dd-privacy": "mask",
+        onSubmit: (o) => {
+          o.preventDefault(), o.stopPropagation(), i.handleSubmit(o), r?.(o);
+        },
+        ...m,
+        ref: s,
+        noValidate: !0,
+        className: u({ className: a }),
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "TanstackForm";
+export {
+  d as TanstackForm
+};

package/dist/esm/components/form-field/FormField.context.d.ts

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
+    name: TName;
+    isRequired?: boolean;
+    isLoading?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    hasHelperText?: boolean;
+    hasContextualLink?: boolean;
+}
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
+export declare function FormFieldProvider({ children, id, name, isRequired, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useFormField(): {
+    fieldState: {
+        isRequired: boolean | undefined;
+        isLoading: boolean | undefined;
+        isReadOnly: boolean | undefined;
+        isDisabled: boolean | undefined;
+    };
+    formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
+    id: string;
+    name: string;
+    hasHelperText: boolean | undefined;
+    hasContextualLink: boolean | undefined;
+    formLabelId: string;
+    formItemId: string;
+    formDescriptionId: string | undefined;
+    formMessageId: string;
+    formContextualLinkId: string | undefined;
+};
+export {};

package/dist/esm/components/form-field/FormField.context.js

@@ -0,0 +1,73 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as l, useContext as u } from "react";
+import { useFormState as c } from "react-hook-form";
+const s = l({
+  id: "",
+  name: ""
+});
+function C({
+  children: o,
+  id: i,
+  name: e,
+  isRequired: n,
+  isLoading: d,
+  isReadOnly: m,
+  isDisabled: f,
+  hasHelperText: r,
+  hasContextualLink: t
+}) {
+  return /* @__PURE__ */ a(
+    s.Provider,
+    {
+      value: {
+        id: i,
+        name: e,
+        isRequired: n,
+        isLoading: d,
+        isReadOnly: m,
+        isDisabled: f,
+        hasHelperText: r,
+        hasContextualLink: t
+      },
+      children: o
+    }
+  );
+}
+function b() {
+  const o = u(s), i = c({ name: o.name }), {
+    id: e,
+    isRequired: n,
+    isLoading: d,
+    isReadOnly: m,
+    isDisabled: f,
+    hasHelperText: r,
+    hasContextualLink: t
+  } = o;
+  if (!o)
+    throw new Error("useFormField should be used within <FormField> component");
+  return {
+    ...{
+      id: e,
+      name: o.name,
+      hasHelperText: r,
+      hasContextualLink: t,
+      formLabelId: `${e}-form-field-label`,
+      formItemId: `${e}-form-item`,
+      formDescriptionId: r ? `${e}-form-field-description` : void 0,
+      formMessageId: `${e}-form-field-feedback-text`,
+      formContextualLinkId: t ? `${e}-form-field-contextual-link` : void 0
+    },
+    fieldState: {
+      isRequired: n,
+      isLoading: d,
+      isReadOnly: m,
+      isDisabled: f
+    },
+    formState: i
+  };
+}
+export {
+  s as FormFieldContext,
+  C as FormFieldProvider,
+  b as useFormField
+};

package/dist/esm/components/form-field/FormField.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
+    /** The form control from react-hook-form */
+    control: Control<TFieldValues>;
+    /** The name of the field in the form */
+    name: TName;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
+ * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
+ * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
+ * @see {@link FormFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const { Form, FormField } = useUnityForm(loginSchema)
+ *
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <Form action={submitForm}>
+ *       <FormField name="email">
+ *         <FormLabel>Email</FormLabel>
+ *         <FormHelperText>Enter your primary email address</FormHelperText>
+ *         <FormControl>
+ *          <Input type="email"/>
+ *         </FormControl>
+ *         <FormFeedbackText/>
+ *       </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
+export { FormField };

package/dist/esm/components/form-field/FormField.js

@@ -0,0 +1,56 @@
+import { jsx as p } from "react/jsx-runtime";
+import n, { forwardRef as H, useMemo as d } from "react";
+import { uyTv as L } from "@payfit/unity-themes";
+import { useController as S } from "react-hook-form";
+import P from "../../hooks/use-id.js";
+import { createSchemaAdapter as g } from "../../utils/createSchemaAdapter.js";
+import { useUnityFormProvider as j } from "../form/Form.context.js";
+import { FormFieldProvider as w } from "./FormField.context.js";
+import { FormHelperText as D } from "./parts/FormHelperText.js";
+import { RawFormContextualLink as E } from "./parts/RawFormContextualLink.js";
+import { isFieldRequired as I } from "./utils/isFieldRequired.js";
+const N = L({
+  slots: {
+    base: "uy:flex uy:flex-col uy:gap-100"
+  }
+}), _ = H(
+  ({
+    children: o,
+    control: f,
+    name: r,
+    isLoading: u,
+    isReadOnly: c,
+    className: x,
+    isRequired: F,
+    isDisabled: h
+  }, y) => {
+    const b = P(), { schema: t } = j(), { formState: i } = S({ name: r, control: f }), C = d(
+      () => I(g(t), r),
+      [t, r]
+    ), { hasHelperText: R, hasContextualLink: T } = d(() => {
+      let s = !1, m = !1;
+      const l = (v) => {
+        n.Children.forEach(v, (a) => {
+          if (!n.isValidElement(a)) return;
+          const e = a;
+          e.type === D ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
+        });
+      };
+      return l(o), { hasHelperText: s, hasContextualLink: m };
+    }, [o]), k = {
+      name: r,
+      isLoading: u,
+      isReadOnly: c,
+      hasHelperText: R,
+      hasContextualLink: T,
+      id: b,
+      isRequired: F ?? C,
+      isDisabled: h ?? (i.isSubmitting || i.disabled)
+    }, { base: q } = N();
+    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(w, { ...k, children: o }) });
+  }
+);
+_.displayName = "FormField";
+export {
+  _ as FormField
+};

package/dist/esm/components/form-field/TanstackFormField.context.d.ts

@@ -0,0 +1,10 @@
+export type FieldA11yContextValue = {
+    fieldGroupId: string;
+    labelId: string;
+    inputId: string;
+    feedbackTextId: string;
+    helperTextId?: string;
+    contextualLinkId?: string;
+};
+export declare const FieldA11yContext: import('react').Context<FieldA11yContextValue>;
+export declare function useFieldA11yContext(): FieldA11yContextValue;

package/dist/esm/components/form-field/TanstackFormField.context.js

@@ -0,0 +1,14 @@
+import { useContext as e, createContext as t } from "react";
+const o = t({
+  fieldGroupId: "",
+  labelId: "",
+  inputId: "",
+  feedbackTextId: ""
+});
+function d() {
+  return e(o);
+}
+export {
+  o as FieldA11yContext,
+  d as useFieldA11yContext
+};