@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/combobox/combobox-clear.d.mts

@@ -0,0 +1,34 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-clear.d.ts
+export interface ComboboxClearState {
+  /** Optimistic selection. */
+  readonly value: string | null;
+  readonly inputValue: string;
+  readonly disabled: boolean;
+}
+export interface ComboboxClearProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onPointerDown" | "onMouseDown" | "tabIndex" | "disabled" | "className" | "style" | "children"> {
+  /** Disables this button; the Root's `disabled` does too. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, ComboboxClearState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxClearState>;
+  children?: StateValue<ReactNode, ComboboxClearState>;
+  /** Should render a `<button>`. */
+  render?: RenderProp<ComponentPropsWithRef<"button">, ComboboxClearState>;
+}
+/**
+ * The optional button that clears the combobox: `<button type="button" tabindex="-1">`. A click
+ * empties the text (urgent) and dispatches `valueChangeAction(null)` unless nothing is selected;
+ * the input keeps focus. Always rendered: hide it with CSS (`:placeholder-shown`) or `state`.
+ * A click while the listbox is open closes it (the platform's light dismiss: the button is
+ * outside the popup).
+ *
+ * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,
+ * `onMouseDown`, `data-disabled`.
+ */
+export declare function ComboboxClear({ disabled: ownDisabled, className, style, children, render, ...rest }: ComboboxClearProps): ReactNode;
+export declare namespace ComboboxClear {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-clear.d.mts.map

package/dist/combobox/combobox-clear.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-clear.d.mts","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"mappings":";;;iBAeiB;;WAEN;WACA;WACA;;iBAGM,2BAA2B,KAC1C;;EAWA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,gBACd,UAAU,aACV,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBAPL"}

