@surflane/ui 0.9.0 → 0.10.1

package/dist/empty-state.js

@@ -1,19 +1,19 @@
-'use client';
 import * as React from 'react';
-import { part, cx } from './parts.js';
-const EmptyTitle = /* @__PURE__ */ React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
+const EmptyTitle = function EmptyTitle({ level = 3, className, ref, ...props }) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
-        className: cx('pui-empty-title', className),
+        className: cx('surf-empty-title', className),
     });
-});
+};
 export const EmptyState = {
-    Root: /* @__PURE__ */ part('div', 'pui-empty'),
-    Icon: /* @__PURE__ */ part('div', 'pui-empty-icon'),
+    Root: /* @__PURE__ */ elementPart('div', 'surf-empty'),
+    Icon: /* @__PURE__ */ elementPart('div', 'surf-empty-icon'),
     Title: EmptyTitle,
-    Description: /* @__PURE__ */ part('p', 'pui-empty-description'),
-    Actions: /* @__PURE__ */ part('div', 'pui-empty-actions'),
+    Description: /* @__PURE__ */ elementPart('p', 'surf-empty-description'),
+    Actions: /* @__PURE__ */ elementPart('div', 'surf-empty-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: EmptyStateRoot, Icon: EmptyStateIcon, Title: EmptyStateTitle, Description: EmptyStateDescription, Actions: EmptyStateActions, } = EmptyState;

package/dist/field.d.ts

@@ -1,41 +1,65 @@
 import * as React from 'react';
-declare const FieldRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const FieldLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
-declare const FieldControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
-declare const FieldDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>;
-declare const FieldError: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const FieldItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const FieldRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+declare const FieldLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;
+declare const FieldControl: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;
+declare const FieldDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}) => React.JSX.Element;
+declare const FieldError: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+declare const FieldItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
 export declare const Field: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Error: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Label: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Control: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Description: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLParagraphElement> | undefined;
+    }) => React.JSX.Element;
+    Error: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Item: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
     Validity: React.FC<import("@base-ui/react/field").FieldValidityProps>;
 };
 export { FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, };

package/dist/field.js

@@ -1,12 +1,12 @@
 'use client';
 import { Field as BaseField } from '@base-ui/react/field';
 import { part } from './parts.js';
