fancy-ui-react 0.2.0

package/dist/internals/dismissable.d.ts

@@ -0,0 +1,76 @@
+import type { ElementRef } from "./dom/types.js";
+export interface DismissableCoreOptions {
+    /** Called when the node should be dismissed. */
+    onDismiss: () => void;
+    /** Whether pressing Escape dismisses. Defaults to true. */
+    escape?: boolean;
+    /** Whether a pointerdown outside the node dismisses. Defaults to true. */
+    outsideClick?: boolean;
+    /** Elements to ignore when detecting outside clicks (e.g. a trigger button). */
+    exclude?: () => (HTMLElement | null)[];
+    /**
+     * Whether this layer is still the live one. A GETTER, not a boolean, and
+     * read fresh on every Escape and every outside pointerdown, so a layer
+     * that goes inactive stops answering without anything having to hand the
+     * core a new value first.
+     *
+     * Every overlay that animates its exit passes its `open`. The moment
+     * `open` flips false the layer stops answering Escape AND stops counting
+     * as the top layer, so a second Escape during the fade is a no-op and the
+     * dialog underneath gets it instead of having it swallowed by a panel that
+     * is already leaving. Defaults to always-active.
+     */
+    active?: () => boolean;
+}
+export interface DismissableHandle {
+    /** Swaps the options in place — the action's `update` under a new name. */
+    update(options: DismissableCoreOptions): void;
+    /** Pops this layer off the stack and detaches the document listeners. */
+    destroy(): void;
+}
+/**
+ * Registers `node` as a dismissable layer and wires the document listeners.
+ *
+ * SSR-safe: does nothing when `document` is unavailable.
+ */
+export declare function attachDismissable(node: HTMLElement, opts: DismissableCoreOptions): DismissableHandle;
+/** Test-only. Not exported from index.ts. */
+export declare function __dismissableLayerCount(): number;
+export interface DismissableOptions {
+    /** Called when the node should be dismissed. */
+    onDismiss: () => void;
+    /** Escape dismisses. Default true. */
+    escape?: boolean;
+    /** A pointerdown outside dismisses. Default true. */
+    outsideClick?: boolean;
+    /**
+     * Elements that do not count as "outside" — typically the trigger. An
+     * array of nodes or refs, resolved at event time, or the getter form for
+     * a genuinely dynamic set.
+     */
+    exclude?: Array<ElementRef<HTMLElement> | HTMLElement | null | undefined> | (() => (HTMLElement | null)[]);
+    /**
+     * Whether this layer is still LIVE. Pass the surface's `open`. Default true.
+     *
+     * A plain boolean where the core takes a getter: React re-renders the
+     * still-mounted exiting surface normally, so the hook can hold the current
+     * value in a live ref and hand the core a getter over it. Semantics are
+     * unchanged — a layer stays ON the stack for its whole exit and stops
+     * being TOP of it the instant `active` flips.
+     */
+    active?: boolean;
+    /** Whether the layer is registered at all. Default true. */
+    enabled?: boolean;
+}
+/**
+ * Dismissable behaviour for `node`.
+ *
+ * Returns nothing: this hook owns behaviour, not state — nothing it does is
+ * rendered, so neither `useState` nor `useSyncExternalStore` has any part in
+ * it.
+ *
+ * A passive effect, not a layout one: the layer push and the two document
+ * listeners are invisible in the first painted frame, and no key can be
+ * pressed before they land.
+ */
+export declare function useDismissable(node: HTMLElement | null, options: DismissableOptions): void;

package/dist/internals/dismissable.js

