@surflane/ui 0.3.0 → 0.5.0

package/dist/{content.d.ts → card.d.ts}

@@ -1,15 +1,17 @@
 import * as React from 'react';
 declare const CardRoot: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    tone?: "canvas" | "subtle";
-    padding?: import("./foundations.js").Space;
+    surface?: import("./layout.js").SurfaceKind;
+    tone?: import("./layout.js").SurfaceKind;
+    padding?: import("./layout.js").Space;
 }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     level?: 2 | 3 | 4 | 5 | 6;
 } & React.RefAttributes<HTMLHeadingElement>>;
 export declare const Card: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        tone?: "canvas" | "subtle";
-        padding?: import("./foundations.js").Space;
+        surface?: import("./layout.js").SurfaceKind;
+        tone?: import("./layout.js").SurfaceKind;
+        padding?: import("./layout.js").Space;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -27,26 +29,6 @@ export declare const Card: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    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 { CardRoot, CardTitle };
 export declare const CardHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;

package/dist/card.js

@@ -0,0 +1,26 @@
+'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) {
+    return React.createElement(`h${level}`, {
+        ...props,
+        ref,
+        className: cx('pui-card-title', className),
+    });
+});
+export const Card = {
+    Root: CardRoot,
+    Header: /* @__PURE__ */ part('div', 'pui-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'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CardRoot, CardTitle };
+export const { Header: CardHeader, Description: CardDescription, Body: CardBody, Footer: CardFooter, } = Card;

package/dist/chart.d.ts

@@ -20,12 +20,27 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
     height?: number;
     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;
 };
+export type ChartLabels = {
+    missing: string;
+    empty: string;
+    noSeries: string;
+    showAll: string;
+    keyboardHelp: string;
+    values: (title: string) => string;
+    viewTable: string;
+    table: (title: string) => string;
+    tableCaption: (unit: 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"> & {
@@ -40,7 +55,11 @@ export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     height?: number;
     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[];

package/dist/chart.js

@@ -2,8 +2,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { Table } from './data.js';
+import { Table } from './table.js';
 import { Button } from './button.js';
+import { cx } from './parts.js';
+const chartLabels = {
+    missing: 'Not available',
+    empty: 'No numeric measurements to display.',
+    noSeries: 'No series selected.',
+    showAll: 'Show all series',
+    keyboardHelp: 'Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series.',
+    values: (title) => `${title} values`,
+    viewTable: 'View data table',
+    table: (title) => `${title} data table`,
+    tableCaption: (unit) => `All input measurements, including hidden series. Unit: ${unit}.`,
+};
 const dashes = [undefined, '7 4', '2 4', '10 3 2 3', '12 5', '4 3'];
 const colorFor = (index) => `var(--chart-series-${(index % 3) + 1})`;
 function Marker({ cx, cy, color, index, }) {
@@ -20,7 +32,13 @@ function Pattern({ id, index, color, }) {
 }
 /** 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 = React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, locale = 'en-US', formatValue, missingLabel = 'Not available', emptyLabel = 'No numeric measurements to display.', hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
+export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, 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,
+    };
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
@@ -43,7 +61,7 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
     }), [locale]);
     const format = (value) => typeof value === 'number' && Number.isFinite(value)
         ? `${formatValue ? formatValue(value) : number.format(value)} ${unit}`
-        : missingLabel;
+        : text.missing;
     const rows = React.useMemo(() => {
         const ids = new Set(), keys = new Set();
         for (const s of series) {
@@ -82,16 +100,19 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
         .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: ['pui-chart', className].filter(Boolean).join(' '), "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 })] }), _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("svg", { width: '32', height: '20', viewBox: '0 0 32 20', "aria-hidden": 'true', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: colorFor(index), strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _jsx("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
+    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 })] }), _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("svg", { width: '32', height: '20', viewBox: '0 0 32 20', "aria-hidden": 'true', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: colorFor(index), strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: text.keyboardHelp }), _jsx("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
                             if (event.key === 'Escape')
                                 setDismissed(true);
-                            else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+                            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) => {
                                             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;
+                                            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] }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
                                             ? false
                                             : {
@@ -119,8 +140,8 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
                                                 : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
                                                 ? false
                                                 : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
-                                    })] }) }) }), _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: "No series selected." }), _jsx(Button, { variant: 'outline', onClick: () => {
+                                    })] }) }) }), _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: () => {
                                 setRestoreRequested(true);
                                 changeHidden([]);
-                            }, children: "Show all series" })] })) : (_jsx("p", { children: emptyLabel })) })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": `${title} values`, hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: "View data table" }), _jsx(Table.Container, { label: `${title} data table`, orientation: 'both', scrollChain: 'contain', style: { maxHeight: 320 }, children: _jsxs(Table.Root, { children: [_jsxs(Table.Caption, { children: ["All input measurements, including hidden series. Unit: ", 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: "No rows." }) })) })] }) })] })] }));
+                            }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) })), _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: "No rows." }) })) })] }) })] })] }));
 });

package/dist/checkbox-group.d.ts

@@ -0,0 +1,2 @@
+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>>;

package/dist/checkbox-group.js

@@ -0,0 +1,16 @@
+'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) {
+    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) => {
+                onValueChange?.(next, event);
+                if (value === undefined && !event.isCanceled)
+                    setSelected(next);
+            } }) }));
+});

package/dist/checkbox.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+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>>;
+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>>;
+};
+export { CheckboxIndicator, CheckboxRoot };

package/dist/checkbox.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+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) {
+    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) => {
+            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' })] })) }));
+});
+export const Checkbox = {
+    ...BaseCheckbox,
+    Root: CheckboxRoot,
+    Indicator: CheckboxIndicator,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CheckboxIndicator, CheckboxRoot };

package/dist/choice-label.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export type ChoiceLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, '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;
+};
+/** 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>>;

package/dist/choice-label.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) {
+    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, {
+                    '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 }))] })] }));
+});

package/dist/choice.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export declare const ChoiceResetPaint: React.Context<number>;
+/** Choice controls follow the surrounding size; `size` sets one control's scale. */
+export type ChoiceSize = {
+    size?: ComponentSizeAlias;
+};

package/dist/choice.js

@@ -0,0 +1,3 @@
+'use client';
+import * as React from 'react';
+export const ChoiceResetPaint = /* @__PURE__ */ React.createContext(0);

package/dist/code.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
+    code: string;
+    label?: string;
+    language?: string;
+    wrap?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    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>>;

package/dist/{content.js → code.js}

@@ -1,37 +1,15 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Surface } from './foundations.js';
-import { part } from './parts.js';
+import { Icon } from './icon.js';
+import { cx } from './parts.js';
 import { Button } from './button.js';
 import { SyntaxHighlighter } from './syntax-highlighter.js';
 import { ScrollArea } from './scroll-area.js';
-const CardRoot = React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
-    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ['pui-card', className].filter(Boolean).join(' ') }));
-});
-const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
-    return React.createElement(`h${level}`, {
-        ...props,
-        ref,
-        className: ['pui-card-title', className].filter(Boolean).join(' '),
-    });
-});
-export const Card = {
-    Root: CardRoot,
-    Header: part('div', 'pui-card-header'),
-    Title: CardTitle,
-    Description: part('p', 'pui-card-description'),
-    Body: part('div', 'pui-card-body'),
-    Footer: part('div', 'pui-card-footer'),
-};
-const copyIcons = {
-    idle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '12', rx: '2' }), _jsx("path", { d: 'M16 8V4H4v12h4' })] })),
-    copied: _jsx("path", { d: 'm5 12.5 4.5 4.5L19 7.5' }),
-    failed: (_jsx("path", { d: 'M12 7v6m0 4v.01M4.5 12a7.5 7.5 0 1 0 15 0 7.5 7.5 0 0 0-15 0' })),
-};
+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 = 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 = /* @__PURE__ */ React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
     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);
