@central-ui/react 0.1.2 → 0.2.0

package/LICENSE

@@ -19,3 +19,52 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+The built-in icons in src/utils/icons.tsx are copied from lucide-react
+(https://lucide.dev) under the following license:
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,4 +1,5 @@
 import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import type { ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
@@ -58,9 +59,10 @@ export declare const List: import("react").ForwardRefExoticComponent<Omit<import
 export declare const Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionItemProps, "className" | "render"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionTriggerProps, "className"> & {
+/** Expands or collapses its Item. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes (like data-panel-open) but none of this part's styling. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionTriggerProps, "className" | "render"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const OpenerTitle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
 export declare const OpenerIndicator: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
@@ -70,4 +72,3 @@ export declare const OpenerIndicator: import("react").ForwardRefExoticComponent<
 export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionPanelProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { asChildRendering } from "../../utils/asChild.js";
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import { cloneElement, createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown } from "../../utils/icons.js";
 /**
  * Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenerTitle and let OpenerIndicator reflect expansion.
  *
@@ -64,8 +65,10 @@ export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, cla
 export const Item = /* @__PURE__ */ forwardRef(function Item({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAccordion.Item, { ...props, ref: ref, "data-component": "accordion-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (itemProps, state) => (_jsx(ItemContext.Provider, { value: state.open, children: _jsx("div", { ...itemProps }) })) }));
 });
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseAccordion.Header, { children: _jsx(BaseAccordion.Trigger, { ...props, ref: ref, "data-component": "accordion-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
+/** Expands or collapses its Item. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes (like data-panel-open) but none of this part's styling. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'accordion-openbutton', disableStyle });
+    return (_jsx(BaseAccordion.Header, { children: _jsx(BaseAccordion.Trigger, { ...props, ref: ref, ...rendering }) }));
 });
 export const OpenerTitle = /* @__PURE__ */ forwardRef(function OpenerTitle({ disableStyle, className, ...props }, ref) {
     return (_jsx("span", { ...props, ref: ref, "data-component": "accordion-openertitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -88,5 +91,5 @@ export const OpenerIndicator = /* @__PURE__ */ forwardRef(function OpenerIndicat
 export const Content = /* @__PURE__ */ forwardRef(function Content({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, "data-component": "accordion-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
+// Sharing whether the item is open, so OpenerIndicator can follow it
 const ItemContext = /* @__PURE__ */ createContext(false);
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,8 @@
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 type StyleProps = {
     /**
      * Disables preset styling for this element.
@@ -48,8 +50,8 @@ export type RootProps<T extends readonly GroupShape[]> = Omit<BaseAutocomplete.R
      * Preserve the grouped structure; return undefined to restore built-in filtering.
      */
     filteredItems?: readonly GroupType<T>[];
-    /** Changes the validation appearance; does not validate or show messages. @default 'neutral' */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Pick a city']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral field. */
+    validation?: Validation;
 };
 /**
  * Suggests cities while allowing users to keep their own text. Use Combobox instead
@@ -199,15 +201,6 @@ export type RootProps<T extends readonly GroupShape[]> = Omit<BaseAutocomplete.R
  *   )}
  * </Autocomplete.Loading>
  *
- * @example Use a custom trigger button
- * // Replace the AddonOpenButton in Addon; do not add a second opener beside it.
- * // PopupOpenHandler adds behavior only. Its child owns the appearance.
- * ;<Autocomplete.PopupOpenHandler>
- *   <button type="button" className="rounded-lg px-2">
- *     Show cities
- *   </button>
- * </Autocomplete.PopupOpenHandler>
- *
  * @example Replace styling on one part
  * // All other parts keep their imported preset styles.
  * ;<Autocomplete.AddonOpenButton
@@ -218,7 +211,7 @@ export type RootProps<T extends readonly GroupShape[]> = Omit<BaseAutocomplete.R
  *   <Autocomplete.AddonOpenButtonIcon />
  * </Autocomplete.AddonOpenButton>
  */
-export declare function Root<T extends readonly GroupShape[]>({ children, id, tone, open, defaultOpen, onOpenChange, ...props }: RootProps<T>): import("react").JSX.Element;
+export declare function Root<T extends readonly GroupShape[]>({ children, id, validation, open, defaultOpen, onOpenChange, ...props }: RootProps<T>): 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. */
@@ -285,12 +278,6 @@ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Popu
 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").AutocompleteTriggerProps, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply the button that should open the popup; no additional click handler needed. */
-    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> & {
     /** Use emphasized for a shaded addon. Does not add interaction. @default 'normal' */
@@ -311,7 +298,7 @@ export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit
     /** Root disabled or readOnly already disables this button; use for an additional condition. */
     disabled?: ComponentProps<"button">["disabled"];
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root tone changes appearance only. */
+/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root validation controls its preset validation border. */
 export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputGroupProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -341,12 +328,15 @@ 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, announced with the input through aria-describedby 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<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
@@ -362,4 +352,3 @@ export declare const LoadingText: import("react").ForwardRefExoticComponent<Omit
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
 export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import { ChevronsUpDown, LoaderCircle, X } from 'lucide-react';
-import { cloneElement, createContext, forwardRef, useContext, useId, useState, } from 'react';
+import { ChevronsUpDown, LoaderCircle, X } from "../../utils/icons.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";
 /**
  * Suggests cities while allowing users to keep their own text. Use Combobox instead
  * when the user must choose an existing item. Input handles filtering and completion;
@@ -152,15 +152,6 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )}
  * </Autocomplete.Loading>
  *
- * @example Use a custom trigger button
- * // Replace the AddonOpenButton in Addon; do not add a second opener beside it.
- * // PopupOpenHandler adds behavior only. Its child owns the appearance.
- * ;<Autocomplete.PopupOpenHandler>
- *   <button type="button" className="rounded-lg px-2">
- *     Show cities
- *   </button>
- * </Autocomplete.PopupOpenHandler>
- *
  * @example Replace styling on one part
  * // All other parts keep their imported preset styles.
  * ;<Autocomplete.AddonOpenButton
@@ -171,10 +162,12 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   <Autocomplete.AddonOpenButtonIcon />
  * </Autocomplete.AddonOpenButton>
  */
-export function Root({ children, id, tone = 'neutral', open, defaultOpen = false, onOpenChange, ...props }) {
+export function Root({ children, id, validation, open, defaultOpen = false, onOpenChange, ...props }) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [openInternalState, setOpenInternalState] = useState(defaultOpen);
+    // Holding the ids of Description, Error and Success, so Input announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
     return (_jsx(BaseAutocomplete.Root, { ...props, id: inputId, open: open, defaultOpen: defaultOpen, onOpenChange: (nextOpen, details) => {
             onOpenChange?.(nextOpen, details);
             if (!details.isCanceled)
@@ -185,7 +178,10 @@ export function Root({ children, id, tone = 'neutral', open, defaultOpen = false
                 disabled: props.disabled ?? false,
                 readOnly: props.readOnly ?? false,
                 required: props.required ?? false,
-            }, children: _jsx(ToneProvider, { value: tone, children: children }) }) }));
+                validation: readValidation(validation),
+                describedByIds,
+                setDescribedByIds,
+            }, children: children }) }));
 }
 /** Use for the standard stacked layout, or omit when supplying your own layout. */
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
@@ -193,14 +189,14 @@ export const Container = /* @__PURE__ */ forwardRef(function Container({ disable
 });
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
 export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
-    const { inputId } = useAutocompleteContext();
+    const context = useAutocompleteContext();
     const attributes = usePartAttributes();
-    return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: inputId, "data-component": "autocomplete-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "autocomplete-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Let the input handle suggestion filtering and completion. It accepts free text; choosing a suggestion is optional. Label association is automatic. */
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, ...props }, ref) {
-    const { inputId } = useAutocompleteContext();
-    return (_jsx(BaseAutocomplete.Input, { ...props, ref: ref, id: inputId, "data-component": "autocomplete-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+    const context = useAutocompleteContext();
+    return (_jsx(BaseAutocomplete.Input, { "aria-invalid": context.validation.state === 'error' || undefined, ...props, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ref: ref, id: context.inputId, "data-component": "autocomplete-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Use only for an additional custom display of the current input text. Do not use it to build the editable input; Input already handles that. */
 export const Value = BaseAutocomplete.Value;
@@ -238,10 +234,6 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
 export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     return (_jsxs(BaseAutocomplete.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "autocomplete-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": "autocomplete-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": "autocomplete-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": "autocomplete-arrow-3" })] }));
 });
-/** 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 const PopupOpenHandler = /* @__PURE__ */ forwardRef(function PopupOpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseAutocomplete.Trigger, { ...props, ref: ref, render: children });
-});
 /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
 export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-variant": variant, "data-component": "autocomplete-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -266,10 +258,10 @@ export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ dis
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "autocomplete-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root tone changes appearance only. */
+/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root validation controls its preset validation border. */
 export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, ...props }, ref) {
-    const tone = useToneContext();
-    return (_jsx(BaseAutocomplete.InputGroup, { "data-tone": tone, ...props, ref: ref, "data-component": "autocomplete-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useAutocompleteContext();
+    return (_jsx(BaseAutocomplete.InputGroup, { ...validationAttributes(context.validation), ...props, ref: ref, "data-component": "autocomplete-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
 export const AddonOpenButton = /* @__PURE__ */ forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
@@ -306,35 +298,50 @@ export const EmptyText = /* @__PURE__ */ forwardRef(function EmptyText({ disable
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-emptytext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** 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. */
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+/** Optional supporting text, announced with the input through aria-describedby automatically. */
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "autocomplete-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** Optional alert message. You control when it is rendered and its contents; tone does not validate or show this message automatically. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ disableStyle, className, ...props }, ref) {
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "autocomplete-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 = useAutocompleteContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "autocomplete-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 = useAutocompleteContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "autocomplete-success", children: content });
 });
-/** Optional success status. You control when it is rendered and its contents; tone does not show this message automatically. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ disableStyle, className, ...props }, ref) {
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the input
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "autocomplete-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
-    const attributes = usePartAttributes();
-    return (_jsx(ChevronsUpDown, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonopenbuttonicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
+    return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "autocomplete-addonopenbuttonicon" });
 });
 /** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
-    const attributes = usePartAttributes();
-    return (_jsx(X, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonclearbuttonicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
+    return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "autocomplete-addonclearbuttonicon" });
 });
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon(props, ref) {
+    return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "autocomplete-addonloadingicon" });
+});
+// The shared body of the built-in decorative icons above, which only differ by their icon and component name
+const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth = 1.5, icon: Icon, component, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx(Icon, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** 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 const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
@@ -345,8 +352,8 @@ export const LoadingText = /* @__PURE__ */ forwardRef(function LoadingText({ dis
     return (_jsx("div", { ...props, ref: ref, "data-component": "autocomplete-loadingtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
-export const LoadingIcon = /* @__PURE__ */ forwardRef(function LoadingIcon({ disableStyle, className, ...props }, ref) {
-    return (_jsx(LoaderCircle, { "aria-hidden": true, strokeWidth: undefined, ...props, ref: ref, "data-component": "autocomplete-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const LoadingIcon = /* @__PURE__ */ forwardRef(function LoadingIcon({ disableStyle, className, strokeWidth = 2, ...props }, ref) {
+    return (_jsx(LoaderCircle, { "aria-hidden": true, strokeWidth: strokeWidth, ...props, ref: ref, "data-component": "autocomplete-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 const AutocompleteContext = 
 /* @__PURE__ */ createContext(null);
@@ -357,14 +364,23 @@ function useAutocompleteContext() {
     return context;
 }
 function usePartAttributes() {
-    const { open, disabled, readOnly, required } = useAutocompleteContext();
-    const tone = useToneContext();
+    const context = useAutocompleteContext();
     return {
-        'data-open': open ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined,
-        'data-readonly': readOnly ? '' : undefined,
-        'data-required': required ? '' : undefined,
-        'data-tone': tone,
+        'data-open': context.open ? '' : undefined,
+        'data-disabled': context.disabled ? '' : undefined,
+        'data-readonly': context.readOnly ? '' : undefined,
+        'data-required': context.required ? '' : undefined,
+        ...validationAttributes(context.validation),
     };
 }
-//# sourceMappingURL=index.js.map
+// Registering a part's id in Input's aria-describedby while the part is mounted
+function useDescribedById(id) {
+    const context = useAutocompleteContext();
+    const generatedId = useId();
+    const describedById = id ?? generatedId;
+    useEffect(() => {
+        context.setDescribedByIds((current) => [...current, describedById]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== describedById));
+    }, [describedById, context.setDescribedByIds]);
+    return describedById;
+}

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

@@ -37,7 +37,7 @@ export declare const List: import("react").ForwardRefExoticComponent<Omit<import
 export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarImageProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-export declare const FallbackNameInitials: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "children" | "className"> & {
+export declare const FallbackNameInitials: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "className" | "children"> & {
     className?: string;
     /** Choose the initials background. The name-to-initials conversion is automatic. */
     color: string;
@@ -45,4 +45,3 @@ export declare const FallbackNameInitials: import("react").ForwardRefExoticCompo
     children: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const FallbackImage: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Pick<import("@base-ui/react").AvatarFallbackProps, "delay"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.js

@@ -58,4 +58,3 @@ export const FallbackImage = /* @__PURE__ */ forwardRef(function FallbackImage({
 });
 const SizeContext = 
 /* @__PURE__ */ createContext('medium');
-//# sourceMappingURL=index.js.map

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

@@ -26,4 +26,3 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -23,9 +23,10 @@ export default function Badge({ disableStyle, className, tone, ...props }) {
 }
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function Icon({ disableStyle, children, className, ...props }) {
+    // cloneElement keeps the icon's own props, so only the added ones are passed
     return cloneElement(children, {
-        ...children.props,
         ...props,
+        // Spread from an object so the data-* keys pass the element props' excess property check
         ...{
             'data-component': 'badge-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -33,4 +34,3 @@ export function Icon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-//# sourceMappingURL=index.js.map

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

@@ -57,6 +57,7 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     'data-tone'?: BannerTone;
 }, string | import("react").JSXElementConstructor<any>>;
 export declare function Title({ disableStyle, className, ...props }: ComponentProps<'h2'> & StyleProps): import("react").JSX.Element;
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Dismiss". */
 export declare function CloseButton({ disableStyle, type, className, onClick, ...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'> & {
@@ -68,4 +69,3 @@ export declare function CloseButtonIcon({ disableStyle, children, className, ...
 export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/banner/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircleAlert, CircleCheck, Info, Text, TriangleAlert, X, } from 'lucide-react';
+import { CircleAlert, CircleCheck, Info, Text, TriangleAlert, X, } from "../../utils/icons.js";
 import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 const BannerContext = /* @__PURE__ */ createContext({
@@ -48,32 +48,31 @@ export function Root({ tone = 'neutral', onClose, children, }) {
     return (_jsx(BannerContext.Provider, { value: { tone, onClose }, children: children }));
 }
 export function Surface({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Header({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-header", "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 Icon({ disableStyle, children, className, ...props }) {
-    const { tone } = useContext(BannerContext);
+    const context = useContext(BannerContext);
     const icon = children ??
         (() => {
-            if (tone === 'danger')
+            if (context.tone === 'danger')
                 return _jsx(CircleAlert, {});
-            if (tone === 'informative')
+            if (context.tone === 'informative')
                 return _jsx(Info, {});
-            if (tone === 'success')
+            if (context.tone === 'success')
                 return _jsx(CircleCheck, {});
-            if (tone === 'caution')
+            if (context.tone === 'caution')
                 return _jsx(TriangleAlert, {});
             return _jsx(Text, {});
         })();
     return cloneElement(icon, {
-        ...icon.props,
         ...props,
-        'data-tone': tone,
+        'data-tone': context.tone,
         ...{
             'data-component': 'banner-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -82,24 +81,24 @@ export function Icon({ disableStyle, children, className, ...props }) {
     });
 }
 export function Title({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("h2", { ...props, "data-tone": tone, "data-component": "banner-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("h2", { ...props, "data-tone": context.tone, "data-component": "banner-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Dismiss". */
 export function CloseButton({ disableStyle, type = 'button', className, onClick, ...props }) {
-    const { tone, onClose } = useContext(BannerContext);
-    return (_jsx("button", { ...props, type: type, "data-tone": tone, onClick: (event) => {
+    const context = useContext(BannerContext);
+    return (_jsx("button", { ...props, type: type, "data-tone": context.tone, onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented)
-                onClose?.();
+                context.onClose?.();
         }, "data-component": "banner-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 }) {
-    const { tone } = useContext(BannerContext);
+    const context = useContext(BannerContext);
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        'data-tone': tone,
+        'data-tone': context.tone,
         ...{
             'data-component': 'banner-closebuttonicon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -109,11 +108,10 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
     });
 }
 export function Body({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Description({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-//# sourceMappingURL=index.js.map