@surflane/ui 0.8.0 → 0.10.0

package/dist/toast.d.ts

@@ -8,55 +8,87 @@ export type ToastViewportProps = React.ComponentPropsWithoutRef<typeof BaseToast
     layout?: 'stack' | 'list' | 'anchored';
 };
 export declare const Toast: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Root: ({ tone, className, ref, ...props }: ToastRootProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Icon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
         tone?: StatusTone;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Icon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        tone?: StatusTone;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Close: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Action: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Viewport: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        layout?: "stack" | "list" | "anchored";
-    } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Text: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLSpanElement>;
+    }) => React.JSX.Element;
+    Close: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseToast.Close> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    Action: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseToast.Action> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    Viewport: ({ layout, className, ref, ...props }: ToastViewportProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Content: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Title: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "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/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
+    Text: ({ 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;
+    Positioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
     Provider: React.FC<import("@base-ui/react/toast").ToastProviderProps>;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     useToastManager: typeof BaseToast.useToastManager;
     createToastManager: typeof BaseToast.createToastManager;
 };
-export declare const ToastAction: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ToastArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastClose: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ToastContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ToastDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>, ToastPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ToastProvider: React.FC<import("@base-ui/react/toast").ToastProviderProps>, ToastRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    tone?: StatusTone;
-} & React.RefAttributes<HTMLDivElement>>, ToastTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLHeadingElement>>, ToastViewport: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    layout?: "stack" | "list" | "anchored";
-} & React.RefAttributes<HTMLDivElement>>, ToastIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+export declare const ToastAction: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseToast.Action> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, ToastArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastClose: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseToast.Close> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, ToastContent: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ToastDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element, ToastPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastPositioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ToastProvider: React.FC<import("@base-ui/react/toast").ToastProviderProps>, ToastRoot: ({ tone, className, ref, ...props }: ToastRootProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, ToastTitle: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLHeadingElement> | undefined;
+}) => React.JSX.Element, ToastViewport: ({ layout, className, ref, ...props }: ToastViewportProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, ToastIcon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
     tone?: StatusTone;
-} & React.RefAttributes<HTMLSpanElement>>, ToastText: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element, ToastText: ({ 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;
 /** What a toast() call takes besides its title. */
 export type ToastOptions = Omit<ToastManagerAddOptions<object>, 'title' | 'type'> & {
     /** A button in the toast, such as Undo. Shorthand for actionProps. */
@@ -106,10 +138,12 @@ export type ToasterProps = Omit<ToastViewportProps, 'children'> & {
     timeout?: number;
     /** The notifications region's name. */
     label?: string;
+    /** Each toast's close button name. */
+    closeLabel?: string;
     /** Directions a toast can be swiped away in. */
     swipeDirection?: React.ComponentPropsWithoutRef<typeof BaseToast.Root>['swipeDirection'];
 };
 /** Renders a helper's toasts: the provider, the region and each toast. Put one in the
  * app, then call toast() from anywhere. */
-export declare function Toaster({ toast: helper, limit, timeout, label, swipeDirection, ...props }: ToasterProps): React.JSX.Element;
+export declare function Toaster({ toast: helper, limit, timeout, label, closeLabel, swipeDirection, ...props }: ToasterProps): React.JSX.Element;
 export {};

package/dist/toast.js

@@ -7,20 +7,20 @@ import { Toast as BaseToast, } from '@base-ui/react/toast';
 import { part, skin, cx } from './parts.js';
 import { StatusIcon } from './status.js';
 const ToneContext = /* @__PURE__ */ React.createContext('neutral');
-const Root = /* @__PURE__ */ React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
-    return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('pui-toast', className) }) }));
-});
-const ToneIcon = /* @__PURE__ */ React.forwardRef(function ToastIcon({ tone, children, className, ...props }, ref) {
+const Root = function Root({ tone = 'neutral', className, ref, ...props }) {
+    return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('surf-toast', className) }) }));
+};
+const ToneIcon = function ToastIcon({ tone, children, className, ref, ...props }) {
     const inherited = React.useContext(ToneContext);
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('pui-toast-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
-});
-const Close = /* @__PURE__ */ React.forwardRef(function Close({ className, children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
-});
-const Action = /* @__PURE__ */ React.forwardRef(function Action({ className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
-});
-const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('surf-toast-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
+};
+const Close = function Close({ className, children, ref, ...props }) {
+    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-small', "data-ui-size": 'small', ...props, ref: ref, className: skin('surf-button surf-toast-close', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
+};
+const Action = function Action({ className, ref, ...props }) {
+    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('surf-button surf-toast-action', className) }));
+};
+const Viewport = function Viewport({ layout = 'stack', className, ref, ...props }) {
     const viewportRef = React.useRef(null);
     React.useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -28,7 +28,7 @@ const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = '
             return;
         const resize = new ResizeObserver(update);
         function update() {
-            const cards = Array.from(viewport.querySelectorAll('.pui-toast:not([data-limited])'));
+            const cards = Array.from(viewport.querySelectorAll('.surf-toast:not([data-limited])'));
             const gap = parseFloat(getComputedStyle(viewport).rowGap) || 0;
             const height = cards.reduce((sum, card) => {
                 const natural = parseFloat(getComputedStyle(card).getPropertyValue('--toast-height'));
@@ -41,15 +41,15 @@ const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = '
             const overflowing = height + 48 > window.innerHeight;
             viewport.toggleAttribute('data-stack-overflow', overflowing);
             const value = `${height}px`;
-            if (viewport.style.getPropertyValue('--toast-stack-height') !== value)
-                viewport.style.setProperty('--toast-stack-height', value);
+            if (viewport.style.getPropertyValue('--surf-toast-stack-height') !== value)
+                viewport.style.setProperty('--surf-toast-stack-height', value);
             if (overflowing && (!wasOverflow || pinned))
                 viewport.scrollTop = viewport.scrollHeight;
         }
         function refresh() {
             resize.disconnect();
             viewport
-                .querySelectorAll('.pui-toast:not([data-limited])')
+                .querySelectorAll('.surf-toast:not([data-limited])')
                 .forEach((card) => resize.observe(card));
             update();
         }
@@ -81,8 +81,8 @@ const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = '
                 ref(element);
             else if (ref)
                 ref.current = element;
-        }, "data-layout": layout, "data-ui-size": scheme, className: skin('pui-toast-viewport', className) }));
-});
+        }, "data-layout": layout, "data-ui-size": scheme, className: skin('surf-toast-viewport', className) }));
+};
 export const Toast = {
     ...BaseToast,
     Root,
@@ -90,11 +90,11 @@ export const Toast = {
     Close,
     Action,
     Viewport,
-    Content: /* @__PURE__ */ part(BaseToast.Content, 'pui-toast-content'),
-    Title: /* @__PURE__ */ part(BaseToast.Title, 'pui-toast-title'),
-    Description: /* @__PURE__ */ part(BaseToast.Description, 'pui-toast-description'),
-    Text: /* @__PURE__ */ part('div', 'pui-toast-text'),
-    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner', { portal: true }),
+    Content: /* @__PURE__ */ part(BaseToast.Content, 'surf-toast-content'),
+    Title: /* @__PURE__ */ part(BaseToast.Title, 'surf-toast-title'),
+    Description: /* @__PURE__ */ part(BaseToast.Description, 'surf-toast-description'),
+    Text: /* @__PURE__ */ part('div', 'surf-toast-text'),
+    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'surf-positioner', { portal: true }),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Action: ToastAction, Arrow: ToastArrow, Close: ToastClose, Content: ToastContent, Description: ToastDescription, Portal: ToastPortal, Positioner: ToastPositioner, Provider: ToastProvider, Root: ToastRoot, Title: ToastTitle, Viewport: ToastViewport, Icon: ToastIcon, Text: ToastText, } = Toast;
@@ -160,12 +160,12 @@ export function createToaster() {
 /** The shared toast helper: call toast.success('Saved') anywhere, with one Toaster
  * in the app. */
 export const toast = /* @__PURE__ */ createToaster();
-function ToastList({ swipeDirection }) {
+function ToastList({ swipeDirection, closeLabel, }) {
     const { toasts } = BaseToast.useToastManager();
-    return toasts.map((item) => (_jsx(Root, { toast: item, tone: tones[item.type ?? ''] ?? 'neutral', swipeDirection: swipeDirection, children: _jsxs(Toast.Content, { children: [_jsx(ToneIcon, {}), _jsxs(Toast.Text, { children: [_jsx(Toast.Title, {}), _jsx(Toast.Description, {}), _jsx(Action, {})] }), _jsx(Close, {})] }) }, item.id)));
+    return toasts.map((item) => (_jsx(Root, { toast: item, tone: tones[item.type ?? ''] ?? 'neutral', swipeDirection: swipeDirection, children: _jsxs(Toast.Content, { children: [_jsx(ToneIcon, {}), _jsxs(Toast.Text, { children: [_jsx(Toast.Title, {}), _jsx(Toast.Description, {}), _jsx(Action, {})] }), _jsx(Close, { "aria-label": closeLabel })] }) }, item.id)));
 }
 /** Renders a helper's toasts: the provider, the region and each toast. Put one in the
  * app, then call toast() from anywhere. */
-export function Toaster({ toast: helper = toast, limit = 3, timeout = 5000, label = 'Notifications', swipeDirection, ...props }) {
-    return (_jsx(BaseToast.Provider, { toastManager: helper.manager, limit: limit, timeout: timeout, children: _jsx(BaseToast.Portal, { children: _jsx(Viewport, { "aria-label": label, ...props, children: _jsx(ToastList, { swipeDirection: swipeDirection }) }) }) }));
+export function Toaster({ toast: helper = toast, limit = 3, timeout = 5000, label = 'Notifications', closeLabel = 'Dismiss notification', swipeDirection, ...props }) {
+    return (_jsx(BaseToast.Provider, { toastManager: helper.manager, limit: limit, timeout: timeout, children: _jsx(BaseToast.Portal, { children: _jsx(Viewport, { "aria-label": label, ...props, children: _jsx(ToastList, { swipeDirection: swipeDirection, closeLabel: closeLabel }) }) }) }));
 }

package/dist/toggle-group.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 import { skin } from './parts.js';
 export function ToggleGroup({ className, ref, ...props }) {
-    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
+    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('surf-toggle-group', className) }));
 }

package/dist/toggle.js

@@ -5,5 +5,5 @@ import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import { sizeName, skin } from './parts.js';
 export function Toggle({ className, size, ref, ...props }) {
     const scheme = useComponentSize(size === 'icon' ? undefined : size);
-    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('surf-button surf-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
 }

package/dist/tone-transition.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 /** Animate a scalar so the color-mix expression, not a browser's default
  * color interpolation space, determines every intermediate status color. */
-export declare function useToneTransition<Element extends HTMLElement>(tone: string, forwardedRef: React.ForwardedRef<Element>): React.RefObject<Element | null>;
+export declare function useToneTransition<Element extends HTMLElement>(tone: string, forwardedRef: React.Ref<Element> | undefined): React.RefObject<Element | null>;

package/dist/tone-transition.js

@@ -18,8 +18,8 @@ export function useToneTransition(tone, forwardedRef) {
         const element = ref.current;
         element?.removeAttribute('data-status-transition');
         for (let i = 0; i < 3; i++) {
-            element?.style.removeProperty(`--pui-status-from-${i}`);
-            element?.style.removeProperty(`--pui-status-to-${i}`);
+            element?.style.removeProperty(`--surf-status-from-${i}`);
+            element?.style.removeProperty(`--surf-status-to-${i}`);
         }
     }, []);
     React.useLayoutEffect(() => {
@@ -39,18 +39,19 @@ export function useToneTransition(tone, forwardedRef) {
             document.documentElement.hasAttribute('data-theme-switching'))
             return;
         const durationToken = getComputedStyle(element)
-            .getPropertyValue('--motion-feedback')
+            .getPropertyValue('--surf-motion-feedback')
             .trim();
         const duration = parseFloat(durationToken) * (durationToken.endsWith('ms') ? 1 : 1000);
         if (!Number.isFinite(duration) || duration <= 0)
             return;
-        from.forEach((value, i) => element.style.setProperty(`--pui-status-from-${i}`, value));
-        to.forEach((value, i) => element.style.setProperty(`--pui-status-to-${i}`, value));
+        from.forEach((value, i) => element.style.setProperty(`--surf-status-from-${i}`, value));
+        to.forEach((value, i) => element.style.setProperty(`--surf-status-to-${i}`, value));
         element.setAttribute('data-status-transition', '');
-        animation.current = element.animate([{ '--pui-status-progress': '0' }, { '--pui-status-progress': '1' }], {
+        animation.current = element.animate([{ '--surf-status-progress': '0' }, { '--surf-status-progress': '1' }], {
             duration,
-            easing: getComputedStyle(element).getPropertyValue('--ease-out').trim() ||
-                'ease-out',
+            easing: getComputedStyle(element)
+                .getPropertyValue('--surf-ease-out')
+                .trim() || 'ease-out',
         });
         animation.current.onfinish = clear;
     }, [tone, clear]);

package/dist/toolbar.d.ts

@@ -1,34 +1,58 @@
 import * as React from 'react';
 export declare const Toolbar: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLInputElement>>;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Group: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Button: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLButtonElement> | undefined;
+    }) => React.JSX.Element;
+    Link: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLAnchorElement> | undefined;
+    }) => React.JSX.Element;
+    Input: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+    }) => React.JSX.Element;
+    Separator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLButtonElement>>, ToolbarGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ToolbarInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLInputElement>>, ToolbarLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLAnchorElement>>, ToolbarRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ToolbarSeparator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarButton: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+}) => React.JSX.Element, ToolbarGroup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ToolbarInput: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+}) => React.JSX.Element, ToolbarLink: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => React.JSX.Element, ToolbarRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ToolbarSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;

package/dist/toolbar.js

@@ -3,12 +3,12 @@ import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { part } from './parts.js';
 export const Toolbar = {
     ...BaseToolbar,
-    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'pui-toolbar'),
-    Group: /* @__PURE__ */ part(BaseToolbar.Group, 'pui-toolbar-group'),
-    Button: /* @__PURE__ */ part(BaseToolbar.Button, 'pui-button pui-toolbar-button'),
-    Link: /* @__PURE__ */ part(BaseToolbar.Link, 'pui-button pui-toolbar-link'),
-    Input: /* @__PURE__ */ part(BaseToolbar.Input, 'pui-input pui-toolbar-input'),
-    Separator: /* @__PURE__ */ part(BaseToolbar.Separator, 'pui-toolbar-separator'),
+    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'surf-toolbar'),
+    Group: /* @__PURE__ */ part(BaseToolbar.Group, 'surf-toolbar-group'),
+    Button: /* @__PURE__ */ part(BaseToolbar.Button, 'surf-button surf-toolbar-button'),
+    Link: /* @__PURE__ */ part(BaseToolbar.Link, 'surf-button surf-toolbar-link'),
+    Input: /* @__PURE__ */ part(BaseToolbar.Input, 'surf-input surf-toolbar-input'),
+    Separator: /* @__PURE__ */ part(BaseToolbar.Separator, 'surf-toolbar-separator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Button: ToolbarButton, Group: ToolbarGroup, Input: ToolbarInput, Link: ToolbarLink, Root: ToolbarRoot, Separator: ToolbarSeparator, } = Toolbar;

package/dist/tooltip.d.ts

@@ -12,7 +12,10 @@ export type TooltipProps = {
     /** A keyboard shortcut for the same action, such as '⌘B', set apart after the
      * label. */
     shortcut?: string;
+    /** Keeps the tooltip from opening while the trigger stays as it is. */
+    disabled?: boolean;
+    /** @deprecated Use `disabled`. Removed in a later minor. */
     enabled?: boolean;
     children: React.ReactElement;
 } & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>;
-export declare function Tooltip({ label, shortcut, enabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ label, shortcut, disabled, enabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;

package/dist/tooltip.js

@@ -5,9 +5,9 @@ import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 export function TooltipProvider({ delayDuration = 150, skipDelayDuration = 300, children, }) {
     return (_jsx(BaseTooltip.Provider, { delay: delayDuration, closeDelay: 0, timeout: skipDelayDuration, children: children }));
 }
-export function Tooltip({ label, shortcut, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
+export function Tooltip({ label, shortcut, disabled = false, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
     const scheme = useComponentSize();
     // Disabling keeps the trigger mounted, so turning the tooltip on or off never
     // moves focus.
-    return (_jsxs(BaseTooltip.Root, { disabled: !enabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: [label, shortcut && _jsx("kbd", { className: 'pui-tooltip-shortcut', children: shortcut })] }) }) })] }));
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled || !enabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'surf-positioner surf-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'surf-tooltip', "data-ui-size": scheme, children: [label, shortcut && (_jsx("kbd", { className: 'surf-tooltip-shortcut', children: shortcut }))] }) }) })] }));
 }

