@tea-ui/core 0.1.0

package/dist/inputs/combobox.js

@@ -0,0 +1,273 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown, Search, X } from "@tea-ui/icons";
+import { cn, cva } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const comboboxTriggerVariants = cva(
+  [
+    "control-h inline-flex w-full items-center gap-2 border bg-surface px-[length:var(--tea-control-px)] text-ui text-fg",
+    "transition-colors duration-fast ease-standard",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:border-critical"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: "border-line data-[hover]:border-line-strong",
+        ghost: "border-transparent bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "outline" }
+  }
+);
+const DEFAULT_FILTER = (option, query) => {
+  const needle = query.trim().toLocaleLowerCase("de");
+  if (!needle) return true;
+  return option.label.toLocaleLowerCase("de").includes(needle);
+};
+const Combobox = React.forwardRef(function Combobox2({
+  label,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  onQueryChange,
+  filter = DEFAULT_FILTER,
+  emptyMessage = "Keine Treffer",
+  loading = false,
+  disabled = false,
+  multiple = false,
+  variant,
+  className,
+  ...props
+}, ref) {
+  const field = useFieldControlProps();
+  const stem = `tea-combobox-${React.useId().replace(/:/g, "")}`;
+  const listboxId = `${stem}-listbox`;
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const [selected, setSelected] = React.useState(
+    () => value !== void 0 ? [value] : defaultValue !== void 0 ? [defaultValue] : []
+  );
+  const controlledSelection = value === void 0 ? void 0 : value === "" ? [] : [value];
+  if (controlledSelection && !sameSelection(controlledSelection, selected)) {
+    setSelected(controlledSelection);
+  }
+  const isDisabled = field.disabled ?? disabled;
+  const isInvalid = field["aria-invalid"] ?? false;
+  const filtered = React.useMemo(
+    () => query.trim() ? options.filter((option) => filter(option, query)) : options,
+    [options, query, filter]
+  );
+  const listRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const commit = React.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      if (multiple) {
+        const next = selected.includes(option.value) ? selected.filter((entry) => entry !== option.value) : [...selected, option.value];
+        setSelected(next);
+        onValueChange?.(next[next.length - 1] ?? "");
+      } else {
+        setSelected([option.value]);
+        onValueChange?.(option.value);
+        setQuery("");
+        setOpen(false);
+      }
+      setActiveIndex(-1);
+    },
+    [multiple, onValueChange, selected]
+  );
+  const moveActive = React.useCallback(
+    (delta) => {
+      if (filtered.length === 0) return;
+      setActiveIndex((previous) => {
+        const next = previous + delta;
+        if (next < 0) return filtered.length - 1;
+        if (next >= filtered.length) return 0;
+        return next;
+      });
+    },
+    [filtered.length]
+  );
+  React.useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    const node = listRef.current.children[activeIndex];
+    node?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const activeId = activeIndex >= 0 ? `${stem}-option-${activeIndex}` : void 0;
+  const displayValue = multiple ? selected.map((v) => labelFor(options, v)).join(", ") : labelFor(options, selected[0] ?? "");
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "relative", ...dataSlot("combobox", "root"), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-haspopup": "listbox",
+        "aria-owns": listboxId,
+        className: cn(comboboxTriggerVariants({ variant }), "cursor-text", className),
+        "data-open": open || void 0,
+        ...stateAttributes({ disabled: isDisabled, loading, invalid: isInvalid }),
+        onClick: () => !isDisabled && setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx(Search, { size: 16, "aria-hidden": "true", className: "shrink-0 text-fg-muted" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: field.id,
+              role: "searchbox",
+              type: "text",
+              autoComplete: "off",
+              className: "min-w-0 flex-1 bg-transparent text-ui text-fg outline-none placeholder:text-fg-subtle",
+              placeholder: displayValue || label,
+              value: query,
+              disabled: isDisabled,
+              "aria-label": label,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeId,
+              "aria-describedby": field["aria-describedby"],
+              "aria-invalid": isInvalid || void 0,
+              "aria-busy": loading || void 0,
+              onChange: (event) => {
+                setQuery(event.target.value);
+                onQueryChange?.(event.target.value);
+                setOpen(true);
+                setActiveIndex(event.target.value ? 0 : -1);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown: (event) => {
+                switch (event.key) {
+                  case "ArrowDown":
+                    event.preventDefault();
+                    if (!open) setOpen(true);
+                    else moveActive(1);
+                    break;
+                  case "ArrowUp":
+                    event.preventDefault();
+                    if (!open) setOpen(true);
+                    else moveActive(-1);
+                    break;
+                  case "Home":
+                    if (open && filtered.length) {
+                      event.preventDefault();
+                      setActiveIndex(0);
+                    }
+                    break;
+                  case "End":
+                    if (open && filtered.length) {
+                      event.preventDefault();
+                      setActiveIndex(filtered.length - 1);
+                    }
+                    break;
+                  case "Enter":
+                    if (open && activeIndex >= 0 && filtered[activeIndex]) {
+                      event.preventDefault();
+                      commit(filtered[activeIndex]);
+                    }
+                    break;
+                  case "Escape":
+                    if (query) {
+                      event.preventDefault();
+                      setQuery("");
+                      setActiveIndex(-1);
+                    } else {
+                      setOpen(false);
+                    }
+                    break;
+                  default:
+                    break;
+                }
+              },
+              ...props
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx("span", { className: "text-fg-muted", "aria-hidden": "true", children: "\u2026" }) : null,
+          query ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Suche leeren",
+              className: "shrink-0 text-fg-muted hover:text-fg",
+              onClick: (event) => {
+                event.stopPropagation();
+                setQuery("");
+                onQueryChange?.("");
+              },
+              children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16, "aria-hidden": "true", className: "shrink-0 text-fg-muted" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        ref: listRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        "aria-multiselectable": multiple || void 0,
+        className: "absolute z-popover mt-1 max-h-72 w-full overflow-auto border border-line bg-surface-2 p-1 shadow-overlay",
+        ...dataSlot("combobox", "listbox"),
+        children: [
+          filtered.length === 0 ? /* @__PURE__ */ jsx("li", { role: "presentation", className: "px-3 py-2 text-micro text-fg-muted", children: emptyMessage }) : null,
+          filtered.map((option, index) => {
+            const isSelected = selected.includes(option.value);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                id: `${stem}-option-${index}`,
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": option.disabled || void 0,
+                "data-active": index === activeIndex || void 0,
+                className: cn(
+                  "flex cursor-default select-none flex-col gap-0.5 px-3 py-2 text-ui",
+                  "data-[active]:bg-accent-subtle",
+                  "data-[active=true]:bg-accent-subtle",
+                  option.disabled && "pointer-events-none opacity-50",
+                  isSelected && "text-primary"
+                ),
+                onPointerMove: () => setActiveIndex(index),
+                onClick: () => commit(option),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    option.label,
+                    isSelected ? /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true", className: "shrink-0" }) : null
+                  ] }),
+                  option.description ? /* @__PURE__ */ jsx("span", { className: "text-micro text-fg-muted", children: option.description }) : null
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    ) : null
+  ] });
+});
+function sameSelection(a, b) {
+  return a.length === b.length && a.every((entry, index) => entry === b[index]);
+}
+function labelFor(options, value) {
+  if (!value) return "";
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+export {
+  Combobox,
+  comboboxTriggerVariants
+};
+//# sourceMappingURL=combobox.js.map

package/dist/inputs/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/combobox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronDown, Search, X } from \"@tea-ui/icons\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — Combobox.\n *\n * The ARIA 1.2 combobox/listbox pattern, implemented properly. This component\n * exists because the audit's global search had *no* combobox semantics at all:\n * no `role=\"combobox\"`, no `aria-expanded`, no `aria-activedescendant`, no arrow\n * keys, and results that were plain buttons. A screen-reader user and a\n * keyboard-only user both had no way to know a result list existed, let alone\n * move through it.\n *\n * The pattern, in full:\n *  - the input is the combobox: `role=\"combobox\"`, `aria-expanded`,\n *    `aria-controls` pointing at the list, `aria-activedescendant` pointing at\n *    the active option;\n *  - the list is `role=\"listbox\"`, the options are `role=\"option\"` with\n *    `aria-selected`;\n *  - ArrowDown/ArrowUp move the active option and scroll it into view,\n *    Home/End jump, Enter selects, Escape reverts the query first and closes\n *    second;\n *  - the active option is tracked with `aria-activedescendant`, never by moving\n *    DOM focus, so the query text is not destroyed on every keystroke.\n *\n * Options are supplied, not fetched. The component takes `options` and an\n * optional `filter`; async resolution belongs to the product, which is why\n * `loading` and `emptyMessage` are props rather than a data source.\n */\n\nexport interface ComboboxOption {\n  /** The value emitted on selection. */\n  readonly value: string;\n  /** The visible label. */\n  readonly label: string;\n  /** Optional secondary text. Never the only carrier of meaning. */\n  readonly description?: string | undefined;\n  /** Group heading. Rendered as a `role=\"presentation\"` separator row. */\n  readonly group?: string | undefined;\n  /** Disabled options stay visible and stay focusable, but cannot be chosen. */\n  readonly disabled?: boolean | undefined;\n}\n\nexport interface ComboboxProps\n  extends Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"size\">,\n    Omit<VariantProps<typeof comboboxTriggerVariants>, \"size\"> {\n  /** The accessible name. Required — the search icon is not a label. */\n  label: string;\n  options: readonly ComboboxOption[];\n  /** The controlled value. */\n  value?: string | undefined;\n  /** The uncontrolled initial value. */\n  defaultValue?: string | undefined;\n  /** Called with the emitted `value` of the chosen option. */\n  onValueChange?: ((value: string) => undefined | void) | undefined;\n  /** Called on every keystroke, with the raw query. */\n  onQueryChange?: ((query: string) => void) | undefined;\n  /**\n   * Filtering. Defaults to a case- and diacritic-insensitive substring match\n   * over the label, so a product that needs fuzzy search opts in rather than\n   * getting it by accident.\n   */\n  filter?: ((option: ComboboxOption, query: string) => boolean) | undefined;\n  /** Shown when the query matches nothing. */\n  emptyMessage?: string | undefined;\n  /** A search is running. Shows a spinner and sets `aria-busy`. */\n  loading?: boolean | undefined;\n  /** Disable the whole control. */\n  disabled?: boolean | undefined;\n  /** Allow choosing more than one option. */\n  multiple?: boolean | undefined;\n  className?: string | undefined;\n}\n\nexport const comboboxTriggerVariants = cva(\n  [\n    \"control-h inline-flex w-full items-center gap-2 border bg-surface px-[length:var(--tea-control-px)] text-ui text-fg\",\n    \"transition-colors duration-fast ease-standard\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"aria-invalid:border-critical\",\n  ],\n  {\n    variants: {\n      variant: {\n        outline: \"border-line data-[hover]:border-line-strong\",\n        ghost: \"border-transparent bg-transparent\",\n      },\n    },\n    defaultVariants: { variant: \"outline\" },\n  },\n);\n\nconst DEFAULT_FILTER = (option: ComboboxOption, query: string): boolean => {\n  const needle = query.trim().toLocaleLowerCase(\"de\");\n  if (!needle) return true;\n  return option.label.toLocaleLowerCase(\"de\").includes(needle);\n};\n\n/** Stable, id-safe DOM ids for one listbox. */\nexport const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    label,\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    onQueryChange,\n    filter = DEFAULT_FILTER,\n    emptyMessage = \"Keine Treffer\",\n    loading = false,\n    disabled = false,\n    multiple = false,\n    variant,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const field = useFieldControlProps();\n\n  // `useId` is the only correct source of a DOM id here. A module-level counter\n  // breaks under concurrent rendering and across multiple roots, and reading a\n  // ref during render is something React 19 explicitly disallows. `useId` gives a\n  // stable, SSR-safe id that React itself deduplicates.\n  const stem = `tea-combobox-${React.useId().replace(/:/g, \"\")}`;\n  const listboxId = `${stem}-listbox`;\n\n  const [query, setQuery] = React.useState<string>(\"\");\n  const [open, setOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n  const [selected, setSelected] = React.useState<string[]>(() =>\n    value !== undefined ? [value] : defaultValue !== undefined ? [defaultValue] : [],\n  );\n\n  // A controlled value is synced during render rather than in an effect. An\n  // effect would paint one frame with the stale selection — a visible flash\n  // after a programmatic change — and comparing before writing is React's\n  // documented pattern for exactly this.\n  const controlledSelection = value === undefined ? undefined : value === \"\" ? [] : [value];\n  if (controlledSelection && !sameSelection(controlledSelection, selected)) {\n    setSelected(controlledSelection);\n  }\n\n  const isDisabled = field.disabled ?? disabled;\n  const isInvalid = field[\"aria-invalid\"] ?? false;\n\n  const filtered = React.useMemo(\n    () => (query.trim() ? options.filter((option) => filter(option, query)) : options),\n    [options, query, filter],\n  );\n\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const commit = React.useCallback(\n    (option: ComboboxOption) => {\n      if (option.disabled) return;\n      if (multiple) {\n        const next = selected.includes(option.value)\n          ? selected.filter((entry) => entry !== option.value)\n          : [...selected, option.value];\n        setSelected(next);\n        onValueChange?.(next[next.length - 1] ?? \"\");\n      } else {\n        setSelected([option.value]);\n        onValueChange?.(option.value);\n        setQuery(\"\");\n        setOpen(false);\n      }\n      setActiveIndex(-1);\n    },\n    [multiple, onValueChange, selected],\n  );\n\n  const moveActive = React.useCallback(\n    (delta: number) => {\n      if (filtered.length === 0) return;\n      setActiveIndex((previous) => {\n        const next = previous + delta;\n        if (next < 0) return filtered.length - 1;\n        if (next >= filtered.length) return 0;\n        return next;\n      });\n    },\n    [filtered.length],\n  );\n\n  // The active option must be scrolled into view, and it must be the element\n  // `aria-activedescendant` points at — one index, two consumers, no drift.\n  React.useEffect(() => {\n    if (activeIndex < 0 || !listRef.current) return;\n    const node = listRef.current.children[activeIndex] as HTMLElement | undefined;\n    node?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [open]);\n\n  const activeId = activeIndex >= 0 ? `${stem}-option-${activeIndex}` : undefined;\n  const displayValue = multiple ? selected.map((v) => labelFor(options, v)).join(\", \") : labelFor(options, selected[0] ?? \"\");\n\n  return (\n    <div ref={rootRef} className=\"relative\" {...dataSlot(\"combobox\", \"root\")}>\n      <div\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-haspopup=\"listbox\"\n        aria-owns={listboxId}\n        className={cn(comboboxTriggerVariants({ variant }), \"cursor-text\", className)}\n        data-open={open || undefined}\n        {...stateAttributes({ disabled: isDisabled, loading, invalid: isInvalid })}\n        onClick={() => !isDisabled && setOpen(true)}\n      >\n        <Search size={16} aria-hidden=\"true\" className=\"shrink-0 text-fg-muted\" />\n        <input\n          ref={ref}\n          id={field.id}\n          role=\"searchbox\"\n          type=\"text\"\n          autoComplete=\"off\"\n          className=\"min-w-0 flex-1 bg-transparent text-ui text-fg outline-none placeholder:text-fg-subtle\"\n          placeholder={displayValue || label}\n          value={query}\n          disabled={isDisabled}\n          aria-label={label}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeId}\n          aria-describedby={field[\"aria-describedby\"]}\n          aria-invalid={isInvalid || undefined}\n          aria-busy={loading || undefined}\n          onChange={(event) => {\n            setQuery(event.target.value);\n            onQueryChange?.(event.target.value);\n            setOpen(true);\n            setActiveIndex(event.target.value ? 0 : -1);\n          }}\n          onFocus={() => setOpen(true)}\n          onKeyDown={(event) => {\n            switch (event.key) {\n              case \"ArrowDown\":\n                event.preventDefault();\n                if (!open) setOpen(true);\n                else moveActive(1);\n                break;\n              case \"ArrowUp\":\n                event.preventDefault();\n                if (!open) setOpen(true);\n                else moveActive(-1);\n                break;\n              case \"Home\":\n                if (open && filtered.length) {\n                  event.preventDefault();\n                  setActiveIndex(0);\n                }\n                break;\n              case \"End\":\n                if (open && filtered.length) {\n                  event.preventDefault();\n                  setActiveIndex(filtered.length - 1);\n                }\n                break;\n              case \"Enter\":\n                if (open && activeIndex >= 0 && filtered[activeIndex]) {\n                  event.preventDefault();\n                  commit(filtered[activeIndex]!);\n                }\n                break;\n              case \"Escape\":\n                // Escape reverts the query before it closes the list. Closing\n                // first would leave a visibly empty field with a live query,\n                // which reads as data loss.\n                if (query) {\n                  event.preventDefault();\n                  setQuery(\"\");\n                  setActiveIndex(-1);\n                } else {\n                  setOpen(false);\n                }\n                break;\n              default:\n                break;\n            }\n          }}\n          {...props}\n        />\n        {loading ? <span className=\"text-fg-muted\" aria-hidden=\"true\">…</span> : null}\n        {query ? (\n          <button\n            type=\"button\"\n            aria-label=\"Suche leeren\"\n            className=\"shrink-0 text-fg-muted hover:text-fg\"\n            onClick={(event) => {\n              event.stopPropagation();\n              setQuery(\"\");\n              onQueryChange?.(\"\");\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        ) : null}\n        <ChevronDown size={16} aria-hidden=\"true\" className=\"shrink-0 text-fg-muted\" />\n      </div>\n\n      {open ? (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-label={label}\n          aria-multiselectable={multiple || undefined}\n          className=\"absolute z-popover mt-1 max-h-72 w-full overflow-auto border border-line bg-surface-2 p-1 shadow-overlay\"\n          {...dataSlot(\"combobox\", \"listbox\")}\n        >\n          {filtered.length === 0 ? (\n            <li role=\"presentation\" className=\"px-3 py-2 text-micro text-fg-muted\">\n              {emptyMessage}\n            </li>\n          ) : null}\n          {filtered.map((option, index) => {\n            const isSelected = selected.includes(option.value);\n            return (\n              <li\n                key={option.value}\n                id={`${stem}-option-${index}`}\n                role=\"option\"\n                aria-selected={isSelected}\n                aria-disabled={option.disabled || undefined}\n                data-active={index === activeIndex || undefined}\n                className={cn(\n                  \"flex cursor-default select-none flex-col gap-0.5 px-3 py-2 text-ui\",\n                  \"data-[active]:bg-accent-subtle\",\n                  \"data-[active=true]:bg-accent-subtle\",\n                  option.disabled && \"pointer-events-none opacity-50\",\n                  isSelected && \"text-primary\",\n                )}\n                onPointerMove={() => setActiveIndex(index)}\n                onClick={() => commit(option)}\n              >\n                <span className=\"flex items-center gap-2\">\n                  {option.label}\n                  {isSelected ? <Check size={14} aria-hidden=\"true\" className=\"shrink-0\" /> : null}\n                </span>\n                {option.description ? (\n                  <span className=\"text-micro text-fg-muted\">{option.description}</span>\n                ) : null}\n              </li>\n            );\n          })}\n        </ul>\n      ) : null}\n    </div>\n  );\n});\n\nfunction sameSelection(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((entry, index) => entry === b[index]);\n}\n\nfunction labelFor(options: readonly ComboboxOption[], value: string): string {\n  if (!value) return \"\";\n  return options.find((option) => option.value === value)?.label ?? value;\n}\n"],"mappings":"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","names":["Combobox"]}

