@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/Button.js

@@ -39,19 +39,23 @@ const Button = forwardRef(
         ...props,
         children: [
           loading !== void 0 || result !== void 0 ? /* @__PURE__ */ jsx(ButtonFeedback, { loading: !!loading, loadingDelay, result, resultLabels, children }) : children,
-          shortcut && shortcut.length > 0 && /* @__PURE__ */ jsx(ShortcutHint, { keys: shortcut, label: icon ? props["aria-label"] : void 0, ownsAria: props["aria-keyshortcuts"] === void 0 })
+          shortcut && shortcut.length > 0 && /* @__PURE__ */ jsx(ShortcutHint, { keys: shortcut, label: icon ? props["aria-label"] : void 0, describedBy: props["aria-describedby"] })
         ]
       }
     );
   }
 );
 Button.displayName = "Button";
-function ButtonLink({ href, variant = "secondary", size = "md", icon = false, wrap = false, disabled = false, renderLink, className, children, onClick, ...props }) {
+function ButtonLink({ href, variant = "secondary", size = "md", icon = false, wrap = false, disabled = false, renderLink, shortcut, className, children, onClick, ...props }) {
   const classes = buttonClasses(variant, size, icon, wrap, className);
   if (disabled) {
     return /* @__PURE__ */ jsx("a", { ...props, className: classes, role: "link", "aria-disabled": "true", children });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...props, href, onClick, className: classes, children }) });
+  const content = shortcut && shortcut.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(ShortcutHint, { keys: shortcut, label: icon ? props["aria-label"] : void 0, describedBy: props["aria-describedby"] })
+  ] }) : children;
+  return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...props, href, onClick, className: classes, children: content }) });
 }
 function ButtonGroup({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-btn-group", className), children });

package/dist/components/Card.d.ts

@@ -33,5 +33,22 @@ interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
 }
 /** A whole-card anchor with visible hover and keyboard focus affordances. */
 declare function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }: CardLinkProps): react.JSX.Element;
+interface InsetProps extends HTMLAttributes<HTMLDivElement> {
+    /** `md` (default) pads with `--uix-space-4`; `sm` with `--uix-space-3`, for a dense card. */
+    padding?: 'sm' | 'md';
+    /**
+     * `sunken` (default) is `--uix-bg-subtle` on the card's surface; `surface` is for a well on a
+     * panel that is already subtle.
+     */
+    tone?: 'sunken' | 'surface';
+    children?: ReactNode;
+}
+/**
+ * A bordered, sunken well inside a card body (HAR-1818), over `.uix-inset`: for a preview or a
+ * specimen (a rendered header, an image crop, a code sample). Use it instead of a `Card` in a
+ * `Card`, which brings a second shadow, card padding and card semantics. It lays out nothing:
+ * the content is yours. Give it `role="group"` and an `aria-label` when the preview needs a name.
+ */
+declare function Inset({ padding, tone, children, className, ...props }: InsetProps): react.JSX.Element;
 
-export { Card, CardLink, type CardLinkProps, type CardProps };
+export { Card, CardLink, type CardLinkProps, type CardProps, Inset, type InsetProps };

package/dist/components/Card.js

@@ -34,7 +34,11 @@ function CardLink({ title, subtitle, headerAction, footer, children, className,
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
   ] });
 }
