@central-ui/react 0.1.2 → 0.3.0

package/dist/components/linechart/index.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Area as RechartsArea, CartesianGrid as RechartsGrid, ComposedChart as RechartsComposedChart, Curve as RechartsCurve, Line as RechartsLine, Tooltip as RechartsTooltip, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
+const ChartContext = /* @__PURE__ */ createContext(null);
+/** Provides the chart data, formatting, and accessibility settings to its parts. Renders no element. */
+export function Root({ children, labelToString = (label) => label, valueToString = (value) => value.toLocaleString(), allowDecimals = false, curve = 'monotone', ...chart }) {
+    return (_jsx(ChartContext.Provider, { value: { ...chart, labelToString, valueToString, allowDecimals, curve }, children: children }));
+}
+function useChart(part) {
+    const chart = useContext(ChartContext);
+    if (!chart)
+        throw new Error(`LineChart.${part} must be inside LineChart.Root`);
+    return chart;
+}
+/** Lets a Tooltip part hand its content to the Container, which owns the single Recharts tooltip. */
+const TooltipSlotContext = /* @__PURE__ */ createContext(null);
+/** Recharts supplies its own responsive container, so no extra wrapper is needed. */
+export function Container({ height = 300, className, style, children, hoverGuide = true, ...props }) {
+    const chart = useChart('Container');
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsxs(RechartsComposedChart, { margin: { top: 12, right: 12, bottom: 0, left: 0 }, ...props, data: chart.data, accessibilityLayer: chart.accessibilityLayer, desc: chart.desc, title: chart['aria-label'], className: twMerge('min-w-0 w-full', className), style: { ...style, background: 'transparent' }, height: height, width: "100%", responsive: true, layout: "horizontal", children: [_jsx(TooltipSlotContext.Provider, { value: setTooltip, children: children }), _jsx(RechartsTooltip, { offset: 12, ...tooltip?.props, 
+                // Native popup slide, timed to match the hover guide's transition.
+                animationDuration: 200, animationEasing: "ease-out", shared: true, cursor: hoverGuide && _jsx(HoverGuide, {}), content: (state) => {
+                    if (!tooltip || !state.active || !state.payload.length)
+                        return null;
+                    // Recharts types the payload as unknown; payload[0] is always the hovered record.
+                    const datum = state.payload[0].payload;
+                    return (_jsx(TooltipContext.Provider, { value: datum, children: tooltip.render(datum) }));
+                } })] }));
+}
+const lineProps = (line, part) => 
+// Recharts forwards data attributes at runtime; its types omit them.
+(line && { 'data-component': part });
+export function XAxis({ className, labelGap = 8, axisLine = false, tickLine = false, ...props }) {
+    const chart = useChart('XAxis');
+    return (_jsx(RechartsXAxis, { height: "auto", ...props, axisLine: lineProps(axisLine, 'linechart-xaxis-line'), tickLine: lineProps(tickLine, 'linechart-xaxis-tickline'), tick: {
+            className,
+            'data-component': 'linechart-xaxis-ticklabel',
+        }, tickMargin: labelGap, tickFormatter: chart.labelToString, 
+        // Recharts measures labels at this size when it hides overlapping ones.
+        fontSize: 12, dataKey: "label", type: "category", 
+        // Points sit on the chart edges instead of in the middle of bar-style slots.
+        scale: "point", label: false, angle: 0, 
+        // Drops labels at a steady step when they would overlap, so the remaining ones stay evenly spaced.
+        interval: "equidistantPreserveStart", minTickGap: 8 }));
+}
+export function YAxis({ className, labelGap = 8, axisLine = false, tickLine = false, ...props }) {
+    const chart = useChart('YAxis');
+    return (_jsx(RechartsYAxis, { width: "auto", ...props, axisLine: lineProps(axisLine, 'linechart-yaxis-line'), tickLine: lineProps(tickLine, 'linechart-yaxis-tickline'), tick: {
+            className,
+            'data-component': 'linechart-yaxis-ticklabel',
+        }, tickMargin: labelGap, tickFormatter: chart.valueToString, allowDecimals: chart.allowDecimals, fontSize: 12, type: "number", label: false, angle: 0, 
+        // Always include zero so the line has a baseline, and never collapse the range when every value is 0.
+        domain: ([minimum, maximum]) => [
+            Math.min(0, minimum),
+            Math.max(Math.min(0, minimum) + 1, maximum, 0),
+        ], interval: "preserveStartEnd", minTickGap: 8 }));
+}
+/** Horizontal lines only, one per Y value tick. */
+export function Grid({ className }) {
+    return (_jsx(RechartsGrid
+    // Recharts' native line slot: each line gets the class and a data-component hook.
+    , { 
+        // Recharts' native line slot: each line gets the class and a data-component hook.
+        horizontal: { className, 'data-component': 'linechart-gridline' }, vertical: false, fill: "none" }));
+}
+export function Line({ className, activeDot = true, ...props }) {
+    const chart = useChart('Line');
+    return (_jsx(RechartsLine, { strokeWidth: 2, ...props, 
+        // Recharts' native shape slot renders the line ourselves, so className and data attributes land on the drawn path.
+        shape: (line) => (_jsx(RechartsCurve, { ...line, className: className, "data-component": "linechart-line", "data-curve": chart.curve })), activeDot: activeDot &&
+            {
+                r: 4,
+                strokeWidth: 2,
+                // Recharts forwards data attributes at runtime; its types omit them.
+                'data-component': 'linechart-activedot',
+            }, dataKey: "value", type: chart.curve, 
+        // Points only appear on hover; at rest the line stays clean.
+        dot: false, isAnimationActive: false }));
+}
+/** Optional shading under the line. Render it before Line so the line draws on top. */
+export function Area({ className, ...props }) {
+    const chart = useChart('Area');
+    return (_jsx(RechartsArea, { ...props, shape: (area) => (_jsx(RechartsCurve, { ...area, className: className, "data-component": "linechart-area", "data-curve": chart.curve, stroke: "none" })), dataKey: "value", type: chart.curve, stroke: "none", 
+        // The Line owns the hover dot; the area is only a backdrop.
+        activeDot: false, tooltipType: "none", isAnimationActive: false }));
+}
+const TooltipContext = /* @__PURE__ */ createContext(null);
+/** Renders no element: hands its popup to the Container. For extra fields, specify the record type: Tooltip<(typeof data)[number]>. */
+export function Tooltip({ children, offset, allowEscapeViewBox, portal, }) {
+    const setTooltip = useContext(TooltipSlotContext);
+    if (!setTooltip)
+        throw new Error('LineChart.Tooltip must be inside LineChart.Container');
+    useLayoutEffect(() => {
+        setTooltip({
+            render: children,
+            props: { offset, allowEscapeViewBox, portal },
+        });
+        return () => setTooltip(null);
+    }, [setTooltip, children, offset, allowEscapeViewBox, portal]);
+    return null;
+}
+/** Recharts gives a line chart's cursor the guide's two end points. */
+function HoverGuide({ points, }) {
+    if (!points || points.length < 2)
+        return null;
+    const [start, end] = points;
+    return (_jsx("line", { "data-component": "linechart-hoverguide", 
+        // Draw at x=0 and move with a transform, so CSS can slide it between points (Recharts' cursor has no animation of its own).
+        x1: 0, x2: 0, y1: start.y, y2: end.y, 
+        // The slide between points is built in.
+        className: "transition-transform duration-200 ease-out motion-reduce:transition-none", style: { transform: `translateX(${start.x}px)` }, pointerEvents: "none" }));
+}
+export function TooltipPopup({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "linechart-tooltip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function TooltipTitle({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "linechart-tooltiptitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** Shows the hovered record's label, formatted by `labelToString` on Root. */
+export function TooltipLabel({ disableStyle, className, ...props }) {
+    const chart = useChart('TooltipLabel');
+    const datum = useContext(TooltipContext);
+    if (!datum)
+        throw new Error('LineChart.TooltipLabel must be inside LineChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "linechart-tooltiplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.labelToString(datum.label) }));
+}
+/** Shows the hovered record's value, formatted by `valueToString` on Root. */
+export function TooltipValue({ disableStyle, className, ...props }) {
+    const chart = useChart('TooltipValue');
+    const datum = useContext(TooltipContext);
+    if (!datum)
+        throw new Error('LineChart.TooltipValue must be inside LineChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "linechart-tooltipvalue", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.valueToString(datum.value) }));
+}
+export function TooltipColorIndicator({ disableStyle, className, ...props }) {
+    return (_jsx("span", { "aria-hidden": "true", ...props, "data-component": "linechart-tooltipcolorindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}

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

@@ -1,9 +1,10 @@
 import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import type { ComponentPropsWithRef, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
- * OpenHandler gives a button menu-trigger behavior. Popup already includes its portal and positioner. Choose ButtonItem for actions and LinkItem for navigation. Use the matching checkbox/radio composition for persistent choices; submenu parts belong in SubMenuRoot.
+ * OpenButton renders its own trigger button; pass asChild to give its behavior to your own button instead. Popup already includes its portal and positioner. Choose ButtonItem for actions and LinkItem for navigation. Use the matching checkbox/radio composition for persistent choices; submenu parts belong in SubMenuRoot.
  *
  * @example Complete composition
  * import { Button, Menu } from '@central-ui/react'
@@ -11,9 +12,9 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  * function Example() {
  *   return (
  *     <Menu.Root>
- *       <Menu.OpenHandler>
+ *       <Menu.OpenButton asChild>
  *         <Button.default variant="primary">Options</Button.default>
- *       </Menu.OpenHandler>
+ *       </Menu.OpenButton>
  *       <Menu.Popup>
  *         <Menu.Group>
  *           <Menu.GroupLabel>Account</Menu.GroupLabel>
@@ -47,19 +48,17 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *   </Menu.Popup>
  * </Menu.SubMenuRoot>
  */
-export declare const Root: typeof BaseMenu.Root;
+export declare function Root<Payload = unknown>(props: BaseMenu.Root.Props<Payload>): import("react").JSX.Element;
 export declare const SubMenuRoot: typeof BaseMenu.SubmenuRoot;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const OpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<BaseMenu.Trigger.Props<unknown>, "children" | "className" | "render"> & {
+/** Opens the menu. Pass asChild to give this behavior to your own element, like your app's Button. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseMenu.Trigger.Props<unknown>, "className" | "render"> & {
     className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseMenu.Popup>, 'className'> & {
     className?: string;
 } & Pick<BaseMenu.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseMenu.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
-export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps & StyleProps): import("react").JSX.Element;
+export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
 export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export declare const Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuGroupProps, "className"> & {
     className?: string;
@@ -112,4 +111,3 @@ export declare const RadioLabel: import("react").ForwardRefExoticComponent<Omit<
 export declare const RadioItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuRadioItemIndicatorProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildRendering } from "../../utils/asChild.js";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { Check, ChevronRight } from 'lucide-react';
+import { Check, ChevronRight } from "../../utils/icons.js";
 /**
- * OpenHandler gives a button menu-trigger behavior. Popup already includes its portal and positioner. Choose ButtonItem for actions and LinkItem for navigation. Use the matching checkbox/radio composition for persistent choices; submenu parts belong in SubMenuRoot.
+ * OpenButton renders its own trigger button; pass asChild to give its behavior to your own button instead. Popup already includes its portal and positioner. Choose ButtonItem for actions and LinkItem for navigation. Use the matching checkbox/radio composition for persistent choices; submenu parts belong in SubMenuRoot.
  *
  * @example Complete composition
  * import { Button, Menu } from '@central-ui/react'
@@ -12,9 +13,9 @@ import { Check, ChevronRight } from 'lucide-react';
  * function Example() {
  *   return (
  *     <Menu.Root>
- *       <Menu.OpenHandler>
+ *       <Menu.OpenButton asChild>
  *         <Button.default variant="primary">Options</Button.default>
- *       </Menu.OpenHandler>
+ *       </Menu.OpenButton>
  *       <Menu.Popup>
  *         <Menu.Group>
  *           <Menu.GroupLabel>Account</Menu.GroupLabel>
@@ -48,11 +49,14 @@ import { Check, ChevronRight } from 'lucide-react';
  *   </Menu.Popup>
  * </Menu.SubMenuRoot>
  */
-export const Root = BaseMenu.Root;
+export function Root(props) {
+    return _jsx(BaseMenu.Root, { ...props });
+}
 export const SubMenuRoot = BaseMenu.SubmenuRoot;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const OpenHandler = /* @__PURE__ */ forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseMenu.Trigger, { ...props, ref: ref, render: children });
+/** Opens the menu. Pass asChild to give this behavior to your own element, like your app's Button. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'menu-openbutton', disableStyle });
+    return _jsx(BaseMenu.Trigger, { ...props, ref: ref, ...rendering });
 });
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'bottom', sideOffset = 5, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
@@ -102,7 +106,7 @@ export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, chi
             'data-component': 'menu-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
         },
-        className: twMerge(children?.props.className, className),
+        className: twMerge(children.props.className, className),
     });
 });
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
@@ -118,49 +122,49 @@ export const SubMenuOpenButtonIcon = /* @__PURE__ */ forwardRef(function SubMenu
         className: twMerge(children?.props.className, className),
     });
 });
-export const CheckboxContainer = /* @__PURE__ */ forwardRef(function CheckboxContainer({ disableStyle, className, ...props }, ref) {
-    const id = useId();
-    const [label, setLabel] = useState('');
-    const [state, setState] = useState({
-        checked: false,
-        disabled: false,
-        highlighted: false,
-    });
-    return (_jsx(CheckableContext.Provider, { value: { id, label, setLabel, state, setState }, children: _jsx("div", { ...props, ref: ref, "data-disabled": state.disabled ? '' : undefined, "data-highlighted": state.highlighted ? '' : undefined, "data-checked": state.checked ? '' : undefined, "data-component": "menu-checkboxcontainer", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
+export const CheckboxContainer = /* @__PURE__ */ forwardRef(function CheckboxContainer(props, ref) {
+    return _jsx(CheckableContainer, { ...props, ref: ref, component: "menu-checkboxcontainer" });
 });
 export const CheckboxButtonItem = /* @__PURE__ */ forwardRef(function CheckboxButtonItem({ disableStyle, className, label, ...props }, ref) {
     const context = useCheckableContext();
     return (_jsx(BaseMenu.CheckboxItem, { ...props, ref: ref, id: context.id, "aria-labelledby": context.id + '-label', label: label ?? context.label, nativeButton: true, "data-component": "menu-checkboxbuttonitem", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckableButtonSurface, { ...buttonProps, state: state })) }));
 });
-export const CheckboxLabel = /* @__PURE__ */ forwardRef(function CheckboxLabel({ disableStyle, className, children, ...props }, ref) {
-    const context = useCheckableContext();
-    return (_jsx("label", { ...props, ref: ref, id: context.id + '-label', htmlFor: context.id, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "menu-checkboxlabel", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(CheckableLabelText, { children: children }) }));
+export const CheckboxLabel = /* @__PURE__ */ forwardRef(function CheckboxLabel(props, ref) {
+    return _jsx(CheckableLabel, { ...props, ref: ref, component: "menu-checkboxlabel" });
 });
 export const CheckboxItemIndicator = /* @__PURE__ */ forwardRef(function CheckboxItemIndicator({ disableStyle, children, className, ...props }, ref) {
     return (_jsx(BaseMenu.CheckboxItemIndicator, { ...props, ref: ref, "data-component": "menu-checkboxitemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "menu-checkboxitemindicator-1" })) }));
 });
-export const RadioContainer = /* @__PURE__ */ forwardRef(function RadioContainer({ disableStyle, className, ...props }, ref) {
-    const id = useId();
-    const [label, setLabel] = useState('');
-    const [state, setState] = useState({
-        checked: false,
-        disabled: false,
-        highlighted: false,
-    });
-    return (_jsx(CheckableContext.Provider, { value: { id, label, setLabel, state, setState }, children: _jsx("div", { ...props, ref: ref, "data-disabled": state.disabled ? '' : undefined, "data-highlighted": state.highlighted ? '' : undefined, "data-checked": state.checked ? '' : undefined, "data-component": "menu-radiocontainer", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
+export const RadioContainer = /* @__PURE__ */ forwardRef(function RadioContainer(props, ref) {
+    return _jsx(CheckableContainer, { ...props, ref: ref, component: "menu-radiocontainer" });
 });
 export const RadioButtonItem = /* @__PURE__ */ forwardRef(function RadioButtonItem({ disableStyle, className, label, ...props }, ref) {
     const context = useCheckableContext();
     return (_jsx(BaseMenu.RadioItem, { ...props, ref: ref, id: context.id, "aria-labelledby": context.id + '-label', label: label ?? context.label, nativeButton: true, "data-component": "menu-radiobuttonitem", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckableButtonSurface, { ...buttonProps, state: state })) }));
 });
-export const RadioLabel = /* @__PURE__ */ forwardRef(function RadioLabel({ disableStyle, className, children, ...props }, ref) {
-    const context = useCheckableContext();
-    return (_jsx("label", { ...props, ref: ref, id: context.id + '-label', htmlFor: context.id, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "menu-radiolabel", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(CheckableLabelText, { children: children }) }));
+export const RadioLabel = /* @__PURE__ */ forwardRef(function RadioLabel(props, ref) {
+    return _jsx(CheckableLabel, { ...props, ref: ref, component: "menu-radiolabel" });
 });
 export const RadioItemIndicator = /* @__PURE__ */ forwardRef(function RadioItemIndicator({ disableStyle, children, className, ...props }, ref) {
     return (_jsx(BaseMenu.RadioItemIndicator, { ...props, ref: ref, "data-component": "menu-radioitemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? _jsx("span", { "data-component": "menu-radioitemindicator-1" }) }));
 });
 const CheckableContext = /* @__PURE__ */ createContext(null);
+// Shared by CheckboxContainer and RadioContainer, which only differ by their data-component name
+const CheckableContainer = /* @__PURE__ */ forwardRef(function CheckableContainer({ disableStyle, className, component, ...props }, ref) {
+    const id = useId();
+    const [label, setLabel] = useState('');
+    const [state, setState] = useState({
+        checked: false,
+        disabled: false,
+        highlighted: false,
+    });
+    return (_jsx(CheckableContext.Provider, { value: { id, label, setLabel, state, setState }, children: _jsx("div", { ...props, ref: ref, "data-disabled": state.disabled ? '' : undefined, "data-highlighted": state.highlighted ? '' : undefined, "data-checked": state.checked ? '' : undefined, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
+});
+// Shared by CheckboxLabel and RadioLabel, which only differ by their data-component name
+const CheckableLabel = /* @__PURE__ */ forwardRef(function CheckableLabel({ disableStyle, className, children, component, ...props }, ref) {
+    const context = useCheckableContext();
+    return (_jsx("label", { ...props, ref: ref, id: context.id + '-label', htmlFor: context.id, "data-disabled": context.state.disabled ? '' : undefined, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(CheckableLabelText, { children: children }) }));
+});
 function useCheckableContext() {
     const context = useContext(CheckableContext);
     if (!context)
@@ -168,21 +172,20 @@ function useCheckableContext() {
     return context;
 }
 const CheckableButtonSurface = /* @__PURE__ */ forwardRef(function CheckableButtonSurface({ state, ...props }, ref) {
-    const { setState } = useCheckableContext();
+    const context = useCheckableContext();
     useEffect(() => {
-        setState({
+        context.setState({
             checked: state.checked,
             disabled: state.disabled,
             highlighted: state.highlighted,
         });
-    }, [state.checked, state.disabled, state.highlighted, setState]);
+    }, [state.checked, state.disabled, state.highlighted, context.setState]);
     return _jsx("button", { type: "button", ...props, ref: ref });
 });
 function CheckableLabelText({ children }) {
-    const { setLabel } = useCheckableContext();
+    const context = useCheckableContext();
     return (_jsx("span", { ref: (element) => {
             if (element)
-                setLabel(element.textContent ?? '');
+                context.setLabel(element.textContent ?? '');
         }, children: children }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -21,4 +21,3 @@ export declare function Number({ disableStyle, children, className, ...props }:
     children: number;
 }) & StyleProps): import("react").JSX.Element;
 export declare function Unit({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/metric/index.js

@@ -23,4 +23,3 @@ export function Number({ disableStyle, children, className, ...props }) {
 export function Unit({ disableStyle, className, ...props }) {
     return (_jsx("p", { "data-component": "metric-unit", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,13 +2,15 @@ import type { StyleProps } from '../../types/Style.ts';
 import { NumberField as BaseNumber } from '@base-ui/react/number-field';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ReactElement } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps = Omit<BaseNumber.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 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'
@@ -44,17 +46,20 @@ export type RootProps = Omit<BaseNumber.Root.Props, 'className' | 'render'> & {
  * </NumberInput.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").NumberFieldInputProps, "form" | "className" | "defaultValue" | "id" | "name" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "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>>;
 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";
@@ -77,12 +82,6 @@ export declare const ValueText: import("react").ForwardRefExoticComponent<Omit<O
 export declare const IncrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const IncrementHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function IncrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
@@ -91,15 +90,9 @@ export declare function IncrementButtonIcon({ disableStyle, children, className,
 export declare const DecrementButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const DecrementHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function DecrementButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map
+export {};

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,25 +41,24 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   }
  * </NumberInput.Root>
  */
-export const Root = /* @__PURE__ */ 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 }) }));
+    // 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 }));
 });
@@ -72,13 +71,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": "numberinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
@@ -86,17 +78,27 @@ export const Description = /* @__PURE__ */ forwardRef(function Description({ dis
     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 = /* @__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": "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 = /* @__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: "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 = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     const attributes = usePartAttributes();
@@ -149,10 +151,6 @@ export const ValueText = /* @__PURE__ */ forwardRef(function ValueText({ disable
 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 = /* @__PURE__ */ 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();
@@ -178,10 +176,6 @@ export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {
 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 = /* @__PURE__ */ 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();
@@ -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