package/dist/tree.d.ts

@@ -6,6 +6,15 @@ export type TreeNode = {
     children?: readonly TreeNode[];
     disabled?: boolean;
 };
+export type TreeLabels = {
+    /** A folder's toggle while it is collapsed, then expanded. */
+    expand: (label: string) => string;
+    collapse: (label: string) => string;
+    /** The scroll region around the tree, given the tree's label. */
+    scrollArea: (label: string) => string;
+    /** Shown when there are no nodes. */
+    empty: string;
+};
 export type TreeProps = {
     nodes: readonly TreeNode[];
     label: string;
@@ -20,9 +29,11 @@ export type TreeProps = {
     rowHeight?: number;
     size?: ComponentSize;
     virtualized?: boolean;
+    labels?: Partial<TreeLabels>;
+    /** @deprecated Use `labels.empty`. Removed in a later minor. */
     emptyLabel?: string;
     dir?: 'ltr' | 'rtl';
     className?: string;
 };
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, emptyLabel, dir, className, }: TreeProps): React.JSX.Element;
+export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, labels, emptyLabel, dir, className, }: TreeProps): React.JSX.Element;

package/dist/tree.js

@@ -11,7 +11,7 @@ import { ScrollArea } from './scroll-area.js';
 import { cx } from './parts.js';
 const normalize = (text) => text.normalize('NFKC').toLocaleLowerCase();
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, emptyLabel = 'No items.', dir, className, }) {
+export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, labels, emptyLabel, dir, className, }) {
     const scheme = useComponentSize(size);
     const touchFloor = React.useSyncExternalStore((listener) => {
         const query = matchMedia('(max-width: 760px), (pointer: coarse)');
@@ -273,10 +273,10 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             .getVirtualItems()
             .map((row) => ({ index: row.index, start: row.start }))
         : items.map((_, index) => ({ index, start: index * rowHeight }));
-    return (_jsx(ScrollArea, { orientation: 'vertical', label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: cx('pui-tree-scroll', className), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'pui-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
+    return (_jsx(ScrollArea, { orientation: 'vertical', label: labels?.scrollArea?.(label) ?? `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: cx('surf-tree-scroll', className), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'surf-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
                 container.current = element;
                 containerProps.ref(element);
-            }, dir: dir, className: 'pui-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
+            }, dir: dir, className: 'surf-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
                 focusWithin.current = true;
             }, onBlurCapture: (event) => {
                 if (event.relatedTarget &&
@@ -290,7 +290,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                     : items.length * rowHeight,
             }, children: rows.map(({ index, start }) => {
                 const item = items[index], node = item.getItemData(), props = item.getProps();
-                return (_createElement("div", { ...props, key: item.getId(), className: 'pui-tree-item', "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
+                return (_createElement("div", { ...props, key: item.getId(), className: 'surf-tree-item', "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
                         focusItem(item);
                         select(item, event.shiftKey);
                     }, style: {
@@ -298,16 +298,20 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                         insetInline: 0,
                         top: start,
                         blockSize: rowHeight,
-                        paddingInlineStart: `calc(var(--space-2) + ${Math.min(item.getItemMeta().level, 8)} * var(--space-4))`,
+                        paddingInlineStart: `calc(var(--surf-space-2) + ${Math.min(item.getItemMeta().level, 8)} * var(--surf-space-4))`,
                     } },
-                    item.isFolder() ? (_jsx("button", { type: 'button', className: 'pui-tree-toggle', tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? 'Collapse' : 'Expand'} ${node.label}`, onClick: (event) => {
+                    item.isFolder() ? (_jsx("button", { type: 'button', className: 'surf-tree-toggle', tabIndex: -1, disabled: node.disabled, "aria-label": item.isExpanded()
+                            ? (labels?.collapse?.(node.label) ??
+                                `Collapse ${node.label}`)
+                            : (labels?.expand?.(node.label) ??
+                                `Expand ${node.label}`), onClick: (event) => {
                             event.stopPropagation();
                             focusItem(item);
                             if (item.isExpanded())
                                 item.collapse();
                             else
                                 item.expand();
-                        }, children: _jsx(Icon, { name: 'chevron-forward', "data-expanded": item.isExpanded() || undefined }) })) : (_jsx("span", { className: 'pui-tree-leaf', "aria-hidden": 'true' })),
-                    _jsx("span", { className: 'pui-tree-label', children: node.label })));
-            }) })) : (_jsx("div", { role: 'status', className: 'pui-tree-empty', children: emptyLabel })) }));
+                        }, children: _jsx(Icon, { name: 'chevron-forward', "data-expanded": item.isExpanded() || undefined }) })) : (_jsx("span", { className: 'surf-tree-leaf', "aria-hidden": 'true' })),
+                    _jsx("span", { className: 'surf-tree-label', children: node.label })));
+            }) })) : (_jsx("div", { role: 'status', className: 'surf-tree-empty', children: labels?.empty ?? emptyLabel ?? 'No items.' })) }));
 }

