@surflane/ui 0.4.0 → 0.5.0

package/dist/preview-card.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { type Placement } from './parts.js';
+declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+export declare const PreviewCard: {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    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"> & Placement<React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>> & {
+        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
+        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
+    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 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"> & Placement<React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>> & {
+    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
+    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/preview-card.js

@@ -0,0 +1,27 @@
+'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 });
+// 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({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+    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),
+    Trigger: PreviewTrigger,
+    Positioner: PreviewPositioner,
+    Popup: PreviewPopup,
+    Content: PreviewContent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+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/progress.d.ts

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

package/dist/progress.js

@@ -0,0 +1,13 @@
+'use client';
+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'),
+};
+// 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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+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>>;
+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>>;
+};
+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>>;

package/dist/radio-group.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { skin, part } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
+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) => {
+                onValueChange?.(next, event);
+                if (value === undefined && !event.isCanceled)
+                    setSelected(next);
+            } }) }));
+}
+const RadioRoot = /* @__PURE__ */ React.forwardRef(function RadioRoot({ size, className, ...props }, ref) {
+    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) }));
+});
+export const Radio = {
+    ...BaseRadio,
+    Root: RadioRoot,
+    Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'pui-radio-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { RadioRoot };
+export const { Indicator: RadioIndicator } = Radio;

package/dist/scroll-area.js

@@ -2,6 +2,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) {
     const dragPointer = React.useRef(null);
     const clearDrag = (event) => {
@@ -10,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: ['pui-scroll-root', rootClassName].filter(Boolean).join(' '), style: rootStyle, onPointerMoveCapture: (event) => {
+    return (_jsxs(BaseScrollArea.Root, { className: cx('pui-scroll-root', rootClassName), style: rootStyle, onPointerMoveCapture: (event) => {
             if (event.pointerType === 'touch')
                 return;
             const root = event.currentTarget;
@@ -27,9 +28,7 @@ export const ScrollArea = /* @__PURE__ */ React.forwardRef(function ScrollArea({
                 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: ['pui-scroll-viewport scroll-area', className]
-                    .filter(Boolean)
-                    .join(' '), 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('pui-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,

package/dist/select.d.ts

@@ -5,8 +5,13 @@ export type SelectOption = {
     label: React.ReactNode;
     disabled?: boolean;
 };
-export type SelectProps = {
+/** Options under a visible heading, like an HTML optgroup. */
+export type SelectGroup = {
+    label: React.ReactNode;
     options: SelectOption[];
+};
+export type SelectProps = {
+    options: (SelectOption | SelectGroup)[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -24,10 +29,5 @@ export type SelectProps = {
     'aria-describedby'?: string;
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
-export declare function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }: SelectProps): React.JSX.Element;
-/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
-    size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLButtonElement>>;
-export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
-export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;
+/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/select.js

@@ -1,18 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
 import { Select as BaseSelect } from '@base-ui/react/select';
-import { sizeName } from './parts.js';
-const cx = (...v) => v.filter(Boolean).join(' ');
-function Chevron() {
-    return (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm7 10 5 5 5-5' }) }));
-}
-function Check() {
-    return (_jsx("svg", { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) }));
-}
-export function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }) {
+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) {
     const scheme = useComponentSize(size);
+    const options = flatten(items);
+    // One stable callback, so the trigger ref is not detached on every render.
+    const setTrigger = React.useCallback((node) => {
+        for (const target of [ref, triggerRef])
+            if (typeof target === 'function')
+                target(node);
+            else if (target)
+                target.current = node;
+    }, [ref, triggerRef]);
     const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
     const nativeInput = React.useRef(null);
     const initialValue = defaultValue ?? options[0]?.value ?? '';
@@ -41,7 +47,7 @@ export function Select({ options, value, defaultValue, onValueChange, className,
     }, [initialValue, props.form]);
     const selected = value ?? localValue;
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx('pui-select control-shell select-control', 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('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) => {
                 setLocalValue(v ?? '');
                 onValueChange?.(v ?? '');
             }, inputRef: (node) => {
@@ -50,49 +56,8 @@ export function Select({ options, value, defaultValue, onValueChange, className,
                     inputRef(node);
                 else if (inputRef)
                     inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: 'pui-select-trigger form-control', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon select-chevron', children: _jsx(Chevron, {}) })] }), _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: options.map((o) => (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
-}
-function optionList(children) {
-    return React.Children.toArray(children).flatMap((child) => {
-        if (!React.isValidElement(child))
-            return [];
-        const p = child.props;
-        if (child.type === React.Fragment ||
-            child.type === 'optgroup' ||
-            child.type === NativeSelectOptGroup)
-            return optionList(p.children);
-        return [
-            {
-                value: String(p.value ?? p.children ?? ''),
-                label: p.label ?? p.children,
-                disabled: p.disabled,
-            },
-        ];
-    });
-}
-/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
-    const input = React.useRef(null);
-    const options = optionList(children);
-    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
-            if (!onChange)
-                return;
-            const target = input.current;
-            if (!target)
-                return;
-            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
-            setter?.call(target, next);
-            const event = new Event('change', { bubbles: true });
-            Object.defineProperties(event, {
-                target: { value: target },
-                currentTarget: { value: target },
-            });
-            onChange(event);
-        } }));
+            }, 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))) }) }) }) })] }) }));
 });
