@central-ui/react 0.1.2 → 0.3.0

package/dist/components/stepper/index.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
 import { Steps, useSteps as useArkSteps } from '@ark-ui/react/steps';
-import { Check } from 'lucide-react';
+import { Check } from "../../utils/icons.js";
 // Creates a controlled steps state machine for RootProvider.
 export function useSteps(props) {
     return useArkSteps({ orientation: 'vertical', ...props });
@@ -10,7 +11,7 @@ export { useStepsContext } from '@ark-ui/react/steps';
 // Reads the state of the nearest Steps item.
 export { useStepsItemContext } from '@ark-ui/react/steps';
 /**
- * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextHandler/PreviousHandler supply navigation to your buttons. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextButton/PreviousButton navigate between steps; pass asChild to give their behavior to your own buttons instead. Indicator reflects progress automatically; CompletedContent is shown after the last step.
  *
  * @example Complete composition
  * import { Button, Stepper } from '@central-ui/react'
@@ -39,16 +40,12 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
  *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
  *           <div className="flex gap-2">
- *             <Stepper.PreviousHandler>
- *               <Button.default variant="secondary" size="small">
- *                 Previous
- *               </Button.default>
- *             </Stepper.PreviousHandler>
- *             <Stepper.NextHandler>
+ *             <Stepper.PreviousButton>Previous</Stepper.PreviousButton>
+ *             <Stepper.NextButton asChild>
  *               <Button.default variant="primary" size="small">
  *                 Next
  *               </Button.default>
- *             </Stepper.NextHandler>
+ *             </Stepper.NextButton>
  *           </div>
  *         </div>
  *       </div>
@@ -65,15 +62,18 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  * </Stepper.Root>
  */
 export function Root({ children, className, orientation = 'vertical', ...props }) {
+    // className is left out, since Root renders no element of its own to receive it
     return (_jsx(Steps.Root, { ...props, orientation: orientation, asChild: true, children: _jsx(_Fragment, { children: children }) }));
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function NextHandler({ children, ...props }) {
-    return (_jsx(Steps.NextTrigger, { ...props, asChild: true, children: children }));
+/** Moves to the next step. Pass asChild to give this behavior to your own button, like a "Continue" Button; it keeps the state data attributes but none of this part's styling. */
+export function NextButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-nextbutton', disableStyle });
+    return _jsx(Steps.NextTrigger, { ...props, asChild: asChild, ...styleAttributes });
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function PreviousHandler({ children, ...props }) {
-    return (_jsx(Steps.PrevTrigger, { ...props, asChild: true, children: children }));
+/** Moves to the previous step. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
+export function PreviousButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-previousbutton', disableStyle });
+    return _jsx(Steps.PrevTrigger, { ...props, asChild: asChild, ...styleAttributes });
 }
 export function List({ disableStyle, className, ...props }) {
     return (_jsx(Steps.List, { "data-component": "stepper-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
@@ -97,4 +97,3 @@ export function CompletedContent({ disableStyle, className, ...props }) {
 export function OpenButton({ disableStyle, className, ...props }) {
     return (_jsx(Steps.Trigger, { "data-component": "stepper-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,11 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import type { ValidationProps } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 type CoreKeys = 'checked' | 'defaultChecked' | 'onCheckedChange' | 'disabled' | 'readOnly' | 'required' | 'name' | 'value' | 'uncheckedValue' | 'form' | 'id' | 'inputRef';
-export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & {
+export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & ValidationProps & {
     children: ReactNode;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
 };
 /**
  * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
@@ -37,7 +37,7 @@ export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & {
  *   </Switch.Container>
  * </Switch.Root>
  */
-export declare function Root({ children, tone, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, validation, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
     className?: string;
@@ -49,9 +49,11 @@ export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<O
 /** 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 {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
  *
@@ -32,31 +32,36 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   </Switch.Container>
  * </Switch.Root>
  */
-export function Root({ children, tone = 'neutral', checked, defaultChecked = false, onCheckedChange, id, ...props }) {
-    const generatedId = useId();
-    const [messageIds, setMessageIds] = useState([]);
+export function Root({ children, validation, checked, defaultChecked = false, onCheckedChange, id, ...props }) {
+    //1. Holding the checked state when nothing controls it from outside
     const [checkedInternalState, setCheckedInternalState] = useState(defaultChecked);
+    //2. Holding the ids of Description, Error and Success, so Button announces them to screen readers through aria-describedby
+    const [messageIds, setMessageIds] = useState([]);
+    //3. Sharing Base UI's props with Button, apart from what only the parts need
+    const generatedId = useId();
     return (_jsx(SwitchContext.Provider, { value: {
+            coreProps: {
+                ...props,
+                id: id ?? generatedId,
+                checked: checked ?? checkedInternalState,
+                onCheckedChange: (next, details) => {
+                    onCheckedChange?.(next, details);
+                    if (!details.isCanceled)
+                        setCheckedInternalState(next);
+                },
+            },
             messageIds,
             setMessageIds,
-            ...props,
-            id: id ?? generatedId,
-            checked: checked ?? checkedInternalState,
-            onCheckedChange: (next, details) => {
-                onCheckedChange?.(next, details);
-                if (!details.isCanceled)
-                    setCheckedInternalState(next);
-            },
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            validation: readValidation(validation),
+        }, children: children }));
 }
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "switch-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
-    const { messageIds, setMessageIds, ...context } = useSwitchContext();
-    const tone = useToneContext();
-    return (_jsx(BaseSwitch.Root, { ...props, ...context, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...messageIds].filter(Boolean).join(' ') ||
-            undefined, ref: ref, "data-tone": tone, "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useSwitchContext();
+    return (_jsx(BaseSwitch.Root, { ...props, ...context.coreProps, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds].filter(Boolean).join(' ') ||
+            undefined, ref: ref, ...validationAttributes(context.validation), "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
 export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
@@ -65,21 +70,32 @@ export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disable
 /** 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, ...props }, ref) {
     const context = useSwitchContext();
-    return (_jsx("label", { ...props, ref: ref, htmlFor: context.id, "data-disabled": context.disabled ? '' : undefined, "data-component": "switch-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("label", { ...props, ref: ref, htmlFor: context.coreProps.id, "data-disabled": context.coreProps.disabled ? '' : undefined, "data-component": "switch-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     const messageId = useMessageId(id);
     return (_jsx("div", { id: messageId, ...props, ref: ref, "data-component": "switch-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);
-    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "alert", "aria-atomic": "true", "data-component": "switch-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 = useSwitchContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "switch-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 = /* @__PURE__ */ 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 = useSwitchContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "switch-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the switch
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
-    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "status", "aria-atomic": "true", "data-component": "switch-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 const SwitchContext = /* @__PURE__ */ createContext(null);
 function useSwitchContext() {
@@ -88,14 +104,14 @@ function useSwitchContext() {
         throw new globalThis.Error('Switch parts must be inside Switch.Root');
     return context;
 }
+// Registering a message part's id in Button's aria-describedby while the part is mounted
 function useMessageId(id) {
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const { setMessageIds } = useSwitchContext();
+    const context = useSwitchContext();
     useEffect(() => {
-        setMessageIds((current) => [...current, messageId]);
-        return () => setMessageIds((current) => current.filter((value) => value !== messageId));
-    }, [messageId, setMessageIds]);
+        context.setMessageIds((current) => [...current, messageId]);
+        return () => context.setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, context.setMessageIds]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -94,8 +94,9 @@ export declare function Head({ disableStyle, className, ...props }: ComponentPro
 export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableSectionElement> & HTMLAttributes<HTMLTableSectionElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
 export declare const Row: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableRowElement> & HTMLAttributes<HTMLTableRowElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
 export declare function HeadCell({ disableStyle, className, ...props }: ComponentProps<'th'> & StyleProps): import("react").JSX.Element;
+/** Already styled as text: write plain text directly inside it, without a wrapping text element. Add your own elements only when the content needs more than plain text, like an avatar next to a name or a lighter secondary line. */
 export declare function Cell({ disableStyle, className, ...props }: ComponentProps<'td'> & StyleProps): import("react").JSX.Element;
-export declare function Empty({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Empty({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function EmptyBody({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function EmptyTitle({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function EmptyDescription({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
@@ -105,6 +106,5 @@ export declare function EmptyIcon({ disableStyle, children, className, ...props
     /** 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>>;
-export declare function EmptyActionsList({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function EmptyActionsList({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.js

@@ -83,15 +83,16 @@ function usePinning() {
  * </Table.Root>
  */
 export function Root({ pinning, children, }) {
-    const { scrollRef, edges, update } = useScrollEdges();
+    const scrollEdges = useScrollEdges();
+    // Pinning only while the pinned column would otherwise scroll out of view
     const activePinning = (() => {
-        if (pinning === 'first' && edges.passedFirst)
+        if (pinning === 'first' && scrollEdges.edges.passedFirst)
             return 'first';
-        if (pinning === 'last' && edges.hiddenLast)
+        if (pinning === 'last' && scrollEdges.edges.hiddenLast)
             return 'last';
         return null;
     })();
-    return (_jsx(PinningContext.Provider, { value: { pinning: activePinning, scrollRef, update }, children: children }));
+    return (_jsx(PinningContext.Provider, { value: { pinning: activePinning, scrollRef: scrollEdges.scrollRef, update: scrollEdges.update }, children: children }));
 }
 function useScrollEdges() {
     const scrollRef = useRef(null);
@@ -104,6 +105,7 @@ function useScrollEdges() {
                 scrollArea.scrollLeft >
                 1,
         };
+        // Keeping the same state when nothing changed, so scrolling doesn't re-render on every pixel
         setEdges((current) => current.passedFirst === next.passedFirst &&
             current.hiddenLast === next.hiddenLast
             ? current
@@ -133,9 +135,9 @@ export function SurfaceFooter({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "table-surfacefooter", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function ScrollArea({ disableStyle, className, onScroll, style, ...props }) {
-    const { scrollRef, update } = useContext(PinningContext);
-    return (_jsx("div", { ...props, ref: scrollRef, style: { ...style, overflowX: 'auto' }, onScroll: (event) => {
-            update(event.currentTarget);
+    const pinning = useContext(PinningContext);
+    return (_jsx("div", { ...props, ref: pinning.scrollRef, style: { ...style, overflowX: 'auto' }, onScroll: (event) => {
+            pinning.update(event.currentTarget);
             onScroll?.(event);
         }, "data-component": "table-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
@@ -173,12 +175,13 @@ export function HeadCell({ disableStyle, className, ...props }) {
     const pinning = usePinning();
     return (_jsx("th", { ...props, "data-pinning": pinning, "data-component": "table-headcell", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Already styled as text: write plain text directly inside it, without a wrapping text element. Add your own elements only when the content needs more than plain text, like an avatar next to a name or a lighter secondary line. */
 export function Cell({ disableStyle, className, ...props }) {
     const pinning = usePinning();
     return (_jsx("td", { ...props, "data-pinning": pinning, "data-component": "table-cell", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export function Empty({ disableStyle, className, children, ...props }) {
-    return (_jsx("div", { "data-component": "table-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children }));
+export function Empty({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "table-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function EmptyBody({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "table-emptybody", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -195,7 +198,6 @@ export function EmptyImage({ disableStyle, className, ...props }) {
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function EmptyIcon({ disableStyle, children, className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'table-emptyicon',
@@ -205,7 +207,6 @@ export function EmptyIcon({ disableStyle, children, className, ...props }) {
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
 }
-export function EmptyActionsList({ disableStyle, className, children, ...props }) {
-    return (_jsx("div", { "data-component": "table-emptyactionslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children }));
+export function EmptyActionsList({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "table-emptyactionslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -64,4 +64,3 @@ export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<O
 export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.js

@@ -66,7 +66,7 @@ export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, chi
             'data-component': 'tabs-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
         },
-        className: twMerge(children?.props.className, className),
+        className: twMerge(children.props.className, className),
     });
 });
 export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
@@ -75,4 +75,3 @@ export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disable
 export const Content = /* @__PURE__ */ forwardRef(function Content({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseTabs.Panel, { ...props, ref: ref, "data-component": "tabs-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-//# sourceMappingURL=index.js.map

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

@@ -2,10 +2,12 @@ import type { StyleProps } from '../../types/Style.ts';
 import { Input as BaseInput } from '@base-ui/react/input';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps = Pick<ComponentProps<'textarea'>, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'required'> & Pick<BaseInput.Props, 'onValueChange'> & {
     children?: ReactNode;
-    /** 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;
 };
 /**
  * Keep value, name, and validation configuration on Root. Textarea is the editable control inside TextareaGroup. Optional Addon parts hold your supporting text or actions; they do not implement submission.
@@ -40,22 +42,23 @@ export type RootProps = Pick<ComponentProps<'textarea'>, 'id' | 'name' | 'form'
  *   )
  * }
  */
-export declare function Root({ children, id, tone, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, id, validation, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
 export type TextareaProps = Omit<ComponentProps<'textarea'>, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required'>> & {
     className?: string;
 } & StyleProps;
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "form" | "defaultValue" | "id" | "name" | "disabled" | "value" | "onValueChange" | "required" | "readOnly"> & {
-    className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export declare const TextareaGroup: 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";
@@ -69,4 +72,4 @@ export declare function AddonIcon({ disableStyle, children, className, ...props
 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>>;
-//# sourceMappingURL=index.d.ts.map
+export {};

package/dist/components/textarea/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle } from "../../utils/icons.js";
 import { useRef } from 'react';
 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";
 /**
  * Keep value, name, and validation configuration on Root. Textarea is the editable control inside TextareaGroup. Optional Addon parts hold your supporting text or actions; they do not implement submission.
  *
@@ -39,12 +39,11 @@ 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 }) {
     const generatedId = useId();
     const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
+    // 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(InputContext.Provider, { value: {
             inputId: id ?? generatedId,
             disabled,
@@ -56,24 +55,20 @@ export function Root({ children, id, tone = 'neutral', value, defaultValue, onVa
             controlled: value !== undefined,
             onValueChange,
             coreProps,
-            connections,
-            setConnections,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            describedByIds,
+            setDescribedByIds,
+            validation: readValidation(validation),
+        }, children: children }));
 }
-export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableStyle, className, onChange, 'aria-describedby': describedBy, ...props }, ref) {
+export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
     const inputRef = useRef(null);
+    // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
     useEffect(() => {
         const form = 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);
     }, [
@@ -82,7 +77,7 @@ export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableSt
         context.setValueInternalState,
         context.coreProps.form,
     ]);
-    return (_jsx(BaseInput, { ...context.coreProps, render: _jsx("textarea", { ...props, onChange: onChange }), 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]
+    return (_jsx(BaseInput, { ...context.coreProps, render: _jsx("textarea", { ...props }), id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds]
             .filter(Boolean)
             .join(' ') || undefined, ref: (element) => {
             inputRef.current = element;
@@ -110,13 +105,6 @@ export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, c
     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": "textarea-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
@@ -124,17 +112,27 @@ export const Description = /* @__PURE__ */ forwardRef(function Description({ dis
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "textarea-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": "textarea-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: "textarea-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 = /* @__PURE__ */ 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: "textarea-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the textarea
+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": "textarea-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 = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     const attributes = usePartAttributes();
@@ -178,28 +176,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/textlink/index.d.ts

@@ -2,6 +2,9 @@ import type { StyleProps } from '../../types/Style.ts';
 import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
 /**
  * Adds preset styling to one link child without rendering a wrapper or handling navigation.
+ * Use it for a link presented as text, like "Read the guide" or "Create account" inside a
+ * sentence. To make a whole item clickable (a card, a list row), use your router's bare Link
+ * directly instead, without TextLink.
  * Pass a native anchor or your router's Link; put the destination and navigation props
  * on that child. Custom link components must forward className, style, and data-*
  * attributes to their anchor. Supply one element, not text, a fragment, or a list.
@@ -36,4 +39,3 @@ export default function TextLink({ disableStyle, children, className, style, ...
      */
     children: ReactElement<ComponentProps<'a'>>;
 }): ReactElement<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map