+function Inset({ padding = "md", tone = "sunken", children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inset", padding === "sm" && "uix-inset--sm", tone === "surface" && "uix-inset--surface", className), ...props, children });
+}
 export {
   Card,
-  CardLink
+  CardLink,
+  Inset
 };

package/dist/components/ChangeHighlight.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ChangeHighlightProps extends HTMLAttributes<HTMLElement> {
+    /** The value shown inside. When it changes after mount the element flashes; never on the first render. */
+    value: unknown;
+    /** The element to render (default `span`): `td`, `tr`, `div`, `li`… A `tr` tints its cells. */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * `tint` (default) fades a background tint, for a row, a cell or a field; `ring` fades an
+     * outline instead, for something with a colour of its own, such as a status pill.
+     */
+    variant?: 'tint' | 'ring';
+    /** Said politely when the value changes, e.g. "Status changed to Resolved by A. Novak". */
+    announce?: string;
+    /** No highlight, e.g. while the person is editing this value themselves. */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Shows that a value changed in place (HAR-2585, motion standard §2.5): a live update, the
+ * result of a transition, a rolled-back optimistic change. The element is tinted at once and
+ * the tint fades; under reduced motion or forced colours it is outlined for the same time
+ * instead. The flash is the signal and its place the location; pass `announce` for the
+ * description. For an element you render yourself, use `useChangeHighlight`; on plain markup,
+ * add `.uix-changed` (remove it, force a reflow and add it again to replay).
+ */
+declare const ChangeHighlight: react.ForwardRefExoticComponent<ChangeHighlightProps & react.RefAttributes<HTMLElement | null>>;
+
+export { ChangeHighlight, type ChangeHighlightProps };

package/dist/components/ChangeHighlight.js

@@ -0,0 +1,21 @@
+"use client";
+import { createElement, forwardRef, useCallback } from "react";
+import { cx } from "../cx.js";
+import { useChangeHighlight } from "../hooks/useChangeHighlight.js";
+const ChangeHighlight = forwardRef(function ChangeHighlight2({ value, as = "span", variant = "tint", announce, disabled, className, children, ...props }, forwarded) {
+  const ref = useChangeHighlight(value, { announce, disabled });
+  const setRef = useCallback((node) => {
+    ref.current = node;
+    if (typeof forwarded === "function") forwarded(node);
+    else if (forwarded) forwarded.current = node;
+  }, [ref, forwarded]);
+  return createElement(as, {
+    ...props,
+    ref: setRef,
+    className: cx("uix-change-highlight", variant === "ring" && "uix-change-highlight--ring", className)
+  }, children);
+});
+ChangeHighlight.displayName = "ChangeHighlight";
+export {
+  ChangeHighlight
+};

package/dist/components/ChartCore.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
 import { cx } from "../cx.js";
 import { mergeChartTheme, uixChartTheme, uixChartTokens } from "../chart-theme.js";
+import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
 function readToken(name) {
   if (typeof getComputedStyle === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -15,7 +16,7 @@ function themed(option, theme, element) {
   return theme === "none" ? resolved : mergeChartTheme(uixChartTheme(element), resolved);
 }
 function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  if (prefersReducedMotion()) {
     return { ...option, animation: false };
   }
   return option;

package/dist/components/Checkbox.d.ts

@@ -6,5 +6,31 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
     indeterminate?: boolean;
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+interface CheckboxGroupProps {
+    children: ReactNode;
+    /** The group's name, rendered as the `<legend>`: announced with each checkbox (HAR-1799). */
+    label: ReactNode;
+    /** Help under the boxes, tied to the group with `aria-describedby`. */
+    hint?: ReactNode;
+    /** Shown instead of the hint and announced (`role="alert"`). */
+    error?: ReactNode;
+    /** Draws the required marker after the legend. Which boxes must be ticked is your rule to check. */
+    required?: boolean;
+    /** Disables every checkbox in the group (a disabled `<fieldset>`). */
+    disabled?: boolean;
+    /**
+     * The most columns the boxes form. Default 1. A column is never narrower than 10rem: on a phone,
+     * or in a narrow card, the boxes fall back to fewer columns.
+     */
+    columns?: number;
+    id?: string;
+    className?: string;
+}
+/**
+ * Checkboxes under one name (HAR-1799; MOTUS UXR-05): a `<fieldset>` whose `<legend>` names the
+ * group, so a screen reader says "Tags, group" before each box, with the field's hint and error
+ * slot below. The checkbox counterpart of `<RadioGroup label>`. Put `Checkbox`es inside.
+ */
+declare function CheckboxGroup({ children, label, hint, error, required, disabled, columns, id, className }: CheckboxGroupProps): react.JSX.Element;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/components/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useId, useRef } from "react";
 import { cx } from "../cx.js";
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "1.5,6 4.5,9 10.5,3" }) });
 const IndeterminateIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "8", height: "2", rx: "1", fill: "currentColor" }) });
