@central-ui/react 0.3.0 → 0.4.0

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);

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

@@ -60,11 +60,12 @@ export declare function Root({ children, className, orientation, ...props }: Omi
 export declare function NextButton({ asChild, disableStyle, ...props }: Steps.NextTriggerProps & StyleProps): import("react").JSX.Element;
 /** Moves to the previous step. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
 export declare function PreviousButton({ asChild, disableStyle, ...props }: Steps.PrevTriggerProps & StyleProps): import("react").JSX.Element;
-export declare function List({ disableStyle, className, ...props }: Steps.ListProps & StyleProps): import("react").JSX.Element;
-export declare function Item({ disableStyle, className, ...props }: Steps.ItemProps & StyleProps): import("react").JSX.Element;
+export declare function List({ disableStyle, className, ...props }: Omit<Steps.ListProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function Item({ disableStyle, className, ...props }: Omit<Steps.ItemProps, 'asChild'> & 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 function Indicator({ disableStyle, className, ...props }: Omit<Steps.IndicatorProps, 'children'> & StyleProps): import("react").JSX.Element;
-export declare function Separator({ disableStyle, className, ...props }: Steps.SeparatorProps & StyleProps): import("react").JSX.Element;
-export declare function Content({ disableStyle, className, ...props }: Steps.ContentProps & StyleProps): import("react").JSX.Element;
-export declare function CompletedContent({ disableStyle, className, ...props }: Steps.CompletedContentProps & StyleProps): import("react").JSX.Element;
-export declare function OpenButton({ disableStyle, className, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;
+export declare function Indicator({ disableStyle, className, ...props }: Omit<Steps.IndicatorProps, 'asChild' | 'children'> & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ...props }: Omit<Steps.SeparatorProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function Content({ disableStyle, className, ...props }: Omit<Steps.ContentProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function CompletedContent({ disableStyle, className, ...props }: Omit<Steps.CompletedContentProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+/** Opens its Item's step. Pass asChild to give this behavior to your own button; it keeps the state data attributes but none of this part's styling. */
+export declare function OpenButton({ asChild, disableStyle, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;

package/dist/components/stepper/index.js

@@ -94,6 +94,8 @@ export function Content({ disableStyle, className, ...props }) {
 export function CompletedContent({ disableStyle, className, ...props }) {
     return (_jsx(Steps.CompletedContent, { "data-component": "stepper-completedcontent", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-export function OpenButton({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.Trigger, { "data-component": "stepper-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+/** Opens its Item's step. Pass asChild to give this behavior to your own button; it keeps the state data attributes but none of this part's styling. */
+export function OpenButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-openbutton', disableStyle });
+    return _jsx(Steps.Trigger, { ...props, asChild: asChild, ...styleAttributes });
 }

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

@@ -38,22 +38,22 @@ export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & ValidationProps
  * </Switch.Root>
  */
 export declare function Root({ children, validation, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): 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 Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Button({ disableStyle, className, ref, ...props }: (Omit<BaseSwitch.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").SwitchThumbProps, "className"> & {
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseSwitch.Thumb.Props, 'className' | '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<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 function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 export {};

package/dist/components/switch/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
-import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { createContext, useContext, useEffect, useId, useState, } from 'react';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
@@ -55,48 +55,48 @@ export function Root({ children, validation, checked, defaultChecked = false, on
             validation: readValidation(validation),
         }, 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": "switch-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 = useSwitchContext();
     return (_jsx(BaseSwitch.Root, { ...props, ...context.coreProps, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds].filter(Boolean).join(' ') ||
             undefined, ref: ref, ...validationAttributes(context.validation), "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, 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 Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+export function Indicator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseSwitch.Thumb, { ...props, ref: ref, "data-component": "switch-indicator", "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 = useSwitchContext();
     return (_jsx("label", { ...props, ref: ref, htmlFor: context.coreProps.id, "data-disabled": context.coreProps.disabled ? '' : undefined, "data-component": "switch-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("div", { id: messageId, ...props, ref: ref, "data-component": "switch-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 = useSwitchContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "switch-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 = useSwitchContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "switch-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the switch
-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("div", { "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 const SwitchContext = /* @__PURE__ */ createContext(null);
 function useSwitchContext() {
     const context = useContext(SwitchContext);

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

@@ -91,8 +91,8 @@ export declare function Table({ disableStyle, className, ...props }: ComponentPr
 export declare function ColGroup({ disableStyle, className, ...props }: ComponentProps<'colgroup'> & StyleProps): import("react").JSX.Element;
 export declare function Col({ disableStyle, className, ...props }: ComponentProps<'col'> & StyleProps): import("react").JSX.Element;
 export declare function Head({ disableStyle, className, ...props }: ComponentProps<'thead'> & StyleProps): import("react").JSX.Element;
-export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableSectionElement> & HTMLAttributes<HTMLTableSectionElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
-export declare const Row: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableRowElement> & HTMLAttributes<HTMLTableRowElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'tbody'> & StyleProps): import("react").JSX.Element;
+export declare function Row({ disableStyle, className, ref, ...props }: ComponentProps<'tr'> & StyleProps): import("react").JSX.Element;
 export declare function HeadCell({ disableStyle, className, ...props }: ComponentProps<'th'> & StyleProps): import("react").JSX.Element;
 /** Already styled as text: write plain text directly inside it, without a wrapping text element. Add your own elements only when the content needs more than plain text, like an avatar next to a name or a lighter secondary line. */
 export declare function Cell({ disableStyle, className, ...props }: ComponentProps<'td'> & StyleProps): import("react").JSX.Element;

package/dist/components/table/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useRef, useState, } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 const PinningContext = /* @__PURE__ */ createContext(null);
 function usePinning() {
@@ -141,17 +141,17 @@ export function ScrollArea({ disableStyle, className, onScroll, style, ...props
             onScroll?.(event);
         }, "data-component": "table-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-const pinningStyles = `
-  table[data-slot="table"] > :is(thead, tbody, tfoot) > tr > :is(th, td)[data-pinning="first"]:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 10;
-  }
-  table[data-slot="table"] > :is(thead, tbody, tfoot) > tr > :is(th, td)[data-pinning="last"]:last-child {
-    position: sticky;
-    right: 0;
-    z-index: 10;
-  }
+const pinningStyles = `
+  table[data-slot="table"] > :is(thead, tbody, tfoot) > tr > :is(th, td)[data-pinning="first"]:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+  }
+  table[data-slot="table"] > :is(thead, tbody, tfoot) > tr > :is(th, td)[data-pinning="last"]:last-child {
+    position: sticky;
+    right: 0;
+    z-index: 10;
+  }
 `;
 export function Table({ disableStyle, className, ...props }) {
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: pinningStyles }), _jsx("table", { ...props, "data-slot": "table", "data-component": "table-table", "data-style-disabled": disableStyle ? '' : undefined, className: className })] }));
@@ -165,12 +165,12 @@ export function Col({ disableStyle, className, ...props }) {
 export function Head({ disableStyle, className, ...props }) {
     return (_jsx("thead", { ...props, "data-slot": "table-header", "data-component": "table-head", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+export function Body({ disableStyle, className, ref, ...props }) {
     return (_jsx("tbody", { ...props, ref: ref, "data-component": "table-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Row = /* @__PURE__ */ forwardRef(({ disableStyle, className, ...props }, ref) => {
+}
+export function Row({ disableStyle, className, ref, ...props }) {
     return (_jsx("tr", { ...props, ref: ref, "data-component": "table-row", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 export function HeadCell({ disableStyle, className, ...props }) {
     const pinning = usePinning();
     return (_jsx("th", { ...props, "data-pinning": pinning, "data-component": "table-headcell", "data-style-disabled": disableStyle ? '' : undefined, className: className }));

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

@@ -47,20 +47,20 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  * </Tabs.List>
  */
 export declare function Root({ children, ...props }: Omit<BaseTabs.Root.Props, 'render' | 'className'>): import("react").JSX.Element;
-export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "className"> & {
+export declare function List({ disableStyle, className, ref, ...props }: (Omit<BaseTabs.List.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Tab({ disableStyle, className, ref, ...props }: (Omit<BaseTabs.Tab.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}) & 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>>;
-export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsIndicatorProps, "className"> & {
+}) & StyleProps): ReactElement<SVGIconProps, string | import("react").JSXElementConstructor<any>>;
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseTabs.Indicator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Content({ disableStyle, className, ref, ...props }: (Omit<BaseTabs.Panel.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;

package/dist/components/tabs/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Match each Tab value to a Content value in the same Root. Let Tabs handle the active panel and keyboard navigation; do not add separate visibility conditions. Indicator is optional decoration.
@@ -50,14 +50,14 @@ export function Root({ children, ...props }) {
     // Native Root renders a div; the fragment preserves our wrapper-free Root contract.
     return (_jsx(BaseTabs.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(BaseTabs.List, { ...props, ref: ref, "data-component": "tabs-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Tab = /* @__PURE__ */ forwardRef(function Tab({ disableStyle, className, ...props }, ref) {
+}
+export function Tab({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseTabs.Tab, { ...props, ref: ref, "data-component": "tabs-tab", "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,
@@ -68,10 +68,10 @@ export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, chi
         },
         className: twMerge(children.props.className, className),
     });
-});
-export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+}
+export function Indicator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseTabs.Indicator, { ...props, ref: ref, "data-component": "tabs-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Content = /* @__PURE__ */ forwardRef(function Content({ disableStyle, className, ...props }, ref) {
+}
+export function Content({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseTabs.Panel, { ...props, ref: ref, "data-component": "tabs-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}

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

@@ -46,30 +46,30 @@ export declare function Root({ children, id, validation, value, defaultValue, on
 export type TextareaProps = Omit<ComponentProps<'textarea'>, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required'>> & {
     className?: string;
 } & StyleProps;
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
-export declare const TextareaGroup: 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 Textarea({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function TextareaGroup({ 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, 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 function AddonLoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: Omit<SVGIconProps, 'children'> & StyleProps): import("react").JSX.Element;
 export {};