@surflane/ui 0.8.0 → 0.10.0

package/dist/card.js

@@ -1,25 +1,25 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Surface } from './layout.js';
-import { part, cx } from './parts.js';
-const CardRoot = /* @__PURE__ */ React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
-    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: cx('pui-card', className) }));
-});
-const CardTitle = /* @__PURE__ */ React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
+const CardRoot = function CardRoot({ className, padding, ref, ...props }) {
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: cx('surf-card', className) }));
+};
+const CardTitle = function CardTitle({ level = 3, className, ref, ...props }) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
-        className: cx('pui-card-title', className),
+        className: cx('surf-card-title', className),
     });
-});
+};
 export const Card = {
     Root: CardRoot,
-    Header: /* @__PURE__ */ part('div', 'pui-card-header'),
+    Header: /* @__PURE__ */ elementPart('div', 'surf-card-header'),
     Title: CardTitle,
-    Description: /* @__PURE__ */ part('p', 'pui-card-description'),
-    Body: /* @__PURE__ */ part('div', 'pui-card-body'),
-    Footer: /* @__PURE__ */ part('div', 'pui-card-footer'),
+    Description: /* @__PURE__ */ elementPart('p', 'surf-card-description'),
+    Body: /* @__PURE__ */ elementPart('div', 'surf-card-body'),
+    Footer: /* @__PURE__ */ elementPart('div', 'surf-card-footer'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { CardRoot, CardTitle };

package/dist/chart.d.ts

@@ -25,13 +25,11 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
      * for categories that color must separate, such as buckets or sectors. */
     palette?: 'neutral' | 'categorical';
     locale?: string;
+    /** Formats a value for the readout, the table and the value axis ticks. The unit
+     * follows it in the readout and the table, and names the axis. */
     formatValue?: (value: number) => string;
     /** Text the chart shows or announces; pass translations here. */
     labels?: Partial<ChartLabels>;
-    /** @deprecated Use labels.missing. */
-    missingLabel?: string;
-    /** @deprecated Use labels.empty. */
-    emptyLabel?: string;
     hiddenSeries?: readonly string[];
     defaultHiddenSeries?: readonly string[];
     onHiddenSeriesChange?: (keys: string[]) => void;
@@ -50,34 +48,13 @@ export type ChartLabels = {
     inspectHint: string;
     /** The data table's only row when there is no data. */
     noRows: string;
+    /** The legend list, given the chart's title. */
+    legend: (title: string) => string;
+    /** A legend button that shows or hides a series. */
+    series: (label: string) => string;
 };
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "title"> & {
-    title: string;
-    description: string;
-    data: readonly ChartDatum[];
-    series: readonly ChartSeries[];
-    unit: string;
-    xLabel: string;
-    yLabel: string;
-    type?: "line" | "bar" | "area";
-    height?: number;
-    /** Keeps 0 on the value axis. Turn it off for values far from zero, such as
-     * prices, so the line uses the height; bars always start at zero. */
-    includeZero?: boolean;
-    /** neutral tells series apart by ink, dashes and markers. categorical adds six hues,
-     * for categories that color must separate, such as buckets or sectors. */
-    palette?: "neutral" | "categorical";
-    locale?: string;
-    formatValue?: (value: number) => string;
-    /** Text the chart shows or announces; pass translations here. */
-    labels?: Partial<ChartLabels>;
-    /** @deprecated Use labels.missing. */
-    missingLabel?: string;
-    /** @deprecated Use labels.empty. */
-    emptyLabel?: string;
-    hiddenSeries?: readonly string[];
-    defaultHiddenSeries?: readonly string[];
-    onHiddenSeriesChange?: (keys: string[]) => void;
-} & React.RefAttributes<HTMLElement>>;
+export declare const Chart: ({ title, description, data, series, unit, xLabel, yLabel, type, height, includeZero, palette, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, className, ref, ...props }: ChartProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element;

package/dist/chart.js

@@ -18,6 +18,8 @@ const chartLabels = {
     tableCaption: (unit) => `All input measurements, including hidden series. Unit: ${unit}.`,
     inspectHint: 'Hover, touch or use chart arrow keys to inspect a measurement.',
     noRows: 'No rows.',
+    legend: (title) => `${title} series`,
+    series: (label) => `${label} series`,
 };
 /** The round step at or above a raw step: 1, 2, 2.5 or 5 times a power of ten. */
 function roundStep(raw) {
@@ -26,22 +28,56 @@ function roundStep(raw) {
     const power = 10 ** Math.floor(Math.log10(raw));
     return power * ([1, 2, 2.5, 5, 10].find((f) => f * power >= raw) ?? 10);
 }
+/** The smallest round step that spans low to high in at most five intervals, so the
+ * top tick is the round value just above the highest one. */
+function axisStep(low, high) {
+    let step = roundStep((high - low) / 5);
+    while (step && Math.ceil(high / step) - Math.floor(low / step) > 5)
+        step = roundStep(step * 1.01);
+    return step;
+}
 const dashes = [undefined, '7 4', '2 4', '10 3 2 3', '12 5', '4 3'];
+/** True once the font of the tick labels has loaded. Recharts measures a label to keep
+ * it inside the chart and caches that width; measured in the fallback font, the last
+ * label overflows by a few pixels once the real font arrives. */
+function useFontReady(element, text) {
+    const [ready, setReady] = React.useState(false);
+    React.useEffect(() => {
+        if (!element)
+            return;
+        if (!document.fonts)
+            return setReady(true);
+        let live = true;
+        const family = getComputedStyle(element).fontFamily;
+        // load() starts the download of the faces that draw this text and waits for them.
+        void document.fonts
+            .load(`12px ${family}`, text || ' ')
+            .catch(() => [])
+            .then(() => {
+            if (live)
+                setReady(true);
+        });
+        return () => {
+            live = false;
+        };
+    }, [element, text]);
+    return ready;
+}
 function Marker({ cx, cy, color, index, }) {
     if (typeof cx !== 'number' ||
         typeof cy !== 'number' ||
         !Number.isFinite(cx) ||
         !Number.isFinite(cy))
         return null;
-    const props = { fill: 'var(--canvas)', stroke: color, strokeWidth: 1.8 };
+    const props = { fill: 'var(--surf-canvas)', stroke: color, strokeWidth: 1.8 };
     return index % 3 === 0 ? (_jsx("circle", { cx: cx, cy: cy, r: 3.5, ...props })) : index % 3 === 1 ? (_jsx("rect", { x: cx - 3.5, y: cy - 3.5, width: 7, height: 7, ...props })) : (_jsx("path", { d: `M${cx},${cy - 4.5}l4.5,8h-9Z`, ...props }));
 }
 function Pattern({ id, index, color, }) {
-    return (_jsxs("pattern", { id: id, patternUnits: 'userSpaceOnUse', width: '8', height: '8', children: [_jsx("rect", { width: '8', height: '8', fill: color }), index % 3 === 1 ? (_jsx("path", { d: 'M-2 2L2-2M0 8L8 0M6 10L10 6', stroke: 'var(--canvas)', strokeWidth: '1.5' })) : index % 3 === 2 ? (_jsx("circle", { cx: '4', cy: '4', r: '1.4', fill: 'var(--canvas)' })) : null] }));
+    return (_jsxs("pattern", { id: id, patternUnits: 'userSpaceOnUse', width: '8', height: '8', children: [_jsx("rect", { width: '8', height: '8', fill: color }), index % 3 === 1 ? (_jsx("path", { d: 'M-2 2L2-2M0 8L8 0M6 10L10 6', stroke: 'var(--surf-canvas)', strokeWidth: '1.5' })) : index % 3 === 2 ? (_jsx("circle", { cx: '4', cy: '4', r: '1.4', fill: 'var(--surf-canvas)' })) : null] }));
 }
 /** A series' swatch, as the legend and the floating values draw it. */
 function SeriesMark({ type, index, color, pattern, }) {
-    return (_jsx("svg", { className: 'pui-chart-mark', viewBox: '0 0 32 20', "aria-hidden": 'true', focusable: 'false', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: pattern, color: color, index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${pattern})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: color, strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: color })] })) }));
+    return (_jsx("svg", { className: 'surf-chart-mark', viewBox: '0 0 32 20', "aria-hidden": 'true', focusable: 'false', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: pattern, color: color, index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${pattern})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: color, strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: color })] })) }));
 }
 /** The active point's values beside it, for pointer and touch users. The readout
  * below the plot announces the same values, so this copy stays out of the
@@ -61,29 +97,25 @@ function FloatingValues({ host, hidden, render, }) {
     }, [shown, label, plot?.width]);
     if (!shown || !point || !plot)
         return null;
-    // The gap between the point and the box, in px: the --space-3 step.
+    // The gap between the point and the box, in px: the --surf-space-3 step.
     const gap = 12;
     const start = point.x > plot.x + plot.width / 2;
     const left = Math.min(Math.max(start ? point.x - gap - width : point.x + gap, plot.x), plot.x + plot.width - width);
-    return createPortal(_jsx("div", { ref: box, className: 'pui-chart-tooltip', "aria-hidden": 'true', style: { left, top: plot.y, visibility: width ? undefined : 'hidden' }, children: render(String(label)) }), host);
+    return createPortal(_jsx("div", { ref: box, className: 'surf-chart-tooltip', "aria-hidden": 'true', style: { left, top: plot.y, visibility: width ? undefined : 'hidden' }, children: render(String(label)) }), host);
 }
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, includeZero = true, palette = 'neutral', locale = 'en-US', formatValue, labels, missingLabel, emptyLabel, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
-    const text = {
-        ...chartLabels,
-        ...(missingLabel === undefined ? {} : { missing: missingLabel }),
-        ...(emptyLabel === undefined ? {} : { empty: emptyLabel }),
-        ...labels,
-    };
+export const Chart = function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, includeZero = true, palette = 'neutral', locale = 'en-US', formatValue, labels, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ref, ...props }) {
+    const text = { ...chartLabels, ...labels };
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
     const colorFor = (index) => palette === 'categorical'
-        ? `var(--chart-category-${(index % 6) + 1})`
-        : `var(--chart-series-${(index % 3) + 1})`;
+        ? `var(--surf-chart-category-${(index % 6) + 1})`
+        : `var(--surf-chart-series-${(index % 3) + 1})`;
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
     const visible = series.filter((s) => !hidden.has(s.key));
     const [host, setHost] = React.useState(null);
+    const fontsReady = useFontReady(host, data.map((d) => d.label).join(''));
     const [floatHost, setFloatHost] = React.useState(null);
     const [dismissed, setDismissed] = React.useState(false);
     const firstLegend = React.useRef(null);
@@ -130,15 +162,17 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
     const values = rows
         .flatMap((row) => visible.map((s) => row.values[s.key]))
         .filter((value) => typeof value === 'number');
-    // Bars grow from zero, so they always keep it on the axis. Without zero, the axis
+    // Bars grow from zero, so they always keep it on the axis. Either way the axis
     // spans the values, widened to round steps so its ticks read cleanly.
     const keepZero = includeZero || type === 'bar';
     const start = keepZero ? 0 : (values[0] ?? 0);
     const low = values.reduce((a, b) => Math.min(a, b), start), high = values.reduce((a, b) => Math.max(a, b), start);
-    const step = keepZero ? 0 : roundStep((high - low) / 4);
+    const step = axisStep(low, high);
     const min = step ? Math.floor(low / step) * step : low, max = step ? Math.ceil(high / step) * step : high;
     const ticks = step
-        ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, index) => min + index * step)
+        ? Array.from({ length: Math.round((max - min) / step) + 1 }, 
+        // Rounded, so float steps never print as 0.30000000000000004.
+        (_, index) => Number((min + index * step).toPrecision(12)))
         : undefined;
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
@@ -150,23 +184,28 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
         .filter((s) => (s.key === key ? !hidden.has(key) : hidden.has(s.key)))
         .map((s) => s.key));
     const chartHeight = Number.isFinite(height) ? Math.max(200, height) : 280;
-    return (_jsxs("figure", { ...props, ref: ref, className: cx('pui-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'pui-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'pui-chart-frame', children: [_jsxs("div", { className: 'pui-chart-key', children: [_jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), _jsx("ul", { className: 'pui-chart-legend', "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'pui-chart-legend-button', "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }) }, s.key))) })] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
+    return (_jsxs("figure", { ...props, ref: ref, className: cx('surf-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'surf-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'surf-chart-frame', children: [_jsxs("div", { className: 'surf-chart-key', children: [_jsxs("p", { className: 'surf-chart-axis-label', children: [yLabel, " (", unit, ")"] }), _jsx("ul", { className: 'surf-chart-legend', "aria-label": text.legend(title), children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'surf-chart-legend-button', "aria-label": text.series(s.label), "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }) }, s.key))) })] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'surf-chart-plot', onKeyDownCapture: (event) => {
                                     if (event.key === 'Escape')
                                         setDismissed(true);
                                     else if (event.key === 'ArrowLeft' ||
                                         event.key === 'ArrowRight')
                                         setDismissed(false);
-                                }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: [_jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
+                                }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: [_jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--surf-line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
                                                         const label = byId.get(String(value))?.label ?? String(value);
                                                         // minTickGap already drops ticks that would overlap; the cap
                                                         // only keeps one very long label from crowding the axis.
                                                         return label.length > 24
                                                             ? label.slice(0, 23) + '…'
                                                             : label;
-                                                    }, tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: { stroke: 'var(--line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max], ticks: ticks }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
+                                                    }, tick: fontsReady && {
+                                                        fill: 'var(--surf-ink-muted)',
+                                                        fontSize: 12,
+                                                    }, tickLine: false, axisLine: { stroke: 'var(--surf-line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => formatValue
+                                                        ? formatValue(Number(value))
+                                                        : compact.format(Number(value)), tick: { fill: 'var(--surf-ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max], ticks: ticks }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--surf-ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
                                                         ? false
                                                         : {
-                                                            stroke: 'var(--control-border)',
+                                                            stroke: 'var(--surf-control-border)',
                                                             fill: 'transparent',
                                                         }, wrapperStyle: {
                                                         position: 'static',
@@ -176,7 +215,7 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
                                                         const row = tooltip.active && !dismissed
                                                             ? byId.get(String(tooltip.label))
                                                             : undefined;
-                                                        return (_jsx("div", { className: 'pui-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: text.inspectHint })) }));
+                                                        return (_jsx("div", { className: 'surf-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: text.inspectHint })) }));
                                                     } })), series.map((s, index) => {
                                                     const common = {
                                                         name: s.label,
@@ -194,9 +233,9 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
                                                         const row = byId.get(label);
                                                         if (!row)
                                                             return null;
-                                                        return (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: series.map((s, index) => hidden.has(s.key) ? null : (_jsxs("li", { children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-float-${index}` }), _jsx("span", { children: s.label }), _jsx("span", { className: 'pui-chart-tooltip-value', children: format(row.values[s.key]) })] }, s.key))) })] }));
-                                                    } })] }) }), _jsx("div", { className: 'pui-chart-float', ref: setFloatHost })] }), _jsx("p", { className: 'pui-chart-axis-label pui-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'pui-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: text.noSeries }), _jsx(Button, { variant: 'outline', onClick: () => {
+                                                        return (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: series.map((s, index) => hidden.has(s.key) ? null : (_jsxs("li", { children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-float-${index}` }), _jsx("span", { children: s.label }), _jsx("span", { className: 'surf-chart-tooltip-value', children: format(row.values[s.key]) })] }, s.key))) })] }));
+                                                    } })] }) }), _jsx("div", { className: 'surf-chart-float', ref: setFloatHost })] }), _jsx("p", { className: 'surf-chart-axis-label surf-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'surf-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: text.noSeries }), _jsx(Button, { variant: 'outline', onClick: () => {
                                         setRestoreRequested(true);
                                         changeHidden([]);
-                                    }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) }))] }), hasValues && (_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: text.viewTable }), _jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) })] })] }));
-});
+                                    }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) }))] }), hasValues && (_jsx("p", { className: 'surf-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'surf-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'surf-chart-table', children: [_jsx("summary", { children: text.viewTable }), _jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) })] })] }));
+};

package/dist/checkbox-group.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+export declare const CheckboxGroup: ({ value, defaultValue, onValueChange, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup> & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseCheckboxGroup>>;
+}) => React.JSX.Element;

package/dist/checkbox-group.js

@@ -1,16 +1,15 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import { skin } from './parts.js';
 import { useRootRef, useResetValue } from './form-state.js';
 import { ChoiceResetPaint } from './choice.js';
-export const CheckboxGroup = /* @__PURE__ */ React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
+export const CheckboxGroup = function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ref, ...props }) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected, revision] = useResetValue(value, defaultValue, element);
-    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin('surf-choice-group', className), onValueChange: (next, event) => {
                 onValueChange?.(next, event);
                 if (value === undefined && !event.isCanceled)
                     setSelected(next);
             } }) }));
