@surflane/ui 0.9.0 → 0.10.0

package/dist/preview-card.js

@@ -1,20 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 import { OwnPortal, defined, part, scopedPortal, skin, } from './parts.js';
-const PreviewPositioner = /* @__PURE__ */ part(BasePreviewCard.Positioner, 'pui-positioner', { portal: true });
+const PreviewPositioner = /* @__PURE__ */ part(BasePreviewCard.Positioner, 'surf-positioner', { portal: true });
 // 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) }));
-});
+const PreviewPopup = function PreviewPopup({ className, ref, ...props }) {
+    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": 'true', className: skin('surf-preview-card', className) }));
+};
 function PreviewTrigger(props) {
     const { className, ...rest } = props;
-    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
+    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('surf-link surf-preview-trigger', className) }));
 }
-const PreviewContent = /* @__PURE__ */ React.forwardRef(function PreviewContent({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+const PreviewContent = function PreviewContent({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }) {
     return (_jsx(OwnPortal, { portal: BasePreviewCard.Portal, children: _jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(PreviewPopup, { ...props, ref: ref }) }) }));
-});
+};
 export const PreviewCard = {
     ...BasePreviewCard,
     Portal: /* @__PURE__ */ scopedPortal(BasePreviewCard.Portal),

package/dist/progress.d.ts

@@ -1,29 +1,49 @@
 import * as React from 'react';
 export declare const Progress: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Label: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    Value: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    Track: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Indicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ProgressLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>, ProgressRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ProgressTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ProgressValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const ProgressIndicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ProgressLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element, ProgressRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ProgressTrack: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ProgressValue: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/progress.js

@@ -3,11 +3,11 @@ import { Progress as BaseProgress } from '@base-ui/react/progress';
 import { part } from './parts.js';
 export const Progress = {
     ...BaseProgress,
-    Root: /* @__PURE__ */ part(BaseProgress.Root, 'pui-gauge pui-progress'),
-    Label: /* @__PURE__ */ part(BaseProgress.Label, 'pui-gauge-label'),
-    Value: /* @__PURE__ */ part(BaseProgress.Value, 'pui-gauge-value'),
-    Track: /* @__PURE__ */ part(BaseProgress.Track, 'pui-gauge-track'),
-    Indicator: /* @__PURE__ */ part(BaseProgress.Indicator, 'pui-gauge-indicator'),
+    Root: /* @__PURE__ */ part(BaseProgress.Root, 'surf-gauge surf-progress'),
+    Label: /* @__PURE__ */ part(BaseProgress.Label, 'surf-gauge-label'),
+    Value: /* @__PURE__ */ part(BaseProgress.Value, 'surf-gauge-value'),
+    Track: /* @__PURE__ */ part(BaseProgress.Track, 'surf-gauge-track'),
+    Indicator: /* @__PURE__ */ part(BaseProgress.Indicator, 'surf-gauge-indicator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Indicator: ProgressIndicator, Label: ProgressLabel, Root: ProgressRoot, Track: ProgressTrack, Value: ProgressValue, } = Progress;

package/dist/radio-group.d.ts

@@ -3,14 +3,22 @@ import { Radio as BaseRadio } from '@base-ui/react/radio';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import { type ChoiceSize } from './choice.js';
 export declare function RadioGroup<Value = string>({ value, defaultValue, onValueChange, className, form, ref, ...props }: BaseRadioGroup.Props<Value>): React.JSX.Element;
-declare const RadioRoot: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & ChoiceSize & React.RefAttributes<HTMLSpanElement>>;
+declare const RadioRoot: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseRadio.Root> & ChoiceSize & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseRadio.Root>>;
+}) => React.JSX.Element;
 export declare const Radio: {
-    Root: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & ChoiceSize & React.RefAttributes<HTMLSpanElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
+    Root: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseRadio.Root> & ChoiceSize & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseRadio.Root>>;
+    }) => React.JSX.Element;
+    Indicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { RadioRoot };
-export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioIndicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/radio-group.js

@@ -10,21 +10,21 @@ import { ChoiceResetPaint } from './choice.js';
 export function RadioGroup({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected, revision] = useResetValue(value, defaultValue ?? null, element, form);
-    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin('surf-choice-group', className), onValueChange: (next, event) => {
                 onValueChange?.(next, event);
                 if (value === undefined && !event.isCanceled)
                     setSelected(next);
             } }) }));
 }
