@central-ui/react 0.1.1 → 0.2.0

package/dist/components/numberinput/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NumberField as BaseNumber } from '@base-ui/react/number-field';
-import { ChevronUp, ChevronDown, LoaderCircle } from 'lucide-react';
+import { ChevronUp, ChevronDown, LoaderCircle } from "../../utils/icons.js";
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.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";
 /**
- * Configure value, bounds, and step on Root. IncrementButton and DecrementButton update the number automatically; no custom arithmetic handlers needed. Use ButtonsList to organize them beside Input, or behavior-only handlers for custom buttons.
+ * Configure value, bounds, and step on Root. IncrementButton and DecrementButton update the number automatically; no custom arithmetic handlers needed. Use ButtonsList to organize them beside Input.
  *
  * @example Complete composition
  * import { NumberInput } from '@central-ui/react'
@@ -41,68 +41,70 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </NumberInput.Root>
  */
-export const Root = forwardRef(function Root({ id, tone = 'neutral', children, ...props }, ref) {
+export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, children, ...props }, ref) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
-    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseNumber.Root, { ...props, id: inputId, ref: ref, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: {
-                    ...state,
-                    inputId,
-                    connections,
-                    setConnections,
-                    min: props.min,
-                    max: props.max,
-                }, children: _jsx("div", { ...rootProps }) })), children: children }) }));
-});
-export const Input = forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+    // Holding the ids of Description, Error and Success, so the control announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
+    return (_jsx(BaseNumber.Root, { ...props, id: inputId, ref: ref, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: {
+                ...state,
+                inputId,
+                describedByIds,
+                setDescribedByIds,
+                min: props.min,
+                max: props.max,
+                validation: readValidation(validation),
+            }, children: _jsx("div", { ...rootProps }) })), children: children }));
+});
+export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
-    return (_jsx(BaseNumber.Input, { ...props, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
+    return (_jsx(BaseNumber.Input, { ...props, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "numberinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-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 = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...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": "numberinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-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: "numberinput-error", children: content });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+/** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
+export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+    const context = useInputContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "numberinput-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the number input
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-export const Addon = forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+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": "numberinput-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-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": "numberinput-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
@@ -121,38 +123,34 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-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 = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "numberinput-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export const AddonLoadingIcon = forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+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": "numberinput-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const InputGroup = forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
     const attributes = usePartAttributes();
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
     return (_jsx(BaseNumber.Group, { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "numberinput-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const ButtonsList = forwardRef(function ButtonsList({ disableStyle, className, ...props }, ref) {
+export const ButtonsList = /* @__PURE__ */ forwardRef(function ButtonsList({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-buttonslist", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Formats the current number automatically. Omit children for the default display; customize only when the usual number formatting is insufficient. */
-export const ValueText = forwardRef(function ValueText({ disableStyle, className, ...props }, ref) {
+export const ValueText = /* @__PURE__ */ forwardRef(function ValueText({ disableStyle, className, ...props }, ref) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "numberinput-valuetext", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: context.inputValue }));
 });
-export const IncrementButton = forwardRef(function IncrementButton({ disableStyle, className, ...props }, ref) {
+export const IncrementButton = /* @__PURE__ */ forwardRef(function IncrementButton({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseNumber.Increment, { ...props, ref: ref, "data-component": "numberinput-incrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const IncrementHandler = forwardRef(function IncrementHandler({ children, ...props }, ref) {
-    return _jsx(BaseNumber.Increment, { ...props, ref: ref, render: children });
-});
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {}), className, ...props }) {
     const context = useInputContext();
@@ -175,13 +173,9 @@ export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {
         className: twMerge(children.props.className, className),
     });
 }
-export const DecrementButton = forwardRef(function DecrementButton({ disableStyle, className, ...props }, ref) {
+export const DecrementButton = /* @__PURE__ */ forwardRef(function DecrementButton({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseNumber.Decrement, { ...props, ref: ref, "data-component": "numberinput-decrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const DecrementHandler = forwardRef(function DecrementHandler({ children, ...props }, ref) {
-    return _jsx(BaseNumber.Decrement, { ...props, ref: ref, render: children });
-});
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function DecrementButtonIcon({ disableStyle, children = _jsx(ChevronDown, {}), className, ...props }) {
     const context = useInputContext();
@@ -204,7 +198,7 @@ export function DecrementButtonIcon({ disableStyle, children = _jsx(ChevronDown,
         className: twMerge(children.props.className, className),
     });
 }
-const InputContext = createContext(null);
+const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);
     if (!context)
@@ -213,28 +207,21 @@ function useInputContext() {
 }
 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),
     };
 }
+// Registering a message part's id in the control's aria-describedby while the part is mounted
 function useMessageId(id) {
+    const context = useInputContext();
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const context = useInputContext();
     useEffect(() => {
-        context.setConnections((current) => ({
-            ...current,
-            descriptionIds: [...current.descriptionIds, messageId],
-        }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
-        }));
-    }, [messageId, context.setConnections]);
+        context.setDescribedByIds((current) => [...current, messageId]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== messageId));
+    }, [messageId, context.setDescribedByIds]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,10 +1,12 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { OTPField as BaseOtp } from '@base-ui/react/otp-field';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps = Omit<BaseOtp.Root.Props, 'className' | 'render'> & {
     className?: string;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral field. */
+    validation?: Validation;
 };
 /**
  * Configure length and value on Root. Render an Input for each callback invocation from List; slot order is managed automatically. Keyboard navigation and paste distribution are built in; do not split or synchronize the code yourself.
@@ -41,17 +43,20 @@ export type RootProps = Omit<BaseOtp.Root.Props, 'className' | 'render'> & {
  * </OtpInput.Root>
  */
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").OTPFieldInputProps, "form" | "className" | "defaultValue" | "id" | "name" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").OTPFieldInputProps, "className" | "id" | "name" | "form" | "defaultValue" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 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>>;
+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>>;
 /** Calls children for each code slot. Render Input inside each callback; the component handles slot ordering and keyboard/paste behavior. */
 export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
     /** Render an Input for each slot. Use the index for keys or separator placement; input ordering is automatic. */
@@ -60,4 +65,4 @@ export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<i
 export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map
+export {};

package/dist/components/otpinput/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OTPField as BaseOtp } from '@base-ui/react/otp-field';
 import { Fragment, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Configure length and value on Root. Render an Input for each callback invocation from List; slot order is managed automatically. Keyboard navigation and paste distribution are built in; do not split or synchronize the code yourself.
  *
@@ -36,29 +36,28 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </OtpInput.Root>
  */
-export const Root = forwardRef(function Root({ id, tone = 'neutral', children, ...props }, ref) {
+export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, children, ...props }, ref) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [connections, setConnections] = useState({
         descriptionIds: [],
     });
-    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseOtp.Root, { ...props, id: inputId, ref: ref, "aria-labelledby": connections.labelId ?? props['aria-labelledby'], "aria-describedby": [props['aria-describedby'], ...connections.descriptionIds]
-                .filter(Boolean)
-                .join(' ') || undefined, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: { ...state, inputId, connections, setConnections }, children: _jsx("div", { ...rootProps }) })), children: children }) }));
+    return (_jsx(BaseOtp.Root, { ...props, id: inputId, ref: ref, "aria-labelledby": connections.labelId ?? props['aria-labelledby'], "aria-describedby": [props['aria-describedby'], ...connections.descriptionIds]
+            .filter(Boolean)
+            .join(' ') || undefined, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: { ...state, inputId, connections, setConnections, validation: readValidation(validation) }, children: _jsx("div", { ...rootProps }) })), children: children }));
 });