-});
+};

package/dist/checkbox.d.ts

@@ -1,9 +1,18 @@
 import * as React from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { type ChoiceSize } from './choice.js';
-declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
-declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const CheckboxRoot: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & ChoiceSize & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseCheckbox.Root>>;
+}) => React.JSX.Element;
+declare const CheckboxIndicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator> & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseCheckbox.Indicator>>;
+}) => React.JSX.Element;
 export declare const Checkbox: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Root: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & ChoiceSize & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseCheckbox.Root>>;
+    }) => React.JSX.Element;
+    Indicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator> & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseCheckbox.Indicator>>;
+    }) => React.JSX.Element;
 };
 export { CheckboxIndicator, CheckboxRoot };

package/dist/checkbox.js

@@ -6,20 +6,20 @@ import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { skin } from './parts.js';
 import { useRootRef, useResetValue } from './form-state.js';
 import { ChoiceResetPaint } from './choice.js';
-const CheckboxRoot = /* @__PURE__ */ React.forwardRef(function CheckboxRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+const CheckboxRoot = function CheckboxRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ref, ...props }) {
     React.useContext(ChoiceResetPaint);
     const scheme = useComponentSize(size);
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
-    return (_jsx(BaseCheckbox.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('pui-checkbox', className), onCheckedChange: (next, event) => {
+    return (_jsx(BaseCheckbox.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('surf-checkbox', className), onCheckedChange: (next, event) => {
             onCheckedChange?.(next, event);
             if (checked === undefined && !event.isCanceled)
                 setSelected(next);
         } }));
-});
-const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin('pui-checkbox-indicator', className), children: children ?? (_jsxs("svg", { width: '14', height: '14', viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("path", { className: 'pui-checkbox-check', d: 'm4 10 4 4 8-8' }), _jsx("path", { className: 'pui-checkbox-mixed', d: 'M4 10h12' })] })) }));
-});
+};
+const CheckboxIndicator = function CheckboxIndicator({ className, children, ref, ...props }) {
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin('surf-checkbox-indicator', className), children: children ?? (_jsxs("svg", { width: '14', height: '14', viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("path", { className: 'surf-checkbox-check', d: 'm4 10 4 4 8-8' }), _jsx("path", { className: 'surf-checkbox-mixed', d: 'M4 10h12' })] })) }));
+};
 export const Checkbox = {
     ...BaseCheckbox,
     Root: CheckboxRoot,

package/dist/choice-label.d.ts

@@ -12,14 +12,6 @@ export type ChoiceLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, 'ch
 };
 /** A checkbox, radio or switch with its label, and an optional description below it.
  * The whole label toggles the control; the control sits on the first line. */
