@central-ui/react 0.1.2 → 0.2.0

package/dist/components/radio/index.js

@@ -2,7 +2,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 { ToneProvider, useToneContext } from "../../utils/Tone.js";
+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.
  *
@@ -59,29 +59,32 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </Radio.Root>
  */
-export function Root({ children, tone = 'neutral', ...props }) {
+export function Root({ children, validation, ...props }) {
+    // Holding the ids of the group's labels and messages, so the group announces them to screen readers
     const [labelIds, setLabelIds] = useState([]);
     const [messageIds, setMessageIds] = useState([]);
-    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseRadioGroup, { ...props, "aria-labelledby": [props['aria-labelledby'], ...labelIds].filter(Boolean).join(' ') ||
-                undefined, "aria-describedby": [props['aria-describedby'], ...messageIds]
-                .filter(Boolean)
-                .join(' ') || undefined, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, render: (groupProps, state) => {
-                const { children, ...elementProps } = groupProps;
-                return (_jsx(RadioContext.Provider, { value: {
-                        elementProps,
-                        state,
-                        messageIds,
-                        setMessageIds,
-                        setLabelIds,
-                    }, children: _jsx(_Fragment, { children: children }) }));
-            }, children: children }) }));
+    const chosenValidation = readValidation(validation);
+    return (_jsx(BaseRadioGroup, { ...props, "aria-labelledby": [props['aria-labelledby'], ...labelIds].filter(Boolean).join(' ') ||
+            undefined, "aria-describedby": [props['aria-describedby'], ...messageIds].filter(Boolean).join(' ') ||
+            undefined, "aria-invalid": chosenValidation.state === 'error' || props['aria-invalid'] || undefined, render: (groupProps, state) => {
+            // Base UI's group props go to Container, which renders the group element; only its children render here
+            const { children, ...elementProps } = groupProps;
+            return (_jsx(RadioContext.Provider, { value: {
+                    elementProps,
+                    state,
+                    messageIds,
+                    setMessageIds,
+                    setLabelIds,
+                    validation: chosenValidation,
+                }, children: _jsx(_Fragment, { children: children }) }));
+        }, children: children }));
 }
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     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) {
-    const { elementProps } = useRadioContext();
-    const { ref: nativeRef, ...nativeProps } = elementProps;
+    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. */
@@ -123,10 +126,9 @@ export function Item({ disableStyle, children, value, disabled, readOnly, requir
 export const ItemButton = /* @__PURE__ */ forwardRef(function ItemButton({ disableStyle, className, ...props }, ref) {
     const item = useItemContext();
     const group = useRadioContext();
-    const tone = useToneContext();
     return (_jsx(BaseRadio.Root, { ...props, ...item.coreProps, ref: ref, "aria-describedby": [props['aria-describedby'], ...group.messageIds, ...item.messageIds]
             .filter(Boolean)
-            .join(' ') || undefined, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "data-tone": tone, "data-component": "radio-itembutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(RadioButtonSurface, { ...buttonProps, state: state })) }));
+            .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) {
@@ -151,17 +153,27 @@ export const Description = /* @__PURE__ */ forwardRef(function Description({ dis
     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 }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
+/** 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 = 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) {
     const context = useRadioContext();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    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 }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+// 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) {
     const messageId = useMessageId(id);
     const context = useRadioContext();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    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() {
@@ -177,56 +189,53 @@ function useItemContext() {
         throw new globalThis.Error('Radio item parts must be inside Radio.Item');
     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) {
-    const { setState } = useItemContext();
+    const context = useItemContext();
     useEffect(() => {
-        setState({
+        context.setState({
             checked: state.checked,
             disabled: state.disabled,
             readOnly: state.readOnly,
             required: state.required,
         });
-    }, [state.checked, state.disabled, state.readOnly, state.required, setState]);
+    }, [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();
     const messageId = id ?? generatedId;
-    const { setMessageIds } = useRadioContext();
+    const context = useRadioContext();
     useEffect(() => {
-        setMessageIds((current) => [...current, messageId]);
-        return () => setMessageIds((current) => current.filter((value) => value !== messageId));
-    }, [messageId, setMessageIds]);
+        context.setMessageIds((current) => [...current, messageId]);
+        return () => context.setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, context.setMessageIds]);
     return messageId;
 }
+// Merging Base UI's ref with the consumer's one onto the same element
 function useRootRef(nativeRef, forwardedRef) {
     return useCallback((element) => {
-        const nativeCleanup = typeof nativeRef === 'function'
-            ? nativeRef(element)
-            : nativeRef
-                ? ((nativeRef.current = element), undefined)
-                : undefined;
-        const forwardedCleanup = typeof forwardedRef === 'function'
-            ? forwardedRef(element)
-            : forwardedRef
-                ? ((forwardedRef.current = element), undefined)
-                : undefined;
-        if (typeof nativeCleanup === 'function' ||
-            typeof forwardedCleanup === 'function')
-            return () => {
-                if (typeof nativeCleanup === 'function')
-                    nativeCleanup();
-                else if (typeof nativeRef === 'function')
-                    nativeRef(null);
-                else if (nativeRef)
-                    nativeRef.current = null;
-                if (typeof forwardedCleanup === 'function')
-                    forwardedCleanup();
-                else if (typeof forwardedRef === 'function')
-                    forwardedRef(null);
-                else if (forwardedRef)
-                    forwardedRef.current = null;
-            };
+        const refs = [nativeRef, forwardedRef];
+        //1. Setting both refs, keeping the cleanups that callback refs may return
+        const cleanups = refs.map((ref) => {
+            if (typeof ref === 'function')
+                return ref(element);
+            if (ref)
+                ref.current = element;
+            return undefined;
+        });
+        //2. Returning a cleanup only when a ref asked for one, since React then stops calling refs with null itself
+        if (!cleanups.some((cleanup) => typeof cleanup === 'function'))
+            return;
+        return () => refs.forEach((ref, index) => {
+            const cleanup = cleanups[index];
+            if (typeof cleanup === 'function')
+                return cleanup();
+            if (typeof ref === 'function')
+                return ref(null);
+            if (ref)
+                ref.current = null;
+        });
     }, [nativeRef, forwardedRef]);
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,6 +2,8 @@ import type { StyleProps } from '../../types/Style.ts';
 import { type RatingGroupControlProps, type RatingGroupItemProps, type RatingGroupLabelProps, type RatingGroupRootProps } from '@ark-ui/react/rating-group';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 /**
  * 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.
  *
@@ -34,9 +36,9 @@ import type { ComponentProps, ReactElement, ReactNode } from 'react';
  *   }
  * </RatingInput.Root>
  */
-export declare function Root({ children, tone, ...props }: Omit<RatingGroupRootProps, 'asChild'> & {
-    /** Visual feedback only; defaults to neutral. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+export declare function Root({ children, validation, ...props }: Omit<RatingGroupRootProps, 'asChild'> & {
+    /** 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 Label({ disableStyle, className, ...props }: Omit<RatingGroupLabelProps, 'asChild'> & StyleProps): import("react").JSX.Element;
@@ -52,8 +54,11 @@ export declare function StarButton({ disableStyle, children, className, ...props
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export declare function StarIcon({ disableStyle, className, strokeWidth, style, ...props }: Omit<SVGIconProps, 'children'> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare function Error({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare function Success({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+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 function Error({ children, ...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 function Success({ children, ...props }: MessageProps): import("react").JSX.Element | null;
+export {};

package/dist/components/ratinginput/index.js

@@ -1,8 +1,8 @@
 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 'lucide-react';
-import { cloneElement, forwardRef, useId, Fragment } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { Star as DefaultStarIcon } from "../../utils/icons.js";
+import { cloneElement, createContext, forwardRef, 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.
  *
@@ -35,13 +35,13 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </RatingInput.Root>
  */
-export function Root({ children, tone = 'neutral', ...props }) {
+export function Root({ children, validation, ...props }) {
     const rating = useRatingGroup(props);
-    return (_jsx(ToneProvider, { value: tone, children: _jsx(RatingGroup.RootProvider, { value: rating, asChild: true, children: _jsx(_Fragment, { children: children }) }) }));
+    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) => {
-    const tone = useToneContext();
-    return (_jsxs("div", { ...props, ref: ref, "data-tone": tone, "data-component": "ratinginput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [children, _jsx(RatingGroup.HiddenInput, { style: { display: 'none' } })] }));
+    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 }));
@@ -52,16 +52,16 @@ export function StarsList({ disableStyle, className, children, ...props }) {
     return (_jsx(RatingGroup.Control, { ...props, "data-component": "ratinginput-starslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: context.items.map((index) => (_jsx(Fragment, { children: children(index) }, index))) }));
 }
 export function StarButton({ disableStyle, children, className, ...props }) {
-    const tone = useToneContext();
+    const root = useRootPropsContext();
     const rating = useRatingGroupContext();
     const input = rating.getHiddenInputProps();
-    return (_jsx(RatingGroup.Item, { ...props, "data-tone": tone, "data-component": "ratinginput-starbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(RatingGroup.ItemContext, { children: ({ highlighted, half, checked }) => cloneElement(children, {
+    return (_jsx(RatingGroup.Item, { ...props, "aria-invalid": root.validation.state === 'error' || props['aria-invalid'] || undefined, ...validationAttributes(root.validation), "data-component": "ratinginput-starbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(RatingGroup.ItemContext, { children: ({ highlighted, half, checked }) => cloneElement(children, {
                 'data-highlighted': highlighted ? '' : undefined,
                 'data-half': half ? '' : undefined,
                 'data-checked': checked ? '' : undefined,
                 'data-disabled': input.disabled ? '' : undefined,
                 'data-readonly': input.readOnly ? '' : undefined,
-                'data-tone': tone,
+                ...validationAttributes(root.validation),
                 'aria-hidden': true,
             }) }) }));
 }
@@ -77,12 +77,32 @@ export function StarIcon({ disableStyle, className, strokeWidth, style, ...props
 export function Description({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "ratinginput-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 function Error({ disableStyle, className, ...props }) {
-    return (_jsx("div", { ...props, "data-component": "ratinginput-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 function Error({ children, ...props }) {
+    const root = useRootPropsContext();
+    const content = validationMessageContent(root.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, role: "alert", component: "ratinginput-error", children: content });
 }
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export function Success({ disableStyle, className, ...props }) {
-    return (_jsx("div", { ...props, "data-component": "ratinginput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** 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 function Success({ children, ...props }) {
+    const root = useRootPropsContext();
+    const content = validationMessageContent(root.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, role: "status", component: "ratinginput-success", children: content });
+}
+// The shared body of Error and Success, mounted only while they show
+function Message({ disableStyle, className, component, ...props }) {
+    const root = useRootPropsContext();
+    return _jsx("div", { "aria-atomic": "true", ...props, ...validationAttributes(root.validation), "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
+}
+// Root's own props shared with the parts, since Ark's rating context only carries the rating state
+const RootPropsContext = /* @__PURE__ */ createContext(null);
+function useRootPropsContext() {
+    const context = useContext(RootPropsContext);
+    if (!context)
+        throw new globalThis.Error('RatingInput parts must be inside RatingInput.Root');
+    return context;
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,7 +1,10 @@
 import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 import { Select as BaseSelect } from '@base-ui/react/select';
 import type { SVGIconProps } from '../../types/Icon.ts';
-import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type ItemShape = {
     /** Used automatically for the displayed selection. No label accessor needed. */
     label: string;
@@ -23,8 +26,8 @@ export type ItemType<T extends readonly GroupShape[]> = GroupType<T>['items'][nu
 export type RootProps<T extends readonly GroupShape[], Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<ItemType<T>, Multiple>, 'items' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue'> & {
     /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
     items: T;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Pick a size']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral field. */
+    validation?: Validation;
 };
 /**
  * Prepare groups in items. A flat-looking list is one group with an empty label and no GroupLabel; keep Group around ItemsList. OpenButtonValue already formats the selection: omit children unless a custom display is needed. Keep ScrollArea → GroupsList → Group → ItemsList → Item in Popup.
@@ -111,7 +114,7 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
  *   }
  * </Select.Root>
  */
-export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, items, id, tone, open, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
+export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, items, id, validation, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "className"> & {
     className?: string;
@@ -123,57 +126,48 @@ export type OpenButtonValueProps<Value extends ItemShape | ItemShape[] | null =
     children?: ReactNode | ((value: Value) => ReactNode);
 } & StyleProps;
 /** Omit children to keep the built-in formatted value. Supply children only for a special display; do not format the selection yourself for the usual case. */
-export declare function OpenButtonValue<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null>({ disableStyle, className, ...props }: OpenButtonValueProps<Value> & StyleProps): import("react").JSX.Element;
+export declare function OpenButtonValue<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null>({ disableStyle, className, ...props }: OpenButtonValueProps<Value>): import("react").JSX.Element;
 export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseSelect.List>, 'children' | 'className'> & {
     className?: string;
     children?: ReactNode;
 } & StyleProps;
-export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "children" | "className"> & {
-    className?: string;
-    children?: ReactNode;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     /** Return Group with ItemsList. Manually annotate group with Select.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
     children: ReactNode | ((group: Group, index: number) => ReactNode);
 } & StyleProps;
 /** Let this list render the groups. Manually annotate its children callback with Select.GroupType<typeof rootItems>, using the SAME items variable passed to Root. */
-export declare function GroupsList<Group extends GroupShape = GroupShape>({ disableStyle, children, className, style, ...props }: GroupsListProps<Group> & StyleProps): import("react").JSX.Element;
+export declare function GroupsList<Group extends GroupShape = GroupShape>({ disableStyle, children, className, ...props }: GroupsListProps<Group>): import("react").JSX.Element;
 export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> & {
     className?: string;
     /** Return Item with ItemText and ItemIndicator. Manually annotate item with Select.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
     children: (item: Item, index: number) => ReactNode;
 } & StyleProps;
 /** Let this list render the surrounding group. Manually annotate its callback with Select.ItemType<typeof rootItems>, using the SAME items variable passed to Root. */
-export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item> & StyleProps): import("react").JSX.Element;
+export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item>): import("react").JSX.Element;
 export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Group>, 'className'> & {
     className?: string;
     /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
-    /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
     items: readonly Item[];
 } & StyleProps;
-export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, items, children, className, ...props }: GroupProps<Item> & StyleProps): import("react").JSX.Element;
+export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, items, children, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
 export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Item>, 'value' | 'className'> & {
     className?: string;
     /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
     /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
     value: Item;
 } & StyleProps;
-export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item> & StyleProps): import("react").JSX.Element;
+export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
 export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseSelect.Popup>, 'className'> & {
     className?: string;
 } & Pick<BaseSelect.Portal.Props, 'container'> & Pick<BaseSelect.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance' | 'alignItemWithTrigger'> & 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, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, alignItemWithTrigger, className, style, ...props }: PopupProps & StyleProps): import("react").JSX.Element;
+export declare function Popup({ disableStyle, container, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, alignItemWithTrigger, 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 PopupOpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "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 OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "className"> & {
+/** Opens the select. Pass asChild to make your own button the trigger instead, like a "Sort" Button. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "className" | "render"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Omit for an unlabeled/flat-looking group; keep the Group wrapper. Supply the heading only when grouping should be visible. */
 export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "className"> & {
     className?: string;
@@ -185,10 +179,13 @@ export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<Om
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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>>;
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export declare const OpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** 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. */
@@ -202,4 +199,4 @@ export declare const ScrollUpArrow: import("react").ForwardRefExoticComponent<Om
 export declare const ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map
+export {};