package/dist/combobox/combobox-clear.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { useComboboxContext } from "./combobox-context.mjs";
+import { useNameWarning } from "./combobox-trigger.mjs";
+//#region src/combobox/combobox-clear.tsx
+/**
+* The optional button that clears the combobox: `<button type="button" tabindex="-1">`. A click
+* empties the text (urgent) and dispatches `valueChangeAction(null)` unless nothing is selected;
+* the input keeps focus. Always rendered: hide it with CSS (`:placeholder-shown`) or `state`.
+* A click while the listbox is open closes it (the platform's light dismiss: the button is
+* outside the popup).
+*
+* Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,
+* `onMouseDown`, `data-disabled`.
+*/
+function ComboboxClear({ disabled: ownDisabled = false, className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Clear");
+	const disabled = ownDisabled || ctx.disabled;
+	const ref = useNameWarning("Combobox.Clear");
+	const state = {
+		value: ctx.value,
+		inputValue: ctx.inputValue,
+		disabled
+	};
+	const libraryProps = {
+		...rendersButton(render) && { type: "button" },
+		tabIndex: -1,
+		disabled,
+		onPointerDown: (event) => {
+			event.preventDefault();
+		},
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick: (event) => {
+			if (disabled) return;
+			ctx.clear(event.nativeEvent);
+		},
+		"data-disabled": dataAttr(disabled)
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxClear.displayName = "ComboboxClear";
+//#endregion
+export { ComboboxClear };
+
+//# sourceMappingURL=combobox-clear.mjs.map

package/dist/combobox/combobox-clear.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-clear.mjs","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\nimport { useNameWarning } from \"./combobox-trigger.js\";\n\nexport interface ComboboxClearState {\n  /** Optimistic selection. */\n  readonly value: string | null;\n  readonly inputValue: string;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxClearProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"tabIndex\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Disables this button; the Root's `disabled` does too. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxClearState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxClearState>;\n  children?: StateValue<ReactNode, ComboboxClearState>;\n  /** Should render a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ComboboxClearState>;\n}\n\n/**\n * The optional button that clears the combobox: `<button type=\"button\" tabindex=\"-1\">`. A click\n * empties the text (urgent) and dispatches `valueChangeAction(null)` unless nothing is selected;\n * the input keeps focus. Always rendered: hide it with CSS (`:placeholder-shown`) or `state`.\n * A click while the listbox is open closes it (the platform's light dismiss: the button is\n * outside the popup).\n *\n * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,\n * `onMouseDown`, `data-disabled`.\n */\nexport function ComboboxClear({\n  disabled: ownDisabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxClearProps) {\n  const ctx = useComboboxContext(\"Combobox.Clear\");\n  const disabled = ownDisabled || ctx.disabled;\n  const ref = useNameWarning(\"Combobox.Clear\");\n  const state: ComboboxClearState = { value: ctx.value, inputValue: ctx.inputValue, disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    tabIndex: -1,\n    disabled,\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n      ctx.clear(event.nativeEvent);\n    },\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ComboboxClearState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxClear.displayName = \"ComboboxClear\";\n"],"mappings":";;;;;;;;;;;;;;;;AAoDA,SAAgB,cAAc,EAC5B,UAAU,cAAc,OACxB,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,WAAW,eAAe,IAAI;CACpC,MAAM,MAAM,eAAe,gBAAgB;CAC3C,MAAM,QAA4B;EAAE,OAAO,IAAI;EAAO,YAAY,IAAI;EAAY;CAAS;CAE3F,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD,UAAU;EACV;EACA,gBAAgB,UAA2C;GACzD,MAAM,eAAe;EACvB;EACA,cAAc,UAAyC;GACrD,MAAM,eAAe;EACvB;EACA,UAAU,UAAyC;GACjD,IAAI,UAAU;GACd,IAAI,MAAM,MAAM,WAAW;EAC7B;EACA,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA+D;EACpE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/combobox/combobox-context.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/combobox/combobox-context.ts
+const ComboboxContext = createContext(null);
+function useComboboxContext(part) {
+	const context = use(ComboboxContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Combobox.Root.`);
+	return context;
+}
+/** Provided by `Combobox.Popup` (a List outside a Popup warns). */
+const ComboboxPopupContext = createContext(false);
+/** Provided by `Combobox.List` (an Option outside a List warns). */
+const ComboboxListContext = createContext(false);
+/** `Combobox.Group`: the id its `Combobox.GroupLabel` renders. */
+const ComboboxGroupContext = createContext(null);
+/** The id fragment of an option value: stable across result sets, no whitespace (design 3.5). */
+function optionId(prefix, value) {
+	return `${prefix}${encodeURIComponent(value)}`;
+}
+//#endregion
+export { ComboboxContext, ComboboxGroupContext, ComboboxListContext, ComboboxPopupContext, optionId, useComboboxContext };
+
+//# sourceMappingURL=combobox-context.mjs.map

package/dist/combobox/combobox-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-context.mjs","names":[],"sources":["../../src/combobox/combobox-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { PopoverRootValue } from \"../internal/use-popover-root.js\";\n\n/** What a mounted `Combobox.Option` tells its Root (design 2, \"mounted options, labels\"). */\nexport interface ComboboxOptionEntry {\n  readonly element: HTMLElement;\n  /** The `label` prop; `undefined`: the element's trimmed `textContent` at the moment of use. */\n  readonly label: string | undefined;\n  readonly disabled: boolean;\n}\n\n/** One Combobox: what its Root provides to every part (design 14, `combobox-context.ts`). */\nexport interface ComboboxContextValue {\n  /** The shared popover machinery (`usePopoverRoot`, library mode). */\n  readonly popover: PopoverRootValue;\n  readonly ids: {\n    readonly input: string;\n    readonly label: string;\n    readonly list: string;\n    /** `${root}-option-`: an Option's id is this plus `encodeURIComponent(value)`. */\n    readonly optionPrefix: string;\n  };\n  /** Optimistic selection. */\n  readonly value: string | null;\n  /** The `valueChangeAction` transition is in flight. */\n  readonly valuePending: boolean;\n  /** `valuePending` or the open transition is in flight (the Root's `pending`). */\n  readonly pending: boolean;\n  /** The urgent text. */\n  readonly inputValue: string;\n  /** `useDeferredValue(inputValue)`: what the mounted results are for. */\n  readonly query: string;\n  readonly stale: boolean;\n  /** The option `aria-activedescendant` points at (urgent virtual focus), or `null`. */\n  readonly activeValue: string | null;\n  /** No option is mounted and the results are settled (`Empty`, `data-empty`). */\n  readonly empty: boolean;\n  /** A `Combobox.Status` is mounted inside the List (a Suspense fallback): results are loading. */\n  readonly loading: boolean;\n  /** A `Combobox.Label` is mounted (the List's `aria-labelledby` names it only then). */\n  readonly hasLabel: boolean;\n  readonly disabled: boolean;\n  readonly inputRef: RefObject<HTMLInputElement | null>;\n  readonly listRef: RefObject<HTMLElement | null>;\n  /** Registers a mounted Option; returns the unregistration. */\n  readonly registerOption: (value: string, entry: ComboboxOptionEntry) => () => void;\n  /** Registers a mounted `Combobox.Status`; while one is mounted the results count as loading. */\n  readonly registerStatus: () => () => void;\n  /** Registers a mounted `Combobox.Label`; returns the unregistration. */\n  readonly registerLabel: () => () => void;\n  /** Make `value` the active option (urgent; never dispatches). */\n  readonly setActive: (value: string | null) => void;\n  /** Accept an option (design 5.2): urgent text write, dispatch, close when it settles. */\n  readonly accept: (value: string, event: Event) => void;\n  /** `Combobox.Clear` (design 3.3). */\n  readonly clear: (event: Event) => void;\n  /** The `change` of the Input: urgent text write and an open request (design 2.2, 5.1). */\n  readonly typed: (text: string, event: Event) => void;\n  /** Keyboard model of design section 8, run by the Input's `onKeyDown`. */\n  readonly keyDown: (event: KeyboardEvent) => boolean;\n  /** Focus left the Input (design 5.4): close at once, then revert or commit free text. */\n  readonly focusOut: (event: FocusEvent) => void;\n  /** A pointer click in the Input (`openOnClick`). */\n  readonly inputClick: (event: MouseEvent) => void;\n}\n\nexport const ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nexport function useComboboxContext(part: string): ComboboxContextValue {\n  const context = use(ComboboxContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Combobox.Root.`);\n  }\n  return context;\n}\n\n/** Provided by `Combobox.Popup` (a List outside a Popup warns). */\nexport const ComboboxPopupContext = createContext<boolean>(false);\n\n/** Provided by `Combobox.List` (an Option outside a List warns). */\nexport const ComboboxListContext = createContext<boolean>(false);\n\n/** `Combobox.Group`: the id its `Combobox.GroupLabel` renders. */\nexport const ComboboxGroupContext = createContext<string | null>(null);\n\n/** The id fragment of an option value: stable across result sets, no whitespace (design 3.5). */\nexport function optionId(prefix: string, value: string): string {\n  return `${prefix}${encodeURIComponent(value)}`;\n}\n"],"mappings":";;;AAoEA,MAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,mBAAmB,MAAoC;CACrE,MAAM,UAAU,IAAI,eAAe;CACnC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,0CAA0C;CAEpE,OAAO;AACT;;AAGA,MAAa,uBAAuB,cAAuB,KAAK;;AAGhE,MAAa,sBAAsB,cAAuB,KAAK;;AAG/D,MAAa,uBAAuB,cAA6B,IAAI;;AAGrE,SAAgB,SAAS,QAAgB,OAAuB;CAC9D,OAAO,GAAG,SAAS,mBAAmB,KAAK;AAC7C"}

package/dist/combobox/combobox-group.d.mts

@@ -0,0 +1,72 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ComboboxListState } from "./combobox-list.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-group.d.ts
+/** `Combobox.Group`, `Combobox.GroupLabel` and `Combobox.Status` have no state of their own. */
+export type ComboboxGroupState = Record<string, never>;
+export type ComboboxGroupLabelState = Record<string, never>;
+export type ComboboxStatusState = Record<string, never>;
+/** `Combobox.Empty` renders from the List's state. */
+export type ComboboxEmptyState = ComboboxListState;
+export interface ComboboxGroupProps extends Omit<ComponentPropsWithRef<"div">, "role" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxGroupState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxGroupState>;
+  children?: StateValue<ReactNode, ComboboxGroupState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxGroupState>;
+}
+/**
+ * A labelled set of options: `<div role="group" aria-labelledby>` named by the
+ * `Combobox.GroupLabel` inside it. Owned keys: `role`, `aria-labelledby` (token-merged).
+ */
+export declare function ComboboxGroup({ className, style, children, render, ...rest }: ComboboxGroupProps): import("react").JSX.Element;
+export declare namespace ComboboxGroup {
+  var displayName: string;
+}
+export interface ComboboxGroupLabelProps extends Omit<ComponentPropsWithRef<"div">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxGroupLabelState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxGroupLabelState>;
+  children?: StateValue<ReactNode, ComboboxGroupLabelState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxGroupLabelState>;
+}
+/** The name of the enclosing `Combobox.Group`: a `<div>` with the referenced id. Owned key: `id`. */
+export declare function ComboboxGroupLabel({ className, style, children, render, ...rest }: ComboboxGroupLabelProps): ReactNode;
+export declare namespace ComboboxGroupLabel {
+  var displayName: string;
+}
+export interface ComboboxEmptyProps extends Omit<ComponentPropsWithRef<"div">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxEmptyState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxEmptyState>;
+  children?: StateValue<ReactNode, ComboboxEmptyState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxEmptyState>;
+}
+/**
+ * "No results": renders a `<div>` with its children only when the List has **no mounted
+ * options, the results are not stale and none are loading** (no `Combobox.Status` mounted inside
+ * the List, i.e. no Suspense fallback showing); nothing otherwise (design 6.3). Place it in the
+ * Popup, outside the List (a listbox holds only options). Owns no keys.
+ */
+export declare function ComboboxEmpty({ className, style, children, render, ...rest }: ComboboxEmptyProps): ReactNode;
+export declare namespace ComboboxEmpty {
+  var displayName: string;
+}
+export interface ComboboxStatusProps extends Omit<ComponentPropsWithRef<"div">, "role" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxStatusState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxStatusState>;
+  children?: StateValue<ReactNode, ComboboxStatusState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxStatusState>;
+}
+/**
+ * A loading row or a hint. Rendered **inside the List** (the usual Suspense fallback,
+ * `<Suspense fallback={<Combobox.Status>Searching…</Combobox.Status>}>`), it marks the results
+ * as loading: `<div role="none">` (a listbox owns only options and groups, and a live region
+ * there would talk over the count; the List is `aria-busy` instead), `Empty` stays hidden and
+ * nothing is announced while it is mounted. Rendered in the Popup outside the List it is a plain
+ * hint, `<div role="status">`. No live-region work of its own either way (the result count is
+ * announced with `ariaNotify`). Owned key: `role`.
+ */
+export declare function ComboboxStatus({ className, style, children, render, ...rest }: ComboboxStatusProps): ReactNode;
+export declare namespace ComboboxStatus {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-group.d.mts.map

package/dist/combobox/combobox-group.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.d.mts","names":[],"sources":["../../src/combobox/combobox-group.tsx"],"mappings":";;;;;YAcY,qBAAqB;YACrB,0BAA0B;YAC1B,sBAAsB;;YAEtB,qBAAqB;iBAIhB,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;wBAOpC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qCAAkB,IAAA;yBAAjF;;;iBAkBC,gCAAgC,KAC/C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;wBAIpC,qBACd,WACA,OACA,UACA,WACG,QACF,0BAAuB;yBANV;;;iBA0BC,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;wBASpC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF;;;iBAiBC,4BAA4B,KAC3C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;wBAYpC,iBACd,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBANN"}

package/dist/combobox/combobox-group.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { ComboboxGroupContext, ComboboxListContext, useComboboxContext } from "./combobox-context.mjs";
+import { use, useId, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-group.tsx
+const EMPTY = {};
+/**
+* A labelled set of options: `<div role="group" aria-labelledby>` named by the
+* `Combobox.GroupLabel` inside it. Owned keys: `role`, `aria-labelledby` (token-merged).
+*/
+function ComboboxGroup({ className, style, children, render, ...rest }) {
+	useComboboxContext("Combobox.Group");
+	const labelId = `${useId()}-label`;
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "group",
+			"aria-labelledby": labelId
+		}
+	});
+	return /* @__PURE__ */ jsx(ComboboxGroupContext, {
+		value: labelId,
+		children: element
+	});
+}
+ComboboxGroup.displayName = "ComboboxGroup";
+/** The name of the enclosing `Combobox.Group`: a `<div>` with the referenced id. Owned key: `id`. */
+function ComboboxGroupLabel({ className, style, children, render, ...rest }) {
+	const labelId = use(ComboboxGroupContext);
+	useDevWarning(labelId === null, "Combobox.GroupLabel: rendered outside a Combobox.Group; it names nothing.");
+	return useRender({
+		defaultElement: "div",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: labelId === null ? {} : { id: labelId }
+	});
+}
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+/**
+* "No results": renders a `<div>` with its children only when the List has **no mounted
+* options, the results are not stale and none are loading** (no `Combobox.Status` mounted inside
+* the List, i.e. no Suspense fallback showing); nothing otherwise (design 6.3). Place it in the
+* Popup, outside the List (a listbox holds only options). Owns no keys.
+*/
+function ComboboxEmpty({ className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Empty");
+	const state = {
+		query: ctx.query,
+		stale: ctx.stale,
+		empty: ctx.empty
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest
+	});
+	return ctx.empty ? element : null;
+}
+ComboboxEmpty.displayName = "ComboboxEmpty";
+/**
+* A loading row or a hint. Rendered **inside the List** (the usual Suspense fallback,
+* `<Suspense fallback={<Combobox.Status>Searching…</Combobox.Status>}>`), it marks the results
+* as loading: `<div role="none">` (a listbox owns only options and groups, and a live region
+* there would talk over the count; the List is `aria-busy` instead), `Empty` stays hidden and
+* nothing is announced while it is mounted. Rendered in the Popup outside the List it is a plain
+* hint, `<div role="status">`. No live-region work of its own either way (the result count is
+* announced with `ariaNotify`). Owned key: `role`.
+*/
+function ComboboxStatus({ className, style, children, render, ...rest }) {
+	const { registerStatus } = useComboboxContext("Combobox.Status");
+	const inList = use(ComboboxListContext);
+	useLayoutEffect(() => inList ? registerStatus() : void 0, [inList, registerStatus]);
+	return useRender({
+		defaultElement: "div",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { role: inList ? "none" : "status" }
+	});
+}
+ComboboxStatus.displayName = "ComboboxStatus";
+//#endregion
+export { ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxStatus };
+
+//# sourceMappingURL=combobox-group.mjs.map