-export declare const ChoiceLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "children"> & {
-    /** The Checkbox, Radio or Switch the label names. */
-    control: React.ReactElement<{
-        "aria-labelledby"?: string;
-        "aria-describedby"?: string;
-    }>;
-    /** The label text; it alone names the control. */
-    children: React.ReactNode;
-    /** A longer explanation, read as the control's description. */
-    description?: React.ReactNode;
-} & React.RefAttributes<HTMLLabelElement>>;
+export declare const ChoiceLabel: ({ control, children, description, className, ref, ...props }: ChoiceLabelProps & {
+    ref?: React.Ref<HTMLLabelElement>;
+}) => React.JSX.Element;

package/dist/choice-label.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import { cx } from './parts.js';
 /** A checkbox, radio or switch with its label, and an optional description below it.
  * The whole label toggles the control; the control sits on the first line. */
-export const ChoiceLabel = /* @__PURE__ */ React.forwardRef(function ChoiceLabel({ control, children, description, className, ...props }, ref) {
+export const ChoiceLabel = function ChoiceLabel({ control, children, description, className, ref, ...props }) {
     const id = React.useId();
-    return (_jsxs("label", { ...props, ref: ref, className: cx('pui-choice-label', className), children: [_jsx("span", { className: 'pui-choice-control', children: React.cloneElement(control, {
+    return (_jsxs("label", { ...props, ref: ref, className: cx('surf-choice-label', className), children: [_jsx("span", { className: 'surf-choice-control', children: React.cloneElement(control, {
                     'aria-labelledby': control.props['aria-labelledby'] ?? `${id}-label`,
                     'aria-describedby': control.props['aria-describedby'] ??
                         (description ? `${id}-description` : undefined),
-                }) }), _jsxs("span", { className: 'pui-choice-text', children: [_jsx("span", { id: `${id}-label`, children: children }), description && (_jsx("span", { className: 'pui-choice-description', id: `${id}-description`, children: description }))] })] }));
-});
+                }) }), _jsxs("span", { className: 'surf-choice-text', children: [_jsx("span", { id: `${id}-label`, children: children }), description && (_jsx("span", { className: 'surf-choice-description', id: `${id}-description`, children: description }))] })] }));
+};