@@ -0,0 +1,105 @@
+"use client";
+import { useCallback, useRef, useEffect } from "react";
+import { useEventCallback } from "./dom/use-event-callback.js";
+import { useLiveRef } from "./dom/use-live-ref.js";
+const layers = [];
+function attachDismissable(node, opts) {
+  if (typeof document === "undefined") {
+    return { update() {
+    }, destroy() {
+    } };
+  }
+  let onDismiss = opts.onDismiss;
+  let escape = opts.escape ?? true;
+  let outsideClick = opts.outsideClick ?? true;
+  let exclude = opts.exclude;
+  let isActive = opts.active ?? (() => true);
+  function isTopLayer() {
+    for (let i = layers.length - 1; i >= 0; i -= 1) {
+      const candidate = layers[i];
+      if (candidate.isActive()) return candidate.node === node;
+    }
+    return false;
+  }
+  function handleKeydown(event) {
+    if (!isActive()) return;
+    if (!escape) return;
+    if (event.key !== "Escape") return;
+    if (!isTopLayer()) return;
+    event.stopImmediatePropagation();
+    onDismiss();
+  }
+  function handlePointerdown(event) {
+    if (!isActive()) return;
+    if (!outsideClick) return;
+    if (!isTopLayer()) return;
+    const target = event.target;
+    if (!target || node.contains(target)) return;
+    const excluded = exclude?.() ?? [];
+    if (excluded.some((el) => el?.contains(target))) return;
+    onDismiss();
+  }
+  const layer = { node, isActive: () => isActive() };
+  layers.push(layer);
+  document.addEventListener("keydown", handleKeydown);
+  document.addEventListener("pointerdown", handlePointerdown);
+  return {
+    update(newOpts) {
+      onDismiss = newOpts.onDismiss;
+      escape = newOpts.escape ?? true;
+      outsideClick = newOpts.outsideClick ?? true;
+      exclude = newOpts.exclude;
+      isActive = newOpts.active ?? (() => true);
+    },
+    destroy() {
+      const i = layers.indexOf(layer);
+      if (i !== -1) layers.splice(i, 1);
+      document.removeEventListener("keydown", handleKeydown);
+      document.removeEventListener("pointerdown", handlePointerdown);
+    }
+  };
+}
+function useDismissable(node, options) {
+  const { escape = true, outsideClick = true, active = true, enabled = true } = options;
+  const onDismiss = useEventCallback(options.onDismiss);
+  const activeRef = useLiveRef(active);
+  const excludeRef = useLiveRef(options.exclude);
+  const escapeRef = useLiveRef(escape);
+  const outsideClickRef = useLiveRef(outsideClick);
+  const getActive = useCallback(() => activeRef.current, [activeRef]);
+  const getExclude = useCallback(() => {
+    const exclude = excludeRef.current;
+    if (!exclude) return [];
+    if (typeof exclude === "function") return exclude();
+    return exclude.map((entry) => entry && "current" in entry ? entry.current : entry ?? null);
+  }, [excludeRef]);
+  const handleRef = useRef(null);
+  useEffect(() => {
+    if (!node || !enabled) return;
+    const handle = attachDismissable(node, {
+      onDismiss,
+      escape: escapeRef.current,
+      outsideClick: outsideClickRef.current,
+      exclude: getExclude,
+      active: getActive
+    });
+    handleRef.current = handle;
+    return () => {
+      handleRef.current = null;
+      handle.destroy();
+    };
+  }, [node, enabled, onDismiss, getActive, getExclude, escapeRef, outsideClickRef]);
+  useEffect(() => {
+    handleRef.current?.update({
+      onDismiss,
+      escape,
+      outsideClick,
+      exclude: getExclude,
+      active: getActive
+    });
+  }, [escape, outsideClick, onDismiss, getActive, getExclude]);
+}
+export {
+  attachDismissable,
+  useDismissable
+};

package/dist/internals/dom/context.d.ts

@@ -0,0 +1,16 @@
+import type { Provider } from "react";
+export interface InternalContext<T> {
+    Provider: Provider<T | undefined>;
+    useRequired: () => T;
+    useOptional: () => T | undefined;
+}
+/**
+ * A typed context plus its two readers. `useRequired` throws a named error outside its
+ * provider (the compound-component contract); `useOptional` returns `undefined` (the
+ * degrade-gracefully contract — a field reader with no field, a group item outside its
+ * group).
+ *
+ * A context VALUE is a plain object rebuilt when its scalar inputs change, and the
+ * rebuild is what makes consumers re-render. Never wrap one in `useMemo(..., [])`.
+ */
+export declare function createInternalContext<T>(displayName: string): InternalContext<T>;

package/dist/internals/dom/context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext } from "react";
+function createInternalContext(displayName) {
+  const Context = createContext(void 0);
+  Context.displayName = displayName;
+  function useRequired() {
+    const value = useContext(Context);
+    if (value === void 0) {
+      throw new Error(`${displayName} is missing: this component must be rendered inside its provider.`);
+    }
+    return value;
+  }
+  function useOptional() {
+    return useContext(Context);
+  }
+  return { Provider: Context.Provider, useRequired, useOptional };
+}
+export {
+  createInternalContext
+};