package/dist/inputs/field.d.ts

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { Label } from 'radix-ui';
+
+/**
+ * TEA UI — the Field system.
+ *
+ * This file exists because of a defect the audit found in **four of five**
+ * field implementations across the two source projects: a `<label>` that was
+ * never associated with its control. The consequence is not subtle — a screen
+ * reader user reaches a text field and is told nothing about what belongs in
+ * it, and a voice-control user simply cannot fill the form, because there is no
+ * name to say. It is also invisible in review, because `<label>` next to
+ * `<input>` *looks* right.
+ *
+ * The fix is structural rather than a review rule. `Field` owns the id space;
+ * `FieldLabel`, `FieldDescription` and `FieldError` write into it; and every
+ * control calls {@link useFieldControlProps}. A control cannot be wired wrong,
+ * because it never writes the wiring by hand:
+ *
+ * ```tsx
+ * <Field invalid={!!error} required>
+ *   <FieldLabel>E-Mail</FieldLabel>
+ *   <Input type="email" />
+ *   <FieldDescription>Wir senden keine Bestätigung.</FieldDescription>
+ *   <FieldError>{error}</FieldError>
+ * </Field>
+ * ```
+ *
+ * The four parts degrade safely. `FieldError` with no message renders nothing
+ * at all, and the error id disappears from `aria-describedby` with it, so there
+ * is never a description pointing at an element that does not exist.
+ */
+/** The state a `Field` passes down to its parts. */
+interface FieldState {
+    /** The control holds a value that failed validation. */
+    invalid?: boolean | undefined;
+    /** The control may not be left empty. */
+    required?: boolean | undefined;
+    /** The control and everything around it is unavailable. */
+    disabled?: boolean | undefined;
+    /** The value is visible but not editable. */
+    readOnly?: boolean | undefined;
+}
+interface FieldContextValue {
+    /** Base name of the field, used to build the three ids. */
+    name: string;
+    /** The control's id. This is what `FieldLabel` points `htmlFor` at. */
+    id: string;
+    /** Id of the description element, whether or not one is rendered. */
+    descriptionId: string;
+    /** Id of the error element, whether or not one is rendered. */
+    errorId: string;
+    isInvalid: boolean;
+    isRequired: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+}
+/**
+ * Read the enclosing `Field`, or `null` when a control is used standalone.
+ *
+ * A control outside a `Field` is legal — a search field in a toolbar has
+ * nowhere sensible to put a `FieldDescription` — so every control must work
+ * without one. That is why this returns `null` rather than throwing.
+ */
+declare function useField(): FieldContextValue | null;
+/** The subset of a field's context a control needs to wire itself. */
+interface FieldControlProps {
+    id: string | undefined;
+    "aria-describedby": string | undefined;
+    "aria-invalid": true | undefined;
+    "aria-required": true | undefined;
+    disabled: true | undefined;
+    readOnly: true | undefined;
+}
+/**
+ * Wire a control to the enclosing `Field`. Call this in **every** control.
+ *
+ * The returned object is exactly the six attributes a control needs, so a
+ * control spreads it and is done:
+ *
+ * ```tsx
+ * const field = useFieldControlProps();
+ * return <input {...field} className={…} />;
+ * ```
+ *
+ * `aria-describedby` lists the description *and* the error, in that order. The
+ * ids are added only once the corresponding element is really on screen, so the
+ * attribute never points at nothing — an `aria-describedby` reference to a
+ * missing id is a validation error in axe and is silently dropped by some
+ * screen readers, which leaves the error text unannounced.
+ *
+ * Outside a `Field` every key is `undefined`, so `{...field}` is a no-op and
+ * the consumer's own `id` and handlers survive.
+ */
+declare function useFieldControlProps(): FieldControlProps;
+interface FieldProps extends Omit<React.ComponentProps<"div">, "children">, FieldState {
+    children?: React.ReactNode;
+    /** Render the consumer's single child element instead of a `<div>`. */
+    asChild?: boolean | undefined;
+    /** The element to render instead of `<div>`. */
+    as?: React.ElementType | undefined;
+    /**
+     * Override the generated id stem. Only needed when the ids must be stable
+     * across server and client renders; `React.useId` already is.
+     */
+    idBase?: string | undefined;
+}
+/**
+ * The container that owns a field's id space and state.
+ *
+ * Renders a `<div>` by default and nothing else — no role, no landmark. The
+ * field is a layout relationship, and inventing a role for it would put a
+ * meaningless entry in the screen reader's structure list.
+ *
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <FieldLabel>Name</FieldLabel>
+ *   <Input />
+ * </Field>
+ * ```
+ */
+declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface FieldLabelProps extends React.ComponentProps<typeof Label.Root> {
+    /**
+     * Render the required marker. Defaults to the enclosing `Field`'s `required`;
+     * set it explicitly to label a field as required outside one.
+     */
+    required?: boolean | undefined;
+}
+/**
+ * The field's label. A real `<label>` with `htmlFor` pointing at the control.
+ *
+ * Uses `Label.Root` from `radix-ui` rather than a bare `<label>` so that
+ * clicking the label activates the control even when the control is a Radix
+ * primitive rendering a `<button>` rather than an `<input>`.
+ *
+ * The required marker is a visible, `aria-hidden` `*` with a `title`, and the
+ * requirement itself is carried by the control's `required` / `aria-required`.
+ * It is deliberately **not** a visually hidden "Pflichtfeld" word inside the
+ * label: that would append to the control's accessible name, so the control
+ * would be announced as "E-Mail Pflichtfeld" instead of "E-Mail", and a
+ * consumer matching on the visible label would find nothing. The attribute
+ * already says it, and it says it correctly.
+ *
+ * @example
+ * ```tsx
+ * <FieldLabel required>E-Mail</FieldLabel>
+ * ```
+ */
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+type FieldDescriptionProps = React.ComponentProps<"p">;
+/**
+ * Help text for the field, associated through `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <FieldDescription>Nur Großbuchstaben, Zahlen und Bindestriche.</FieldDescription>
+ * ```
+ */
+declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface FieldErrorProps extends Omit<React.ComponentProps<"p">, "children"> {
+    /**
+     * The error text. `null`, `undefined` and `false` render nothing, which is
+     * what lets a caller write `<FieldError>{error}</FieldError>` and leave it in
+     * the tree permanently.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The field's error message: `role="alert"`, so it is announced when it appears.
+ *
+ * A colour change is not an announcement. Without `role="alert"` a validation
+ * error is invisible to a screen reader user, who is left with a red box and no
+ * idea what is wrong with what they just typed.
+ *
+ * Renders nothing when there is no message — including when it is inside a
+ * `Field` and therefore participates in `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <FieldError>{errors.email}</FieldError>
+ * ```
+ */
+declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface FieldGroupProps extends Omit<React.ComponentProps<"fieldset">, "children"> {
+    children?: React.ReactNode;
+    /**
+     * The group's label. Rendered as the `<legend>`, which is what associates the
+     * set of controls with a name — `aria-label` on a `<fieldset>` does not
+     * become the group's accessible name in every browser.
+     */
+    legend?: React.ReactNode;
+    /** Help text for the whole set, associated with the `<fieldset>`. */
+    description?: React.ReactNode;
+}
+/**
+ * A named set of related controls: `<fieldset>` + `<legend>`.
+ *
+ * A native `<fieldset disabled>` also disables every form control inside it,
+ * which is the cheapest possible "these five settings are not editable" — a
+ * `<fieldset>` in a `<form>` participates in form semantics that a `div` cannot.
+ *
+ * One component rather than `FieldSet` + `FieldLegend`: a legend is required
+ * for the fieldset to be named, so separating them produces an unnamed group
+ * whenever the legend is forgotten. The audit found plenty of those.
+ *
+ * @example
+ * ```tsx
+ * <FieldGroup legend="Benachrichtigungen" disabled={saving}>
+ *   <Field>
+ *     <FieldLabel>Fehler per E-Mail</FieldLabel>
+ *     <Switch />
+ *   </Field>
+ * </FieldGroup>
+ * ```
+ */
+declare const FieldGroup: React.ForwardRefExoticComponent<Omit<FieldGroupProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+
+export { Field, type FieldContextValue, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldState, useField, useFieldControlProps };