@central-ui/react 0.3.0 → 0.4.0

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

@@ -49,34 +49,34 @@ export declare function Root({ children, id, validation, value, defaultValue, on
 export type InputProps = Omit<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-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 Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: InputProps): import("react").JSX.Element;
+export declare function InputGroup({ disableStyle, className, onClick, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-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 const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+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 const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps & {
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
+export declare function Addon({ disableStyle, className, variant, ref, ...props }: ComponentProps<'div'> & StyleProps & {
     /** Choose the preset appearance; this does not add action behavior. */
-    variant?: "normal" | "emphasized";
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    variant?: 'normal' | 'emphasized';
+}): import("react").JSX.Element;
+export declare function AddonText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export declare function AddonIcon(props: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }): import("react").JSX.Element;
-export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonButton({ disableStyle, className, disabled, type, ref, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function AddonLoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: Omit<SVGIconProps, 'children'> & StyleProps): import("react").JSX.Element;
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
-export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonClearButton({ disableStyle, className, disabled, onClick, ref, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function AddonClearButtonIcon({ children, ...props }: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */

package/dist/components/input/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
 import { LoaderCircle, X } from "../../utils/icons.js";
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useRef, useState } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useId, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
@@ -68,7 +68,7 @@ export function Root({ children, id, validation, value, defaultValue, onValueCha
             setDescribedByIds,
         }, children: children }));
 }
-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 = useInputContext();
     const attributes = usePartAttributes();
     // Resetting the internal value when the surrounding html form resets, since the input is always controlled by Root's value
@@ -92,74 +92,74 @@ export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, c
             if (!details.isCanceled && !context.controlled)
                 context.setValueInternalState(nextValue);
         }, "data-component": "input-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+}
+export function InputGroup({ disableStyle, className, onClick, ref, ...props }) {
     const attributes = usePartAttributes();
     // Focusing the input when clicking anywhere in the group, like on its padding or an addon text
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
     return _jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "input-inputgroup", "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 }) {
     const attributes = usePartAttributes();
     return _jsx("div", { ...attributes, ...props, ref: ref, "data-component": "input-container", "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** 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 = useInputContext();
     const attributes = usePartAttributes();
     return _jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "input-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 describedById = useDescribedById(id);
     const attributes = usePartAttributes();
     return _jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "input-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 = useInputContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "input-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 = useInputContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "input-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 });
-});
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+}
+export function Addon({ disableStyle, className, variant = 'normal', ref, ...props }) {
     const attributes = usePartAttributes();
     return _jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "input-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
-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": "input-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function AddonIcon(props) {
     return _jsx(ClonedIcon, { ...props, component: "input-addonicon" });
 }
-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 = useInputContext();
     const attributes = usePartAttributes();
     return _jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "input-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return _jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "input-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
-export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, disabled, onClick, ...props }, ref) {
+export function AddonClearButton({ disableStyle, className, disabled, onClick, ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, "aria-label": "Clear text", ...props, ref: ref, type: "button", disabled: disabled || context.disabled || context.readOnly, onClick: (event) => {
@@ -172,7 +172,7 @@ export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearBu
             input.dispatchEvent(new Event('input', { bubbles: true }));
             input.focus();
         }, "data-component": "input-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function AddonClearButtonIcon({ children = _jsx(X, {}), ...props }) {
     return _jsx(ClonedIcon, { ...props, component: "input-addonclearbuttonicon", children: children });

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

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
-import type { ComponentPropsWithRef, ReactElement } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * OpenButton renders its own trigger button; pass asChild to give its behavior to your own button instead. Popup already includes its portal and positioner. Choose ButtonItem for actions and LinkItem for navigation. Use the matching checkbox/radio composition for persistent choices; submenu parts belong in SubMenuRoot.
@@ -51,63 +51,63 @@ import type { SVGIconProps } from '../../types/Icon.ts';
 export declare function Root<Payload = unknown>(props: BaseMenu.Root.Props<Payload>): import("react").JSX.Element;
 export declare const SubMenuRoot: typeof BaseMenu.SubmenuRoot;
 /** Opens the menu. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseMenu.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseMenu.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseMenu.Popup>, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseMenu.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseMenu.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseMenu.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 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;
-export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuGroupProps, "className"> & {
+export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;
+export declare function Group({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.Group.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Omit for an unlabeled/flat-looking group; keep the Group wrapper. Supply the heading only when grouping should be visible. */
-export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuGroupLabelProps, "className"> & {
+export declare function GroupLabel({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.GroupLabel.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ItemsList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ButtonItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuItemProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function ItemsList({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function ButtonItem({ disableStyle, className, tone, ref, ...props }: (Omit<BaseMenu.Item.Props, 'className' | 'render'> & {
     className?: string;
     /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: "neutral" | "danger";
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const LinkItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuLinkItemProps, "className"> & {
+    tone?: 'neutral' | 'danger';
+}) & StyleProps): import("react").JSX.Element;
+export declare function LinkItem({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.LinkItem.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuRadioGroupProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function RadioGroup({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.RadioGroup.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SubMenuOpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuSubmenuTriggerProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function SubMenuOpenButton({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.SubmenuTrigger.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseMenu.Separator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export declare const Icon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function Icon({ disableStyle, children, className, ref, ...props }: (SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}) & StyleProps): ReactElement<SVGIconProps, string | import("react").JSXElementConstructor<any>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export declare const SubMenuOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function SubMenuOpenButtonIcon({ 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 CheckboxContainer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CheckboxButtonItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuCheckboxItemProps, "className" | "id" | "render" | "nativeButton"> & {
+}) & StyleProps): import("react").FunctionComponentElement<any>;
+export declare function CheckboxContainer({ ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function CheckboxButtonItem({ disableStyle, className, label, ref, ...props }: (Omit<BaseMenu.CheckboxItem.Props, 'className' | 'render' | 'nativeButton' | 'id'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CheckboxLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "id" | "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const CheckboxItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuCheckboxItemIndicatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function CheckboxLabel({ ref, ...props }: Omit<ComponentProps<'label'>, 'id' | 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function CheckboxItemIndicator({ disableStyle, children, className, ref, ...props }: (Omit<BaseMenu.CheckboxItemIndicator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const RadioContainer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioButtonItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuRadioItemProps, "className" | "id" | "render" | "nativeButton"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function RadioContainer({ ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function RadioButtonItem({ disableStyle, className, label, ref, ...props }: (Omit<BaseMenu.RadioItem.Props, 'className' | 'render' | 'nativeButton' | 'id'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "id" | "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const RadioItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuRadioItemIndicatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function RadioLabel({ ref, ...props }: Omit<ComponentProps<'label'>, 'id' | 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function RadioItemIndicator({ disableStyle, children, className, ref, ...props }: (Omit<BaseMenu.RadioItemIndicator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+}) & StyleProps): import("react").JSX.Element;

package/dist/components/menu/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
-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 { Check, ChevronRight } from "../../utils/icons.js";
 /**
@@ -54,10 +54,10 @@ export function Root(props) {
 }
 export const SubMenuRoot = BaseMenu.SubmenuRoot;
 /** Opens the menu. Pass asChild to give this behavior to your own element, like your app's Button. */
-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: 'menu-openbutton', disableStyle });
     return _jsx(BaseMenu.Trigger, { ...props, ref: ref, ...rendering });
-});
+}
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'bottom', sideOffset = 5, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
     const baseStyle = {
@@ -68,36 +68,36 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BaseMenu.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "menu-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": "menu-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": "menu-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": "menu-arrow-3" })] }));
-});
-export const Group = /* @__PURE__ */ forwardRef(function Group({ disableStyle, className, ...props }, ref) {
+}
+export function Group({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.Group, { ...props, ref: ref, "data-component": "menu-group", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Omit for an unlabeled/flat-looking group; keep the Group wrapper. Supply the heading only when grouping should be visible. */
-export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
+export function GroupLabel({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.GroupLabel, { ...props, ref: ref, "data-component": "menu-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ItemsList = /* @__PURE__ */ forwardRef(function ItemsList({ disableStyle, className, ...props }, ref) {
+}
+export function ItemsList({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "menu-itemslist", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ButtonItem = /* @__PURE__ */ forwardRef(function ButtonItem({ disableStyle, className, tone = 'neutral', ...props }, ref) {
+}
+export function ButtonItem({ disableStyle, className, tone = 'neutral', ref, ...props }) {
     return (_jsx(BaseMenu.Item, { ...props, "data-tone": tone, ref: ref, "data-component": "menu-buttonitem", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const LinkItem = /* @__PURE__ */ forwardRef(function LinkItem({ disableStyle, className, ...props }, ref) {
+}
+export function LinkItem({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.LinkItem, { ...props, ref: ref, "data-component": "menu-linkitem", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const RadioGroup = /* @__PURE__ */ forwardRef(function RadioGroup({ disableStyle, className, ...props }, ref) {
+}
+export function RadioGroup({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.RadioGroup, { ...props, ref: ref, "data-component": "menu-radiogroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const SubMenuOpenButton = /* @__PURE__ */ forwardRef(function SubMenuOpenButton({ disableStyle, className, ...props }, ref) {
+}
+export function SubMenuOpenButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.SubmenuTrigger, { ...props, ref: ref, "data-component": "menu-submenuopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+}
+export function Separator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseMenu.Separator, { ...props, ref: ref, "data-component": "menu-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, children, className, ...props }, ref) {
+export function Icon({ disableStyle, children, className, ref, ...props }) {
     return cloneElement(children, {
         ...props,
         ref,
@@ -108,9 +108,9 @@ export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, chi
         },
         className: twMerge(children.props.className, className),
     });
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export const SubMenuOpenButtonIcon = /* @__PURE__ */ forwardRef(function SubMenuOpenButtonIcon({ disableStyle, children, className, ...props }, ref) {
+export function SubMenuOpenButtonIcon({ disableStyle, children, className, ref, ...props }) {
     return cloneElement(children ?? _jsx(ChevronRight, {}), {
         ...props,
         ref,
@@ -121,36 +121,36 @@ export const SubMenuOpenButtonIcon = /* @__PURE__ */ forwardRef(function SubMenu
         },
         className: twMerge(children?.props.className, className),
     });
-});
-export const CheckboxContainer = /* @__PURE__ */ forwardRef(function CheckboxContainer(props, ref) {
+}
+export function CheckboxContainer({ ref, ...props }) {
     return _jsx(CheckableContainer, { ...props, ref: ref, component: "menu-checkboxcontainer" });
-});
-export const CheckboxButtonItem = /* @__PURE__ */ forwardRef(function CheckboxButtonItem({ disableStyle, className, label, ...props }, ref) {
+}
+export function CheckboxButtonItem({ disableStyle, className, label, ref, ...props }) {
     const context = useCheckableContext();
     return (_jsx(BaseMenu.CheckboxItem, { ...props, ref: ref, id: context.id, "aria-labelledby": context.id + '-label', label: label ?? context.label, nativeButton: true, "data-component": "menu-checkboxbuttonitem", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckableButtonSurface, { ...buttonProps, state: state })) }));
-});
-export const CheckboxLabel = /* @__PURE__ */ forwardRef(function CheckboxLabel(props, ref) {
+}
+export function CheckboxLabel({ ref, ...props }) {
     return _jsx(CheckableLabel, { ...props, ref: ref, component: "menu-checkboxlabel" });
-});
-export const CheckboxItemIndicator = /* @__PURE__ */ forwardRef(function CheckboxItemIndicator({ disableStyle, children, className, ...props }, ref) {
+}
+export function CheckboxItemIndicator({ disableStyle, children, className, ref, ...props }) {
     return (_jsx(BaseMenu.CheckboxItemIndicator, { ...props, ref: ref, "data-component": "menu-checkboxitemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "menu-checkboxitemindicator-1" })) }));
-});
-export const RadioContainer = /* @__PURE__ */ forwardRef(function RadioContainer(props, ref) {
+}
+export function RadioContainer({ ref, ...props }) {
     return _jsx(CheckableContainer, { ...props, ref: ref, component: "menu-radiocontainer" });
-});
-export const RadioButtonItem = /* @__PURE__ */ forwardRef(function RadioButtonItem({ disableStyle, className, label, ...props }, ref) {
+}
+export function RadioButtonItem({ disableStyle, className, label, ref, ...props }) {
     const context = useCheckableContext();
     return (_jsx(BaseMenu.RadioItem, { ...props, ref: ref, id: context.id, "aria-labelledby": context.id + '-label', label: label ?? context.label, nativeButton: true, "data-component": "menu-radiobuttonitem", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckableButtonSurface, { ...buttonProps, state: state })) }));
-});
-export const RadioLabel = /* @__PURE__ */ forwardRef(function RadioLabel(props, ref) {
+}
+export function RadioLabel({ ref, ...props }) {
     return _jsx(CheckableLabel, { ...props, ref: ref, component: "menu-radiolabel" });
-});
-export const RadioItemIndicator = /* @__PURE__ */ forwardRef(function RadioItemIndicator({ disableStyle, children, className, ...props }, ref) {
+}
+export function RadioItemIndicator({ disableStyle, children, className, ref, ...props }) {
     return (_jsx(BaseMenu.RadioItemIndicator, { ...props, ref: ref, "data-component": "menu-radioitemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? _jsx("span", { "data-component": "menu-radioitemindicator-1" }) }));
-});
+}
 const CheckableContext = /* @__PURE__ */ createContext(null);
 // Shared by CheckboxContainer and RadioContainer, which only differ by their data-component name
-const CheckableContainer = /* @__PURE__ */ forwardRef(function CheckableContainer({ disableStyle, className, component, ...props }, ref) {
+function CheckableContainer({ disableStyle, className, component, ref, ...props }) {
     const id = useId();
     const [label, setLabel] = useState('');
     const [state, setState] = useState({
@@ -159,19 +159,19 @@ const CheckableContainer = /* @__PURE__ */ forwardRef(function CheckableContaine
         highlighted: false,
     });
     return (_jsx(CheckableContext.Provider, { value: { id, label, setLabel, state, setState }, children: _jsx("div", { ...props, ref: ref, "data-disabled": state.disabled ? '' : undefined, "data-highlighted": state.highlighted ? '' : undefined, "data-checked": state.checked ? '' : undefined, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
-});
+}
 // Shared by CheckboxLabel and RadioLabel, which only differ by their data-component name
-const CheckableLabel = /* @__PURE__ */ forwardRef(function CheckableLabel({ disableStyle, className, children, component, ...props }, ref) {
+function CheckableLabel({ disableStyle, className, children, component, ref, ...props }) {
     const context = useCheckableContext();
     return (_jsx("label", { ...props, ref: ref, id: context.id + '-label', htmlFor: context.id, "data-disabled": context.state.disabled ? '' : undefined, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(CheckableLabelText, { children: children }) }));
-});
+}
 function useCheckableContext() {
     const context = useContext(CheckableContext);
     if (!context)
         throw new Error('Menu checkable parts must be inside their Container');
     return context;
 }
-const CheckableButtonSurface = /* @__PURE__ */ forwardRef(function CheckableButtonSurface({ state, ...props }, ref) {
+function CheckableButtonSurface({ state, ref, ...props }) {
     const context = useCheckableContext();
     useEffect(() => {
         context.setState({
@@ -181,7 +181,7 @@ const CheckableButtonSurface = /* @__PURE__ */ forwardRef(function CheckableButt
         });
     }, [state.checked, state.disabled, state.highlighted, context.setState]);
     return _jsx("button", { type: "button", ...props, ref: ref });
-});
+}
 function CheckableLabelText({ children }) {
     const context = useCheckableContext();
     return (_jsx("span", { ref: (element) => {

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

@@ -45,51 +45,51 @@ export type RootProps = Omit<BaseNumber.Root.Props, 'className' | 'render'> & {
  *   }
  * </NumberInput.Root>
  */
-export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "className" | "id" | "name" | "form" | "defaultValue" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+export declare function Root({ id, validation, children, ref, ...props }: RootProps): import("react").JSX.Element;
+export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: (Omit<BaseNumber.Input.Props, 'className' | 'id' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'name' | 'form' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-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 const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, id, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+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 const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
+export declare function Addon({ disableStyle, className, variant, ref, ...props }: (ComponentProps<'div'> & {
     /** Choose the preset appearance; this does not add action behavior. */
-    variant?: "normal" | "emphasized";
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    variant?: 'normal' | 'emphasized';
+}) & StyleProps): import("react").JSX.Element;
+export declare function AddonText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export declare function AddonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonButton({ disableStyle, className, disabled, type, ref, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "className"> & {
+export declare function AddonLoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: Omit<SVGIconProps, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function InputGroup({ disableStyle, className, onClick, ref, ...props }: (Omit<BaseNumber.Group.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ButtonsList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
+export declare function ButtonsList({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Formats the current number automatically. Omit children for the default display; customize only when the usual number formatting is insufficient. */
-export declare const ValueText: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const IncrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "className"> & {
+export declare function ValueText({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'span'>, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function IncrementButton({ disableStyle, className, ref, ...props }: (Omit<BaseNumber.Increment.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function IncrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-export declare const DecrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "className"> & {
+export declare function DecrementButton({ disableStyle, className, ref, ...props }: (Omit<BaseNumber.Decrement.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function DecrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */