@central-ui/react 0.1.2 → 0.2.0

package/dist/components/input/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
-import { LoaderCircle, X } from 'lucide-react';
-import { useRef } from 'react';
+import { LoaderCircle, X } from "../../utils/icons.js";
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
- * 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'
@@ -44,13 +43,14 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
+export function Root({ children, id, validation, value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
+    //1. Holding the value when nothing controls it from outside
+    const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
+    //2. Holding the ids of Description, Error and Success, so Input announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
+    //3. Sharing everything with the parts
     const generatedId = useId();
     const inputRef = useRef(null);
-    const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
     return (_jsx(InputContext.Provider, { value: {
             inputId: id ?? generatedId,
             disabled,
@@ -58,51 +58,35 @@ export function Root({ children, id, tone = 'neutral', value, defaultValue, onVa
             required,
             inputRef,
             value: value ?? valueInternalState,
-            setValueInternalState,
             defaultValue,
             controlled: value !== undefined,
+            setValueInternalState,
             onValueChange,
+            validation: readValidation(validation),
             coreProps,
-            connections,
-            setConnections,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            describedByIds,
+            setDescribedByIds,
+        }, children: children }));
 }
 export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
-    const inputRef = useRef(null);
+    const attributes = usePartAttributes();
+    // Resetting the internal value when the surrounding html form resets, since the input is always controlled by Root's value
     useEffect(() => {
-        const form = inputRef.current?.form;
+        const form = context.inputRef.current?.form;
         if (!form || context.controlled)
             return;
-        const reset = (event) => {
-            queueMicrotask(() => {
-                if (!event.defaultPrevented)
-                    context.setValueInternalState(context.defaultValue ?? '');
-            });
-        };
+        const reset = (event) => queueMicrotask(() => !event.defaultPrevented && context.setValueInternalState(context.defaultValue ?? ''));
         form.addEventListener('reset', reset);
         return () => form.removeEventListener('reset', reset);
-    }, [
-        context.controlled,
-        context.defaultValue,
-        context.setValueInternalState,
-        context.coreProps.form,
-    ]);
-    useEffect(() => {
-        context.inputRef.current = inputRef.current;
-        return () => {
-            context.inputRef.current = null;
-        };
-    }, [context.inputRef]);
-    return (_jsx(BaseInput, { ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
-            .filter(Boolean)
-            .join(' ') || undefined, ref: (element) => {
-            inputRef.current = element;
+    }, [context.controlled, context.defaultValue, context.setValueInternalState, context.coreProps.form]);
+    return (_jsx(BaseInput, { ...attributes, ...context.coreProps, ...props, id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ref: (element) => {
+            // Sharing the element with Root's parts, like the clear button, while still forwarding the caller's ref
+            context.inputRef.current = element;
             if (typeof ref === 'function')
-                ref(inputRef.current);
+                ref(context.inputRef.current);
             else if (ref)
-                ref.current = inputRef.current;
+                ref.current = context.inputRef.current;
         }, onValueChange: (nextValue, details) => {
             context.onValueChange?.(nextValue, details);
             if (!details.isCanceled && !context.controlled)
@@ -111,76 +95,68 @@ export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, c
 });
 export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
     const attributes = usePartAttributes();
+    // Focusing the input when clicking anywhere in the group, like on its padding or an addon text
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
-    return (_jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "input-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "input-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "input-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, "data-component": "input-container", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** 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, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
     const context = useInputContext();
-    const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
-    useEffect(() => {
-        context.setConnections((current) => ({ ...current, labelId }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            labelId: current.labelId === labelId ? undefined : current.labelId,
-        }));
-    }, [labelId, context.setConnections]);
-    return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "input-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "input-label", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "input-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "input-description", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "input-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
+export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+    const context = useInputContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "input-error", children: content });
+});
+/** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
+export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+    const context = useInputContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "input-success", children: content });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the input
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+    const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "input-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "input-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "input-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "input-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("span", { ...attributes, ...props, ref: ref, "data-component": "input-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export function AddonIcon({ disableStyle, children, className, ...props }) {
-    const attributes = usePartAttributes();
-    return cloneElement(children, {
-        ...attributes,
-        ...props,
-        'aria-hidden': true,
-        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
-        ...{
-            'data-component': 'input-addonicon',
-            'data-style-disabled': disableStyle ? '' : undefined,
-        },
-        className: twMerge(children.props.className, className),
-    });
+export function AddonIcon(props) {
+    return _jsx(ClonedIcon, { ...props, component: "input-addonicon" });
 }
 export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
     const context = useInputContext();
     const attributes = usePartAttributes();
-    return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "input-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "input-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Built-in icon; no children needed. Use it inside its matching control. */
 export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "input-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "input-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 /** Clears the control automatically; no clearing click handler needed. Supply the clear icon and an accessible name. */
 export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, disabled, onClick, ...props }, ref) {
@@ -188,28 +164,29 @@ export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearBu
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, "aria-label": "Clear text", ...props, ref: ref, type: "button", disabled: disabled || context.disabled || context.readOnly, onClick: (event) => {
             onClick?.(event);
-            if (event.defaultPrevented)
-                return;
             const input = context.inputRef.current;
-            if (!input)
+            if (event.defaultPrevented || !input)
                 return;
+            // Emptying through the native value setter then dispatching an input event, so the change goes through the same path as typing, reaching onValueChange and the form
             Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(input, '');
             input.dispatchEvent(new Event('input', { bubbles: true }));
             input.focus();
         }, "data-component": "input-addonclearbutton", "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 AddonClearButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
+export function AddonClearButtonIcon({ children = _jsx(X, {}), ...props }) {
+    return _jsx(ClonedIcon, { ...props, component: "input-addonclearbuttonicon", children: children });
+}
+// The shared body of AddonIcon and AddonClearButtonIcon: decorates the supplied icon element, keeping its own classes and stroke
+function ClonedIcon({ disableStyle, children, className, component, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children, {
         ...attributes,
         ...props,
         'aria-hidden': true,
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
-        ...{
-            'data-component': 'input-addonclearbuttonicon',
-            'data-style-disabled': disableStyle ? '' : undefined,
-        },
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children.props.className, className),
     });
 }
@@ -220,30 +197,24 @@ function useInputContext() {
         throw new globalThis.Error('Parts must be inside Root');
     return context;
 }
+// The state attributes every part carries, so presets can style any part from Root's state
 function usePartAttributes() {
     const context = useInputContext();
-    const tone = useToneContext();
     return {
         'data-disabled': context.disabled ? '' : undefined,
         'data-readonly': context.readOnly ? '' : undefined,
         'data-required': context.required ? '' : undefined,
-        'data-tone': tone,
+        ...validationAttributes(context.validation),
     };
 }
-function useMessageId(id) {
-    const generatedId = useId();
-    const messageId = id ?? generatedId;
+// Registering a part's id in Input's aria-describedby while the part is mounted
+function useDescribedById(id) {
     const context = useInputContext();
+    const generatedId = useId();
+    const describedById = id ?? generatedId;
     useEffect(() => {
-        context.setConnections((current) => ({
-            ...current,
-            descriptionIds: [...current.descriptionIds, messageId],
-        }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
-        }));
-    }, [messageId, context.setConnections]);
-    return messageId;
+        context.setDescribedByIds((current) => [...current, describedById]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== describedById));
+    }, [describedById, context.setDescribedByIds]);
+    return describedById;
 }
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,114 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Area as RechartsArea, ComposedChart as RechartsComposedChart } from 'recharts';
+import type { LineProps as RechartsLineProps, 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 point height). Extra fields are kept for the tooltip. */
+type Datum = {
+    label: string;
+    value: number;
+};
+export type RootProps<Data extends Datum = Datum> = Pick<ComponentProps<typeof RechartsComposedChart>, '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;
+    /**
+     * How the line, and the shaded area under it, bend between points.
+     * - `'monotone'`: smooth, but never overshoots a real value. The usual choice for trends like revenue or traffic.
+     * - `'linear'`: straight segments with sharp corners. Use it when each point is a distinct measurement and smoothing would imply values in between.
+     * - `'step'`: flat steps that jump at each point. Use it for values that hold until they change, such as prices, plans, or inventory levels.
+     * @default 'monotone'
+     */
+    curve?: 'monotone' | 'linear' | 'step';
+};
+/** 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, curve, ...chart }: RootProps<Data>): import("react").JSX.Element;
+export type ContainerProps = Pick<ComponentProps<typeof RechartsComposedChart>, '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="linechart-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 LineProps = Pick<RechartsLineProps, 'hide' | 'name'> & {
+    /** Classes for the line, e.g. `stroke-sky-500`. It is 2px wide by default; override with `stroke-3`. */
+    className?: string;
+    /** The dot on the hovered point. Pass `false` to hide it; style it through `data-component="linechart-activedot"`. */
+    activeDot?: LineSwitch;
+};
+export declare function Line({ className, activeDot, ...props }: LineProps): import("react").JSX.Element;
+export type AreaProps = Pick<ComponentProps<typeof RechartsArea>, 'hide'> & {
+    /** Classes for the shading, e.g. `fill-sky-500/10`. */
+    className?: string;
+};
+/** Optional shading under the line. Render it before Line so the line draws on top. */
+export declare function Area({ className, ...props }: AreaProps): 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/linechart/index.js

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

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

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