-export const Input = forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
-    return (_jsx(BaseOtp.Input, { ...props, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
+    return (_jsx(BaseOtp.Input, { ...props, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
             .filter(Boolean)
             .join(' ') || undefined, "aria-labelledby": props['aria-labelledby'] ?? context.connections.labelId, "data-component": "otpinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "otpinput-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 = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
@@ -71,33 +70,43 @@ export const Label = forwardRef(function Label({ disableStyle, className, id, ..
     }, [labelId, context.setConnections]);
     return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "otpinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "otpinput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "otpinput-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: "otpinput-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: "otpinput-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 = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the otp input
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "otpinput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Calls children for each code slot. Render Input inside each callback; the component handles slot ordering and keyboard/paste behavior. */
-export const List = forwardRef(function List({ disableStyle, className, children, ...props }, ref) {
+export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, children, ...props }, ref) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "otpinput-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: Array.from({ length: context.length }, (_, index) => (_jsx(Fragment, { children: children(index) }, index))) }));
 });
-export const Separator = forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseOtp.Separator, { ...props, ref: ref, "data-component": "otpinput-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-const InputContext = createContext(null);
+const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);
     if (!context)
@@ -106,12 +115,11 @@ function useInputContext() {
 }
 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) {
@@ -130,4 +138,3 @@ function useMessageId(id) {
     }, [messageId, context.setConnections]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -51,4 +51,3 @@ export declare function BodySectionHeader({ disableStyle, className, ...props }:
 export declare function BodySectionTitle({ disableStyle, className, ...props }: ComponentProps<'h2'> & StyleProps): import("react").JSX.Element;
 export declare function Footer({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/page/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft } from "../../utils/icons.js";
 import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-const SizeContext = createContext('medium');
+const SizeContext = /* @__PURE__ */ createContext('medium');
 /**
  * Root configures the page width; Surface renders it. Choose the Header, Body sections, and Footer needed by the screen. Action areas take your own controls; they do not create actions automatically.
  *
@@ -58,7 +58,6 @@ export function HeaderBackButton({ disableStyle, type = 'button', className, ...
 export function HeaderBackButtonIcon({ disableStyle, children = _jsx(ArrowLeft, {}), className, ...props }) {
     const size = useContext(SizeContext);
     return cloneElement(children, {
-        ...children.props,
         ...props,
         'data-size': size,
         ...{
@@ -97,4 +96,3 @@ export function Footer({ disableStyle, className, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx("div", { ...props, "data-size": size, "data-component": "page-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,11 +1,13 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Root as RadixRoot, Input as RadixInput } from '@radix-ui/react-password-toggle-field';
 import { Input as BaseInput } from '@base-ui/react/input';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps = ComponentProps<typeof RadixRoot> & Pick<ComponentProps<typeof RadixInput>, 'name' | 'form' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'required'> & Pick<BaseInput.Props, 'onValueChange'> & {
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral field. */
+    validation?: Validation;
 };
 /**
  * Configure the password on Root and use Input inside InputGroup. AddonVisibilityButton toggles visibility automatically; its visible/hidden icons follow that state. Do not maintain a second visibility state.
@@ -44,22 +46,23 @@ export type RootProps = ComponentProps<typeof RadixRoot> & Pick<ComponentProps<t
  *   }
  * </PasswordInput.Root>
  */
-export declare function Root({ children, id, tone, value, defaultValue, onValueChange, disabled, readOnly, required, name, form, ...props }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, id, validation, value, defaultValue, onValueChange, disabled, readOnly, required, name, form, ...props }: RootProps): import("react").JSX.Element;
 export type InputProps = Omit<ComponentPropsWithRef<typeof RadixInput>, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required'> | 'asChild'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-password-toggle-field").PasswordToggleFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "form" | "defaultValue" | "id" | "name" | "disabled" | "value" | "onValueChange" | "required" | "readOnly" | "asChild"> & {
-    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>>;
+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> & {
     /** Choose the preset appearance; this does not add action behavior. */
     variant?: "normal" | "emphasized";
@@ -72,7 +75,7 @@ export declare function AddonIcon({ disableStyle, children, className, ...props
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 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<LucideProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Toggles password visibility automatically; do not maintain another visibility state. */
 export declare const AddonVisibilityButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-password-toggle-field").PasswordToggleFieldToggleProps, "ref"> & import("react").RefAttributes<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. */
@@ -85,4 +88,4 @@ export declare function AddonHiddenIcon({ disableStyle, children, className, ...
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+export {};