@central-ui/react 0.1.1 → 0.2.0

package/dist/components/avatar/index.js

@@ -33,14 +33,14 @@ export function Root({ children, size = 'medium', ...props }) {
     // Native Root renders a span; the fragment preserves our wrapper-free Root contract.
     return (_jsx(SizeContext.Provider, { value: size, children: _jsx(BaseAvatar.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }) }));
 }
-export const List = forwardRef(function List({ disableStyle, className, ...props }, ref) {
+export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "avatar-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Image = forwardRef(function Image({ disableStyle, className, ...props }, ref) {
+export const Image = /* @__PURE__ */ forwardRef(function Image({ disableStyle, className, ...props }, ref) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Image, { ...props, ref: ref, "data-size": size, "data-component": "avatar-image", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const FallbackNameInitials = forwardRef(function FallbackNameInitials({ disableStyle, color, children, className, style, ...props }, ref) {
+export const FallbackNameInitials = /* @__PURE__ */ forwardRef(function FallbackNameInitials({ disableStyle, color, children, className, style, ...props }, ref) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, "data-size": size, role: "img", "aria-label": children, style: typeof style === 'function'
             ? (state) => ({ backgroundColor: color, ...style(state) })
@@ -52,9 +52,9 @@ export const FallbackNameInitials = forwardRef(function FallbackNameInitials({ d
             .join('')
             .slice(0, 2) }));
 });
-export const FallbackImage = forwardRef(function FallbackImage({ disableStyle, className, delay, ...props }, ref) {
+export const FallbackImage = /* @__PURE__ */ forwardRef(function FallbackImage({ disableStyle, className, delay, ...props }, ref) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { delay: delay, render: _jsx("img", { ...props, ref: ref }), "data-size": size, "data-component": "avatar-fallbackimage", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-const SizeContext = createContext('medium');
-//# sourceMappingURL=index.js.map
+const SizeContext = 
+/* @__PURE__ */ createContext('medium');

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

@@ -26,4 +26,3 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -23,9 +23,10 @@ export default function Badge({ disableStyle, className, tone, ...props }) {
 }
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function Icon({ disableStyle, children, className, ...props }) {
+    // cloneElement keeps the icon's own props, so only the added ones are passed
     return cloneElement(children, {
-        ...children.props,
         ...props,
+        // Spread from an object so the data-* keys pass the element props' excess property check
         ...{
             'data-component': 'badge-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -33,4 +34,3 @@ export function Icon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-//# sourceMappingURL=index.js.map

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

@@ -57,6 +57,7 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     'data-tone'?: BannerTone;
 }, string | import("react").JSXElementConstructor<any>>;
 export declare function Title({ disableStyle, className, ...props }: ComponentProps<'h2'> & StyleProps): import("react").JSX.Element;
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Dismiss". */
 export declare function CloseButton({ disableStyle, type, className, onClick, ...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'> & {
@@ -68,4 +69,3 @@ export declare function CloseButtonIcon({ disableStyle, children, className, ...
 export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/banner/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircleAlert, CircleCheck, Info, Text, TriangleAlert, X, } from 'lucide-react';
+import { CircleAlert, CircleCheck, Info, Text, TriangleAlert, X, } from "../../utils/icons.js";
 import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-const BannerContext = createContext({
+const BannerContext = /* @__PURE__ */ createContext({
     tone: 'neutral',
 });
 /**
@@ -48,32 +48,31 @@ export function Root({ tone = 'neutral', onClose, children, }) {
     return (_jsx(BannerContext.Provider, { value: { tone, onClose }, children: children }));
 }
 export function Surface({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Header({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-header", "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 Icon({ disableStyle, children, className, ...props }) {
-    const { tone } = useContext(BannerContext);
+    const context = useContext(BannerContext);
     const icon = children ??
         (() => {
-            if (tone === 'danger')
+            if (context.tone === 'danger')
                 return _jsx(CircleAlert, {});
-            if (tone === 'informative')
+            if (context.tone === 'informative')
                 return _jsx(Info, {});
-            if (tone === 'success')
+            if (context.tone === 'success')
                 return _jsx(CircleCheck, {});
-            if (tone === 'caution')
+            if (context.tone === 'caution')
                 return _jsx(TriangleAlert, {});
             return _jsx(Text, {});
         })();
     return cloneElement(icon, {
-        ...icon.props,
         ...props,
-        'data-tone': tone,
+        'data-tone': context.tone,
         ...{
             'data-component': 'banner-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -82,24 +81,24 @@ export function Icon({ disableStyle, children, className, ...props }) {
     });
 }
 export function Title({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("h2", { ...props, "data-tone": tone, "data-component": "banner-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("h2", { ...props, "data-tone": context.tone, "data-component": "banner-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Dismiss". */
 export function CloseButton({ disableStyle, type = 'button', className, onClick, ...props }) {
-    const { tone, onClose } = useContext(BannerContext);
-    return (_jsx("button", { ...props, type: type, "data-tone": tone, onClick: (event) => {
+    const context = useContext(BannerContext);
+    return (_jsx("button", { ...props, type: type, "data-tone": context.tone, onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented)
-                onClose?.();
+                context.onClose?.();
         }, "data-component": "banner-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 }) {
-    const { tone } = useContext(BannerContext);
+    const context = useContext(BannerContext);
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        'data-tone': tone,
+        'data-tone': context.tone,
         ...{
             'data-component': 'banner-closebuttonicon',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -109,11 +108,10 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
     });
 }
 export function Body({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Description({ disableStyle, className, ...props }) {
-    const { tone } = useContext(BannerContext);
-    return (_jsx("div", { ...props, "data-tone": tone, "data-component": "banner-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const context = useContext(BannerContext);
+    return (_jsx("div", { ...props, "data-tone": context.tone, "data-component": "banner-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-//# sourceMappingURL=index.js.map

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 = 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 = 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

@@ -1,5 +1,5 @@
 import type { StyleProps } from '../../types/Style.ts';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ButtonHTMLAttributes, ComponentProps, ReactElement } from 'react';
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'variant'> & {
     /** Choose the preset appearance; this does not add action behavior. */
@@ -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 }: LucideProps & 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 = 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 = 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