@eifi1/ui-kit 0.35.0 → 0.36.0

package/dist/notifications/use-push-device.js

@@ -0,0 +1,230 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { httpStatusOf } from "../auth/auth-errors.js";
+class PushDeviceError extends Error {
+  code;
+  constructor(code) {
+    super(code);
+    this.name = "PushDeviceError";
+    this.code = code;
+  }
+}
+const PUSH_SUBSCRIPTION_CHANGED = "eifi1:push-subscription-changed";
+function notifyPushSubscriptionChanged() {
+  if (typeof window !== "undefined") window.dispatchEvent(new Event(PUSH_SUBSCRIPTION_CHANGED));
+}
+function pushSupported() {
+  return typeof window !== "undefined" && typeof navigator !== "undefined" && "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
+}
+function isIos() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent;
+  return /iphone|ipad|ipod/i.test(ua) || /Macintosh/.test(ua) && navigator.maxTouchPoints > 1;
+}
+const READY_TIMEOUT_MS = 1e4;
+const PUSH_TIMEOUT_MS = 15e3;
+function within(promise, ms, code) {
+  let timer;
+  return Promise.race([
+    promise,
+    new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new PushDeviceError(code)), ms);
+    })
+  ]).finally(() => clearTimeout(timer));
+}
+async function activeRegistration() {
+  const existing = await navigator.serviceWorker.getRegistration();
+  if (!existing) throw new PushDeviceError("no_service_worker");
+  return within(navigator.serviceWorker.ready, READY_TIMEOUT_MS, "no_service_worker");
+}
+function keyBytes(key) {
+  const base64 = key.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - key.length % 4) % 4);
+  const raw = atob(base64);
+  const bytes = new Uint8Array(new ArrayBuffer(raw.length));
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes;
+}
+function inputOf(subscription) {
+  const json = subscription.toJSON();
+  const p256dh = json.keys?.p256dh;
+  const auth = json.keys?.auth;
+  if (!json.endpoint || !p256dh || !auth) return null;
+  return { endpoint: json.endpoint, keys: { p256dh, auth }, user_agent: navigator.userAgent || null };
+}
+const defaultEndpointTaken = (error) => httpStatusOf(error) === 409;
+function usePushDevice(options) {
+  const latest = useRef(options);
+  useEffect(() => {
+    latest.current = options;
+  });
+  const supported = pushSupported();
+  const ios = isIos();
+  const standalone = useMediaQuery("(display-mode: standalone)", false);
+  const installed = standalone || typeof navigator !== "undefined" && navigator.standalone === true;
+  const [permission, setPermission] = useState(
+    () => supported ? Notification.permission : "unsupported"
+  );
+  const [configured, setConfigured] = useState(void 0);
+  const [subscribed, setSubscribed] = useState(false);
+  const [foreignSubscription, setForeignSubscription] = useState(false);
+  const [currentEndpoint, setCurrentEndpoint] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const mounted = useRef(true);
+  const announcing = useRef(false);
+  const announce = useCallback(() => {
+    announcing.current = true;
+    try {
+      notifyPushSubscriptionChanged();
+    } finally {
+      announcing.current = false;
+    }
+    latest.current.onChange?.();
+  }, []);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!supported) return;
+    let cancelled = false;
+    latest.current.pushKey().then(
+      (key) => {
+        if (!cancelled) setConfigured(key !== "");
+      },
+      () => {
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [supported]);
+  useEffect(() => {
+    if (!supported) return;
+    let cancelled = false;
+    const sync = async () => {
+      try {
+        const registration = await activeRegistration();
+        const existing = await registration.pushManager.getSubscription();
+        if (cancelled) return;
+        setPermission(Notification.permission);
+        if (!existing) {
+          setSubscribed(false);
+          setForeignSubscription(false);
+          setCurrentEndpoint(null);
+          return;
+        }
+        let mine;
+        try {
+          const devices = await latest.current.devices();
+          mine = devices.some((device) => device.endpoint === existing.endpoint);
+        } catch {
+          mine = true;
+        }
+        if (cancelled) return;
+        setCurrentEndpoint(existing.endpoint);
+        setSubscribed(mine);
+        setForeignSubscription(!mine);
+      } catch {
+      }
+    };
+    const heard = () => {
+      if (!announcing.current) void sync();
+    };
+    void sync();
+    window.addEventListener(PUSH_SUBSCRIPTION_CHANGED, heard);
+    return () => {
+      cancelled = true;
+      window.removeEventListener(PUSH_SUBSCRIPTION_CHANGED, heard);
+    };
+  }, [supported]);
+  const enable = useCallback(async () => {
+    if (!supported) return false;
+    const { pushKey, register, isEndpointTaken = defaultEndpointTaken } = latest.current;
+    setBusy(true);
+    try {
+      const granted = await Notification.requestPermission();
+      if (mounted.current) setPermission(granted);
+      if (granted !== "granted") return false;
+      const key = await pushKey();
+      if (!key) {
+        if (mounted.current) setConfigured(false);
+        return false;
+      }
+      if (mounted.current) setConfigured(true);
+      const registration = await activeRegistration();
+      const subscribe = (reuse) => within(
+        (async () => (reuse ? await registration.pushManager.getSubscription() : null) ?? await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) }))(),
+        PUSH_TIMEOUT_MS,
+        "push_timeout"
+      );
+      let subscription = await subscribe(true);
+      let input = inputOf(subscription);
+      if (!input) return false;
+      try {
+        await register(input);
+      } catch (error) {
+        if (!isEndpointTaken(error)) throw error;
+        await within(subscription.unsubscribe(), PUSH_TIMEOUT_MS, "push_timeout");
+        subscription = await subscribe(false);
+        input = inputOf(subscription);
+        if (!input) return false;
+        await register(input);
+      }
+      if (mounted.current) {
+        setSubscribed(true);
+        setForeignSubscription(false);
+        setCurrentEndpoint(input.endpoint);
+      }
+      announce();
+      return true;
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [supported, announce]);
+  const disable = useCallback(async () => {
+    if (!supported) return;
+    setBusy(true);
+    try {
+      const registration = await activeRegistration();
+      const subscription = await registration.pushManager.getSubscription();
+      if (subscription) {
+        await latest.current.unregister(subscription.endpoint);
+        await within(subscription.unsubscribe(), PUSH_TIMEOUT_MS, "push_timeout");
+      }
+      if (mounted.current) {
+        setSubscribed(false);
+        setForeignSubscription(false);
+        setCurrentEndpoint(null);
+      }
+      announce();
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [supported, announce]);
+  const sendTest = useCallback(() => latest.current.test(), []);
+  return {
+    supported,
+    configured,
+    installed,
+    ios,
+    permission,
+    subscribed,
+    foreignSubscription,
+    currentEndpoint,
+    busy,
+    enable,
+    disable,
+    sendTest
+  };
+}
+export {
+  PUSH_SUBSCRIPTION_CHANGED,
+  PushDeviceError,
+  notifyPushSubscriptionChanged,
+  pushSupported,
+  usePushDevice
+};
+//# sourceMappingURL=use-push-device.js.map

package/dist/notifications/use-push-device.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/notifications/use-push-device.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { httpStatusOf } from \"../auth/auth-errors\";\n\n/**\n * This browser's Web Push subscription for the signed-in account\n * (docs/notifications-harmonization.md §2.7, §3.5, §4.2) — keksdose's\n * `shared/push/use-push.ts`, lifted. The service worker with its `push` and\n * `notificationclick` handlers stays the app's; this hook owns the browser's side:\n * permission, subscribe with the server's VAPID key, register the subscription, and\n * unsubscribe. The kit makes no request of its own: the app hands it one function per\n * endpoint.\n */\n\n/** The browser's notification permission, or `\"unsupported\"` where it has no push. */\nexport type PushPermission = NotificationPermission | \"unsupported\";\n\n/** Why turning push on or off could not finish — a {@link PushDeviceError}'s `code`. */\nexport type PushDeviceErrorCode = \"no_service_worker\" | \"push_timeout\";\n\n/**\n * The two failures the card has words of its own for: no service worker registered (or\n * one not ready in 10 s) — \"reload and try again\" — and a browser push service that did\n * not answer in 15 s — \"check your connection\". Anything else is the app's request\n * failing, rejected as it came.\n */\nexport class PushDeviceError extends Error {\n  readonly code: PushDeviceErrorCode;\n  constructor(code: PushDeviceErrorCode) {\n    super(code);\n    this.name = \"PushDeviceError\";\n    this.code = code;\n  }\n}\n\n/** What `register` sends: `POST /notifications/devices` (§3.5). */\nexport interface PushSubscriptionInput {\n  endpoint: string;\n  keys: { p256dh: string; auth: string };\n  user_agent: string | null;\n}\n\nexport interface UsePushDeviceOptions {\n  /** `GET /notifications/push-key` → its `key`; `\"\"` when push is off on the server. */\n  pushKey: () => Promise<string>;\n  /** `POST /notifications/devices`. A 409 (another account's endpoint) is recovered\n   *  once: the hook unsubscribes and registers a fresh endpoint. */\n  register: (subscription: PushSubscriptionInput) => Promise<unknown>;\n  /** `POST /notifications/devices/unregister {endpoint}` — the endpoint never goes in a\n   *  URL. */\n  unregister: (endpoint: string) => Promise<unknown>;\n  /** `GET /notifications/devices`: the account's own list, which says whether THIS\n   *  account holds this browser's subscription. */\n  devices: () => Promise<readonly { endpoint: string }[]>;\n  /** `POST /notifications/test` → how many devices the push service accepted it for. */\n  test: () => Promise<{ sent: number }>;\n  /** Whether `register` refused another account's endpoint. Default: HTTP 409. */\n  isEndpointTaken?: (error: unknown) => boolean;\n  /** After an enable or a disable: the app refreshes its device queries. */\n  onChange?: () => void;\n}\n\n/** What {@link usePushDevice} answers. */\nexport interface PushDevice {\n  /** The browser exposes service workers, `PushManager` and `Notification`. */\n  supported: boolean;\n  /** The server has VAPID keys; `undefined` until `pushKey` answered (or when it failed). */\n  configured: boolean | undefined;\n  /** Running as an installed app: `display-mode: standalone`, or iOS's\n   *  `navigator.standalone`. */\n  installed: boolean;\n  /** iPhone or iPad — where push reaches only the installed app. */\n  ios: boolean;\n  permission: PushPermission;\n  /** THIS account holds this browser's subscription. An unreachable device list falls\n   *  back to the browser's own answer. */\n  subscribed: boolean;\n  /** This browser holds a subscription that belongs to another account (two accounts in\n   *  one browser profile): `subscribed` is false, and turning on mints a fresh one. */\n  foreignSubscription: boolean;\n  /** This browser's subscription endpoint, or `null` — marks \"This device\" in a list. */\n  currentEndpoint: string | null;\n  /** An enable or a disable is running. */\n  busy: boolean;\n  /** Ask for permission (the browser's one prompt), subscribe and register. `false` when\n   *  the permission was not granted or push is off on the server; rejects with a\n   *  {@link PushDeviceError} or the app's request's error. */\n  enable: () => Promise<boolean>;\n  /** Tell the server first, then the browser, so a dropped device stops at once. */\n  disable: () => Promise<void>;\n  sendTest: () => Promise<{ sent: number }>;\n}\n\n/**\n * The window event every mounted {@link usePushDevice} re-reads its state on. Fired by\n * every enable and disable, and by `PushDevicesSetting` when it removes this device — so\n * an app's own card on the same hook (keksdose's check-up) stays in step. The hook that\n * fires it does not re-read: it knows what it changed. Namespaced for the kit;\n * keksdose's was `\"keksdose:push-subscription-changed\"`.\n */\nexport const PUSH_SUBSCRIPTION_CHANGED = \"eifi1:push-subscription-changed\";\n\n/** Tell every {@link usePushDevice} that this browser's subscription changed. */\nexport function notifyPushSubscriptionChanged(): void {\n  if (typeof window !== \"undefined\") window.dispatchEvent(new Event(PUSH_SUBSCRIPTION_CHANGED));\n}\n\n/** Whether this browser has the APIs push needs. iOS exposes them only to an INSTALLED\n *  app (Add to Home Screen). */\nexport function pushSupported(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof navigator !== \"undefined\" &&\n    \"serviceWorker\" in navigator &&\n    \"PushManager\" in window &&\n    \"Notification\" in window\n  );\n}\n\n/** iPhone or iPad. iPadOS 13+ reports itself as a Mac; the touch points tell it apart. */\nfunction isIos(): boolean {\n  if (typeof navigator === \"undefined\") return false;\n  const ua = navigator.userAgent;\n  return /iphone|ipad|ipod/i.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);\n}\n\nconst READY_TIMEOUT_MS = 10_000;\nconst PUSH_TIMEOUT_MS = 15_000;\n\n/** `promise`, or a {@link PushDeviceError} after `ms`. The timer is cleared either way. */\nfunction within<T>(promise: Promise<T>, ms: number, code: PushDeviceErrorCode): Promise<T> {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  return Promise.race([\n    promise,\n    new Promise<never>((_, reject) => {\n      timer = setTimeout(() => reject(new PushDeviceError(code)), ms);\n    }),\n  ]).finally(() => clearTimeout(timer));\n}\n\n/**\n * The active registration. `navigator.serviceWorker.ready` never settles while the origin\n * has no registration, so a missing one fails at once, and one stuck installing fails\n * after 10 s (keksdose: enable() hung with the button latched before its worker was\n * served).\n */\nasync function activeRegistration(): Promise<ServiceWorkerRegistration> {\n  const existing = await navigator.serviceWorker.getRegistration();\n  if (!existing) throw new PushDeviceError(\"no_service_worker\");\n  return within(navigator.serviceWorker.ready, READY_TIMEOUT_MS, \"no_service_worker\");\n}\n\n/** A VAPID public key (base64url) as the bytes `PushManager.subscribe` wants. */\nfunction keyBytes(key: string): Uint8Array<ArrayBuffer> {\n  const base64 = key.replace(/-/g, \"+\").replace(/_/g, \"/\") + \"=\".repeat((4 - (key.length % 4)) % 4);\n  const raw = atob(base64);\n  const bytes = new Uint8Array(new ArrayBuffer(raw.length));\n  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);\n  return bytes;\n}\n\n/** A subscription's register body, or `null` when the browser handed back an incomplete\n *  one. */\nfunction inputOf(subscription: PushSubscription): PushSubscriptionInput | null {\n  const json = subscription.toJSON();\n  const p256dh = json.keys?.p256dh;\n  const auth = json.keys?.auth;\n  if (!json.endpoint || !p256dh || !auth) return null;\n  return { endpoint: json.endpoint, keys: { p256dh, auth }, user_agent: navigator.userAgent || null };\n}\n\nconst defaultEndpointTaken = (error: unknown) => httpStatusOf(error) === 409;\n\n/**\n * This browser's push for the signed-in account. Hand it one function per endpoint\n * (§3.8); {@link PushDeviceSetting} draws it, and an app's own card may use it too.\n *\n * **\"Subscribed\" means this account**, not \"this browser holds a subscription\": a\n * browser profile's subscription has no account in it, so a second account in the same\n * profile would read the first's as its own (keksdose). The endpoint is checked against\n * the account's own `devices()`; when that list cannot be read (offline), the browser's\n * answer stands — a wrong \"on\" costs what it did before the check, a wrong \"off\" invites\n * re-subscribing a device that is fine.\n *\n * **A 409 from `register`** — the endpoint belongs to another account, and the server\n * will not re-home what it cannot prove this browser holds — unsubscribes and registers\n * a fresh endpoint, once.\n *\n * **Timeouts:** no registration fails at once and a worker not ready in 10 s fails, both\n * `PushDeviceError(\"no_service_worker\")`; the browser's subscribe and unsubscribe are cut\n * at 15 s, `PushDeviceError(\"push_timeout\")` — so `busy` can never latch.\n *\n * Every mounted hook re-reads its state on {@link PUSH_SUBSCRIPTION_CHANGED}.\n */\nexport function usePushDevice(options: UsePushDeviceOptions): PushDevice {\n  // The app's functions are usually new on every render; the effects read the latest.\n  const latest = useRef(options);\n  useEffect(() => {\n    latest.current = options;\n  });\n\n  const supported = pushSupported();\n  const ios = isIos();\n  const standalone = useMediaQuery(\"(display-mode: standalone)\", false);\n  const installed =\n    standalone ||\n    (typeof navigator !== \"undefined\" && (navigator as Navigator & { standalone?: boolean }).standalone === true);\n\n  const [permission, setPermission] = useState<PushPermission>(() =>\n    supported ? Notification.permission : \"unsupported\",\n  );\n  const [configured, setConfigured] = useState<boolean | undefined>(undefined);\n  const [subscribed, setSubscribed] = useState(false);\n  const [foreignSubscription, setForeignSubscription] = useState(false);\n  const [currentEndpoint, setCurrentEndpoint] = useState<string | null>(null);\n  const [busy, setBusy] = useState(false);\n  const mounted = useRef(true);\n  // Set while this hook fires the event itself: it already knows what changed, and a\n  // re-read could only be worse — an app whose `devices()` answers from a cache would\n  // hand back the list from before the change.\n  const announcing = useRef(false);\n  const announce = useCallback(() => {\n    announcing.current = true;\n    try {\n      notifyPushSubscriptionChanged();\n    } finally {\n      announcing.current = false;\n    }\n    latest.current.onChange?.();\n  }, []);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  // Whether the server has keys (\"\" → push is off there). Once per mount.\n  useEffect(() => {\n    if (!supported) return;\n    let cancelled = false;\n    latest.current.pushKey().then(\n      (key) => {\n        if (!cancelled) setConfigured(key !== \"\");\n      },\n      () => {\n        /* unknown: the card shows the ordinary states */\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [supported]);\n\n  // What this browser holds, and whether it is this account's — at mount, and whenever\n  // a subscription changes anywhere in the app.\n  useEffect(() => {\n    if (!supported) return;\n    let cancelled = false;\n    const sync = async () => {\n      try {\n        const registration = await activeRegistration();\n        const existing = await registration.pushManager.getSubscription();\n        if (cancelled) return;\n        // Read again: the person may have changed it in the browser's settings.\n        setPermission(Notification.permission);\n        if (!existing) {\n          setSubscribed(false);\n          setForeignSubscription(false);\n          setCurrentEndpoint(null);\n          return;\n        }\n        let mine: boolean;\n        try {\n          const devices = await latest.current.devices();\n          mine = devices.some((device) => device.endpoint === existing.endpoint);\n        } catch {\n          mine = true;\n        }\n        if (cancelled) return;\n        setCurrentEndpoint(existing.endpoint);\n        setSubscribed(mine);\n        setForeignSubscription(!mine);\n      } catch {\n        /* no active service worker yet: not subscribed */\n      }\n    };\n    const heard = () => {\n      if (!announcing.current) void sync();\n    };\n    void sync();\n    window.addEventListener(PUSH_SUBSCRIPTION_CHANGED, heard);\n    return () => {\n      cancelled = true;\n      window.removeEventListener(PUSH_SUBSCRIPTION_CHANGED, heard);\n    };\n  }, [supported]);\n\n  const enable = useCallback(async (): Promise<boolean> => {\n    if (!supported) return false;\n    const { pushKey, register, isEndpointTaken = defaultEndpointTaken } = latest.current;\n    setBusy(true);\n    try {\n      const granted = await Notification.requestPermission();\n      if (mounted.current) setPermission(granted);\n      if (granted !== \"granted\") return false;\n\n      const key = await pushKey();\n      if (!key) {\n        if (mounted.current) setConfigured(false);\n        return false;\n      }\n      if (mounted.current) setConfigured(true);\n\n      const registration = await activeRegistration();\n      // The one place the browser is asked for a subscription, so the timeout and the\n      // `{userVisibleOnly, applicationServerKey}` literal are on both paths.\n      const subscribe = (reuse: boolean) =>\n        within(\n          (async () =>\n            (reuse ? await registration.pushManager.getSubscription() : null) ??\n            (await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) })))(),\n          PUSH_TIMEOUT_MS,\n          \"push_timeout\",\n        );\n\n      let subscription = await subscribe(true);\n      let input = inputOf(subscription);\n      if (!input) return false;\n      try {\n        await register(input);\n      } catch (error) {\n        if (!isEndpointTaken(error)) throw error;\n        await within(subscription.unsubscribe(), PUSH_TIMEOUT_MS, \"push_timeout\");\n        subscription = await subscribe(false);\n        input = inputOf(subscription);\n        if (!input) return false;\n        await register(input);\n      }\n      if (mounted.current) {\n        setSubscribed(true);\n        setForeignSubscription(false);\n        setCurrentEndpoint(input.endpoint);\n      }\n      announce();\n      return true;\n    } finally {\n      if (mounted.current) setBusy(false);\n    }\n  }, [supported, announce]);\n\n  const disable = useCallback(async (): Promise<void> => {\n    if (!supported) return;\n    setBusy(true);\n    try {\n      const registration = await activeRegistration();\n      const subscription = await registration.pushManager.getSubscription();\n      if (subscription) {\n        // The server first: a dropped device stops receiving even if the browser's\n        // unsubscribe below fails.\n        await latest.current.unregister(subscription.endpoint);\n        await within(subscription.unsubscribe(), PUSH_TIMEOUT_MS, \"push_timeout\");\n      }\n      if (mounted.current) {\n        setSubscribed(false);\n        setForeignSubscription(false);\n        setCurrentEndpoint(null);\n      }\n      announce();\n    } finally {\n      if (mounted.current) setBusy(false);\n    }\n  }, [supported, announce]);\n\n  const sendTest = useCallback(() => latest.current.test(), []);\n\n  return {\n    supported,\n    configured,\n    installed,\n    ios,\n    permission,\n    subscribed,\n    foreignSubscription,\n    currentEndpoint,\n    busy,\n    enable,\n    disable,\n    sendTest,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/rhf/fields.d.ts

@@ -78,8 +78,14 @@ export interface RhfFieldBaseProps<TFieldValues extends FieldValues = FieldValue
     label?: ReactNode;
     /** Standing advice under the field ("As printed on the card"), attached to the
      *  control with `aria-describedby`. A `FieldHint` is its words at Large and on a
-     *  touch screen (§4, DUP-2), not a lone "?"; a `HelpPopover` stays a "?". */
+     *  touch screen (§4, DUP-2), not a lone "?"; a `HelpPopover` stays a "?". Beside a
+     *  `help` it is that caption at every size. */
     hint?: ReactNode;
+    /** Help the field is usable without — why, how to choose — behind the field's one
+     *  "?" after the label: a `HelpPopover` named "About <label>" (round 0.36,
+     *  docs/text-size-harmonization.md §4); pass a `HelpPopover` to name it yourself.
+     *  `hint` stays the visible fact under the field. */
+    help?: ReactNode;
     /** Draws the label's required mark and sets `aria-required` where the control
      *  takes it. Whether the field IS required is `rules`' or the resolver's to say. */
     required?: boolean;
@@ -137,7 +143,7 @@ export interface RhfFieldProps<TFieldValues extends FieldValues = FieldValues, T
  * )} />
  * ```
  */
-export declare function RhfField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, render, asControl, message, showLabel, }: RhfFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, render, asControl, message, showLabel, }: RhfFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnInputProps = Omit<InputProps, "name" | "value" | "defaultValue" | "onChange" | "onBlur" | "ref" | "label" | "error" | "invalid" | "className" | "disabled" | "required" | "inputClassName"> & {
     /**
      * Classes for the `<input>` — `className` is the item's box (kastlan 42: a
@@ -150,14 +156,14 @@ type OwnInputProps = Omit<InputProps, "name" | "value" | "defaultValue" | "onCha
 };
 export type RhfTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnInputProps;
 /** A text {@link Input} — `type` for email, tel, password, url. Stores the string. */
-export declare function RhfTextField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...inputProps }: RhfTextFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfTextField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, ...inputProps }: RhfTextFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnTextareaProps = Omit<TextareaProps, "name" | "value" | "defaultValue" | "onChange" | "onBlur" | "ref" | "label" | "error" | "invalid" | "className" | "disabled" | "required"> & {
     /** Classes for the `<textarea>`. */
     inputClassName?: string;
 };
 export type RhfTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnTextareaProps;
 /** A multi-line {@link Textarea}; takes `rows`. Stores the string. */
-export declare function RhfTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, inputClassName, ...areaProps }: RhfTextareaProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, inputClassName, ...areaProps }: RhfTextareaProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 /** What a twin sets on its field itself — the value and its change, what the form
  *  decides (`disabled`, `invalid`, the error, the ids) and what the shell draws (the
  *  label, the hint, the item's `className`). Everything else of the field's passes
@@ -177,7 +183,7 @@ export type RhfNumberFieldProps<TFieldValues extends FieldValues = FieldValues,
  * `max`) number, committed on blur or Enter in the locale's decimal mark. Stores a
  * number, or `emptyValue` when emptied.
  */
-export declare function RhfNumberField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, emptyValue, nullable, ...numberProps }: RhfNumberFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfNumberField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, emptyValue, nullable, ...numberProps }: RhfNumberFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 export type RhfIntegerFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfNumberFieldProps<TFieldValues, TName, TTransformed>;
 /**
  * {@link RhfNumberField} for a whole number — a floor, a room count, a year, a
@@ -212,7 +218,7 @@ export type RhfMoneyFieldProps<TFieldValues extends FieldValues = FieldValues, T
  * calculator ("1200+80" resolves on blur or Enter). Stores a number by default — see
  * `valueAs`.
  */
-export declare function RhfMoneyField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...amountProps }: RhfMoneyFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfMoneyField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, ...amountProps }: RhfMoneyFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 export type RhfDateFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Omit<DatePickerProps, "value" | "onChange" | "label" | "invalid" | "disabled" | "className" | "id" | "error"> & {
     /** Classes for the picker. Default `w-full`. */
     inputClassName?: string;
@@ -221,7 +227,7 @@ export type RhfDateFieldProps<TFieldValues extends FieldValues = FieldValues, TN
     emptyValue?: "" | null;
 };
 /** The kit's {@link DatePicker}, holding an ISO `"YYYY-MM-DD"` string. */
-export declare function RhfDateField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, inputClassName, emptyValue, ...pickerProps }: RhfDateFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfDateField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, inputClassName, emptyValue, ...pickerProps }: RhfDateFieldProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnDateRangeProps = Omit<DateRangePickerProps, "from" | "to" | "onChange" | "label" | "invalid" | "disabled" | "className" | "id" | "error">;
 export type RhfDateRangePickerProps<TFieldValues extends FieldValues = FieldValues, TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = Omit<RhfFieldBaseProps<TFieldValues, TFromName, TTransformed>, "name" | "rules"> & OwnDateRangeProps & {
     /** The form field holding the range's first day, an ISO `"YYYY-MM-DD"`. */
@@ -277,7 +283,7 @@ export type RhfDateRangePickerProps<TFieldValues extends FieldValues = FieldValu
  * The common props (`label`, `hint`, `required`, `disabled`, `excludeWhenDisabled`,
  * `control`, `className`) apply to the pair; `rules` are per field.
  */
-export declare function RhfDateRangePicker<TFieldValues extends FieldValues = FieldValues, TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ fromName, toName, control, fromRules, toRules, label, hint, required, disabled, excludeWhenDisabled, className, inputClassName, emptyValue, ...pickerProps }: RhfDateRangePickerProps<TFieldValues, TFromName, TToName, TTransformed>): import("react").JSX.Element;
+export declare function RhfDateRangePicker<TFieldValues extends FieldValues = FieldValues, TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ fromName, toName, control, fromRules, toRules, label, hint, help, required, disabled, excludeWhenDisabled, className, inputClassName, emptyValue, ...pickerProps }: RhfDateRangePickerProps<TFieldValues, TFromName, TToName, TTransformed>): import("react").JSX.Element;
 export type RhfTimeInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Omit<TimeInputProps, "name" | "value" | "defaultValue" | "onChange" | "onValueChange" | "onBlur" | "label" | "error" | "invalid" | "className" | "disabled" | "required"> & {
     /** What a cleared time stores. Default `""`; `null` for a nullable schema. */
     emptyValue?: "" | null;
@@ -294,7 +300,7 @@ export type RhfTimeInputProps<TFieldValues extends FieldValues = FieldValues, TN
  * validation stays the schema's or `rules`'. `rules={{ validate: (v) =>
  * isTimeInRange(v, min, max) || "…" }}` says it with the same window.
  */
-export declare function RhfTimeInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, emptyValue, ...timeProps }: RhfTimeInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfTimeInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, emptyValue, ...timeProps }: RhfTimeInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnTextishProps<P> = Omit<P, "name" | "value" | "defaultValue" | "onChange" | "onValueChange" | "onBlur" | "label" | "error" | "invalid" | "className" | "disabled" | "required">;
 export type RhfIbanInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnTextishProps<IbanInputProps>;
 /**
@@ -304,7 +310,7 @@ export type RhfIbanInputProps<TFieldValues extends FieldValues = FieldValues, TN
  * or `rules`') replaces them, as a caller's `error` does on the bare field. kastlan
  * asked for the field; it binds everything through react-hook-form.
  */
-export declare function RhfIbanInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...ibanProps }: RhfIbanInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfIbanInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, ...ibanProps }: RhfIbanInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 export type RhfPhoneInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnTextishProps<PhoneInputProps>;
 /**
  * {@link PhoneInput} bound to one field, which stores E.164 when the number reads as
@@ -312,7 +318,7 @@ export type RhfPhoneInputProps<TFieldValues extends FieldValues = FieldValues, T
  * text until someone edits it. Validation (required, a pattern for E.164 only) is the
  * schema's or `rules`'.
  */
-export declare function RhfPhoneInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...phoneProps }: RhfPhoneInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfPhoneInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, ...phoneProps }: RhfPhoneInputProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnCountrySelectProps = Omit<CountrySelectProps<boolean>, "value" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "ref" | "clearable">;
 export type RhfCountrySelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnCountrySelectProps & {
     /** Offer the picker's clear "×" (and Delete on the trigger) while a country is
@@ -346,7 +352,7 @@ export type RhfCountrySelectProps<TFieldValues extends FieldValues = FieldValues
  *   preferred={["CH", "LI", "DE", "AT", "FR", "IT"]} rules={{ required: "Choose a country" }} />
  * ```
  */