@@ -30,6 +30,35 @@ const Checkbox = forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
+function CheckboxGroup({ children, label, hint, error, required, disabled, columns = 1, id, className }) {
+  const uid = useId();
+  const msgId = `${id ?? uid}-msg`;
+  const message = error != null && error !== false ? error : hint;
+  const cols = Math.max(1, Math.floor(columns));
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      id,
+      className: cx("uix-checkbox-group", className),
+      disabled,
+      "aria-describedby": message != null && message !== false ? msgId : void 0,
+      "data-invalid": error != null && error !== false || void 0,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "uix-checkbox-group__legend", "data-required": required || void 0, children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "uix-checkbox-group__options",
+            style: cols > 1 ? { "--uix-checkbox-group-columns": cols } : void 0,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error != null && error !== false ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : hint != null && hint !== false ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
+      ]
+    }
+  );
+}
 export {
-  Checkbox
+  Checkbox,
+  CheckboxGroup
 };

package/dist/components/Chip.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, MouseEvent } from 'react';
 import { UixRenderLink } from '../link.js';
 
 interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
@@ -11,8 +11,12 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     /** Toggle chip: `aria-pressed`, filled while on. Pair with `onPressedChange`. */
     pressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
-    /** A chip that acts in place (e.g. opens the filter it shows for editing). */
-    onClick?: () => void;
+    /**
+     * A chip that acts in place (e.g. opens the filter it shows for editing). Gets the click event,
+     * so a chip can be the `trigger` of a `Menu` (which reads `defaultPrevented`); a handler that
+     * takes no argument still works. Not called while `disabled`.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /** A link chip. */
     href?: string;
     renderLink?: UixRenderLink;

package/dist/components/Chip.js

@@ -30,10 +30,10 @@ const Chip = forwardRef(function Chip2({
     /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children }),
     count != null && /* @__PURE__ */ jsx("span", { className: "uix-chip__count", children: count })
   ] });