@@ -50,6 +28,8 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Co
         clearTimeout(timer.current);
         setState('idle');
     }, [code]);
+    const resting = React.useRef(true);
+    resting.current = state === 'idle';
     // The button keeps its resting width, so the feedback never moves the toolbar.
     React.useLayoutEffect(() => {
         const element = button.current;
@@ -60,8 +40,9 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Co
             element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
         };
         measure();
+        // Fonts can finish loading after a copy; the result label must not set the width.
         document.fonts?.ready.then(() => {
-            if (mounted.current)
+            if (mounted.current && resting.current)
                 measure();
         });
     }, [copyLabel, state]);
@@ -93,12 +74,9 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Co
         }, copyFeedbackDuration);
     }
     const icon = state === 'copied' || state === 'failed' ? state : 'idle';
-    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ['pui-code-block', className].filter(Boolean).join(' '), 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, disabled: state === 'busy', "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx("svg", { className: 'pui-code-copy-icon', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: copyIcons[icon] }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'pui-code-copy-label', children: state === 'copied'
+    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, disabled: state === 'busy', "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'
                                         ? 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 }) }) })] }));
 });
-// Flat names for React Server Components, which cannot dot into client exports.
-export { CardRoot, CardTitle };
-export const { Header: CardHeader, Description: CardDescription, Body: CardBody, Footer: CardFooter, } = Card;

package/dist/collapsible.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    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>>;
+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"> & {
+        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>>;
+};
+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>>;

package/dist/collapsible.js

@@ -0,0 +1,21 @@
+'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 }) }));
+});
+export const Collapsible = {
+    ...BaseCollapsible,
+    Root: /* @__PURE__ */ part(BaseCollapsible.Root, 'pui-collapsible'),
+    Trigger: CollapsibleTrigger,
+    Panel: CollapsiblePanel,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CollapsiblePanel, CollapsibleTrigger };
+export const { Root: CollapsibleRoot } = Collapsible;

package/dist/{advanced-forms.d.ts → combobox.d.ts}

@@ -3,7 +3,9 @@ import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false, Item = Value>({ children, form, ...props }: BaseCombobox.Root.Props<Value, Multiple, Item>): React.JSX.Element;
 export declare const Combobox: {
     Root: typeof ComboboxRoot;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/combobox").ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
+        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
         positionerProps?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;
     } & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -51,7 +53,6 @@ export declare const Combobox: {
     } & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Value: typeof BaseCombobox.Value;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Icon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
@@ -61,21 +62,6 @@ export declare const Combobox: {
     useFilteredItems: typeof BaseCombobox.useFilteredItems;
     createItems: typeof BaseCombobox.createItems;
 };
-export declare const NumberField: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Increment: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Decrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLInputElement>>;
-    ScrubArea: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    ScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-};
 export { ComboboxRoot };
 export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ComboboxChip: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/combobox").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
@@ -103,13 +89,7 @@ export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<import(
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, ComboboxStatus: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/combobox").ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ComboboxTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ComboboxValue: typeof BaseCombobox.Value, ComboboxContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>, ComboboxTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ComboboxValue: typeof BaseCombobox.Value, ComboboxContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/combobox").ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
+    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
     positionerProps?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, NumberFieldGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, NumberFieldInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLInputElement>>, NumberFieldRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>, NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/combobox.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import { OwnPortal, defined, part, scopedPortal, skin } from './parts.js';
