@central-ui/react 0.3.0 → 0.5.0

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

@@ -1,10 +1,10 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
- * Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenerTitle and let OpenerIndicator reflect expansion.
+ * Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenButtonTitle and let OpenButtonIcon reflect expansion.
  *
  * @example Complete composition
  * import { Accordion } from '@central-ui/react'
@@ -33,8 +33,8 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *         {questions.map((question) => (
  *           <Accordion.Item key={question.value} value={question.value}>
  *             <Accordion.OpenButton>
- *               <Accordion.OpenerTitle>{question.title}</Accordion.OpenerTitle>
- *               <Accordion.OpenerIndicator />
+ *               <Accordion.OpenButtonTitle>{question.title}</Accordion.OpenButtonTitle>
+ *               <Accordion.OpenButtonIcon />
  *             </Accordion.OpenButton>
  *             <Accordion.Content>
  *               <div className="p-3">{question.answer}</div>
@@ -55,20 +55,20 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  * </Accordion.Root>
  */
 export declare function Root({ children, ...props }: Omit<BaseAccordion.Root.Props, 'render' | 'className'>): import("react").JSX.Element;
-export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionItemProps, "className" | "render"> & {
+export declare function List({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Item({ disableStyle, className, ref, ...props }: (Omit<BaseAccordion.Item.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Expands or collapses its Item. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes (like data-panel-open) but none of this part's styling. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionTriggerProps, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseAccordion.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const OpenerTitle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export declare function OpenButtonTitle({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
-export declare const OpenerIndicator: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function OpenButtonIcon({ disableStyle, children, className, ref, ...props }: (SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionPanelProps, "className"> & {
+}) & StyleProps): import("react").FunctionComponentElement<any>;
+export declare function Content({ disableStyle, className, ref, ...props }: (Omit<BaseAccordion.Panel.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;

package/dist/components/accordion/index.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { cloneElement, createContext, forwardRef, useContext } from 'react';
+import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ChevronDown } from "../../utils/icons.js";
 /**
- * Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenerTitle and let OpenerIndicator reflect expansion.
+ * Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenButtonTitle and let OpenButtonIcon reflect expansion.
  *
  * @example Complete composition
  * import { Accordion } from '@central-ui/react'
@@ -34,8 +34,8 @@ import { ChevronDown } from "../../utils/icons.js";
  *         {questions.map((question) => (
  *           <Accordion.Item key={question.value} value={question.value}>
  *             <Accordion.OpenButton>
- *               <Accordion.OpenerTitle>{question.title}</Accordion.OpenerTitle>
- *               <Accordion.OpenerIndicator />
+ *               <Accordion.OpenButtonTitle>{question.title}</Accordion.OpenButtonTitle>
+ *               <Accordion.OpenButtonIcon />
  *             </Accordion.OpenButton>
  *             <Accordion.Content>
  *               <div className="p-3">{question.answer}</div>
@@ -59,22 +59,22 @@ export function Root({ children, ...props }) {
     // Native Root renders a div; the fragment preserves our wrapper-free Root contract.
     return (_jsx(BaseAccordion.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }));
 }
-export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, ...props }, ref) {
+export function List({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "accordion-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Item = /* @__PURE__ */ forwardRef(function Item({ disableStyle, className, ...props }, ref) {
+}
+export function Item({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAccordion.Item, { ...props, ref: ref, "data-component": "accordion-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (itemProps, state) => (_jsx(ItemContext.Provider, { value: state.open, children: _jsx("div", { ...itemProps }) })) }));
-});
+}
 /** Expands or collapses its Item. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes (like data-panel-open) but none of this part's styling. */
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+export function OpenButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'accordion-openbutton', disableStyle });
     return (_jsx(BaseAccordion.Header, { children: _jsx(BaseAccordion.Trigger, { ...props, ref: ref, ...rendering }) }));
-});
-export const OpenerTitle = /* @__PURE__ */ forwardRef(function OpenerTitle({ disableStyle, className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, "data-component": "accordion-openertitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
+export function OpenButtonTitle({ disableStyle, className, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, "data-component": "accordion-openbuttontitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
 /** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
-export const OpenerIndicator = /* @__PURE__ */ forwardRef(function OpenerIndicator({ disableStyle, children, className, ...props }, ref) {
+export function OpenButtonIcon({ disableStyle, children, className, ref, ...props }) {
     const open = useContext(ItemContext);
     return cloneElement(children ?? _jsx(ChevronDown, {}), {
         ...props,
@@ -82,14 +82,14 @@ export const OpenerIndicator = /* @__PURE__ */ forwardRef(function OpenerIndicat
         'aria-hidden': true,
         'data-panel-open': open ? '' : undefined,
         ...{
-            'data-component': 'accordion-openerindicator',
+            'data-component': 'accordion-openbuttonicon',
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children?.props.className, className),
     });
-});
-export const Content = /* @__PURE__ */ forwardRef(function Content({ disableStyle, className, ...props }, ref) {
+}
+export function Content({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, "data-component": "accordion-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-// Sharing whether the item is open, so OpenerIndicator can follow it
+}
+// Sharing whether the item is open, so OpenButtonIcon can follow it
 const ItemContext = /* @__PURE__ */ createContext(false);

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

@@ -3,6 +3,10 @@ import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import type { Validation } from '../../types/Validation.ts';
 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.
@@ -213,22 +217,22 @@ export type RootProps<T extends readonly GroupShape[]> = Omit<BaseAutocomplete.R
  */
 export declare function Root<T extends readonly GroupShape[]>({ children, id, validation, open, defaultOpen, onOpenChange, ...props }: RootProps<T>): 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;
 /** Let the input handle suggestion filtering and completion. It accepts free text; choosing a suggestion is optional. Label association is automatic. */
-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<BaseAutocomplete.Input.Props, 'id' | 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Use only for an additional custom display of the current input text. Do not use it to build the editable input; Input already handles that. */
 export declare const Value: typeof BaseAutocomplete.Value;
-export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.List>, 'children' | 'className'> & {
+export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.List>, 'children' | 'className' | 'render'> & {
     className?: string;
     /** Keep GroupsList inside this listbox rather than nesting 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, style, ref, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     /**
      * Return Group with its ItemsList; do not filter the collection again.
@@ -250,21 +254,21 @@ export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
 } & StyleProps;
 /** Required inside Group. Let the collection filter suggestions; manually annotate its callback with Autocomplete.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 BaseAutocomplete.Group>, 'items' | 'className'> & {
+export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Group>, 'items' | 'className' | 'render'> & {
     className?: string;
     /** Pass group.items from GroupsList, including for an unlabeled group. */
     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 BaseAutocomplete.Item>, 'value' | 'className'> & {
+export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Item>, 'value' | 'className' | 'render'> & {
     className?: string;
     /** Pass the suggestion supplied by ItemsList so built-in completion can resolve its label. */
     value: Item;
 } & StyleProps;
 /** Required suggestion inside ItemsList. Let it fill the input when chosen; do not implement a duplicate click handler. Keep ItemText inside. */
 export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Popup>, 'className'> & {
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseAutocomplete.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseAutocomplete.Positioner.Props, 'anchor' | 'positionMethod' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & {
     /** Choose which side of the input to prefer; collisions may change it. @default 'bottom' */
@@ -277,82 +281,82 @@ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Popu
 /** 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'> & {
     /** Use emphasized for a shaded addon. Does not add interaction. @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 & {
     /** Supply your decorative icon; its own classes are 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'> & {
     /** Keep the default to avoid submitting a surrounding form. @default 'button' */
-    type?: ComponentProps<"button">["type"];
+    type?: ComponentProps<'button'>['type'];
     /** Root disabled or readOnly already disables this button; use for an additional condition. */
-    disabled?: ComponentProps<"button">["disabled"];
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    disabled?: ComponentProps<'button'>['disabled'];
+} & StyleProps): import("react").JSX.Element;
 /** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root validation controls its preset validation border. */
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputGroupProps, "className"> & {
+export declare function InputGroup({ disableStyle, className, ref, ...props }: (Omit<BaseAutocomplete.InputGroup.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & 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").AutocompleteTriggerProps, "className"> & {
+export declare function AddonOpenButton({ disableStyle, className, ref, ...props }: (Omit<BaseAutocomplete.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Clears the input automatically; no click handler needed. Supply 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<BaseAutocomplete.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<BaseAutocomplete.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<BaseAutocomplete.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").AutocompleteSeparatorProps, "className"> & {
+export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseAutocomplete.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, announced with the input through aria-describedby 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>>;
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 type BuiltInIconProps = Omit<SVGIconProps, '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 const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+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 const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function AddonClearButtonIcon({ 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<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function AddonLoadingIcon({ ref, ...props }: BuiltInIconProps): 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<BaseAutocomplete.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 {};

package/dist/components/autocomplete/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
 import { ChevronsUpDown, LoaderCircle, X } from "../../utils/icons.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useId, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
@@ -184,26 +184,26 @@ export function Root({ children, id, validation, open, defaultOpen = false, onOp
             }, children: children }) }));
 }
 /** Use for the standard stacked layout, or omit when supplying your own layout. */
-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": "autocomplete-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+export function Label({ disableStyle, className, ref, ...props }) {
     const context = useAutocompleteContext();
     const attributes = usePartAttributes();
     return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "autocomplete-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Let the input handle suggestion filtering and completion. It accepts free text; choosing a suggestion is optional. Label association is automatic. */
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useAutocompleteContext();
     return (_jsx(BaseAutocomplete.Input, { "aria-invalid": context.validation.state === 'error' || undefined, ...props, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ref: ref, id: context.inputId, "data-component": "autocomplete-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Use only for an additional custom display of the current input text. Do not use it to build the editable input; Input already handles that. */
 export const Value = BaseAutocomplete.Value;
 /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
-export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, style, ...props }, ref) {
+export function ScrollArea({ disableStyle, className, style, ref, ...props }) {
     return (_jsx(BaseAutocomplete.List, { ...props, ref: ref, style: style, "data-component": "autocomplete-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Required groups container inside ScrollArea. A children callback receives each automatically filtered group; do not filter or map the original groups again. Manually annotate group with Autocomplete.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
 export function GroupsList({ disableStyle, children, className, style, ...props }) {
     return (_jsx("div", { ...props, style: style, "data-component": "autocomplete-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? (_jsx(BaseAutocomplete.Collection, { children: children })) : (children) }));
@@ -231,15 +231,15 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     : { ...baseStyle, ...style } }) }) }));
 }
 /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BaseAutocomplete.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "autocomplete-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "autocomplete-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "autocomplete-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "autocomplete-arrow-3" })] }));
-});
+}
 /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
+export function Addon({ disableStyle, variant = 'normal', className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-variant": variant, "data-component": "autocomplete-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
-export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children, {
         ...attributes,
@@ -251,95 +251,95 @@ export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disable
         'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children.props.className, className),
     });
-});
+}
 /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
-export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export function AddonButton({ disableStyle, className, disabled, type = 'button', ref, ...props }) {
     const context = useAutocompleteContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "autocomplete-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root validation controls its preset validation border. */
-export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, ...props }, ref) {
+export function InputGroup({ disableStyle, className, ref, ...props }) {
     const context = useAutocompleteContext();
     return (_jsx(BaseAutocomplete.InputGroup, { ...validationAttributes(context.validation), ...props, ref: ref, "data-component": "autocomplete-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
-export const AddonOpenButton = /* @__PURE__ */ forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
+export function AddonOpenButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.Trigger, { ...props, ref: ref, "data-component": "autocomplete-addonopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Clears the input automatically; no click handler needed. Supply AddonClearButtonIcon and an accessible label. */
-export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
+export function AddonClearButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.Clear, { ...props, ref: ref, "data-component": "autocomplete-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
-export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
+export function GroupLabel({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.GroupLabel, { ...props, ref: ref, "data-component": "autocomplete-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** 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 const Empty = /* @__PURE__ */ forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
+export function Empty({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.Empty, { ...props, ref: ref, "data-component": "autocomplete-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
-export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+export function Separator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.Separator, { ...props, ref: ref, "data-component": "autocomplete-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
-export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+export function ItemText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional decorative text inside Addon. Supply the text as children. */
-export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+export function AddonText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
-export const EmptyText = /* @__PURE__ */ forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
+export function EmptyText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-emptytext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional supporting text, announced with the input through aria-describedby automatically. */
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "autocomplete-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 = useAutocompleteContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "autocomplete-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 = useAutocompleteContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "autocomplete-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the input
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** 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 const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
+export function AddonOpenButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "autocomplete-addonopenbuttonicon" });
-});
+}
 /** 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 const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
+export function AddonClearButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "autocomplete-addonclearbuttonicon" });
-});
+}
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon(props, ref) {
+export function AddonLoadingIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "autocomplete-addonloadingicon" });
-});
+}
 // The shared body of the built-in decorative icons above, which only differ by their icon and component name
-const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }, ref) {
+function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ref, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children ?? _jsx(Icon, {}), {
         ...attributes,
@@ -351,19 +351,19 @@ const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableSty
         'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children?.props.className, className),
     });
-});
+}
 /** 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 const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
+export function Loading({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseAutocomplete.Status, { ...props, ref: ref, "data-component": "autocomplete-loading", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
-export const LoadingText = /* @__PURE__ */ forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
+export function LoadingText({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "autocomplete-loadingtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
-export const LoadingIcon = /* @__PURE__ */ forwardRef(function LoadingIcon({ disableStyle, className, strokeWidth = 2, ...props }, ref) {
+export function LoadingIcon({ disableStyle, className, strokeWidth = 2, ref, ...props }) {
     return (_jsx(LoaderCircle, { "aria-hidden": true, strokeWidth: strokeWidth, ...props, ref: ref, "data-component": "autocomplete-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const AutocompleteContext = 
 /* @__PURE__ */ createContext(null);
 function useAutocompleteContext() {