-const RadioRoot = /* @__PURE__ */ React.forwardRef(function RadioRoot({ size, className, ...props }, ref) {
+const RadioRoot = function RadioRoot({ size, className, ref, ...props }) {
     React.useContext(ChoiceResetPaint);
     const scheme = useComponentSize(size);
-    return (_jsx(BaseRadio.Root, { ...props, "data-ui-size": size ? scheme : undefined, ref: ref, className: skin('pui-radio', className) }));
-});
+    return (_jsx(BaseRadio.Root, { ...props, "data-ui-size": size ? scheme : undefined, ref: ref, className: skin('surf-radio', className) }));
+};
 export const Radio = {
     ...BaseRadio,
     Root: RadioRoot,
-    Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'pui-radio-indicator'),
+    Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'surf-radio-indicator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { RadioRoot };

package/dist/scroll-area.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const ScrollArea: ({ label, orientation, scrollChain, style, rootClassName, rootStyle, tabIndex, role, className, children, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
     label?: string;
     rootClassName?: string;
     rootStyle?: React.CSSProperties;
     orientation?: "horizontal" | "vertical" | "both";
     scrollChain?: "auto" | "contain";
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/scroll-area.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { cx } from './parts.js';
-export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({ label, orientation = 'horizontal', scrollChain = 'auto', style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? 'region' : undefined, className, children, ...props }, ref) {
+export const ScrollArea = function ScrollArea({ label, orientation = 'horizontal', scrollChain = 'auto', style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? 'region' : undefined, className, children, ref, ...props }) {
     const dragPointer = React.useRef(null);
     const clearDrag = (event) => {
         if (dragPointer.current !== event.pointerId)
@@ -11,7 +11,7 @@ export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({
         dragPointer.current = null;
         event.currentTarget.removeAttribute('data-scroll-dragging');
     };
-    return (_jsxs(BaseScrollArea.Root, { className: cx('pui-scroll-root', rootClassName), style: rootStyle, onPointerMoveCapture: (event) => {
+    return (_jsxs(BaseScrollArea.Root, { className: cx('surf-scroll-root', rootClassName), style: rootStyle, onPointerMoveCapture: (event) => {
             if (event.pointerType === 'touch')
                 return;
             const root = event.currentTarget;
@@ -23,16 +23,16 @@ export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({
             event.currentTarget.removeAttribute('data-scroll-near-y');
         }, onPointerDownCapture: (event) => {
             const target = event.target;
-            const bar = target.closest('.pui-scrollbar');
+            const bar = target.closest('.surf-scrollbar');
             if (event.button === 0 && bar?.parentElement === event.currentTarget) {
                 dragPointer.current = event.pointerId;
                 event.currentTarget.setAttribute('data-scroll-dragging', bar.getAttribute('data-orientation') ?? '');
             }
-        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: cx('pui-scroll-viewport', className), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
+        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: cx('surf-scroll-viewport', className), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
                     overflowX: orientation === 'vertical' ? 'hidden' : 'auto',
                     overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',
                     overscrollBehaviorX: orientation === 'vertical' ? 'auto' : scrollChain,
                     overscrollBehaviorY: orientation === 'horizontal' ? 'auto' : scrollChain,
                     ...style,
-                }, children: _jsx(BaseScrollArea.Content, { className: 'pui-scroll-content', style: orientation === 'vertical' ? { minWidth: 0 } : undefined, children: children }) }), orientation !== 'vertical' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'horizontal', className: 'pui-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'pui-scroll-thumb' }) })), orientation !== 'horizontal' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'vertical', className: 'pui-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'pui-scroll-thumb' }) })), _jsx(BaseScrollArea.Corner, {})] }));
-});
+                }, children: _jsx(BaseScrollArea.Content, { className: 'surf-scroll-content', style: orientation === 'vertical' ? { minWidth: 0 } : undefined, children: children }) }), orientation !== 'vertical' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'horizontal', className: 'surf-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'surf-scroll-thumb' }) })), orientation !== 'horizontal' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'vertical', className: 'surf-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'surf-scroll-thumb' }) })), _jsx(BaseScrollArea.Corner, {})] }));
+};

package/dist/select.d.ts

@@ -30,4 +30,6 @@ export type SelectProps = {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
 /** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Select: ({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ref, ...props }: SelectProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;

package/dist/select.js

@@ -8,7 +8,7 @@ import { sizeName, cx } from './parts.js';
 const isGroup = (item) => 'options' in item;
 const flatten = (items) => items.flatMap((item) => (isGroup(item) ? item.options : [item]));
 /** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
-export const Select = /* @__PURE__ */ React.forwardRef(function Select({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }, ref) {
+export const Select = function Select({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ref, ...props }) {
     const scheme = useComponentSize(size);
     const options = flatten(items);
     // One stable callback, so the trigger ref is not detached on every render.
@@ -47,7 +47,7 @@ export const Select = /* @__PURE__ */ React.forwardRef(function Select({ options
     }, [initialValue, props.form]);
     const selected = value ?? localValue;
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx('pui-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
+    return (_jsx("span", { className: cx('surf-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
                 setLocalValue(v ?? '');
                 onValueChange?.(v ?? '');
             }, inputRef: (node) => {
@@ -56,8 +56,8 @@ export const Select = /* @__PURE__ */ React.forwardRef(function Select({ options
                     inputRef(node);
                 else if (inputRef)
                     inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'pui-select-trigger', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'pui-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'pui-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'pui-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'pui-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item))) }) }) }) })] }) }));
