@central-ui/react 0.3.0 → 0.4.0

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

@@ -1,5 +1,6 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import type { ComponentProps } from 'react';
 export type RootProps = Omit<BaseAvatar.Root.Props, 'render' | 'className'> & {
     /** Choose the shared size for the visible parts in this composition. */
     size?: 'big' | 'medium' | 'small';
@@ -33,15 +34,15 @@ export type RootProps = Omit<BaseAvatar.Root.Props, 'render' | 'className'> & {
  * </Avatar.List>
  */
 export declare function Root({ children, size, ...props }: RootProps): 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 Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarImageProps, "className"> & {
+export declare function List({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Image({ disableStyle, className, ref, ...props }: (Omit<BaseAvatar.Image.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-export declare const FallbackNameInitials: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "className" | "children"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function FallbackNameInitials({ disableStyle, color, children, className, style, ref, ...props }: (Omit<BaseAvatar.Fallback.Props, 'className' | 'children' | 'render'> & {
     className?: string;
     /** Choose the initials background. The name-to-initials conversion is automatic. */
     color: string;
     /** Pass the full name; initials are derived automatically. Do not shorten it yourself. */
     children: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const FallbackImage: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Pick<import("@base-ui/react").AvatarFallbackProps, "delay"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+}) & StyleProps): import("react").JSX.Element;
+export declare function FallbackImage({ disableStyle, className, delay, ref, ...props }: (ComponentProps<'img'> & Pick<BaseAvatar.Fallback.Props, 'delay'>) & StyleProps): import("react").JSX.Element;

package/dist/components/avatar/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
-import { createContext, forwardRef, useContext } from 'react';
+import { createContext, useContext } from 'react';
 /**
  * Root supplies sizing and image/fallback coordination. Image loading chooses the fallback automatically; do not implement your own image-error state. Choose initials or an image fallback.
  *
@@ -33,14 +33,14 @@ export function Root({ children, size = 'medium', ...props }) {
     // Native Root renders a span; the fragment preserves our wrapper-free Root contract.
     return (_jsx(SizeContext.Provider, { value: size, children: _jsx(BaseAvatar.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": "avatar-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Image = /* @__PURE__ */ forwardRef(function Image({ disableStyle, className, ...props }, ref) {
+}
+export function Image({ disableStyle, className, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Image, { ...props, ref: ref, "data-size": size, "data-component": "avatar-image", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const FallbackNameInitials = /* @__PURE__ */ forwardRef(function FallbackNameInitials({ disableStyle, color, children, className, style, ...props }, ref) {
+}
+export function FallbackNameInitials({ disableStyle, color, children, className, style, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, "data-size": size, role: "img", "aria-label": children, style: typeof style === 'function'
             ? (state) => ({ backgroundColor: color, ...style(state) })
@@ -51,10 +51,10 @@ export const FallbackNameInitials = /* @__PURE__ */ forwardRef(function Fallback
             .map((word) => word[0].toUpperCase())
             .join('')
             .slice(0, 2) }));
-});
-export const FallbackImage = /* @__PURE__ */ forwardRef(function FallbackImage({ disableStyle, className, delay, ...props }, ref) {
+}
+export function FallbackImage({ disableStyle, className, delay, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { delay: delay, render: _jsx("img", { ...props, ref: ref }), "data-size": size, "data-component": "avatar-fallbackimage", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const SizeContext = 
 /* @__PURE__ */ createContext('medium');

package/dist/components/banner/index.js

@@ -104,7 +104,7 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children.props.className, className),
-        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2,
     });
 }
 export function Body({ disableStyle, className, ...props }) {

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

@@ -36,6 +36,26 @@ export type RootProps = {
      * @default false
      */
     dragFree?: boolean;
+    /**
+     * How far a drag must move, in pixels, before it counts as a drag instead of a click on the slide's content.
+     * @default 10
+     */
+    dragThreshold?: number;
+    /**
+     * Whether a hard swipe may fly past several slides instead of stopping on the next one.
+     * @default false
+     */
+    skipSnaps?: boolean;
+    /**
+     * How long a move to another slide takes, from 20 (fast) to 60 (slow). Not in milliseconds.
+     * @default 25
+     */
+    duration?: number;
+    /**
+     * Removes the empty space at the start and end when slides are narrower than SlidesList. 'trimSnaps' also drops the positions landing in that space, 'keepSnaps' keeps them, false keeps the space. Ignored with loop.
+     * @default 'trimSnaps'
+     */
+    containScroll?: false | 'trimSnaps' | 'keepSnaps';
     /**
      * Space between slides, as a number of pixels or any CSS length. Size slides with a className on Slide, like `basis-1/3`; the gap is already subtracted from it.
      * @default 0
@@ -115,19 +135,19 @@ export type RootProps = {
  * const [index, setIndex] = useState(0)
  * ;<Carousel.Root index={index} onIndexChange={setIndex}>
  */
-export declare function Root({ orientation, loop, align, slidesToScroll, dragFree, gap, disabled, autoplay, index, defaultIndex, onIndexChange, children, }: RootProps): import("react").JSX.Element;
+export declare function Root({ orientation, loop, align, slidesToScroll, dragFree, dragThreshold, skipSnaps, duration, containScroll, gap, disabled, autoplay, index, defaultIndex, onIndexChange, children, }: RootProps): import("react").JSX.Element;
 /** The visible window the slides move inside, announced to screen readers as the carousel. Style it freely (background, border, radius); a vertical carousel needs a height here. Put only Slides inside. */
-export declare const SlidesList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SlidesList({ disableStyle, style, children, ref, ...props }: ComponentProps<'div'> & StyleProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * One slide; each can hold different content. Size it with a className, like `basis-1/3`; it fills SlidesList by default.
  * Its padding makes the gap between slides, so put backgrounds, borders and radius on its content, not on the Slide itself.
  */
-export declare const Slide: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Slide({ disableStyle, style, ref, ...props }: ComponentProps<'div'> & StyleProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type ButtonPartProps = ComponentProps<'button'> & AsChildProps & StyleProps;
 /** Moves to the previous slide; no click handler needed. Disabled when there's no slide before (never with loop). Supply its content, normally PreviousButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
-export declare const PreviousButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function PreviousButton({ ref, ...props }: ButtonPartProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** Moves to the next slide; no click handler needed. Disabled when there's no slide after (never with loop). Supply its content, normally NextButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
-export declare const NextButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function NextButton({ ref, ...props }: ButtonPartProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Renders one IndicatorButton per position through its children function, which receives that position's index.
  * The count comes from the carousel itself: with several slides per view, it counts positions, not slides.
@@ -137,10 +157,10 @@ export declare const NextButton: import("react").ForwardRefExoticComponent<Omit<
  *   {(index) => <Carousel.IndicatorButton index={index} />}
  * </Carousel.IndicatorList>
  */
-export declare const IndicatorList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & StyleProps & {
+export declare function IndicatorList({ disableStyle, children, ref, ...props }: Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
     /** Called once per position with its index; return an IndicatorButton. */
     children: (index: number) => ReactNode;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Moves to its position when clicked, and carries data-selected while that position is shown. Shows as a dot when empty.
  * Pass asChild to give this behavior to your own button instead.
@@ -154,16 +174,16 @@ export declare const IndicatorList: import("react").ForwardRefExoticComponent<Om
  *   )}
  * </Carousel.IndicatorList>
  */
-export declare const IndicatorButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & AsChildProps & StyleProps & {
+export declare function IndicatorButton({ index, ref, ...props }: ButtonPartProps & {
     /** The position this button moves to, from IndicatorList's children function. */
     index: number;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
     /** Omit for the supplied default icon; pass a child icon only to replace it. */
     children?: ReactElement<SVGIconProps>;
 };
 /** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export declare const PreviousButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function PreviousButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
 /** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export declare const NextButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function NextButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
 export {};

package/dist/components/carousel/index.js

@@ -6,7 +6,7 @@ import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
-import { Fragment, cloneElement, createContext, forwardRef, useContext, useEffect, useState } from 'react';
+import { Fragment, cloneElement, createContext, useContext, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 const CarouselContext = /* @__PURE__ */ createContext(null);
 /**
@@ -56,7 +56,7 @@ const CarouselContext = /* @__PURE__ */ createContext(null);
  * const [index, setIndex] = useState(0)
  * ;<Carousel.Root index={index} onIndexChange={setIndex}>
  */
-export function Root({ orientation = 'horizontal', loop = false, align = 'center', slidesToScroll = 1, dragFree = false, gap = 0, disabled = false, autoplay = false, index, defaultIndex = 0, onIndexChange, children, }) {
+export function Root({ orientation = 'horizontal', loop = false, align = 'center', slidesToScroll = 1, dragFree = false, dragThreshold = 10, skipSnaps = false, duration = 25, containScroll = 'trimSnaps', gap = 0, disabled = false, autoplay = false, index, defaultIndex = 0, onIndexChange, children, }) {
     const direction = useDirection();
     // Embla reads the start only once; keeping it fixed stops a controlled index from restarting the carousel
     const [startIndex] = useState(index ?? defaultIndex);
@@ -67,6 +67,10 @@ export function Root({ orientation = 'horizontal', loop = false, align = 'center
         align,
         slidesToScroll,
         dragFree,
+        dragThreshold,
+        skipSnaps,
+        duration,
+        containScroll,
         startIndex,
         active: !disabled,
     }, autoplay ? [Autoplay(autoplay === true ? {} : autoplay)] : []);
@@ -127,7 +131,7 @@ export function Root({ orientation = 'horizontal', loop = false, align = 'center
     return _jsx(CarouselContext.Provider, { value: context, children: children });
 }
 /** The visible window the slides move inside, announced to screen readers as the carousel. Style it freely (background, border, radius); a vertical carousel needs a height here. Put only Slides inside. */
-export const SlidesList = /* @__PURE__ */ forwardRef(function SlidesList({ disableStyle, style, children, ...props }, ref) {
+export function SlidesList({ disableStyle, style, children, ref, ...props }) {
     const context = useCarouselContext('SlidesList');
     const vertical = context.orientation === 'vertical';
     // The track Embla moves; its negative margin cancels the first slide's gap
@@ -139,7 +143,7 @@ export const SlidesList = /* @__PURE__ */ forwardRef(function SlidesList({ disab
             [vertical ? 'marginBlockStart' : 'marginInlineStart']: negativeLength(context.gap),
         }, children: children }));
     return useRender({
-        ref: [ref, context.emblaRef],
+        ref: [ref ?? null, context.emblaRef],
         state: partState(context),
         props: {
             role: 'region',
@@ -151,12 +155,12 @@ export const SlidesList = /* @__PURE__ */ forwardRef(function SlidesList({ disab
             children: track,
         },
     });
-});
+}
 /**
  * One slide; each can hold different content. Size it with a className, like `basis-1/3`; it fills SlidesList by default.
  * Its padding makes the gap between slides, so put backgrounds, borders and radius on its content, not on the Slide itself.
  */
-export const Slide = /* @__PURE__ */ forwardRef(function Slide({ disableStyle, style, ...props }, ref) {
+export function Slide({ disableStyle, style, ref, ...props }) {
     const context = useCarouselContext('Slide');
     const vertical = context.orientation === 'vertical';
     return useRender({
@@ -178,25 +182,25 @@ export const Slide = /* @__PURE__ */ forwardRef(function Slide({ disableStyle, s
             'data-style-disabled': disableStyle ? '' : undefined,
         },
     });
-});
+}
 /** Moves to the previous slide; no click handler needed. Disabled when there's no slide before (never with loop). Supply its content, normally PreviousButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
-export const PreviousButton = /* @__PURE__ */ forwardRef(function PreviousButton(props, ref) {
+export function PreviousButton({ ref, ...props }) {
     const context = useCarouselContext('PreviousButton');
     return useActionButton(props, ref, context, {
         component: 'carousel-previousbutton',
         disabled: context.disabled || !context.canScrollPrevious,
         onClick: () => context.api?.scrollPrev(),
     });
-});
+}
 /** Moves to the next slide; no click handler needed. Disabled when there's no slide after (never with loop). Supply its content, normally NextButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
-export const NextButton = /* @__PURE__ */ forwardRef(function NextButton(props, ref) {
+export function NextButton({ ref, ...props }) {
     const context = useCarouselContext('NextButton');
     return useActionButton(props, ref, context, {
         component: 'carousel-nextbutton',
         disabled: context.disabled || !context.canScrollNext,
         onClick: () => context.api?.scrollNext(),
     });
-});
+}
 /**
  * Renders one IndicatorButton per position through its children function, which receives that position's index.
  * The count comes from the carousel itself: with several slides per view, it counts positions, not slides.
@@ -206,7 +210,7 @@ export const NextButton = /* @__PURE__ */ forwardRef(function NextButton(props,
  *   {(index) => <Carousel.IndicatorButton index={index} />}
  * </Carousel.IndicatorList>
  */
-export const IndicatorList = /* @__PURE__ */ forwardRef(function IndicatorList({ disableStyle, children, ...props }, ref) {
+export function IndicatorList({ disableStyle, children, ref, ...props }) {
     const context = useCarouselContext('IndicatorList');
     return useRender({
         ref,
@@ -218,7 +222,7 @@ export const IndicatorList = /* @__PURE__ */ forwardRef(function IndicatorList({
             children: Array.from({ length: context.snapCount }, (_, index) => _jsx(Fragment, { children: children(index) }, index)),
         },
     });
-});
+}
 /**
  * Moves to its position when clicked, and carries data-selected while that position is shown. Shows as a dot when empty.
  * Pass asChild to give this behavior to your own button instead.
@@ -232,7 +236,7 @@ export const IndicatorList = /* @__PURE__ */ forwardRef(function IndicatorList({
  *   )}
  * </Carousel.IndicatorList>
  */
-export const IndicatorButton = /* @__PURE__ */ forwardRef(function IndicatorButton({ index, ...props }, ref) {
+export function IndicatorButton({ index, ref, ...props }) {
     const context = useCarouselContext('IndicatorButton');
     const selected = context.selectedIndex === index;
     return useActionButton(props, ref, context, {
@@ -242,17 +246,17 @@ export const IndicatorButton = /* @__PURE__ */ forwardRef(function IndicatorButt
         attributes: { 'aria-label': `Go to slide ${index + 1}`, 'aria-current': selected ? 'true' : undefined },
         onClick: () => context.api?.scrollTo(index),
     });
-});
+}
 /** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export const PreviousButtonIcon = /* @__PURE__ */ forwardRef(function PreviousButtonIcon(props, ref) {
+export function PreviousButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronLeft, component: "carousel-previousbuttonicon" });
-});
+}
 /** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
-export const NextButtonIcon = /* @__PURE__ */ forwardRef(function NextButtonIcon(props, ref) {
+export function NextButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronRight, component: "carousel-nextbuttonicon" });
-});
+}
 // 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 = partAttributes(useCarouselContext('Icon'));
     return cloneElement(children ?? _jsx(Icon, {}), {
         ...attributes,
@@ -264,7 +268,7 @@ const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableSty
         'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children?.props.className, className),
     });
-});
+}
 // The shared body of the action buttons: the part's own styled button, or the consumer's child with asChild
 function useActionButton({ asChild, disableStyle, children, ...props }, ref, context, internal) {
     return useRender({

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

@@ -1,5 +1,6 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import type { ComponentProps, ReactNode } from 'react';
 import type { ValidationProps } from '../../types/Validation.ts';
 import type { ValidationMessageChildren } from '../../utils/Validation.ts';
@@ -44,25 +45,25 @@ export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & ValidationProp
  */
 export declare function Root({ children, id, validation, ...coreProps }: RootProps): import("react").JSX.Element;
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
-export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxGroupProps, "className"> & {
+export declare function CheckboxGroup({ disableStyle, className, ref, ...props }: (Omit<BaseCheckboxGroup.Props, 'className'> & {
     className?: string;
-} & 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 const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Button({ disableStyle, className, ref, ...props }: (Omit<BaseCheckbox.Root.Props, CoreKeys | 'className' | 'render' | 'nativeButton'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** 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 Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "className" | "children" | "render"> & {
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseCheckbox.Indicator.Props, 'className' | 'children' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+}) & 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<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+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<'span'> & StyleProps): import("react").JSX.Element;
 type MessageProps = Omit<ComponentProps<'span'>, '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<HTMLSpanElement>>;
+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<HTMLSpanElement>>;
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 export {};

package/dist/components/checkbox/index.js

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