-const FieldRoot = /* @__PURE__ */ part(BaseField.Root, 'pui-field');
-const FieldLabel = /* @__PURE__ */ part(BaseField.Label, 'pui-field-label');
-const FieldControl = /* @__PURE__ */ part(BaseField.Control, 'pui-input');
-const FieldDescription = /* @__PURE__ */ part(BaseField.Description, 'pui-field-description');
-const FieldError = /* @__PURE__ */ part(BaseField.Error, 'pui-field-error');
-const FieldItem = /* @__PURE__ */ part(BaseField.Item, 'pui-field-item');
+const FieldRoot = /* @__PURE__ */ part(BaseField.Root, 'surf-field');
+const FieldLabel = /* @__PURE__ */ part(BaseField.Label, 'surf-field-label');
+const FieldControl = /* @__PURE__ */ part(BaseField.Control, 'surf-input');
+const FieldDescription = /* @__PURE__ */ part(BaseField.Description, 'surf-field-description');
+const FieldError = /* @__PURE__ */ part(BaseField.Error, 'surf-field-error');
+const FieldItem = /* @__PURE__ */ part(BaseField.Item, 'surf-field-item');
 export const Field = {
     ...BaseField,
     Root: FieldRoot,

package/dist/fieldset.d.ts

@@ -1,14 +1,22 @@
 import * as React from 'react';
 export declare const Fieldset: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Legend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Legend: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const FieldsetLegend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, FieldsetRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
+export declare const FieldsetLegend: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, FieldsetRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;

package/dist/fieldset.js

@@ -3,8 +3,8 @@ import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
 import { part } from './parts.js';
 export const Fieldset = {
     ...BaseFieldset,
-    Root: /* @__PURE__ */ part(BaseFieldset.Root, 'pui-fieldset'),
-    Legend: /* @__PURE__ */ part(BaseFieldset.Legend, 'pui-fieldset-legend'),
+    Root: /* @__PURE__ */ part(BaseFieldset.Root, 'surf-fieldset'),
+    Legend: /* @__PURE__ */ part(BaseFieldset.Legend, 'surf-fieldset-legend'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Legend: FieldsetLegend, Root: FieldsetRoot } = Fieldset;

package/dist/file-upload.d.ts

@@ -31,6 +31,11 @@ export type FileUploadLabels = {
     progress: (file: File) => string;
     /** Shown when an upload fails and getUploadError gives no message. */
     uploadError: string;
+    /** A file's size, as the list shows it. */
+    size: (bytes: number) => string;
+    /** A file's action button name, given the action's text and the file, so a
+     * language can put the file name first. */
+    fileAction: (action: string, file: File) => string;
 };
 export type FileUploadProps = Omit<React.ComponentPropsWithoutRef<typeof Field.Root>, 'children' | 'name' | 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDrop'> & Pick<React.HTMLAttributes<HTMLDivElement>, 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDrop'> & {
     label: React.ReactNode;
@@ -54,26 +59,6 @@ export type FileUploadProps = Omit<React.ComponentPropsWithoutRef<typeof Field.R
     };
 };
 /** Native selection/validation and a cancellable transport adapter; no network request is built in. */
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@base-ui/react").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "name" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & Pick<React.HTMLAttributes<HTMLDivElement>, "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
-    label: React.ReactNode;
-    description?: React.ReactNode;
-    name?: string;
-    form?: string;
-    capture?: React.InputHTMLAttributes<HTMLInputElement>["capture"];
-    accept?: string;
-    multiple?: boolean;
-    required?: boolean;
-    maxFiles?: number;
-    maxFileSize?: number;
-    files?: readonly File[];
-    defaultFiles?: readonly File[];
-    onFilesChange?: (files: File[], details: FileChangeDetails) => void;
-    onReject?: (rejections: FileRejection[]) => void;
-    transport?: UploadTransport;
-    getUploadError?: (error: unknown) => string;
-    labels?: Partial<Omit<FileUploadLabels, "status">> & {
-        status?: Partial<FileUploadLabels["status"]>;
-    };
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: ({ label, description, name, form, accept, capture, multiple, required, maxFiles, maxFileSize, files: controlled, defaultFiles, onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled, className, onDragEnter, onDragLeave, onDragOver, onDrop, ref: forwardedRef, ...props }: FileUploadProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/file-upload.js

@@ -30,6 +30,11 @@ const labelsDefault = {
     reset: 'Files reset.',
     progress: (file) => `${file.name} upload progress`,
     uploadError: 'Upload failed. Try again.',
+    size: (bytes) => {
+        const unit = bytes >= 1024 * 1024 ? 'MB' : bytes >= 1024 ? 'KB' : 'B';
+        return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(bytes / (unit === 'MB' ? 1024 * 1024 : unit === 'KB' ? 1024 : 1))} ${unit}`;
+    },
+    fileAction: (action, file) => `${action} ${file.name}`,
 };
 function signature(file) {
     return JSON.stringify([file.name, file.size, file.type, file.lastModified]);
@@ -46,14 +51,12 @@ function accepts(file, accept) {
                 ? file.type.toLowerCase().startsWith(rule.slice(0, -1))
                 : file.type.toLowerCase() === rule));
 }
-function sizeLabel(bytes) {
-    const unit = bytes >= 1024 * 1024 ? 'MB' : bytes >= 1024 ? 'KB' : 'B';
-    return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(bytes / (unit === 'MB' ? 1024 * 1024 : unit === 'KB' ? 1024 : 1))} ${unit}`;
-}
 /** Native selection/validation and a cancellable transport adapter; no network request is built in. */
-export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }, forwardedRef) {
+export const FileUpload = function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ref: forwardedRef, ...props }) {
     const labels = {
         ...labelsDefault,
+        // A field that takes one file says so.
+        ...(!multiple && { choose: 'Choose file', drop: 'or drop a file here' }),
         ...customLabels,
         status: { ...labelsDefault.status, ...customLabels?.status },
     };
@@ -270,7 +273,7 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
         }
     }
     const hasFiles = (event) => Array.from(event.dataTransfer.types).includes('Files');