-});
+            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'surf-select-trigger', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'surf-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'surf-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'surf-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'surf-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'surf-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item))) }) }) }) })] }) }));
+};
 function renderOption(option) {
-    return (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: option.value, "data-option-value": option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
+    return (_jsxs(BaseSelect.Item, { className: 'surf-select-item', value: option.value, "data-option-value": option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'surf-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
 }

package/dist/separator.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+export declare const Separator: ({ inset, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseSeparator> & {
     inset?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseSeparator>>;
+}) => React.JSX.Element;

package/dist/separator.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import { skin } from './parts.js';
-export const Separator = /* @__PURE__ */ React.forwardRef(function Separator({ inset = false, className, ...props }, ref) {
-    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('pui-separator', className) }));
-});
+export const Separator = function Separator({ inset = false, className, ref, ...props }) {
+    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('surf-separator', className) }));
+};

package/dist/sheet.d.ts

@@ -4,14 +4,20 @@ import { Footer, Header, type PanelOptions, type PanelSide } from './panel.js';
 declare function SheetRoot({ side, modal, ...props }: React.ComponentProps<typeof BaseDialog.Root> & {
     side?: PanelSide;
 }): React.JSX.Element;
-declare const SheetContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+declare const SheetContent: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
 declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof BaseDialog.Title>): React.JSX.Element;
 declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof BaseDialog.Description>): React.JSX.Element;
 export declare const Sheet: {
     Root: typeof SheetRoot;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+    Content: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & PanelOptions & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     Header: typeof Header;
-    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     Footer: typeof Footer;
     Title: typeof SheetTitle;
     Description: typeof SheetDescription;
@@ -25,5 +31,7 @@ export declare const Sheet: {
     Handle: typeof BaseDialog.Handle;
 };
 export { SheetDescription, SheetRoot, SheetTitle, SheetContent };
-export declare const SheetBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, SheetHandle: typeof BaseDialog.Handle, SheetPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetTrigger: BaseDialog.Trigger, SheetViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetHeader: typeof Header, SheetBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetFooter: typeof Footer;
+export declare const SheetBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, SheetHandle: typeof BaseDialog.Handle, SheetPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetTrigger: BaseDialog.Trigger, SheetViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetHeader: typeof Header, SheetBody: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, SheetFooter: typeof Footer;
 export type { PanelSide } from './panel.js';

package/dist/sheet.js

@@ -13,16 +13,16 @@ const SheetSide = /* @__PURE__ */ React.createContext({
 function SheetRoot({ side = 'right', modal = true, ...props }) {
     return (_jsx(SheetSide.Provider, { value: { side, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal }) }));
 }
-const SheetContent = /* @__PURE__ */ React.forwardRef(function SheetContent({ size, flush, closeLabel = 'Close panel', className, children, ...props }, ref) {
+const SheetContent = function SheetContent({ size, flush, closeLabel = 'Close panel', className, children, ref, ...props }) {
     const scheme = useComponentSize(size);
     const { side, modal } = React.useContext(SheetSide);
-    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'pui-panel-backdrop' })), _jsx("div", { className: 'pui-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: skin('pui-panel', className), "data-side": side, "data-size": normalizeSize(size) ?? 'default', "data-flush": flush || undefined, children: [_jsx(BaseDialog.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), children] }) })] }) }));
-});
+    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'surf-panel-backdrop' })), _jsx("div", { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: skin('surf-panel', className), "data-side": side, "data-size": normalizeSize(size) ?? 'default', "data-flush": flush || undefined, children: [_jsx(BaseDialog.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), children] }) })] }) }));
+};
 function SheetTitle({ className, ...props }) {
-    return (_jsx(BaseDialog.Title, { ...props, className: skin('pui-panel-title', className) }));
+    return (_jsx(BaseDialog.Title, { ...props, className: skin('surf-panel-title', className) }));
 }
 function SheetDescription({ className, ...props }) {
-    return (_jsx(BaseDialog.Description, { ...props, className: skin('pui-panel-description', className) }));
+    return (_jsx(BaseDialog.Description, { ...props, className: skin('surf-panel-description', className) }));
 }
 export const Sheet = {
     ...BaseDialog,

package/dist/size.d.ts

@@ -0,0 +1,7 @@
+export type ComponentSize = 'small' | 'default' | 'large';
+/**
+ * @deprecated The short spellings sm, md and lg render as small, default and large.
+ * Write the full names; the aliases are removed in a later minor.
+ */
+export type ComponentSizeAlias = ComponentSize | 'sm' | 'md' | 'lg';
+export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;

package/dist/size.js

@@ -0,0 +1,9 @@
+export function normalizeSize(size) {
+    return size === 'sm'
+        ? 'small'
+        : size === 'md'
+            ? 'default'
+            : size === 'lg'
+                ? 'large'
+                : size;
+}

package/dist/sizing.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-export type ComponentSize = 'small' | 'default' | 'large';
-export type ComponentSizeAlias = ComponentSize | 'sm' | 'md' | 'lg';
+import { normalizeSize, type ComponentSize, type ComponentSizeAlias } from './size.js';
+export { normalizeSize, type ComponentSize, type ComponentSizeAlias };
 export declare const ComponentSizeContext: React.Context<ComponentSize | undefined>;
-export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
 export declare function useComponentSize(size?: ComponentSizeAlias): ComponentSize | undefined;
 /** No layout box: grid/flex items and semantic children retain their own layout.
@@ -11,3 +10,9 @@ export declare function SizeProvider({ size, children, }: {
     size: ComponentSize;
     children: React.ReactNode;
 }): React.JSX.Element;
+/** The size context for a part a server component renders with an explicit size, so
+ * the popups it portals keep that size. */
+export declare function SizeScope({ size, children, }: {
+    size: ComponentSize;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/sizing.js

@@ -1,16 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { normalizeSize, } from './size.js';
+export { normalizeSize };
 export const ComponentSizeContext = /* @__PURE__ */ React.createContext(undefined);
-export function normalizeSize(size) {
-    return size === 'sm'
-        ? 'small'
-        : size === 'md'
-            ? 'default'
-            : size === 'lg'
-                ? 'large'
-                : size;
-}
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
 export function useComponentSize(size) {
     const inherited = React.useContext(ComponentSizeContext);
@@ -19,5 +12,10 @@ export function useComponentSize(size) {
 /** No layout box: grid/flex items and semantic children retain their own layout.
  * For table internals, place the provider outside the table, never inside tbody. */
 export function SizeProvider({ size, children, }) {
-    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: 'pui-size-scope', "data-ui-size": size, children: children }) }));
+    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: 'surf-size-scope', "data-ui-size": size, children: children }) }));
+}
+/** The size context for a part a server component renders with an explicit size, so
+ * the popups it portals keep that size. */
+export function SizeScope({ size, children, }) {
+    return (_jsx(ComponentSizeContext.Provider, { value: size, children: children }));
 }