package/dist/combobox/combobox-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.mjs","names":[],"sources":["../../src/combobox/combobox-group.tsx"],"sourcesContent":["\"use client\";\nimport { use, useId, useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport {\n  ComboboxGroupContext,\n  ComboboxListContext,\n  useComboboxContext,\n} from \"./combobox-context.js\";\nimport type { ComboboxListState } from \"./combobox-list.js\";\n\n/** `Combobox.Group`, `Combobox.GroupLabel` and `Combobox.Status` have no state of their own. */\nexport type ComboboxGroupState = Record<string, never>;\nexport type ComboboxGroupLabelState = Record<string, never>;\nexport type ComboboxStatusState = Record<string, never>;\n/** `Combobox.Empty` renders from the List's state. */\nexport type ComboboxEmptyState = ComboboxListState;\n\nconst EMPTY: Record<string, never> = {};\n\nexport interface ComboboxGroupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxGroupState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxGroupState>;\n  children?: StateValue<ReactNode, ComboboxGroupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxGroupState>;\n}\n\n/**\n * A labelled set of options: `<div role=\"group\" aria-labelledby>` named by the\n * `Combobox.GroupLabel` inside it. Owned keys: `role`, `aria-labelledby` (token-merged).\n */\nexport function ComboboxGroup({ className, style, children, render, ...rest }: ComboboxGroupProps) {\n  useComboboxContext(\"Combobox.Group\");\n  const labelId = `${useId()}-label`;\n  const element = useRender<ComponentPropsWithRef<\"div\">, ComboboxGroupState>({\n    defaultElement: \"div\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { role: \"group\", \"aria-labelledby\": labelId },\n  });\n  return <ComboboxGroupContext value={labelId}>{element}</ComboboxGroupContext>;\n}\n\nComboboxGroup.displayName = \"ComboboxGroup\";\n\nexport interface ComboboxGroupLabelProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxGroupLabelState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxGroupLabelState>;\n  children?: StateValue<ReactNode, ComboboxGroupLabelState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxGroupLabelState>;\n}\n\n/** The name of the enclosing `Combobox.Group`: a `<div>` with the referenced id. Owned key: `id`. */\nexport function ComboboxGroupLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxGroupLabelProps) {\n  const labelId = use(ComboboxGroupContext);\n  useDevWarning(\n    labelId === null,\n    \"Combobox.GroupLabel: rendered outside a Combobox.Group; it names nothing.\",\n  );\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxGroupLabelState>({\n    defaultElement: \"div\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: labelId === null ? {} : { id: labelId },\n  });\n}\n\nComboboxGroupLabel.displayName = \"ComboboxGroupLabel\";\n\nexport interface ComboboxEmptyProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxEmptyState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxEmptyState>;\n  children?: StateValue<ReactNode, ComboboxEmptyState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxEmptyState>;\n}\n\n/**\n * \"No results\": renders a `<div>` with its children only when the List has **no mounted\n * options, the results are not stale and none are loading** (no `Combobox.Status` mounted inside\n * the List, i.e. no Suspense fallback showing); nothing otherwise (design 6.3). Place it in the\n * Popup, outside the List (a listbox holds only options). Owns no keys.\n */\nexport function ComboboxEmpty({ className, style, children, render, ...rest }: ComboboxEmptyProps) {\n  const ctx = useComboboxContext(\"Combobox.Empty\");\n  const state: ComboboxEmptyState = { query: ctx.query, stale: ctx.stale, empty: ctx.empty };\n  const element = useRender<ComponentPropsWithRef<\"div\">, ComboboxEmptyState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n  });\n  return ctx.empty ? element : null;\n}\n\nComboboxEmpty.displayName = \"ComboboxEmpty\";\n\nexport interface ComboboxStatusProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxStatusState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxStatusState>;\n  children?: StateValue<ReactNode, ComboboxStatusState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxStatusState>;\n}\n\n/**\n * A loading row or a hint. Rendered **inside the List** (the usual Suspense fallback,\n * `<Suspense fallback={<Combobox.Status>Searching…</Combobox.Status>}>`), it marks the results\n * as loading: `<div role=\"none\">` (a listbox owns only options and groups, and a live region\n * there would talk over the count; the List is `aria-busy` instead), `Empty` stays hidden and\n * nothing is announced while it is mounted. Rendered in the Popup outside the List it is a plain\n * hint, `<div role=\"status\">`. No live-region work of its own either way (the result count is\n * announced with `ariaNotify`). Owned key: `role`.\n */\nexport function ComboboxStatus({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxStatusProps) {\n  const { registerStatus } = useComboboxContext(\"Combobox.Status\");\n  const inList = use(ComboboxListContext);\n  useLayoutEffect(() => (inList ? registerStatus() : undefined), [inList, registerStatus]);\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxStatusState>({\n    defaultElement: \"div\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { role: inList ? \"none\" : \"status\" },\n  });\n}\n\nComboboxStatus.displayName = \"ComboboxStatus\";\n"],"mappings":";;;;;;;AAoBA,MAAM,QAA+B,CAAC;;;;;AAgBtC,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,mBAAmB,gBAAgB;CACnC,MAAM,UAAU,GAAG,MAAM,EAAE;CAC3B,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc;GAAE,MAAM;GAAS,mBAAmB;EAAQ;CAC5D,CAAC;CACD,OAAO,oBAAC,sBAAD;EAAsB,OAAO;EAAU,UAAA;CAA8B,CAAA;AAC9E;AAEA,cAAc,cAAc;;AAa5B,SAAgB,mBAAmB,EACjC,WACA,OACA,UACA,QACA,GAAG,QACuB;CAC1B,MAAM,UAAU,IAAI,oBAAoB;CACxC,cACE,YAAY,MACZ,2EACF;CACA,OAAO,UAAiE;EACtE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc,YAAY,OAAO,CAAC,IAAI,EAAE,IAAI,QAAQ;CACtD,CAAC;AACH;AAEA,mBAAmB,cAAc;;;;;;;AAkBjC,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,QAA4B;EAAE,OAAO,IAAI;EAAO,OAAO,IAAI;EAAO,OAAO,IAAI;CAAM;CACzF,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;CACT,CAAC;CACD,OAAO,IAAI,QAAQ,UAAU;AAC/B;AAEA,cAAc,cAAc;;;;;;;;;;AAqB5B,SAAgB,eAAe,EAC7B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,EAAE,mBAAmB,mBAAmB,iBAAiB;CAC/D,MAAM,SAAS,IAAI,mBAAmB;CACtC,sBAAuB,SAAS,eAAe,IAAI,KAAA,GAAY,CAAC,QAAQ,cAAc,CAAC;CACvF,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc,EAAE,MAAM,SAAS,SAAS,SAAS;CACnD,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/combobox/combobox-input.d.mts