-  const handleClick = () => {
+  const handleClick = (event) => {
     if (disabled) return;
     if (toggle) onPressedChange?.(!pressed);
-    onClick?.();
+    onClick?.(event);
   };
   const outer = cx(
     "uix-chip",

package/dist/components/CodeDisplay.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The words of a `CodeDisplay` (HAR-1253). */
+interface CodeDisplayLabels {
+    /** The live countdown; `{time}` is `m:ss` (or `h:mm:ss`). */
+    expiresIn: string;
+    /** Announced once when `warnBefore` seconds are left; `{time}` is that time as `m:ss`. */
+    expiresSoon: string;
+    /** Shown, and announced once, when the code has expired. Text, so the state never rests on colour. */
+    expired: string;
+    /** The copy button's accessible name. */
+    copy: string;
+    /** Announced after a copy. */
+    copied: string;
+    /** Announced when the copy failed. */
+    copyFailed: string;
+}
+declare const DEFAULT_CODE_DISPLAY_LABELS: CodeDisplayLabels;
+interface CodeDisplayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The code, e.g. `"K7Q4PX9MW"` or `"K7Q-4PX-9MW"`. A code that already contains spaces or
+     * hyphens is shown in those groups; otherwise it is cut into groups of `groupSize`.
+     */
+    code: string;
+    /** The visible name above the code, e.g. "Pairing code"; it also names the group. */
+    label: ReactNode;
+    /** Characters per group, or the length of each group in turn (`[4, 4, 4]`). Default 3. */
+    groupSize?: number | readonly number[];
+    /** Drawn between groups, never read out. Default `-`. */
+    separator?: string;
+    /** `md` (default) for a panel; `lg` for a code read across a counter. */
+    size?: 'md' | 'lg';
+    /** When the code stops working (an ISO instant, epoch milliseconds or a Date): shows a countdown, then the expired state. */
+    expiresAt?: string | number | Date;
+    /**
+     * Seconds before expiry when the countdown turns to a warning and a screen reader hears it
+     * once (`labels.expiresSoon`). Default 60; 0 turns the warning off.
+     */
+    warnBefore?: number;
+    /** Called once when the countdown reaches zero while the component is on screen. */
+    onExpire?: () => void;
+    /** Adds a copy button while the code is live. */
+    copyable?: boolean;
+    /**
+     * What a screen reader says for one character. Default: the character itself, so "K7Q" is
+     * read "K, 7, Q". Use it for a spelling alphabet or to tell O from 0.
+     */
+    spell?: (character: string) => string;
+    /** The words. Default: `UixLabelsProvider` `codeDisplay`, then English. */
+    labels?: Partial<CodeDisplayLabels>;
+}
+/** The code in its display groups. */
+declare function codeGroups(code: string, groupSize?: number | readonly number[]): string[];
+/** `m:ss`, or `h:mm:ss` from an hour up, for a number of whole seconds. */
+declare function formatCountdown(seconds: number): string;
+/**
+ * A one-time code shown large (HAR-1253; SHOPx PRE-08 till pairing, the shopper's voucher):
+ * monospace characters in groups, spelled character by character to a screen reader, an
+ * optional countdown that ends in an expired state said in words, and an optional copy button.
+ * The consumer makes the code and enforces its expiry; this only shows it.
+ */
+declare function CodeDisplay({ code, label, groupSize, separator, size, expiresAt, warnBefore, onExpire, copyable, spell, labels: labelsProp, className, ...props }: CodeDisplayProps): react.JSX.Element;
+
+export { CodeDisplay, type CodeDisplayLabels, type CodeDisplayProps, DEFAULT_CODE_DISPLAY_LABELS, codeGroups, formatCountdown };

package/dist/components/CodeDisplay.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { CopyButton } from "./CopyButton.js";
+const DEFAULT_CODE_DISPLAY_LABELS = {
+  expiresIn: "Expires in {time}",
+  expiresSoon: "{time} left before the code expires",
+  expired: "Expired. Ask for a new code.",
+  copy: "Copy code",
+  copied: "Copied",
+  copyFailed: "Could not copy. Select the code instead."
+};
+function codeGroups(code, groupSize = 3) {
+  const trimmed = code.trim();
+  if (/[\s-]/.test(trimmed)) return trimmed.split(/[\s-]+/).filter(Boolean);
+  const sizes = typeof groupSize === "number" ? [groupSize] : groupSize;
+  const groups = [];
+  for (let i = 0, at = 0; at < trimmed.length; i += 1) {
+    const size = Math.max(1, Math.floor(sizes[Math.min(i, sizes.length - 1)] ?? trimmed.length));
+    groups.push(trimmed.slice(at, at + size));
+    at += size;
+  }
+  return groups;
+}
+function formatCountdown(seconds) {
+  const s = Math.max(0, Math.ceil(seconds));
+  const hours = Math.floor(s / 3600);
+  const minutes = Math.floor(s % 3600 / 60);
+  const rest = String(s % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${rest}` : `${minutes}:${rest}`;
+}
+const instant = (value) => value === void 0 ? void 0 : new Date(value).getTime();
+function CodeDisplay({
+  code,
+  label,
+  groupSize = 3,
+  separator = "-",
+  size = "md",
+  expiresAt,
+  warnBefore = 60,
+  onExpire,
+  copyable = false,
+  spell,
+  labels: labelsProp,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_CODE_DISPLAY_LABELS, ...uixLabels.codeDisplay, ...labelsProp };
+  const labelId = useId();
+  const deadline = instant(expiresAt);
+  const [now, setNow] = useState(() => Date.now());
+  const remaining = deadline === void 0 || Number.isNaN(deadline) ? void 0 : deadline - now;
+  const expired = remaining !== void 0 && remaining <= 0;
+  const warnAt = Math.max(0, warnBefore) * 1e3;
+  const phase = remaining === void 0 ? "live" : remaining <= 0 ? "expired" : remaining <= warnAt ? "soon" : "live";
+  const [announcement, setAnnouncement] = useState("");
+  const shownPhase = useRef(phase);
+  const onExpireRef = useRef(onExpire);
+  onExpireRef.current = onExpire;
+  const labelsRef = useRef(labels);
+  labelsRef.current = labels;
+  useEffect(() => {
+    if (deadline === void 0 || Number.isNaN(deadline)) return void 0;
+    let timer;
+    const tick = () => {
+      const current = Date.now();
+      setNow(current);
+      const left = deadline - current;
+      if (left > 0) timer = setTimeout(tick, left % 1e3 || 1e3);
+    };
+    tick();
+    return () => clearTimeout(timer);
+  }, [deadline]);
+  useEffect(() => {
+    const before = shownPhase.current;
+    shownPhase.current = phase;
+    if (phase === before) return;
+    if (phase === "live") setAnnouncement("");
+    else if (phase === "soon" && before === "live") setAnnouncement(fillLabel(labelsRef.current.expiresSoon, { time: formatCountdown(warnAt / 1e3) }));
+    else if (phase === "expired") {
+      setAnnouncement(labelsRef.current.expired);
+      onExpireRef.current?.();
+    }
+  }, [phase, warnAt]);
+  const groups = codeGroups(code, groupSize);
+  const say = spell ?? ((character) => character);
+  const spoken = groups.map((group) => Array.from(group).map(say).join(" ")).join(", ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-code-display", size === "lg" && "uix-code-display--lg", className),
+      role: "group",
+      "aria-labelledby": labelId,
+      "data-state": phase,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "uix-code-display__label", id: labelId, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-code-display__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-code-display__code", "aria-hidden": "true", translate: "no", children: groups.map((group, index) => (
+            // The separator ends its group, so a wrapped line never starts with one.
+            /* @__PURE__ */ jsxs("span", { className: "uix-code-display__group", children: [
+              group,
+              index < groups.length - 1 && /* @__PURE__ */ jsx("span", { className: "uix-code-display__sep", children: separator })
+            ] }, index)
+          )) }),
+          /* @__PURE__ */ jsx("span", { className: "uix-code-display__spoken uix-visually-hidden", children: spoken }),
+          copyable && !expired && /* @__PURE__ */ jsx(CopyButton, { value: groups.join(""), label: labels.copy, copiedLabel: labels.copied, failedLabel: labels.copyFailed })
+        ] }),
+        remaining !== void 0 && /* @__PURE__ */ jsx("div", { className: "uix-code-display__meta", suppressHydrationWarning: true, children: expired ? labels.expired : fillLabel(labels.expiresIn, { time: formatCountdown(remaining / 1e3) }) }),
+        /* @__PURE__ */ jsx("span", { role: "status", className: "uix-visually-hidden", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  CodeDisplay,
+  DEFAULT_CODE_DISPLAY_LABELS,
+  codeGroups,
+  formatCountdown
+};

package/dist/components/Combobox.d.ts

@@ -1,19 +1,40 @@
 import * as react from 'react';
-import { HTMLAttributes } from 'react';
-import { ComboboxOption } from '../combobox-model.js';
+import { HTMLAttributes, AriaAttributes } from 'react';
+import { ComboboxOption, ComboboxGroup } from '../combobox-model.js';
+import { Placement } from '../overlay-position.js';
 
 interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    options: readonly ComboboxOption[];
+    /** The options, and groups of options (`{ label, options }`, HAR-1588). */
+    options: readonly (ComboboxOption | ComboboxGroup)[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string, option: ComboboxOption) => void;
+    /** The field's name. Not used as its name when `aria-labelledby` points at a visible label. */
     label: string;
     placeholder?: string;
+    /** Shown in the open list when nothing matches (outside the listbox, so it is never an option). */
     emptyLabel: string;
     name?: string;
     disabled?: boolean;
+    /** Ids of the visible label(s) that name the field; replaces `label` as its name. */
+    'aria-labelledby'?: string;
+    /** Ids of hint or error text; lands on the input. */
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    /** Id of the input itself (for a `<label for>`); `id` stays on the wrapper. */
+    inputId?: string;
+    /** Preferred side of the list. Default `'bottom-start'`; it flips when there is no room. */
+    placement?: Placement;
 }
-/** Searchable single-select combobox with keyboard navigation and no framework dependencies. */
-declare function Combobox({ options, value, defaultValue, onValueChange, label, placeholder, emptyLabel, name, disabled, className, ...props }: ComboboxProps): react.JSX.Element;
+/**
+ * An editable combobox (HAR-1588): type to filter, choose with the keyboard or the pointer. It
+ * follows the WAI-ARIA APG combobox with a listbox popup, at parity with `Select`: the list is a
+ * top-layer popover placed with `useAnchoredPosition`, so a Drawer, a Popover or an
+ * `overflow: hidden` cell never clips it; ↑ ↓ PageUp PageDown move (Home and End too while an
+ * option is active), disabled options are skipped and the list does not wrap; Enter chooses;
+ * Escape closes the list and puts the chosen option's text back, as leaving the field does.
+ * Groups render as `role="group"`; the no-match row sits outside the listbox.
+ */
+declare function Combobox({ options, value, defaultValue, onValueChange, label, placeholder, emptyLabel, name, disabled, className, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, inputId, placement, ...props }: ComboboxProps): react.JSX.Element;
 
-export { Combobox, ComboboxOption, type ComboboxProps };
+export { Combobox, ComboboxGroup, ComboboxOption, type ComboboxProps };