-    return (_jsxs(Field.Root, { ...props, ref: ref, name: name, disabled: disabled, className: skin('pui-field pui-file-upload', className), "data-dragging": dragging || undefined, children: [_jsx(Field.Label, { children: label }), description != null && description !== false && (_jsx(Field.Description, { children: description })), _jsxs("div", { className: 'pui-file-dropzone', onDragEnter: (event) => {
+    return (_jsxs(Field.Root, { ...props, ref: ref, name: name, disabled: disabled, className: skin('surf-file-upload', className), "data-dragging": dragging || undefined, children: [_jsx(Field.Label, { children: label }), description != null && description !== false && (_jsx(Field.Description, { children: description })), _jsxs("div", { className: 'surf-file-dropzone', onDragEnter: (event) => {
                     onDragEnter?.(event);
                     if (!event.defaultPrevented && hasFiles(event) && !disabled) {
                         event.preventDefault();
@@ -296,7 +299,7 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
                         event.preventDefault();
                         select(Array.from(event.dataTransfer.files), 'drop');
                     }
-                }, children: [_jsxs("div", { className: 'pui-file-picker', children: [_jsx(Field.Control, { ref: input, id: inputId, name: name, form: form, type: 'file', accept: accept, capture: capture, multiple: multiple, required: required, disabled: disabled, className: 'pui-file-native', "aria-describedby": errorId, onKeyDown: (event) => {
+                }, children: [_jsxs("div", { className: 'surf-file-picker', children: [_jsx(Field.Control, { ref: input, id: inputId, name: name, form: form, type: 'file', accept: accept, capture: capture, multiple: multiple, required: required, disabled: disabled, className: 'surf-file-native', "aria-describedby": errorId, onKeyDown: (event) => {
                                     if (event.key === 'Enter')
                                         event.preventBaseUIHandler();
                                 }, onChange: (event) => {
@@ -304,7 +307,7 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
                                         event.preventBaseUIHandler();
                                         select(Array.from(event.currentTarget.files ?? []), 'select');
                                     }
-                                } }), _jsxs("label", { htmlFor: inputId, className: 'pui-button pui-file-trigger', "data-variant": 'outline', "data-disabled": disabled || undefined, children: [_jsx(Icon, { name: 'upload' }), labels.choose] }), _jsx("p", { className: 'pui-file-drop-hint', children: labels.drop })] }), files.length > 0 && (_jsx("ul", { className: 'pui-file-list', role: 'list', children: files.map((file) => {
+                                } }), _jsxs("label", { htmlFor: inputId, className: 'surf-button surf-file-trigger', "data-variant": 'outline', "data-disabled": disabled || undefined, children: [_jsx(Icon, { name: 'upload' }), labels.choose] }), _jsx("p", { className: 'surf-file-drop-hint', children: labels.drop })] }), files.length > 0 && (_jsx("ul", { className: 'surf-file-list', role: 'list', children: files.map((file) => {
                             const state = metadata.get(file) ?? {
                                 status: 'ready',
                                 progress: null,
@@ -312,18 +315,22 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
                             if (!identities.current.has(file))
                                 identities.current.set(file, `${uid}-${++nextId.current}`);
                             const itemId = identities.current.get(file);
-                            return (_jsxs("li", { className: 'pui-file-item', children: [_jsxs("div", { className: 'pui-file-info', children: [_jsx("strong", { children: file.name }), _jsx("span", { children: sizeLabel(file.size) }), _jsx(StatusBadge, { tone: state.status === 'success'
+                            return (_jsxs("li", { className: 'surf-file-item', children: [_jsxs("div", { className: 'surf-file-info', children: [_jsx("strong", { children: file.name }), _jsx("span", { children: labels.size(file.size) }), _jsx(StatusBadge, { tone: state.status === 'success'
                                                     ? 'success'
                                                     : state.status === 'error'
                                                         ? 'danger'
                                                         : state.status === 'uploading'
                                                             ? 'progress'
-                                                            : 'neutral', children: labels.status[state.status] })] }), _jsxs("div", { className: 'pui-file-actions', children: [transport && state.status !== 'success' && (_jsx(Button, { ref: (node) => {
+                                                            : 'neutral', children: labels.status[state.status] })] }), _jsxs("div", { className: 'surf-file-actions', children: [transport && state.status !== 'success' && (_jsx(Button, { ref: (node) => {
                                                     if (node)
                                                         primaryButtons.current.set(file, node);
                                                     else
                                                         primaryButtons.current.delete(file);
-                                                }, type: 'button', size: 'sm', variant: 'outline', disabled: disabled, "aria-describedby": state.error ? `${itemId}-error` : undefined, "aria-label": `${state.status === 'uploading' ? labels.cancel : state.status === 'ready' ? labels.upload : labels.retry} ${file.name}`, onClick: () => {
+                                                }, type: 'button', size: 'small', variant: 'outline', disabled: disabled, "aria-describedby": state.error ? `${itemId}-error` : undefined, "aria-label": labels.fileAction(state.status === 'uploading'
+                                                    ? labels.cancel
+                                                    : state.status === 'ready'
+                                                        ? labels.upload
+                                                        : labels.retry, file), onClick: () => {
                                                     if (state.status === 'uploading')
                                                         cancel(file);
                                                     else
@@ -332,15 +339,15 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
                                                     ? labels.cancel
                                                     : state.status === 'ready'
                                                         ? labels.upload
-                                                        : labels.retry })), _jsx(Button, { type: 'button', size: 'sm', variant: 'ghost', ref: (node) => {
+                                                        : labels.retry })), _jsx(Button, { type: 'button', size: 'small', variant: 'ghost', ref: (node) => {
                                                     if (node)
                                                         removeButtons.current.set(file, node);
                                                     else
                                                         removeButtons.current.delete(file);
-                                                }, disabled: disabled, "aria-label": `${labels.remove} ${file.name}`, onClick: () => {
+                                                }, disabled: disabled, "aria-label": labels.fileAction(labels.remove, file), onClick: () => {
                                                     setRejections([]);
                                                     if (commit(files.filter((current) => current !== file), 'remove'))
                                                         focusPicker.current = file;
-                                                }, children: labels.remove })] }), state.status === 'uploading' && (_jsx(Progress.Root, { value: state.progress, "aria-label": labels.progress(file), children: _jsx(Progress.Track, { children: _jsx(Progress.Indicator, {}) }) })), state.error && (_jsx("p", { id: `${itemId}-error`, className: 'pui-file-upload-error', children: state.error }))] }, itemId));
-                        }) }))] }), _jsx("div", { id: errorId, role: 'alert', className: 'pui-file-errors', children: rejections.length > 0 && (_jsx("ul", { children: rejections.map((rejection, index) => (_jsx("li", { children: labels.rejection(rejection) }, index))) })) }), _jsx(Field.Error, {}), _jsx("span", { className: 'pui-feedback-sr', role: 'status', children: announcement })] }));
-});
+                                                }, children: labels.remove })] }), state.status === 'uploading' && (_jsx(Progress.Root, { value: state.progress, "aria-label": labels.progress(file), children: _jsx(Progress.Track, { children: _jsx(Progress.Indicator, {}) }) })), state.error && (_jsx("p", { id: `${itemId}-error`, className: 'surf-file-upload-error', children: state.error }))] }, itemId));
+                        }) }))] }), _jsx("div", { id: errorId, role: 'alert', className: 'surf-file-errors', children: rejections.length > 0 && (_jsx("ul", { children: rejections.map((rejection, index) => (_jsx("li", { children: labels.rejection(rejection) }, index))) })) }), _jsx(Field.Error, {}), _jsx("span", { className: 'surf-feedback-sr', role: 'status', children: announcement })] }));
+};

package/dist/filter-bar.d.ts

@@ -1,17 +1,37 @@
 import * as React from 'react';
 export declare const FilterBar: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+    Root: ({ label, className, ref, ...props }: React.ComponentPropsWithoutRef<"form"> & {
         label: string;
-    } & React.RefAttributes<HTMLFormElement>>;
-    Controls: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Field: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    } & {
+        ref?: React.Ref<HTMLFormElement>;
+    }) => React.JSX.Element;
+    Controls: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Field: ({ width, className, ref, ...props }: React.ComponentPropsWithoutRef<"label"> & {
         width?: "search" | "filter";
-    } & React.RefAttributes<HTMLLabelElement>>;
-    Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Summary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLLabelElement>;
+    }) => React.JSX.Element;
+    Actions: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Summary: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
 };
-export declare const FilterBarRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+export declare const FilterBarRoot: ({ label, className, ref, ...props }: React.ComponentPropsWithoutRef<"form"> & {
     label: string;
-} & React.RefAttributes<HTMLFormElement>>, FilterBarControls: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, FilterBarField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+} & {
+    ref?: React.Ref<HTMLFormElement>;
+}) => React.JSX.Element, FilterBarControls: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, FilterBarField: ({ width, className, ref, ...props }: React.ComponentPropsWithoutRef<"label"> & {
     width?: "search" | "filter";
-} & React.RefAttributes<HTMLLabelElement>>, FilterBarActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, FilterBarSummary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLLabelElement>;
+}) => React.JSX.Element, FilterBarActions: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, FilterBarSummary: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/filter-bar.js

