@central-ui/react 0.1.2 → 0.3.0

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

@@ -1,15 +1,14 @@
 import type { StyleProps } from '../../types/Style.ts';
-import { Input as BaseInput } from '@base-ui/react/input';
 import type { SVGIconProps } from '../../types/Icon.ts';
+import { Input as BaseInput } from '@base-ui/react/input';
+import type { ValidationProps } from '../../types/Validation.ts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
-export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> & {
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
+export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> & ValidationProps & {
     children?: ReactNode;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
 };
 /**
- * Keep configuration such as value, name, and validation tone on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
+ * Keep configuration such as value, name and validation on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
  *
  * @example Complete composition
  * import { Input } from '@central-ui/react'
@@ -46,40 +45,41 @@ export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' |
  *   )
  * }
  */
-export declare function Root({ children, id, tone, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
-export type InputProps = Omit<BaseInput.Props, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> | 'className' | 'render'> & {
+export declare function Root({ children, id, validation, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
+export type InputProps = Omit<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").InputProps, "form" | "className" | "defaultValue" | "id" | "name" | "type" | "disabled" | "value" | "render" | "onValueChange" | "required" | "readOnly"> & {
-    className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
+    children?: ValidationMessageChildren;
+};
+/** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
+export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
+export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps & {
     /** Choose the preset appearance; this does not add action behavior. */
     variant?: "normal" | "emphasized";
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export declare function AddonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+export declare function AddonIcon(props: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** 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>>;
+}): import("react").JSX.Element;
 export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
 export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export declare function AddonClearButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+export declare function AddonClearButtonIcon({ children, ...props }: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
-}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map
+}): import("react").JSX.Element;
+export {};

package/dist/components/input/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
-import { LoaderCircle, X } from 'lucide-react';
-import { useRef } from 'react';
+import { LoaderCircle, X } from "../../utils/icons.js";
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
- * Keep configuration such as value, name, and validation tone on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
+ * Keep configuration such as value, name and validation on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
  *
  * @example Complete composition
  * import { Input } from '@central-ui/react'
@@ -44,13 +43,14 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
+export function Root({ children, id, validation, value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
+    //1. Holding the value when nothing controls it from outside
+    const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
+    //2. Holding the ids of Description, Error and Success, so Input announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
+    //3. Sharing everything with the parts
     const generatedId = useId();
     const inputRef = useRef(null);
-    const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
     return (_jsx(InputContext.Provider, { value: {
             inputId: id ?? generatedId,
             disabled,
@@ -58,51 +58,35 @@ export function Root({ children, id, tone = 'neutral', value, defaultValue, onVa
             required,
             inputRef,
             value: value ?? valueInternalState,
-            setValueInternalState,
             defaultValue,
             controlled: value !== undefined,
+            setValueInternalState,
             onValueChange,
+            validation: readValidation(validation),
             coreProps,
-            connections,
-            setConnections,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            describedByIds,
+            setDescribedByIds,
+        }, children: children }));
 }
 export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
-    const inputRef = useRef(null);
+    const attributes = usePartAttributes();
+    // Resetting the internal value when the surrounding html form resets, since the input is always controlled by Root's value
     useEffect(() => {
-        const form = inputRef.current?.form;
+        const form = context.inputRef.current?.form;
         if (!form || context.controlled)
             return;
-        const reset = (event) => {
-            queueMicrotask(() => {
-                if (!event.defaultPrevented)
-                    context.setValueInternalState(context.defaultValue ?? '');
-            });
-        };
+        const reset = (event) => queueMicrotask(() => !event.defaultPrevented && context.setValueInternalState(context.defaultValue ?? ''));
         form.addEventListener('reset', reset);
         return () => form.removeEventListener('reset', reset);
-    }, [
-        context.controlled,
-        context.defaultValue,
-        context.setValueInternalState,
-        context.coreProps.form,
-    ]);
-    useEffect(() => {
-        context.inputRef.current = inputRef.current;
-        return () => {
-            context.inputRef.current = null;
-        };
-    }, [context.inputRef]);
-    return (_jsx(BaseInput, { ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
-            .filter(Boolean)
-            .join(' ') || undefined, ref: (element) => {
-            inputRef.current = element;
+    }, [context.controlled, context.defaultValue, context.setValueInternalState, context.coreProps.form]);
+    return (_jsx(BaseInput, { ...attributes, ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ref: (element) => {
+            // Sharing the element with Root's parts, like the clear button, while still forwarding the caller's ref
+            context.inputRef.current = element;
             if (typeof ref === 'function')
-                ref(inputRef.current);
+                ref(context.inputRef.current);
             else if (ref)
-                ref.current = inputRef.current;
+                ref.current = context.inputRef.current;
         }, onValueChange: (nextValue, details) => {
             context.onValueChange?.(nextValue, details);
             if (!details.isCanceled && !context.controlled)
@@ -111,76 +95,68 @@ export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, c
 });
 export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
     const attributes = usePartAttributes();
+    // Focusing the input when clicking anywhere in the group, like on its padding or an addon text
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
-    return (_jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "input-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "input-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "input-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, "data-component": "input-container", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
     const context = useInputContext();
-    const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
-    useEffect(() => {
-        context.setConnections((current) => ({ ...current, labelId }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            labelId: current.labelId === labelId ? undefined : current.labelId,
-        }));
-    }, [labelId, context.setConnections]);
-    return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "input-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "input-label", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "input-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "input-description", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "input-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
+export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+    const context = useInputContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "input-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 = useInputContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "input-success", children: content });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
+// 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, id: messageId, ref: ref, "data-component": "input-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 });
 });
 export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "input-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "input-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "input-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("span", { ...attributes, ...props, ref: ref, "data-component": "input-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export function AddonIcon({ disableStyle, children, className, ...props }) {
-    const attributes = usePartAttributes();
-    return cloneElement(children, {
-        ...attributes,
-        ...props,
-        'aria-hidden': true,
-        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
-        ...{
-            'data-component': 'input-addonicon',
-            'data-style-disabled': disableStyle ? '' : undefined,
-        },
-        className: twMerge(children.props.className, className),
-    });
+export function AddonIcon(props) {
+    return _jsx(ClonedIcon, { ...props, component: "input-addonicon" });
 }
 export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
     const context = useInputContext();
     const attributes = usePartAttributes();
-    return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "input-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "input-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "input-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "input-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
 export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, disabled, onClick, ...props }, ref) {
@@ -188,28 +164,29 @@ export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearBu
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, "aria-label": "Clear text", ...props, ref: ref, type: "button", disabled: disabled || context.disabled || context.readOnly, onClick: (event) => {
             onClick?.(event);
-            if (event.defaultPrevented)
-                return;
             const input = context.inputRef.current;
-            if (!input)
+            if (event.defaultPrevented || !input)
                 return;
+            // Emptying through the native value setter then dispatching an input event, so the change goes through the same path as typing, reaching onValueChange and the form
             Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(input, '');
             input.dispatchEvent(new Event('input', { bubbles: true }));
             input.focus();
         }, "data-component": "input-addonclearbutton", "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 AddonClearButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
+export function AddonClearButtonIcon({ children = _jsx(X, {}), ...props }) {
+    return _jsx(ClonedIcon, { ...props, component: "input-addonclearbuttonicon", children: children });
+}
+// The shared body of AddonIcon and AddonClearButtonIcon: decorates the supplied icon element, keeping its own classes and stroke
+function ClonedIcon({ disableStyle, children, className, component, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children, {
         ...attributes,
         ...props,
         'aria-hidden': true,
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
-        ...{
-            'data-component': 'input-addonclearbuttonicon',
-            'data-style-disabled': disableStyle ? '' : undefined,
-        },
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children.props.className, className),
     });
 }
@@ -220,30 +197,24 @@ function useInputContext() {
         throw new globalThis.Error('Parts must be inside Root');
     return context;
 }
+// The state attributes every part carries, so presets can style any part from Root's state
 function usePartAttributes() {
     const context = useInputContext();
-    const tone = useToneContext();
     return {
         'data-disabled': context.disabled ? '' : undefined,
         'data-readonly': context.readOnly ? '' : undefined,
         'data-required': context.required ? '' : undefined,
-        'data-tone': tone,
+        ...validationAttributes(context.validation),
     };
 }
-function useMessageId(id) {
-    const generatedId = useId();
-    const messageId = id ?? generatedId;
+// Registering a part's id in Input's aria-describedby while the part is mounted
+function useDescribedById(id) {
     const context = useInputContext();
+    const generatedId = useId();
+    const describedById = id ?? generatedId;
     useEffect(() => {
-        context.setConnections((current) => ({
-            ...current,
-            descriptionIds: [...current.descriptionIds, messageId],
-        }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
-        }));
-    }, [messageId, context.setConnections]);
-    return messageId;
+        context.setDescribedByIds((current) => [...current, describedById]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== describedById));
+    }, [describedById, context.setDescribedByIds]);
+    return describedById;
 }
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,114 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Area as RechartsArea, ComposedChart as RechartsComposedChart } from 'recharts';
+import type { LineProps as RechartsLineProps, TooltipProps as RechartsTooltipProps, XAxisProps as RechartsXAxisProps, YAxisProps as RechartsYAxisProps } from 'recharts';
+import type { StyleProps } from '../../types/Style.ts';
+/** Every record needs a unique `label` (the category) and a numeric `value` (the point height). Extra fields are kept for the tooltip. */
+type Datum = {
+    label: string;
+    value: number;
+};
+export type RootProps<Data extends Datum = Datum> = Pick<ComponentProps<typeof RechartsComposedChart>, 'accessibilityLayer' | 'desc'> & {
+    /** Unique labels are equally spaced categories, including when they contain dates. */
+    data: readonly Data[];
+    'aria-label': string;
+    children: ReactNode;
+    /**
+     * Converts a record's `label` into display text.
+     * Used by the X axis ticks and the tooltip label, so both always read the same.
+     * Use it for dates (e.g. `'2026-10-12'` → `'October 12, 2026'`) or to shorten long categories.
+     * @default (label) => label
+     */
+    labelToString?: (label: string) => string;
+    /**
+     * Converts a record's `value` into display text.
+     * Used by the Y axis ticks and the tooltip value, so both always read the same.
+     * Use it for currency, percentages, or units (e.g. `1240` → `'$1,240'`).
+     * @default (value) => value.toLocaleString()
+     */
+    valueToString?: (value: number) => string;
+    /**
+     * Whether the Y axis may place ticks at fractional values.
+     * Keep it `false` for counts (orders, visitors) so the axis never shows `0.5 orders`.
+     * Set it to `true` for continuous measures where fractions are meaningful, such as small currency amounts or ratings.
+     * @default false
+     */
+    allowDecimals?: boolean;
+    /**
+     * How the line, and the shaded area under it, bend between points.
+     * - `'monotone'`: smooth, but never overshoots a real value. The usual choice for trends like revenue or traffic.
+     * - `'linear'`: straight segments with sharp corners. Use it when each point is a distinct measurement and smoothing would imply values in between.
+     * - `'step'`: flat steps that jump at each point. Use it for values that hold until they change, such as prices, plans, or inventory levels.
+     * @default 'monotone'
+     */
+    curve?: 'monotone' | 'linear' | 'step';
+};
+/** Provides the chart data, formatting, and accessibility settings to its parts. Renders no element. */
+export declare function Root<Data extends Datum>({ children, labelToString, valueToString, allowDecimals, curve, ...chart }: RootProps<Data>): import("react").JSX.Element;
+export type ContainerProps = Pick<ComponentProps<typeof RechartsComposedChart>, 'children' | 'height' | 'className' | 'style' | 'id' | 'margin' | 'ref' | 'tabIndex'> & {
+    /**
+     * The vertical line that follows the pointer across the chart.
+     * Shown by default, with or without a Tooltip, so readers can line a point up with its axis label.
+     * Pass `false` for static charts where hover feedback adds noise. Style it through `data-component="linechart-hoverguide"`.
+     * @default true
+     */
+    hoverGuide?: LineSwitch;
+};
+/** Recharts supplies its own responsive container, so no extra wrapper is needed. */
+export declare function Container({ height, className, style, children, hoverGuide, ...props }: ContainerProps): import("react").JSX.Element;
+/** On/off only: style it through its data-component in a preset, so each export keeps one className. */
+type LineSwitch = boolean;
+export type XAxisProps = Pick<RechartsXAxisProps, 'hide' | 'tickSize'> & {
+    /** Classes for the tick labels, e.g. `fill-neutral-500`. Keep the font size at 12px: Recharts measures labels at that size to skip overlapping ones. */
+    className?: string;
+    /** Space between the labels and the plot area, in pixels. */
+    labelGap?: number;
+    /** The line along the axis. Hidden by default. */
+    axisLine?: LineSwitch;
+    /** The small marks at each tick. Hidden by default. */
+    tickLine?: LineSwitch;
+};
+export declare function XAxis({ className, labelGap, axisLine, tickLine, ...props }: XAxisProps): import("react").JSX.Element;
+export type YAxisProps = Pick<RechartsYAxisProps, 'hide' | 'tickSize' | 'width'> & {
+    /** Classes for the tick labels, e.g. `fill-neutral-500`. Keep the font size at 12px: Recharts measures labels at that size to skip overlapping ones. */
+    className?: string;
+    /** Space between the labels and the plot area, in pixels. */
+    labelGap?: number;
+    /** The line along the axis. Hidden by default. */
+    axisLine?: LineSwitch;
+    /** The small marks at each tick. Hidden by default. */
+    tickLine?: LineSwitch;
+};
+export declare function YAxis({ className, labelGap, axisLine, tickLine, ...props }: YAxisProps): import("react").JSX.Element;
+export type GridProps = {
+    /** Classes for every grid line, e.g. `stroke-neutral-200 [stroke-dasharray:4_4]`. */
+    className?: string;
+};
+/** Horizontal lines only, one per Y value tick. */
+export declare function Grid({ className }: GridProps): import("react").JSX.Element;
+export type LineProps = Pick<RechartsLineProps, 'hide' | 'name'> & {
+    /** Classes for the line, e.g. `stroke-sky-500`. It is 2px wide by default; override with `stroke-3`. */
+    className?: string;
+    /** The dot on the hovered point. Pass `false` to hide it; style it through `data-component="linechart-activedot"`. */
+    activeDot?: LineSwitch;
+};
+export declare function Line({ className, activeDot, ...props }: LineProps): import("react").JSX.Element;
+export type AreaProps = Pick<ComponentProps<typeof RechartsArea>, 'hide'> & {
+    /** Classes for the shading, e.g. `fill-sky-500/10`. */
+    className?: string;
+};
+/** Optional shading under the line. Render it before Line so the line draws on top. */
+export declare function Area({ className, ...props }: AreaProps): import("react").JSX.Element;
+export type TooltipProps<Data extends Datum = Datum> = Pick<RechartsTooltipProps<number, string>, 'offset' | 'allowEscapeViewBox' | 'portal'> & {
+    /** Receives the hovered record and returns the popup. */
+    children: (datum: Data) => ReactNode;
+};
+/** Renders no element: hands its popup to the Container. For extra fields, specify the record type: Tooltip<(typeof data)[number]>. */
+export declare function Tooltip<Data extends Datum = Datum>({ children, offset, allowEscapeViewBox, portal, }: TooltipProps<Data>): null;
+export declare function TooltipPopup({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function TooltipTitle({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+/** Shows the hovered record's label, formatted by `labelToString` on Root. */
+export declare function TooltipLabel({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+/** Shows the hovered record's value, formatted by `valueToString` on Root. */
+export declare function TooltipValue({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function TooltipColorIndicator({ disableStyle, className, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+export {};