package/dist/typography.d.ts

@@ -9,4 +9,6 @@ export declare function Text({ as: Tag, variant, color, weight, className, ...pr
     color?: 'primary' | 'secondary' | 'muted';
     weight?: 'regular' | 'medium';
 }): React.JSX.Element;
-export declare const Prose: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Prose: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/typography.js

@@ -1,14 +1,12 @@
-'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';
 export function Heading({ level = 2, size = 'section', className, ...props }) {
     const Tag = `h${level}`;
-    return (_jsx(Tag, { ...props, className: cx('pui-heading', className), "data-size": size }));
+    return (_jsx(Tag, { ...props, className: cx('surf-heading', className), "data-size": size }));
 }
 export function Text({ as: Tag = 'p', variant = 'body', color = 'primary', weight = 'regular', className, ...props }) {
-    return (_jsx(Tag, { ...props, className: cx('pui-text', className), "data-variant": variant, "data-color": color, "data-weight": weight }));
+    return (_jsx(Tag, { ...props, className: cx('surf-text', className), "data-variant": variant, "data-color": color, "data-weight": weight }));
 }
-export const Prose = /* @__PURE__ */ React.forwardRef(function Prose({ className, ...props }, ref) {
-    return _jsx("div", { ...props, ref: ref, className: cx('pui-prose', className) });
-});
+export const Prose = function Prose({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cx('surf-prose', className) });
+};