@@ -0,0 +1,40 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef } from "react";
+//#region src/combobox/combobox-input.d.ts
+export interface ComboboxInputState {
+  /** Optimistic selection. */
+  readonly value: string | null;
+  /** The urgent text. */
+  readonly inputValue: string;
+  /** Optimistic open state. */
+  readonly open: boolean;
+  /** The Root is pending (a selection or an open in flight). */
+  readonly pending: boolean;
+  /** The results shown are for an older text. */
+  readonly stale: boolean;
+  readonly disabled: boolean;
+}
+export interface ComboboxInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "onChange" | "onInput" | "onKeyDown" | "onBlur" | "onClick" | "role" | "aria-autocomplete" | "aria-expanded" | "aria-controls" | "aria-activedescendant" | "autoComplete" | "disabled" | "className" | "style" | "children"> {
+  /** Native `required`: empty text is `valueMissing`. */
+  required?: boolean;
+  className?: StateValue<string | undefined, ComboboxInputState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxInputState>;
+  /** Must render an `<input>` of type `text` or `search`. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, ComboboxInputState>;
+}
+/**
+ * The text field: `<input role="combobox" aria-autocomplete="list" aria-expanded aria-controls
+ * aria-activedescendant autocomplete="off">`. DOM focus stays here while the active option moves
+ * virtually (design 7.1). Its text is the Root's urgent `inputValue`; typing opens the listbox.
+ *
+ * Owned keys (conventions 1.2): `id`, `type`, `role`, `value`, `autoComplete`,
+ * `aria-autocomplete`, `aria-expanded`, `aria-controls` (token-merged), `aria-activedescendant`,
+ * `disabled`, `onChange`, `onKeyDown`, `onBlur`, `onClick`, `data-open`, `data-pending`,
+ * `data-selected`, `data-stale`, `data-disabled`.
+ */
+export declare function ComboboxInput({ className, style, render, ...rest }: ComboboxInputProps): import("react").ReactNode;
+export declare namespace ComboboxInput {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-input.d.mts.map

package/dist/combobox/combobox-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-input.d.mts","names":[],"sources":["../../src/combobox/combobox-input.tsx"],"mappings":";;;iBAgBiB;;WAEN;;WAEA;;WAEA;;WAEA;;WAEA;WACA;;iBAGM,2BAA2B,KAC1C;;EAoBA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;wBAetC,gBAAgB,WAAW,OAAO,WAAW,QAAQ,qCAAkB;yBAAvE"}

package/dist/combobox/combobox-input.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { optionId, useComboboxContext } from "./combobox-context.mjs";
+import { isValidElement, useCallback } from "react";
+//#region src/combobox/combobox-input.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* The text field: `<input role="combobox" aria-autocomplete="list" aria-expanded aria-controls
+* aria-activedescendant autocomplete="off">`. DOM focus stays here while the active option moves
+* virtually (design 7.1). Its text is the Root's urgent `inputValue`; typing opens the listbox.
+*
+* Owned keys (conventions 1.2): `id`, `type`, `role`, `value`, `autoComplete`,
+* `aria-autocomplete`, `aria-expanded`, `aria-controls` (token-merged), `aria-activedescendant`,
+* `disabled`, `onChange`, `onKeyDown`, `onBlur`, `onClick`, `data-open`, `data-pending`,
+* `data-selected`, `data-stale`, `data-disabled`.
+*/
+function ComboboxInput({ className, style, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Input");
+	const { popover, ids, inputRef } = ctx;
+	const { triggerRef } = popover;
+	const state = {
+		value: ctx.value,
+		inputValue: ctx.inputValue,
+		open: popover.optimistic,
+		pending: ctx.pending,
+		stale: ctx.stale,
+		disabled: ctx.disabled
+	};
+	const ref = useCallback((element) => {
+		if (isDev) {
+			const type = element.tagName === "INPUT" ? element.type : "";
+			if (type !== "text" && type !== "search") console.error(`Combobox.Input: rendered <${element.tagName.toLowerCase()}${type === "" ? "" : ` type="${type}"`}>. Render an <input> of type "text" or "search": \`role="combobox"\`, \`aria-activedescendant\` and the caret keys depend on it.`);
+		}
+		inputRef.current = element;
+		triggerRef.current = element;
+		return () => {
+			if (inputRef.current === element) inputRef.current = null;
+			if (triggerRef.current === element) triggerRef.current = null;
+		};
+	}, [inputRef, triggerRef]);
+	const searchType = isValidElement(render) && render.props.type === "search";
+	const libraryProps = {
+		id: ids.input,
+		type: searchType ? "search" : "text",
+		role: "combobox",
+		value: ctx.inputValue,
+		autoComplete: "off",
+		"aria-autocomplete": "list",
+		"aria-expanded": popover.optimistic,
+		"aria-controls": ids.list,
+		"aria-activedescendant": ctx.activeValue === null ? void 0 : optionId(ids.optionPrefix, ctx.activeValue),
+		disabled: ctx.disabled,
+		onChange: (event) => {
+			ctx.typed(event.currentTarget.value, event.nativeEvent);
+		},
+		onKeyDown: (event) => {
+			ctx.keyDown(event.nativeEvent);
+		},
+		onBlur: (event) => {
+			ctx.focusOut(event.nativeEvent);
+		},
+		onClick: (event) => {
+			ctx.inputClick(event.nativeEvent);
+		},
+		"data-open": dataAttr(popover.optimistic),
+		"data-pending": dataAttr(state.pending),
+		"data-selected": dataAttr(ctx.value !== null),
+		"data-stale": dataAttr(ctx.stale),
+		"data-disabled": dataAttr(ctx.disabled)
+	};
+	return useRender({
+		defaultElement: "input",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxInput.displayName = "ComboboxInput";
+//#endregion
+export { ComboboxInput };
+
+//# sourceMappingURL=combobox-input.mjs.map

package/dist/combobox/combobox-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-input.mjs","names":[],"sources":["../../src/combobox/combobox-input.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useCallback } from \"react\";\nimport type {\n  ChangeEvent,\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { optionId, useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxInputState {\n  /** Optimistic selection. */\n  readonly value: string | null;\n  /** The urgent text. */\n  readonly inputValue: string;\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The Root is pending (a selection or an open in flight). */\n  readonly pending: boolean;\n  /** The results shown are for an older text. */\n  readonly stale: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxInputProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"onInput\"\n  | \"onKeyDown\"\n  | \"onBlur\"\n  | \"onClick\"\n  | \"role\"\n  | \"aria-autocomplete\"\n  | \"aria-expanded\"\n  | \"aria-controls\"\n  | \"aria-activedescendant\"\n  | \"autoComplete\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Native `required`: empty text is `valueMissing`. */\n  required?: boolean;\n  className?: StateValue<string | undefined, ComboboxInputState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxInputState>;\n  /** Must render an `<input>` of type `text` or `search`. */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, ComboboxInputState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * The text field: `<input role=\"combobox\" aria-autocomplete=\"list\" aria-expanded aria-controls\n * aria-activedescendant autocomplete=\"off\">`. DOM focus stays here while the active option moves\n * virtually (design 7.1). Its text is the Root's urgent `inputValue`; typing opens the listbox.\n *\n * Owned keys (conventions 1.2): `id`, `type`, `role`, `value`, `autoComplete`,\n * `aria-autocomplete`, `aria-expanded`, `aria-controls` (token-merged), `aria-activedescendant`,\n * `disabled`, `onChange`, `onKeyDown`, `onBlur`, `onClick`, `data-open`, `data-pending`,\n * `data-selected`, `data-stale`, `data-disabled`.\n */\nexport function ComboboxInput({ className, style, render, ...rest }: ComboboxInputProps) {\n  const ctx = useComboboxContext(\"Combobox.Input\");\n  const { popover, ids, inputRef } = ctx;\n  const { triggerRef } = popover;\n\n  const state: ComboboxInputState = {\n    value: ctx.value,\n    inputValue: ctx.inputValue,\n    open: popover.optimistic,\n    pending: ctx.pending,\n    stale: ctx.stale,\n    disabled: ctx.disabled,\n  };\n\n  const ref = useCallback(\n    (element: HTMLElement) => {\n      if (isDev) {\n        const type = element.tagName === \"INPUT\" ? (element as HTMLInputElement).type : \"\";\n        if (type !== \"text\" && type !== \"search\") {\n          console.error(\n            `Combobox.Input: rendered <${element.tagName.toLowerCase()}` +\n              `${type === \"\" ? \"\" : ` type=\"${type}\"`}>. Render an <input> of type \"text\" or ` +\n              '\"search\": `role=\"combobox\"`, `aria-activedescendant` and the caret keys depend on it.',\n          );\n        }\n      }\n      inputRef.current = element as HTMLInputElement;\n      // The popover's \"trigger\" is the input: `showPopover({ source: input })` anchors the\n      // listbox to it and makes clicks on it not light-dismiss (design 5.1).\n      triggerRef.current = element;\n      return () => {\n        if (inputRef.current === element) inputRef.current = null;\n        if (triggerRef.current === element) triggerRef.current = null;\n      };\n    },\n    [inputRef, triggerRef],\n  );\n\n  const searchType = isValidElement<{ type?: unknown }>(render) && render.props.type === \"search\";\n\n  const libraryProps: ComponentPropsWithRef<\"input\"> & DataAttributes = {\n    id: ids.input,\n    type: searchType ? \"search\" : \"text\",\n    role: \"combobox\",\n    value: ctx.inputValue,\n    autoComplete: \"off\",\n    \"aria-autocomplete\": \"list\",\n    \"aria-expanded\": popover.optimistic,\n    \"aria-controls\": ids.list,\n    \"aria-activedescendant\":\n      ctx.activeValue === null ? undefined : optionId(ids.optionPrefix, ctx.activeValue),\n    disabled: ctx.disabled,\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      ctx.typed(event.currentTarget.value, event.nativeEvent);\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      ctx.keyDown(event.nativeEvent);\n    },\n    onBlur: (event: FocusEvent<HTMLInputElement>) => {\n      ctx.focusOut(event.nativeEvent);\n    },\n    onClick: (event: MouseEvent<HTMLInputElement>) => {\n      ctx.inputClick(event.nativeEvent);\n    },\n    \"data-open\": dataAttr(popover.optimistic),\n    \"data-pending\": dataAttr(state.pending),\n    \"data-selected\": dataAttr(ctx.value !== null),\n    \"data-stale\": dataAttr(ctx.stale),\n    \"data-disabled\": dataAttr(ctx.disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"input\">, ComboboxInputState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxInput.displayName = \"ComboboxInput\";\n"],"mappings":";;;;;;AA0DA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;AAYvC,SAAgB,cAAc,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA4B;CACvF,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,EAAE,SAAS,KAAK,aAAa;CACnC,MAAM,EAAE,eAAe;CAEvB,MAAM,QAA4B;EAChC,OAAO,IAAI;EACX,YAAY,IAAI;EAChB,MAAM,QAAQ;EACd,SAAS,IAAI;EACb,OAAO,IAAI;EACX,UAAU,IAAI;CAChB;CAEA,MAAM,MAAM,aACT,YAAyB;EACxB,IAAI,OAAO;GACT,MAAM,OAAO,QAAQ,YAAY,UAAW,QAA6B,OAAO;GAChF,IAAI,SAAS,UAAU,SAAS,UAC9B,QAAQ,MACN,6BAA6B,QAAQ,QAAQ,YAAY,IACpD,SAAS,KAAK,KAAK,UAAU,KAAK,GAAG,iIAE5C;EAEJ;EACA,SAAS,UAAU;EAGnB,WAAW,UAAU;EACrB,aAAa;GACX,IAAI,SAAS,YAAY,SAAS,SAAS,UAAU;GACrD,IAAI,WAAW,YAAY,SAAS,WAAW,UAAU;EAC3D;CACF,GACA,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,aAAa,eAAmC,MAAM,KAAK,OAAO,MAAM,SAAS;CAEvF,MAAM,eAAgE;EACpE,IAAI,IAAI;EACR,MAAM,aAAa,WAAW;EAC9B,MAAM;EACN,OAAO,IAAI;EACX,cAAc;EACd,qBAAqB;EACrB,iBAAiB,QAAQ;EACzB,iBAAiB,IAAI;EACrB,yBACE,IAAI,gBAAgB,OAAO,KAAA,IAAY,SAAS,IAAI,cAAc,IAAI,WAAW;EACnF,UAAU,IAAI;EACd,WAAW,UAAyC;GAClD,IAAI,MAAM,MAAM,cAAc,OAAO,MAAM,WAAW;EACxD;EACA,YAAY,UAA2C;GACrD,IAAI,QAAQ,MAAM,WAAW;EAC/B;EACA,SAAS,UAAwC;GAC/C,IAAI,SAAS,MAAM,WAAW;EAChC;EACA,UAAU,UAAwC;GAChD,IAAI,WAAW,MAAM,WAAW;EAClC;EACA,aAAa,SAAS,QAAQ,UAAU;EACxC,gBAAgB,SAAS,MAAM,OAAO;EACtC,iBAAiB,SAAS,IAAI,UAAU,IAAI;EAC5C,cAAc,SAAS,IAAI,KAAK;EAChC,iBAAiB,SAAS,IAAI,QAAQ;CACxC;CAEA,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,KAAA;EACV,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/combobox/combobox-label.d.mts

