@central-ui/react 0.2.0 → 0.4.0

package/dist/components/checkbox/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
-import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { createContext, useContext, useEffect, useId, useState, } from 'react';
 import { Check, Minus } from "../../utils/icons.js";
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
@@ -62,20 +62,20 @@ export function Root({ children, id, validation, ...coreProps }) {
         }, children: children }));
 }
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
-export const CheckboxGroup = /* @__PURE__ */ forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
+export function CheckboxGroup({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCheckboxGroup, { ...props, ref: ref, "data-component": "checkbox-checkboxgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "checkbox-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
+}
+export function Button({ disableStyle, className, ref, ...props }) {
     const context = useCheckboxContext();
     return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "checkbox-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckboxButtonSurface, { ...buttonProps, state: state })) }));
-});
+}
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
-export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+export function Indicator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: (() => {
                 if (state.indeterminate)
                     return _jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" });
@@ -83,37 +83,37 @@ export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disable
                     return _jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" });
                 return null;
             })() })) }));
-});
+}
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+export function Label({ disableStyle, className, ref, ...props }) {
     const context = useCheckboxContext();
     return (_jsx("label", { ...usePartAttributes(), ...props, ref: ref, htmlFor: context.coreProps.id, "data-component": "checkbox-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+}
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const messageId = useMessageId(id);
     return (_jsx("span", { ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+export function Error({ children, ref, ...props }) {
     const context = useCheckboxContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "checkbox-error", children: content });
-});
+}
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+export function Success({ children, ref, ...props }) {
     const context = useCheckboxContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "checkbox-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the checkbox
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const messageId = useMessageId(id);
     return _jsx("span", { "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 const CheckboxContext = /* @__PURE__ */ createContext(null);
 function useCheckboxContext() {
     const context = useContext(CheckboxContext);
@@ -133,7 +133,7 @@ function usePartAttributes() {
     };
 }
 // Rendered by Base UI as the checkbox element, it reports Base UI's live state back to Root's mirror
-const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
+function CheckboxButtonSurface({ state, ref, ...props }) {
     const context = useCheckboxContext();
     useEffect(() => {
         context.setState({
@@ -152,7 +152,7 @@ const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButton
         context.setState,
     ]);
     return _jsx("span", { ...props, ref: ref });
-});
+}
 // Registering a message part's id in Button's aria-describedby while the part is mounted
 function useMessageId(id) {
     const generatedId = useId();

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

@@ -3,6 +3,10 @@ import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 import type { ValidationProps } from '../../types/Validation.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import type { ValidationMessageChildren } from '../../utils/Validation.ts';
+type IconProps = Omit<SVGIconProps, 'strokeWidth'> & {
+    /** @default 1.5 */
+    strokeWidth?: SVGIconProps['strokeWidth'];
+};
 type StyleProps = {
     /**
      * Disables preset styling for this element.
@@ -208,14 +212,14 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
  */
 export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, id, validation, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
 /** Use for the standard stacked layout, or omit when supplying your own layout. */
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare function Label({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
 /** Search input with built-in filtering and selected-label display. Its id is managed by Root. Inside ChipsList, the preset automatically uses the compact chip-input sizing. */
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputProps, "className" | "id"> & {
+export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: (Omit<BaseCombobox.Input.Props, 'id' | 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Chips>, 'children' | 'className'> & {
+}) & StyleProps): import("react").JSX.Element;
+export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Chips>, 'children' | 'className' | 'render'> & {
     className?: string;
     /**
      * Keep Input after the chips so keyboard navigation can move between them.
@@ -251,16 +255,16 @@ export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
  *   </Combobox.ChipsList>
  * </Combobox.InputGroup>
  */
-export declare const ChipsList: <Item extends ItemShape = ItemShape>(props: ChipsListProps<Item>) => ReactElement;
+export declare function ChipsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ref, ...props }: ChipsListProps<Item>): import("react").JSX.Element;
 /** Reads Base UI selection without rendering its own element. Use its children callback only when you need a custom selection display; Input already displays the selected label automatically. */
 export declare const Value: typeof BaseCombobox.Value;
-export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.List>, 'children' | 'className'> & {
+export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.List>, 'children' | 'className' | 'render'> & {
     className?: string;
     /** Required groups composition. Use GroupsList rather than another listbox primitive. */
     children?: ReactNode;
 } & StyleProps;
 /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
-export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ScrollArea({ disableStyle, className, ref, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     /**
      * Return Group with its ItemsList; the collection already performs filtering.
@@ -284,21 +288,21 @@ export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
 } & StyleProps;
 /** Required items container inside Group. A children callback receives the filtered items belonging to that Group; do not repeat filtering yourself. Manually annotate item with Combobox.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
 export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item>): import("react").JSX.Element;
-export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Group>, 'items' | 'className'> & {
+export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Group>, 'items' | 'className' | 'render'> & {
     className?: string;
     /** Items for this group; pass group.items from GroupsList. Required even for a flat list. */
     items: readonly Item[];
 } & StyleProps;
 /** Required wrapper around ItemsList, even for a visually flat list. Pass group.items. A GroupLabel is optional; omit it when the group has an empty label. */
 export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
-export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Item>, 'value' | 'className'> & {
+export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Item>, 'value' | 'className' | 'render'> & {
     className?: string;
     /** Pass the item supplied by ItemsList so selection can match it by item.value. */
     value: Item;
 } & StyleProps;
 /** Required selectable row inside ItemsList. Pass the complete item object as value, with ItemText and ItemIndicator inside. Selection, highlighting, and keyboard behavior are built in. */
 export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>, 'className'> & {
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseCombobox.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseCombobox.Positioner.Props, 'anchor' | 'positionMethod' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & {
     /** Preferred popup side; collision handling may choose another side. @default 'bottom' */
@@ -311,105 +315,97 @@ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>,
 /** Popup containing Empty, an optional Loading message, and ScrollArea, in that order. Already includes the portal and positioner: do not add either yourself. Defaults to bottom/start with a 5px gap. Core available-space and anchor-width inline styles stay active when preset styling is disabled. */
 export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
 /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
-export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;
 /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
-export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+export declare function Addon({ disableStyle, variant, className, ref, ...props }: (ComponentProps<'div'> & {
     /** Preset adornment appearance. Does not add button behavior. @default 'normal' */
-    variant?: "normal" | "emphasized";
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    variant?: 'normal' | 'emphasized';
+}) & StyleProps): import("react").JSX.Element;
 /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
-export declare const AddonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & {
+export declare function AddonIcon({ disableStyle, children, className, strokeWidth, ref, ...props }: (IconProps & {
     /** One icon element to clone. Its own className is preserved. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}) & StyleProps): ReactElement<SVGIconProps & {
+    'data-component'?: string;
+    'data-style-disabled'?: string;
+}, string | import("react").JSXElementConstructor<any>>;
 /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
-export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "disabled"> & {
+export declare function AddonButton({ disableStyle, className, disabled, type, ref, ...props }: Omit<ComponentProps<'button'>, 'type' | 'disabled'> & {
     /** Button type. @default 'button' */
-    type?: ComponentProps<"button">["type"];
+    type?: ComponentProps<'button'>['type'];
     /** Disables this button. Root disabled or readOnly also disables it automatically. */
-    disabled?: ComponentProps<"button">["disabled"];
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    disabled?: ComponentProps<'button'>['disabled'];
+} & StyleProps): import("react").JSX.Element;
 /** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root validation controls its preset validation border. */
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxInputGroupProps, "className"> & {
+export declare function InputGroup({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.InputGroup.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Displays one selected item inside ChipsList. Keep chips in selected-item order so Base UI can remove the matching item. Supply the item label and an optional removal control. */
-export declare const Chip: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxChipProps, "className"> & {
+export declare function Chip({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Chip.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Removes the surrounding Chip from selection automatically; no onClick handler needed. Supply its content, normally ChipRemoveButtonIcon, and an accessible label. */
-export declare const ChipRemoveButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxChipRemoveProps, "className"> & {
+export declare function ChipRemoveButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.ChipRemove.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
-export declare const AddonOpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxTriggerProps, "className"> & {
+export declare function AddonOpenButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Clears the selection automatically; no click handler needed. Supply its content, normally AddonClearButtonIcon, and an accessible label. */
-export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteClearProps, "className"> & {
+export declare function AddonClearButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Clear.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
-export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "className"> & {
+export declare function GroupLabel({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.GroupLabel.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
-export declare const Empty: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteEmptyProps, "className"> & {
+export declare function Empty({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Empty.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
-export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxSeparatorProps, "className"> & {
+export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Separator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
-export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function ItemText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Optional decorative text inside Addon. Supply the text as children. */
-export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function AddonText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
-export declare const EmptyText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function EmptyText({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Optional supporting text. Supply its content; it describes the input to screen readers automatically. */
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Description({ disableStyle, className, id, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
     children?: ValidationMessageChildren;
 };
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Error({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Built-in decorative removal icon. Place inside ChipRemoveButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
+type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare function AddonOpenButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare function AddonClearButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
+/** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare function ChipRemoveButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function AddonLoadingIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
 /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
-export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").ComboboxItemIndicatorProps, "keepMounted"> & {
+export declare function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }: Omit<SVGIconProps, 'children'> & Pick<BaseCombobox.ItemIndicator.Props, 'keepMounted'> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").JSX.Element;
 /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
-export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "className"> & {
+export declare function Loading({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Status.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
-export declare const LoadingText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function LoadingText({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
-export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function LoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;
 export {};