@central-ui/react 0.1.1 → 0.2.0

package/dist/components/passwordinput/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Root as RadixRoot, Input as RadixInput, Toggle as RadixToggle, Slot as RadixSlot, } from '@radix-ui/react-password-toggle-field';
 import { Input as BaseInput } from '@base-ui/react/input';
-import { Eye, EyeOff, LoaderCircle } from 'lucide-react';
+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 { twMerge } from 'tailwind-merge';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Configure the password on Root and use Input inside InputGroup. AddonVisibilityButton toggles visibility automatically; its visible/hidden icons follow that state. Do not maintain a second visibility state.
  *
@@ -44,13 +44,12 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </PasswordInput.Root>
  */
-export function Root({ children, id, tone = 'neutral', value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, name, form, ...props }) {
+export function Root({ children, id, validation, value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, name, form, ...props }) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
+    // Holding the ids of Description, Error and Success, so the control announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
     return (_jsx(RadixRoot, { ...props, id: inputId, children: _jsx(InputContext.Provider, { value: {
                 inputId,
                 disabled,
@@ -62,24 +61,20 @@ export function Root({ children, id, tone = 'neutral', value, defaultValue, onVa
                 setValueInternalState,
                 onValueChange,
                 coreProps: { name, form },
-                connections,
-                setConnections,
-            }, children: _jsx(ToneProvider, { value: tone, children: children }) }) }));
+                describedByIds,
+                setDescribedByIds,
+                validation: readValidation(validation),
+            }, children: children }) }));
 }
-export const Input = forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
     const inputRef = useRef(null);
