@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/multi-select/TanstackMultiSelect.js

@@ -0,0 +1,41 @@
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as C } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as B } from "../form-field/TanstackFormField.context.js";
+import { MultiSelect as y } from "./MultiSelect.js";
+const S = (l, o) => {
+  const e = C(), t = B(), s = e.state.meta.isTouched && !e.state.meta.isValid, { onClearButtonPress: a, onFocus: i, isReadOnly: r, isDisabled: d, ...n } = l, u = (f) => {
+    e.handleChange(f);
+  }, c = () => {
+    e.handleBlur();
+  }, m = () => {
+    e.setValue(/* @__PURE__ */ new Set()), a && a();
+  };
+  return (
+    // @ts-expect-error - Typescript is not able to infer the type of the MultiSelect component
+    /* @__PURE__ */ h(
+      y,
+      {
+        ...n,
+        ref: o,
+        id: t.inputId || n.id,
+        value: e.state.value,
+        onChange: u,
+        onBlur: c,
+        onFocus: i,
+        onClearButtonPress: m,
+        isReadOnly: r,
+        isDisabled: d,
+        isInvalid: s,
+        "aria-labelledby": t.labelId
+      }
+    )
+  );
+}, b = p(
+  // @ts-expect-error - forwardRef struggles with generic components
+  S
+);
+b.displayName = "TanstackMultiSelect";
+export {
+  b as TanstackMultiSelect
+};

package/dist/esm/components/multi-select/parts/MultiSelectButton.d.ts

@@ -10,6 +10,8 @@ export interface MultiSelectButtonProps<TItem> {
     /** Function to render the selected items */
     renderValue: (values: Set<TItem>) => string;
     onClearButtonPress?: () => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
 }
 export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
     ref?: ForwardedRef<HTMLButtonElement>;

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { memo as j, forwardRef as E, useContext as k, useMemo as A } from "react";
-import { useSelectContext as D, useStoreState as K, Select as $ } from "@ariakit/react";
-import { uyTv as L } from "@payfit/unity-themes";
-import { useId as P } from "react-aria";
-import { useIntl as R } from "react-intl";
-import { Badge as T } from "../../badge/Badge.js";
-import { CircularIconButton as U } from "../../icon-button/CircularIconButton.js";
+import { memo as D, forwardRef as k, useContext as A, useMemo as K } from "react";
+import { useSelectContext as R, useStoreState as $, Select as L } from "@ariakit/react";
+import { uyTv as P } from "@payfit/unity-themes";
+import { useId as T } from "react-aria";
+import { useIntl as U } from "react-intl";
+import { Badge as W } from "../../badge/Badge.js";
+import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
 import { Icon as b } from "../../icon/Icon.js";
