@central-ui/react 0.1.2 → 0.3.0

package/dist/components/banner/index.js

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

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

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

package/dist/components/button/index.js

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

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

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

package/dist/components/card/index.js

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

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

@@ -0,0 +1,169 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { SVGIconProps } from '../../types/Icon.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+type IconProps = Omit<SVGIconProps, 'strokeWidth'> & {
+    /** @default 1.5 */
+    strokeWidth?: SVGIconProps['strokeWidth'];
+};
+type Orientation = 'horizontal' | 'vertical';
+export type RootProps = {
+    /** The carousel parts, like SlidesList, the buttons and IndicatorList. */
+    children: ReactNode;
+    /**
+     * The direction slides move in. A vertical carousel needs a height on SlidesList.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the last slide leads back to the first, and the first back to the last.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Where the selected slide sits inside SlidesList, when slides are narrower than it.
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * How many slides one Previous/Next press moves. 'auto' moves by as many slides as are fully visible.
+     * @default 1
+     */
+    slidesToScroll?: number | 'auto';
+    /**
+     * Whether a drag glides freely with momentum instead of stopping on a slide.
+     * @default false
+     */
+    dragFree?: boolean;
+    /**
+     * Space between slides, as a number of pixels or any CSS length. Size slides with a className on Slide, like `basis-1/3`; the gap is already subtracted from it.
+     * @default 0
+     */
+    gap?: number | string;
+    /**
+     * Turns off dragging and every button.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Moves to the next slide on its own. Pass true for the defaults, or an object to change them:
+     * - delay: milliseconds between slides (default 4000)
+     * - jump: jump instead of animating (default false)
+     * - playOnInit: start playing as soon as the carousel mounts (default true)
+     * - stopOnInteraction: whether a drag, hover or focus stops it for good; set false to resume once the user lets go, moves the mouse away, or moves focus out (default true)
+     * - stopOnMouseEnter: stop while the mouse is over SlidesList; it resumes on mouse leave only with stopOnInteraction false (default false)
+     * - stopOnFocusIn: stop when focus moves inside SlidesList; it resumes on focus out only with stopOnInteraction false (default true)
+     * - stopOnLastSnap: stop on the last slide (default false)
+     * @default false
+     */
+    autoplay?: boolean | Omit<AutoplayOptionsType, 'active' | 'breakpoints' | 'rootNode'>;
+    /** The selected slide's position, from 0. Use with onIndexChange to control it yourself. */
+    index?: number;
+    /**
+     * The slide the carousel starts on, when `index` isn't controlled.
+     * @default 0
+     */
+    defaultIndex?: number;
+    /** Called with the new position whenever another slide gets selected, by a drag, a button, or autoplay. */
+    onIndexChange?: (index: number) => void;
+};
+/**
+ * A row of slides users swipe through, built on Embla Carousel. Root holds the carousel's state and renders no element;
+ * SlidesList is the visible window and Slide is one item, written by hand so each can hold different content.
+ * Previous/Next and Indicator buttons work on their own: no click handlers needed.
+ * Every part carries data-orientation, data-disabled, and data-playing (while autoplay runs), so any part can be styled by the carousel's state.
+ *
+ * @example Complete composition
+ * import { Carousel } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Carousel.Root loop>
+ *       <Carousel.SlidesList>
+ *         {products.map((product) => (
+ *           <Carousel.Slide key={product.id}>
+ *             <img src={product.image} alt={product.title} />
+ *           </Carousel.Slide>
+ *         ))}
+ *       </Carousel.SlidesList>
+ *       <Carousel.PreviousButton aria-label="Previous slide">
+ *         <Carousel.PreviousButtonIcon />
+ *       </Carousel.PreviousButton>
+ *       <Carousel.NextButton aria-label="Next slide">
+ *         <Carousel.NextButtonIcon />
+ *       </Carousel.NextButton>
+ *       <Carousel.IndicatorList>
+ *         {(index) => <Carousel.IndicatorButton index={index} />}
+ *       </Carousel.IndicatorList>
+ *     </Carousel.Root>
+ *   )
+ * }
+ *
+ * @example Several slides at once
+ * // Size slides with Tailwind (responsive classes work); gap is subtracted from that size.
+ * ;<Carousel.Root gap={12} align="start" slidesToScroll="auto">
+ *   <Carousel.SlidesList>
+ *     <Carousel.Slide className="basis-full md:basis-1/3">…</Carousel.Slide>
+ *   </Carousel.SlidesList>
+ * </Carousel.Root>
+ *
+ * @example Autoplay, pausing while hovered and resuming on mouse leave
+ * ;<Carousel.Root loop autoplay={{ delay: 5000, stopOnMouseEnter: true, stopOnInteraction: false }}>
+ *
+ * @example Controlled position
+ * const [index, setIndex] = useState(0)
+ * ;<Carousel.Root index={index} onIndexChange={setIndex}>
+ */
+export declare function Root({ orientation, loop, align, slidesToScroll, dragFree, gap, disabled, autoplay, index, defaultIndex, onIndexChange, children, }: RootProps): import("react").JSX.Element;
+/** The visible window the slides move inside, announced to screen readers as the carousel. Style it freely (background, border, radius); a vertical carousel needs a height here. Put only Slides inside. */
+export declare const SlidesList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * One slide; each can hold different content. Size it with a className, like `basis-1/3`; it fills SlidesList by default.
+ * Its padding makes the gap between slides, so put backgrounds, borders and radius on its content, not on the Slide itself.
+ */
+export declare const Slide: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type ButtonPartProps = ComponentProps<'button'> & AsChildProps & StyleProps;
+/** Moves to the previous slide; no click handler needed. Disabled when there's no slide before (never with loop). Supply its content, normally PreviousButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export declare const PreviousButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Moves to the next slide; no click handler needed. Disabled when there's no slide after (never with loop). Supply its content, normally NextButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export declare const NextButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Renders one IndicatorButton per position through its children function, which receives that position's index.
+ * The count comes from the carousel itself: with several slides per view, it counts positions, not slides.
+ *
+ * @example Dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => <Carousel.IndicatorButton index={index} />}
+ * </Carousel.IndicatorList>
+ */
+export declare const IndicatorList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & StyleProps & {
+    /** Called once per position with its index; return an IndicatorButton. */
+    children: (index: number) => ReactNode;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Moves to its position when clicked, and carries data-selected while that position is shown. Shows as a dot when empty.
+ * Pass asChild to give this behavior to your own button instead.
+ *
+ * @example Thumbnails instead of dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => (
+ *     <Carousel.IndicatorButton index={index}>
+ *       <img src={images[index].thumbnail} alt="" />
+ *     </Carousel.IndicatorButton>
+ *   )}
+ * </Carousel.IndicatorList>
+ */
+export declare const IndicatorButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & AsChildProps & StyleProps & {
+    /** The position this button moves to, from IndicatorList's children function. */
+    index: number;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const PreviousButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const NextButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export {};