package/dist/internals/dom/ssr.d.ts

@@ -0,0 +1,21 @@
+import { useLayoutEffect } from "react";
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. Everything whose
+ * absence is visible in the first painted frame — position, focus, scroll lock, a
+ * transition leg — runs through this.
+ *
+ * The branch is taken once at module scope, never in a render path, so it costs
+ * nothing per render and cannot desynchronise a hydration.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+/**
+ * `false` on the server AND during the hydration render, `true` from the first
+ * post-hydration render on. useSyncExternalStore, not useState+useEffect: no extra
+ * commit, and tear-free under concurrent rendering.
+ */
+export declare function useIsHydrated(): boolean;
+/**
+ * Lazily create a per-instance value exactly once. StrictMode-safe only because every
+ * `create*` factory in this contract is allocation-only — no listeners, no timers.
+ */
+export declare function useConstant<T>(create: () => T): T;

package/dist/internals/dom/ssr.js

@@ -0,0 +1,21 @@
+"use client";
+import { useLayoutEffect, useEffect, useRef, useSyncExternalStore } from "react";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const emptySubscribe = () => () => {
+};
+const getSnapshot = () => true;
+const getServerSnapshot = () => false;
+function useIsHydrated() {
+  return useSyncExternalStore(emptySubscribe, getSnapshot, getServerSnapshot);
+}
+const UNSET = /* @__PURE__ */ Symbol("useConstant.unset");
+function useConstant(create) {
+  const ref = useRef(UNSET);
+  if (ref.current === UNSET) ref.current = create();
+  return ref.current;
+}
+export {
+  useConstant,
+  useIsHydrated,
+  useIsomorphicLayoutEffect
+};

package/dist/internals/dom/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Structural ref type. NOT React.RefObject / React.MutableRefObject: those changed
+ * shape between @types/react 18 and 19 (19 dropped the mutable/readonly split), and
+ * this package's peer range is `^18 || ^19`. A structural type is assignable from
+ * every variant either version emits.
+ */
+export type ElementRef<T extends Element = HTMLElement> = {
+    readonly current: T | null;
+};

package/dist/internals/dom/use-composed-refs.d.ts

@@ -0,0 +1,15 @@
+import type { Ref, RefCallback } from "react";
+/**
+ * Non-hook form, for use inside an existing callback ref.
+ *
+ * Returns the cleanup a React 19 callback ref may hand back, or `undefined`.
+ * React 19 runs that cleanup on detach INSTEAD of calling the ref with
+ * `null`, so a composer that swallowed the return value would silently drop
+ * the consumer's teardown. React 18 has no such channel and ignores whatever
+ * a callback ref returns — which is why the value is passed on rather than
+ * acted upon here, and why every caller must still be able to cope with a
+ * plain `assignRef(ref, null)` detach.
+ */
+export declare function assignRef<T>(ref: Ref<T> | undefined | null, node: T | null): (() => void) | undefined;
+/** Merges any number of refs into one callback ref. Skips nullish entries. */
+export declare function useComposedRefs<T>(...refs: Array<Ref<T> | undefined | null>): RefCallback<T>;

package/dist/internals/dom/use-composed-refs.js

@@ -0,0 +1,34 @@
+"use client";
+import { useRef, useCallback } from "react";
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    const cleanup = ref(node);
+    return typeof cleanup === "function" ? cleanup : void 0;
+  }
+  if (ref) ref.current = node;
+  return void 0;
+}
+function useComposedRefs(...refs) {
+  const pending = useRef(null);
+  const detach = useCallback(() => {
+    const cleanups = pending.current;
+    pending.current = null;
+    if (!cleanups) return;
+    for (const cleanup of cleanups) cleanup();
+  }, []);
+  return useCallback(
+    (node) => {
+      detach();
+      if (node === null) return;
+      pending.current = refs.map((ref) => {
+        const cleanup = assignRef(ref, node);
+        return cleanup ?? (() => assignRef(ref, null));
+      });
+    },
+    [...refs, detach]
+  );
+}
+export {
+  assignRef,
+  useComposedRefs
+};

