@central-ui/react 0.1.2 → 0.3.0

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

@@ -0,0 +1,100 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { PieChart as RechartsPieChart } from 'recharts';
+import type { TooltipProps as RechartsTooltipProps } from 'recharts';
+import type { StyleProps } from '../../types/Style.ts';
+/** Every record needs a unique `label` (the slice name) and a numeric `value` (its share). Extra fields are kept for the tooltip and legend. */
+type Datum = {
+    label: string;
+    value: number;
+};
+export type RootProps<Data extends Datum = Datum> = Pick<ComponentProps<typeof RechartsPieChart>, 'accessibilityLayer' | 'desc'> & {
+    /** Slices are drawn clockwise from 12 o'clock in this order, so sort the records first (e.g. largest first). */
+    data: readonly Data[];
+    'aria-label': string;
+    children: ReactNode;
+    /**
+     * Converts a record's `label` into display text.
+     * Used by the body, the legend, and the tooltip, so all read the same.
+     * @default (label) => label
+     */
+    labelToString?: (label: string) => string;
+    /**
+     * Converts a record's `value` (and the total) into display text.
+     * Used by the body, the legend, and the tooltip, so all read the same.
+     * Use it for currency, percentages, or units (e.g. `74678.2` → `'$74.6K'`).
+     * @default (value) => value.toLocaleString()
+     */
+    valueToString?: (value: number) => string;
+};
+/** Provides the chart data, formatting, and accessibility settings to its parts. Renders no element. */
+export declare function Root<Data extends Datum>({ children, labelToString, valueToString, ...chart }: RootProps<Data>): import("react").JSX.Element;
+export type ContainerProps = Pick<ComponentProps<typeof RechartsPieChart>, 'children' | 'height' | 'className' | 'style' | 'id' | 'ref' | 'tabIndex'>;
+/** Recharts supplies its own responsive container, so no extra wrapper is needed. */
+export declare function Container({ height, className, style, children, ...props }: ContainerProps): import("react").JSX.Element;
+export type TrackProps = {
+    /** Classes for the full ring behind the slices, e.g. `fill-neutral-100`. */
+    className?: string;
+};
+/** Optional full ring behind the slices. It keeps the donut visible when every value is 0. */
+export declare function Track({ className }: TrackProps): import("react").JSX.Element;
+export type SlicesProps = {
+    /**
+     * Classes for every slice. Colors come only from here or from a preset; there is no built-in color.
+     * Target one slice with `data-[index=0]:`, the hovered one with `data-active:`, and the others with `data-inactive:`
+     * (e.g. `data-[index=0]:fill-sky-500 data-[index=1]:fill-violet-200 data-inactive:opacity-40`).
+     */
+    className?: string;
+    /**
+     * Degrees of empty space between slices.
+     * @default 2
+     */
+    gap?: number;
+};
+export declare function Slices({ className, gap }: SlicesProps): import("react").JSX.Element;
+/**
+ * HTML laid over the donut's hole, so its content is ordinary JSX: Tailwind, fonts, and truncation all work.
+ * Rendered through an SVG foreignObject, which keeps it inside the chart and its hover state.
+ */
+export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element | null;
+/**
+ * Shows the hovered slice's label, formatted by `labelToString` on Root.
+ * While nothing is hovered it shows its children: name the measure the total stands for, e.g. `Total sales`.
+ */
+export declare function BodyTitle({ disableStyle, className, children, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+/** Shows the hovered slice's value, or the sum of every value while nothing is hovered. */
+export declare function BodyValue({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+export type LegendListProps<Data extends Datum = Datum> = Omit<ComponentProps<'ul'>, 'children'> & StyleProps & {
+    /** Receives each record with its position in data, and returns its row, like Combobox.List. */
+    children: (datum: Data, index: number) => ReactNode;
+    /**
+     * Where the legend sits.
+     * - `'right'`: beside the donut, vertically centered. The usual choice in cards with room to spare.
+     * - `'bottom'`: under the donut. Use it in narrow cards.
+     * @default 'right'
+     */
+    position?: 'right' | 'bottom';
+};
+/** The legend's list of rows. Recharts' native Legend places and sizes it; its content slot renders this list. */
+export declare function LegendList<Data extends Datum = Datum>({ children, position, className, disableStyle, ...props }: LegendListProps<Data>): import("react").JSX.Element;
+/** One legend row. Dims along with its slice while another slice is hovered. */
+export declare function LegendItem({ disableStyle, className, ...props }: ComponentProps<'li'> & StyleProps): import("react").JSX.Element;
+export declare function LegendColorIndicator({ disableStyle, className, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+/** Shows the row's label, formatted by `labelToString` on Root. */
+export declare function LegendLabel({ disableStyle, className, ...props }: Omit<ComponentProps<'span'>, 'children'> & StyleProps): import("react").JSX.Element;
+/** Shows the row's value, formatted by `valueToString` on Root. */
+export declare function LegendValue({ disableStyle, className, ...props }: Omit<ComponentProps<'span'>, 'children'> & StyleProps): 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 slice'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 slice's value, formatted by `valueToString` on Root. */
+export declare function TooltipValue({ disableStyle, className, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps): import("react").JSX.Element;
+/** Carries the hovered slice's `data-index`, so it can match that slice's color. */
+export declare function TooltipColorIndicator({ disableStyle, className, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+export {};

package/dist/components/donutchart/index.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Legend as RechartsLegend, Pie as RechartsPie, PieChart as RechartsPieChart, Sector as RechartsSector, Tooltip as RechartsTooltip, useActiveTooltipDataPoints, usePlotArea, } from 'recharts';
+/** Inner radius as a share of the outer one: the ring is 16% of the radius thick. */
+const INNER_RADIUS = 0.84;
+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(), ...chart }) {
+    return (_jsx(ChartContext.Provider, { value: { ...chart, labelToString, valueToString }, children: children }));
+}
+function useChart(part) {
+    const chart = useContext(ChartContext);
+    if (!chart)
+        throw new Error(`DonutChart.${part} must be inside DonutChart.Root`);
+    return chart;
+}
+/** The hovered slice's record and position in data, read from Recharts' own hover state. */
+function useActiveSlice(part) {
+    const chart = useChart(part);
+    const [point] = useActiveTooltipDataPoints() ?? [];
+    const index = point
+        ? chart.data.findIndex((datum) => datum.label === point.label)
+        : -1;
+    return index < 0 ? null : { datum: chart.data[index], index };
+}
+/** 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 = 240, className, style, children, ...props }) {
+    const chart = useChart('Container');
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsxs(RechartsPieChart, { margin: { top: 0, right: 0, 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, children: [_jsx(TooltipSlotContext.Provider, { value: setTooltip, children: children }), _jsx(RechartsTooltip, { offset: 12, ...tooltip?.props, animationDuration: 200, animationEasing: "ease-out", 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) }));
+                } })] }));
+}
+/** Shared ring geometry, so the track and the slices always line up. */
+const ring = {
+    cx: '50%',
+    cy: '50%',
+    innerRadius: `${INNER_RADIUS * 100}%`,
+    outerRadius: '100%',
+    startAngle: 90,
+    endAngle: -270,
+    stroke: 'none',
+    isAnimationActive: false,
+};
+/** Optional full ring behind the slices. It keeps the donut visible when every value is 0. */
+export function Track({ className }) {
+    return (_jsx(RechartsPie, { ...ring, data: [{ value: 1 }], dataKey: "value", tooltipType: "none", legendType: "none", 
+        // The track is a backdrop: it never takes the pointer from the slices.
+        pointerEvents: "none", shape: (sector) => (_jsx(RechartsSector, { ...sector, className: className, "data-component": "donutchart-track" })) }));
+}
+export function Slices({ className, gap = 2 }) {
+    const chart = useChart('Slices');
+    return (_jsx(RechartsPie, { ...ring, data: chart.data, dataKey: "value", nameKey: "label", paddingAngle: gap, 
+        // Recharts' native shape slot renders each slice ourselves, so className and data attributes land on the drawn element.
+        shape: (sector) => (_jsx(Slice, { ...sector, className: className })) }));
+}
+function Slice({ className, ...sector }) {
+    const active = useActiveSlice('Slices');
+    return (_jsx(RechartsSector, { ...sector, className: className, "data-component": "donutchart-slice", "data-index": sector.index, "data-active": active?.index === sector.index ? '' : undefined, "data-inactive": active && active.index !== sector.index ? '' : undefined }));
+}
+/**
+ * HTML laid over the donut's hole, so its content is ordinary JSX: Tailwind, fonts, and truncation all work.
+ * Rendered through an SVG foreignObject, which keeps it inside the chart and its hover state.
+ */
+export function Body({ disableStyle, className, ...props }) {
+    const plotArea = usePlotArea();
+    const active = useActiveSlice('Body');
+    if (!plotArea)
+        return null;
+    const radius = (Math.min(plotArea.width, plotArea.height) / 2) * INNER_RADIUS;
+    // The largest square that fits in the hole.
+    const side = radius * Math.SQRT2;
+    return (_jsx("foreignObject", { x: plotArea.x + plotArea.width / 2 - side / 2, y: plotArea.y + plotArea.height / 2 - side / 2, width: side, height: side, 
+        // The hole stays transparent to the pointer, so hovering it never blocks a slice.
+        pointerEvents: "none", children: _jsx("div", { ...props, "data-component": "donutchart-body", "data-active": active ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
+}
+/**
+ * Shows the hovered slice's label, formatted by `labelToString` on Root.
+ * While nothing is hovered it shows its children: name the measure the total stands for, e.g. `Total sales`.
+ */
+export function BodyTitle({ disableStyle, className, children, ...props }) {
+    const chart = useChart('BodyTitle');
+    const active = useActiveSlice('BodyTitle');
+    return (_jsx("p", { ...props, "data-component": "donutchart-bodytitle", "data-index": active?.index, "data-active": active ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: active ? chart.labelToString(active.datum.label) : children }));
+}
+/** Shows the hovered slice's value, or the sum of every value while nothing is hovered. */
+export function BodyValue({ disableStyle, className, ...props }) {
+    const chart = useChart('BodyValue');
+    const active = useActiveSlice('BodyValue');
+    const total = chart.data.reduce((sum, datum) => sum + datum.value, 0);
+    return (_jsx("p", { ...props, "data-component": "donutchart-bodyvalue", "data-index": active?.index, "data-active": active ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.valueToString(active ? active.datum.value : total) }));
+}
+/** The legend's list of rows. Recharts' native Legend places and sizes it; its content slot renders this list. */
+export function LegendList({ children, position = 'right', className, disableStyle, ...props }) {
+    const chart = useChart('LegendList');
+    return (_jsx(RechartsLegend, { layout: "vertical", align: position === 'right' ? 'right' : 'center', verticalAlign: position === 'right' ? 'middle' : 'bottom', content: () => (_jsx("ul", { ...props, "data-component": "donutchart-legendlist", "data-position": position, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.data.map((datum, index) => (_jsx(LegendContext.Provider, { value: { datum, index }, children: children(datum, index) }, datum.label))) })) }));
+}
+const LegendContext = /* @__PURE__ */ createContext(null);
+function useLegendRow(part) {
+    const row = useContext(LegendContext);
+    if (!row)
+        throw new Error(`DonutChart.${part} must be inside DonutChart.LegendList`);
+    return row;
+}
+/** One legend row. Dims along with its slice while another slice is hovered. */
+export function LegendItem({ disableStyle, className, ...props }) {
+    const row = useLegendRow('LegendItem');
+    const active = useActiveSlice('LegendItem');
+    return (_jsx("li", { ...props, "data-component": "donutchart-legenditem", "data-index": row.index, "data-active": active?.index === row.index ? '' : undefined, "data-inactive": active && active.index !== row.index ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function LegendColorIndicator({ disableStyle, className, ...props }) {
+    const row = useLegendRow('LegendColorIndicator');
+    return (_jsx("span", { "aria-hidden": "true", ...props, "data-component": "donutchart-legendcolorindicator", "data-index": row.index, "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** Shows the row's label, formatted by `labelToString` on Root. */
+export function LegendLabel({ disableStyle, className, ...props }) {
+    const chart = useChart('LegendLabel');
+    const row = useLegendRow('LegendLabel');
+    return (_jsx("span", { ...props, "data-component": "donutchart-legendlabel", "data-index": row.index, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.labelToString(row.datum.label) }));
+}
+/** Shows the row's value, formatted by `valueToString` on Root. */
+export function LegendValue({ disableStyle, className, ...props }) {
+    const chart = useChart('LegendValue');
+    const row = useLegendRow('LegendValue');
+    return (_jsx("span", { ...props, "data-component": "donutchart-legendvalue", "data-index": row.index, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.valueToString(row.datum.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 setTooltip = useContext(TooltipSlotContext);
+    if (!setTooltip)
+        throw new Error('DonutChart.Tooltip must be inside DonutChart.Container');
+    useLayoutEffect(() => {
+        setTooltip({
+            render: children,
+            props: { offset, allowEscapeViewBox, portal },
+        });
+        return () => setTooltip(null);
+    }, [setTooltip, children, offset, allowEscapeViewBox, portal]);
+    return null;
+}
+function useTooltipDatum(part) {
+    const datum = useContext(TooltipContext);
+    if (!datum)
+        throw new Error(`DonutChart.${part} must be inside DonutChart.Tooltip`);
+    return datum;
+}
+export function TooltipPopup({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "donutchart-tooltip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+export function TooltipTitle({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "donutchart-tooltiptitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** Shows the hovered slice's label, formatted by `labelToString` on Root. */
+export function TooltipLabel({ disableStyle, className, ...props }) {
+    const chart = useChart('TooltipLabel');
+    const datum = useTooltipDatum('TooltipLabel');
+    return (_jsx("p", { ...props, "data-component": "donutchart-tooltiplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.labelToString(datum.label) }));
+}
+/** Shows the hovered slice's value, formatted by `valueToString` on Root. */
+export function TooltipValue({ disableStyle, className, ...props }) {
+    const chart = useChart('TooltipValue');
+    const datum = useTooltipDatum('TooltipValue');
+    return (_jsx("p", { ...props, "data-component": "donutchart-tooltipvalue", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: chart.valueToString(datum.value) }));
+}
+/** Carries the hovered slice's `data-index`, so it can match that slice's color. */
+export function TooltipColorIndicator({ disableStyle, className, ...props }) {
+    const chart = useChart('TooltipColorIndicator');
+    const datum = useTooltipDatum('TooltipColorIndicator');
+    return (_jsx("span", { "aria-hidden": "true", ...props, "data-component": "donutchart-tooltipcolorindicator", "data-index": chart.data.findIndex((item) => item.label === datum.label), "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}

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

@@ -1,4 +1,5 @@
 import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
 import type { ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
@@ -11,9 +12,9 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  * function Example() {
  *   return (
  *     <Drawer.Root swipeDirection="right">
- *       <Drawer.OpenHandler>
+ *       <Drawer.OpenButton asChild>
  *         <Button.default variant="secondary">Open account</Button.default>
- *       </Drawer.OpenHandler>
+ *       </Drawer.OpenButton>
  *       <Drawer.Backdrop />
  *       <Drawer.Popup>
  *         <Drawer.Header>
@@ -25,9 +26,9 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *         </Drawer.Header>
  *         <Drawer.Body>Account information goes here.</Drawer.Body>
  *         <Drawer.Footer>
- *           <Drawer.CloseHandler>
+ *           <Drawer.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Drawer.CloseHandler>
+ *           </Drawer.CloseButton>
  *         </Drawer.Footer>
  *       </Drawer.Popup>
  *     </Drawer.Root>
@@ -57,25 +58,15 @@ export declare const Indent: import("react").ForwardRefExoticComponent<Omit<Omit
 export declare const SwipeArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerSwipeAreaProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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<BaseDrawer.Trigger.Props<unknown>, "children" | "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>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const CloseHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerCloseProps, "children" | "className" | "render"> & {
+/** Opens the drawer. Pass asChild to give this behavior to your own element, like your app's Button. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseDrawer.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<BaseDrawer.Popup.Props, 'className'> & {
     className?: string;
 } & Pick<BaseDrawer.Portal.Props, 'container' | 'keepMounted'> & StyleProps;
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
-export declare const Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerPopupProps, "className"> & {
-    className?: string;
-} & Pick<import("@base-ui/react").DrawerPortalProps, "keepMounted" | "container"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerBackdropProps, "className"> & {
     className?: string;
 } & Pick<import("@base-ui/react").DrawerPortalProps, "keepMounted" | "container"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -88,12 +79,12 @@ export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerDescriptionProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerCloseProps, "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="Close drawer". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
+export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerCloseProps, "className" | "render"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & 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 const CloseButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { asChildRendering } from "../../utils/asChild.js";
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
 import { cloneElement, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { X } from 'lucide-react';
+import { X } from "../../utils/icons.js";
 /**
  * Choose swipeDirection on Root and keep trigger and Popup in that Root. Popup already includes its portal. Provider and Indent parts are for an optional indented-background composition, not required for a basic drawer.
  *
@@ -12,9 +13,9 @@ import { X } from 'lucide-react';
  * function Example() {
  *   return (
  *     <Drawer.Root swipeDirection="right">
- *       <Drawer.OpenHandler>
+ *       <Drawer.OpenButton asChild>
  *         <Button.default variant="secondary">Open account</Button.default>
- *       </Drawer.OpenHandler>
+ *       </Drawer.OpenButton>
  *       <Drawer.Backdrop />
  *       <Drawer.Popup>
  *         <Drawer.Header>
@@ -26,9 +27,9 @@ import { X } from 'lucide-react';
  *         </Drawer.Header>
  *         <Drawer.Body>Account information goes here.</Drawer.Body>
  *         <Drawer.Footer>
- *           <Drawer.CloseHandler>
+ *           <Drawer.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Drawer.CloseHandler>
+ *           </Drawer.CloseButton>
  *         </Drawer.Footer>
  *       </Drawer.Popup>
  *     </Drawer.Root>
@@ -60,42 +61,38 @@ export const Indent = /* @__PURE__ */ forwardRef(function Indent({ disableStyle,
 export const SwipeArea = /* @__PURE__ */ forwardRef(function SwipeArea({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseDrawer.SwipeArea, { ...props, ref: ref, "data-component": "drawer-swipearea", "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 const OpenHandler = /* @__PURE__ */ forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseDrawer.Trigger, { ...props, ref: ref, render: children });
-});
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const CloseHandler = /* @__PURE__ */ forwardRef(function CloseHandler({ children, ...props }, ref) {
-    return _jsx(BaseDrawer.Close, { ...props, ref: ref, render: children });
+/** Opens the drawer. Pass asChild to give this behavior to your own element, like your app's Button. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'drawer-openbutton', disableStyle });
+    return _jsx(BaseDrawer.Trigger, { ...props, ref: ref, ...rendering });
 });
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
 export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, container, keepMounted, className, style, ...props }, ref) {
     return (_jsx(BaseDrawer.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDrawer.Viewport, { children: _jsx(BaseDrawer.Popup, { ...props, ref: ref, "data-component": "drawer-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: (state) => {
-                    const offset = state.swipeDirection === 'left' || state.swipeDirection === 'up'
-                        ? '-100%'
-                        : '100%';
                     const vertical = state.swipeDirection === 'up' || state.swipeDirection === 'down';
-                    const transitioning = state.transitionStatus === 'starting' ||
-                        state.transitionStatus === 'ending';
-                    const baseStyle = {
+                    // Sliding in and out from the side it swipes towards, otherwise following the finger (and the snap point, vertically)
+                    const transform = (() => {
+                        const offset = state.swipeDirection === 'left' || state.swipeDirection === 'up' ? '-100%' : '100%';
+                        if (state.transitionStatus === 'starting' || state.transitionStatus === 'ending')
+                            return vertical ? 'translateY(' + offset + ')' : 'translateX(' + offset + ')';
+                        if (vertical)
+                            return 'translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)))';
+                        return 'translateX(var(--drawer-swipe-movement-x, 0px))';
+                    })();
+                    // No transition while the finger drags it, and a faster close after a strong swipe
+                    const transitionDuration = (() => {
+                        if (state.swiping)
+                            return '0ms';
+                        if (state.transitionStatus === 'ending')
+                            return 'calc(var(--drawer-swipe-strength, 1) * 300ms)';
+                        return '300ms';
+                    })();
+                    return {
                         zIndex: 40,
-                        transform: transitioning
-                            ? vertical
-                                ? 'translateY(' + offset + ')'
-                                : 'translateX(' + offset + ')'
-                            : vertical
-                                ? 'translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)))'
-                                : 'translateX(var(--drawer-swipe-movement-x, 0px))',
+                        transform,
                         transitionProperty: 'transform',
-                        transitionDuration: state.swiping
-                            ? '0ms'
-                            : state.transitionStatus === 'ending'
-                                ? 'calc(var(--drawer-swipe-strength, 1) * 300ms)'
-                                : '300ms',
+                        transitionDuration,
                         transitionTimingFunction: 'ease-out',
-                    };
-                    return {
-                        ...baseStyle,
                         ...(typeof style === 'function' ? style(state) : style),
                     };
                 } }) }) }));
@@ -118,8 +115,10 @@ export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, c
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseDrawer.Description, { ...props, ref: ref, "data-component": "drawer-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseDrawer.Close, { ...props, ref: ref, "data-component": "drawer-closebutton", "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="Close drawer". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
+export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'drawer-closebutton', disableStyle });
+    return _jsx(BaseDrawer.Close, { ...props, ref: ref, ...rendering });
 });
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
@@ -134,4 +133,3 @@ export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIc
         className: twMerge(children?.props.className, className),
     });
 });
-//# sourceMappingURL=index.js.map

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

@@ -26,9 +26,10 @@ import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement }
  *   )
  * }
  */
-export declare function Surface({ disableStyle, className, children, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
+export declare function Surface({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
 export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLHeadingElement> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function Image({ disableStyle, className, ...props }: ImgHTMLAttributes<HTMLImageElement> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
@@ -37,4 +38,3 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
     children: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 export declare function ActionsList({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/empty/index.js

@@ -27,14 +27,15 @@ import { twMerge } from 'tailwind-merge';
  *   )
  * }
  */
-export function Surface({ disableStyle, className, children, ...props }) {
-    return (_jsx("div", { "data-component": "empty-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children }));
+export function Surface({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "empty-surface", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function Body({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "empty-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
 export function Title({ disableStyle, className, ...props }) {
-    return (_jsx("p", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+    return (_jsx("h2", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function Description({ disableStyle, className, ...props }) {
     return (_jsx("p", { "data-component": "empty-description", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
@@ -45,7 +46,6 @@ export function Image({ disableStyle, className, ...props }) {
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function Icon({ disableStyle, children, className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'empty-icon',
@@ -58,4 +58,3 @@ export function Icon({ disableStyle, children, className, ...props }) {
 export function ActionsList({ disableStyle, className, ...props }) {
     return (_jsx("div", { "data-component": "empty-actionslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,86 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+type Tone = 'neutral' | 'critical';
+/**
+ * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
+ * Root holds the tone and renders nothing itself; Surface and Body render the panel. You decide when it appears. It's a section: put it where the missing content would have been, and it fills that container's height.
+ * Image/Icon, ActionsList and HelpText are optional. ActionsList takes your own buttons, since the actions belong to your app.
+ *
+ * @example A page the user can't access
+ * import { Button, Exception, TextLink } from '@central-ui/react'
+ * import { Link } from '@tanstack/react-router'
+ * import { Lock } from 'lucide-react'
+ *
+ * function Example() {
+ *   return (
+ *     // Inside the body of some page. That page's header shows no title or back button,
+ *     // since they would describe something the user can't see.
+ *     <Exception.Root>
+ *       <Exception.Surface>
+ *         <Exception.Body>
+ *           <Exception.Icon>
+ *             <Lock aria-hidden="true" />
+ *           </Exception.Icon>
+ *           <Exception.Title>You don't have access to this page</Exception.Title>
+ *           <Exception.Description>Ask a store owner to give your account the Orders permission.</Exception.Description>
+ *           <Exception.ActionsList>
+ *             <Button.default variant="primary">Go to dashboard</Button.default>
+ *           </Exception.ActionsList>
+ *           <Exception.HelpText>
+ *             Still stuck?{' '}
+ *             <TextLink.default>
+ *               <Link to="/support">Contact support</Link>
+ *             </TextLink.default>
+ *           </Exception.HelpText>
+ *         </Exception.Body>
+ *       </Exception.Surface>
+ *     </Exception.Root>
+ *   )
+ * }
+ *
+ * @example A page that doesn't exist
+ * // Also inside the body of some page with no title in its header; the code goes in the Title.
+ * ;<Exception.Root>
+ *   <Exception.Surface>
+ *     <Exception.Body>
+ *       <Exception.Title>404 · Page not found</Exception.Title>
+ *       <Exception.Description>The page may have moved, or the link is wrong.</Exception.Description>
+ *     </Exception.Body>
+ *   </Exception.Surface>
+ * </Exception.Root>
+ *
+ * @example A section that failed to load, inside a page that otherwise works
+ * // In place of that section only; the rest of the page stays.
+ * ;<Exception.Root tone="critical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Exception.Root>
+ */
+export declare function Root({ tone, children, }: {
+    /**
+     * Neutral for expected situations, like no access or a missing page. Critical for failures, like a section that couldn't load; it turns the Title red.
+     * Every part carries it as data-tone.
+     * @default 'neutral'
+     */
+    tone?: Tone;
+    /** The Surface. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Centers the panel and fills its container's height. */
+export declare const Surface: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare const Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & StyleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Image: import("react").ForwardRefExoticComponent<ImgHTMLAttributes<HTMLImageElement> & StyleProps & import("react").RefAttributes<HTMLImageElement>>;
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children"> & {
+    /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
+    children: ReactElement<ComponentProps<"svg">>;
+} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
+export declare const ActionsList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
+export declare const HelpText: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export {};