+    // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
     useEffect(() => {
         const form = inputRef.current?.form;
         if (!form || context.controlled)
             return;
-        const reset = (event) => {
-            queueMicrotask(() => {
-                if (!event.defaultPrevented)
-                    context.setValueInternalState(context.defaultValue ?? '');
-            });
-        };
+        const reset = (event) => queueMicrotask(() => !event.defaultPrevented && context.setValueInternalState(context.defaultValue ?? ''));
         form.addEventListener('reset', reset);
         return () => form.removeEventListener('reset', reset);
     }, [
@@ -88,7 +83,7 @@ export const Input = forwardRef(function Input({ disableStyle, className, 'aria-
         context.setValueInternalState,
         context.coreProps.form,
     ]);
-    return (_jsx(RadixInput, { asChild: true, id: context.inputId, children: _jsx(BaseInput, { ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
+    return (_jsx(RadixInput, { asChild: true, id: context.inputId, children: _jsx(BaseInput, { ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds]
                 .filter(Boolean)
                 .join(' ') || undefined, ref: (element) => {
                 inputRef.current = element;
@@ -102,51 +97,54 @@ export const Input = forwardRef(function Input({ disableStyle, className, 'aria-
                     context.setValueInternalState(nextValue);
             }, "data-component": "passwordinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
 });
-export const InputGroup = forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
     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 = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     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 = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
-    useEffect(() => {
-        context.setConnections((current) => ({ ...current, labelId }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            labelId: current.labelId === labelId ? undefined : current.labelId,
-        }));
-    }, [labelId, context.setConnections]);
     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 = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     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 }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "passwordinput-error", "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) {
+    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 });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+/** 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) {
+    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) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "passwordinput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    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 = forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     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 = forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "passwordinput-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
@@ -165,18 +163,18 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-export const AddonButton = forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
     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 = forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
     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 = forwardRef(function AddonVisibilityButton({ disableStyle, className, disabled, id, ...props }, ref) {
+export const AddonVisibilityButton = /* @__PURE__ */ forwardRef(function AddonVisibilityButton({ disableStyle, className, disabled, id, ...props }, ref) {
     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 }));
@@ -215,7 +213,7 @@ export function AddonHiddenIcon({ disableStyle, children = _jsx(Eye, {}), classN
     });
     return _jsx(RadixSlot, { visible: null, hidden: icon });
 }
-const InputContext = createContext(null);
+const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);
     if (!context)
@@ -224,28 +222,21 @@ function useInputContext() {
 }
 function usePartAttributes() {
     const context = useInputContext();
-    const tone = useToneContext();
     return {
         'data-disabled': context.disabled ? '' : undefined,
         'data-readonly': context.readOnly ? '' : undefined,
         'data-required': context.required ? '' : undefined,
-        'data-tone': tone,
+        ...validationAttributes(context.validation),
     };
 }
+// Registering a message part's id in the control's aria-describedby while the part is mounted
 function useMessageId(id) {
+    const context = useInputContext();
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const context = useInputContext();
     useEffect(() => {
-        context.setConnections((current) => ({
-            ...current,
-            descriptionIds: [...current.descriptionIds, messageId],
-        }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
-        }));
-    }, [messageId, context.setConnections]);
+        context.setDescribedByIds((current) => [...current, messageId]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== messageId));
+    }, [messageId, context.setDescribedByIds]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,10 @@
 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 { SVGIconProps } from '../../types/Icon.ts';
 /**
- * OpenHandler and CloseHandler add behavior to their button children. Popup already includes its portal and positioner. Use Header/Body/Footer as needed; an Arrow is optional.
+ * 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.
  *
  * @example Complete composition
  * import { Button, Popover } from '@central-ui/react'
@@ -10,9 +12,9 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  * function Example() {
  *   return (
  *     <Popover.Root>
- *       <Popover.OpenHandler>
+ *       <Popover.OpenButton asChild>
  *         <Button.default variant="secondary">Account</Button.default>
- *       </Popover.OpenHandler>
+ *       </Popover.OpenButton>
  *       <Popover.Popup>
  *         <Popover.Header>
  *           <Popover.Title>Account</Popover.Title>
@@ -20,9 +22,9 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  *         </Popover.Header>
  *         <Popover.Body>Account settings go here.</Popover.Body>
  *         <Popover.Footer>
- *           <Popover.CloseHandler>
+ *           <Popover.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Popover.CloseHandler>
+ *           </Popover.CloseButton>
  *         </Popover.Footer>
  *       </Popover.Popup>
  *     </Popover.Root>
@@ -36,25 +38,17 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  *   Details
  * </Popover.Popup>
  */
-export declare const Root: typeof BasePopover.Root;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const OpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<BasePopover.Trigger.Props<unknown>, "children" | "className" | "render"> & {
+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"> & {
     className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopupProps = Omit<ComponentPropsWithRef<typeof BasePopover.Popup>, 'className'> & {
     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 & StyleProps): import("react").JSX.Element;
+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>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const CloseHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverCloseProps, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 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>>;
@@ -64,4 +58,12 @@ export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverDescriptionProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-//# sourceMappingURL=index.d.ts.map
+/** 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"> & {
+    className?: string;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** 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 & {
+    /** Omit for the supplied default icon; pass a child only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/popover/index.js

@@ -1,8 +1,11 @@
 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 { forwardRef } from 'react';
+import { cloneElement, forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { X } from "../../utils/icons.js";
 /**
- * OpenHandler and CloseHandler add behavior to their button children. Popup already includes its portal and positioner. Use Header/Body/Footer as needed; an Arrow is optional.
+ * 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.
  *
  * @example Complete composition
  * import { Button, Popover } from '@central-ui/react'
@@ -10,9 +13,9 @@ import { forwardRef } from 'react';
  * function Example() {
  *   return (
  *     <Popover.Root>
- *       <Popover.OpenHandler>
+ *       <Popover.OpenButton asChild>
  *         <Button.default variant="secondary">Account</Button.default>
- *       </Popover.OpenHandler>
+ *       </Popover.OpenButton>
  *       <Popover.Popup>
  *         <Popover.Header>
  *           <Popover.Title>Account</Popover.Title>
@@ -20,9 +23,9 @@ import { forwardRef } from 'react';
  *         </Popover.Header>
  *         <Popover.Body>Account settings go here.</Popover.Body>
  *         <Popover.Footer>
- *           <Popover.CloseHandler>
+ *           <Popover.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Popover.CloseHandler>
+ *           </Popover.CloseButton>
  *         </Popover.Footer>
  *       </Popover.Popup>
  *     </Popover.Root>
@@ -36,10 +39,13 @@ import { forwardRef } from 'react';
  *   Details
  * </Popover.Popup>
  */
-export const Root = BasePopover.Root;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const OpenHandler = forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BasePopover.Trigger, { ...props, ref: ref, render: children });
+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) {
+    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 }) {
@@ -51,26 +57,39 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const Arrow = forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     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" })] }));
 });
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const CloseHandler = forwardRef(function CloseHandler({ children, ...props }, ref) {
-    return _jsx(BasePopover.Close, { ...props, ref: ref, render: children });
-});
-export const Header = forwardRef(function Header({ disableStyle, className, ...props }, ref) {
+export const Header = /* @__PURE__ */ forwardRef(function Header({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "popover-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Body = forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "popover-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Footer = forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
+export const Footer = /* @__PURE__ */ forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "popover-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Title = forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
     return (_jsx(BasePopover.Title, { ...props, ref: ref, "data-component": "popover-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
     return (_jsx(BasePopover.Description, { ...props, ref: ref, "data-component": "popover-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-//# sourceMappingURL=index.js.map
+/** 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) {
+    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) {
+    return cloneElement(children ?? _jsx(X, {}), {
+        ...props,
+        ref,
+        'aria-hidden': true,
+        ...{
+            'data-component': 'popover-closebuttonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(children?.props.className, className),
+    });
+});

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

@@ -2,9 +2,11 @@ import type { StyleProps } from '../../types/Style.ts';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import { Radio as BaseRadio } from '@base-ui/react/radio';
 import type { ComponentProps, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps<Value = string> = Omit<BaseRadioGroup.Props<Value>, 'render' | 'className'> & {
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The group's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Pick a plan']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral group. */
+    validation?: Validation;
 };
 /**
  * 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.
@@ -62,7 +64,7 @@ export type RootProps<Value = string> = Omit<BaseRadioGroup.Props<Value>, 'rende
  *   }
  * </Radio.Root>
  */
-export declare function Root<Value>({ children, tone, ...props }: RootProps<Value>): import("react").JSX.Element;
+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>>;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
@@ -71,7 +73,7 @@ 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> & StyleProps): import("react").JSX.Element;
+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"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -82,9 +84,11 @@ export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Om
 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>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+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>>;
+/** 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 {};
-//# sourceMappingURL=index.d.ts.map