@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Cluster/Cluster.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from "react";
+import type { Alignment, Justification, Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface ClusterOwnProps {
+    /**
+     * Cross-axis placement of children. Defaults to `center`.
+     */
+    align?: Alignment;
+    /**
+     * Space between children and between wrapped lines. Defaults to `2`.
+     */
+    gap?: Space;
+    /**
+     * Main-axis distribution of children. Defaults to `start`.
+     */
+    justify?: Justification;
+}
+/**
+ * Props for `Cluster`: its own props plus every prop supported by the element given in `as`
+ */
+export type ClusterProps<E extends BoxElement = "div"> = ClusterOwnProps & Omit<BoxProps<E>, keyof ClusterOwnProps>;
+/**
+ * Horizontal flow that wraps its children onto new lines when they run out of room
+ *
+ * @example
+ * <Cluster as="ul" aria-label="Tags">...</Cluster>
+ */
+export declare function Cluster<E extends BoxElement = "div">({ align, gap, justify, ...rest }: ClusterProps<E>): JSX.Element;
+export {};

package/dist/components/Cluster/Cluster.js

@@ -0,0 +1,13 @@
+import { HorizontalFlow as e } from "../HorizontalFlow/HorizontalFlow.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/Cluster/Cluster.tsx
+function n({ align: n = "center", gap: r = 2, justify: i = "start", ...a }) {
+	return /* @__PURE__ */ t(e, {
+		...a,
+		align: n,
+		gap: r,
+		justify: i,
+		wrap: !0
+	});
+}
+export { n as Cluster };

package/dist/components/Cluster/index.d.ts

@@ -0,0 +1,2 @@
+export { Cluster } from "./Cluster";
+export type { ClusterProps } from "./Cluster";

package/dist/components/Code/Code.css

@@ -0,0 +1 @@
+.sui-code-arLxg{padding:0 var(--sui-space-1,.25rem);border-radius:var(--sui-radius-sm,2px);background-color:var(--sui-color-sunken,#f3f4f6);color:var(--sui-color-text,#111827);font-family:var(--sui-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);overflow-wrap:anywhere;font-size:.875em}

package/dist/components/Code/Code.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Code`: every native `code` prop
+ */
+export type CodeProps = Omit<BoxProps<"code">, "as">;
+/**
+ * Inline code, such as a command, a file name or a value, in the theme's monospace font on the sunken colour
+ *
+ * @example
+ * <Text as="p">Run <Code>pnpm install</Code> first.</Text>
+ */
+export declare function Code({ className, ...rest }: CodeProps): JSX.Element;

package/dist/components/Code/Code.js

@@ -0,0 +1,19 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Code.module.js";
+import { clsx as n } from "clsx";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/Code/Code.tsx
+function a(a) {
+	let o = r(8), s, c;
+	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
+	let l;
+	o[3] === s ? l = o[4] : (l = n(t.code, s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ i(e, {
+		...c,
+		as: "code",
+		className: l
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+}
+export { a as Code };

package/dist/components/Code/Code.module.js

@@ -0,0 +1,3 @@
+import './Code.css';// src/components/Code/Code.module.css
+var e = "sui-code-arLxg", t = { code: e };
+export { e as code, t as default };

package/dist/components/Code/index.d.ts

@@ -0,0 +1,2 @@
+export { Code } from "./Code";
+export type { CodeProps } from "./Code";

package/dist/components/Combobox/Autocomplete.d.ts

@@ -0,0 +1,83 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+import type { ComboboxFilter } from "./ComboboxContext";
+import type { ComboboxPlacement } from "./ComboboxPopup";
+interface AutocompleteOwnProps {
+    /**
+     * The `ComboboxOption`s
+     */
+    children?: ReactNode;
+    /**
+     * The text the input starts with when `inputValue` is not given. Defaults to the selected option's text.
+     */
+    defaultInputValue?: string;
+    /**
+     * The option selected at first, which leaves the selection uncontrolled. Defaults to none.
+     */
+    defaultValue?: string | null;
+    /**
+     * Whether an option shows for the typed text. Defaults to the option's text containing it, ignoring case and
+     * accents. Null shows every option rendered, for a list filtered elsewhere, such as on a server; typing then makes no
+     * option active, since the options for the text are still to come.
+     */
+    filter?: ComboboxFilter | null;
+    /**
+     * The text in the input, which makes it controlled: update it from `onInputValueChange`
+     */
+    inputValue?: string;
+    /**
+     * Adds a hidden input that submits the selected value with a form under this name
+     */
+    name?: string;
+    /**
+     * Called with the text as the user types, with an option's text when they commit it, and with the selected
+     * option's text, or none, when focus leaves
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Called with the value of the option the user commits, or null when they clear the input with Escape
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Where the list opens. It flips to the other side when there is no room. Defaults to `bottom-start`.
+     */
+    placement?: ComboboxPlacement;
+    /**
+     * What the live region says, and the empty list shows, for a number of matching options. Defaults to English:
+     * "No results", "1 result", "12 results".
+     */
+    resultsLabel?: (count: number) => string;
+    /**
+     * Height of the input, matching the `Button` sizes. Takes the place of the native `size` attribute. Defaults to
+     * `md`.
+     */
+    size?: ControlSize;
+    /**
+     * The selected option, or null for none, which makes the selection controlled: update it from `onValueChange`
+     */
+    value?: string | null;
+}
+/**
+ * Props for `Autocomplete`: its own props plus every `input` prop except those the combobox pattern sets
+ */
+export interface AutocompleteProps extends AutocompleteOwnProps, Omit<BoxProps<"input">, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "as" | "children" | "dangerouslySetInnerHTML" | "defaultValue" | "role" | "size" | "type" | "value" | keyof AutocompleteOwnProps> {
+}
+/**
+ * A text input that filters a list of options as the user types, following the WAI-ARIA combobox pattern with list
+ * autocomplete, to choose one of many options by typing part of its name. Typing opens the list and makes the first
+ * match active; the arrow keys move through it; Enter or a click chooses an option, putting its text in the input;
+ * Escape closes the list, and then clears the input. Only an option can be the value: when focus leaves, the input shows
+ * the selected option's text again. The number of matches is announced once typing pauses. Inside a `Field` it takes
+ * its label, description, error, and required and disabled state from the field; outside one, give it an `aria-label`.
+ *
+ * @example
+ * <Field label="Country">
+ *   <Autocomplete name="country" onValueChange={setCountry} value={country}>
+ *     <ComboboxOption value="fr">France</ComboboxOption>
+ *     <ComboboxOption value="jp">Japan</ComboboxOption>
+ *   </Autocomplete>
+ * </Field>
+ */
+export declare function Autocomplete({ children, className, defaultInputValue, defaultValue, filter, inputValue, name, onInputValueChange, onValueChange, placement, resultsLabel, size, value, ...rest }: AutocompleteProps): JSX.Element;
+export {};

package/dist/components/Combobox/Autocomplete.js

@@ -0,0 +1,102 @@
+import { useFieldControl as e } from "../../forms/useFieldControl.js";
+import { anchorNameFor as t } from "../../overlays/anchorNameFor.js";
+import { mergeProps as n } from "../../overlays/mergeProps.js";
+import { Box as r } from "../Box/Box.js";
+import { ChevronDownIcon as i } from "../Icon/ChevronDownIcon.js";
+import { TextControl as a } from "../TextControl/TextControl.js";
+import { VisuallyHidden as o } from "../VisuallyHidden/VisuallyHidden.js";
+import s from "./Combobox.module.js";
+import { ComboboxPopup as c } from "./ComboboxPopup.js";
+import { handleAutocompleteKey as l } from "./autocompleteKeys.js";
+import { containsText as u } from "./containsText.js";
+import { useAutocompleteText as d } from "./useAutocompleteText.js";
+import { useComboboxList as f } from "./useComboboxList.js";
+import { useComboboxSelection as p } from "./useComboboxSelection.js";
+import { useResultsAnnouncement as m } from "./useResultsAnnouncement.js";
+import { clsx as h } from "clsx";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+// src/components/Combobox/Autocomplete.tsx
+function y({ children: y, className: x, defaultInputValue: S, defaultValue: C = null, filter: w = u, inputValue: T, name: E, onInputValueChange: D, onValueChange: O, placement: k = "bottom-start", resultsLabel: A = b, size: j = "md", value: M, ...N }) {
+	let P = e(N), F = p({
+		defaultValue: C,
+		onValueChange: O,
+		value: M
+	}), I = d({
+		defaultInputValue: S,
+		inputValue: T,
+		onInputValueChange: D,
+		selectedText: F.selectedContent?.text
+	}), L = f({
+		controlId: P.id,
+		filter: w,
+		onCommit: I.commit,
+		query: I.query,
+		selection: F
+	}), { announceCount: R, announcement: z } = m(A, L.countShown, L.open), B = I.shown, V = { anchorName: t(L.listId) }, H = N.readOnly === !0;
+	function U(e) {
+		let t = e.currentTarget.value;
+		I.edit(t), L.openList("none", "keyboard"), L.matchFirst(), R();
+	}
+	function W(e) {
+		let t = {
+			commit: I.commit,
+			editing: I.editing,
+			shown: B
+		};
+		!e.defaultPrevented && !H && l(e, L, t) && e.preventDefault();
+	}
+	function G(e) {
+		e.defaultPrevented || H || L.open || L.openList("none", "pointer");
+	}
+	function K(e) {
+		L.close(), e.currentTarget.ownerDocument.hasFocus() && I.restore();
+	}
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ v(r, {
+			as: "span",
+			className: s.inputFrame,
+			"data-disabled": P.disabled === !0 ? "" : void 0,
+			"data-size": j,
+			children: [/* @__PURE__ */ _(a, {
+				autoComplete: "off",
+				...n(N, {
+					onBlur: K,
+					onChange: U,
+					onClick: G,
+					onKeyDown: W,
+					style: V
+				}),
+				as: "input",
+				className: h(s.input, x),
+				id: L.controlId,
+				role: "combobox",
+				size: j,
+				type: "text",
+				value: B,
+				"aria-activedescendant": L.activeDescendant,
+				"aria-autocomplete": "list",
+				"aria-controls": L.listId,
+				"aria-expanded": L.open
+			}), /* @__PURE__ */ _(i, { className: s.chevron })]
+		}),
+		/* @__PURE__ */ _(c, {
+			"aria-label": N["aria-label"],
+			"aria-labelledby": N["aria-labelledby"],
+			disabled: P.disabled,
+			emptyMessage: A(0),
+			form: N.form,
+			list: L,
+			name: E,
+			placement: k,
+			children: y
+		}),
+		/* @__PURE__ */ _(o, {
+			"aria-live": "polite",
+			children: z
+		})
+	] });
+}
+function b(e) {
+	return e === 0 ? "No results" : e === 1 ? "1 result" : `${e} results`;
+}
+export { y as Autocomplete };

package/dist/components/Combobox/Combobox.css

@@ -0,0 +1 @@
+.sui-field-BenH0{align-items:center;gap:var(--sui-space-2,.5rem);text-align:start;cursor:default;min-inline-size:0;display:inline-flex}.sui-placeholder-NQX-b,.sui-fieldLabel-zBN6l{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden}.sui-placeholder-NQX-b{color:var(--sui-color-text-muted,#4b5563)}.sui-fieldLeading-4y-j7{flex:none;align-items:center;block-size:1lh;display:flex}.sui-chevron-NVqyn{flex:none;transition:rotate .12s}[aria-expanded=true]+.sui-chevron-NVqyn,[aria-expanded=true]>.sui-chevron-NVqyn{rotate:180deg}.sui-inputFrame-mYx2Q{--_sui-combobox-chevron-inset:var(--sui-space-4,1rem);align-items:center;display:inline-grid}.sui-inputFrame-mYx2Q[data-size=sm]{--_sui-combobox-chevron-inset:var(--sui-space-3,.75rem)}.sui-inputFrame-mYx2Q[data-size=lg]{--_sui-combobox-chevron-inset:var(--sui-space-6,1.5rem)}.sui-inputFrame-mYx2Q>*{grid-area:1/1}.sui-inputFrame-mYx2Q .sui-input--HTv1{padding-inline-end:calc(var(--_sui-combobox-chevron-inset) + 1em + var(--sui-space-2,.5rem))}.sui-inputFrame-mYx2Q .sui-chevron-NVqyn{color:var(--sui-color-text,#111827);pointer-events:none;justify-self:end;margin-inline-end:var(--_sui-combobox-chevron-inset)}.sui-inputFrame-mYx2Q[data-disabled] .sui-chevron-NVqyn{opacity:.5}.sui-popup-rsvuH:popover-open{min-inline-size:max(12rem, anchor-size(width));max-inline-size:min(max(20rem, anchor-size(width)), 100vw - var(--sui-space-2,.5rem) * 2);overflow:hidden}.sui-listbox-2wSrg{--_sui-menu-leading-column:calc(1rem + var(--sui-space-2,.5rem));overscroll-behavior:contain;flex-direction:column;flex:auto;gap:1px;min-block-size:0;display:flex;overflow-y:auto}.sui-option-vhhn5[hidden]{display:none}.sui-option-vhhn5 .sui-check-9yQbP{color:var(--_sui-menu-ink)}.sui-optionLeading-kXakJ{opacity:var(--_sui-menu-part-opacity,1);flex:none;align-items:center;display:flex}.sui-empty-Ahw5K{min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);color:var(--sui-color-text-muted,#4b5563);align-items:center;display:none}.sui-listbox-2wSrg[data-empty]+.sui-empty-Ahw5K{display:flex}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,59 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+import type { ComboboxPlacement } from "./ComboboxPopup";
+interface ComboboxOwnProps {
+    /**
+     * The `ComboboxOption`s
+     */
+    children?: ReactNode;
+    /**
+     * The option selected at first, which leaves the combobox uncontrolled. Defaults to none.
+     */
+    defaultValue?: string | null;
+    /**
+     * Adds a hidden input that submits the selected value with a form under this name
+     */
+    name?: string;
+    /**
+     * Called with the value of the option the user commits
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Shown in the field while no option is selected
+     */
+    placeholder?: ReactNode;
+    /**
+     * Where the list opens. It flips to the other side when there is no room. Defaults to `bottom-start`.
+     */
+    placement?: ComboboxPlacement;
+    /**
+     * Height of the field, matching the `Button` sizes. Defaults to `md`.
+     */
+    size?: ControlSize;
+    /**
+     * The selected option, or null for none, which makes the combobox controlled: update it from `onValueChange`
+     */
+    value?: string | null;
+}
+/**
+ * Props for `Combobox`: its own props plus every `button` prop except those the combobox pattern sets
+ */
+export interface ComboboxProps extends ComboboxOwnProps, Omit<BoxProps<"button">, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "aria-haspopup" | "as" | "defaultValue" | "role" | "type" | "value" | keyof ComboboxOwnProps> {
+}
+/**
+ * A field that opens a list of options to choose one from, following the WAI-ARIA select-only combobox pattern, for
+ * options a native `Select` cannot show, such as people with avatars. The field shows the selected option. Down Arrow,
+ * Enter, Space or a click opens the list; the arrow keys, Home, End and type-ahead move through it; Enter, Space or a
+ * click chooses an option; Escape and Tab close it without choosing. Focus stays on the field. Inside a `Field` it takes
+ * its label, description, error, and required and disabled state from the field; outside one, give it an `aria-label`.
+ *
+ * @example
+ * <Field label="Assignee">
+ *   <Combobox onValueChange={setAssignee} placeholder="Unassigned" value={assignee}>
+ *     <ComboboxOption leading={<Avatar name="Pat Lee" size="xs" />} value="pat">Pat Lee</ComboboxOption>
+ *   </Combobox>
+ * </Field>
+ */
+export declare function Combobox({ children, className, defaultValue, name, onValueChange, placeholder, placement, size, value, ...rest }: ComboboxProps): JSX.Element;
+export {};

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,82 @@
+import { useFieldControl as e } from "../../forms/useFieldControl.js";
+import { anchorNameFor as t } from "../../overlays/anchorNameFor.js";
+import { mergeProps as n } from "../../overlays/mergeProps.js";
+import { ChevronDownIcon as r } from "../Icon/ChevronDownIcon.js";
+import { TextControl as i } from "../TextControl/TextControl.js";
+import a from "./Combobox.module.js";
+import { ComboboxFieldValue as o } from "./ComboboxFieldValue.js";
+import { ComboboxPopup as s } from "./ComboboxPopup.js";
+import { handleComboboxKey as c } from "./comboboxKeys.js";
+import { useComboboxList as l } from "./useComboboxList.js";
+import { useComboboxSelection as u } from "./useComboboxSelection.js";
+import { clsx as d } from "clsx";
+import { useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Combobox/Combobox.tsx
+function g({ children: g, className: v, defaultValue: y = null, name: b, onValueChange: x, placeholder: S, placement: C = "bottom-start", size: w = "md", value: T, ...E }) {
+	let D = e(E), [O, k] = f(null), A = u({
+		defaultValue: y,
+		onValueChange: _(x),
+		value: T
+	}), j = l({
+		controlId: D.id,
+		filter: null,
+		query: "",
+		selection: A
+	}), M = { anchorName: t(j.listId) };
+	function N(e) {
+		!e.defaultPrevented && c(e, j) && e.preventDefault();
+	}
+	function P(e) {
+		e.key === " " && e.preventDefault();
+	}
+	function F(e) {
+		k(j.open);
+	}
+	function I(e) {
+		let t = e.detail > 0, n = t ? O ?? j.open : j.open;
+		k(null), e.defaultPrevented || (e.currentTarget.focus(), j.toggleList(n, t ? "pointer" : "keyboard"));
+	}
+	function L(e) {
+		j.close();
+	}
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(i, {
+		...n(E, {
+			onBlur: L,
+			onClick: I,
+			onKeyDown: N,
+			onKeyUp: P,
+			onPointerDown: F,
+			style: M
+		}),
+		as: "button",
+		className: d(a.field, v),
+		id: j.controlId,
+		role: "combobox",
+		size: w,
+		type: "button",
+		"aria-activedescendant": j.activeDescendant,
+		"aria-controls": j.listId,
+		"aria-expanded": j.open,
+		"aria-haspopup": "listbox",
+		children: [/* @__PURE__ */ m(o, {
+			placeholder: S,
+			selected: j.selectedContent
+		}), /* @__PURE__ */ m(r, { className: a.chevron })]
+	}), /* @__PURE__ */ m(s, {
+		"aria-label": E["aria-label"],
+		"aria-labelledby": E["aria-labelledby"],
+		disabled: D.disabled,
+		form: E.form,
+		list: j,
+		name: b,
+		placement: C,
+		children: g
+	})] });
+}
+function _(e) {
+	return (t) => {
+		t !== null && e?.(t);
+	};
+}
+export { g as Combobox };

package/dist/components/Combobox/Combobox.module.js

@@ -0,0 +1,17 @@
+import './Combobox.css';// src/components/Combobox/Combobox.module.css
+var e = "sui-field-BenH0", t = "sui-placeholder-NQX-b", n = "sui-fieldLabel-zBN6l", r = "sui-fieldLeading-4y-j7", i = "sui-chevron-NVqyn", a = "sui-inputFrame-mYx2Q", o = "sui-input--HTv1", s = "sui-popup-rsvuH", c = "sui-listbox-2wSrg", l = "sui-option-vhhn5", u = "sui-check-9yQbP", d = "sui-optionLeading-kXakJ", f = "sui-empty-Ahw5K", p = {
+	field: e,
+	placeholder: t,
+	fieldLabel: n,
+	fieldLeading: r,
+	chevron: i,
+	inputFrame: a,
+	input: o,
+	popup: s,
+	listbox: c,
+	option: l,
+	check: u,
+	optionLeading: d,
+	empty: f
+};
+export { u as check, i as chevron, p as default, f as empty, e as field, n as fieldLabel, r as fieldLeading, o as input, a as inputFrame, c as listbox, l as option, d as optionLeading, t as placeholder, s as popup };

package/dist/components/Combobox/ComboboxContext.d.ts

@@ -0,0 +1,88 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+/**
+ * What made an option active: a key, which shows the focus ring, or the pointer, which shows only the tint
+ */
+export type ActiveSource = "keyboard" | "pointer";
+/**
+ * The option the keys act on, which `aria-activedescendant` names
+ */
+export interface ActiveOption {
+    /**
+     * What made it active
+     */
+    source: ActiveSource;
+    /**
+     * Its value
+     */
+    value: string;
+}
+/**
+ * What the selected option shows in the field
+ */
+export interface SelectedContent {
+    /**
+     * The option's label
+     */
+    label: ReactNode;
+    /**
+     * The option's leading content, such as an avatar
+     */
+    leading: ReactNode;
+    /**
+     * The option's text, which an `Autocomplete`'s input shows
+     */
+    text: string;
+    /**
+     * The option's value
+     */
+    value: string;
+}
+/**
+ * Tests whether an option shows for the typed text
+ */
+export type ComboboxFilter = (textValue: string, inputValue: string) => boolean;
+/**
+ * State a combobox shares with its options
+ */
+export interface ComboboxContextValue {
+    /**
+     * The option the keys act on, or null for none
+     */
+    active: ActiveOption | null;
+    /**
+     * Makes an option active under the pointer
+     */
+    activateFromPointer: (value: string) => void;
+    /**
+     * The generated id every option id starts with
+     */
+    baseId: string;
+    /**
+     * Commits an option's value and closes the list
+     */
+    commit: (value: string) => void;
+    /**
+     * Whether an option shows for the typed text, or null to show every option
+     */
+    filter: ComboboxFilter | null;
+    /**
+     * The text the options are filtered by; empty shows every option
+     */
+    query: string;
+    /**
+     * The selected option's value, or null for none
+     */
+    selectedValue: string | null;
+    /**
+     * Sets the option the keys act on
+     */
+    setActive: Dispatch<SetStateAction<ActiveOption | null>>;
+    /**
+     * Sets what the selected option shows in the field
+     */
+    setSelectedContent: Dispatch<SetStateAction<SelectedContent | null>>;
+}
+/**
+ * Carries a `Combobox`'s or `Autocomplete`'s state to its options; null outside one
+ */
+export declare const ComboboxContext: import("react").Context<ComboboxContextValue | null>;

package/dist/components/Combobox/ComboboxContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Combobox/ComboboxContext.ts
+var t = e(null);
+export { t as ComboboxContext };

package/dist/components/Combobox/ComboboxFieldValue.d.ts

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from "react";
+import type { SelectedContent } from "./ComboboxContext";
+interface ComboboxFieldValueProps {
+    /**
+     * Shown while no option is selected
+     */
+    placeholder: ReactNode;
+    /**
+     * What the selected option shows, or null for none
+     */
+    selected: SelectedContent | null;
+}
+/**
+ * What a `Combobox`'s field shows: the selected option's leading content and label, or the placeholder
+ */
+export declare function ComboboxFieldValue({ placeholder, selected }: ComboboxFieldValueProps): JSX.Element;
+export {};

package/dist/components/Combobox/ComboboxFieldValue.js

@@ -0,0 +1,33 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Combobox.module.js";
+import { c as r } from "react/compiler-runtime";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Combobox/ComboboxFieldValue.tsx
+function s(s) {
+	let c = r(9), { placeholder: l, selected: u } = s;
+	if (u === null) {
+		let e;
+		return c[0] === l ? e = c[1] : (e = /* @__PURE__ */ a(t, {
+			as: "span",
+			className: n.placeholder,
+			children: l
+		}), c[0] = l, c[1] = e), e;
+	}
+	let d;
+	c[2] === u.leading ? d = c[3] : (d = e(u.leading) && /* @__PURE__ */ a(t, {
+		as: "span",
+		className: n.fieldLeading,
+		"aria-hidden": !0,
+		children: u.leading
+	}), c[2] = u.leading, c[3] = d);
+	let f;
+	c[4] === u.label ? f = c[5] : (f = /* @__PURE__ */ a(t, {
+		as: "span",
+		className: n.fieldLabel,
+		children: u.label
+	}), c[4] = u.label, c[5] = f);
+	let p;
+	return c[6] !== d || c[7] !== f ? (p = /* @__PURE__ */ o(i, { children: [d, f] }), c[6] = d, c[7] = f, c[8] = p) : p = c[8], p;
+}
+export { s as ComboboxFieldValue };

package/dist/components/Combobox/ComboboxOption.d.ts

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `ComboboxOption`: its own props plus every `div` prop except those the combobox pattern sets and the name
+ * its label gives it
+ */
+export interface ComboboxOptionProps extends Omit<BoxProps<"div">, "aria-disabled" | "aria-label" | "aria-labelledby" | "aria-selected" | "as" | "children" | "dangerouslySetInnerHTML" | "hidden" | "id" | "role" | "tabIndex"> {
+    /**
+     * Not accepted: the label names the option
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the label names the option
+     */
+    "aria-labelledby"?: never;
+    /**
+     * The label, which names the option
+     */
+    children: ReactNode;
+    /**
+     * A line of muted text below the label, which describes the option
+     */
+    description?: ReactNode;
+    /**
+     * Whether the option can be reached with the keys but not chosen. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Content before the label, such as an `Avatar` or an icon, which a `Combobox` shows in its field too while the
+     * option is selected
+     */
+    leading?: ReactNode;
+    /**
+     * The text filtering, type-ahead and an `Autocomplete`'s input use. Defaults to the label's text.
+     */
+    textValue?: string;
+    /**
+     * The value this option stands for
+     */
+    value: string;
+}
+/**
+ * One option in a `Combobox` or `Autocomplete`. The selected option shows a check. To leave an option out, do not
+ * render it; an `Autocomplete` hides the options its filter rejects itself.
+ *
+ * @example
+ * <ComboboxOption description="Design" leading={<Avatar name="Pat Lee" size="xs" />} value="pat">
+ *   Pat Lee
+ * </ComboboxOption>
+ */
+export declare function ComboboxOption({ "aria-describedby": describedBy, children, className, description, disabled, leading, onClick, onPointerMove, ref, textValue, value, ...rest }: ComboboxOptionProps): JSX.Element;