-export function NativeSelectOption(props) {
-    return _jsx("option", { ...props });
-}
-export function NativeSelectOptGroup(props) {
-    return _jsx("optgroup", { ...props });
+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));
 }

package/dist/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/separator.js

@@ -0,0 +1,8 @@
+'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) }));
+});

package/dist/sheet.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+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 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>>;
+    Header: typeof Header;
+    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: typeof Footer;
+    Title: typeof SheetTitle;
+    Description: typeof SheetDescription;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: BaseDialog.Trigger;
+    createHandle: typeof BaseDialog.createHandle;
+    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 type { PanelSide } from './panel.js';

package/dist/sheet.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { skin } from './parts.js';
+import { useComponentSize, normalizeSize } from './sizing.js';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Body, Footer, Header, } from './panel.js';
+const SheetSide = /* @__PURE__ */ React.createContext({
+    side: 'right',
+    modal: true,
+});
+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 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] }) })] }) }));
+});
+function SheetTitle({ className, ...props }) {
+    return (_jsx(BaseDialog.Title, { ...props, className: skin('pui-panel-title', className) }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(BaseDialog.Description, { ...props, className: skin('pui-panel-description', className) }));
+}
+export const Sheet = {
+    ...BaseDialog,
+    Root: SheetRoot,
+    Content: SheetContent,
+    Header,
+    Body,
+    Footer,
+    Title: SheetTitle,
+    Description: SheetDescription,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SheetDescription, SheetRoot, SheetTitle, SheetContent };
+export const { Backdrop: SheetBackdrop, Close: SheetClose, Handle: SheetHandle, Popup: SheetPopup, Portal: SheetPortal, Trigger: SheetTrigger, Viewport: SheetViewport, Header: SheetHeader, Body: SheetBody, Footer: SheetFooter, } = Sheet;

package/dist/skeleton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    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>>;

package/dist/skeleton.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from './parts.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' }));
+});

package/dist/slider.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+declare function SliderRoot<Value extends number | readonly number[]>({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment, ...props }: BaseSlider.Root.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): 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>>;
+};
+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>>;

package/dist/slider.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { part, skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
+function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+}
+export const Slider = {
+    ...BaseSlider,
+    Root: SliderRoot,
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SliderRoot };
+export const { Control: SliderControl, Indicator: SliderIndicator, Label: SliderLabel, Thumb: SliderThumb, Track: SliderTrack, Value: SliderValue, } = Slider;

package/dist/spinner.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+};
+/** Use decorative within a loading region that already owns the announcement. */
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/spinner.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { sizeName, cx } from './parts.js';
+/** Use decorative within a loading region that already owns the announcement. */
+export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsxs("span", { ...props, ref: ref, className: cx('pui-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
+});

package/dist/status.d.ts

@@ -1,22 +1,4 @@
-import * as React from 'react';
-import { type ComponentSize } from './sizing.js';
 export type StatusTone = 'neutral' | 'success' | 'danger' | 'caution' | 'progress';
-export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-};
-export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
 export declare function StatusIcon({ tone }: {
     tone: StatusTone;
-}): React.JSX.Element;
-/** Domain status labels and live announcements remain the caller's responsibility. */
-export declare const StatusBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+}): import("react").JSX.Element;

package/dist/status.js

@@ -1,17 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useComponentSize } from './sizing.js';
-import { useToneTransition } from './tone-transition.js';
-export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
-    const scheme = useComponentSize(size);
-    const elementRef = useToneTransition(tone, ref);
-    return (_jsxs("span", { ...props, ref: elementRef, className: ['pui-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from './icon.js';
+const statusIcons = {
+    neutral: 'minus-circle',
+    success: 'check',
+    danger: 'alert',
+    caution: 'warning',
+    progress: 'clock',
+};
 export function StatusIcon({ tone }) {
-    return (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: tone === 'success' ? (_jsx("path", { d: 'm5 12 4 4L19 6' })) : tone === 'caution' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })) : tone === 'danger' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })) : tone === 'progress' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })) }));
+    return _jsx(Icon, { name: statusIcons[tone] });
 }
-/** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = /* @__PURE__ */ React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
-    return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
-});

package/dist/switch.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ChoiceSize } from './choice.js';
+declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+export declare const Switch: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export { SwitchRoot };
+export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;