@surflane/ui 0.9.0 → 0.10.0

package/dist/navigation-menu.js

@@ -1,34 +1,33 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
 import { part, skin } from './parts.js';
 function Root(props) {
     const { className, orientation = 'horizontal', ...rest } = props;
-    return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('pui-navigation-menu', className) }));
+    return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('surf-navigation-menu', className) }));
 }
-const Trigger = /* @__PURE__ */ React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-navigation-trigger', className), children: [children, indicator === false
+const Trigger = function Trigger({ className, children, indicator, ref, ...props }) {
+    return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('surf-button surf-navigation-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx(Icon, { name: 'chevron-down' }) })))] }));
-});
+                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'surf-navigation-icon', children: _jsx(Icon, { name: 'chevron-down' }) })))] }));
+};
 export const NavigationMenu = {
     ...BaseNavigationMenu,
     Root,
     Trigger,
-    List: /* @__PURE__ */ part(BaseNavigationMenu.List, 'pui-navigation-list'),
-    Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'pui-navigation-item'),
-    Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'pui-navigation-link'),
-    Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'pui-navigation-content'),
-    Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner', {
+    List: /* @__PURE__ */ part(BaseNavigationMenu.List, 'surf-navigation-list'),
+    Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'surf-navigation-item'),
+    Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'surf-navigation-link'),
+    Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'surf-navigation-content'),
+    Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'surf-positioner surf-navigation-positioner', {
         portal: true,
     }),
-    Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'pui-navigation-popup', { portal: true }),
-    Viewport: /* @__PURE__ */ part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
-    Icon: /* @__PURE__ */ React.forwardRef(function NavigationMenuIcon({ children, className, ...props }, ref) {
-        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
-    }),
+    Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'surf-navigation-popup', { portal: true }),
+    Viewport: /* @__PURE__ */ part(BaseNavigationMenu.Viewport, 'surf-navigation-viewport'),
+    Icon: function NavigationMenuIcon({ children, className, ref, ...props }) {
+        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('surf-navigation-icon', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
+    },
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Arrow: NavigationMenuArrow, Backdrop: NavigationMenuBackdrop, Content: NavigationMenuContent, Icon: NavigationMenuIcon, Item: NavigationMenuItem, Link: NavigationMenuLink, List: NavigationMenuList, Popup: NavigationMenuPopup, Portal: NavigationMenuPortal, Positioner: NavigationMenuPositioner, Root: NavigationMenuRoot, Trigger: NavigationMenuTrigger, Viewport: NavigationMenuViewport, } = NavigationMenu;

package/dist/number-field.d.ts

@@ -1,23 +1,48 @@
 import * as React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
 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>>;
+    Root: ({ value, defaultValue, onValueChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Root> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Increment: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Increment> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    Decrement: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Decrement> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    Group: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Input: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+    }) => React.JSX.Element;
+    ScrubArea: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
     ScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 };
