@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/combobox-field/combobox.css

@@ -0,0 +1,524 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._control_duzjy_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._control_duzjy_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._control_duzjy_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._control_duzjy_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._control_duzjy_3:hover:not([data-disabled], [data-readonly]), ._control_duzjy_3[data-focused], ._control_duzjy_3[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._control_duzjy_3[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._control_duzjy_3[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._control_duzjy_3[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._control_duzjy_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._control_duzjy_3::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._control_duzjy_3::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._control_duzjy_3 {
+    display: inline-flex;
+  }
+  ._control_duzjy_3::placeholder {
+    color: var(--field-muted-fg);
+  }
+  ._control_duzjy_3 {
+    position: relative;
+    gap: var(--combobox-gap, var(--sys-unit-6));
+    justify-content: space-between;
+    inline-size: 100%;
+    min-inline-size: 0;
+    cursor: pointer;
+  }
+  ._control_duzjy_3[data-readonly] {
+    cursor: default;
+  }
+  ._content_duzjy_78 {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    min-block-size: var(--sys-unit-14);
+    min-inline-size: 0;
+    overflow-wrap: normal;
+    hyphens: auto;
+    line-height: normal;
+  }
+  ._control_duzjy_3[data-placeholder] ._content_duzjy_78 {
+    color: var(--field-muted-fg);
+  }
+  ._trigger_duzjy_93 {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--combobox-gap, var(--sys-unit-6));
+    min-inline-size: 0;
+    text-align: start;
+  }
+  ._content_duzjy_78 + ._trigger_duzjy_93 {
+    flex: none;
+  }
+  ._spokenValue_duzjy_104 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._icon_duzjy_112 {
+    display: inline-flex;
+    color: var(--field-muted-fg);
+  }
+  ._tags_duzjy_116 {
+    display: contents;
+  }
+  ._tagList_duzjy_119 {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    min-inline-size: 0;
+  }
+  ._tag_duzjy_116[data-variant=subtle] {
+    --combobox-tag-bg: var(--sys-color-neutral-bg);
+    --combobox-tag-fg: var(--sys-color-neutral-fg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-variant=solid] {
+    --combobox-tag-bg: var(--sys-color-neutral-fg);
+    --combobox-tag-fg: var(--sys-color-neutral-bg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-variant=outline] {
+    --combobox-tag-bg: transparent;
+    --combobox-tag-fg: var(--sys-color-neutral-fg);
+    --combobox-tag-border: var(--sys-color-neutral-border);
+  }
+  ._tag_duzjy_116[data-tone=info][data-variant=subtle] {
+    --combobox-tag-bg: var(--sys-color-info-bg);
+    --combobox-tag-fg: var(--sys-color-info-fg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=info][data-variant=solid] {
+    --combobox-tag-bg: var(--sys-color-info-fg);
+    --combobox-tag-fg: var(--sys-color-info-bg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=info][data-variant=outline] {
+    --combobox-tag-bg: transparent;
+    --combobox-tag-fg: var(--sys-color-info-fg);
+    --combobox-tag-border: var(
+    	--sys-color-info-border
+    );
+  }
+  ._tag_duzjy_116[data-tone=success][data-variant=subtle] {
+    --combobox-tag-bg: var(--sys-color-success-bg);
+    --combobox-tag-fg: var(--sys-color-success-fg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=success][data-variant=solid] {
+    --combobox-tag-bg: var(--sys-color-success-fg);
+    --combobox-tag-fg: var(--sys-color-success-bg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=success][data-variant=outline] {
+    --combobox-tag-bg: transparent;
+    --combobox-tag-fg: var(--sys-color-success-fg);
+    --combobox-tag-border: var(
+    	--sys-color-success-border
+    );
+  }
+  ._tag_duzjy_116[data-tone=warning][data-variant=subtle] {
+    --combobox-tag-bg: var(--sys-color-warning-bg);
+    --combobox-tag-fg: var(--sys-color-warning-fg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=warning][data-variant=solid] {
+    --combobox-tag-bg: var(--sys-color-warning-fg);
+    --combobox-tag-fg: var(--sys-color-warning-bg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=warning][data-variant=outline] {
+    --combobox-tag-bg: transparent;
+    --combobox-tag-fg: var(--sys-color-warning-fg);
+    --combobox-tag-border: var(
+    	--sys-color-warning-border
+    );
+  }
+  ._tag_duzjy_116[data-tone=error][data-variant=subtle] {
+    --combobox-tag-bg: var(--sys-color-error-bg);
+    --combobox-tag-fg: var(--sys-color-error-fg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=error][data-variant=solid] {
+    --combobox-tag-bg: var(--sys-color-error-fg);
+    --combobox-tag-fg: var(--sys-color-error-bg);
+    --combobox-tag-border: transparent;
+  }
+  ._tag_duzjy_116[data-tone=error][data-variant=outline] {
+    --combobox-tag-bg: transparent;
+    --combobox-tag-fg: var(--sys-color-error-fg);
+    --combobox-tag-border: var(
+    	--sys-color-error-border
+    );
+  }
+  ._tag_duzjy_116 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-3);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-14);
+    border: 1px solid var(--combobox-tag-border);
+    border-radius: var(--sys-radius-full);
+    background: var(--combobox-tag-bg);
+    padding: var(--sys-unit-2) var(--sys-unit-6);
+    color: var(--combobox-tag-fg);
+    font: var(--sys-font-label-small);
+  }
+  ._tag_duzjy_116 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tag_duzjy_116:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tag_duzjy_116[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tag_duzjy_116 {
+    max-inline-size: 100%;
+  }
+  ._tagRemove_duzjy_236 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--sys-unit-10);
+    block-size: var(--sys-unit-10);
+    margin-block: calc(-1 * var(--sys-unit-1));
+    margin-inline-start: var(--sys-unit-1);
+    margin-inline-end: calc(-1 * var(--sys-unit-2));
+    border: 0;
+    border-radius: var(--sys-radius-circle);
+    background: none;
+    padding: 0;
+    color: inherit;
+  }
+  ._tagRemove_duzjy_236 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tagRemove_duzjy_236:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._tagRemove_duzjy_236 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._tagRemove_duzjy_236:hover {
+    background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
+  }
+  ._tagRemove_duzjy_236:active {
+    background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
+  }
+  ._positioner_duzjy_270 {
+    --_popup-edge-padding: var(
+    	--popup-edge-padding,
+    	var(--sys-unit-16)
+    );
+  }
+  @property --_popup-edge-padding {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  ._positioner_duzjy_270 {
+    outline: none;
+  }
+  ._popup_duzjy_284 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_duzjy_284 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_duzjy_284[data-starting-style], ._popup_duzjy_284[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._popup_duzjy_284 {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--anchor-width);
+    max-inline-size: var(--available-width);
+    max-block-size: min(var(--available-height, 22rem), var(--combobox-popup-max-block-size, 22rem));
+  }
+  ._search_duzjy_312 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._search_duzjy_312 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._search_duzjy_312[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._search_duzjy_312 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._search_duzjy_312:hover:not([data-disabled], [data-readonly]), ._search_duzjy_312[data-focused], ._search_duzjy_312[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._search_duzjy_312[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._search_duzjy_312[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._search_duzjy_312[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._search_duzjy_312[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._search_duzjy_312::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._search_duzjy_312::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._search_duzjy_312 {
+    display: inline-flex;
+  }
+  ._search_duzjy_312::placeholder {
+    color: var(--field-muted-fg);
+  }
+  ._search_duzjy_312 {
+    flex-shrink: 0;
+    margin-block-end: var(--sys-unit-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+  ._statusArea_duzjy_382 {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    contain: inline-size;
+  }
+  ._statusArea_duzjy_382 > * + * {
+    align-self: flex-start;
+  }
+  ._status_duzjy_382,
+  ._empty_duzjy_392 {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    contain: inline-size;
+    min-block-size: 1lh;
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._status_duzjy_382:empty,
+  ._empty_duzjy_392:empty {
+    min-block-size: 0;
+    padding: 0;
+  }
+  ._list_duzjy_408 {
+    min-block-size: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--sys-unit-4);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+  }
+  ._option_duzjy_416 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-20);
+    border-radius: var(--sys-radius-sm);
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    user-select: none;
+  }
+  ._option_duzjy_416 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._option_duzjy_416::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_duzjy_416::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_duzjy_416:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._option_duzjy_416:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._option_duzjy_416 {
+    outline: none;
+  }
+  ._option_duzjy_416[data-highlighted] {
+    background: var(--sys-color-primary-container);
+    color: var(--sys-color-on-primary-container);
+  }
+  ._option_duzjy_416[data-disabled] {
+    opacity: 0.38;
+    color: var(--sys-color-text-muted);
+  }
+  ._indicator_duzjy_464 {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--combobox-indicator-fg, var(--sys-color-primary));
+  }
+  ._checkbox_duzjy_469 {
+    --box-border: var(--sys-color-border);
+    --box-bg: var(--sys-color-surface);
+    --box-fg: var(--sys-color-on-primary);
+    --box-checked-bg: var(--sys-color-primary);
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: var(--checkbox-size, var(--sys-unit-16));
+    block-size: var(--checkbox-size, var(--sys-unit-16));
+    border: 1px solid var(--box-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--box-bg);
+    color: var(--box-fg);
+  }
+  @media not (prefers-reduced-motion) {
+    ._checkbox_duzjy_469 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_duzjy_416[data-selected] ._checkbox_duzjy_469 {
+    --box-border: var(--box-checked-bg);
+    --box-bg: var(--box-checked-bg);
+  }
+  ._checkboxIndicator_duzjy_494 {
+    display: grid;
+    place-items: center;
+  }
+  ._checkboxIndicator_duzjy_494 svg {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._checkboxIndicator_duzjy_494 {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._checkboxIndicator_duzjy_494 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._checkboxIndicator_duzjy_494[data-selected] {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._checkboxIndicator_duzjy_494[data-selected] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._optionText_duzjy_520 {
+    flex: 1;
+    min-inline-size: 0;
+  }
+}

package/dist/components/combobox-field/combobox.d.ts

@@ -0,0 +1,106 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { type ComponentProps, type ReactNode, type Ref } from "react";
+import { Field, type FieldState } from "../field/index.ts";
+export type ComboboxRootProps<TItem, TMultiple extends boolean | undefined = false> = Omit<BaseCombobox.Root.Props<TItem, TMultiple>, "autoHighlight"> & Readonly<{
+    /** `"always"` highlights the first item whenever the list changes. @default "always" */
+    autoHighlight?: boolean | "always";
+}>;
+declare const ComboboxRoot: <TItem, TMultiple extends boolean | undefined = false>({ autoHighlight, ...props }: ComboboxRootProps<TItem, TMultiple>) => ReactNode;
+export type ComboboxControlProps = BaseCombobox.InputGroup.Props & Readonly<{
+    /** The control element, which the positioner takes as its `anchor`. */
+    ref?: Ref<HTMLDivElement>;
+    /** The states projected onto the control as `data-*` attributes. */
+    state?: FieldState;
+    /**
+     * The tags, beside the trigger. They show the selection, so the
+     * trigger's own value is read but not shown.
+     */
+    tags?: ReactNode;
+}>;
+declare const ComboboxControl: ({ className, children, tags, state, ...props }: ComboboxControlProps) => ReactNode;
+export type ComboboxTagsProps<TItem> = Readonly<{
+    /** Names the group of tags, such as "Selected statuses". */
+    label: string;
+    items: readonly TItem[];
+    /** A stable identity per item. */
+    itemKey: (item: TItem) => string;
+    /** An item as plain text, which its tag is read as. */
+    itemLabel: (item: TItem) => string;
+    /** The remove control's own name, which the tag's name completes, such as "Remove". */
+    removeLabel: string;
+    /** The remove control's tooltip for an item, such as "Remove Jan Jansen". */
+    removeHint: (item: TItem) => string;
+    /** Renders one tag's content. */
+    children: (item: TItem) => ReactNode;
+    /** Called with the items left after a removal. */
+    onRemove: (remaining: readonly TItem[]) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+}>;
+declare const ComboboxTags: <TItem>({ label, items, itemKey, itemLabel, removeLabel, removeHint, children, onRemove, disabled, readOnly, }: ComboboxTagsProps<TItem>) => ReactNode;
+declare const ComboboxPositioner: ({ className, sideOffset, ...props }: BaseCombobox.Positioner.Props) => ReactNode;
+declare const ComboboxPopup: ({ className, ...props }: BaseCombobox.Popup.Props) => ReactNode;
+export type ComboboxSearchProps = Omit<BaseCombobox.Input.Props, "aria-label" | "aria-labelledby"> & Readonly<{
+    /** The search box's accessible name. */
+    label: string;
+}>;
+/**
+ * The search box inside the popup. It names itself, clearing the field label
+ * base-ui hands every labelable control under a field, which names the
+ * field's own control.
+ */
+declare const ComboboxSearch: ({ className, label, ...props }: ComboboxSearchProps) => ReactNode;
+export type ComboboxListProps = BaseCombobox.List.Props & Readonly<{
+    /** The scroll container, which `useInfiniteScroll` watches. */
+    ref?: Ref<HTMLDivElement>;
+}>;
+declare const ComboboxList: ({ className, ...props }: ComboboxListProps) => ReactNode;
+export type ComboboxOptionProps = BaseCombobox.Item.Props & Readonly<{
+    /** Draws a checkbox rather than a tick, for a multi-value list. */
+    multiple?: boolean;
+}>;
+declare const ComboboxOption: ({ className, children, multiple, ...props }: ComboboxOptionProps) => ReactNode;
+declare const ComboboxEmpty: ({ className, ...props }: BaseCombobox.Empty.Props) => ReactNode;
+declare const ComboboxStatus: ({ className, ...props }: BaseCombobox.Status.Props) => ReactNode;
+declare const ComboboxStatusArea: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+/** The parts of a combobox. */
+export type ComboboxParts = Omit<typeof BaseCombobox, "Root" | "Positioner" | "Popup" | "Input" | "List" | "Empty" | "Status"> & Readonly<{
+    Root: typeof ComboboxRoot;
+    Control: typeof ComboboxControl;
+    Tags: typeof ComboboxTags;
+    Positioner: typeof ComboboxPositioner;
+    Popup: typeof ComboboxPopup;
+    Search: typeof ComboboxSearch;
+    List: typeof ComboboxList;
+    Option: typeof ComboboxOption;
+    Empty: typeof ComboboxEmpty;
+    Status: typeof ComboboxStatus;
+    StatusArea: typeof ComboboxStatusArea;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * The styled parts of a base-ui Combobox: a filterable select whose control
+ * matches `Select`'s trigger and whose popup is the shared popup surface. Every
+ * unstyled base-ui part stays reachable. For the ordinary case, use
+ * `ComboboxField`. The positioner takes the control as its `anchor`.
+ *
+ * @example
+ * <Combobox.Root items={statuses}>
+ * 	<Combobox.Control ref={anchorRef}>
+ * 		<Combobox.Value>{(status: string | null) => status}</Combobox.Value>
+ * 	</Combobox.Control>
+ * 	<Combobox.Portal>
+ * 		<Combobox.Positioner anchor={anchorRef}>
+ * 			<Combobox.Popup>
+ * 				<Combobox.Search label="Search" />
+ * 				<Combobox.List>
+ * 					{(status: string) => <Combobox.Option key={status} value={status}>{status}</Combobox.Option>}
+ * 				</Combobox.List>
+ * 			</Combobox.Popup>
+ * 		</Combobox.Positioner>
+ * 	</Combobox.Portal>
+ * </Combobox.Root>
+ */
+export declare const Combobox: ComboboxParts;
+export {};
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox-field/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox-field/combobox.tsx"],"names":[],"mappings":"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"}