@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

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

@@ -0,0 +1,251 @@
+import { SelectTriggerSize, SelectTriggerVariant } from "../Select/Select.js";
+import "../Select/index.js";
+import { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/Combobox/Combobox.d.ts
+/**
+ * Groups the combobox parts and owns value, input text, filtering, and popup
+ * state. This is Base UI's `Combobox.Root` re-exported unchanged, so every
+ * root feature is available: `value`/`defaultValue`/`onValueChange`,
+ * `inputValue`/`onInputValueChange`, `items` (enables filtering and the
+ * built-in empty state), `multiple`, `filter`/`filteredItems`/`limit` for
+ * custom matching, `name`/`required`/`disabled`/`readOnly` form wiring, and
+ * object values via `isItemEqualToValue`/`itemToStringLabel`/
+ * `itemToStringValue`. Prefer Combobox over Select once a list is long
+ * enough to need filtering (~15+ options); it does not accept free-form
+ * text. Advanced `grid` and `virtualized` modes are out of this wrapper's
+ * scope — compose `@base-ui/react/combobox` parts directly for those.
+ */
+declare const Combobox$1: typeof Combobox.Root;
+type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = Combobox.Root.Props<Value, Multiple>;
+/** Control height shared by the input group, standalone input, and trigger. */
+type ComboboxSize = "sm" | "md" | "lg";
+declare const useComboboxFilter: typeof Combobox.useFilter;
+declare const useComboboxFilteredItems: typeof Combobox.useFilteredItems;
+interface ComboboxLabelProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Label>, "className"> {
+  className?: string;
+}
+/**
+ * Visible label associated automatically with the combobox **trigger** — use
+ * it with the trigger-anchored (input-inside-popup) pattern. When the
+ * `ComboboxInput` is the form control, label the input instead: a native
+ * `<label htmlFor>`, a composed `FieldLabel`, or `aria-label` on the input.
+ * Renders a `<div>`; pass `render={<span />}` for inline layouts.
+ */
+declare const ComboboxLabel: import("react").ForwardRefExoticComponent<ComboboxLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxInputGroupVariantsOptions {
+  size?: ComboboxSize;
+  className?: string;
+}
+/**
+ * Class list for an element styled as the combobox field frame — for
+ * combobox-shaped controls that don't come from Base UI (command-palette
+ * openers, fake search fields in previews) so every filterable picker
+ * shares one look.
+ */
+declare function comboboxInputGroupVariants({ size, className }?: ComboboxInputGroupVariantsOptions): string;
+interface ComboboxInputGroupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.InputGroup>, "className"> {
+  /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. The `ComboboxInput` inside inherits it. With chips the field grows taller as rows wrap. */
+  size?: ComboboxSize;
+  /** Append the dropdown chevron button after the input — the visual cue that the field holds a predefined list. The popup also opens from clicking the input itself. */
+  showTrigger?: boolean;
+  /** Append a clear button that appears while there is a selection or typed text to erase. Leave off for required fields that must always hold a value. */
+  showClear?: boolean;
+  /** Accessible name for the folded clear button — override with localized copy. */
+  clearLabel?: string;
+  /** Accessible name for the folded chevron button — override with localized copy. */
+  triggerLabel?: string;
+  className?: string;
+}
+/**
+ * The field frame of an input-anchored combobox: seats the `ComboboxInput`
+ * (and selection `ComboboxChips`) inside one border with a single focus
+ * ring, and folds in the standard end-of-field buttons — a dropdown chevron
+ * (`showTrigger`) and a clear button (`showClear`). The popup anchors to
+ * this frame. Give the input an accessible name: a native `<label htmlFor>`,
+ * a composed `FieldLabel`, or `aria-label` on `ComboboxInput`.
+ */
+declare const ComboboxInputGroup: import("react").ForwardRefExoticComponent<ComboboxInputGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxInputProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Input>, "className" | "size"> {
+  /** Control height when the input stands alone. Inside a `ComboboxInputGroup` the group's `size` wins; inside a `ComboboxPopup` the fixed search-row style applies. */
+  size?: ComboboxSize;
+  className?: string;
+}
+/**
+ * The text input that filters the list. Context-aware: bare inside a
+ * `ComboboxInputGroup` (the group owns the frame), a pinned search row
+ * inside a `ComboboxPopup` (the trigger-anchored pattern), and a standalone
+ * `Input`-look field otherwise. Typing filters as you type; ArrowDown opens
+ * and moves through options while focus stays in the input.
+ */
+declare const ComboboxInput: import("react").ForwardRefExoticComponent<ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+interface ComboboxClearProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Clear>, "className"> {
+  className?: string;
+}
+/**
+ * Erases the selection and typed text. Renders only while there is
+ * something to clear. `ComboboxInputGroup` folds one in via `showClear`;
+ * use this part directly for custom field layouts. Icon-only — keep an
+ * accessible name (defaults to "Clear selection").
+ */
+declare const ComboboxClear: import("react").ForwardRefExoticComponent<ComboboxClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+type ComboboxTriggerVariant = SelectTriggerVariant;
+type ComboboxTriggerSize = SelectTriggerSize;
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof Combobox.Trigger>;
+interface ComboboxTriggerProps extends Omit<BaseTriggerProps, "className"> {
+  /** Visual style: `outline` is the input-like default; `ghost` is borderless for toolbars and dense inline filters. */
+  variant?: ComboboxTriggerVariant;
+  /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
+  size?: ComboboxTriggerSize;
+  /** Stretch to fill the container width — the usual setting inside form layouts. `anchorWidth` takes precedence when both are set. */
+  fullWidth?: boolean;
+  /**
+   * CSS width of the trigger (the popup anchor). Accepts a number in pixels
+   * or any CSS width such as `"14rem"`, `"100%"`, or `"max-content"`.
+   * `"max-content"` keeps the control only as wide as the selected value,
+   * padding, and icon. A consumer `style.width` can override this
+   * convenience prop.
+   */
+  anchorWidth?: CSSProperties["width"];
+  /** Replaces the up-down carets. Decorative — hidden from assistive technology. */
+  icon?: ReactNode;
+  className?: string;
+}
+/**
+ * Select-like button anchor for the trigger-anchored pattern: it shows the
+ * current `ComboboxValue` and opens a popup whose search input rides along
+ * inside (`header` on `ComboboxPopup`). Shares the Select trigger recipe, so
+ * value pickers look identical across the system; the up-down carets mark
+ * this one as searchable. Its accessible name comes from a sibling
+ * `ComboboxLabel` (or a composed `FieldLabel`); without one, pass
+ * `aria-label`.
+ */
+declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<ComboboxTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * The selected value's text, for use inside `ComboboxTrigger` (set
+ * `placeholder` for the empty state) or as a render-function wrapper in the
+ * chips pattern. Base UI's `Combobox.Value` re-exported unchanged — it
+ * renders no element of its own; the trigger styles the text.
+ */
+declare const ComboboxValue: typeof Combobox.Value;
+type ComboboxValueProps = Combobox.Value.Props;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Combobox.Positioner>;
+type BaseListProps = ComponentPropsWithoutRef<typeof Combobox.List>;
+type ComboboxAlign = NonNullable<BasePositionerProps["align"]>;
+interface ComboboxPopupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Popup>, "className" | "children"> {
+  /** Items to render: static nodes, or a function `(item, index) => node` that renders the root's filtered `items`. */
+  children?: BaseListProps["children"];
+  /** How the popup lines up along the anchor's bottom (or top) edge. */
+  align?: ComboboxAlign;
+  /** Gap between anchor and popup in pixels. */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /** Additional shift along the alignment axis in pixels. */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /**
+   * Caps the popup's height so long lists scroll inside it — a number is
+   * pixels, a string is any CSS length. Whatever the value, the popup never
+   * exceeds the space between the anchor and the viewport edge.
+   */
+  maxHeight?: number | string;
+  /** Portal destination. Defaults to `document.body`. */
+  container?: ComponentPropsWithoutRef<typeof Combobox.Portal>["container"];
+  /** Pinned content above the list — a `ComboboxInput` here creates the searchable-select (trigger-anchored) pattern. */
+  header?: ReactNode;
+  /** Live status row above the list for async lists ("Searching…", errors). Announced politely to screen readers; its slot stays mounted, so swap the content rather than the prop's presence. */
+  status?: ReactNode;
+  /**
+   * Shown when filtering leaves no items (requires `items` on the root).
+   * Defaults to "No results found." — override with localized copy, or pass
+   * `null` to omit the built-in empty state entirely.
+   */
+  emptyMessage?: ReactNode;
+  /**
+   * Applied to the popup panel. Width hooks: the panel is at least as wide
+   * as the anchor — set `w-[var(--anchor-width)]` to match it exactly or
+   * `w-*`/`max-w-*` for a fixed width. Cap height with the `maxHeight` prop.
+   */
+  className?: string;
+}
+/**
+ * The floating option list, with the portal, positioning, scrollable list,
+ * and always-mounted status/empty regions folded in. Always drops below the
+ * anchor and flips above it only when the space below runs out — never
+ * sideways. Long lists scroll inside the popup, up to `maxHeight`.
+ */
+declare const ComboboxPopup: import("react").ForwardRefExoticComponent<ComboboxPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxItemProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Item>, "className"> {
+  className?: string;
+}
+/**
+ * One option in the popup. Children render as the option's label; a check
+ * mark appears at the item's right edge while selected. Filtering matches
+ * the item's `value` — for object values set `itemToStringLabel` on the
+ * root. Keep unavailable options visible but `disabled` so the list stays
+ * spatially consistent.
+ */
+declare const ComboboxItem: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxGroupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Group>, "className"> {
+  className?: string;
+}
+/**
+ * Groups related options under a `ComboboxGroupLabel`, announced together by
+ * assistive technology. With grouped `items` data (`{ value, items }[]`),
+ * pass each group's `items` here and render them via `ComboboxCollection`.
+ */
+declare const ComboboxGroup: import("react").ForwardRefExoticComponent<ComboboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.GroupLabel>, "className"> {
+  className?: string;
+}
+/** Heading for a `ComboboxGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
+declare const ComboboxGroupLabel: import("react").ForwardRefExoticComponent<ComboboxGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the filtered items of the enclosing `ComboboxGroup` through a
+ * function child `(item, index) => node`. Base UI's `Combobox.Collection`
+ * re-exported unchanged — it renders no element of its own.
+ */
+declare const ComboboxCollection: typeof Combobox.Collection;
+type ComboboxCollectionProps = Combobox.Collection.Props;
+interface ComboboxSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Separator>, "className"> {
+  className?: string;
+}
+/** Divider between option groups, exposed to screen readers as a separator. */
+declare const ComboboxSeparator: import("react").ForwardRefExoticComponent<ComboboxSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxChipsProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Chips>, "className"> {
+  className?: string;
+}
+/**
+ * Row of selection chips for a `multiple` combobox, rendered inside the
+ * `ComboboxInputGroup` before the input. Compose it with a `ComboboxValue`
+ * render function that maps the selected values to `ComboboxChip`s and ends
+ * with the `ComboboxInput`, so typing continues after the chips.
+ */
+declare const ComboboxChips: import("react").ForwardRefExoticComponent<ComboboxChipsProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxChipProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.Chip>, "className"> {
+  className?: string;
+}
+/**
+ * One selected value in a `multiple` combobox. ArrowLeft from the input
+ * walks the chips and Backspace removes the last one; give each chip an
+ * `aria-label` naming its value. Nest a `ComboboxChipRemove` for pointer
+ * users.
+ */
+declare const ComboboxChip: import("react").ForwardRefExoticComponent<ComboboxChipProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ComboboxChipRemoveBaseProps extends Omit<ComponentPropsWithoutRef<typeof Combobox.ChipRemove>, "className"> {
+  className?: string;
+}
+/** The remove button renders only an icon, so an accessible name naming the value is required. */
+type ComboboxChipRemoveProps = ComboboxChipRemoveBaseProps & ({
+  "aria-label": string;
+} | {
+  "aria-labelledby": string;
+});
+/**
+ * Removes its chip's value from the selection. Icon-only, so an accessible
+ * name is required — include the value it removes, e.g.
+ * `aria-label={`Remove ${item.label}`}`. Children replace the default × icon.
+ */
+declare const ComboboxChipRemove: import("react").ForwardRefExoticComponent<ComboboxChipRemoveProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Combobox$1 as Combobox, ComboboxAlign, ComboboxChip, ComboboxChipProps, ComboboxChipRemove, ComboboxChipRemoveProps, ComboboxChips, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, ComboboxInputGroupProps, ComboboxInputGroupVariantsOptions, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxPopup, ComboboxPopupProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxSize, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxTriggerVariant, ComboboxValue, ComboboxValueProps, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,354 @@
+import { cn } from "../../lib/cn.js";
+import { inputVariants } from "../Input/Input.js";
+import { selectTriggerVariants } from "../Select/Select.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/Combobox/Combobox.tsx
+/**
+* Groups the combobox parts and owns value, input text, filtering, and popup
+* state. This is Base UI's `Combobox.Root` re-exported unchanged, so every
+* root feature is available: `value`/`defaultValue`/`onValueChange`,
+* `inputValue`/`onInputValueChange`, `items` (enables filtering and the
+* built-in empty state), `multiple`, `filter`/`filteredItems`/`limit` for
+* custom matching, `name`/`required`/`disabled`/`readOnly` form wiring, and
+* object values via `isItemEqualToValue`/`itemToStringLabel`/
+* `itemToStringValue`. Prefer Combobox over Select once a list is long
+* enough to need filtering (~15+ options); it does not accept free-form
+* text. Advanced `grid` and `virtualized` modes are out of this wrapper's
+* scope — compose `@base-ui/react/combobox` parts directly for those.
+*/
+const Combobox$1 = Combobox.Root;
+const useComboboxFilter = Combobox.useFilter;
+const useComboboxFilteredItems = Combobox.useFilteredItems;
+function ChevronDownIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+function ChevronsUpDownIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+	});
+}
+const ComboboxInputGroupContext = createContext(null);
+const ComboboxPopupContext = createContext(false);
+/**
+* Visible label associated automatically with the combobox **trigger** — use
+* it with the trigger-anchored (input-inside-popup) pattern. When the
+* `ComboboxInput` is the form control, label the input instead: a native
+* `<label htmlFor>`, a composed `FieldLabel`, or `aria-label` on the input.
+* Renders a `<div>`; pass `render={<span />}` for inline layouts.
+*/
+const ComboboxLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Label, {
+	ref,
+	className: cn("cursor-default font-sans text-sm font-medium text-foreground", className),
+	...rest
+}));
+ComboboxLabel.displayName = "ComboboxLabel";
+const fieldButtonClasses = "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-primary-50 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const inputGroupBaseClasses = "flex w-full min-w-0 flex-wrap items-center cursor-text rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:has-[input:focus-visible]:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:has-[input:focus-visible]:outline-destructive data-readonly:cursor-default data-readonly:bg-surface data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const inputGroupSizeClasses = {
+	sm: "min-h-8 gap-x-1.5 gap-y-1 px-2.5 py-1 text-sm any-pointer-coarse:text-base",
+	md: "min-h-10 gap-x-2 gap-y-1 px-3 py-1 text-sm any-pointer-coarse:text-base",
+	lg: "min-h-12 gap-x-2 gap-y-1 px-3.5 py-1 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+/**
+* Class list for an element styled as the combobox field frame — for
+* combobox-shaped controls that don't come from Base UI (command-palette
+* openers, fake search fields in previews) so every filterable picker
+* shares one look.
+*/
+function comboboxInputGroupVariants({ size = "md", className } = {}) {
+	return cn(inputGroupBaseClasses, inputGroupSizeClasses[size], className);
+}
+/**
+* The field frame of an input-anchored combobox: seats the `ComboboxInput`
+* (and selection `ComboboxChips`) inside one border with a single focus
+* ring, and folds in the standard end-of-field buttons — a dropdown chevron
+* (`showTrigger`) and a clear button (`showClear`). The popup anchors to
+* this frame. Give the input an accessible name: a native `<label htmlFor>`,
+* a composed `FieldLabel`, or `aria-label` on `ComboboxInput`.
+*/
+const ComboboxInputGroup = forwardRef(({ size = "md", showTrigger = true, showClear = false, clearLabel = "Clear selection", triggerLabel = "Show options", className, children, ...rest }, ref) => /* @__PURE__ */ jsx(ComboboxInputGroupContext.Provider, {
+	value: size,
+	children: /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		ref,
+		className: cn(comboboxInputGroupVariants({ size }), className),
+		...rest,
+		children: [
+			children,
+			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
+				"aria-label": clearLabel,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			}),
+			showTrigger && /* @__PURE__ */ jsx(Combobox.Trigger, {
+				"aria-label": triggerLabel,
+				className: fieldButtonClasses,
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+			})
+		]
+	})
+}));
+ComboboxInputGroup.displayName = "ComboboxInputGroup";
+const bareInputClasses = "h-6 min-w-16 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:pointer-events-none";
+const popupInputClasses = "h-10 w-full shrink-0 appearance-none rounded-none border-0 border-b border-border bg-transparent px-3 font-sans text-sm any-pointer-coarse:text-base text-foreground placeholder:text-muted-foreground outline-none disabled:pointer-events-none";
+/**
+* The text input that filters the list. Context-aware: bare inside a
+* `ComboboxInputGroup` (the group owns the frame), a pinned search row
+* inside a `ComboboxPopup` (the trigger-anchored pattern), and a standalone
+* `Input`-look field otherwise. Typing filters as you type; ArrowDown opens
+* and moves through options while focus stays in the input.
+*/
+const ComboboxInput = forwardRef(({ size = "md", className, ...rest }, ref) => {
+	const groupSize = useContext(ComboboxInputGroupContext);
+	const inPopup = useContext(ComboboxPopupContext);
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		ref,
+		className: cn(groupSize != null ? bareInputClasses : inPopup ? popupInputClasses : inputVariants({ size }), className),
+		...rest
+	});
+});
+ComboboxInput.displayName = "ComboboxInput";
+/**
+* Erases the selection and typed text. Renders only while there is
+* something to clear. `ComboboxInputGroup` folds one in via `showClear`;
+* use this part directly for custom field layouts. Icon-only — keep an
+* accessible name (defaults to "Clear selection").
+*/
+const ComboboxClear = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Clear, {
+	ref,
+	"aria-label": "Clear selection",
+	className: cn(fieldButtonClasses, className),
+	...rest,
+	children: children ?? /* @__PURE__ */ jsx(XIcon, {})
+}));
+ComboboxClear.displayName = "ComboboxClear";
+function mergeAnchorWidth(anchorWidth, style) {
+	if (anchorWidth == null) return style;
+	const anchorStyle = { width: anchorWidth };
+	return typeof style === "function" ? (state) => ({
+		...anchorStyle,
+		...style(state)
+	}) : {
+		...anchorStyle,
+		...style ?? {}
+	};
+}
+/**
+* Select-like button anchor for the trigger-anchored pattern: it shows the
+* current `ComboboxValue` and opens a popup whose search input rides along
+* inside (`header` on `ComboboxPopup`). Shares the Select trigger recipe, so
+* value pickers look identical across the system; the up-down carets mark
+* this one as searchable. Its accessible name comes from a sibling
+* `ComboboxLabel` (or a composed `FieldLabel`); without one, pass
+* `aria-label`.
+*/
+const ComboboxTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Combobox.Trigger, {
+	ref,
+	className: cn("group/combobox-trigger", selectTriggerVariants({
+		variant,
+		size,
+		fullWidth
+	}), className),
+	style: mergeAnchorWidth(anchorWidth, style),
+	...rest,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate text-primary group-data-placeholder/combobox-trigger:text-muted-foreground",
+		children
+	}), /* @__PURE__ */ jsx(Combobox.Icon, {
+		"aria-hidden": "true",
+		className: "flex text-muted-foreground",
+		children: icon ?? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+	})]
+}));
+ComboboxTrigger.displayName = "ComboboxTrigger";
+/**
+* The selected value's text, for use inside `ComboboxTrigger` (set
+* `placeholder` for the empty state) or as a render-function wrapper in the
+* chips pattern. Base UI's `Combobox.Value` re-exported unchanged — it
+* renders no element of its own; the trigger styles the text.
+*/
+const ComboboxValue = Combobox.Value;
+const popupSurfaceClasses = "relative overflow-clip rounded-md border border-border bg-background font-sans text-sm text-foreground shadow-md outline-none";
+const popupBehaviorClasses = "flex max-h-[min(var(--combobox-max-height,9999px),var(--available-height))] flex-col min-w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+const listClasses = "min-h-0 scroll-py-1 overflow-y-auto overscroll-contain p-1 outline-none data-empty:p-0";
+const statusClasses = "flex shrink-0 items-center gap-2 px-3 py-2 font-sans text-xs text-muted-foreground empty:p-0";
+const emptyClasses = "shrink-0 px-3 py-6 text-center font-sans text-sm text-muted-foreground empty:p-0";
+/**
+* The floating option list, with the portal, positioning, scrollable list,
+* and always-mounted status/empty regions folded in. Always drops below the
+* anchor and flips above it only when the space below runs out — never
+* sideways. Long lists scroll inside the popup, up to `maxHeight`.
+*/
+const ComboboxPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffset = 0, collisionPadding, maxHeight, container, header, status, emptyMessage = "No results found.", className, children, ...rest }, ref) => /* @__PURE__ */ jsx(ComboboxPopupContext.Provider, {
+	value: true,
+	children: /* @__PURE__ */ jsx(Combobox.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			side: "bottom",
+			align,
+			sideOffset,
+			alignOffset,
+			collisionPadding,
+			collisionAvoidance: {
+				side: "flip",
+				fallbackAxisSide: "none"
+			},
+			className: "z-50 outline-none",
+			style: maxHeight != null ? { "--combobox-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				ref,
+				className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+				...rest,
+				children: [
+					header,
+					/* @__PURE__ */ jsx(Combobox.Status, {
+						className: statusClasses,
+						children: status
+					}),
+					emptyMessage != null && /* @__PURE__ */ jsx(Combobox.Empty, {
+						className: emptyClasses,
+						children: emptyMessage
+					}),
+					/* @__PURE__ */ jsx(Combobox.List, {
+						className: listClasses,
+						children
+					})
+				]
+			})
+		})
+	})
+}));
+ComboboxPopup.displayName = "ComboboxPopup";
+const itemClasses = "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/**
+* One option in the popup. Children render as the option's label; a check
+* mark appears at the item's right edge while selected. Filtering matches
+* the item's `value` — for object values set `itemToStringLabel` on the
+* root. Keep unavailable options visible but `disabled` so the list stays
+* spatially consistent.
+*/
+const ComboboxItem = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Combobox.Item, {
+	ref,
+	className: cn(itemClasses, className),
+	...rest,
+	children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		className: "absolute right-2 flex size-4 items-center justify-center text-primary",
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	})]
+}));
+ComboboxItem.displayName = "ComboboxItem";
+/**
+* Groups related options under a `ComboboxGroupLabel`, announced together by
+* assistive technology. With grouped `items` data (`{ value, items }[]`),
+* pass each group's `items` here and render them via `ComboboxCollection`.
+*/
+const ComboboxGroup = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Group, {
+	ref,
+	className,
+	...rest
+}));
+ComboboxGroup.displayName = "ComboboxGroup";
+/** Heading for a `ComboboxGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
+const ComboboxGroupLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+	ref,
+	className: cn("px-2 py-1.5 font-sans text-xs font-medium text-muted-foreground", className),
+	...rest
+}));
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+/**
+* Renders the filtered items of the enclosing `ComboboxGroup` through a
+* function child `(item, index) => node`. Base UI's `Combobox.Collection`
+* re-exported unchanged — it renders no element of its own.
+*/
+const ComboboxCollection = Combobox.Collection;
+/** Divider between option groups, exposed to screen readers as a separator. */
+const ComboboxSeparator = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...rest
+}));
+ComboboxSeparator.displayName = "ComboboxSeparator";
+/**
+* Row of selection chips for a `multiple` combobox, rendered inside the
+* `ComboboxInputGroup` before the input. Compose it with a `ComboboxValue`
+* render function that maps the selected values to `ComboboxChip`s and ends
+* with the `ComboboxInput`, so typing continues after the chips.
+*/
+const ComboboxChips = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Chips, {
+	ref,
+	className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-1", className),
+	...rest
+}));
+ComboboxChips.displayName = "ComboboxChips";
+const chipClasses = "flex h-6 min-w-0 cursor-default select-none items-center gap-1 rounded-md bg-muted ps-2 pe-1 font-sans text-sm text-slate-700 data-highlighted:bg-primary-100 focus-within:bg-primary-100 data-disabled:pointer-events-none data-disabled:opacity-50";
+/**
+* One selected value in a `multiple` combobox. ArrowLeft from the input
+* walks the chips and Backspace removes the last one; give each chip an
+* `aria-label` naming its value. Nest a `ComboboxChipRemove` for pointer
+* users.
+*/
+const ComboboxChip = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.Chip, {
+	ref,
+	className: cn(chipClasses, className),
+	...rest
+}));
+ComboboxChip.displayName = "ComboboxChip";
+const chipRemoveClasses = "relative inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+/**
+* Removes its chip's value from the selection. Icon-only, so an accessible
+* name is required — include the value it removes, e.g.
+* `aria-label={`Remove ${item.label}`}`. Children replace the default × icon.
+*/
+const ComboboxChipRemove = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+	ref,
+	className: cn(chipRemoveClasses, className),
+	...rest,
+	children: children ?? /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+}));
+ComboboxChipRemove.displayName = "ComboboxChipRemove";
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxAlign, ComboboxChip, ComboboxChipProps, ComboboxChipRemove, ComboboxChipRemoveProps, ComboboxChips, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, ComboboxInputGroupProps, ComboboxInputGroupVariantsOptions, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxPopup, ComboboxPopupProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxSize, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxTriggerVariant, ComboboxValue, ComboboxValueProps, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems } from "./Combobox.js";
+export { Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems };

package/dist/components/Combobox/index.js

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems } from "./Combobox.js";
+export { Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems };