@surflane/ui 0.8.0 → 0.10.0

package/dist/inline-message.d.ts

@@ -1,35 +1,59 @@
 import * as React from 'react';
 import { type StatusTone } from './status.js';
 export declare const InlineMessage: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    Root: ({ tone, className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
         tone?: StatusTone;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Icon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Icon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
         tone?: StatusTone;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: 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;
+    Content: ({ 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;
+    Title: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Description: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
+    Actions: ({ 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;
 };
-export declare const InlineMessageRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const InlineMessageRoot: ({ tone, className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
     tone?: StatusTone;
-} & React.RefAttributes<HTMLDivElement>>, InlineMessageIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, InlineMessageIcon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
     tone?: StatusTone;
-} & React.RefAttributes<HTMLSpanElement>>, InlineMessageContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, InlineMessageTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, InlineMessageDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>, InlineMessageActions: 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, InlineMessageContent: ({ 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, InlineMessageTitle: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, InlineMessageDescription: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element, InlineMessageActions: ({ 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/inline-message.js

@@ -1,23 +1,22 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { useToneTransition } from './tone-transition.js';
 import { part, cx } from './parts.js';
 import { StatusIcon } from './status.js';
-const MessageRoot = /* @__PURE__ */ React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
+const MessageRoot = function MessageRoot({ tone = 'neutral', className, ref, ...props }) {
     const elementRef = useToneTransition(tone, ref);
-    return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: cx('pui-message', className) }));
-});
-const MessageIcon = /* @__PURE__ */ React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('pui-message-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
-});
+    return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: cx('surf-message', className) }));
+};
+const MessageIcon = function MessageIcon({ tone = 'neutral', children, className, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('surf-message-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
+};
 export const InlineMessage = {
     Root: MessageRoot,
     Icon: MessageIcon,
-    Content: /* @__PURE__ */ part('div', 'pui-message-content'),
-    Title: /* @__PURE__ */ part('strong', 'pui-message-title'),
-    Description: /* @__PURE__ */ part('p', 'pui-message-description'),
-    Actions: /* @__PURE__ */ part('div', 'pui-message-actions'),
+    Content: /* @__PURE__ */ part('div', 'surf-message-content'),
+    Title: /* @__PURE__ */ part('strong', 'surf-message-title'),
+    Description: /* @__PURE__ */ part('p', 'surf-message-description'),
+    Actions: /* @__PURE__ */ part('div', 'surf-message-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: InlineMessageRoot, Icon: InlineMessageIcon, Content: InlineMessageContent, Title: InlineMessageTitle, Description: InlineMessageDescription, Actions: InlineMessageActions, } = InlineMessage;

package/dist/input.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { type ComponentSizeAlias } from './sizing.js';
-export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & {
+export declare const Input: ({ className, leadingIcon, wrapperClassName, size, ref, ...props }: Omit<React.ComponentPropsWithoutRef<"input">, "size"> & {
     size?: number | ComponentSizeAlias;
     leadingIcon?: React.ReactNode;
     wrapperClassName?: string;
-} & React.RefAttributes<HTMLInputElement>>;
+} & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;

package/dist/input.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { cx } from './parts.js';
 import { useComponentSize } from './sizing.js';
 import { Input as BaseInput } from '@base-ui/react/input';
-export const Input = /* @__PURE__ */ React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
+export const Input = function Input({ className, leadingIcon, wrapperClassName, size, ref, ...props }) {
     const scheme = useComponentSize(typeof size === 'string' ? size : undefined);
-    return (_jsxs("span", { "data-ui-size": scheme, className: cx('pui-control', wrapperClassName), "data-leading-icon": leadingIcon ? '' : undefined, "data-disabled": props.disabled || undefined, children: [leadingIcon && (_jsx("span", { className: 'pui-control-icon', "aria-hidden": 'true', children: leadingIcon })), _jsx(BaseInput, { ...props, size: typeof size === 'number' ? size : undefined, ref: ref, className: cx('pui-input', className) })] }));
-});
+    return (_jsxs("span", { "data-ui-size": scheme, className: cx('surf-control', wrapperClassName), "data-leading-icon": leadingIcon ? '' : undefined, "data-disabled": props.disabled || undefined, children: [leadingIcon && (_jsx("span", { className: 'surf-control-icon', "aria-hidden": 'true', children: leadingIcon })), _jsx(BaseInput, { ...props, size: typeof size === 'number' ? size : undefined, ref: ref, className: cx('surf-input', className) })] }));
+};

package/dist/layout.d.ts

@@ -1,33 +1,45 @@
 import * as React from 'react';
 export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
-export declare const Container: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+export declare const Container: ({ width, className, ref, ...props }: React.ComponentProps<"div"> & {
     width?: "workspace" | "reading" | "wide" | "full";
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Stack: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+export declare const Stack: ({ gap, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     gap?: Space;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Inline: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+export declare const Inline: ({ gap, justify, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     gap?: Space;
     justify?: "start" | "between" | "end";
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Grid: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+export declare const Grid: ({ gap, bleed, columns, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     gap?: Space;
     /** Extend inline edges by the matching child content inset (card padding or table cell inset). The parent
      * must reserve this space for the card surface and focus outline. */
     bleed?: Space;
     columns?: 1 | 2 | 3 | 4 | "layout";
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
 /** Spans are explicit at each viewport breakpoint; placement follows DOM order. */
-export declare const GridItem: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+export declare const GridItem: ({ span, mediumSpan, smallSpan, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     mediumSpan?: 1 | 2 | 3 | 4 | 5 | 6;
     smallSpan?: 1 | 2 | 3 | 4;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
 export type SurfaceKind = 'canvas' | 'subtle';
-export declare const Surface: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+export declare const Surface: ({ surface, tone, padding, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     /** The background: subtle sits on the sheet, canvas matches it. */
     surface?: SurfaceKind;
     /** @deprecated Use surface; tone names a status color elsewhere. */
     tone?: SurfaceKind;
     padding?: Space;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/layout.js

@@ -1,40 +1,40 @@
-'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';
 const gapStyle = (gap, style) => ({
-    ...(gap === undefined ? {} : { '--layout-gap': `var(--space-${gap})` }),
+    ...(gap === undefined
+        ? {}
+        : { '--surf-layout-gap': `var(--surf-space-${gap})` }),
     ...style,
 });
-export const Container = /* @__PURE__ */ React.forwardRef(function Container({ width = 'workspace', className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-container', className), "data-width": width }));
-});
-export const Stack = /* @__PURE__ */ React.forwardRef(function Stack({ gap, className, style, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-stack', className), style: gapStyle(gap, style) }));
-});
-export const Inline = /* @__PURE__ */ React.forwardRef(function Inline({ gap, justify = 'start', className, style, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-inline', className), "data-justify": justify, style: gapStyle(gap, style) }));
-});
-export const Grid = /* @__PURE__ */ React.forwardRef(function Grid({ gap, bleed = 0, columns = 3, className, style, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-grid', className), "data-columns": columns, style: gapStyle(gap, {
-            '--grid-inline-bleed': `var(--space-${bleed})`,
+export const Container = function Container({ width = 'workspace', className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-container', className), "data-width": width }));
+};
+export const Stack = function Stack({ gap, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-stack', className), style: gapStyle(gap, style) }));
+};
+export const Inline = function Inline({ gap, justify = 'start', className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-inline', className), "data-justify": justify, style: gapStyle(gap, style) }));
+};
+export const Grid = function Grid({ gap, bleed = 0, columns = 3, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-grid', className), "data-columns": columns, style: gapStyle(gap, {
+            '--surf-grid-inline-bleed': `var(--surf-space-${bleed})`,
             ...style,
         }) }));
-});
+};
 /** Spans are explicit at each viewport breakpoint; placement follows DOM order. */
-export const GridItem = /* @__PURE__ */ React.forwardRef(function GridItem({ span, mediumSpan, smallSpan, className, style, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-grid-item', className), style: {
-            '--grid-item-span': span,
-            '--grid-item-span-medium': mediumSpan,
-            '--grid-item-span-small': smallSpan,
+export const GridItem = function GridItem({ span, mediumSpan, smallSpan, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-grid-item', className), style: {
+            '--surf-grid-item-span': span,
+            '--surf-grid-item-span-medium': mediumSpan,
+            '--surf-grid-item-span-small': smallSpan,
             ...style,
         } }));
-});
-export const Surface = /* @__PURE__ */ React.forwardRef(function Surface({ surface, tone, padding, className, style, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-surface', className), "data-surface": surface ?? tone ?? 'subtle', style: {
+};
+export const Surface = function Surface({ surface, tone, padding, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-surface', className), "data-surface": surface ?? tone ?? 'subtle', style: {
             ...(padding === undefined
                 ? {}
-                : { '--surface-padding': `var(--space-${padding})` }),
+                : { '--surf-surface-padding': `var(--surf-space-${padding})` }),
             ...style,
         } }));
-});
+};

package/dist/link.d.ts

@@ -3,4 +3,6 @@ import { useRender } from '@base-ui/react/use-render';
 export type LinkProps = Omit<useRender.ComponentProps<'a'>, 'ref'>;
 /** A text link. Pass a router's link element as `render`, such as
  * `<Link render={<NextLink href='/docs' />}>Docs</Link>`, to keep client navigation. */
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: ({ render, className, ref, ...props }: LinkProps & {
+    ref?: React.Ref<HTMLAnchorElement>;
+}) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/link.js

@@ -1,17 +1,16 @@
 'use client';
-import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { cx } from './parts.js';
 /** A text link. Pass a router's link element as `render`, such as
  * `<Link render={<NextLink href='/docs' />}>Docs</Link>`, to keep client navigation. */
-export const Link = /* @__PURE__ */ React.forwardRef(function Link({ render, className, ...props }, ref) {
+export const Link = function Link({ render, className, ref, ...props }) {
     return useRender({
         defaultTagName: 'a',
         render,
         ref,
         props: {
             ...props,
-            className: cx('pui-link', className),
+            className: cx('surf-link', className),
         },
     });
-});
+};

package/dist/list.d.ts

@@ -1,33 +1,49 @@
 import * as React from 'react';
-declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const ListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+declare const ListRoot: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"ul"> & {
+    ref?: React.Ref<HTMLUListElement>;
+}) => React.JSX.Element;
+declare const ListItem: ({ selected, className, ref, ...props }: React.ComponentPropsWithoutRef<"li"> & {
     selected?: boolean;
-} & React.RefAttributes<HTMLLIElement>>;
+} & {
+    ref?: React.Ref<HTMLLIElement>;
+}) => React.JSX.Element;
 export declare const List: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    Root: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"ul"> & {
+        ref?: React.Ref<HTMLUListElement>;
+    }) => React.JSX.Element;
+    Item: ({ selected, className, ref, ...props }: React.ComponentPropsWithoutRef<"li"> & {
         selected?: boolean;
-    } & React.RefAttributes<HTMLLIElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLLIElement>;
+    }) => React.JSX.Element;
+    Content: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Title: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Description: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
+    Actions: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { ListRoot, ListItem };
-export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const ListContent: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ListTitle: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, ListDescription: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element, ListActions: ({ className, size, ref, ...rest }: 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/list.js

@@ -1,20 +1,19 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { part, cx } from './parts.js';
-const ListRoot = /* @__PURE__ */ React.forwardRef(function ListRoot({ className, ...props }, ref) {
-    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: cx('pui-list', className) }));
-});
-const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('pui-list-item', className) }));
-});
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
+const ListRoot = function ListRoot({ className, ref, ...props }) {
+    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: cx('surf-list', className) }));
+};
+const ListItem = function ListItem({ selected, className, ref, ...props }) {
+    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('surf-list-item', className) }));
+};
 export const List = {
     Root: ListRoot,
     Item: ListItem,
-    Content: /* @__PURE__ */ part('div', 'pui-list-content'),
-    Title: /* @__PURE__ */ part('div', 'pui-list-title'),
-    Description: /* @__PURE__ */ part('p', 'pui-list-description'),
-    Actions: /* @__PURE__ */ part('div', 'pui-list-actions'),
+    Content: /* @__PURE__ */ elementPart('div', 'surf-list-content'),
+    Title: /* @__PURE__ */ elementPart('div', 'surf-list-title'),
+    Description: /* @__PURE__ */ elementPart('p', 'surf-list-description'),
+    Actions: /* @__PURE__ */ elementPart('div', 'surf-list-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { ListRoot, ListItem };

package/dist/markdown.d.ts

@@ -1,15 +1,23 @@
 import * as React from 'react';
+import { type CodeBlockLabels } from './code.js';
 export type MarkdownProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
     source: string;
     label?: string;
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     codeWrap?: boolean;
+    /** Names the document gives its parts; pass translations here. */
+    labels?: Partial<MarkdownLabels>;
 };
+export type MarkdownLabels = {
+    /** A code block's name, given the document's label and the block's first line. */
+    code: (label: string, line: number) => string;
+    /** A table's name, given the document's label and the table's first line. */
+    table: (label: string, line: number) => string;
+    /** A task list checkbox whose item has no text. */
+    task: string;
+} & CodeBlockLabels;
 /** CommonMark + GFM. HTML stays disabled, URLs use react-markdown's safe default.
  * Fetching, permissions, frontmatter, MDX and script execution are caller concerns. */
-export declare const Markdown: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
-    source: string;
-    label?: string;
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    codeWrap?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const Markdown: ({ source, label, headingLevel, codeWrap, labels, className, ref, ...props }: MarkdownProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/markdown.js

@@ -6,6 +6,22 @@ import remarkGfm from 'remark-gfm';
 import { CodeBlock } from './code.js';
 import { Table } from './table.js';
 import { cx } from './parts.js';
+const markdownLabels = {
+    code: (label, line) => `${label}: code at line ${line}`,
+    table: (label, line) => `${label}: table at line ${line}`,
+    task: 'Task list item',
+};
+// Code blocks and tables read the labels here, so passing new labels never remounts
+// the parts react-markdown renders.
+const LabelsContext = /* @__PURE__ */ React.createContext({});
+function MarkdownCodeBlock({ label, line, ...props }) {
+    const { code, table: _table, task: _task, ...copy } = React.useContext(LabelsContext);
+    return (_jsx(CodeBlock, { ...props, label: (code ?? markdownLabels.code)(label, line), labels: copy }));
+}
+function MarkdownTable({ label, line, children, }) {
+    const { table } = React.useContext(LabelsContext);
+    return (_jsx(Table.Container, { label: (table ?? markdownLabels.table)(label, line), orientation: 'horizontal', children: children }));
+}
 function text(node) {
     return 'value' in node
         ? node.value
@@ -21,7 +37,8 @@ function visit(node, callback) {
 }
 /** CommonMark + GFM. HTML stays disabled, URLs use react-markdown's safe default.
  * Fetching, permissions, frontmatter, MDX and script execution are caller concerns. */
-export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
+export const Markdown = function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, labels, className, ref, ...props }) {
+    const taskLabel = labels?.task ?? markdownLabels.task;
     const prefix = `md-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
     const headings = React.useMemo(() => () => (tree) => {
         const counts = new Map();
@@ -48,11 +65,11 @@ export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ sou
         visit(tree, (node) => {
             if (node.tagName === 'li' &&
                 String(node.properties.className ?? '').includes('task-list-item')) {
-                const taskLabel = text(node).trim() || 'Task list item';
+                const name = text(node).trim() || taskLabel;
                 visit(node, (child) => {
                     if (child.tagName === 'input' &&
                         child.properties.type === 'checkbox')
-                        child.properties.ariaLabel = taskLabel;
+                        child.properties.ariaLabel = name;
                 });
             }
             for (const property of ['ariaDescribedBy', 'ariaLabelledBy']) {
@@ -78,7 +95,7 @@ export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ sou
                 /* A malformed fragment remains inert navigation text. */
             }
         });
-    }, [prefix]);
+    }, [prefix, taskLabel]);
     const components = React.useMemo(() => {
         const heading = (level) => ({ node: _node, ...headingProps }) => React.createElement(`h${Math.min(6, Math.max(1, headingLevel) + level - 1)}`, headingProps);
         return {
@@ -95,19 +112,19 @@ export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ sou
                 const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ??
                     'text';
                 const code = String(child.props.children ?? '').replace(/\n$/, '');
-                return (_jsx(CodeBlock, { code: code, language: language, wrap: codeWrap, label: `${label}: code at line ${node?.position?.start.line ?? 1}` }));
+                return (_jsx(MarkdownCodeBlock, { code: code, language: language, wrap: codeWrap, label: label, line: node?.position?.start.line ?? 1 }));
             },
             code({ node: _node, ...codeProps }) {
-                return _jsx("code", { ...codeProps, className: 'pui-markdown-inline-code' });
+                return _jsx("code", { ...codeProps, className: 'surf-markdown-inline-code' });
             },
             table({ node, children, ...tableProps }) {
-                return (_jsx(Table.Container, { label: `${label}: table at line ${node?.position?.start.line ?? 1}`, orientation: 'horizontal', children: _jsx("table", { ...tableProps, className: 'pui-table', children: children }) }));
+                return (_jsx(MarkdownTable, { label: label, line: node?.position?.start.line ?? 1, children: _jsx("table", { ...tableProps, className: 'surf-table', children: children }) }));
             },
             th({ node: _node, ...cellProps }) {
-                return (_jsx("th", { ...cellProps, scope: 'col', className: 'pui-table-cell pui-table-header' }));
+                return (_jsx("th", { ...cellProps, scope: 'col', className: 'surf-table-cell surf-table-header' }));
             },
             td({ node: _node, ...cellProps }) {
-                return _jsx("td", { ...cellProps, className: 'pui-table-cell' });
+                return _jsx("td", { ...cellProps, className: 'surf-table-cell' });
             },
             a({ node: _node, href, children, ...linkProps }) {
                 return href ? (_jsx("a", { ...linkProps, href: href, children: children })) : (_jsx("span", { children: children }));
@@ -117,5 +134,5 @@ export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ sou
             },
         };
     }, [headingLevel, label, codeWrap]);
-    return (_jsx("div", { ...props, ref: ref, role: 'article', className: cx('pui-prose pui-markdown', className), "aria-label": label, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [headings], remarkRehypeOptions: { clobberPrefix: `${prefix}-` }, skipHtml: true, components: components, children: source }) }));
-});
+    return (_jsx("div", { ...props, ref: ref, role: 'article', className: cx('surf-prose surf-markdown', className), "aria-label": label, children: _jsx(LabelsContext.Provider, { value: labels ?? {}, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [headings], remarkRehypeOptions: { clobberPrefix: `${prefix}-` }, skipHtml: true, components: components, children: source }) }) }));
+};