@central-ui/react 0.3.0 → 0.5.0

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 {};

package/dist/components/textarea/index.js

@@ -3,7 +3,7 @@ import { Input as BaseInput } from '@base-ui/react/input';
 import { LoaderCircle } from "../../utils/icons.js";
 import { useRef } from 'react';
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.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";
 /**
@@ -60,7 +60,7 @@ export function Root({ children, id, validation, value, defaultValue, onValueCha
             validation: readValidation(validation),
         }, children: children }));
 }
-export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useInputContext();
     const inputRef = useRef(null);
     // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
@@ -90,58 +90,58 @@ export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableSt
             if (!details.isCanceled && !context.controlled)
                 context.setValueInternalState(nextValue);
         }, "data-component": "textarea-textarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const TextareaGroup = /* @__PURE__ */ forwardRef(function TextareaGroup({ disableStyle, className, onClick, ...props }, ref) {
+}
+export function TextareaGroup({ disableStyle, className, onClick, ref, ...props }) {
     const attributes = usePartAttributes();
     const forwardClick = useForwardClickToInput('textarea', onClick);
     return (_jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "textarea-textareagroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "textarea-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export function Label({ disableStyle, className, id, ref, ...props }) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
     return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "textarea-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);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "textarea-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+export function Error({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "textarea-error", children: content });
-});
+}
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+export function Success({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "textarea-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the textarea
-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 attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+}
+export function Addon({ disableStyle, className, variant = 'normal', ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "textarea-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+}
+export function AddonText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "textarea-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function AddonIcon({ disableStyle, children, className, ...props }) {
     const attributes = usePartAttributes();
@@ -157,16 +157,16 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export function AddonButton({ disableStyle, className, disabled, type = 'button', ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "textarea-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "textarea-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);

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

@@ -2,7 +2,7 @@ import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
-export type ProviderProps = Omit<BaseToast.Provider.Props, 'toastManager'> & Pick<BaseToast.Viewport.Props, 'style'> & {
+export type ProviderProps = Omit<BaseToast.Provider.Props, 'toastManager' | 'render'> & Pick<BaseToast.Viewport.Props, 'style'> & {
     className?: string;
 };
 /**
@@ -64,10 +64,10 @@ export declare function Root({ tone, children, }: {
     tone?: 'neutral' | 'success' | 'error';
     children: ReactNode;
 }): import("react").JSX.Element;
-export type ToastProps = Omit<BaseToast.Root.Props, 'toast' | 'className'> & {
+export type ToastProps = Omit<BaseToast.Root.Props, 'toast' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Toast({ disableStyle, className, style, children, ref, ...props }: ToastProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function Icon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
@@ -75,20 +75,20 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
         'data-tone'?: string;
     }>;
 }) & StyleProps): import("react").FunctionComponentElement<any>;
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastTitleProps, "className"> & {
+export declare function Title({ disableStyle, className, ref, ...props }: (Omit<BaseToast.Title.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BaseToast.Description.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named "Dismiss notification" for screen readers. Pass asChild to give dismissing behavior to your own button instead, like a "Dismiss" Button, which then names itself. */
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "className" | "render"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseToast.Close.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
 /** Runs the toast's action. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes but none of this part's styling. */
-export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "className" | "render"> & {
+export declare function ActionButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseToast.Action.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */

package/dist/components/toast/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import { CircleCheck, Info, TriangleAlert, X } from "../../utils/icons.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useState, } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Mount Provider once before calling Show. Show receives the notification composition; do not render Toast directly outside it. Icon follows Root tone automatically. For urgent priority, supply title/description in Show options so the live region can announce them.
@@ -74,7 +74,7 @@ export function Show(render, options) {
 export function Root({ tone = 'neutral', children, }) {
     return _jsx(ToneContext.Provider, { value: tone, children: children });
 }
-export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, className, style, children, ...props }, ref) {
+export function Toast({ disableStyle, className, style, children, ref, ...props }) {
     const notification = useNotificationContext();
     const tone = useContext(ToneContext);
     return (_jsx(BaseToast.Root, { ...props, ref: ref, toast: notification, "data-tone": tone, "data-component": "toast-toast", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: (state) => {
@@ -115,7 +115,7 @@ export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, c
                 ...(typeof style === 'function' ? style(state) : style),
             };
         }, children: _jsx(BaseToast.Content, { "data-component": "toast-toast-1", children: children }) }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function Icon({ disableStyle, children, className, ...props }) {
     const tone = useContext(ToneContext);
@@ -141,24 +141,24 @@ export function Icon({ disableStyle, children, className, ...props }) {
         strokeWidth: props.strokeWidth ?? icon.props.strokeWidth ?? 1.8,
     });
 }
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export function Title({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseToast.Title, { ...props, ref: ref, "data-component": "toast-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+}
+export function Description({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseToast.Description, { ...props, ref: ref, "data-component": "toast-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named "Dismiss notification" for screen readers. Pass asChild to give dismissing behavior to your own button instead, like a "Dismiss" Button, which then names itself. */
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+export function CloseButton({ asChild, disableStyle, children, ref, ...props }) {
     // Naming the icon-only button for screen readers, while the consumer's own button names itself
     const ariaLabel = asChild ? undefined : 'Dismiss notification';
     const rendering = asChildRendering({ asChild, children, component: 'toast-closebutton', disableStyle });
     return _jsx(BaseToast.Close, { "aria-label": ariaLabel, ...props, ref: ref, ...rendering });
-});
+}
 /** Runs the toast's action. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes but none of this part's styling. */
-export const ActionButton = /* @__PURE__ */ forwardRef(function ActionButton({ asChild, disableStyle, children, ...props }, ref) {
+export function ActionButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'toast-actionbutton', disableStyle });
     return _jsx(BaseToast.Action, { ...props, ref: ref, ...rendering });
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
     const tone = useContext(ToneContext);

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

@@ -23,18 +23,18 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *   )
  * }
  */
-export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<BaseToggle.Props<string>, "className"> & {
+export declare function Root({ children, className, disableStyle, size, pressed, defaultPressed, onPressedChange, disabled, ref, ...props }: Omit<BaseToggle.Props, 'className'> & {
     className?: string;
     /** Choose the shared size for the visible parts in this composition. */
-    size?: ButtonProps["size"];
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    size?: ButtonProps['size'];
+} & StyleProps): import("react").JSX.Element;
 /** Render beside InactiveIcon inside Root. It automatically appears only while pressed; supply the decorative icon without another visibility condition. */
-export declare const ActiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function ActiveIcon({ ref, ...props }: SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").JSX.Element | null;
 /** Render beside ActiveIcon inside Root. It automatically appears only while unpressed; supply the decorative icon without another visibility condition. */
-export declare const InactiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function InactiveIcon({ ref, ...props }: SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").JSX.Element | null;

package/dist/components/toggle/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { cloneElement, createContext, forwardRef, useContext, useState, } from 'react';
+import { cloneElement, createContext, useContext, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Root is the interactive toggle button. ActiveIcon and InactiveIcon switch automatically with pressed state; do not conditionally render them yourself.
@@ -22,30 +22,30 @@ import { twMerge } from 'tailwind-merge';
  *   )
  * }
  */
-export const Root = /* @__PURE__ */ forwardRef(function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ...props }, ref) {
+export function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ref, ...props }) {
     const [pressedInternalState, setPressedInternalState] = useState(defaultPressed);
     return (_jsx(BaseToggle, { ...props, ref: ref, pressed: pressed, defaultPressed: defaultPressed, disabled: disabled, "data-size": size, "data-component": "toggle-root", "data-style-disabled": disableStyle ? '' : undefined, onPressedChange: (next, details) => {
             onPressedChange?.(next, details);
             if (!details.isCanceled)
                 setPressedInternalState(next);
         }, className: className, children: _jsx(ToggleContext.Provider, { value: { pressed: pressed ?? pressedInternalState, disabled, size }, children: children }) }));
-});
+}
 /** Render beside InactiveIcon inside Root. It automatically appears only while pressed; supply the decorative icon without another visibility condition. */
-export const ActiveIcon = /* @__PURE__ */ forwardRef(function ActiveIcon(props, ref) {
+export function ActiveIcon({ ref, ...props }) {
     const context = useToggleContext();
     if (!context.pressed)
         return null;
     return _jsx(StateIcon, { ...props, ref: ref, component: "toggle-activeicon" });
-});
+}
 /** Render beside ActiveIcon inside Root. It automatically appears only while unpressed; supply the decorative icon without another visibility condition. */
-export const InactiveIcon = /* @__PURE__ */ forwardRef(function InactiveIcon(props, ref) {
+export function InactiveIcon({ ref, ...props }) {
     const context = useToggleContext();
     if (context.pressed)
         return null;
     return _jsx(StateIcon, { ...props, ref: ref, component: "toggle-inactiveicon" });
-});
+}
 // The shared body of ActiveIcon and InactiveIcon: decorates the supplied icon with the toggle's state
-const StateIcon = /* @__PURE__ */ forwardRef(function StateIcon({ disableStyle, children, className, component, ...props }, ref) {
+function StateIcon({ disableStyle, children, className, component, ref, ...props }) {
     const context = useToggleContext();
     return cloneElement(children, {
         ...props,
@@ -61,7 +61,7 @@ const StateIcon = /* @__PURE__ */ forwardRef(function StateIcon({ disableStyle,
         },
         className: twMerge(children.props.className, className),
     });
-});
+}
 const ToggleContext = /* @__PURE__ */ createContext(null);
 function useToggleContext() {
     const context = useContext(ToggleContext);