@payfit/unity-components/dist/esm/components/checkbox-group-field/TanstackCheckGroupField.d.ts

import { ReactNode } from 'react';
import { TanstackCheckboxGroupProps } from '../checkbox-group/TanstackCheckboxGroup.js';
import { LabelProps } from '../label/Label.js';
export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
    /** Helper text to display below the group. */
    helperText?: ReactNode;
    /** A contextual link to display below the group. */
    contextualLink?: ReactNode;
}
export type TanstackCheckGroupFieldProps = FieldProps & TanstackCheckboxGroupProps;
/**
 * `TanstackCheckGroupField` is a composite field for TanStack Form that renders a
 * complete checkbox group (label, helper/error, group) and automatically connects to
 * the field context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
 *
 * Behavior:
 * - Group rendering: relies on `TanstackCheckboxGroup` to manage the value (array of
 *   strings), focus, and events.
 * - Messaging: renders helper text (`TanstackFormHelperText` via the `helperText` prop)
 *   and error feedback (`TanstackFormFeedbackText`) according to the TanStack form state.
 * - Contextual link: allows displaying an additional link below the field via the
 *   `contextualLink` prop.
 *
 * Accessibility:
 * - ARIA attributes (`aria-labelledby`, `aria-describedby`, `aria-details`) are wired by
 *   `TanstackFormField` and its sub-parts to associate the label, helper, and feedback
 *   with the control.
 *
 * Key props:
 * - `label: string` — group label text.
 * - `helperText?: ReactNode` — helper text displayed above the feedback.
 * - `contextualLink?: ReactNode` — contextual link (referenced via `aria-details`).
 * - Inherits the props from `TanstackCheckboxGroup` (except direct value management).
 * - `isRequired?`, `requiredVariant?` — control how the required/optional indicator is displayed.
 *
 * Example:
 * ```tsx
 * import { TanstackCheckGroupField } from '@/components/checkbox-group-field/TanstackCheckGroupField'
 * import { Checkbox } from '@/components/checkbox/Checkbox'
 * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form'
 * import * as z from 'zod'
 *
 * const schema = z.object({
 *   preferences: z.array(z.enum(['email','sms','push'])).min(1),
 * })
 *
 * function Example() {
 *   const form = useTanstackUnityForm({ validators: { onBlur: schema } })
 *   return (
 *     <form.AppForm>
 *       <form.Form>
 *         <form.AppField name="preferences">
 *           {() => (
 *             <TanstackCheckGroupField label="Preferences" helperText="Choose at least one option">
 *               <Checkbox value="email">Email</Checkbox>
 *               <Checkbox value="sms">SMS</Checkbox>
 *               <Checkbox value="push">Push</Checkbox>
 *             </TanstackCheckGroupField>
 *           )}
 *         </form.AppField>
 *       </form.Form>
 *     </form.AppForm>
 *   )
 * }
 * ```
 *
 * Migration notes from a non‑TanStack field:
 * - Do not pass a `name` prop to the component — use `<form.AppField name="…">`.
 * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack context.
 */
declare const TanstackCheckGroupField: import('react').ForwardRefExoticComponent<FieldProps & TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
export { TanstackCheckGroupField };