@central-ui/react 0.1.2 → 0.2.0

package/dist/components/fileupload/index.js

@@ -1,11 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
 import { FileUpload as ArkFileUpload, useFileUpload, useFileUploadContext, } from '@ark-ui/react/file-upload';
-import { File as FileIcon, Upload, X } from 'lucide-react';
-import { cloneElement, createContext, useContext, Fragment } from 'react';
+import { File as FileIcon, Upload, X } from "../../utils/icons.js";
+import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { arkStateToDataAttributes } from "../../utils/ArkStateToDataAttributes.js";
 /**
- * Root manages accepted/rejected files, validation, and picker behavior. Dropzone/FilePickerOpenButton open the picker; do not add a second file input. FileList supplies entries; pass each entry file and status to File. FileThumbnail chooses image preview versus fallback automatically.
+ * Root manages accepted/rejected files, validation, and picker behavior. Dropzone/PickerButton open the picker; do not add a second file input. FileList supplies entries; pass each entry file and status to File. FileThumbnail chooses image preview versus fallback automatically.
  *
  * @example Complete composition
  * import { FileUpload } from '@central-ui/react'
@@ -19,7 +20,7 @@ import { arkStateToDataAttributes } from "../../utils/ArkStateToDataAttributes.j
  *           <FileUpload.UploadIcon />
  *           <FileUpload.Title>Drop an image here</FileUpload.Title>
  *           <FileUpload.Description>PNG or JPG up to 10 MB.</FileUpload.Description>
- *           <FileUpload.FilePickerOpenButton>Browse image</FileUpload.FilePickerOpenButton>
+ *           <FileUpload.PickerButton>Browse image</FileUpload.PickerButton>
  *           <FileUpload.FileList>
  *             {({ file, status }) => (
  *               <FileUpload.File file={file} status={status}>
@@ -50,8 +51,8 @@ import { arkStateToDataAttributes } from "../../utils/ArkStateToDataAttributes.j
  * </FileUpload.Root>
  */
 export function Root({ children, ...props }) {
-    const file_upload = useFileUpload(props);
-    return (_jsx(ArkFileUpload.RootProvider, { value: file_upload, asChild: true, children: _jsx(_Fragment, { children: children }) }));
+    const fileUpload = useFileUpload(props);
+    return (_jsx(ArkFileUpload.RootProvider, { value: fileUpload, asChild: true, children: _jsx(_Fragment, { children: children }) }));
 }
 export function Container({ disableStyle, className, ...props }) {
     return (_jsx("div", { "data-component": "fileupload-container", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
@@ -62,16 +63,17 @@ export function Label({ disableStyle, className, ...props }) {
 export function Dropzone({ disableStyle, children, className, ...props }) {
     return (_jsxs(ArkFileUpload.Dropzone, { ...props, "data-component": "fileupload-dropzone", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [children, _jsx(ArkFileUpload.HiddenInput, {})] }));
 }
-export function FilePickerOpenButton({ disableStyle, className, ...props }) {
-    return (_jsx(ArkFileUpload.Trigger, { ...props, "data-component": "fileupload-filepickeropenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Opens the file picker. Pass asChild to give this behavior to your own button, like an "Upload" Button; it keeps the state data attributes but none of this part's styling. */
+export function PickerButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'fileupload-pickerbutton', disableStyle });
+    return _jsx(ArkFileUpload.Trigger, { ...props, asChild: asChild, ...styleAttributes });
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function UploadIcon({ disableStyle, children = _jsx(Upload, {}), className, ...props }) {
-    const file_upload = useFileUploadContext();
+    const fileUpload = useFileUploadContext();
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        ...arkStateToDataAttributes(file_upload),
+        ...arkStateToDataAttributes(fileUpload),
         ...useFileStatusAttributes(),
         ...{
             'data-component': 'fileupload-uploadicon',
@@ -82,26 +84,20 @@ export function UploadIcon({ disableStyle, children = _jsx(Upload, {}), classNam
     });
 }
 export function Title({ disableStyle, className, ...props }) {
-    const file_upload = useFileUploadContext();
-    return (_jsx("p", { ...props, ...arkStateToDataAttributes(file_upload), ...useFileStatusAttributes(), "data-component": "fileupload-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const fileUpload = useFileUploadContext();
+    return (_jsx("p", { ...props, ...arkStateToDataAttributes(fileUpload), ...useFileStatusAttributes(), "data-component": "fileupload-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function Description({ disableStyle, className, ...props }) {
-    const file_upload = useFileUploadContext();
-    return (_jsx("p", { ...props, ...arkStateToDataAttributes(file_upload), ...useFileStatusAttributes(), "data-component": "fileupload-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    const fileUpload = useFileUploadContext();
+    return (_jsx("p", { ...props, ...arkStateToDataAttributes(fileUpload), ...useFileStatusAttributes(), "data-component": "fileupload-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 // Keep Ark's accepted and rejected arrays native; only merge their presentation.
 export function FileList({ disableStyle, children, className, style, onClick, ...props }) {
-    const upload = useFileUploadContext();
+    const fileUpload = useFileUploadContext();
+    // One list of accepted and rejected files, each knowing its status
     const entries = [
-        ...upload.acceptedFiles.map((file) => ({
-            file,
-            status: 'accepted',
-            errors: [],
-        })),
-        ...upload.rejectedFiles.map((rejection) => ({
-            ...rejection,
-            status: 'rejected',
-        })),
+        ...fileUpload.acceptedFiles.map((file) => ({ file, status: 'accepted', errors: [] })),
+        ...fileUpload.rejectedFiles.map((rejection) => ({ ...rejection, status: 'rejected' })),
     ];
     return (_jsx("ul", { ...props, style: { ...style, cursor: 'default' }, onClick: (event) => {
             // Clicks anywhere in the file list must not open the surrounding Dropzone.
@@ -111,7 +107,7 @@ export function FileList({ disableStyle, children, className, style, onClick, ..
 }
 export function File({ disableStyle, status, className, children, ...props }) {
     const entry = useContext(FileStatusContext);
-    return (_jsx(ArkFileUpload.ItemGroup, { type: status, asChild: true, children: _jsx(Fragment, { children: _jsx(FileStatusContext.Provider, { value: { status, errors: entry.errors }, children: _jsx(ArkFileUpload.Item, { ...props, "data-status": status, "data-component": "fileupload-file", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }) }) }) }));
+    return (_jsx(ArkFileUpload.ItemGroup, { type: status, asChild: true, children: _jsx(_Fragment, { children: _jsx(FileStatusContext.Provider, { value: { status, errors: entry.errors }, children: _jsx(ArkFileUpload.Item, { ...props, "data-status": status, "data-component": "fileupload-file", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }) }) }) }));
 }
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
 export function FileErrorText({ disableStyle, children, className, ...props }) {
@@ -130,11 +126,10 @@ export function FileThumbnail({ disableStyle, children, className, ...props }) {
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function FileThumbnailIcon({ disableStyle, children = _jsx(FileIcon, {}), className, ...props }) {
-    const file_upload = useFileUploadContext();
+    const fileUpload = useFileUploadContext();
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        ...arkStateToDataAttributes(file_upload),
+        ...arkStateToDataAttributes(fileUpload),
         ...useFileStatusAttributes(),
         ...{
             'data-component': 'fileupload-filethumbnailicon',
@@ -152,22 +147,16 @@ export function FileName({ disableStyle, className, ...props }) {
 export function FileSize({ disableStyle, className, ...props }) {
     return (_jsx(ArkFileUpload.ItemSizeText, { ...props, ...useFileStatusAttributes(), "data-component": "fileupload-filesize", "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 function FileRemoveHandler({ children, ...props }) {
-    const attributes = useFileStatusAttributes();
-    return (_jsx(ArkFileUpload.ItemDeleteTrigger, { ...props, ...attributes, asChild: true, children: children }));
-}
 /** Removes the surrounding file automatically, including rejected entries. No extra removal click handler needed. */
 export function FileRemoveButton({ disableStyle, children, className, ...props }) {
     return (_jsx(ArkFileUpload.ItemDeleteTrigger, { ...props, ...useFileStatusAttributes(), asChild: false, "data-component": "fileupload-fileremovebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function FileRemoveButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
-    const file_upload = useFileUploadContext();
+    const fileUpload = useFileUploadContext();
     return cloneElement(children, {
-        ...children.props,
         ...props,
-        ...arkStateToDataAttributes(file_upload),
+        ...arkStateToDataAttributes(fileUpload),
         ...useFileStatusAttributes(),
         ...{
             'data-component': 'fileupload-fileremovebuttonicon',
@@ -182,4 +171,3 @@ const FileStatusContext = /* @__PURE__ */ createContext({ errors: [] });
 function useFileStatusAttributes() {
     return { 'data-status': useContext(FileStatusContext).status };
 }
-//# sourceMappingURL=index.js.map

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

@@ -31,4 +31,3 @@ import type { FormHTMLAttributes } from 'react';
  * }
  */
 export declare function Form({ disableStyle, className, ...props }: FormHTMLAttributes<HTMLFormElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/form/index.js

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

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

@@ -0,0 +1,120 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { BarChart as RechartsBarChart } from 'recharts';
+import type { BarProps as RechartsBarProps, TooltipProps as RechartsTooltipProps, XAxisProps as RechartsXAxisProps } from 'recharts';
+import type { StyleProps } from '../../types/Style.ts';
+/** Every record needs a unique `label` (the category) and a numeric `value` (the bar length). 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'> & {
+    /** Rows are drawn top to bottom in this order, so sort the records before passing them (e.g. largest first). */
+    data: readonly Data[];
+    'aria-label': string;
+    children: ReactNode;
+    /**
+     * Converts a record's `label` into display text.
+     * Used by the category names and the tooltip label, so both always read the same.
+     * Use it to shorten long names or to join fields (e.g. `'United States · Iowa'`).
+     * @default (label) => label
+     */
+    labelToString?: (label: string) => string;
+    /**
+     * Converts a record's `value` into display text.
+     * Used by the value at each bar's end, the X axis ticks, and the tooltip value, so all read the same.
+     * Use it for currency, percentages, or units (e.g. `53700` → `'$53.7K'`).
+     * @default (value) => value.toLocaleString()
+     */
+    valueToString?: (value: number) => string;
+    /**
+     * Whether the X axis may place ticks at fractional values. Only matters when the XAxis part is rendered.
+     * Keep it `false` for counts (sessions, orders) so the axis never shows `0.5 sessions`.
+     * Set it to `true` for continuous measures where fractions are meaningful, such as ratings.
+     * @default false
+     */
+    allowDecimals?: boolean;
+    /**
+     * Where each category name sits.
+     * - `'top'`: above its bar, left-aligned. Bars keep the full width, so long names and long bars both fit. The usual choice for dashboards.
+     * - `'left'`: in a column left of the bars, like a classic axis. Use it when names are short and rows should line up as a table.
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'left';
+};
+/** 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, labelPosition, ...chart }: RootProps<Data>): import("react").JSX.Element;
+export type ContainerProps = Pick<ComponentProps<typeof RechartsBarChart>, 'children' | 'height' | 'className' | 'style' | 'id' | 'margin' | 'ref' | 'tabIndex'> & {
+    /**
+     * A horizontal line through the hovered row.
+     * Off by default: the hovered bar already dims, so a guide adds little here.
+     * Turn it on for many thin rows, where it helps the eye follow a row to its value. Style it through `data-component="horizontalbarchart-hoverguide"`.
+     * @default false
+     */
+    hoverGuide?: LineSwitch;
+};
+/** On/off only: style it through its data-component in a preset, so each export keeps one className. */
+type LineSwitch = boolean;
+/** 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;
+export type XAxisProps = Pick<RechartsXAxisProps, '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;
+};
+/** Shows the value ticks along the bottom. Optional: without it the scale still exists, just unlabeled. Renders no element. */
+export declare function XAxis({ className, axisLine, tickLine, tickSize, labelGap, }: XAxisProps): null;
+export type GridProps = {
+    /** Classes for every grid line, e.g. `stroke-neutral-200 [stroke-dasharray:4_4]`. */
+    className?: string;
+};
+/** Vertical lines only, one per X value tick, marking milestones along the bars. */
+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;
+    /** Optional BarLabel and BarValue parts, drawn on every bar. */
+    children?: ReactNode;
+};
+export declare function Bars({ className, activeBar, children, ...props }: BarsProps): import("react").JSX.Element;
+export type BarLabelProps = {
+    /** Classes for the category names, e.g. `fill-neutral-500`. Target the placement with `data-[position=top]:` or `data-[position=left]:`. */
+    className?: string;
+};
+/**
+ * Each bar's category name, formatted by `labelToString` on Root and placed by Root's `labelPosition`.
+ * Recharts draws it as a LabelList inside the bar; omit it for bars without names.
+ */
+export declare function BarLabel({ className }: BarLabelProps): import("react").JSX.Element | null;
+export type BarValueProps = {
+    /** Classes for the value printed past each bar's end, e.g. `fill-neutral-500`. */
+    className?: string;
+};
+/** Each bar's value, formatted by `valueToString` on Root and printed past the bar's end. Recharts draws it as a LabelList inside the bar. */
+export declare function BarValue({ className }: BarValueProps): 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/horizontalbarchart/index.js

@@ -0,0 +1,193 @@
+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, LabelList as RechartsLabelList, Rectangle as RechartsRectangle, Text as RechartsText, Tooltip as RechartsTooltip, XAxis as RechartsXAxis, YAxis as RechartsYAxis, usePlotArea, } from 'recharts';
+// Recharts measures labels at this size; colors come from className or a preset.
+const textSize = { fontSize: 12 };
+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, labelPosition = 'top', ...chart }) {
+    return (_jsx(ChartContext.Provider, { value: {
+            ...chart,
+            labelToString,
+            valueToString,
+            allowDecimals,
+            labelPosition,
+        }, children: children }));
+}
+function useChart(part) {
+    const chart = useContext(ChartContext);
+    if (!chart)
+        throw new Error(`HorizontalBarChart.${part} must be inside HorizontalBarChart.Root`);
+    return chart;
+}
+const lineProps = (line, part) => 
+// Recharts forwards data attributes at runtime; its types omit them.
+(line && { 'data-component': part });
+/** Lets optional parts hand their settings to the Container, which owns the axes and the single Recharts tooltip. */
+const SlotsContext = /* @__PURE__ */ createContext(null);
+/** Recharts supplies its own responsive container, so no extra wrapper is needed. */
+export function Container({ height = 300, className, style, children, hoverGuide = false, ...props }) {
+    const chart = useChart('Container');
+    const [tooltip, setTooltip] = useState(null);
+    const [xAxis, setXAxis] = useState(null);
+    const [label, setLabel] = useState(null);
+    const [slots] = useState(() => ({
+        setTooltip,
+        setXAxis,
+        setLabel,
+    }));
+    const labelsOnTop = chart.labelPosition === 'top';
+    const { className: xTickClassName, labelGap = 8, axisLine = false, tickLine = false, tickSize, } = xAxis ?? {};
+    return (_jsxs(RechartsBarChart
+    // Top room for the first name; right room for the value printed past each bar's end.
+    , { 
+        // Top room for the first name; right room for the value printed past each bar's end.
+        margin: { top: labelsOnTop ? 20 : 12, right: 56, 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: "vertical", 
+        // Recharts applies this gap on both sides of a bar. With names on top, 12px a side
+        // always leaves 24px between bars for a name, however many rows there are.
+        barCategoryGap: labelsOnTop ? 12 : '20%', children: [_jsx(RechartsXAxis, { height: "auto", tickSize: tickSize, axisLine: lineProps(axisLine, 'horizontalbarchart-xaxis-line'), tickLine: lineProps(tickLine, 'horizontalbarchart-xaxis-tickline'), hide: !xAxis, tickMargin: labelGap, tickFormatter: chart.valueToString, allowDecimals: chart.allowDecimals, fontSize: 12, tick: {
+                    className: xTickClassName,
+                    'data-component': 'horizontalbarchart-xaxis-ticklabel',
+                }, dataKey: "value", 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 }), _jsx(RechartsYAxis
+            // Names sit on the left only when a BarLabel part is rendered.
+            , { 
+                // Names sit on the left only when a BarLabel part is rendered.
+                hide: labelsOnTop || !label, axisLine: false, tickLine: false, width: "auto", tickMargin: 8, tickFormatter: chart.labelToString, fontSize: 12, tick: {
+                    className: label?.className,
+                    'data-component': 'horizontalbarchart-label',
+                    'data-position': 'left',
+                }, dataKey: "label", type: "category", label: false, angle: 0, interval: 0 }), _jsx(SlotsContext.Provider, { value: slots, 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) }));
+                } })] }));
+}
+function useSlots(part) {
+    const slots = useContext(SlotsContext);
+    if (!slots)
+        throw new Error(`HorizontalBarChart.${part} must be inside HorizontalBarChart.Container`);
+    return slots;
+}
+/** Shows the value ticks along the bottom. Optional: without it the scale still exists, just unlabeled. Renders no element. */
+export function XAxis({ className, axisLine, tickLine, tickSize, labelGap, }) {
+    const slots = useSlots('XAxis');
+    useLayoutEffect(() => {
+        slots.setXAxis({ className, axisLine, tickLine, tickSize, labelGap });
+        return () => slots.setXAxis(null);
+    }, [slots.setXAxis, className, axisLine, tickLine, tickSize, labelGap]);
+    return null;
+}
+/** Vertical lines only, one per X value tick, marking milestones along the bars. */
+export function Grid({ className }) {
+    return (_jsx(RechartsGrid, { horizontal: false, 
+        // Recharts' native line slot: each line gets the class and a data-component hook.
+        vertical: {
+            className,
+            'data-component': 'horizontalbarchart-gridline',
+        }, fill: "none" }));
+}
+export function Bars({ className, activeBar = true, children, ...props }) {
+    return (_jsx(RechartsBar, { radius: 2, ...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": "horizontalbarchart-bar", "data-index": bar.index, "data-active": bar.isActive ? '' : undefined })), dataKey: "value", 
+        // Bars stretch to fill each row, but a few rows never become blocks.
+        maxBarSize: 80, 
+        // Zero rows still get a thin, hoverable sliver at the baseline.
+        minPointSize: 2, isAnimationActive: false, children: children }));
+}
+/**
+ * Each bar's category name, formatted by `labelToString` on Root and placed by Root's `labelPosition`.
+ * Recharts draws it as a LabelList inside the bar; omit it for bars without names.
+ */
+export function BarLabel({ className }) {
+    const chart = useChart('BarLabel');
+    const slots = useSlots('BarLabel');
+    // Names on the left are the Container's category axis, so it needs to know they exist and their classes.
+    useLayoutEffect(() => {
+        slots.setLabel({ className });
+        return () => slots.setLabel(null);
+    }, [slots.setLabel, className]);
+    if (chart.labelPosition !== 'top')
+        return null;
+    return (_jsx(RechartsLabelList, { dataKey: "label", content: (label) => _jsx(NameAboveBar, { ...label, className: className }) }));
+}
+/** Each bar's value, formatted by `valueToString` on Root and printed past the bar's end. Recharts draws it as a LabelList inside the bar. */
+export function BarValue({ className }) {
+    const chart = useChart('BarValue');
+    return (_jsx(RechartsLabelList, { dataKey: "value", position: "right", offset: 8, formatter: (value) => chart.valueToString(Number(value)), className: className, ...{ 'data-component': 'horizontalbarchart-value' }, ...textSize }));
+}
+/**
+ * Recharts sizes a bar's label to the bar itself, so short bars would wrap long names.
+ * Through LabelList's `content` slot, the name gets the plot's full width and one line instead,
+ * and Recharts' Text truncates it with an ellipsis only when it reaches the chart's edge.
+ */
+// viewBox is the bar's own rectangle, which Recharts passes to every label.
+function NameAboveBar({ viewBox, value, className, }) {
+    const chart = useChart('Bars');
+    const plotArea = usePlotArea();
+    if (!plotArea || !viewBox || !('x' in viewBox))
+        return null;
+    return (_jsx(RechartsText
+    // 6px above the bar's top-left corner, whatever the bar's thickness.
+    , { 
+        // 6px above the bar's top-left corner, whatever the bar's thickness.
+        x: viewBox.x, y: (viewBox.y ?? 0) - 6, 
+        // Names may run past the plot into the right margin reserved for values.
+        width: plotArea.width + 48, maxLines: 1, textAnchor: "start", verticalAnchor: "end", className: className, "data-component": "horizontalbarchart-label", "data-position": "top", ...textSize, children: chart.labelToString(String(value ?? '')) }));
+}
+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 slots = useSlots('Tooltip');
+    useLayoutEffect(() => {
+        slots.setTooltip({
+            render: children,
+            props: { offset, allowEscapeViewBox, portal },
+        });
+        return () => slots.setTooltip(null);
+    }, [slots.setTooltip, children, offset, allowEscapeViewBox, portal]);
+    return null;
+}
+/** Recharts gives the cursor the row's whole rectangle; only its center line is drawn. */
+function HoverGuide({ x = 0, y = 0, width = 0, height = 0, }) {
+    return (_jsx("line", { "data-component": "horizontalbarchart-hoverguide", 
+        // Draw at y=0 and move with a transform, so CSS can slide it between rows (Recharts' cursor has no animation of its own).
+        x1: x, x2: x + width, y1: 0, y2: 0, 
+        // The slide between points is built in.
+        className: "transition-transform duration-200 ease-out motion-reduce:transition-none", style: { transform: `translateY(${y + height / 2}px)` }, pointerEvents: "none" }));
+}
+export function TooltipPopup({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "horizontalbarchart-tooltip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function TooltipTitle({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "horizontalbarchart-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('HorizontalBarChart.TooltipLabel must be inside HorizontalBarChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "horizontalbarchart-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('HorizontalBarChart.TooltipValue must be inside HorizontalBarChart.Tooltip');
+    return (_jsx("p", { ...props, "data-component": "horizontalbarchart-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": "horizontalbarchart-tooltipcolorindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}

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

@@ -1,15 +1,14 @@
 import type { StyleProps } from '../../types/Style.ts';
-import { Input as BaseInput } from '@base-ui/react/input';
 import type { SVGIconProps } from '../../types/Icon.ts';
+import { Input as BaseInput } from '@base-ui/react/input';
+import type { ValidationProps } from '../../types/Validation.ts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
-export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> & {
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
+export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> & ValidationProps & {
     children?: ReactNode;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
 };
 /**
- * Keep configuration such as value, name, and validation tone on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
+ * Keep configuration such as value, name and validation on Root. Input is the editable control; InputGroup and Container organize it. Optional addon controls already have their own behavior where named, such as clearing.
  *
  * @example Complete composition
  * import { Input } from '@central-ui/react'
@@ -46,40 +45,41 @@ export type RootProps = Pick<BaseInput.Props, 'id' | 'name' | 'form' | 'value' |
  *   )
  * }
  */
-export declare function Root({ children, id, tone, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
-export type InputProps = Omit<BaseInput.Props, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type'> | 'className' | 'render'> & {
+export declare function Root({ children, id, validation, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
+export type InputProps = Omit<BaseInput.Props, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required' | 'type' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").InputProps, "form" | "className" | "defaultValue" | "id" | "name" | "type" | "disabled" | "value" | "render" | "onValueChange" | "required" | "readOnly"> & {
-    className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<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> & StyleProps & {
     /** Choose the preset appearance; this does not add action behavior. */
     variant?: "normal" | "emphasized";
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export declare function AddonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+export declare function AddonIcon(props: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** 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>>;
+}): import("react").JSX.Element;
 export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
 export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "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 AddonClearButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
+export declare function AddonClearButtonIcon({ children, ...props }: Omit<ComponentProps<'svg'>, 'children'> & StyleProps & {
     /** 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
+}): import("react").JSX.Element;
+export {};