@central-ui/react 0.3.0 → 0.5.0

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

@@ -115,23 +115,23 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
  * </Select.Root>
  */
 export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, items, id, validation, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "className"> & {
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Label({ disableStyle, className, ref, ...props }: (Omit<BaseSelect.Label.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 export declare const Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export type OpenButtonValueProps<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null> = Omit<ComponentPropsWithRef<typeof BaseSelect.Value>, 'className' | 'children'> & {
+export type OpenButtonValueProps<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null> = Omit<ComponentPropsWithRef<typeof BaseSelect.Value>, 'className' | 'children' | 'render'> & {
     className?: string;
     /** Omit to keep the automatic formatted selection. Only for a custom display, annotate the callback with ItemType<typeof rootItems> or SelectionsType<typeof rootItems> for multiple selection, using the same items as Root. */
     children?: ReactNode | ((value: Value) => ReactNode);
 } & StyleProps;
 /** Omit children to keep the built-in formatted value. Supply children only for a special display; do not format the selection yourself for the usual case. */
 export declare function OpenButtonValue<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null>({ disableStyle, className, ...props }: OpenButtonValueProps<Value>): import("react").JSX.Element;
-export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseSelect.List>, 'children' | 'className'> & {
+export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseSelect.List>, 'children' | 'className' | 'render'> & {
     className?: string;
     children?: ReactNode;
 } & StyleProps;
-export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ScrollArea({ disableStyle, className, ref, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     /** Return Group with ItemsList. Manually annotate group with Select.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
     children: ReactNode | ((group: Group, index: number) => ReactNode);
@@ -145,61 +145,61 @@ export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
 } & StyleProps;
 /** Let this list render the surrounding group. Manually annotate its callback with Select.ItemType<typeof rootItems>, using the SAME 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 BaseSelect.Group>, 'className'> & {
+export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Group>, 'className' | 'render'> & {
     className?: string;
     /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
     items: readonly Item[];
 } & StyleProps;
 export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, items, children, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
-export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Item>, 'value' | 'className'> & {
+export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Item>, 'value' | 'className' | 'render'> & {
     className?: string;
     /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
     /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
     value: Item;
 } & StyleProps;
 export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseSelect.Popup>, 'className'> & {
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseSelect.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseSelect.Portal.Props, 'container'> & Pick<BaseSelect.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance' | 'alignItemWithTrigger'> & 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, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, alignItemWithTrigger, 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 function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;
 /** Opens the select. Pass asChild to make your own button the trigger instead, like a "Sort" Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, 'aria-describedby': describedBy, ref, ...props }: Omit<BaseSelect.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & 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").SelectGroupLabelProps, "className"> & {
+export declare function GroupLabel({ disableStyle, className, ref, ...props }: (Omit<BaseSelect.GroupLabel.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectSeparatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseSelect.Separator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemTextProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function ItemText({ disableStyle, className, ref, ...props }: (Omit<BaseSelect.ItemText.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Description: 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 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;
 /** Built-in icon. Use it inside its matching control. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export declare const OpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps & {
+export declare function OpenButtonIcon({ disableStyle, className, strokeWidth, children, ref, ...props }: Omit<SVGIconProps, 'children'> & StyleProps & {
     /** Omit for the supplied default icon; pass a child icon only to replace it. */
     children?: ReactElement<SVGIconProps>;
-}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}): import("react").FunctionComponentElement<any>;
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
-export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").SelectItemIndicatorProps, "keepMounted"> & {
+export declare function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }: Omit<SVGIconProps, 'children'> & Pick<BaseSelect.ItemIndicator.Props, 'keepMounted'> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ScrollUpArrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollUpArrowProps, "className"> & {
+} & StyleProps): import("react").JSX.Element;
+export declare function ScrollUpArrow({ disableStyle, children, className, ref, ...props }: (Omit<BaseSelect.ScrollUpArrow.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function ScrollDownArrow({ disableStyle, children, className, ref, ...props }: (Omit<BaseSelect.ScrollDownArrow.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 export {};

package/dist/components/select/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import { Check, ChevronDown, ChevronUp, ChevronsUpDown } 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";
 /**
@@ -114,21 +114,21 @@ export function Root({ children, items, id, validation, defaultOpen = false, onO
                 setDescribedByIds,
             }, children: children }) }));
 }
-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": "select-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+}
+export function Label({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx(BaseSelect.Label, { ...attributes, ...props, ref: ref, "data-component": "select-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 export const Value = BaseSelect.Value;
 /** Omit children to keep the built-in formatted value. Supply children only for a special display; do not format the selection yourself for the usual case. */
 export function OpenButtonValue({ disableStyle, className, ...props }) {
     return (_jsx(BaseSelect.Value, { ...props, "data-component": "select-openbuttonvalue", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, ...props }, ref) {
+export function ScrollArea({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSelect.List, { ...props, ref: ref, "data-component": "select-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Let this list render the groups. Manually annotate its children callback with Select.GroupType<typeof rootItems>, using the SAME items variable passed to Root. */
 export function GroupsList({ disableStyle, children, className, ...props }) {
     const context = useSelectContext();
@@ -157,54 +157,54 @@ export function Popup({ disableStyle, container, anchor, positionMethod, side =
                     ? (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(BaseSelect.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "select-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": "select-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": "select-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": "select-arrow-3" })] }));
-});
+}
 /** Opens the select. Pass asChild to make your own button the trigger instead, like a "Sort" Button. */
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, 'aria-describedby': describedBy, ...props }, ref) {
+export function OpenButton({ asChild, disableStyle, children, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useSelectContext();
     const rendering = asChildRendering({ asChild, children, component: 'select-openbutton', disableStyle });
     return _jsx(BaseSelect.Trigger, { ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ...props, ref: ref, ...rendering });
-});
+}
 /** 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(BaseSelect.GroupLabel, { ...props, ref: ref, "data-component": "select-grouplabel", "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(BaseSelect.Separator, { ...props, ref: ref, "data-component": "select-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+}
+export function ItemText({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSelect.ItemText, { ...props, ref: ref, "data-component": "select-itemtext", "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": "select-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 = useSelectContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "select-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 = useSelectContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "select-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the select
-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 icon. Use it inside its matching control. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export const OpenButtonIcon = /* @__PURE__ */ forwardRef(function OpenButtonIcon({ disableStyle, className, strokeWidth, children, ...props }, ref) {
+export function OpenButtonIcon({ disableStyle, className, strokeWidth, children, ref, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children ?? _jsx(ChevronsUpDown, {}), {
         ...attributes,
@@ -216,9 +216,9 @@ export const OpenButtonIcon = /* @__PURE__ */ forwardRef(function OpenButtonIcon
         'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children?.props.className, className),
     });
-});
+}
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
-export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, keepMounted, ...props }, ref) {
+export function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }) {
     const iconProps = {
         'aria-hidden': true,
         strokeWidth: 2,
@@ -228,13 +228,13 @@ export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({
         'data-style-disabled': disableStyle ? '' : undefined,
     };
     return (_jsx(BaseSelect.ItemIndicator, { keepMounted: keepMounted, children: null, render: cloneElement(children ?? _jsx(Check, {}), iconProps) }));
-});
-export const ScrollUpArrow = /* @__PURE__ */ forwardRef(function ScrollUpArrow({ disableStyle, children, className, ...props }, ref) {
+}
+export function ScrollUpArrow({ disableStyle, children, className, ref, ...props }) {
     return (_jsx(BaseSelect.ScrollUpArrow, { ...props, ref: ref, "data-component": "select-scrolluparrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? (_jsx(ChevronUp, { "aria-hidden": true, "data-component": "select-scrolluparrow-1" })) }));
-});
-export const ScrollDownArrow = /* @__PURE__ */ forwardRef(function ScrollDownArrow({ disableStyle, children, className, ...props }, ref) {
+}
+export function ScrollDownArrow({ disableStyle, children, className, ref, ...props }) {
     return (_jsx(BaseSelect.ScrollDownArrow, { ...props, ref: ref, "data-component": "select-scrolldownarrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? (_jsx(ChevronDown, { "aria-hidden": true, "data-component": "select-scrolldownarrow-1" })) }));
-});
+}
 const ItemsContext = /* @__PURE__ */ createContext(null);
 function useItemsContext() {
     const items = useContext(ItemsContext);

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

@@ -40,38 +40,38 @@ export type RootProps<Value extends number | readonly number[] = number | readon
  * </Slider.Track>
  */
 export declare function Root<Value extends number | readonly number[]>({ children, validation, ...props }: RootProps<Value>): import("react").JSX.Element;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderLabelProps, "className"> & {
+export declare function Container({ disableStyle, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Label({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Label.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Value: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderValueProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Value({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Value.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLOutputElement>>;
-export declare const TrackGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderControlProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function TrackGroup({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Control.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Track: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderTrackProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Track({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Track.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderIndicatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Indicator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DragHandle: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderThumbProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function DragHandle({ disableStyle, className, ref, ...props }: (Omit<BaseSlider.Thumb.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MarksList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function MarksList({ disableStyle, children, className, ref, ...props }: (Omit<ComponentProps<'div'>, 'children'> & {
     children: (value: number) => ReactNode;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Mark: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Mark({ disableStyle, value, children, className, style, ref, ...props }: (ComponentProps<'div'> & {
     /** Place this mark at the corresponding value within Root bounds; its position is calculated automatically. */
     value: number;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Description: 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 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;
 export {};

package/dist/components/slider/index.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { useDirection } from '@base-ui/react/direction-provider';
-import { Fragment as ReactFragment, createContext, useCallback, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { Fragment as ReactFragment, createContext, useCallback, useContext, useEffect, useId, useState, } from 'react';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Configure bounds and value on Root. Keep Track inside TrackGroup, then Indicator and indexed DragHandles inside Track. One handle adjusts a single value; a range needs a handle for each end. MarksList/Mark are optional labels, not interactive handles.
@@ -42,33 +42,33 @@ export function Root({ children, validation, ...props }) {
             return (_jsx(SliderContext.Provider, { value: { elementProps, state, messageIds, setMessageIds, validation: readValidation(validation) }, children: _jsx(_Fragment, { children: children }) }));
         }, children: children }));
 }
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, ...props }, ref) {
+export function Container({ disableStyle, ref, ...props }) {
     const context = useSliderContext();
     const { ref: nativeRef, ...nativeProps } = context.elementProps;
     return (_jsx("div", { ...nativeProps, ...props, ref: useRootRef(nativeRef, ref), ...validationAttributes(context.validation), "data-component": "slider-container", "data-style-disabled": disableStyle ? '' : undefined, className: props.className }));
-});
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+}
+export function Label({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSlider.Label, { ...props, ref: ref, "data-component": "slider-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Value = /* @__PURE__ */ forwardRef(function Value({ disableStyle, className, ...props }, ref) {
+}
+export function Value({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSlider.Value, { ...props, ref: ref, "data-component": "slider-value", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const TrackGroup = /* @__PURE__ */ forwardRef(function TrackGroup({ disableStyle, className, ...props }, ref) {
+}
+export function TrackGroup({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSlider.Control, { ...props, ref: ref, "data-component": "slider-trackgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Track = /* @__PURE__ */ forwardRef(function Track({ disableStyle, className, ...props }, ref) {
+}
+export function Track({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSlider.Track, { ...props, ref: ref, "data-component": "slider-track", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+}
+export function Indicator({ disableStyle, className, ref, ...props }) {
     const context = useSliderContext();
     return (_jsx(BaseSlider.Indicator, { ...props, ref: ref, ...validationAttributes(context.validation), "data-component": "slider-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const DragHandle = /* @__PURE__ */ forwardRef(function DragHandle({ disableStyle, className, ...props }, ref) {
+}
+export function DragHandle({ disableStyle, className, ref, ...props }) {
     const context = useSliderContext();
     return (_jsx(BaseSlider.Thumb, { ...props, ref: ref, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds].filter(Boolean).join(' ') ||
             undefined, "data-component": "slider-draghandle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const MarksList = /* @__PURE__ */ forwardRef(function MarksList({ disableStyle, children, className, ...props }, ref) {
+}
+export function MarksList({ disableStyle, children, className, ref, ...props }) {
     const context = useSliderContext();
     const count = Math.floor(Number(((context.state.max - context.state.min) / context.state.step).toPrecision(15))) +
         1;
@@ -76,8 +76,8 @@ export const MarksList = /* @__PURE__ */ forwardRef(function MarksList({ disable
             const value = Number((context.state.min + index * context.state.step).toPrecision(15));
             return _jsx(ReactFragment, { children: children(value) }, value);
         }) }));
-});
-export const Mark = /* @__PURE__ */ forwardRef(function Mark({ disableStyle, value, children, className, style, ...props }, ref) {
+}
+export function Mark({ disableStyle, value, children, className, style, ref, ...props }) {
     const context = useSliderContext();
     const direction = useDirection();
     const percent = ((value - context.state.min) / (context.state.max - context.state.min)) * 100;
@@ -87,34 +87,34 @@ export const Mark = /* @__PURE__ */ forwardRef(function Mark({ disableStyle, val
                 : { insetInlineStart: percent + '%' }),
             ...style,
         }, "data-component": "slider-mark", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("span", { "data-component": "slider-mark-1", "data-orientation": context.state.orientation }), children != null && (_jsx("span", { "data-orientation": context.state.orientation, "data-component": "slider-mark-2", children: children }))] }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+}
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const messageId = useMessageId(id);
     const context = useSliderContext();
     return (_jsx("div", { ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, ...validationAttributes(context.validation), "data-component": "slider-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 = useSliderContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "slider-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 = useSliderContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "slider-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the slider
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const messageId = useMessageId(id);
     const context = useSliderContext();
     return _jsx("div", { "aria-atomic": "true", ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, ...validationAttributes(context.validation), "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 const SliderContext = /* @__PURE__ */ createContext(null);
 function useSliderContext() {
     const context = useContext(SliderContext);