@payfit/unity-components/dist/esm/components/multi-select-field/TanstackMultiSelectField.d.ts

import { ForwardedRef, ReactNode } from 'react';
import { LabelProps } from '../label/Label.js';
import { TanstackMultiSelectProps } from '../multi-select/TanstackMultiSelect.js';
export type TanstackMultiSelectFieldProps<TItems = undefined> = TanstackMultiSelectProps<TItems> & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
    /** The label for the multi-select field. */
    label: string;
    /** Helper text to display below the multi-select field. */
    helperText?: ReactNode;
    /** A contextual link to display below the multi-select field. */
    contextualLink?: ReactNode;
};
type TanstackMultiSelectFieldComponent = <TItems = undefined>(props: TanstackMultiSelectFieldProps<TItems> & {
    ref?: ForwardedRef<HTMLButtonElement>;
}) => React.JSX.Element;
/**
 * The `TanstackMultiSelectField` component renders a full field (label, multi-select, feedback)
 * wired to the TanStack Form context. It manages state and accessibility via the
 * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
  @example
 * ```tsx
 * import { TanstackMultiSelectField } from "@/components/multi-select-field/TanstackMultiSelectField"
 * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
 * import { MultiSelectOption } from "@/components/multi-select/parts/MultiSelectOption"
 *
 * function Example() {
 *  const schema = z.object({
 *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
 *  })
 *
 *   const form = useTanstackUnityForm({ validators: {
 *     onBlur: schema,
 *   } })
 *   return (
 *     <form>
 *       <form.AppField name="fruits">
 *         {() => (
 *           <TanstackMultiSelectField
 *             label="Favorite Fruits"
 *             helperText="Choose your favorites"
 *             placeholder="Select fruits..."
 *           >
 *             <MultiSelectOption value="apple">Apple</MultiSelectOption>
 *             <MultiSelectOption value="banana">Banana</MultiSelectOption>
 *             <MultiSelectOption value="orange">Orange</MultiSelectOption>
 *           </TanstackMultiSelectField>
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * interface Fruit { id: string; name: string }
 * const fruits = new Set<Fruit>([...])
 *
 * function Example() {
 *  const schema = z.object({
 *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
 *  })
 *
 *   const form = useTanstackUnityForm({ validators: {
 *     onBlur: schema,
 *   } })
 *   return (
 *     <form>
 *       <form.AppField name="fruits">
 *         {() => (
 *           <TanstackMultiSelectField
 *             label="Favorite Fruits"
 *             items={fruits}
 *             getItemValue={fruit => fruit.id}
 *             renderValue={items => Array.from(items).map(i => i.name).join(', ')}
 *           >
 *             {fruit => (
 *               <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
 *             )}
 *           </TanstackMultiSelectField>
 *         )}
 *       </form.AppField>
 *     </form>
 *   )
 * }
 * ```
 * @remarks Migration from `MultiSelectField` (non‑TanStack):
 * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
 * - `value`, `defaultValue`, `onChange`, and `isInvalid` are derived from the TanStack form context.
 */
export declare const TanstackMultiSelectField: TanstackMultiSelectFieldComponent & {
    displayName: string;
};
export {};