package/dist/internals/dom/use-element-ref.d.ts

@@ -0,0 +1,11 @@
+import type { RefCallback } from "react";
+/**
+ * The node, and the callback ref that publishes it. THE way a component hands an
+ * element to an internals hook (convention C-1).
+ *
+ * Returns state, not a ref, so a hook keyed on `[node]` re-runs the moment the node
+ * appears — which is the only correct behaviour for a node whose existence is
+ * conditional (a presence-mounted panel, an `{#if}`-equivalent branch). The setter
+ * identity is stable for the life of the component.
+ */
+export declare function useElementRef<T extends Element = HTMLElement>(): [T | null, RefCallback<T>];

package/dist/internals/dom/use-element-ref.js

@@ -0,0 +1,12 @@
+"use client";
+import { useState, useCallback } from "react";
+function useElementRef() {
+  const [node, setNode] = useState(null);
+  const ref = useCallback((next) => {
+    setNode(next);
+  }, []);
+  return [node, ref];
+}
+export {
+  useElementRef
+};

package/dist/internals/dom/use-event-callback.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A permanently identity-stable wrapper that always calls the most recent `fn`.
+ * `undefined` yields a stable no-op returning `undefined`.
+ *
+ * The ref is written inside `useInsertionEffect`, NOT during render. Insertion effects
+ * run before every layout effect, so a listener always sees the current callback, and
+ * a concurrent render that React throws away can never publish a stale one. This is
+ * the React counterpart of the getter-object call sites the Svelte sources use.
+ *
+ * Every `on*` option on every internals hook goes through this. It is also why
+ * anchor-position's `newOpts.onPlacement !== options.onPlacement` reset branch is
+ * unreachable from the hook path: the identity never changes.
+ */
+export declare function useEventCallback<A extends unknown[], R>(fn: ((...args: A) => R) | undefined): (...args: A) => R | undefined;

package/dist/internals/dom/use-event-callback.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRef, useInsertionEffect, useCallback } from "react";
+function useEventCallback(fn) {
+  const ref = useRef(fn);
+  useInsertionEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback((...args) => ref.current?.(...args), []);
+}
+export {
+  useEventCallback
+};

package/dist/internals/dom/use-inert-attribute.d.ts

@@ -0,0 +1,26 @@
+import type { RefCallback } from "react";
+/**
+ * Keeps the `inert` ATTRIBUTE on an element in sync with a boolean, imperatively.
+ *
+ * Not a JSX prop, because there is no spelling of one that works across this
+ * package's peer range: `inert={true}` is dropped with a warning by React 18
+ * (which knows no such attribute and refuses to guess), and `inert=""` is
+ * rejected by React 19 (which knows it as a boolean). The attribute itself is
+ * what `:not([inert])` selectors and assistive technology key on, so it is
+ * written straight to the node instead — one mechanism, identical output on 18
+ * and 19.
+ *
+ * The returned callback ref is identity-stable, so React never detaches and
+ * reattaches it; it applies the current value the instant a node arrives (which
+ * is what covers a node that REMOUNTS while the flag is unchanged), and the
+ * layout effect applies every later change to the node already held. Layout, not
+ * passive: inertness that lands a frame late is a frame in which a collapsed
+ * region is still clickable and still reachable by Tab.
+ *
+ * Compose it with `useComposedRefs` when the element already has a ref.
+ *
+ * SSR: an element is never inert in the server HTML — an attribute this hook
+ * writes at commit cannot exist before hydration. Divergence from the Svelte
+ * source, which SSRs `inert` inline; observable only in the pre-hydration frame.
+ */
+export declare function useInertAttribute<T extends Element = HTMLElement>(inert: boolean): RefCallback<T>;

package/dist/internals/dom/use-inert-attribute.js

