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

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,42 @@
+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`; inside a `Field.Root` (whose control id it
+ * takes) also `required` (own or the Field's), `aria-describedby` (token-merged), `aria-invalid`
+ * and `data-invalid`.
+ */
+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":";;;iBAiBiB;;WAEN;;WAEA;;WAEA;;WAEA;;WAEA;WACA;;iBAGM,2BAA2B,KAC1C;;EAoBA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;;wBAiBtC,gBAAgB,WAAW,OAAO,WAAW,QAAQ,qCAAkB;yBAAvE"}

package/dist/combobox/combobox-input.mjs

@@ -0,0 +1,102 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useFieldControl, useMergedRef } from "../internal/use-field-control.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`; inside a `Field.Root` (whose control id it
+* takes) also `required` (own or the Field's), `aria-describedby` (token-merged), `aria-invalid`
+* and `data-invalid`.
+*/
+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 field = useFieldControl({
+		labelable: true,
+		required: rest.required,
+		disabled: ctx.disabled,
+		id: rest.id,
+		component: "Combobox.Input"
+	});
+	const fieldRef = field.ref;
+	const mergedRef = useMergedRef(ref, fieldRef);
+	const searchType = isValidElement(render) && render.props.type === "search";
+	const libraryProps = {
+		...field.attributes,
+		...field.inField && { required: field.required },
+		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: mergedRef
+	});
+}
+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 { useFieldControl, useMergedRef } from \"../internal/use-field-control.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`; inside a `Field.Root` (whose control id it\n * takes) also `required` (own or the Field's), `aria-describedby` (token-merged), `aria-invalid`\n * and `data-invalid`.\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  // Inside a Field.Root (design/components/field-form.md 7.2) the Input is the Field's control:\n  // the Root already took the Field's id for it; `required` and the ARIA wiring land here.\n  const field = useFieldControl({\n    labelable: true,\n    required: rest.required,\n    disabled: ctx.disabled,\n    id: rest.id,\n    component: \"Combobox.Input\",\n  });\n  const fieldRef = field.ref;\n  const mergedRef = useMergedRef<HTMLElement>(ref, fieldRef);\n\n  const searchType = isValidElement<{ type?: unknown }>(render) && render.props.type === \"search\";\n\n  const libraryProps: ComponentPropsWithRef<\"input\"> & DataAttributes = {\n    ...field.attributes,\n    ...(field.inField && { required: field.required }),\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: mergedRef,\n  });\n}\n\nComboboxInput.displayName = \"ComboboxInput\";\n"],"mappings":";;;;;;;AA2DA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;;;AAcvC,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;CAIA,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,UAAU,KAAK;EACf,UAAU,IAAI;EACd,IAAI,KAAK;EACT,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,YAAY,aAA0B,KAAK,QAAQ;CAEzD,MAAM,aAAa,eAAmC,MAAM,KAAK,OAAO,MAAM,SAAS;CAEvF,MAAM,eAAgE;EACpE,GAAG,MAAM;EACT,GAAI,MAAM,WAAW,EAAE,UAAU,MAAM,SAAS;EAChD,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,KAAK;CACP,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"}