package/dist/skeleton.d.ts

@@ -3,6 +3,6 @@ export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'childr
     shape?: 'text' | 'block' | 'circle';
 };
 /** Decorative placeholder; the owning region provides aria-busy and loading text. */
-export declare const Skeleton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
-    shape?: "text" | "block" | "circle";
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Skeleton: ({ shape, className, ref, ...props }: SkeletonProps & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;

package/dist/skeleton.js

@@ -1,8 +1,6 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { cx } from './parts.js';
+import { cx } from './class-names.js';
 /** Decorative placeholder; the owning region provides aria-busy and loading text. */
-export const Skeleton = /* @__PURE__ */ React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: cx('pui-skeleton', className), "data-shape": shape, "aria-hidden": 'true' }));
-});
+export const Skeleton = function Skeleton({ shape = 'text', className, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, className: cx('surf-skeleton', className), "data-shape": shape, "aria-hidden": 'true' }));
+};

package/dist/slider.d.ts

@@ -5,36 +5,60 @@ declare function SliderRoot<Value extends number | readonly number[]>({ value, d
 }): React.JSX.Element;
 export declare const Slider: {
     Root: typeof SliderRoot;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLOutputElement>>;
-    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Label: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Value: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLOutputElement> | undefined;
+    }) => React.JSX.Element;
+    Control: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Track: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Indicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Thumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { SliderRoot };
-export declare const SliderControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLOutputElement>>;
+export declare const SliderControl: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, SliderIndicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, SliderLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, SliderThumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, SliderTrack: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, SliderValue: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLOutputElement> | undefined;
+}) => React.JSX.Element;