+import { useResetValue } from './form-state.js';
+function ComboboxRoot({ children, form, ...props }) {
+    const anchor = React.useRef(null);
+    // Base UI does not reset its internal selection/query model on native form reset.
+    // Recreate that model together; controlled value/query props remain caller-owned.
+    const [, , revision] = useResetValue(true, true, anchor, form);
+    return (_jsxs(BaseCombobox.Root, { ...props, form: form, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
+}
+const ComboPopup = /* @__PURE__ */ part(BaseCombobox.Popup, 'pui-combobox-popup', { portal: true });
+const ComboPositioner = /* @__PURE__ */ part(BaseCombobox.Positioner, 'pui-positioner', { portal: true });
+const ComboContent = /* @__PURE__ */ React.forwardRef(function ComboContent({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+    return (_jsx(OwnPortal, { portal: BaseCombobox.Portal, children: _jsx(ComboPositioner, { sideOffset: 6, ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
+});
+const ComboTrigger = /* @__PURE__ */ React.forwardRef(function ComboTrigger({ children, className, ...props }, ref) {
+    return (_jsx(BaseCombobox.Trigger, { "aria-label": 'Show options', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
+});
+const ComboClear = /* @__PURE__ */ React.forwardRef(function ComboClear({ children, className, ...props }, ref) {
+    return (_jsx(BaseCombobox.Clear, { "aria-label": 'Clear selection', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
+});
+const ComboIndicator = /* @__PURE__ */ React.forwardRef(function ComboIndicator({ children, className, ...props }, ref) {
+    return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-combobox-indicator', className), children: children ?? _jsx(Icon, { name: 'check' }) }));
+});
+const ComboRemove = /* @__PURE__ */ React.forwardRef(function ComboRemove({ children, className, ...props }, ref) {
+    return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, className: skin('pui-combobox-chip-remove', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
+});
+export const Combobox = {
+    ...BaseCombobox,
+    Root: ComboboxRoot,
+    Portal: /* @__PURE__ */ scopedPortal(BaseCombobox.Portal),
+    Content: ComboContent,
+    Popup: ComboPopup,
+    Positioner: ComboPositioner,
+    Trigger: ComboTrigger,
+    Clear: ComboClear,
+    ItemIndicator: ComboIndicator,
+    ChipRemove: ComboRemove,
+    Input: /* @__PURE__ */ part(BaseCombobox.Input, 'pui-input pui-combobox-input'),
+    InputGroup: /* @__PURE__ */ part(BaseCombobox.InputGroup, 'pui-combobox-group'),
+    List: /* @__PURE__ */ part(BaseCombobox.List, 'pui-combobox-list'),
+    Item: /* @__PURE__ */ part(BaseCombobox.Item, 'pui-combobox-item'),
+    Empty: /* @__PURE__ */ part(BaseCombobox.Empty, 'pui-combobox-empty'),
+    Status: /* @__PURE__ */ part(BaseCombobox.Status, 'pui-combobox-status'),
+    Group: /* @__PURE__ */ part(BaseCombobox.Group, 'pui-combobox-section'),
+    GroupLabel: /* @__PURE__ */ part(BaseCombobox.GroupLabel, 'pui-combobox-section-label'),
+    Separator: /* @__PURE__ */ part(BaseCombobox.Separator, 'pui-combobox-separator'),
+    Chips: /* @__PURE__ */ part(BaseCombobox.Chips, 'pui-combobox-chips'),
+    Chip: /* @__PURE__ */ part(BaseCombobox.Chip, 'pui-combobox-chip'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { ComboboxRoot };
+export const { Arrow: ComboboxArrow, Backdrop: ComboboxBackdrop, Chip: ComboboxChip, ChipRemove: ComboboxChipRemove, Chips: ComboboxChips, Clear: ComboboxClear, Collection: ComboboxCollection, Empty: ComboboxEmpty, Group: ComboboxGroup, GroupLabel: ComboboxGroupLabel, Icon: ComboboxIcon, Input: ComboboxInput, InputGroup: ComboboxInputGroup, Item: ComboboxItem, ItemIndicator: ComboboxItemIndicator, Label: ComboboxLabel, List: ComboboxList, Popup: ComboboxPopup, Portal: ComboboxPortal, Positioner: ComboboxPositioner, Row: ComboboxRow, Separator: ComboboxSeparator, Status: ComboboxStatus, Trigger: ComboboxTrigger, Value: ComboboxValue, Content: ComboboxContent, } = Combobox;