@central-ui/react 0.1.1 → 0.2.0

package/dist/components/checkbox/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { Check, Minus } from 'lucide-react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { Check, Minus } from "../../utils/icons.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
  *
@@ -39,9 +39,10 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', ...coreProps }) {
-    const generatedId = useId();
+export function Root({ children, id, validation, ...coreProps }) {
+    //1. Holding the ids of Description, Error and Success, so Button announces them to screen readers through aria-describedby
     const [messageIds, setMessageIds] = useState([]);
+    //2. Mirroring Base UI's live state, so parts outside Button (Label, Description…) can carry its data attributes
     const [state, setState] = useState({
         checked: coreProps.checked ?? coreProps.defaultChecked ?? false,
         indeterminate: coreProps.indeterminate ?? false,
@@ -49,52 +50,71 @@ export function Root({ children, id, tone = 'neutral', ...coreProps }) {
         readOnly: coreProps.readOnly ?? false,
         required: coreProps.required ?? false,
     });
+    //3. Sharing everything with the parts
+    const generatedId = useId();
     return (_jsx(CheckboxContext.Provider, { value: {
             coreProps: { ...coreProps, id: id ?? generatedId },
             state,
             setState,
             messageIds,
             setMessageIds,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            validation: readValidation(validation),
+        }, children: children }));
 }
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
-export const CheckboxGroup = forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
+export const CheckboxGroup = /* @__PURE__ */ forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseCheckboxGroup, { ...props, ref: ref, "data-component": "checkbox-checkboxgroup", "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) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "checkbox-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Button = forwardRef(function Button({ disableStyle, className, ...props }, ref) {
+export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
     const context = useCheckboxContext();
-    const tone = useToneContext();
-    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
+    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "checkbox-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckboxButtonSurface, { ...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 Indicator = forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? (_jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" })) : state.checked ? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" })) : null })) }));
+export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: (() => {
+                if (state.indeterminate)
+                    return _jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" });
+                if (state.checked)
+                    return _jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" });
+                return null;
+            })() })) }));
 });
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
     const context = useCheckboxContext();
     return (_jsx("label", { ...usePartAttributes(), ...props, ref: ref, htmlFor: context.coreProps.id, "data-component": "checkbox-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);
     return (_jsx("span", { ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-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);
-    return (_jsx("span", { role: "alert", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-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 = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "checkbox-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 = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "checkbox-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the checkbox
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
-    return (_jsx("span", { role: "status", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("span", { "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-const CheckboxContext = createContext(null);
+const CheckboxContext = /* @__PURE__ */ createContext(null);
 function useCheckboxContext() {
     const context = useContext(CheckboxContext);
     if (!context)
@@ -102,21 +122,21 @@ function useCheckboxContext() {
     return context;
 }
 function usePartAttributes() {
-    const { state } = useCheckboxContext();
-    const tone = useToneContext();
+    const context = useCheckboxContext();
     return {
-        'data-checked': state.checked ? '' : undefined,
-        'data-indeterminate': state.indeterminate ? '' : undefined,
-        'data-disabled': state.disabled ? '' : undefined,
-        'data-readonly': state.readOnly ? '' : undefined,
-        'data-required': state.required ? '' : undefined,
-        'data-tone': tone,
+        'data-checked': context.state.checked ? '' : undefined,
+        'data-indeterminate': context.state.indeterminate ? '' : undefined,
+        'data-disabled': context.state.disabled ? '' : undefined,
+        'data-readonly': context.state.readOnly ? '' : undefined,
+        'data-required': context.state.required ? '' : undefined,
+        ...validationAttributes(context.validation),
     };
 }
-const CheckboxButtonSurface = forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
-    const { setState } = useCheckboxContext();
+// Rendered by Base UI as the checkbox element, it reports Base UI's live state back to Root's mirror
+const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
+    const context = useCheckboxContext();
     useEffect(() => {
-        setState({
+        context.setState({
             checked: state.checked,
             indeterminate: state.indeterminate,
             disabled: state.disabled,
@@ -129,18 +149,18 @@ const CheckboxButtonSurface = forwardRef(function CheckboxButtonSurface({ state,
         state.disabled,
         state.readOnly,
         state.required,
-        setState,
+        context.setState,
     ]);
     return _jsx("span", { ...props, ref: ref });
 });
+// Registering a message part's id in Button's aria-describedby while the part is mounted
 function useMessageId(id) {
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const { setMessageIds } = useCheckboxContext();
+    const context = useCheckboxContext();
     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;
 }
-//# sourceMappingURL=index.js.map

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

@@ -17,10 +17,10 @@ import type { ComponentProps, ReactElement } from 'react';
  * }
  */
 export declare function Chip({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export declare function CloseButton({ disableStyle, type, className, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { X } from 'lucide-react';
+import { X } from "../../utils/icons.js";
 import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
@@ -21,13 +21,13 @@ import { twMerge } from 'tailwind-merge';
 export function Chip({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "chip-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export function CloseButton({ disableStyle, type = 'button', className, ...props }) {
     return (_jsx("button", { ...props, type: type, "data-component": "chip-closebutton", "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 CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'chip-closebuttonicon',
@@ -37,4 +37,3 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,8 @@
+import type { SVGIconProps } from '../../types/Icon.ts';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
-import type { LucideProps } from 'lucide-react';
+import type { ValidationProps } from '../../types/Validation.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 type StyleProps = {
     /**
      * Disables preset styling for this element.
@@ -34,7 +36,7 @@ export type GroupType<T extends readonly GroupShape[]> = T[number];
 export type ItemType<T extends readonly GroupShape[]> = GroupType<T>['items'][number];
 /** Manually type a ChipsList callback argument with ChipsType<typeof rootItems>, using the exact items variable passed to Root. Also useful for multiple-selection state. */
 export type ChipsType<T extends readonly GroupShape[]> = ItemType<T>[];
-export type RootProps<T extends readonly GroupShape[], Multiple extends boolean | undefined = false> = Omit<BaseCombobox.Root.Props<ItemType<T>, Multiple>, 'items' | 'filteredItems' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue' | 'id'> & {
+export type RootProps<T extends readonly GroupShape[], Multiple extends boolean | undefined = false> = Omit<BaseCombobox.Root.Props<ItemType<T>, Multiple>, 'items' | 'filteredItems' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue' | 'id'> & ValidationProps & {
     /** Input id, also used automatically by Label. Omit to generate a stable id. */
     id?: BaseCombobox.Root.Props<ItemType<T>, Multiple>['id'];
     /**
@@ -50,8 +52,6 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
      * performs filtering itself, such as filtering results on a server.
      */
     filteredItems?: readonly GroupType<T>[];
-    /** Visual validation tone only; does not validate or change selection. @default 'neutral' */
-    tone?: 'neutral' | 'valid' | 'invalid';
 };
 /**
  * Searchable selection using Base UI's built-in filtering and keyboard handling.
@@ -206,7 +206,7 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
  *   <Combobox.AddonOpenButtonIcon />
  * </Combobox.AddonOpenButton>
  */
-export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, id, tone, open, defaultOpen, onOpenChange, onItemHighlighted, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
+export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, id, validation, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
 /** Use for the standard stacked layout, or omit when supplying your own layout. */
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
@@ -271,7 +271,7 @@ export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<Compon
     children: ReactNode | ((group: Group, index: number) => ReactNode);
 } & StyleProps;
 /** Required groups container inside ScrollArea. A children callback receives each automatically filtered group; do not filter or map the original groups again. Manually annotate group with Combobox.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
-export declare function GroupsList<Group extends GroupShape = GroupShape>({ disableStyle, children, className, style, ...props }: GroupsListProps<Group>): 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;
     /**
@@ -283,21 +283,21 @@ export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
     children?: ReactNode | ((item: Item, index: number) => ReactNode);
 } & StyleProps;
 /** Required items container inside Group. A children callback receives the filtered items belonging to that Group; do not repeat filtering yourself. Manually annotate item with Combobox.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
-export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, style, ...props }: ItemsListProps<Item>): 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 BaseCombobox.Group>, 'items' | 'className'> & {
     className?: string;
     /** Items for this group; pass group.items from GroupsList. Required even for a flat list. */
     items: readonly Item[];
 } & StyleProps;
 /** Required wrapper around ItemsList, even for a visually flat list. Pass group.items. A GroupLabel is optional; omit it when the group has an empty label. */
-export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, className, style, ...props }: GroupProps<Item>): import("react").JSX.Element;
+export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
 export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Item>, 'value' | 'className'> & {
     className?: string;
     /** Pass the item supplied by ItemsList so selection can match it by item.value. */
     value: Item;
 } & StyleProps;
 /** Required selectable row inside ItemsList. Pass the complete item object as value, with ItemText and ItemIndicator inside. Selection, highlighting, and keyboard behavior are built in. */
-export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, style, ...props }: ItemProps<Item>): 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 BaseCombobox.Popup>, 'className'> & {
     className?: string;
 } & Pick<BaseCombobox.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseCombobox.Positioner.Props, 'anchor' | 'positionMethod' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & {
@@ -312,32 +312,18 @@ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>,
 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;
 /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
 export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Behavior only: turns its single child element into the popup trigger. Adds no preset styling and has no disableStyle prop. Use an accessible button child; pass className to the child for its appearance. */
-export declare const PopupOpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxTriggerProps, "children" | "className" | "render"> & {
-    /** Additional classes forwarded to the trigger element. This handler has no preset styles. */
-    className?: string;
-    /** Single element to receive the behavior. Use a button with an accessible name. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Behavior only: turns its single child element into a removal control for the surrounding Chip. Adds no preset styling and has no disableStyle prop. Use an accessible button child. */
-export declare const ChipRemoveHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxChipRemoveProps, "children" | "className" | "render"> & {
-    /** Additional classes forwarded to the removal element. This handler has no preset styles. */
-    className?: string;
-    /** Single element to receive the behavior. Use a button with an accessible name. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
 export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     /** Preset adornment appearance. Does not add button behavior. @default 'normal' */
     variant?: "normal" | "emphasized";
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
-export declare const AddonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
+export declare const AddonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
     /** @default 1.5 */
-    strokeWidth?: LucideProps["strokeWidth"];
+    strokeWidth?: SVGIconProps["strokeWidth"];
 } & {
     /** One icon element to clone. Its own className is preserved. */
-    children: ReactElement<LucideProps>;
+    children: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
 export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "disabled"> & {
@@ -346,7 +332,7 @@ export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit
     /** Disables this button. Root disabled or readOnly also disables it automatically. */
     disabled?: ComponentProps<"button">["disabled"];
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root tone controls its preset validation border. */
+/** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root validation controls its preset validation border. */
 export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxInputGroupProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -384,36 +370,39 @@ export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<im
 export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
 export declare const EmptyText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Optional supporting text. Supply its content; it does not connect itself to the input with aria-describedby. Use matching id and Input aria-describedby when needed. */
+/** Optional supporting text. Supply its content; it describes the input to screen readers automatically. */
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Optional alert message. You control when it is rendered and its contents; tone does not validate or show this message automatically. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Optional success status. You control when it is rendered and its contents; tone does not show this message automatically. */
-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 decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
+export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
     /** @default 1.5 */
-    strokeWidth?: LucideProps["strokeWidth"];
+    strokeWidth?: SVGIconProps["strokeWidth"];
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
+export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
     /** @default 1.5 */
-    strokeWidth?: LucideProps["strokeWidth"];
+    strokeWidth?: SVGIconProps["strokeWidth"];
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Built-in decorative removal icon. Place inside ChipRemoveButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
+export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
     /** @default 1.5 */
-    strokeWidth?: LucideProps["strokeWidth"];
+    strokeWidth?: SVGIconProps["strokeWidth"];
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
     /** @default 1.5 */
-    strokeWidth?: LucideProps["strokeWidth"];
+    strokeWidth?: SVGIconProps["strokeWidth"];
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
-export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "children"> & Pick<import("@base-ui/react").ComboboxItemIndicatorProps, "keepMounted"> & {
+export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").ComboboxItemIndicatorProps, "keepMounted"> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */
-    children?: ReactElement<LucideProps>;
+    children?: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
 export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "className"> & {
@@ -422,6 +411,5 @@ export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omi
 /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
 export declare const LoadingText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
-export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export {};
-//# sourceMappingURL=index.d.ts.map