-export declare function RhfCountrySelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, clearable, clearValue, selectClassName, labels, ...countryProps }: RhfCountrySelectProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfCountrySelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, clearable, clearValue, selectClassName, labels, ...countryProps }: RhfCountrySelectProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 type OwnMonthPickerProps = Omit<MonthPickerProps, "value" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "mode">;
 /** `mode` picks what the form stores, and `valueAsNumber` is only offered for a year. */
 type RhfMonthPickerMode = {
@@ -383,7 +389,7 @@ export type RhfMonthPickerProps<TFieldValues extends FieldValues = FieldValues,
  *   min="2020" max="2029" rules={{ required: "Choose a year" }} />
  * ```
  */
-export declare function RhfMonthPicker<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, inputClassName, mode, valueAsNumber, ...pickerProps }: RhfMonthPickerProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfMonthPicker<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, inputClassName, mode, valueAsNumber, ...pickerProps }: RhfMonthPickerProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 export interface RhfSelectOption {
     value: string | number;
     label: ReactNode;
@@ -402,8 +408,9 @@ export type RhfSelectProps<TFieldValues extends FieldValues = FieldValues, TName
     selectClassName?: string;
 };
 /** A native {@link Select}, from `options` or `<option>` children. */
-export declare function RhfSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, options, children, placeholder, valueAsNumber, selectClassName, ...selectProps }: RhfSelectProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
-export type RhfCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Omit<CheckboxProps, BoundByForm | "checked" | "defaultChecked" | "onCheckedChange" | "description">;
+export declare function RhfSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, options, children, placeholder, valueAsNumber, selectClassName, ...selectProps }: RhfSelectProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export type RhfCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = // No `help` (0.36): a box has no label line — its label sits beside it, inside the
+Omit<RhfFieldBaseProps<TFieldValues, TName, TTransformed>, "help"> & Omit<CheckboxProps, BoundByForm | "checked" | "defaultChecked" | "onCheckedChange" | "description">;
 /**
  * The kit's {@link Checkbox}, label beside the box and `hint` under it (the
  * checkbox's own `description`). Stores a boolean. `required` is the native one here
@@ -451,7 +458,7 @@ export type RhfToggleGroupProps<TFieldValues extends FieldValues = FieldValues,
  * value that matches no option (an empty default) leaves nothing pressed; that the
  * field still needs answering is the schema's or `rules`' to say.
  */
-export declare function RhfToggleGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, T extends string = string, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...groupProps }: RhfToggleGroupProps<TFieldValues, TName, T, TTransformed>): import("react").JSX.Element;
+export declare function RhfToggleGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, T extends string = string, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, ...groupProps }: RhfToggleGroupProps<TFieldValues, TName, T, TTransformed>): import("react").JSX.Element;
 export type RhfComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Omit<EntityComboboxProps<V>, BoundByForm | "id" | "clearValue"> & {
     /** What a clear stores — the picker's `clearValue`. Default `null`; `""` for a
      *  schema that spells "no choice" as an empty string. */
@@ -472,7 +479,7 @@ export type RhfComboboxProps<TFieldValues extends FieldValues = FieldValues, TNa
  * placeholder. For the INLINE picker — a text input, the account field typed into —
  * see {@link RhfInlineEntityCombobox}.
  */
-export declare function RhfCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, clearValue, comboClassName, ...comboProps }: RhfComboboxProps<TFieldValues, TName, V, TTransformed>): import("react").JSX.Element;
+export declare function RhfCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, clearValue, comboClassName, ...comboProps }: RhfComboboxProps<TFieldValues, TName, V, TTransformed>): import("react").JSX.Element;
 type OwnInlineEntityComboboxProps<V extends string | number> = Omit<InlineEntityComboboxProps<V, ComboClearValue>, "value" | "defaultValue" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "ref" | "clearValue">;
 export type RhfInlineEntityComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnInlineEntityComboboxProps<V> & {
     /** What a clear stores — emptying the text, or the "×" with `clearable`. Default
@@ -517,7 +524,7 @@ export type RhfInlineEntityComboboxProps<TFieldValues extends FieldValues = Fiel
  *
  * For the button-shaped picker with an async `loadOptions`, see {@link RhfCombobox}.
  */
-export declare function RhfInlineEntityCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, clearValue, comboClassName, ...comboProps }: RhfInlineEntityComboboxProps<TFieldValues, TName, V, TTransformed>): import("react").JSX.Element;
+export declare function RhfInlineEntityCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, clearValue, comboClassName, ...comboProps }: RhfInlineEntityComboboxProps<TFieldValues, TName, V, TTransformed>): import("react").JSX.Element;
 export type RhfTextComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Omit<ComboboxProps, BoundByForm | "id"> & {
     /** Classes for the combobox. */
     comboClassName?: string;
@@ -526,5 +533,5 @@ export type RhfTextComboboxProps<TFieldValues extends FieldValues = FieldValues,
  * The kit's free-text {@link Combobox}: type anything, or pick one of `options`.
  * Stores the string.
  */
-export declare function RhfTextCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, comboClassName, ...comboProps }: RhfTextComboboxProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
+export declare function RhfTextCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className, comboClassName, ...comboProps }: RhfTextComboboxProps<TFieldValues, TName, TTransformed>): import("react").JSX.Element;
 export {};