package/dist/class-names.d.ts

@@ -0,0 +1,6 @@
+/** Joins class names, skipping empty ones. */
+export declare function cx(...classes: (string | false | null | undefined)[]): string;
+/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
+ * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
+ * such as xs or icon pass through. */
+export declare function sizeName<Size extends string>(size?: Size): import("./size.js").ComponentSize | Size | "icon-small" | "icon-large" | undefined;

package/dist/class-names.js

@@ -0,0 +1,18 @@
+// Class and data attribute helpers, with no React: server components use them too.
+import { normalizeSize } from './size.js';
+/** Joins class names, skipping empty ones. */
+export function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
+ * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
+ * such as xs or icon pass through. */
+export function sizeName(size) {
+    return size === 'sm' || size === 'md' || size === 'lg'
+        ? normalizeSize(size)
+        : size === 'icon-sm' || size === 'icon-xs'
+            ? 'icon-small'
+            : size === 'icon-lg'
+                ? 'icon-large'
+                : size;
+}

package/dist/code.d.ts

@@ -4,18 +4,21 @@ export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
     label?: string;
     language?: string;
     wrap?: boolean;
+    /** The copy button's text: the action, then the result. */
+    labels?: Partial<CodeBlockLabels>;
+    /** @deprecated Use `labels.copy`. Removed in a later minor. */
     copyLabel?: string;
