@central-ui/react 0.1.2 → 0.2.0

package/dist/components/select/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildRendering } from "../../utils/asChild.js";
 import { Select as BaseSelect } from '@base-ui/react/select';
-import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
-import { cloneElement, createContext, forwardRef, useContext, useId, useState, } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "../../utils/icons.js";
+import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Prepare groups in items. A flat-looking list is one group with an empty label and no GroupLabel; keep Group around ItemsList. OpenButtonValue already formats the selection: omit children unless a custom display is needed. Keep ScrollArea → GroupsList → Group → ItemsList → Item in Popup.
  *
@@ -88,22 +89,29 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </Select.Root>
  */
-export function Root({ children, items, id, tone = 'neutral', open, defaultOpen = false, onOpenChange, ...props }) {
+export function Root({ children, items, id, validation, defaultOpen = false, onOpenChange, ...props }) {
+    //1. Tracking the open state even when uncontrolled, so parts can carry data-open
+    const [openInternalState, setOpenInternalState] = useState(defaultOpen);
+    //2. Holding the ids of Description, Error and Success, so OpenButton announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
+    //3. Sharing everything with the parts
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    const [openInternalState, setOpenInternalState] = useState(defaultOpen);
-    return (_jsx(BaseSelect.Root, { ...props, items: items, id: inputId, open: open, defaultOpen: defaultOpen, isItemEqualToValue: (item, selected) => item.value === selected.value, onOpenChange: (nextOpen, details) => {
+    return (_jsx(BaseSelect.Root, { ...props, items: items, id: inputId, defaultOpen: defaultOpen, isItemEqualToValue: (item, selected) => item.value === selected.value, onOpenChange: (nextOpen, details) => {
             onOpenChange?.(nextOpen, details);
             if (!details.isCanceled)
                 setOpenInternalState(nextOpen);
         }, children: _jsx(SelectContext.Provider, { value: {
                 inputId,
                 groups: items,
-                open: open ?? openInternalState,
+                open: props.open ?? openInternalState,
                 disabled: props.disabled ?? false,
                 readOnly: props.readOnly ?? false,
                 required: props.required ?? false,
-            }, children: _jsx(ToneProvider, { value: tone, children: children }) }) }));
+                validation: readValidation(validation),
+                describedByIds,
+                setDescribedByIds,
+            }, children: children }) }));
 }
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "select-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -117,14 +125,14 @@ export const Value = BaseSelect.Value;
 export function OpenButtonValue({ disableStyle, className, ...props }) {
     return (_jsx(BaseSelect.Value, { ...props, "data-component": "select-openbuttonvalue", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, style, ...props }, ref) {
-    return (_jsx(BaseSelect.List, { ...props, ref: ref, style: style, "data-component": "select-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, ...props }, ref) {
+    return (_jsx(BaseSelect.List, { ...props, ref: ref, "data-component": "select-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Let this list render the groups. Manually annotate its children callback with Select.GroupType<typeof rootItems>, using the SAME items variable passed to Root. */
-export function GroupsList({ disableStyle, children, className, style, ...props }) {
-    const { groups } = useSelectContext();
-    return (_jsx("div", { ...props, style: style, "data-component": "select-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function'
-            ? groups.map((group, index) => children(group, index))
+export function GroupsList({ disableStyle, children, className, ...props }) {
+    const context = useSelectContext();
+    return (_jsx("div", { ...props, "data-component": "select-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function'
+            ? context.groups.map((group, index) => children(group, index))
             : children }));
 }
 /** Let this list render the surrounding group. Manually annotate its callback with Select.ItemType<typeof rootItems>, using the SAME items variable passed to Root. */
@@ -151,13 +159,11 @@ export function Popup({ disableStyle, container, anchor, positionMethod, side =
 export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     return (_jsxs(BaseSelect.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "select-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "select-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "select-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "select-arrow-3" })] }));
 });
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const PopupOpenHandler = /* @__PURE__ */ forwardRef(function PopupOpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseSelect.Trigger, { ...props, ref: ref, render: children });
-});
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ disableStyle, className, ...props }, ref) {
-    const tone = useToneContext();
-    return (_jsx(BaseSelect.Trigger, { "data-tone": tone, ...props, ref: ref, "data-component": "select-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Opens the select. Pass asChild to make your own button the trigger instead, like a "Sort" Button. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, 'aria-describedby': describedBy, ...props }, ref) {
+    const context = useSelectContext();
+    const rendering = asChildRendering({ asChild, children, component: 'select-openbutton', disableStyle });
+    return _jsx(BaseSelect.Trigger, { ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ...props, ref: ref, ...rendering });
 });
 /** Omit for an unlabeled/flat-looking group; keep the Group wrapper. Supply the heading only when grouping should be visible. */
 export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
@@ -169,19 +175,32 @@ export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disable
 export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseSelect.ItemText, { ...props, ref: ref, "data-component": "select-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "select-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "select-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, ...props }, ref) {
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "select-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 = useSelectContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "select-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, ...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 = useSelectContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "select-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the select
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "select-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export const OpenButtonIcon = /* @__PURE__ */ forwardRef(function OpenButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
@@ -220,15 +239,25 @@ function useSelectContext() {
         throw new globalThis.Error('Select parts must be inside Select.Root');
     return context;
 }
+// The state attributes every part carries, so presets can style any part from Root's state
 function usePartAttributes() {
-    const { open, disabled, readOnly, required } = useSelectContext();
-    const tone = useToneContext();
+    const context = useSelectContext();
     return {
-        'data-open': open ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined,
-        'data-readonly': readOnly ? '' : undefined,
-        'data-required': required ? '' : undefined,
-        'data-tone': tone,
+        'data-open': context.open ? '' : undefined,
+        'data-disabled': context.disabled ? '' : undefined,
+        'data-readonly': context.readOnly ? '' : undefined,
+        'data-required': context.required ? '' : undefined,
+        ...validationAttributes(context.validation),
     };
 }
-//# sourceMappingURL=index.js.map
+// Registering a part's id in OpenButton's aria-describedby while the part is mounted
+function useDescribedById(id) {
+    const context = useSelectContext();
+    const generatedId = useId();
+    const describedById = id ?? generatedId;
+    useEffect(() => {
+        context.setDescribedByIds((current) => [...current, describedById]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== describedById));
+    }, [describedById, context.setDescribedByIds]);
+    return describedById;
+}

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

@@ -16,4 +16,3 @@ import type { HTMLAttributes } from 'react';
  * }
  */
 export default function Skeleton({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -17,4 +17,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export default function Skeleton({ disableStyle, className, ...props }) {
     return (_jsx("div", { "data-component": "skeleton-skeleton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,9 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
-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<Value extends number | readonly number[] = number | readonly number[]> = Omit<BaseSlider.Root.Props<Value>, 'render' | 'className'> & {
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The slider's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Pick at least 10']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral slider. */
+    validation?: Validation;
 };
 /**
  * Configure bounds and value on Root. Keep Track inside TrackGroup, then Indicator and indexed DragHandles inside Track. One handle adjusts a single value; a range needs a handle for each end. MarksList/Mark are optional labels, not interactive handles.
@@ -37,7 +39,7 @@ export type RootProps<Value extends number | readonly number[] = number | readon
  *   <Slider.DragHandle index={1} aria-label="Maximum" />
  * </Slider.Track>
  */
-export declare function Root<Value extends number | readonly number[]>({ children, tone, ...props }: RootProps<Value>): import("react").JSX.Element;
+export declare function Root<Value extends number | readonly number[]>({ children, validation, ...props }: RootProps<Value>): 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 Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SliderLabelProps, "className"> & {
     className?: string;
@@ -65,8 +67,11 @@ export declare const Mark: import("react").ForwardRefExoticComponent<Omit<import
     value: number;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 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>>;
-//# sourceMappingURL=index.d.ts.map
+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 {};

package/dist/components/slider/index.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { useDirection } from '@base-ui/react/direction-provider';
 import { Fragment as ReactFragment, createContext, useCallback, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Configure bounds and value on Root. Keep Track inside TrackGroup, then Indicator and indexed DragHandles inside Track. One handle adjusts a single value; a range needs a handle for each end. MarksList/Mark are optional labels, not interactive handles.
  *
@@ -35,18 +35,17 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   <Slider.DragHandle index={1} aria-label="Maximum" />
  * </Slider.Track>
  */
-export function Root({ children, tone = 'neutral', ...props }) {
+export function Root({ children, validation, ...props }) {
     const [messageIds, setMessageIds] = useState([]);
-    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseSlider.Root, { ...props, render: (rootProps, state) => {
-                const { children, ...elementProps } = rootProps;
-                return (_jsx(SliderContext.Provider, { value: { elementProps, state, messageIds, setMessageIds }, children: _jsx(_Fragment, { children: children }) }));
-            }, children: children }) }));
+    return (_jsx(BaseSlider.Root, { ...props, render: (rootProps, state) => {
+            const { children, ...elementProps } = rootProps;
+            return (_jsx(SliderContext.Provider, { value: { elementProps, state, messageIds, setMessageIds, validation: readValidation(validation) }, children: _jsx(_Fragment, { children: children }) }));
+        }, children: children }));
 }
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, ...props }, ref) {
     const context = useSliderContext();
-    const tone = useToneContext();
     const { ref: nativeRef, ...nativeProps } = context.elementProps;
-    return (_jsx("div", { ...nativeProps, ...props, ref: useRootRef(nativeRef, ref), "data-tone": tone, "data-component": "slider-container", "data-style-disabled": disableStyle ? '' : undefined, className: props.className }));
+    return (_jsx("div", { ...nativeProps, ...props, ref: useRootRef(nativeRef, ref), ...validationAttributes(context.validation), "data-component": "slider-container", "data-style-disabled": disableStyle ? '' : undefined, className: props.className }));
 });
 export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseSlider.Label, { ...props, ref: ref, "data-component": "slider-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -61,53 +60,60 @@ export const Track = /* @__PURE__ */ forwardRef(function Track({ disableStyle, c
     return (_jsx(BaseSlider.Track, { ...props, ref: ref, "data-component": "slider-track", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
-    const tone = useToneContext();
-    return (_jsx(BaseSlider.Indicator, { ...props, ref: ref, "data-tone": tone, "data-component": "slider-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useSliderContext();
+    return (_jsx(BaseSlider.Indicator, { ...props, ref: ref, ...validationAttributes(context.validation), "data-component": "slider-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const DragHandle = /* @__PURE__ */ forwardRef(function DragHandle({ disableStyle, className, ...props }, ref) {
-    const { messageIds } = useSliderContext();
-    return (_jsx(BaseSlider.Thumb, { ...props, ref: ref, "aria-describedby": [props['aria-describedby'], ...messageIds].filter(Boolean).join(' ') ||
+    const context = useSliderContext();
+    return (_jsx(BaseSlider.Thumb, { ...props, ref: ref, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds].filter(Boolean).join(' ') ||
             undefined, "data-component": "slider-draghandle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const MarksList = /* @__PURE__ */ forwardRef(function MarksList({ disableStyle, children, className, ...props }, ref) {
-    const { state } = useSliderContext();
-    const count = Math.floor(Number(((state.max - state.min) / state.step).toPrecision(15))) +
+    const context = useSliderContext();
+    const count = Math.floor(Number(((context.state.max - context.state.min) / context.state.step).toPrecision(15))) +
         1;
-    return (_jsx("div", { ...props, ref: ref, "aria-hidden": true, "data-orientation": state.orientation, "data-component": "slider-markslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: Array.from({ length: count }, (_, index) => {
-            const value = Number((state.min + index * state.step).toPrecision(15));
+    return (_jsx("div", { ...props, ref: ref, "aria-hidden": true, "data-orientation": context.state.orientation, "data-component": "slider-markslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: Array.from({ length: count }, (_, index) => {
+            const value = Number((context.state.min + index * context.state.step).toPrecision(15));
             return _jsx(ReactFragment, { children: children(value) }, value);
         }) }));
 });
 export const Mark = /* @__PURE__ */ forwardRef(function Mark({ disableStyle, value, children, className, style, ...props }, ref) {
-    const { state } = useSliderContext();
+    const context = useSliderContext();
     const direction = useDirection();
-    const percent = ((value - state.min) / (state.max - state.min)) * 100;
-    return (_jsxs("div", { ...props, ref: ref, "aria-hidden": true, dir: direction, "data-orientation": state.orientation, style: {
-            ...(state.orientation === 'vertical'
+    const percent = ((value - context.state.min) / (context.state.max - context.state.min)) * 100;
+    return (_jsxs("div", { ...props, ref: ref, "aria-hidden": true, dir: direction, "data-orientation": context.state.orientation, style: {
+            ...(context.state.orientation === 'vertical'
                 ? { bottom: percent + '%' }
                 : { insetInlineStart: percent + '%' }),
             ...style,
-        }, "data-component": "slider-mark", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("span", { "data-component": "slider-mark-1", "data-orientation": state.orientation }), children != null && (_jsx("span", { "data-orientation": state.orientation, "data-component": "slider-mark-2", children: children }))] }));
+        }, "data-component": "slider-mark", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("span", { "data-component": "slider-mark-1", "data-orientation": context.state.orientation }), children != null && (_jsx("span", { "data-orientation": context.state.orientation, "data-component": "slider-mark-2", children: children }))] }));
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     const messageId = useMessageId(id);
     const context = useSliderContext();
-    const tone = useToneContext();
-    return (_jsx("div", { ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, "data-tone": tone, "data-component": "slider-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("div", { ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, ...validationAttributes(context.validation), "data-component": "slider-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);
+/** 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 = useSliderContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "slider-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 = useSliderContext();
-    const tone = useToneContext();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, "data-tone": tone, "data-component": "slider-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "slider-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) {
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the slider
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
     const context = useSliderContext();
-    const tone = useToneContext();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, "data-tone": tone, "data-component": "slider-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...props, ref: ref, id: messageId, "data-disabled": context.state.disabled ? '' : undefined, ...validationAttributes(context.validation), "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 const SliderContext = /* @__PURE__ */ createContext(null);
 function useSliderContext() {
@@ -119,41 +125,36 @@ function useSliderContext() {
 function useMessageId(id) {
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const { setMessageIds } = useSliderContext();
+    const context = useSliderContext();
     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;
 }
+// Merging Base UI's ref with the consumer's one onto the same element
 function useRootRef(nativeRef, forwardedRef) {
     return useCallback((element) => {
-        const nativeCleanup = typeof nativeRef === 'function'
-            ? nativeRef(element)
-            : nativeRef
-                ? ((nativeRef.current = element), undefined)
-                : undefined;
-        const forwardedCleanup = typeof forwardedRef === 'function'
-            ? forwardedRef(element)
-            : forwardedRef
-                ? ((forwardedRef.current = element), undefined)
-                : undefined;
-        if (typeof nativeCleanup === 'function' ||
-            typeof forwardedCleanup === 'function')
-            return () => {
-                if (typeof nativeCleanup === 'function')
-                    nativeCleanup();
-                else if (typeof nativeRef === 'function')
-                    nativeRef(null);
-                else if (nativeRef)
-                    nativeRef.current = null;
-                if (typeof forwardedCleanup === 'function')
-                    forwardedCleanup();
-                else if (typeof forwardedRef === 'function')
-                    forwardedRef(null);
-                else if (forwardedRef)
-                    forwardedRef.current = null;
-            };
+        const refs = [nativeRef, forwardedRef];
+        //1. Setting both refs, keeping the cleanups that callback refs may return
+        const cleanups = refs.map((ref) => {
+            if (typeof ref === 'function')
+                return ref(element);
+            if (ref)
+                ref.current = element;
+            return undefined;
+        });
+        //2. Returning a cleanup only when a ref asked for one, since React then stops calling refs with null itself
+        if (!cleanups.some((cleanup) => typeof cleanup === 'function'))
+            return;
+        return () => refs.forEach((ref, index) => {
+            const cleanup = cleanups[index];
+            if (typeof cleanup === 'function')
+                return cleanup();
+            if (typeof ref === 'function')
+                return ref(null);
+            if (ref)
+                ref.current = null;
+        });
     }, [nativeRef, forwardedRef]);
 }
-//# sourceMappingURL=index.js.map

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

@@ -10,5 +10,4 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *   return <Spinner.Spinner />
  * }
  */
-export declare function Spinner({ disableStyle, className, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+export declare function Spinner({ disableStyle, className, children, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;

package/dist/components/spinner/index.js

@@ -9,7 +9,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   return <Spinner.Spinner />
  * }
  */
-export function Spinner({ disableStyle, className, ...props }) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", "data-component": "spinner-spinner", "data-style-disabled": disableStyle ? '' : undefined, className: className, strokeWidth: 3, ...props, children: [_jsx("circle", { cx: 12, cy: 12, r: 10, "data-component": "spinner-track" }), _jsx("circle", { cx: 12, cy: 12, r: 10, pathLength: 1, "data-component": "spinner-indicator" }), props.children] }));
+export function Spinner({ disableStyle, className, children, ...props }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", "data-component": "spinner-spinner", "data-style-disabled": disableStyle ? '' : undefined, className: className, strokeWidth: 3, ...props, children: [_jsx("circle", { cx: 12, cy: 12, r: 10, "data-component": "spinner-track" }), _jsx("circle", { cx: 12, cy: 12, r: 10, pathLength: 1, "data-component": "spinner-indicator" }), children] }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -42,8 +42,7 @@ export type RootProps = Pick<GroupProps, CoreKeys> & {
  */
 export declare function Root({ children, orientation, ...props }: RootProps): import("react").JSX.Element;
 export type ContentListProps = Omit<GroupProps, CoreKeys> & StyleProps;
-export declare function ContentList({ disableStyle, className, ...props }: ContentListProps & StyleProps): import("react").JSX.Element;
+export declare function ContentList({ disableStyle, className, ...props }: ContentListProps): import("react").JSX.Element;
 export declare function Content({ disableStyle, className, ...props }: PanelProps & StyleProps): import("react").JSX.Element;
 export declare function Separator({ disableStyle, className, ...props }: SeparatorProps & StyleProps): import("react").JSX.Element;
 export declare function Handle({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/splitter/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Group as ResizableGroup, Panel as ResizablePanel, Separator as ResizableSeparator, } from 'react-resizable-panels';
 import { createContext, useContext } from 'react';
-import { GripVertical } from 'lucide-react';
+import { GripVertical } from "../../utils/icons.js";
 export { useGroupRef, useGroupCallbackRef, usePanelRef, usePanelCallbackRef, } from 'react-resizable-panels';
 // Only configuration lives here. ContentList renders the measured native Group.
 /**
@@ -49,13 +49,13 @@ export function Content({ disableStyle, className, ...props }) {
     return (_jsx(ResizablePanel, { ...props, "data-component": "splitter-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Separator({ disableStyle, className, ...props }) {
-    const { orientation } = useSplitterContext();
-    return (_jsx(ResizableSeparator, { ...props, "data-orientation": orientation, "data-component": "splitter-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useSplitterContext();
+    return (_jsx(ResizableSeparator, { ...props, "data-orientation": context.orientation, "data-component": "splitter-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 // Native Separator explicitly supports children for a custom grip; all resize behavior stays native.
 export function Handle({ disableStyle, className, children = (_jsx(GripVertical, { "data-component": "splitter-handle-1", strokeWidth: 2, "aria-hidden": true })), ...props }) {
-    const { orientation } = useSplitterContext();
-    return (_jsx("div", { ...props, "data-orientation": orientation, "data-component": "splitter-handle", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
+    const context = useSplitterContext();
+    return (_jsx("div", { ...props, "data-orientation": context.orientation, "data-component": "splitter-handle", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
 }
 const SplitterContext = /* @__PURE__ */ createContext(null);
 function useSplitterContext() {
@@ -64,4 +64,3 @@ function useSplitterContext() {
         throw new Error('Splitter parts must be inside Splitter.Root');
     return context;
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,12 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { UseStepsProps } from '@ark-ui/react/steps';
 import { Steps } from '@ark-ui/react/steps';
-import type { ReactElement } from 'react';
 export declare function useSteps(props: UseStepsProps): import("@ark-ui/react/steps").UseStepsReturn;
 export { useStepsContext } from '@ark-ui/react/steps';
 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'
@@ -35,16 +34,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>
@@ -61,16 +56,10 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  * </Stepper.Root>
  */
 export declare function Root({ children, className, orientation, ...props }: Omit<Steps.RootProps, 'asChild'>): import("react").JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare function NextHandler({ children, ...props }: Omit<Steps.NextTriggerProps, 'asChild' | 'children'> & {
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}): import("react").JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare function PreviousHandler({ children, ...props }: Omit<Steps.PrevTriggerProps, 'asChild' | 'children'> & {
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}): import("react").JSX.Element;
+/** 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 declare function NextButton({ asChild, disableStyle, ...props }: Steps.NextTriggerProps & StyleProps): import("react").JSX.Element;
+/** 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 declare function PreviousButton({ asChild, disableStyle, ...props }: Steps.PrevTriggerProps & StyleProps): import("react").JSX.Element;
 export declare function List({ disableStyle, className, ...props }: Steps.ListProps & StyleProps): import("react").JSX.Element;
 export declare function Item({ disableStyle, className, ...props }: Steps.ItemProps & StyleProps): import("react").JSX.Element;
 /** 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. */
@@ -79,4 +68,3 @@ export declare function Separator({ disableStyle, className, ...props }: Steps.S
 export declare function Content({ disableStyle, className, ...props }: Steps.ContentProps & StyleProps): import("react").JSX.Element;
 export declare function CompletedContent({ disableStyle, className, ...props }: Steps.CompletedContentProps & StyleProps): import("react").JSX.Element;
 export declare function OpenButton({ disableStyle, className, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map