@@ -0,0 +1,22 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-label.d.ts
+export interface ComboboxLabelState {
+  readonly disabled: boolean;
+}
+export interface ComboboxLabelProps extends Omit<ComponentPropsWithRef<"label">, "id" | "htmlFor" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxLabelState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxLabelState>;
+  children?: StateValue<ReactNode, ComboboxLabelState>;
+  render?: RenderProp<ComponentPropsWithRef<"label">, ComboboxLabelState>;
+}
+/**
+ * The visible name of the combobox: `<label for={input}>`, whose id also names the listbox
+ * (`aria-labelledby` on `Combobox.List`, emitted only while a Label is mounted). Owned keys: `id`, `htmlFor`.
+ */
+export declare function ComboboxLabel({ className, style, children, render, ...rest }: ComboboxLabelProps): ReactNode;
+export declare namespace ComboboxLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-label.d.mts.map

package/dist/combobox/combobox-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-label.d.mts","names":[],"sources":["../../src/combobox/combobox-label.tsx"],"mappings":";;;iBAOiB;WACN;;iBAGM,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,gCAAgC;;;;;;wBAOtC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/combobox/combobox-label.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useComboboxContext } from "./combobox-context.mjs";
+import { useLayoutEffect } from "react";
+//#region src/combobox/combobox-label.tsx
+/**
+* The visible name of the combobox: `<label for={input}>`, whose id also names the listbox
+* (`aria-labelledby` on `Combobox.List`, emitted only while a Label is mounted). Owned keys: `id`, `htmlFor`.
+*/
+function ComboboxLabel({ className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Label");
+	const { registerLabel } = ctx;
+	useLayoutEffect(registerLabel, [registerLabel]);
+	return useRender({
+		defaultElement: "label",
+		render,
+		state: { disabled: ctx.disabled },
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			id: ctx.ids.label,
+			htmlFor: ctx.ids.input
+		}
+	});
+}
+ComboboxLabel.displayName = "ComboboxLabel";
+//#endregion
+export { ComboboxLabel };
+
+//# sourceMappingURL=combobox-label.mjs.map

