@central-ui/react 0.1.1 → 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/README.md

@@ -23,7 +23,7 @@ With Tailwind CSS v4.2.1 or later within v4, import the optional raw preset in y
 @import '@central-ui/react/presets/shopify-polaris-legacy.css';
 ```
 
-For the new Polaris appearance, use `@central-ui/react/presets/shopify-polaris.css` instead. It currently includes the global foundation and styles for Button, Input, NumberInput, Textarea, PasswordInput, OTPInput, Autocomplete, Combobox, Select, Menu, DatePicker, Checkbox, Radio, RatingInput, Slider, Switch, Toggle, FileUpload, Stepper, Splitter, Tabs, Accordion, Tooltip, Dialog, Drawer, Banner, Page, Badge, Chip, TextLink, Empty, Spinner, Popover, Table, Card, Skeleton, Avatar, Metric, Divider, Breadcrumb, and Form; other components will be added separately. The demo layout's style preset selector switches between the two presets on the same routes.
+For the new Polaris appearance, use `@central-ui/react/presets/shopify-polaris.css` instead. It currently includes the global foundation and styles for Button, Input, NumberInput, Textarea, PasswordInput, OTPInput, Autocomplete, Combobox, Select, Menu, DatePicker, Checkbox, Radio, RatingInput, Slider, Switch, Toggle, FileUpload, Stepper, Splitter, Tabs, Accordion, Tooltip, Dialog, Drawer, Banner, Page, Badge, Chip, TextLink, Empty, Spinner, Popover, Table, Card, Skeleton, Avatar, Metric, Divider, Breadcrumb, Form, and Toast; other components will be added separately. The demo layout's style preset selector switches between the two presets on the same routes.
 
 The preset includes global fonts, scrollbar styles, and animations. It sets the font family to Inter; load that font in your application if desired. Component styles are organized in internal files imported by the preset; those files are not public package imports.
 

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

@@ -1,7 +1,8 @@
 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 { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * 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.
  *
@@ -58,16 +59,16 @@ 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<LucideProps & {
+export declare const OpenerIndicator: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
-    children?: ReactElement<LucideProps>;
+    children?: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 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.
  *
@@ -58,20 +59,22 @@ export function Root({ children, ...props }) {
     // Native Root renders a div; the fragment preserves our wrapper-free Root contract.
     return (_jsx(BaseAccordion.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }));
 }
-export const List = forwardRef(function List({ disableStyle, className, ...props }, ref) {
+export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "accordion-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Item = forwardRef(function Item({ disableStyle, className, ...props }, ref) {
+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 = 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 = forwardRef(function OpenerTitle({ disableStyle, className, ...props }, ref) {
+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 }));
 });
 /** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
-export const OpenerIndicator = forwardRef(function OpenerIndicator({ disableStyle, children, className, ...props }, ref) {
+export const OpenerIndicator = /* @__PURE__ */ forwardRef(function OpenerIndicator({ disableStyle, children, className, ...props }, ref) {
     const open = useContext(ItemContext);
     return cloneElement(children ?? _jsx(ChevronDown, {}), {
         ...props,
@@ -85,8 +88,8 @@ export const OpenerIndicator = forwardRef(function OpenerIndicator({ disableStyl
         className: twMerge(children?.props.className, className),
     });
 });
-export const Content = forwardRef(function Content({ disableStyle, className, ...props }, ref) {
+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 }));
 });
-const ItemContext = createContext(false);
-//# sourceMappingURL=index.js.map
+// Sharing whether the item is open, so OpenerIndicator can follow it
+const ItemContext = /* @__PURE__ */ createContext(false);

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

@@ -1,6 +1,8 @@
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import type { LucideProps } from 'lucide-react';
+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,24 +278,18 @@ 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' */
     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"];
 } & {
     /** Supply your decorative icon; its own classes are 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"> & {
@@ -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,18 +328,21 @@ 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<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+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. */
-export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & 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<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<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"> & {
     className?: string;
@@ -360,6 +350,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

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,27 +178,30 @@ 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 = 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": "autocomplete-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
-export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
-    const { inputId } = useAutocompleteContext();
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+    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 = 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;
 /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
-export const ScrollArea = forwardRef(function ScrollArea({ disableStyle, className, style, ...props }, ref) {
+export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, style, ...props }, ref) {
     return (_jsx(BaseAutocomplete.List, { ...props, ref: ref, style: style, "data-component": "autocomplete-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** 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 Autocomplete.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
@@ -235,19 +231,15 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     : { ...baseStyle, ...style } }) }) }));
 }
 /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
-export const Arrow = forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     return (_jsxs(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 = 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 = forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
+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 }));
 });
 /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
-export const AddonIcon = forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
+export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
     const attributes = usePartAttributes();
     return cloneElement(children, {
         ...attributes,
@@ -261,94 +253,110 @@ export const AddonIcon = forwardRef(function AddonIcon({ disableStyle, children,
     });
 });
 /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
-export const AddonButton = forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
     const context = useAutocompleteContext();
     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. */
-export const InputGroup = 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 }));
+/** 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 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 = forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
+export const AddonOpenButton = /* @__PURE__ */ forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Trigger, { ...props, ref: ref, "data-component": "autocomplete-addonopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Clears the input automatically; no click handler needed. Supply AddonClearButtonIcon and an accessible label. */
-export const AddonClearButton = forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
+export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Clear, { ...props, ref: ref, "data-component": "autocomplete-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
-export const GroupLabel = forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
+export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.GroupLabel, { ...props, ref: ref, "data-component": "autocomplete-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
-export const Empty = forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
+export const Empty = /* @__PURE__ */ forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Empty, { ...props, ref: ref, "data-component": "autocomplete-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
-export const Separator = forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Separator, { ...props, ref: ref, "data-component": "autocomplete-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
-export const ItemText = forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Optional decorative text inside Addon. Supply the text as children. */
-export const AddonText = forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
-export const EmptyText = forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
+export const EmptyText = /* @__PURE__ */ forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
     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 = 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 = 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 = 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 = 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 = 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 = 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 = forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
+export const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Status, { ...props, ref: ref, "data-component": "autocomplete-loading", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
-export const LoadingText = forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
+export const LoadingText = /* @__PURE__ */ forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
     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 = 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 = createContext(null);
+const AutocompleteContext = 
+/* @__PURE__ */ createContext(null);
 function useAutocompleteContext() {
     const context = useContext(AutocompleteContext);
     if (!context)
@@ -356,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