+    /** @deprecated Use `labels.copied`. Removed in a later minor. */
     copiedLabel?: string;
+    /** @deprecated Use `labels.copyError`. Removed in a later minor. */
     copyErrorLabel?: string;
     onCopy?: (code: string) => void | Promise<void>;
 };
-export declare const CodeBlock: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onCopy"> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    copyErrorLabel?: string;
-    onCopy?: (code: string) => void | Promise<void>;
-} & React.RefAttributes<HTMLDivElement>>;
+export type CodeBlockLabels = {
+    copy: string;
+    copied: string;
+    copyError: string;
+};
+export declare const CodeBlock: ({ code, label, language, wrap, labels, copyLabel: legacyCopyLabel, copiedLabel: legacyCopiedLabel, copyErrorLabel: legacyCopyErrorLabel, onCopy, className, ref, ...props }: CodeBlockProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/code.js

@@ -9,7 +9,10 @@ import { ScrollArea } from './scroll-area.js';
 const copyIcons = { idle: 'copy', copied: 'check', failed: 'alert' };
 // Feedback stays inside the copy button and returns to the action after this long.
 const copyFeedbackDuration = 2000;
-export const CodeBlock = /* @__PURE__ */ React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
+export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wrap = false, labels, copyLabel: legacyCopyLabel, copiedLabel: legacyCopiedLabel, copyErrorLabel: legacyCopyErrorLabel, onCopy, className, ref, ...props }) {
+    const copyLabel = labels?.copy ?? legacyCopyLabel ?? 'Copy code';
+    const copiedLabel = labels?.copied ?? legacyCopiedLabel ?? 'Copied';
+    const copyErrorLabel = labels?.copyError ?? legacyCopyErrorLabel ?? 'Copy unavailable';
     const [state, setState] = React.useState('idle');
     // After the first copy, each change of label fades in; the first render does not.
     const [used, setUsed] = React.useState(false);
@@ -74,11 +77,11 @@ export const CodeBlock = /* @__PURE__ */ React.forwardRef(function CodeBlock({ c
         }, copyFeedbackDuration);
     }
     const icon = state === 'copied' || state === 'failed' ? state : 'idle';
-    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: cx('pui-code-block', className), children: [_jsxs("div", { className: 'pui-code-toolbar', children: [_jsxs("span", { className: 'pui-code-label', children: [label, language && _jsx("span", { className: 'pui-code-language', children: language })] }), _jsxs(Button, { ref: button, type: 'button', variant: 'outline', size: 'sm', className: 'pui-code-copy', onClick: copy, 
+    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: cx('surf-code-block', className), children: [_jsxs("div", { className: 'surf-code-toolbar', children: [_jsxs("span", { className: 'surf-code-label', children: [label, language && _jsx("span", { className: 'surf-code-language', children: language })] }), _jsxs(Button, { ref: button, type: 'button', variant: 'outline', size: 'small', className: 'surf-code-copy', onClick: copy, 
                         // A pending copy blocks a second start but keeps focus on the button.
-                        disabled: state === 'busy', focusableWhenDisabled: true, "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx(Icon, { name: copyIcons[icon], className: 'pui-code-copy-icon' }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'pui-code-copy-label', children: state === 'copied'
+                        disabled: state === 'busy', focusableWhenDisabled: true, "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx(Icon, { name: copyIcons[icon], className: 'surf-code-copy-icon' }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'surf-code-copy-label', children: state === 'copied'
                                         ? copiedLabel
                                         : state === 'failed'
                                             ? copyErrorLabel
-                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'pui-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
-});
+                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'surf-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
+};

package/dist/collapsible.d.ts

@@ -1,18 +1,31 @@
 import * as React from 'react';
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+declare const CollapsibleTrigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger> & {
     indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseCollapsible.Trigger>>;
+}) => React.JSX.Element;
+declare const CollapsiblePanel: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel> & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseCollapsible.Panel>>;
+}) => React.JSX.Element;
 export declare const Collapsible: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Trigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger> & {
         indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseCollapsible.Trigger>>;
+    }) => React.JSX.Element;
+    Panel: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel> & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseCollapsible.Panel>>;
+    }) => React.JSX.Element;
 };
 export { CollapsiblePanel, CollapsibleTrigger };
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;

package/dist/collapsible.js

@@ -1,18 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
 import { Icon } from './icon.js';
 import { skin, part } from './parts.js';
-const CollapsibleTrigger = /* @__PURE__ */ React.forwardRef(function CollapsibleTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? (_jsx(Icon, { name: 'chevron-forward', className: 'pui-disclosure-chevron' })) : (indicator)] }));
-});
-const CollapsiblePanel = /* @__PURE__ */ React.forwardRef(function CollapsiblePanel({ className, children, ...props }, ref) {
-    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('pui-collapsible-panel', className), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
-});
+const CollapsibleTrigger = function CollapsibleTrigger({ className, children, indicator, ref, ...props }) {
+    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('surf-disclosure-trigger', className), children: [_jsx("span", { className: 'surf-disclosure-label', children: children }), indicator === undefined ? (_jsx(Icon, { name: 'chevron-forward', className: 'surf-disclosure-chevron' })) : (indicator)] }));
+};
+const CollapsiblePanel = function CollapsiblePanel({ className, children, ref, ...props }) {
+    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('surf-collapsible-panel', className), children: _jsx("div", { className: 'surf-disclosure-body', children: children }) }));
+};
 export const Collapsible = {
     ...BaseCollapsible,
-    Root: /* @__PURE__ */ part(BaseCollapsible.Root, 'pui-collapsible'),
+    Root: /* @__PURE__ */ part(BaseCollapsible.Root, 'surf-collapsible'),
     Trigger: CollapsibleTrigger,
     Panel: CollapsiblePanel,
 };