package/dist/combobox/combobox-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-label.mjs","names":[],"sources":["../../src/combobox/combobox-label.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxLabelState {\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxLabelProps extends Omit<\n  ComponentPropsWithRef<\"label\">,\n  \"id\" | \"htmlFor\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxLabelState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxLabelState>;\n  children?: StateValue<ReactNode, ComboboxLabelState>;\n  render?: RenderProp<ComponentPropsWithRef<\"label\">, ComboboxLabelState>;\n}\n\n/**\n * The visible name of the combobox: `<label for={input}>`, whose id also names the listbox\n * (`aria-labelledby` on `Combobox.List`, emitted only while a Label is mounted). Owned keys: `id`, `htmlFor`.\n */\nexport function ComboboxLabel({ className, style, children, render, ...rest }: ComboboxLabelProps) {\n  const ctx = useComboboxContext(\"Combobox.Label\");\n  const { registerLabel } = ctx;\n  useLayoutEffect(registerLabel, [registerLabel]);\n  return useRender<ComponentPropsWithRef<\"label\">, ComboboxLabelState>({\n    defaultElement: \"label\",\n    render,\n    state: { disabled: ctx.disabled },\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { id: ctx.ids.label, htmlFor: ctx.ids.input },\n  });\n}\n\nComboboxLabel.displayName = \"ComboboxLabel\";\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,EAAE,kBAAkB;CAC1B,gBAAgB,eAAe,CAAC,aAAa,CAAC;CAC9C,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA,OAAO,EAAE,UAAU,IAAI,SAAS;EAChC;EACA;EACA;EACA,OAAO;EACP,cAAc;GAAE,IAAI,IAAI,IAAI;GAAO,SAAS,IAAI,IAAI;EAAM;CAC5D,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/combobox/combobox-list.d.mts

@@ -0,0 +1,37 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-list.d.ts
+export interface ComboboxListState {
+  /** The deferred text the results are for: render the Options for it. */
+  readonly query: string;
+  /** The results shown are for an older text (`aria-busy`). */
+  readonly stale: boolean;
+  /** No option is mounted and the results are settled. */
+  readonly empty: boolean;
+}
+export interface ComboboxListProps extends Omit<ComponentPropsWithRef<"div">, "id" | "role" | "aria-busy" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ComboboxListState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxListState>;
+  /**
+   * Usually a function of `{ query }` rendering the Options for it, under your own `<Suspense>`
+   * for an async search. The previous results stay visible while the next ones load.
+   */
+  children?: StateValue<ReactNode, ComboboxListState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxListState>;
+}
+/**
+ * The listbox: `<div role="listbox" aria-labelledby={label}>` (only while a `Combobox.Label` is
+ * mounted), the element the input's `aria-controls` names. Its children are the results for the
+ * deferred `query` (the library filters nothing, design 6.1); while they are for an older text it
+ * carries `aria-busy="true"` and `data-stale`. Contains only Options and Groups; a `Status`
+ * rendered as a Suspense fallback inside it marks the results as loading (`aria-busy="true"`).
+ *
+ * Owned keys (conventions 1.2): `id`, `role`, `aria-labelledby` (token-merged), `aria-busy`,
+ * `data-stale`, `data-empty`.
+ */
+export declare function ComboboxList({ className, style, children, render, ...rest }: ComboboxListProps): ReactNode;
+export declare namespace ComboboxList {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-list.d.mts.map

package/dist/combobox/combobox-list.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-list.d.mts","names":[],"sources":["../../src/combobox/combobox-list.tsx"],"mappings":";;;iBAgBiB;;WAEN;;WAEA;;WAEA;;iBAGM,0BAA0B,KACzC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;;wBAapC,eAAe,WAAW,OAAO,UAAU,WAAW,QAAQ,oBAAiB;yBAA/E"}