@surflane/ui 0.4.0 → 0.6.0

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,34 +1,12 @@
 '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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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: /* @__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'),
-};
-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 = /* @__PURE__ */ React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
@@ -96,12 +74,9 @@ 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: ['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/{advanced-forms.js → combobox.js}

@@ -1,22 +1,10 @@
 '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 { NumberField as BaseNumberField } from '@base-ui/react/number-field';
-import { skin, part } from './parts.js';
-import { useRootRef, useResetValue } from './form-state.js';
-function Mark({ kind, }) {
-    const path = kind === 'check'
-        ? 'm5 12 4 4L19 6'
-        : kind === 'clear'
-            ? 'm6 6 12 12M6 18 18 6'
-            : kind === 'expand'
-                ? 'm6 9 6 6 6-6'
-                : kind === 'plus'
-                    ? 'M5 12h14M12 5v14'
-                    : 'M5 12h14';
-    return (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: path }) }));
-}
+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.
@@ -24,26 +12,27 @@ function ComboboxRoot({ children, form, ...props }) {
     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');
-const ComboPositioner = /* @__PURE__ */ part(BaseCombobox.Positioner, 'pui-positioner');
-const ComboContent = /* @__PURE__ */ React.forwardRef(function ComboContent({ positionerProps, ...props }, ref) {
-    return (_jsx(BaseCombobox.Portal, { children: _jsx(ComboPositioner, { sideOffset: 6, ...positionerProps, children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
+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(Mark, { kind: 'expand' }) }));
+    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(Mark, { kind: 'clear' }) }));
+    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(Mark, { kind: 'check' }) }));
+    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(Mark, { kind: 'clear' }) }));
+    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,
@@ -53,7 +42,7 @@ export const Combobox = {
     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 scroll-area'),
+    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'),
@@ -63,31 +52,6 @@ export const Combobox = {
     Chips: /* @__PURE__ */ part(BaseCombobox.Chips, 'pui-combobox-chips'),
     Chip: /* @__PURE__ */ part(BaseCombobox.Chip, 'pui-combobox-chip'),
 };
-const NumberRoot = /* @__PURE__ */ React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
-    const [element, attach] = useRootRef(ref);
-    const [numeric, setNumeric] = useResetValue(value, defaultValue ?? null, element, form);
-    return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin('pui-number-field', className), onValueChange: (next, event) => {
-            onValueChange?.(next, event);
-            if (value === undefined && !event.isCanceled)
-                setNumeric(next);
-        } }));
-});
-const NumberIncrement = /* @__PURE__ */ React.forwardRef(function NumberIncrement({ className, children, ...props }, ref) {
-    return (_jsx(BaseNumberField.Increment, { "aria-label": 'Increase value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'plus' }) }));
-});
-const NumberDecrement = /* @__PURE__ */ React.forwardRef(function NumberDecrement({ className, children, ...props }, ref) {
-    return (_jsx(BaseNumberField.Decrement, { "aria-label": 'Decrease value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'minus' }) }));
-});
-export const NumberField = {
-    ...BaseNumberField,
-    Root: NumberRoot,
-    Increment: NumberIncrement,
-    Decrement: NumberDecrement,
-    Group: /* @__PURE__ */ part(BaseNumberField.Group, 'pui-number-group'),
-    Input: /* @__PURE__ */ part(BaseNumberField.Input, 'pui-number-input'),
-    ScrubArea: /* @__PURE__ */ part(BaseNumberField.ScrubArea, 'pui-number-scrub'),
-};
 // 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;
-export const { Decrement: NumberFieldDecrement, Group: NumberFieldGroup, Increment: NumberFieldIncrement, Input: NumberFieldInput, Root: NumberFieldRoot, ScrubArea: NumberFieldScrubArea, ScrubAreaCursor: NumberFieldScrubAreaCursor, } = NumberField;

package/dist/{context-overlays.d.ts → context-menu.d.ts}

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
-import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { type Placement } from './parts.js';
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export declare const ContextMenu: {
     Trigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Positioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>>> & {
+        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
         positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
     } & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -40,30 +42,11 @@ export declare const ContextMenu: {
     } & React.RefAttributes<HTMLDivElement>>;
     Root: typeof BaseContextMenu.Root;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     SubmenuRoot: typeof BaseContextMenu.SubmenuRoot;
 };
-declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
-export declare const PreviewCard: {
-    Trigger: typeof PreviewTrigger;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Popup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    createHandle: typeof BasePreviewCard.createHandle;
-    Handle: typeof BasePreviewCard.Handle;
-};
 export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, ContextMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -84,12 +67,7 @@ export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<impo
     indicator?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>, ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ContextMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>>> & {
+    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
     positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardHandle: typeof BasePreviewCard.Handle, PreviewCardPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-} & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/{context-overlays.js → context-menu.js}

@@ -2,17 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
-import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 import { Menu } from './menu.js';
-import { part, skin } from './parts.js';
-const ContextPositioner = /* @__PURE__ */ part(BaseContextMenu.Positioner, 'pui-positioner');
-const ContextContent = /* @__PURE__ */ React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
-    return (_jsx(ContextPositioner, { ...positionerProps, children: _jsx(Menu.Popup, { ...props, ref: ref }) }));
+import { OwnPortal, defined, part, scopedPortal, } from './parts.js';
+const ContextPositioner = /* @__PURE__ */ part(BaseContextMenu.Positioner, 'pui-positioner', { portal: true });
+const ContextContent = /* @__PURE__ */ React.forwardRef(function ContextContent({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+    return (_jsx(OwnPortal, { portal: BaseContextMenu.Portal, children: _jsx(ContextPositioner, { ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(Menu.Popup, { ...props, ref: ref }) }) }));
 });
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export const ContextMenu = {
     ...BaseContextMenu,
     Trigger: /* @__PURE__ */ part(BaseContextMenu.Trigger, 'pui-context-trigger'),
+    Portal: /* @__PURE__ */ scopedPortal(BaseContextMenu.Portal),
     Positioner: ContextPositioner,
     Content: ContextContent,
     Popup: Menu.Popup,
@@ -26,25 +26,5 @@ export const ContextMenu = {
     Separator: Menu.Separator,
     SubmenuTrigger: Menu.SubmenuTrigger,
 };
-const PreviewPositioner = /* @__PURE__ */ part(BasePreviewCard.Positioner, 'pui-positioner');
-// The preview is visual enhancement; its destination is the accessible interface.
-const PreviewPopup = /* @__PURE__ */ React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
-    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": 'true', className: skin('pui-preview-card', className) }));
-});
-function PreviewTrigger(props) {
-    const { className, ...rest } = props;
-    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
-}
-const PreviewContent = /* @__PURE__ */ React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
-    return (_jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, children: _jsx(PreviewPopup, { ...props, ref: ref }) }));
-});
-export const PreviewCard = {
-    ...BasePreviewCard,
-    Trigger: PreviewTrigger,
-    Positioner: PreviewPositioner,
-    Popup: PreviewPopup,
-    Content: PreviewContent,
-};
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Arrow: ContextMenuArrow, Backdrop: ContextMenuBackdrop, CheckboxItem: ContextMenuCheckboxItem, CheckboxItemIndicator: ContextMenuCheckboxItemIndicator, Group: ContextMenuGroup, GroupLabel: ContextMenuGroupLabel, Item: ContextMenuItem, LinkItem: ContextMenuLinkItem, Popup: ContextMenuPopup, Portal: ContextMenuPortal, Positioner: ContextMenuPositioner, RadioGroup: ContextMenuRadioGroup, RadioItem: ContextMenuRadioItem, RadioItemIndicator: ContextMenuRadioItemIndicator, Root: ContextMenuRoot, Separator: ContextMenuSeparator, SubmenuRoot: ContextMenuSubmenuRoot, SubmenuTrigger: ContextMenuSubmenuTrigger, Trigger: ContextMenuTrigger, Content: ContextMenuContent, } = ContextMenu;
-export const { Arrow: PreviewCardArrow, Backdrop: PreviewCardBackdrop, Handle: PreviewCardHandle, Popup: PreviewCardPopup, Portal: PreviewCardPortal, Positioner: PreviewCardPositioner, Root: PreviewCardRoot, Trigger: PreviewCardTrigger, Viewport: PreviewCardViewport, Content: PreviewCardContent, } = PreviewCard;

package/dist/css/accordion.css

@@ -0,0 +1,11 @@
+/* Accordion, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import './rules/button.css';
+@import './rules/disclosure.css';
+@import './rules/accordion.css';

package/dist/css/alert-dialog.css

@@ -0,0 +1,11 @@
+/* Alert Dialog, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import '@surflane/design-tokens/controls.css';
+@import './rules/dialog.css';
+@import './rules/alert-dialog.css';

package/{src → dist/css}/all.css

@@ -1,6 +1,6 @@
 /* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
  * composition, document typography and components. Each file keeps its cascade layer. */
-@layer surflane.tokens, surflane.themes, surflane.base, surflane.components;
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components, surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
 @import '@surflane/design-tokens/controls.css';
 @import '@surflane/design-tokens/foundations.css';

package/dist/css/app-shell.css

@@ -0,0 +1,12 @@
+/* App shell / Sidebar, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/icon.css';
+@import './rules/tooltip.css';
+@import './rules/button.css';
+@import './rules/app-shell.css';

package/dist/css/autocomplete.css

@@ -0,0 +1,15 @@
+/* Autocomplete, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/input.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/input-group.css';
+@import './rules/combobox.css';
+@import './rules/autocomplete.css';