@central-ui/react 0.3.0 → 0.5.0

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

@@ -1,5 +1,5 @@
 import type { StyleProps } from '../../types/Style.ts';
-import { Root as RadixRoot, Input as RadixInput } from '@radix-ui/react-password-toggle-field';
+import { Root as RadixRoot, Input as RadixInput, Toggle as RadixToggle } from '@radix-ui/react-password-toggle-field';
 import { Input as BaseInput } from '@base-ui/react/input';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement } from 'react';
@@ -50,34 +50,34 @@ export declare function Root({ children, id, validation, value, defaultValue, on
 export type InputProps = Omit<ComponentPropsWithRef<typeof RadixInput>, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required'> | 'asChild'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: InputProps): import("react").JSX.Element;
+export declare function InputGroup({ disableStyle, className, onClick, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, 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;
 /** Toggles password visibility automatically; do not maintain another visibility state. */
-export declare const AddonVisibilityButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-password-toggle-field").PasswordToggleFieldToggleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AddonVisibilityButton({ disableStyle, className, disabled, id, ref, ...props }: ComponentPropsWithRef<typeof RadixToggle> & 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 AddonVisibleIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */

package/dist/components/passwordinput/index.js

@@ -4,7 +4,7 @@ import { Input as BaseInput } from '@base-ui/react/input';
 import { Eye, EyeOff, 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";
 /**
@@ -66,7 +66,7 @@ export function Root({ children, id, validation, value, defaultValue, onValueCha
                 validation: readValidation(validation),
             }, children: children }) }));
 }
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useInputContext();
     const inputRef = useRef(null);
     // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
@@ -96,58 +96,58 @@ export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, c
                 if (!details.isCanceled && !context.controlled)
                     context.setValueInternalState(nextValue);
             }, "data-component": "passwordinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
-});
-export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+}
+export function InputGroup({ disableStyle, className, onClick, ref, ...props }) {
     const attributes = usePartAttributes();
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
     return (_jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "passwordinput-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "passwordinput-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": "passwordinput-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": "passwordinput-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: "passwordinput-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: "passwordinput-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the password input
-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": "passwordinput-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": "passwordinput-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();
@@ -163,22 +163,22 @@ 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": "passwordinput-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": "passwordinput-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Toggles password visibility automatically; do not maintain another visibility state. */
-export const AddonVisibilityButton = /* @__PURE__ */ forwardRef(function AddonVisibilityButton({ disableStyle, className, disabled, id, ...props }, ref) {
+export function AddonVisibilityButton({ disableStyle, className, disabled, id, ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx(RadixToggle, { ...attributes, ...props, id: id ?? context.inputId + '-toggle', ref: ref, disabled: disabled || context.disabled || context.readOnly, "data-component": "passwordinput-addonvisibilitybutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function AddonVisibleIcon({ disableStyle, children = _jsx(EyeOff, {}), className, ...props }) {
     const attributes = usePartAttributes();

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

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Popover as BasePopover } from '@base-ui/react/popover';
-import type { ComponentPropsWithRef, ReactElement } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * OpenButton and CloseButton render their own buttons; pass asChild to give their behavior to your own button instead. Popup already includes its portal and positioner. Use Header/Body/Footer as needed; an Arrow is optional.
@@ -40,30 +40,30 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  */
 export declare function Root<Payload = unknown>(props: BasePopover.Root.Props<Payload>): import("react").JSX.Element;
 /** Opens the popover. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BasePopover.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BasePopover.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BasePopover.Popup>, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BasePopover.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BasePopover.Portal.Props, 'container' | 'keepMounted'> & Pick<BasePopover.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
-export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "className"> & {
+export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;
+export declare function Header({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Footer({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Title({ disableStyle, className, ref, ...props }: (Omit<BasePopover.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").PopoverDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BasePopover.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". Name it for screen readers with aria-label instead, e.g. aria-label="Close". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverCloseProps, "className" | "render"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BasePopover.Close.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 const CloseButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function CloseButtonIcon({ disableStyle, children, className, ref, ...props }: (SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}) & StyleProps): import("react").FunctionComponentElement<any>;

package/dist/components/popover/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Popover as BasePopover } from '@base-ui/react/popover';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { X } from "../../utils/icons.js";
 /**
@@ -43,10 +43,10 @@ export function Root(props) {
     return _jsx(BasePopover.Root, { ...props });
 }
 /** Opens the popover. Pass asChild to give this behavior to your own element, like your app's Button. */
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+export function OpenButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'popover-openbutton', disableStyle });
     return _jsx(BasePopover.Trigger, { ...props, ref: ref, ...rendering });
-});
+}
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'bottom', sideOffset = 5, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
     const baseStyle = {
@@ -57,31 +57,31 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BasePopover.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "popover-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "popover-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "popover-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "popover-arrow-3" })] }));
-});
-export const Header = /* @__PURE__ */ forwardRef(function Header({ disableStyle, className, ...props }, ref) {
+}
+export function Header({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "popover-header", "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("div", { ...props, ref: ref, "data-component": "popover-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Footer = /* @__PURE__ */ forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
+}
+export function Footer({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "popover-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+}
+export function Title({ disableStyle, className, ref, ...props }) {
     return (_jsx(BasePopover.Title, { ...props, ref: ref, "data-component": "popover-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(BasePopover.Description, { ...props, ref: ref, "data-component": "popover-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Close". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+export function CloseButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'popover-closebutton', disableStyle });
     return _jsx(BasePopover.Close, { ...props, ref: ref, ...rendering });
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
+export function CloseButtonIcon({ disableStyle, children, className, ref, ...props }) {
     return cloneElement(children ?? _jsx(X, {}), {
         ...props,
         ref,
@@ -91,5 +91,6 @@ export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIc
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children?.props.className, className),
+        strokeWidth: props.strokeWidth ?? children?.props.strokeWidth ?? 2,
     });
-});
+}

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

@@ -65,30 +65,30 @@ export type RootProps<Value = string> = Omit<BaseRadioGroup.Props<Value>, 'rende
  * </Radio.Root>
  */
 export declare function Root<Value>({ 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 List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function List({ disableStyle, 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<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, id, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 type ItemCoreKeys = 'value' | 'disabled' | 'readOnly' | 'required' | 'inputRef';
 export type ItemProps<Value = string> = Omit<ComponentProps<'div'>, 'children'> & Pick<BaseRadio.Root.Props<Value>, ItemCoreKeys> & {
     children: ReactNode;
 } & StyleProps;
 export declare function Item<Value>({ disableStyle, children, value, disabled, readOnly, required, inputRef, id, className, ...props }: ItemProps<Value>): import("react").JSX.Element;
-export declare const ItemButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseRadio.Root.Props<any>, "className" | "id" | "disabled" | "value" | "render" | "nativeButton" | "required" | "readOnly" | "inputRef"> & {
+export declare function ItemButton({ disableStyle, className, ref, ...props }: (Omit<BaseRadio.Root.Props, 'value' | 'disabled' | 'readOnly' | 'required' | 'inputRef' | 'id' | '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 ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").RadioIndicatorProps, "className"> & {
+export declare function ItemIndicator({ disableStyle, children, className, ref, ...props }: (Omit<BaseRadio.Indicator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const ItemLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-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 ItemLabel({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function ItemDescription({ disableStyle, className, id, ref, ...props }: ComponentProps<'span'> & 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/radio/index.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import { Radio as BaseRadio } from '@base-ui/react/radio';
-import { createContext, useCallback, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { createContext, useCallback, useContext, useEffect, useId, useState, } from 'react';
 import { readValidation, validationAttributes, validationMessageContent, } from "../../utils/Validation.js";
 /**
  * Root owns the chosen value. For each choice keep Item, ItemButton, ItemIndicator, and ItemLabel together. The indicator follows selection automatically; do not manage a separate checked state for each item.
@@ -79,16 +79,16 @@ export function Root({ children, validation, ...props }) {
                 }, children: _jsx(_Fragment, { children: children }) }));
         }, 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": "radio-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, ...props }, ref) {
+}
+export function List({ disableStyle, ref, ...props }) {
     const context = useRadioContext();
     const { ref: nativeRef, ...nativeProps } = context.elementProps;
     return (_jsx("div", { ...nativeProps, ...props, ref: useRootRef(nativeRef, ref), "data-component": "radio-list", "data-style-disabled": disableStyle ? '' : undefined, className: props.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 generatedId = useId();
     const labelId = id ?? generatedId;
     const context = useRadioContext();
@@ -97,7 +97,7 @@ export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, c
         return () => context.setLabelIds((current) => current.filter((value) => value !== labelId));
     }, [labelId, context.setLabelIds]);
     return (_jsx("div", { ...props, id: labelId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 export function Item({ disableStyle, children, value, disabled, readOnly, required, inputRef, id, className, ...props }) {
     const generatedId = useId();
     const group = useRadioContext();
@@ -123,22 +123,22 @@ export function Item({ disableStyle, children, value, disabled, readOnly, requir
             setMessageIds,
         }, children: _jsx("div", { ...props, "data-component": "radio-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }) }));
 }
-export const ItemButton = /* @__PURE__ */ forwardRef(function ItemButton({ disableStyle, className, ...props }, ref) {
+export function ItemButton({ disableStyle, className, ref, ...props }) {
     const item = useItemContext();
     const group = useRadioContext();
     return (_jsx(BaseRadio.Root, { ...props, ...item.coreProps, ref: ref, "aria-describedby": [props['aria-describedby'], ...group.messageIds, ...item.messageIds]
             .filter(Boolean)
             .join(' ') || undefined, "aria-invalid": group.validation.state === 'error' || props['aria-invalid'] || undefined, ...validationAttributes(group.validation), "data-component": "radio-itembutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(RadioButtonSurface, { ...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 ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, className, ...props }, ref) {
+export function ItemIndicator({ disableStyle, children, className, ref, ...props }) {
     return (_jsx(BaseRadio.Indicator, { ...props, ref: ref, "data-component": "radio-itemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
-});
-export const ItemLabel = /* @__PURE__ */ forwardRef(function ItemLabel({ disableStyle, className, ...props }, ref) {
+}
+export function ItemLabel({ disableStyle, className, ref, ...props }) {
     const item = useItemContext();
     return (_jsx("label", { ...props, ref: ref, htmlFor: item.coreProps.id, "data-disabled": item.state.disabled ? '' : undefined, "data-component": "radio-itemlabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ItemDescription = /* @__PURE__ */ forwardRef(function ItemDescription({ disableStyle, className, id, ...props }, ref) {
+}
+export function ItemDescription({ disableStyle, className, id, ref, ...props }) {
     const generatedId = useId();
     const messageId = id ?? generatedId;
     const item = useItemContext();
@@ -147,34 +147,34 @@ export const ItemDescription = /* @__PURE__ */ forwardRef(function ItemDescripti
         return () => item.setMessageIds((current) => current.filter((value) => value !== messageId));
     }, [messageId, item.setMessageIds]);
     return (_jsx("span", { ...props, ref: ref, id: messageId, "data-disabled": item.state.disabled ? '' : undefined, "data-checked": item.state.checked ? '' : undefined, "data-component": "radio-itemdescription", "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 context = useRadioContext();
     return (_jsx("div", { ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-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 = useRadioContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return (_jsx(Message, { ...props, ref: ref, role: "alert", component: "radio-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 = useRadioContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return (_jsx(Message, { ...props, ref: ref, role: "status", component: "radio-success", children: content }));
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the group
-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 = useRadioContext();
     return (_jsx("div", { "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, ...validationAttributes(context.validation), "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const RadioContext = /* @__PURE__ */ createContext(null);
 function useRadioContext() {
     const context = useContext(RadioContext);
@@ -190,7 +190,7 @@ function useItemContext() {
     return context;
 }
 // Rendered by Base UI as the radio element, it reports Base UI's live state back to the item's mirror
-const RadioButtonSurface = /* @__PURE__ */ forwardRef(function RadioButtonSurface({ state, ...props }, ref) {
+function RadioButtonSurface({ state, ref, ...props }) {
     const context = useItemContext();
     useEffect(() => {
         context.setState({
@@ -201,7 +201,7 @@ const RadioButtonSurface = /* @__PURE__ */ forwardRef(function RadioButtonSurfac
         });
     }, [state.checked, state.disabled, state.readOnly, state.required, context.setState]);
     return _jsx("span", { ...props, ref: ref });
-});
+}
 // Registering a message part's id in the group's and buttons' aria-describedby while the part is mounted
 function useMessageId(id) {
     const generatedId = useId();

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

@@ -40,7 +40,7 @@ export declare function Root({ children, validation, ...props }: Omit<RatingGrou
     /** The rating's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Rate your delivery']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral rating. */
     validation?: Validation;
 }): 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 function Container({ disableStyle, children, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function Label({ disableStyle, className, ...props }: Omit<RatingGroupLabelProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Calls children for each rating index. Pass the supplied index to StarButton; do not create a second hover or selection state. */
 export declare function StarsList({ disableStyle, className, children, ...props }: (Omit<RatingGroupControlProps, 'asChild' | 'children'> & {

package/dist/components/ratinginput/index.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RatingGroup, useRatingGroup, useRatingGroupContext, } from '@ark-ui/react/rating-group';
 import { Star as DefaultStarIcon } from "../../utils/icons.js";
-import { cloneElement, createContext, forwardRef, useContext, useId, Fragment } from 'react';
+import { cloneElement, createContext, useContext, useId, Fragment } from 'react';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Root configures the scale and selection. StarsList supplies indices; use StarButton with StarIcon for each rating. Highlight, checked, and half-star appearance are built in; do not recreate hover state.
@@ -39,10 +39,10 @@ export function Root({ children, validation, ...props }) {
     const rating = useRatingGroup(props);
     return (_jsx(RootPropsContext.Provider, { value: { validation: readValidation(validation) }, children: _jsx(RatingGroup.RootProvider, { value: rating, asChild: true, children: _jsx(_Fragment, { children: children }) }) }));
 }
-export const Container = /* @__PURE__ */ forwardRef(({ disableStyle, children, className, ...props }, ref) => {
+export function Container({ disableStyle, children, className, ref, ...props }) {
     const root = useRootPropsContext();
     return (_jsxs("div", { ...props, ref: ref, ...validationAttributes(root.validation), "data-component": "ratinginput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [children, _jsx(RatingGroup.HiddenInput, { style: { display: 'none' } })] }));
-});
+}
 export function Label({ disableStyle, className, ...props }) {
     return (_jsx(RatingGroup.Label, { ...props, "data-component": "ratinginput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }