@central-ui/react 0.1.2 → 0.2.0

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

@@ -0,0 +1,106 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { BarChart as RechartsBarChart } from 'recharts';
+import type { BarProps as RechartsBarProps, TooltipProps as RechartsTooltipProps, XAxisProps as RechartsXAxisProps, YAxisProps as RechartsYAxisProps } from 'recharts';
+import type { StyleProps } from '../../types/Style.ts';
+/** Every record needs a unique `label` (the category) and a numeric `value` (the bar height). Extra fields are kept for the tooltip. */
+type Datum = {
+    label: string;
+    value: number;
+};
+export type RootProps<Data extends Datum = Datum> = Pick<ComponentProps<typeof RechartsBarChart>, 'accessibilityLayer' | 'desc'> & {
+    /** Unique labels are equally spaced categories, including when they contain dates. */
+    data: readonly Data[];
+    'aria-label': string;
+    children: ReactNode;
+    /**
+     * Converts a record's `label` into display text.
+     * Used by the X axis ticks and the tooltip label, so both always read the same.
+     * Use it for dates (e.g. `'2026-10-12'` → `'October 12, 2026'`) or to shorten long categories.
+     * @default (label) => label
+     */
+    labelToString?: (label: string) => string;
+    /**
+     * Converts a record's `value` into display text.
+     * Used by the Y axis ticks and the tooltip value, so both always read the same.
+     * Use it for currency, percentages, or units (e.g. `1240` → `'$1,240'`).
+     * @default (value) => value.toLocaleString()
+     */
+    valueToString?: (value: number) => string;
+    /**
+     * Whether the Y axis may place ticks at fractional values.
+     * Keep it `false` for counts (orders, visitors) so the axis never shows `0.5 orders`.
+     * Set it to `true` for continuous measures where fractions are meaningful, such as small currency amounts or ratings.
+     * @default false
+     */
+    allowDecimals?: boolean;
+};
+/** Provides the chart data, formatting, and accessibility settings to its parts. Renders no element. */
+export declare function Root<Data extends Datum>({ children, labelToString, valueToString, allowDecimals, ...chart }: RootProps<Data>): import("react").JSX.Element;
+export type ContainerProps = Pick<ComponentProps<typeof RechartsBarChart>, 'children' | 'height' | 'className' | 'style' | 'id' | 'margin' | 'ref' | 'tabIndex'> & {
+    /**
+     * The vertical line that follows the pointer across the chart.
+     * Shown by default, with or without a Tooltip, so readers can line a point up with its axis label.
+     * Pass `false` for static charts where hover feedback adds noise. Style it through `data-component="barchart-hoverguide"`.
+     * @default true
+     */
+    hoverGuide?: LineSwitch;
+};
+/** Recharts supplies its own responsive container, so no extra wrapper is needed. */
+export declare function Container({ height, className, style, children, hoverGuide, ...props }: ContainerProps): import("react").JSX.Element;
+/** On/off only: style it through its data-component in a preset, so each export keeps one className. */
+type LineSwitch = boolean;
+export type XAxisProps = Pick<RechartsXAxisProps, 'hide' | 'tickSize'> & {
+    /** Classes for the tick labels, e.g. `fill-neutral-500`. Keep the font size at 12px: Recharts measures labels at that size to skip overlapping ones. */
+    className?: string;
+    /** Space between the labels and the plot area, in pixels. */
+    labelGap?: number;
+    /** The line along the axis. Hidden by default. */
+    axisLine?: LineSwitch;
+    /** The small marks at each tick. Hidden by default. */
+    tickLine?: LineSwitch;
+};
+export declare function XAxis({ className, labelGap, axisLine, tickLine, ...props }: XAxisProps): import("react").JSX.Element;
+export type YAxisProps = Pick<RechartsYAxisProps, 'hide' | 'tickSize' | 'width'> & {
+    /** Classes for the tick labels, e.g. `fill-neutral-500`. Keep the font size at 12px: Recharts measures labels at that size to skip overlapping ones. */
+    className?: string;
+    /** Space between the labels and the plot area, in pixels. */
+    labelGap?: number;
+    /** The line along the axis. Hidden by default. */
+    axisLine?: LineSwitch;
+    /** The small marks at each tick. Hidden by default. */
+    tickLine?: LineSwitch;
+};
+export declare function YAxis({ className, labelGap, axisLine, tickLine, ...props }: YAxisProps): import("react").JSX.Element;
+export type GridProps = {
+    /** Classes for every grid line, e.g. `stroke-neutral-200 [stroke-dasharray:4_4]`. */
+    className?: string;
+};
+/** Horizontal lines only, one per Y value tick. */
+export declare function Grid({ className }: GridProps): import("react").JSX.Element;
+export type BarsProps = Pick<RechartsBarProps, 'radius' | 'hide' | 'name'> & {
+    /**
+     * Classes for every bar. Colors come only from here or from a preset; there is no built-in color.
+     * Target hover with `data-active:` (e.g. `fill-sky-500 data-active:opacity-80`).
+     */
+    className?: string;
+    /**
+     * Whether the bar under the pointer gets `data-active`. Pass false to turn the hover state off.
+     * @default true
+     */
+    activeBar?: boolean;
+};
+export declare function Bars({ className, activeBar, ...props }: BarsProps): import("react").JSX.Element;
+export type TooltipProps<Data extends Datum = Datum> = Pick<RechartsTooltipProps<number, string>, 'offset' | 'allowEscapeViewBox' | 'portal'> & {
+    /** Receives the hovered record and returns the popup. */
+    children: (datum: Data) => ReactNode;
+};
+/** Renders no element: hands its popup to the Container. For extra fields, specify the record type: Tooltip<(typeof data)[number]>. */
+export declare function Tooltip<Data extends Datum = Datum>({ children, offset, allowEscapeViewBox, portal, }: TooltipProps<Data>): null;
+export declare function TooltipPopup({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function TooltipTitle({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+/** Shows the hovered record's label, formatted by `labelToString` on Root. */
+export declare function TooltipLabel({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+/** Shows the hovered record's value, formatted by `valueToString` on Root. */
+export declare function TooltipValue({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function TooltipColorIndicator({ disableStyle, className, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+export {};

package/dist/components/barchart/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Bar as RechartsBar, BarChart as RechartsBarChart, CartesianGrid as RechartsGrid, Rectangle as RechartsRectangle, 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, ...chart }) {
+    return (_jsx(ChartContext.Provider, { value: { ...chart, labelToString, valueToString, allowDecimals }, children: children }));
+}
+function useChart(part) {
+    const chart = useContext(ChartContext);
+    if (!chart)
+        throw new Error(`BarChart.${part} must be inside BarChart.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(RechartsBarChart, { 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", 
+        // Bars nearly touch: each fills 90% of its slot.
+        barCategoryGap: "15%", 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, 'barchart-xaxis-line'), tickLine: lineProps(tickLine, 'barchart-xaxis-tickline'), tick: {
+            className,
+            'data-component': 'barchart-xaxis-ticklabel',
+        }, tickMargin: labelGap, tickFormatter: chart.labelToString, 
+        // Recharts measures labels at this size when it hides overlapping ones.
+        fontSize: 12, dataKey: "label", type: "category", 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, 'barchart-yaxis-line'), tickLine: lineProps(tickLine, 'barchart-yaxis-tickline'), tick: {
+            className,
+            'data-component': 'barchart-yaxis-ticklabel',
+        }, tickMargin: labelGap, tickFormatter: chart.valueToString, allowDecimals: chart.allowDecimals, fontSize: 12, type: "number", label: false, angle: 0, 
+        // Always include zero so bars have 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': 'barchart-gridline' }, vertical: false, fill: "none" }));
+}
+export function Bars({ className, activeBar = true, ...props }) {
+    return (_jsx(RechartsBar, { ...props, activeBar: activeBar, 
+        // Recharts' native shape slot renders each bar ourselves, so className and data attributes land on the drawn element.
+        shape: (bar) => (_jsx(RechartsRectangle, { ...bar, className: className, "data-component": "barchart-bar", "data-index": bar.index, "data-active": bar.isActive ? '' : undefined })), dataKey: "value", 
+        // Zero days still get a thin, hoverable sliver on the baseline.
+        minPointSize: 2, 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('BarChart.Tooltip must be inside BarChart.Container');
+    useLayoutEffect(() => {
+        setTooltip({
+            render: children,
+            props: { offset, allowEscapeViewBox, portal },
+        });
+        return () => setTooltip(null);
+    }, [setTooltip, children, offset, allowEscapeViewBox, portal]);
+    return null;
+}
+/** Recharts gives the cursor the bar's whole rectangle; only its center line is drawn. */
+function HoverGuide({ x = 0, y = 0, width = 0, height = 0, }) {
+    return (_jsx("line", { "data-component": "barchart-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: y, y2: y + height, 
+        // The slide between points is built in.
+        className: "transition-transform duration-200 ease-out motion-reduce:transition-none", style: { transform: `translateX(${x + width / 2}px)` }, pointerEvents: "none" }));
+}
+export function TooltipPopup({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "barchart-tooltip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function TooltipTitle({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "barchart-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('BarChart.TooltipLabel must be inside BarChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "barchart-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('BarChart.TooltipValue must be inside BarChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "barchart-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": "barchart-tooltipcolorindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}

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

@@ -28,4 +28,3 @@ export declare function Item({ disableStyle, value, type, className, ...props }:
 export declare function Separator({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumb/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight } from "../../utils/icons.js";
 import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-const context = /* @__PURE__ */ createContext('');
+// Sharing the current location's value, so each Item knows whether it's the active one
+const ActiveValueContext = /* @__PURE__ */ createContext('');
 /**
  * Set active_value on the default export to match the current Item value. Use Item for each location and Separator between locations; supply actual navigation behavior where needed.
  *
@@ -20,16 +21,15 @@ const context = /* @__PURE__ */ createContext('');
  * }
  */
 export default function BreadCrumb({ disableStyle, active_value, className, children, ...props }) {
-    return (_jsx("div", { ...props, "data-component": "breadcrumb-breadcrumb", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(context.Provider, { value: active_value, children: children }) }));
+    return (_jsx("div", { ...props, "data-component": "breadcrumb-breadcrumb", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(ActiveValueContext.Provider, { value: active_value, children: children }) }));
 }
 export function Item({ disableStyle, value, type = 'button', className, ...props }) {
-    const active_value = useContext(context);
-    return (_jsx("button", { ...props, type: type, "data-active": active_value === value || undefined, "data-component": "breadcrumb-item", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const activeValue = useContext(ActiveValueContext);
+    return (_jsx("button", { ...props, type: type, "data-active": activeValue === value || undefined, "data-component": "breadcrumb-item", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 /** Omit children to use the supplied separator icon. Override only when another separator is needed. */
 export function Separator({ disableStyle, children = _jsx(ChevronRight, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'breadcrumb-separator',
@@ -39,4 +39,3 @@ export function Separator({ disableStyle, children = _jsx(ChevronRight, {}), cla
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2.5,
     });
 }
-//# sourceMappingURL=index.js.map

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

@@ -32,7 +32,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'variant
  *   Saving
  * </Button.default>
  */
-export default function Button({ disableStyle, variant, tone, size, className, children, ...props }: ButtonProps & StyleProps): import("react").JSX.Element;
+export default function Button({ disableStyle, variant, tone, size, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export declare function Icon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
@@ -43,6 +43,5 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     'data-tone'?: string;
 }, string | import("react").JSXElementConstructor<any>>;
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export declare function LoadingIcon({ disableStyle, className, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;
+export declare function LoadingIcon({ disableStyle, className, strokeWidth, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;
 export declare function List({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle } from "../../utils/icons.js";
 import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-const context = /* @__PURE__ */ createContext({
+// Sharing the button's look with its icons, so they match its size, variant and tone
+const ButtonContext = /* @__PURE__ */ createContext({
     size: 'medium',
     variant: 'primary',
     tone: 'neutral',
@@ -31,17 +32,16 @@ const context = /* @__PURE__ */ createContext({
  * </Button.default>
  */
 export default function Button({ disableStyle, variant, tone = 'neutral', size = 'medium', className, children, ...props }) {
-    return (_jsx("button", { ...props, "data-variant": variant, "data-tone": tone, "data-size": size, "data-component": "button-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(context.Provider, { value: { size, variant, tone }, children: children }) }));
+    return (_jsx("button", { ...props, "data-variant": variant, "data-tone": tone, "data-size": size, "data-component": "button-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(ButtonContext.Provider, { value: { size, variant, tone }, children: children }) }));
 }
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function Icon({ disableStyle, children, className, ...props }) {
-    const { size, variant, tone } = useContext(context);
+    const context = useContext(ButtonContext);
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        'data-size': size,
-        'data-variant': variant,
-        'data-tone': tone,
+        'data-size': context.size,
+        'data-variant': context.variant,
+        'data-tone': context.tone,
         ...{
             'data-component': 'button-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -50,11 +50,10 @@ export function Icon({ disableStyle, children, className, ...props }) {
     });
 }
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export function LoadingIcon({ disableStyle, className, ...props }) {
-    const { size, variant, tone } = useContext(context);
-    return (_jsx(LoaderCircle, { "data-component": "button-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className, strokeWidth: undefined, ...props, "data-size": size, "data-variant": variant, "data-tone": tone }));
+export function LoadingIcon({ disableStyle, className, strokeWidth = 2, ...props }) {
+    const context = useContext(ButtonContext);
+    return (_jsx(LoaderCircle, { "data-component": "button-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className, strokeWidth: strokeWidth, ...props, "data-size": context.size, "data-variant": context.variant, "data-tone": context.tone }));
 }
 export function List({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "button-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -31,4 +31,3 @@ export declare function Title({ disableStyle, className, ...props }: HTMLAttribu
 export declare function Description({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function Body({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
 export declare function Footer({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -42,4 +42,3 @@ export function Body({ disableStyle, className, ...props }) {
 export function Footer({ disableStyle, className, ...props }) {
     return (_jsx("div", { "data-component": "card-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,11 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
-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' | 'indeterminate' | 'disabled' | 'readOnly' | 'required' | 'name' | 'form' | 'value' | 'uncheckedValue' | 'id' | 'inputRef' | 'parent';
-export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & {
+export type RootProps = Pick<BaseCheckbox.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 and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
@@ -42,7 +42,7 @@ export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & {
  *   )
  * }
  */
-export declare function Root({ children, id, tone, ...coreProps }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, id, validation, ...coreProps }: RootProps): import("react").JSX.Element;
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
 export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxGroupProps, "className"> & {
     className?: string;
@@ -52,15 +52,17 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 /** 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 declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "children" | "className" | "render"> & {
+export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "className" | "children" | "render"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** 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<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-/** 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<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-/** 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<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type MessageProps = Omit<ComponentProps<'span'>, '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<HTMLSpanElement>>;
+/** 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<HTMLSpanElement>>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { Check, Minus } from 'lucide-react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { Check, Minus } from "../../utils/icons.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
  *
@@ -39,9 +39,10 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', ...coreProps }) {
-    const generatedId = useId();
+export function Root({ children, id, validation, ...coreProps }) {
+    //1. Holding the ids of Description, Error and Success, so Button announces them to screen readers through aria-describedby
     const [messageIds, setMessageIds] = useState([]);
+    //2. Mirroring Base UI's live state, so parts outside Button (Label, Description…) can carry its data attributes
     const [state, setState] = useState({
         checked: coreProps.checked ?? coreProps.defaultChecked ?? false,
         indeterminate: coreProps.indeterminate ?? false,
@@ -49,13 +50,16 @@ export function Root({ children, id, tone = 'neutral', ...coreProps }) {
         readOnly: coreProps.readOnly ?? false,
         required: coreProps.required ?? false,
     });
+    //3. Sharing everything with the parts
+    const generatedId = useId();
     return (_jsx(CheckboxContext.Provider, { value: {
             coreProps: { ...coreProps, id: id ?? generatedId },
             state,
             setState,
             messageIds,
             setMessageIds,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            validation: readValidation(validation),
+        }, children: children }));
 }
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
 export const CheckboxGroup = /* @__PURE__ */ forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
@@ -66,14 +70,19 @@ export const Container = /* @__PURE__ */ forwardRef(function Container({ disable
 });
 export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
     const context = useCheckboxContext();
-    const tone = useToneContext();
-    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
+    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "checkbox-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckboxButtonSurface, { ...buttonProps, state: state })) }));
 });
 /** 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) {
-    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? (_jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" })) : state.checked ? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" })) : null })) }));
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: (() => {
+                if (state.indeterminate)
+                    return _jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" });
+                if (state.checked)
+                    return _jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" });
+                return null;
+            })() })) }));
 });
 /** 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) {
@@ -84,15 +93,26 @@ export const Description = /* @__PURE__ */ forwardRef(function Description({ dis
     const messageId = useMessageId(id);
     return (_jsx("span", { ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-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("span", { role: "alert", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-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 = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "checkbox-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 = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "checkbox-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the checkbox
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
-    return (_jsx("span", { role: "status", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("span", { "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 const CheckboxContext = /* @__PURE__ */ createContext(null);
 function useCheckboxContext() {
@@ -102,21 +122,21 @@ function useCheckboxContext() {
     return context;
 }
 function usePartAttributes() {
-    const { state } = useCheckboxContext();
-    const tone = useToneContext();
+    const context = useCheckboxContext();
     return {
-        'data-checked': state.checked ? '' : undefined,
-        'data-indeterminate': state.indeterminate ? '' : undefined,
-        'data-disabled': state.disabled ? '' : undefined,
-        'data-readonly': state.readOnly ? '' : undefined,
-        'data-required': state.required ? '' : undefined,
-        'data-tone': tone,
+        'data-checked': context.state.checked ? '' : undefined,
+        'data-indeterminate': context.state.indeterminate ? '' : undefined,
+        'data-disabled': context.state.disabled ? '' : undefined,
+        'data-readonly': context.state.readOnly ? '' : undefined,
+        'data-required': context.state.required ? '' : undefined,
+        ...validationAttributes(context.validation),
     };
 }
+// Rendered by Base UI as the checkbox element, it reports Base UI's live state back to Root's mirror
 const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
-    const { setState } = useCheckboxContext();
+    const context = useCheckboxContext();
     useEffect(() => {
-        setState({
+        context.setState({
             checked: state.checked,
             indeterminate: state.indeterminate,
             disabled: state.disabled,
@@ -129,18 +149,18 @@ const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButton
         state.disabled,
         state.readOnly,
         state.required,
-        setState,
+        context.setState,
     ]);
     return _jsx("span", { ...props, ref: ref });
 });
+// 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 } = useCheckboxContext();
+    const context = useCheckboxContext();
     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/chip/index.d.ts

@@ -17,10 +17,10 @@ import type { ComponentProps, ReactElement } from 'react';
  * }
  */
 export declare function Chip({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export declare function CloseButton({ disableStyle, type, className, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function CloseButtonIcon({ 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

package/dist/components/chip/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { X } from 'lucide-react';
+import { X } from "../../utils/icons.js";
 import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
@@ -21,13 +21,13 @@ import { twMerge } from 'tailwind-merge';
 export function Chip({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "chip-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export function CloseButton({ disableStyle, type = 'button', className, ...props }) {
     return (_jsx("button", { ...props, type: type, "data-component": "chip-closebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'chip-closebuttonicon',
@@ -37,4 +37,3 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
 }
-//# sourceMappingURL=index.js.map