package/dist/combobox/combobox-list.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { ComboboxListContext, ComboboxPopupContext, useComboboxContext } from "./combobox-context.mjs";
+import { use, useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-list.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* 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`.
+*/
+function ComboboxList({ className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.List");
+	const inPopup = use(ComboboxPopupContext);
+	useDevWarning(!inPopup, "Combobox.List: rendered outside a Combobox.Popup. The listbox must be inside the Popup, which is the element the library shows and hides.");
+	const { listRef } = ctx;
+	const warnedName = useRef(false);
+	const ref = useCallback((element) => {
+		listRef.current = element;
+		if (isDev && !warnedName.current) queueMicrotask(() => {
+			if (warnedName.current || !element.isConnected) return;
+			if (element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-label")) return;
+			warnedName.current = true;
+			console.error("Combobox.List: the listbox has no accessible name. Render a Combobox.Label, or give the List an `aria-label` / `aria-labelledby`.");
+		});
+		return () => {
+			if (listRef.current === element) listRef.current = null;
+		};
+	}, [listRef]);
+	const state = {
+		query: ctx.query,
+		stale: ctx.stale,
+		empty: ctx.empty
+	};
+	const libraryProps = {
+		id: ctx.ids.list,
+		role: "listbox",
+		...ctx.hasLabel ? { "aria-labelledby": ctx.ids.label } : ctx.fieldLabelId !== void 0 && { "aria-labelledby": ctx.fieldLabelId },
+		"aria-busy": ctx.stale || ctx.loading ? true : void 0,
+		"data-stale": dataAttr(ctx.stale),
+		"data-empty": dataAttr(ctx.empty)
+	};
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children: (s) => /* @__PURE__ */ jsx(ComboboxListContext, {
+			value: true,
+			children: resolveStateValue(children, s)
+		}),
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxList.displayName = "ComboboxList";
+//#endregion
+export { ComboboxList };
+
+//# sourceMappingURL=combobox-list.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-list.mjs","names":[],"sources":["../../src/combobox/combobox-list.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport {\n  ComboboxListContext,\n  ComboboxPopupContext,\n  useComboboxContext,\n} from \"./combobox-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface ComboboxListState {\n  /** The deferred text the results are for: render the Options for it. */\n  readonly query: string;\n  /** The results shown are for an older text (`aria-busy`). */\n  readonly stale: boolean;\n  /** No option is mounted and the results are settled. */\n  readonly empty: boolean;\n}\n\nexport interface ComboboxListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"role\" | \"aria-busy\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxListState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxListState>;\n  /**\n   * Usually a function of `{ query }` rendering the Options for it, under your own `<Suspense>`\n   * for an async search. The previous results stay visible while the next ones load.\n   */\n  children?: StateValue<ReactNode, ComboboxListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxListState>;\n}\n\n/**\n * The listbox: `<div role=\"listbox\" aria-labelledby={label}>` (only while a `Combobox.Label` is\n * mounted), the element the input's `aria-controls` names. Its children are the results for the\n * deferred `query` (the library filters nothing, design 6.1); while they are for an older text it\n * carries `aria-busy=\"true\"` and `data-stale`. Contains only Options and Groups; a `Status`\n * rendered as a Suspense fallback inside it marks the results as loading (`aria-busy=\"true\"`).\n *\n * Owned keys (conventions 1.2): `id`, `role`, `aria-labelledby` (token-merged), `aria-busy`,\n * `data-stale`, `data-empty`.\n */\nexport function ComboboxList({ className, style, children, render, ...rest }: ComboboxListProps) {\n  const ctx = useComboboxContext(\"Combobox.List\");\n  const inPopup = use(ComboboxPopupContext);\n  useDevWarning(\n    !inPopup,\n    \"Combobox.List: rendered outside a Combobox.Popup. The listbox must be inside the Popup, \" +\n      \"which is the element the library shows and hides.\",\n  );\n  const { listRef } = ctx;\n  const warnedName = useRef(false);\n\n  const ref = useCallback(\n    (element: HTMLElement) => {\n      listRef.current = element;\n      if (isDev && !warnedName.current) {\n        // A mounted Label registers in a layout effect whose re-render is flushed before this\n        // microtask, so `aria-labelledby` is in the DOM by then if it ever will be.\n        queueMicrotask(() => {\n          if (warnedName.current || !element.isConnected) return;\n          if (element.hasAttribute(\"aria-labelledby\") || element.hasAttribute(\"aria-label\")) return;\n          warnedName.current = true;\n          console.error(\n            \"Combobox.List: the listbox has no accessible name. Render a Combobox.Label, or give \" +\n              \"the List an `aria-label` / `aria-labelledby`.\",\n          );\n        });\n      }\n      return () => {\n        if (listRef.current === element) listRef.current = null;\n      };\n    },\n    [listRef],\n  );\n\n  const state: ComboboxListState = { query: ctx.query, stale: ctx.stale, empty: ctx.empty };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: ctx.ids.list,\n    role: \"listbox\",\n    ...(ctx.hasLabel\n      ? { \"aria-labelledby\": ctx.ids.label }\n      : ctx.fieldLabelId !== undefined && { \"aria-labelledby\": ctx.fieldLabelId }),\n    \"aria-busy\": ctx.stale || ctx.loading ? true : undefined,\n    \"data-stale\": dataAttr(ctx.stale),\n    \"data-empty\": dataAttr(ctx.empty),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children: (s) => (\n      <ComboboxListContext value={true}>{resolveStateValue(children, s)}</ComboboxListContext>\n    ),\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxList.displayName = \"ComboboxList\";\n"],"mappings":";;;;;;;;AAcA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;AAmCvC,SAAgB,aAAa,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA2B;CAC/F,MAAM,MAAM,mBAAmB,eAAe;CAC9C,MAAM,UAAU,IAAI,oBAAoB;CACxC,cACE,CAAC,SACD,2IAEF;CACA,MAAM,EAAE,YAAY;CACpB,MAAM,aAAa,OAAO,KAAK;CAE/B,MAAM,MAAM,aACT,YAAyB;EACxB,QAAQ,UAAU;EAClB,IAAI,SAAS,CAAC,WAAW,SAGvB,qBAAqB;GACnB,IAAI,WAAW,WAAW,CAAC,QAAQ,aAAa;GAChD,IAAI,QAAQ,aAAa,iBAAiB,KAAK,QAAQ,aAAa,YAAY,GAAG;GACnF,WAAW,UAAU;GACrB,QAAQ,MACN,mIAEF;EACF,CAAC;EAEH,aAAa;GACX,IAAI,QAAQ,YAAY,SAAS,QAAQ,UAAU;EACrD;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,QAA2B;EAAE,OAAO,IAAI;EAAO,OAAO,IAAI;EAAO,OAAO,IAAI;CAAM;CAExF,MAAM,eAA8D;EAClE,IAAI,IAAI,IAAI;EACZ,MAAM;EACN,GAAI,IAAI,WACJ,EAAE,mBAAmB,IAAI,IAAI,MAAM,IACnC,IAAI,iBAAiB,KAAA,KAAa,EAAE,mBAAmB,IAAI,aAAa;EAC5E,aAAa,IAAI,SAAS,IAAI,UAAU,OAAO,KAAA;EAC/C,cAAc,SAAS,IAAI,KAAK;EAChC,cAAc,SAAS,IAAI,KAAK;CAClC;CAEA,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA;EACA;EACA;EACA,WAAW,MACT,oBAAC,qBAAD;GAAqB,OAAO;GAAO,UAAA,kBAAkB,UAAU,CAAC;EAAuB,CAAA;EAEzF,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,45 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-option.d.ts
+export interface ComboboxOptionState {
+  readonly value: string;
+  /** Optimistic: this option's value is the (optimistic) selection. */
+  readonly selected: boolean;
+  /** `aria-activedescendant` points here (urgent). */
+  readonly active: boolean;
+  /** The selection is pending and this option is its optimistic target. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface ComboboxOptionProps extends Omit<ComponentPropsWithRef<"div">, "id" | "role" | "aria-selected" | "aria-disabled" | "onClick" | "onPointerDown" | "onMouseDown" | "onPointerMove" | "className" | "style" | "children"> {
+  /** The selection this option stands for. Unique within the Combobox; also its id fragment. */
+  value: string;
+  /**
+   * The text written into the input when this option is accepted. Default: the element's
+   * trimmed `textContent` at that moment. Not used for matching: the library filters nothing.
+   */
+  label?: string;
+  /** `aria-disabled`: shown, skipped by the arrow keys, never accepted. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, ComboboxOptionState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxOptionState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, ComboboxOptionState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxOptionState>;
+}
+/**
+ * One result: `<div role="option" id aria-selected>`, never focused (virtual focus through the
+ * input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input
+ * text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox
+ * closes when `valueChangeAction` settles. Hovering makes it active.
+ *
+ * Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,
+ * `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,
+ * `data-active`, `data-pending`, `data-disabled`.
+ */
+export declare function ComboboxOption({ value, label, disabled, className, style, children, render, ...rest }: ComboboxOptionProps): ReactNode;
+export declare namespace ComboboxOption {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-option.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.d.mts","names":[],"sources":["../../src/combobox/combobox-option.tsx"],"mappings":";;;iBAgBiB;WACN;;WAEA;;WAEA;;WAEA;WACA;;iBAGM,4BAA4B,KAC3C;;EAcA;;;;;EAKA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;;wBAepC,iBACd,OACA,OACA,UACA,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBATN"}

package/dist/combobox/combobox-option.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { ComboboxListContext, optionId, useComboboxContext } from "./combobox-context.mjs";
+import { use, useCallback, useLayoutEffect, useRef } from "react";
+//#region src/combobox/combobox-option.tsx
+const preventDefault = (event) => event.preventDefault();
+/**
+* One result: `<div role="option" id aria-selected>`, never focused (virtual focus through the
+* input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input
+* text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox
+* closes when `valueChangeAction` settles. Hovering makes it active.
+*
+* Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,
+* `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,
+* `data-active`, `data-pending`, `data-disabled`.
+*/
+function ComboboxOption({ value, label, disabled = false, className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Option");
+	const inList = use(ComboboxListContext);
+	useDevWarning(!inList, "Combobox.Option: rendered outside a Combobox.List. Options belong in the listbox.");
+	const { registerOption } = ctx;
+	const elementRef = useRef(null);
+	const ref = useCallback((element) => {
+		elementRef.current = element;
+		return () => {
+			if (elementRef.current === element) elementRef.current = null;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (element === null) return;
+		return registerOption(value, {
+			element,
+			label,
+			disabled
+		});
+	}, [
+		registerOption,
+		value,
+		label,
+		disabled
+	]);
+	const selected = ctx.value === value;
+	const state = {
+		value,
+		selected,
+		active: ctx.activeValue === value,
+		pending: ctx.valuePending && selected,
+		disabled
+	};
+	const libraryProps = {
+		id: optionId(ctx.ids.optionPrefix, value),
+		role: "option",
+		"aria-selected": selected,
+		"aria-disabled": disabled ? true : void 0,
+		onClick: (event) => {
+			if (disabled) return;
+			ctx.accept(value, event.nativeEvent);
+		},
+		onPointerDown: (event) => preventDefault(event),
+		onMouseDown: (event) => preventDefault(event),
+		onPointerMove: () => {
+			if (!disabled && ctx.activeValue !== value) ctx.setActive(value);
+		},
+		"data-selected": dataAttr(selected),
+		"data-active": dataAttr(state.active),
+		"data-pending": dataAttr(state.pending),
+		"data-disabled": dataAttr(disabled)
+	};
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxOption.displayName = "ComboboxOption";
+//#endregion
+export { ComboboxOption };
+
+//# sourceMappingURL=combobox-option.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.mjs","names":[],"sources":["../../src/combobox/combobox-option.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useLayoutEffect, useRef } from \"react\";\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 { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { ComboboxListContext, optionId, useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxOptionState {\n  readonly value: string;\n  /** Optimistic: this option's value is the (optimistic) selection. */\n  readonly selected: boolean;\n  /** `aria-activedescendant` points here (urgent). */\n  readonly active: boolean;\n  /** The selection is pending and this option is its optimistic target. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxOptionProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"id\"\n  | \"role\"\n  | \"aria-selected\"\n  | \"aria-disabled\"\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"onPointerMove\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The selection this option stands for. Unique within the Combobox; also its id fragment. */\n  value: string;\n  /**\n   * The text written into the input when this option is accepted. Default: the element's\n   * trimmed `textContent` at that moment. Not used for matching: the library filters nothing.\n   */\n  label?: string;\n  /** `aria-disabled`: shown, skipped by the arrow keys, never accepted. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxOptionState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxOptionState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ComboboxOptionState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxOptionState>;\n}\n\nconst preventDefault = (event: { preventDefault(): void }) => event.preventDefault();\n\n/**\n * One result: `<div role=\"option\" id aria-selected>`, never focused (virtual focus through the\n * input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input\n * text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox\n * closes when `valueChangeAction` settles. Hovering makes it active.\n *\n * Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,\n * `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,\n * `data-active`, `data-pending`, `data-disabled`.\n */\nexport function ComboboxOption({\n  value,\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxOptionProps) {\n  const ctx = useComboboxContext(\"Combobox.Option\");\n  const inList = use(ComboboxListContext);\n  useDevWarning(\n    !inList,\n    \"Combobox.Option: rendered outside a Combobox.List. Options belong in the listbox.\",\n  );\n  const { registerOption } = ctx;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n  const ref = useCallback((element: HTMLElement) => {\n    elementRef.current = element;\n    return () => {\n      if (elementRef.current === element) elementRef.current = null;\n    };\n  }, []);\n\n  // Registration (design 14): the Root's registry drives the arrow keys, `Empty`, the active\n  // option's revalidation, the announcements and the label cache.\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element === null) return;\n    return registerOption(value, { element, label, disabled });\n  }, [registerOption, value, label, disabled]);\n\n  const selected = ctx.value === value;\n  const state: ComboboxOptionState = {\n    value,\n    selected,\n    active: ctx.activeValue === value,\n    pending: ctx.valuePending && selected,\n    disabled,\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: optionId(ctx.ids.optionPrefix, value),\n    role: \"option\",\n    \"aria-selected\": selected,\n    \"aria-disabled\": disabled ? true : undefined,\n    onClick: (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      ctx.accept(value, event.nativeEvent);\n    },\n    // The input keeps focus (design 7.1), also for an Option rendered outside a Popup.\n    onPointerDown: (event: PointerEvent<HTMLDivElement>) => preventDefault(event),\n    onMouseDown: (event: MouseEvent<HTMLDivElement>) => preventDefault(event),\n    onPointerMove: () => {\n      if (!disabled && ctx.activeValue !== value) ctx.setActive(value);\n    },\n    \"data-selected\": dataAttr(selected),\n    \"data-active\": dataAttr(state.active),\n    \"data-pending\": dataAttr(state.pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxOptionState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxOption.displayName = \"ComboboxOption\";\n"],"mappings":";;;;;;;AAyDA,MAAM,kBAAkB,UAAsC,MAAM,eAAe;;;;;;;;;;;AAYnF,SAAgB,eAAe,EAC7B,OACA,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,mBAAmB,iBAAiB;CAChD,MAAM,SAAS,IAAI,mBAAmB;CACtC,cACE,CAAC,QACD,mFACF;CACA,MAAM,EAAE,mBAAmB;CAE3B,MAAM,aAAa,OAA2B,IAAI;CAClD,MAAM,MAAM,aAAa,YAAyB;EAChD,WAAW,UAAU;EACrB,aAAa;GACX,IAAI,WAAW,YAAY,SAAS,WAAW,UAAU;EAC3D;CACF,GAAG,CAAC,CAAC;CAIL,sBAAsB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,YAAY,MAAM;EACtB,OAAO,eAAe,OAAO;GAAE;GAAS;GAAO;EAAS,CAAC;CAC3D,GAAG;EAAC;EAAgB;EAAO;EAAO;CAAQ,CAAC;CAE3C,MAAM,WAAW,IAAI,UAAU;CAC/B,MAAM,QAA6B;EACjC;EACA;EACA,QAAQ,IAAI,gBAAgB;EAC5B,SAAS,IAAI,gBAAgB;EAC7B;CACF;CAEA,MAAM,eAA8D;EAClE,IAAI,SAAS,IAAI,IAAI,cAAc,KAAK;EACxC,MAAM;EACN,iBAAiB;EACjB,iBAAiB,WAAW,OAAO,KAAA;EACnC,UAAU,UAAsC;GAC9C,IAAI,UAAU;GACd,IAAI,OAAO,OAAO,MAAM,WAAW;EACrC;EAEA,gBAAgB,UAAwC,eAAe,KAAK;EAC5E,cAAc,UAAsC,eAAe,KAAK;EACxE,qBAAqB;GACnB,IAAI,CAAC,YAAY,IAAI,gBAAgB,OAAO,IAAI,UAAU,KAAK;EACjE;EACA,iBAAiB,SAAS,QAAQ;EAClC,eAAe,SAAS,MAAM,MAAM;EACpC,gBAAgB,SAAS,MAAM,OAAO;EACtC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,eAAe,cAAc"}