@@ -1,23 +1,21 @@
-'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';
 /** Layout only: filtering, routing and async results remain controlled by the caller. */
-const Root = /* @__PURE__ */ React.forwardRef(function FilterBarRoot({ label, className, ...props }, ref) {
-    return (_jsx("form", { ...props, ref: ref, role: 'search', "aria-label": label, className: cx('pui-filter-bar', className) }));
-});
-const Controls = /* @__PURE__ */ React.forwardRef(function FilterBarControls({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-controls', className) }));
-});
-const Field = /* @__PURE__ */ React.forwardRef(function FilterBarField({ width = 'filter', className, ...props }, ref) {
-    return (_jsx("label", { ...props, ref: ref, "data-width": width, className: cx('pui-filter-bar-field', className) }));
-});
-const Actions = /* @__PURE__ */ React.forwardRef(function FilterBarActions({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-actions', className) }));
-});
-const Summary = /* @__PURE__ */ React.forwardRef(function FilterBarSummary({ className, ...props }, ref) {
-    return (_jsx("div", { role: 'status', "aria-atomic": 'true', ...props, ref: ref, className: cx('pui-filter-bar-summary', className) }));
-});
+const Root = function FilterBarRoot({ label, className, ref, ...props }) {
+    return (_jsx("form", { ...props, ref: ref, role: 'search', "aria-label": label, className: cx('surf-filter-bar', className) }));
+};
+const Controls = function FilterBarControls({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-filter-bar-controls', className) }));
+};
+const Field = function FilterBarField({ width = 'filter', className, ref, ...props }) {
+    return (_jsx("label", { ...props, ref: ref, "data-width": width, className: cx('surf-filter-bar-field', className) }));
+};
+const Actions = function FilterBarActions({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-filter-bar-actions', className) }));
+};
+const Summary = function FilterBarSummary({ className, ref, ...props }) {
+    return (_jsx("div", { role: 'status', "aria-atomic": 'true', ...props, ref: ref, className: cx('surf-filter-bar-summary', className) }));
+};
 export const FilterBar = { Root, Controls, Field, Actions, Summary };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: FilterBarRoot, Controls: FilterBarControls, Field: FilterBarField, Actions: FilterBarActions, Summary: FilterBarSummary, } = FilterBar;

package/dist/form.js

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

package/dist/icon.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ComponentSize } from './size.js';
 declare const shapes: {
     search: React.JSX.Element;
     plus: React.JSX.Element;
@@ -42,8 +43,14 @@ type Semantics = {
 };
 export type IconProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'name' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'tabIndex' | 'focusable' | 'width' | 'height' | 'viewBox' | 'strokeWidth' | 'fill' | 'stroke' | 'title'> & Semantics & {
     name: IconName;
-    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 14, 16 or 20px; 16px when omitted. Deprecated, removed in a later minor: sm
+     * (16px, now default), md (20px, now large) and lg (24px, off the scale).
+     */
+    size?: ComponentSize | 'sm' | 'md' | 'lg';
 };
 /** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
-export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const Icon: ({ name, size, decorative, label, className, ref, ...props }: IconProps & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.JSX.Element;
 export {};

package/dist/icon.js

@@ -1,7 +1,5 @@
-'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { cx } from './parts.js';
+import { cx } from './class-names.js';
 const shapes = {
     search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '10.5', cy: '10.5', r: '6.5' }), _jsx("path", { d: 'm16 16 4 4' })] })),
     plus: _jsx("path", { d: 'M12 5v14M5 12h14' }),
@@ -41,7 +39,9 @@ const directional = new Set([
     'chevron-back',
     'arrow-back',
 ]);
+// The short spellings map by pixel size: sm was 16px, which is now the default.
+const iconSizes = { sm: 'default', md: 'large', lg: 'lg' };
 /** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
-export const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ name, size = 'sm', decorative = true, label, className, ...props }, ref) {
-    return (_jsx("svg", { ...props, ref: ref, className: cx('pui-icon', className), "data-size": size, "data-directional": directional.has(name) ? 'true' : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
-});
+export const Icon = function Icon({ name, size, decorative = true, label, className, ref, ...props }) {
+    return (_jsx("svg", { ...props, ref: ref, className: cx('surf-icon', className), "data-size": size === 'sm' || size === 'md' || size === 'lg' ? iconSizes[size] : size, "data-directional": directional.has(name) ? 'true' : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
+};

package/dist/index.d.ts

@@ -36,13 +36,13 @@ export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, Navigation
 export { Menubar } from './menubar.js';
 export { Link, type LinkProps } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
-export { Pagination, type PaginationProps } from './pagination.js';
+export { Pagination, type PaginationProps, type PaginationLabels, } from './pagination.js';
 export { BottomNavigation, BottomNavigationRoot, BottomNavigationItem, type BottomNavigationRootProps, type BottomNavigationItemProps, } from './bottom-navigation.js';
 export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
 export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from './badge.js';
 export { Card, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './card.js';
-export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, type TableDensity, type TableSort, useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table.js';
-export { CodeBlock, type CodeBlockProps } from './code.js';
+export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, type TableDensity, type TableVariant, type TableSort, useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table.js';
+export { CodeBlock, type CodeBlockProps, type CodeBlockLabels } from './code.js';
 export { SyntaxHighlighter, syntaxLanguages, type SyntaxHighlighterProps, } from './syntax-highlighter.js';
 export { List, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './list.js';
 export { Stat, StatRoot, StatLabel, StatValue, StatChange, StatCaption, type StatChangeProps, type StatDirection, } from './stat.js';
@@ -63,6 +63,6 @@ export { Icon, iconNames, type IconName, type IconProps } from './icon.js';
 export { SizeProvider, type ComponentSize, type ComponentSizeAlias, } from './sizing.js';
 export { DirectionProvider } from '@base-ui/react/direction-provider';
 export { Slot } from './slot.js';
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, type AppShellRootProps, type AppShellSidebarToggleProps, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, type AppShellRootProps, type AppShellSidebarToggleProps, type AppShellSidebarToggleLabels, AppShellBrand, type AppShellBrandProps, AppShellNav, type AppShellNavProps, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, type AppShellLinkProps, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';

package/dist/index.js

@@ -1,4 +1,3 @@
-'use client';
 // One entry per catalog page: each module is also its own entry point, such as
 // @surflane/ui/checkbox. Chart, DatePicker, Markdown, Tree and syntax highlighting
 // need optional packages, so they live only on their own entry points:
@@ -46,7 +45,7 @@ export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, Navigation
 export { Menubar } from './menubar.js';
 export { Link } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
-export { Pagination } from './pagination.js';
+export { Pagination, } from './pagination.js';
 export { BottomNavigation, BottomNavigationRoot, BottomNavigationItem, } from './bottom-navigation.js';
 // Data display
 export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
@@ -78,6 +77,6 @@ export { SizeProvider, } from './sizing.js';
 export { DirectionProvider } from '@base-ui/react/direction-provider';
 export { Slot } from './slot.js';
 // Patterns
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellBrand, AppShellNav, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';