-import { Spinner as W } from "../../spinner/Spinner.js";
-import { MultiSelectContext as q } from "../Multiselect.context.js";
-const F = L({
+import { Spinner as F } from "../../spinner/Spinner.js";
+import { MultiSelectContext as G } from "../Multiselect.context.js";
+const H = P({
   slots: {
-    base: "uy:h-500 uy:flex uy:items-center uy:justify-between uy:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
-    inputValue: "uy:flex-1 uy:typography-body uy:text-content-form-enabled uy:text-left uy:line-clamp-1",
+    base: "uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
+    inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
     state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
     suffix: "uy:text-content-neutral-low"
   },
@@ -44,6 +44,9 @@ const F = L({
     isEmpty: {
       true: {
         inputValue: "uy:text-content-neutral-lowest"
+      },
+      false: {
+        inputValue: "uy:text-content-form-enabled"
       }
     }
   },
@@ -58,77 +61,90 @@ const F = L({
         state: "uy:text-content-neutral-disabled",
         suffix: "uy:border-border-form-enabled uy:text-content-form-enabled"
       }
+    },
+    {
+      isEmpty: !0,
+      isDisabled: !1,
+      isReadOnly: !1,
+      isInvalid: !1,
+      className: {
+        inputValue: "uy:text-content-neutral-lowest"
+      }
     }
   ]
 });
-function G({
-  isDisabled: r,
+function J({
+  isDisabled: n,
   isReadOnly: t,
   isLoading: c,
-  isInvalid: n,
-  placeholder: u,
+  isInvalid: r,
+  placeholder: s,
   selectedItems: x,
   renderValue: d,
   onClearButtonPress: g,
-  ...w
-}, h) {
-  const m = P(), s = R(), S = D(), C = K(S, "open"), f = k(q), a = f.maxVisibleItems ?? 0, l = f.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: v, state: I, suffix: B } = F({
-    isDisabled: !!r,
+  onBlur: w,
+  onFocus: h,
+  ...S
+}, v) {
+  const m = T(), u = U(), C = R(), I = $(C, "open"), f = A(G), a = f.maxVisibleItems ?? 0, l = f.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: V, state: B, suffix: N } = H({
+    isDisabled: !!n,
     isReadOnly: !!t,
-    isInvalid: !!n,
+    isInvalid: !!r,
     isEmpty: l.size === 0
   }), y = Math.max(
     o.length - a,
     0
-  ), V = l.size > 0 && !r && !t && !c, N = A(() => {
-    if (o.length === 0) return u;
-    const O = o.slice(0, a), z = new Set(O);
-    return d(z);
-  }, [o, a, d, u]);
+  ), O = l.size > 0 && !n && !t && !c, z = K(() => {
+    if (o.length === 0) return s;
+    const E = o.slice(0, a), j = new Set(E);
+    return d(j);
+  }, [o, a, d, s]);
   return /* @__PURE__ */ i(
-    $,
+    L,
     {
-      ...w,
-      ref: h,
+      ...S,
+      ref: v,
       className: M(),
-      disabled: r || t,
-      "aria-invalid": n,
+      disabled: n || t,
+      "aria-invalid": r,
       "aria-readonly": t,
       "aria-labelledby": `${m}-select-button-label`,
       "data-dd-privacy": "mask",
+      onBlur: w,
+      onFocus: h,
       children: [
-        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: v(), children: l.size > 0 ? N : u }),
-        /* @__PURE__ */ i("div", { className: I(), children: [
+        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: V(), children: l.size > 0 ? z : s }),
+        /* @__PURE__ */ i("div", { className: B(), children: [
           c && /* @__PURE__ */ e(
-            W,
+            F,
             {
               color: "inherit",
               size: "small",
-              label: s.formatMessage({
+              label: u.formatMessage({
                 id: "unity:component:form-field:form-input:spinner:label",
                 defaultMessage: "Loading"
               })
             }
           ),
-          n && /* @__PURE__ */ e(
+          r && /* @__PURE__ */ e(
             b,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: s.formatMessage({
+              alt: u.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
             }
           ),
-          y > 0 && /* @__PURE__ */ i(T, { variant: "numeric", children: [
+          y > 0 && /* @__PURE__ */ i(W, { variant: "numeric", children: [
             "+",
             y
           ] }),
-          V && /* @__PURE__ */ e(
-            U,
+          O && /* @__PURE__ */ e(
+            q,
             {
-              title: s.formatMessage({
+              title: u.formatMessage({
                 id: "unity:component:common:clear:title",
                 defaultMessage: "Clear"
               }),
@@ -144,8 +160,8 @@ function G({
           b,
           {
             color: "content.neutral.low",
-            className: B(),
-            src: C ? "CaretUpOutlined" : "CaretDownOutlined",
+            className: N(),
+            src: I ? "CaretUpOutlined" : "CaretDownOutlined",
             role: "presentation"
           }
         )
@@ -153,9 +169,9 @@ function G({
     }
   );
 }
-const p = j(E(G));
+const p = D(k(J));
 p.displayName = "MultiselectButton";
-const ne = p;
+const ue = p;
 export {
-  ne as MultiSelectButton
+  ue as MultiSelectButton
 };

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as o, Fragment as m } from "react/jsx-runtime";
+import { jsx as o, jsxs as e, Fragment as m } from "react/jsx-runtime";
 import { memo as b, useContext as f } from "react";
 import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
 import { uyTv as t } from "@payfit/unity-themes";
@@ -6,35 +6,35 @@ import { Icon as g } from "../../icon/Icon.js";
 import { MultiSelectContext as w } from "../Multiselect.context.js";
 const S = t({
   slots: {
-    base: "uy:shadow-floating uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
+    base: "uy:shadow-floating uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
     list: "uy:p-100"
   }
 }), N = t({
   slots: {
     wrapper: "uy:sticky uy:top-0 uy:bg-surface-neutral uy:pt-100 uy:px-100",
-    base: "uy:flex uy:w-full uy:gap-100 uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    base: "uy:flex uy:w-full uy:gap-100 uy:sm:h-500 uy:transition-colors uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:bg-surface-form-high-enabled uy:px-125 uy:sm:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border uy:active:border-solid uy:active:border-border-form-active",
     input: "uy:focus-visible:outline-none",
     divider: "uy:my-100 uy:border-t uy:border-border-neutral"
   }
 });
 function C({
   children: r,
-  ...l
+  ...s
 }) {
-  const i = f(w), { base: s, list: u } = S(), { base: n, input: a, wrapper: y, divider: c } = N(), { onBlur: d, ...p } = l;
-  return /* @__PURE__ */ e(
+  const i = f(w), { base: l, list: u } = S(), { base: n, input: a, wrapper: y, divider: c } = N(), { onBlur: d, ...p } = s;
+  return /* @__PURE__ */ o(
     h,
     {
       portal: !0,
       sameWidth: !0,
       unmountOnHide: !0,
-      className: s(),
+      className: l(),
       onClose: () => d?.(),
       ...p,
-      children: i.isSearchable ? /* @__PURE__ */ o(m, { children: [
-        /* @__PURE__ */ o("div", { className: y(), children: [
-          /* @__PURE__ */ o("div", { className: n(), children: [
-            /* @__PURE__ */ e(
+      children: i.isSearchable ? /* @__PURE__ */ e(m, { children: [
+        /* @__PURE__ */ e("div", { className: y(), children: [
+          /* @__PURE__ */ e("div", { className: n(), children: [
+            /* @__PURE__ */ o(
               g,
               {
                 src: "MagnifyingGlassOutlined",
@@ -42,7 +42,7 @@ function C({
                 "aria-hidden": !0
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ o(
               v,
               {
                 autoSelect: !0,
@@ -51,10 +51,10 @@ function C({
               }
             )
           ] }),
-          /* @__PURE__ */ e("hr", { className: c() })
+          /* @__PURE__ */ o("hr", { className: c() })
         ] }),
-        /* @__PURE__ */ e(x, { className: u(), children: r })
-      ] }) : /* @__PURE__ */ e("div", { className: u(), children: r })
+        /* @__PURE__ */ o(x, { className: u(), children: r })
+      ] }) : /* @__PURE__ */ o("div", { className: u(), children: r })
     }
   );
 }

package/dist/esm/components/multi-select-field/MultiSelectField.d.ts

@@ -3,8 +3,7 @@ import { ForwardedRef, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
 import { Schema } from '../../hooks/use-form.types.js';
 import { LabelProps } from '../label/Label.js';
-import { MultiSelectProps } from '../multi-select/Multiselect.types.js';
-type Key = string | number;
+import { MultiSelectProps } from '../multi-select/MultiselectTypes.js';
 interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
     /** The name of the field, which should match the form schema. */
     name: TName;
@@ -17,13 +16,14 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     /** A contextual link to display below the multi-select field. */
     contextualLink?: ReactNode;
 }
-type BaseMultiSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> = Omit<MultiSelectProps<TItem, TItemKey, TKeyType>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
-export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItem = unknown, TItemKey extends keyof TItem = keyof TItem, TKeyType extends TItem[TItemKey] & Key = TItem[TItemKey] & Key> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItem, TItemKey, TKeyType>;
+type BaseMultiSelectProps<TItems = undefined> = Omit<MultiSelectProps<TItems>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
+export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItems = undefined> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItems>;
 /**
  * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
- * @example
+ *
+ * The component uses a single generic parameter `TItems` that infers the item type from the `items` prop
+ * for the dynamic API, or defaults to `undefined` for the static API (using `children` directly).
+ * @example Static API
  * ```tsx
  * const schema = z.object({
  *   fruits: z.set(z.string()),
@@ -46,14 +46,47 @@ export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues
  *   )
  * }
  * ```
+ * @example Dynamic API
+ * ```tsx
+ * interface Fruit { id: string; name: string }
+ * const fruits = new Set<Fruit>([...])
+ *
+ * const schema = z.object({
+ *   fruits: z.set(z.string()),
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <MultiSelectField<typeof schema, Set<Fruit>>
+ *         name="fruits"
+ *         label="Select fruits"
+ *         items={fruits}
+ *         getItemValue={fruit => fruit.id}
+ *       >
+ *         {fruit => (
+ *           <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
+ *         )}
+ *       </MultiSelectField>
+ *     </Form>
+ *   )
+ * }
+ * ```
  * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
  * @remarks
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ * @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
+ */
+/**
+ * Component type for MultiSelectField with proper generic support
  */
-export declare const MultiSelectField: {
-    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<StandardSchemaV1.InferOutput<TSchema>, FieldPath<StandardSchemaV1.InferOutput<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
-        ref?: ForwardedRef<HTMLButtonElement>;
-    }): React.JSX.Element;
-    displayName?: string;
+type MultiSelectFieldComponent = <TSchema extends Schema = Schema, TItems = undefined>(props: MultiSelectFieldProps<StandardSchemaV1.InferOutput<TSchema>, FieldPath<StandardSchemaV1.InferOutput<TSchema>>, TItems> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+}) => React.JSX.Element;
+export declare const MultiSelectField: MultiSelectFieldComponent & {
+    displayName: string;
 };
 export {};

package/dist/esm/components/multi-select-field/MultiSelectField.js

@@ -1,82 +1,72 @@
-import { jsxs as C, jsx as t } from "react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { uyTv as M } from "@payfit/unity-themes";
-import { useFormContext as T } from "react-hook-form";
-import { FormField as k } from "../form-field/FormField.js";
-import { FormControl as g } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as B } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as L } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as R } from "../form-field/parts/FormLabel.js";
-import { MultiSelect as u } from "../multi-select/MultiSelect.js";
-const j = M({
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFormContext as P } from "react-hook-form";
+import { FormField as T } from "../form-field/FormField.js";
+import { FormControl as k } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as M } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as B } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as L } from "../form-field/parts/FormLabel.js";
+import { MultiSelect as R } from "../multi-select/MultiSelect.js";
+const g = I({
   base: "uy:flex uy:flex-col uy:gap-100"
 });
-function q(e, l) {
-  const { control: r, setValue: d } = T(), {
-    name: i,
-    label: f,
-    helperText: o,
-    feedbackText: x,
-    contextualLink: F,
-    isRequired: b,
-    isInvalid: h,
-    isLoading: n,
-    isDisabled: m,
-    isReadOnly: a,
-    requiredVariant: p,
-    children: s,
-    onClearButtonPress: S,
-    ...y
-  } = e, I = {
-    isRequired: b,
-    isInvalid: h,
-    isLoading: n,
-    isDisabled: m,
-    isReadOnly: a
-  }, V = "items" in e && "getItemValue" in e, c = {
+function j(e, a) {
+  const { control: m, setValue: s } = P(), {
+    name: l,
+    label: c,
+    helperText: t,
+    feedbackText: d,
+    contextualLink: u,
+    isRequired: f,
+    isInvalid: p,
+    isLoading: o,
+    isDisabled: i,
+    isReadOnly: n,
+    requiredVariant: x,
+    children: F,
+    onClearButtonPress: b,
+    ...h
+  } = e, S = {
+    isRequired: f,
+    isInvalid: p,
+    isLoading: o,
+    isDisabled: i,
+    isReadOnly: n
+  }, V = {
     onClearButtonPress: () => {
-      d(i, /* @__PURE__ */ new Set()), S?.();
+      s(l, /* @__PURE__ */ new Set()), b?.();
     },
     placeholder: e.placeholder,
     isSearchable: e.isSearchable,
     maxVisibleItems: e.maxVisibleItems,
-    isDisabled: m,
-    isReadOnly: a,
-    isLoading: n,
-    renderValue: e.renderValue
+    isDisabled: i,
+    isReadOnly: n,
+    isLoading: o,
+    ...e.renderValue && { renderValue: e.renderValue }
   };
-  return /* @__PURE__ */ C(
-    k,
+  return /* @__PURE__ */ y(
+    T,
     {
-      control: r,
-      name: i,
-      className: j(),
-      ...I,
+      control: m,
+      name: l,
+      className: g(),
+      ...S,
       children: [
-        /* @__PURE__ */ t(R, { requiredVariant: p, children: f }),
-        o && /* @__PURE__ */ t(L, { children: o }),
-        /* @__PURE__ */ t(g, { children: V ? (
-          // @ts-expect-error - Type system cannot fully express this but it works correctly at runtime
-          /* @__PURE__ */ t(
-            u,
-            {
-              ...y,
-              ...c,
-              ref: l,
-              children: s
-            }
-          )
-        ) : /* @__PURE__ */ t(u, { ...c, ref: l, children: s }) }),
-        /* @__PURE__ */ t(B, { children: x }),
-        F
+        /* @__PURE__ */ r(L, { requiredVariant: x, children: c }),
+        t && /* @__PURE__ */ r(B, { children: t }),
+        /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(R, { ...h, ...V, ref: a, children: F }) }),
+        /* @__PURE__ */ r(M, { children: d }),
+        u
       ]
     }
   );
 }
-const v = P(function(l, r) {
-  return q(l, r);
-});
-v.displayName = "MultiSelectField";
+const q = (
+  // @ts-expect-error - forwardRef struggles with generic components
+  C(j)
+);
+q.displayName = "MultiSelectField";
 export {
-  v as MultiSelectField
+  q as MultiSelectField
 };

package/dist/esm/components/multi-select-field/TanstackMultiSelectField.d.ts

@@ -0,0 +1,92 @@
+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 {};