@@ -0,0 +1,22 @@
+"use client";
+import { useRef, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "./ssr.js";
+import { useLiveRef } from "./use-live-ref.js";
+function useInertAttribute(inert) {
+  const nodeRef = useRef(null);
+  const inertRef = useLiveRef(inert);
+  const ref = useCallback(
+    (node) => {
+      nodeRef.current = node;
+      if (node) node.toggleAttribute("inert", inertRef.current);
+    },
+    [inertRef]
+  );
+  useIsomorphicLayoutEffect(() => {
+    nodeRef.current?.toggleAttribute("inert", inert);
+  }, [inert]);
+  return ref;
+}
+export {
+  useInertAttribute
+};

package/dist/internals/dom/use-live-ref.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A read-only ref mirroring `value`, written in `useInsertionEffect` for the same
+ * reason as `useEventCallback`. The React counterpart of a Svelte getter for a
+ * NON-callback value: a long-lived closure (a document listener, an observer
+ * callback, a stack entry) reads `ref.current` and sees the latest render's value
+ * without being rebuilt.
+ */
+export declare function useLiveRef<T>(value: T): {
+    readonly current: T;
+};

package/dist/internals/dom/use-live-ref.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRef, useInsertionEffect } from "react";
+function useLiveRef(value) {
+  const ref = useRef(value);
+  useInsertionEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+export {
+  useLiveRef
+};

package/dist/internals/field.d.ts

@@ -0,0 +1,136 @@
+/**
+ * The contract between a FormField and whatever control it wraps.
+ *
+ * `FormField` owns the id, the label/help/error wiring and the required/
+ * disabled flags; every control in this wave (Input, Textarea, Checkbox, ...)
+ * reads all of that through `useField()` instead of a caller threading ids
+ * and aria attributes by hand. A control mounted outside a `FormField`
+ * degrades to `undefined` — it must still work standalone, falling back to
+ * its own props, exactly like `ToggleGroupItem` degrades outside a
+ * `ToggleGroup`.
+ *
+ * `FieldContext` below is the frozen surface every other component in this
+ * wave was built against — its shape must not change. `createFieldState` is
+ * this file's own implementation detail: what `FormField` actually
+ * constructs and publishes, and the only thing that changes if the wiring
+ * inside `describedBy` ever needs to change.
+ */
+import type { ReactNode } from "react";
+/** What a `FormField` publishes to the control (and `Label`) it wraps. */
+export interface FieldContext {
+    /**
+     * The id the labelled control must carry. Pair it with a native
+     * `for`/`id` association — only meaningful for a control whose *root* is
+     * one of the elements `<label for>` can target (button, input, meter,
+     * output, progress, select, textarea). A control whose root is anything
+     * else (a `<div role="radiogroup">`, say) must use `labelId` below
+     * instead — `for` cannot reach it, ARIA role or not.
+     */
+    readonly controlId: string;
+    /**
+     * Id of the rendered `<label>` element, for a control whose root is not
+     * one `for` can target — point that control's own `aria-labelledby` at
+     * this instead. `undefined` when `FormField` renders no label of its
+     * own (no `label` prop given). Optional for the same reason `valid` is —
+     * see its doc comment.
+     */
+    readonly labelId?: string;
+    /** Space-joined ids of whichever help and error text are actually rendered, or undefined. */
+    readonly describedBy: string | undefined;
+    readonly invalid: boolean;
+    /**
+     * Whether the field is explicitly marked as passing validation. Never
+     * `true` while `invalid` is `true` — a control that reads both should
+     * still treat them as mutually exclusive, but this is the authority on
+     * that, not an assumption a control has to make itself.
+     *
+     * Optional, not required: this was added after four other builders had
+     * already coded their own controls, harnesses and hand-built
+     * `FieldContext` object literals against the original five-field shape.
+     * Making it required would have been a breaking change to a contract
+     * that was frozen out from under them — every one of those literals
+     * would fail to type-check the moment this file changed, with none of
+     * their own files touched to explain why. Optional keeps every existing
+     * literal valid as-is; `createFieldState`'s own output always populates
+     * it, so `FormField` itself never has to treat it as absent — only a
+     * hand-built context that predates this field does, and `undefined`
+     * there reads the same as `false` to a `field?.valid ?? false` consumer.
+     */
+    readonly valid?: boolean;
+    readonly required: boolean;
+    readonly disabled: boolean;
+}
+/**
+ * Inputs `createFieldState` builds a `FieldContext` from. Every entry is a
+ * plain value, where the Svelte source takes a getter: React re-renders
+ * `FormField` when any of these nine change, and the rebuilt context object
+ * is what makes the controls below it re-render. A getter would buy nothing
+ * here and would defeat the `useMemo` dependency array documented on
+ * `createFieldState`.
+ */
+export interface FieldStateOptions {
+    /** The id to publish as `controlId`. */
+    controlId: string;
+    /** The id to publish as `labelId`, or undefined while no label is rendered. */
+    labelId: string | undefined;
+    /** The id the help paragraph carries while it is rendered. */
+    descriptionId: string;
+    /** The id the error paragraph carries while it is rendered. */
+    errorId: string;
+    /** Whether the help paragraph is currently rendered. */
+    hasDescription: boolean;
+    /** Whether the error paragraph is currently rendered. */
+    hasError: boolean;
+    /** Whether the field is explicitly marked valid. The caller decides how this interacts with `hasError` — see `valid`'s own doc comment on `FieldContext`. */
+    valid: boolean;
+    required: boolean;
+    disabled: boolean;
+}
+/**
+ * Builds the object `FormField` publishes through `<FieldProvider value={...}>`.
+ *
+ * `describedBy` is derived, not registered: it is computed from
+ * `hasDescription`/`hasError`, the same two flags `FormField`'s own
+ * conditionals gate the help/error paragraphs on. That is what keeps the id
+ * list honest — a described-by id only ever appears while the element it
+ * points at is actually in the DOM, because both are driven by the exact
+ * same read, in the exact same render pass. A separate mount/unmount
+ * registration written into state would add a step between "the paragraph is
+ * in the DOM" and "the id is in the list" — and that step runs inside
+ * `useEffect`, which never fires during SSR, so the very first paint would
+ * carry the paragraph without the attribute pointing at it. Deriving
+ * directly avoids that entirely: `describedBy` is exactly as correct on the
+ * server-rendered HTML as it is after hydration.
+ *
+ * Pure and framework-free, so `FormField` calls it from a `useMemo` keyed on
+ * the nine scalars — a field-by-field dependency array, never the options
+ * object, so the identity is stable across unrelated parent re-renders and
+ * changes exactly when a consumer must re-render:
+ *
+ * ```ts
+ * const field = useMemo(
+ *   () => createFieldState({ controlId, labelId, descriptionId, errorId,
+ *     hasDescription, hasError, valid, required, disabled }),
+ *   [controlId, labelId, descriptionId, errorId, hasDescription, hasError, valid, required, disabled]
+ * );
+ * ```
+ */
+export declare function createFieldState(options: FieldStateOptions): FieldContext;
+/**
+ * The context `FormField` publishes under. Consumers read it only via
+ * `useField()`.
+ *
+ * Its default is `undefined`, which is the whole "no FormField above me"
+ * case: a control outside a provider reads back exactly what a provider that
+ * published `undefined` would have given it.
+ */
+export declare const FieldReactContext: import("react").Context<FieldContext | undefined>;
+export interface FieldProviderProps {
+    /** The context object, built by `createFieldState`. */
+    value: FieldContext;
+    children?: ReactNode;
+}
+/** Publishes a `FieldContext` to every control rendered beneath it. */
+export declare function FieldProvider({ value, children }: FieldProviderProps): ReactNode;
+/** Returns the surrounding FormField's context, or undefined when there is none. */
+export declare function useField(): FieldContext | undefined;

package/dist/internals/field.js

@@ -0,0 +1,33 @@
+"use client";
+import { useContext, createContext, createElement } from "react";
+function createFieldState(options) {
+  const ids = [];
+  if (options.hasDescription) ids.push(options.descriptionId);
+  if (options.hasError) ids.push(options.errorId);
+  return {
+    controlId: options.controlId,
+    labelId: options.labelId,
+    describedBy: ids.length > 0 ? ids.join(" ") : void 0,
+    invalid: options.hasError,
+    // Enforced here, not trusted from the caller: `hasError` always wins,
+    // so a control reading `field.valid` never has to also check
+    // `field.invalid` itself to get the "error still wins" rule right.
+    valid: options.valid && !options.hasError,
+    required: options.required,
+    disabled: options.disabled
+  };
+}
+const FieldReactContext = createContext(void 0);
+FieldReactContext.displayName = "FieldContext";
+function FieldProvider({ value, children }) {
+  return createElement(FieldReactContext.Provider, { value }, children);
+}
+function useField() {
+  return useContext(FieldReactContext);
+}
+export {
+  FieldProvider,
+  FieldReactContext,
+  createFieldState,
+  useField
+};