-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>>;
+export declare const NumberFieldDecrement: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Decrement> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, NumberFieldGroup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, NumberFieldIncrement: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Increment> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, NumberFieldInput: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+}) => React.JSX.Element, NumberFieldRoot: ({ value, defaultValue, onValueChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNumberField.Root> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, NumberFieldScrubArea: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element, NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/number-field.js

@@ -1,33 +1,32 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
 import { part, skin } from './parts.js';
 import { useRootRef, useResetValue } from './form-state.js';
-const NumberRoot = /* @__PURE__ */ React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
+const NumberRoot = function NumberRoot({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
     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) => {
+    return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin('surf-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(Icon, { name: '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(Icon, { name: 'minus' }) }));
-});
+};
+const NumberIncrement = function NumberIncrement({ className, children, ref, ...props }) {
+    return (_jsx(BaseNumberField.Increment, { "aria-label": 'Increase value', ...props, ref: ref, className: skin('surf-number-step', className), children: children ?? _jsx(Icon, { name: 'plus' }) }));
+};
+const NumberDecrement = function NumberDecrement({ className, children, ref, ...props }) {
+    return (_jsx(BaseNumberField.Decrement, { "aria-label": 'Decrease value', ...props, ref: ref, className: skin('surf-number-step', className), children: children ?? _jsx(Icon, { name: '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'),
+    Group: /* @__PURE__ */ part(BaseNumberField.Group, 'surf-number-group'),
+    Input: /* @__PURE__ */ part(BaseNumberField.Input, 'surf-number-input'),
+    ScrubArea: /* @__PURE__ */ part(BaseNumberField.ScrubArea, 'surf-number-scrub'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Decrement: NumberFieldDecrement, Group: NumberFieldGroup, Increment: NumberFieldIncrement, Input: NumberFieldInput, Root: NumberFieldRoot, ScrubArea: NumberFieldScrubArea, ScrubAreaCursor: NumberFieldScrubAreaCursor, } = NumberField;

package/dist/otp-field.d.ts

@@ -1,12 +1,29 @@
 import * as React from 'react';
+import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
 export declare const OTPField: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    Group: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ value, defaultValue, form, onValueChange, className, ref: forwardedRef, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Root> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Input: ({ render, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Input> & {
+        ref?: React.Ref<HTMLInputElement>;
+    }) => React.JSX.Element;
+    Group: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Separator: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Separator> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
 };
-export declare const OTPFieldInput: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>, OTPFieldRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, OTPFieldSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, OTPFieldGroup: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const OTPFieldInput: ({ render, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Input> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element, OTPFieldRoot: ({ value, defaultValue, form, onValueChange, className, ref: forwardedRef, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Root> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, OTPFieldSeparator: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseOTPField.Separator> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, OTPFieldGroup: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;

package/dist/otp-field.js

@@ -1,22 +1,21 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
 import { part, skin } from './parts.js';
 import { useResetValue, useRootRef } from './form-state.js';
-const Root = /* @__PURE__ */ React.forwardRef(function Root({ value, defaultValue = '', form, onValueChange, className, ...props }, forwardedRef) {
+const Root = function Root({ value, defaultValue = '', form, onValueChange, className, ref: forwardedRef, ...props }) {
     const [element, ref] = useRootRef(forwardedRef);
     const [local, setLocal, revision] = useResetValue(value, defaultValue, element, form);
-    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin('pui-otp-field', className), onValueChange: (next, event) => {
+    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin('surf-otp-field', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setLocal(next);
         } }, revision));
-});
-const Separator = /* @__PURE__ */ React.forwardRef(function Separator({ className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Separator, { "aria-hidden": 'true', ...props, ref: ref, className: skin('pui-otp-separator', className) }));
-});
+};
+const Separator = function Separator({ className, ref, ...props }) {
+    return (_jsx(BaseOTPField.Separator, { "aria-hidden": 'true', ...props, ref: ref, className: skin('surf-otp-separator', className) }));
+};
 // Preserve Base UI's DOM refs and user render composition while fixing native-validation ARIA.
 function SlotElement({ domProps, state, render, }) {
     const { ref, ...props } = domProps;
@@ -32,14 +31,14 @@ function SlotElement({ domProps, state, render, }) {
         },
     });
 }
-const Input = /* @__PURE__ */ React.forwardRef(function Input({ render, className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin('pui-input pui-otp-input', className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
-});
+const Input = function Input({ render, className, ref, ...props }) {
+    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin('surf-input surf-otp-input', className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
+};
 export const OTPField = {
     ...BaseOTPField,
     Root,
     Input,
-    Group: /* @__PURE__ */ part('div', 'pui-otp-group'),
+    Group: /* @__PURE__ */ part('div', 'surf-otp-group'),
     Separator,
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/page-header.js

@@ -1,9 +1,8 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from './parts.js';
+import { cx } from './class-names.js';
 import { Heading, Text } from './typography.js';
 export function PageHeader({ as: Root = 'div', headingProps, actionsLabel, title, description, breadcrumb, actions, level = 1, size = 'title', className, ...props }) {
-    return (_jsxs(Root, { ...props, className: cx('pui-page-header', className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== '' && (_jsx("div", { className: 'pui-page-header-breadcrumb', children: breadcrumb })), _jsxs("div", { className: 'pui-page-header-content', children: [_jsxs("div", { className: 'pui-page-header-copy', children: [_jsx(Heading, { ...headingProps, level: level, size: size, children: title }), description != null &&
+    return (_jsxs(Root, { ...props, className: cx('surf-page-header', className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== '' && (_jsx("div", { className: 'surf-page-header-breadcrumb', children: breadcrumb })), _jsxs("div", { className: 'surf-page-header-content', children: [_jsxs("div", { className: 'surf-page-header-copy', children: [_jsx(Heading, { ...headingProps, level: level, size: size, children: title }), description != null &&
                                 description !== false &&
-                                description !== '' && (_jsx(Text, { color: 'secondary', className: 'pui-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'pui-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
+                                description !== '' && (_jsx(Text, { color: 'secondary', className: 'surf-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'surf-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
 }

package/dist/pagination.d.ts

@@ -1,16 +1,17 @@
 import * as React from 'react';
+export type PaginationLabels = {
+    previous: string;
+    next: string;
+    page: (page: number) => string;
+    more: string;
+    summary: (page: number, pageCount: number) => string;
+};
 type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> & {
     page: number;
     pageCount: number;
     siblings?: 0 | 1 | 2;
     disabled?: boolean;
-    labels?: {
-        previous?: string;
-        next?: string;
-        page?: (page: number) => string;
-        more?: string;
-        summary?: (page: number, pageCount: number) => string;
-    };
+    labels?: Partial<PaginationLabels>;
 };
 export type PaginationProps = CommonPaginationProps & ({
     getPageHref: (page: number) => string;
@@ -19,5 +20,7 @@ export type PaginationProps = CommonPaginationProps & ({
     getPageHref?: never;
     onPageChange: (page: number) => void;
 });
-export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export declare const Pagination: ({ page, pageCount, siblings, disabled, labels, getPageHref, onPageChange, className, "aria-label": ariaLabel, ref, ...props }: PaginationProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element | null;
 export {};

package/dist/pagination.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { Button } from './button.js';
 import { cx } from './parts.js';
-export const Pagination = /* @__PURE__ */ React.forwardRef(function Pagination({ page, pageCount, siblings = 1, disabled = false, labels, getPageHref, onPageChange, className, 'aria-label': ariaLabel = 'Pagination', ...props }, ref) {
+export const Pagination = function Pagination({ page, pageCount, siblings = 1, disabled = false, labels, getPageHref, onPageChange, className, 'aria-label': ariaLabel = 'Pagination', ref, ...props }) {
     const count = Number.isFinite(pageCount)
         ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(pageCount)))
         : 0;
@@ -28,7 +27,7 @@ export const Pagination = /* @__PURE__ */ React.forwardRef(function Pagination({
         const inactive = disabled || boundary;
         const currentPage = !boundary && target === current && typeof children === 'number';
         const attributes = {
-            className: 'pui-pagination-control',
+            className: 'surf-pagination-control',
             'aria-label': name,
             'aria-current': currentPage ? 'page' : undefined,
         };
@@ -41,5 +40,5 @@ export const Pagination = /* @__PURE__ */ React.forwardRef(function Pagination({
                     onPageChange?.(target);
             }, children: children }));
     }
-    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: cx('pui-pagination', className), children: [control(Math.max(1, current - 1), labels?.previous ?? 'Previous page', _jsxs(_Fragment, { children: [_jsx(Icon, { name: 'chevron-back', className: 'pui-pagination-arrow' }), _jsx("span", { children: labels?.previous ?? 'Previous page' })] }), current === 1), _jsx("span", { className: 'pui-pagination-summary', children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: 'list', className: 'pui-pagination-list', children: items.map((item) => (_jsx("li", { children: typeof item === 'number' ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: 'pui-pagination-gap', children: [_jsx(Icon, { name: 'more' }), _jsx("span", { className: 'pui-feedback-sr', children: labels?.more ?? 'More pages' })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? 'Next page', _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? 'Next page' }), _jsx(Icon, { name: 'chevron-forward', className: 'pui-pagination-arrow' })] }), current === count)] }));
-});
+    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: cx('surf-pagination', className), children: [control(Math.max(1, current - 1), labels?.previous ?? 'Previous page', _jsxs(_Fragment, { children: [_jsx(Icon, { name: 'chevron-back', className: 'surf-pagination-arrow' }), _jsx("span", { children: labels?.previous ?? 'Previous page' })] }), current === 1), _jsx("span", { className: 'surf-pagination-summary', children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: 'list', className: 'surf-pagination-list', children: items.map((item) => (_jsx("li", { children: typeof item === 'number' ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: 'surf-pagination-gap', children: [_jsx(Icon, { name: 'more' }), _jsx("span", { className: 'surf-feedback-sr', children: labels?.more ?? 'More pages' })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? 'Next page', _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? 'Next page' }), _jsx(Icon, { name: 'chevron-forward', className: 'surf-pagination-arrow' })] }), current === count)] }));
+};

package/dist/panel.d.ts

@@ -9,5 +9,7 @@ export type PanelOptions = {
     flush?: boolean;
 };
 export declare function Header({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-export declare const Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Body: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
 export declare function Footer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/panel.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { cx } from './parts.js';
 export function Header({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx('pui-panel-header', className) });
+    return _jsx("div", { ...props, className: cx('surf-panel-header', className) });
 }
-export const Body = /* @__PURE__ */ React.forwardRef(function Body({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-panel-body', className) }));
-});
+export const Body = function Body({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-panel-body', className) }));
+};
 export function Footer({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx('pui-panel-footer', className) });
+    return _jsx("div", { ...props, className: cx('surf-panel-footer', className) });
 }

package/dist/parts.d.ts

@@ -1,10 +1,6 @@
 import { type ComponentSize } from './sizing.js';
 import * as React from 'react';
-/** Joins class names, skipping empty ones. */
-export declare function cx(...classes: (string | false | null | undefined)[]): string;
-/** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
- * spellings meet the same CSS; other values such as xs or icon pass through. */
-export declare function sizeName<Size extends string>(size?: Size): ComponentSize | Size | undefined;
+export { cx, sizeName } from './class-names.js';
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export declare function skin<State>(base: string, custom?: string | ((state: State) => string | undefined)): string | ((state: State) => string);
 /** A styled Base UI part or element. A portal part renders outside the tree that sets
@@ -14,9 +10,11 @@ export declare function part<Element extends HTMLElement, Props extends {
     className?: unknown;
 }>(Component: React.ElementType, base: string, { portal }?: {
     portal?: boolean;
-}): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, "size"> & {
+}): ({ ref, ...props }: Omit<Props, "size"> & {
     size?: ComponentSize;
-}> & React.RefAttributes<Element>>;
+} & {
+    ref?: React.Ref<Element>;
+}) => React.JSX.Element;
 /** A namespace Portal that marks its subtree as already portalled. */
 export declare function scopedPortal<Portal extends React.ElementType>(BasePortal: Portal): Portal;
 /** Renders a Content's positioner in its portal, unless a namespace Portal holds it. */

package/dist/parts.js

@@ -1,17 +1,9 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ComponentSizeContext, normalizeSize, useComponentSize, } from './sizing.js';
+import { ComponentSizeContext, useComponentSize, } from './sizing.js';
 import * as React from 'react';
-/** Joins class names, skipping empty ones. */
-export function cx(...classes) {
-    return classes.filter(Boolean).join(' ');
-}
-/** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
- * spellings meet the same CSS; other values such as xs or icon pass through. */
-export function sizeName(size) {
-    return size === 'sm' || size === 'md' || size === 'lg'
-        ? normalizeSize(size)
-        : size;
-}
+import { cx } from './class-names.js';
+export { cx, sizeName } from './class-names.js';
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
     if (typeof custom === 'function')
@@ -22,7 +14,7 @@ export function skin(base, custom) {
  * data-ui-size, so it always carries the size scheme; other parts carry it only when
  * size is set. */
 export function part(Component, base, { portal = false } = {}) {
-    return React.forwardRef(function ThemedPart(props, ref) {
+    return function ThemedPart({ ref, ...props }) {
         const { className, size, ...rest } = props;
         const scheme = useComponentSize(size);
         const classes = typeof className === 'function'
@@ -31,16 +23,16 @@ export function part(Component, base, { portal = false } = {}) {
         const element = (_jsx(Component, { ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
         // Keep the React subtree stable when size changes from omitted to explicit.
         return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: element }));
-    });
+    };
 }
 /** True inside a namespace's own Portal, so a Content that brings its portal adds no
  * second one. Each Content resets it, so a nested popup portals itself. */
 const PortalScope = /* @__PURE__ */ React.createContext(false);
 /** A namespace Portal that marks its subtree as already portalled. */
 export function scopedPortal(BasePortal) {
-    const Scoped = React.forwardRef(function Portal(props, ref) {
+    const Scoped = function Portal({ ref, ...props }) {
         return (_jsx(PortalScope.Provider, { value: true, children: React.createElement(BasePortal, { ...props, ref }) }));
-    });
+    };
     return Scoped;
 }
 /** Renders a Content's positioner in its portal, unless a namespace Portal holds it. */

package/dist/popover.d.ts

@@ -6,23 +6,31 @@ declare function PopoverContent({ size, side, align, sideOffset, collisionPaddin
      * popover keeps the default width and takes the surrounding density. */
     size?: ComponentSizeAlias;
 }): React.JSX.Element;
-declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLHeadingElement>>;
-declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>;
+declare const PopoverTitle: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLHeadingElement> | undefined;
+}) => React.JSX.Element;
+declare const PopoverDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element;
 /** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
 declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Popover: {
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: typeof PopoverContent;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
+    Title: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLHeadingElement> | undefined;
+    }) => React.JSX.Element;
+    Description: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
     Root: typeof BasePopover.Root;
     Trigger: BasePopover.Trigger;
     Positioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover.js

@@ -5,10 +5,10 @@ import { useComponentSize } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 function PopoverContent({ size, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, className: skin('pui-popover', className) }) }) }));
+    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'surf-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, className: skin('surf-popover', className) }) }) }));
 }
-const PopoverTitle = /* @__PURE__ */ part(BasePopover.Title, 'pui-popover-title');
-const PopoverDescription = /* @__PURE__ */ part(BasePopover.Description, 'pui-popover-description');
+const PopoverTitle = /* @__PURE__ */ part(BasePopover.Title, 'surf-popover-title');
+const PopoverDescription = /* @__PURE__ */ part(BasePopover.Description, 'surf-popover-description');
 /** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
 const PopoverPortal = /* @__PURE__ */ scopedPortal(BasePopover.Portal);
 export const Popover = {

package/dist/preview-card.d.ts

@@ -5,14 +5,20 @@ declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Pa
 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>>> & {
+    Positioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Popup: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
         /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
         positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     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>>;
@@ -20,10 +26,16 @@ export declare const PreviewCard: {
     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>>> & {
+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: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPositioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, 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: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
     /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
     positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
 export {};