@surflane/ui 0.1.0 → 0.3.0

package/dist/dialog.js

@@ -1,28 +1,28 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useDialogFocusBoundary } from "./dialog-focus.js";
-import { useComponentSize } from "./sizing.js";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-const cx = (...v) => v.filter(Boolean).join(" ");
+import * as React from 'react';
+import { useDialogFocusBoundary } from './dialog-focus.js';
+import { useComponentSize } from './sizing.js';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+const cx = (...v) => v.filter(Boolean).join(' ');
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
-const DialogCloseButton = React.forwardRef(function DialogCloseButton({ className, "aria-label": label = "Close dialog", ...props }, ref) {
-    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: cx("pui-icon-button pui-dialog-close", typeof className === "string" && className), children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) }));
+const DialogCloseButton = React.forwardRef(function DialogCloseButton({ className, 'aria-label': label = 'Close dialog', ...props }, ref) {
+    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: cx('pui-icon-button pui-dialog-close', typeof className === 'string' && className), children: _jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) }) }));
 });
-const DialogContent = React.forwardRef(function DialogContent({ className, children, closeLabel = "Close dialog", closeDisabled, focusBoundaryLabel = "Continue dialog navigation", ...props }, ref) {
+const DialogContent = React.forwardRef(function DialogContent({ className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: "pui-dialog-backdrop" }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx("pui-dialog-popup pui-dialog-content", typeof className === "string" && className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
+    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content', typeof className === 'string' && className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
 });
 function DialogHeader({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-dialog-header", className) });
+    return _jsx("div", { ...props, className: cx('pui-dialog-header', className) });
 }
 const DialogBody = React.forwardRef(function DialogBody({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx("pui-dialog-body", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-dialog-body', className) }));
 });
 function DialogFooter({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-dialog-footer", className) });
+    return _jsx("div", { ...props, className: cx('pui-dialog-footer', className) });
 }
 export const Dialog = {
     ...BaseDialog,
@@ -32,10 +32,10 @@ export const Dialog = {
     Footer: DialogFooter,
     CloseButton: DialogCloseButton,
 };
-const AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = "Continue dialog navigation", ...props }, ref) {
+const AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: "pui-dialog-backdrop" }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx("pui-dialog-popup pui-dialog-content pui-confirm-content", typeof className === "string" && className) })] }));
+    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content pui-confirm-content', typeof className === 'string' && className) })] }));
 });
 export const AlertDialog = {
     ...BaseAlertDialog,

package/dist/feedback.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type ComponentSizeAlias } from "./sizing.js";
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 export declare const Progress: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -34,7 +34,7 @@ export declare const Meter: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     label?: string;
     decorative?: boolean;
     size?: ComponentSizeAlias;
@@ -45,8 +45,8 @@ export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.De
     decorative?: boolean;
     size?: ComponentSizeAlias;
 } & React.RefAttributes<HTMLSpanElement>>;
-export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
-    shape?: "text" | "block" | "circle";
+export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    shape?: 'text' | 'block' | 'circle';
 };
 /** Decorative placeholder; the owning region provides aria-busy and loading text. */
 export declare const Skeleton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {

package/dist/feedback.js

@@ -1,34 +1,34 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-import { Meter as BaseMeter } from "@base-ui/react/meter";
-import { part } from "./parts.js";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { part } from './parts.js';
 export const Progress = {
     ...BaseProgress,
-    Root: part(BaseProgress.Root, "pui-gauge pui-progress"),
-    Label: part(BaseProgress.Label, "pui-gauge-label"),
-    Value: part(BaseProgress.Value, "pui-gauge-value"),
-    Track: part(BaseProgress.Track, "pui-gauge-track"),
-    Indicator: part(BaseProgress.Indicator, "pui-gauge-indicator"),
+    Root: part(BaseProgress.Root, 'pui-gauge pui-progress'),
+    Label: part(BaseProgress.Label, 'pui-gauge-label'),
+    Value: part(BaseProgress.Value, 'pui-gauge-value'),
+    Track: part(BaseProgress.Track, 'pui-gauge-track'),
+    Indicator: part(BaseProgress.Indicator, 'pui-gauge-indicator'),
 };
 export const Meter = {
     ...BaseMeter,
-    Root: part(BaseMeter.Root, "pui-gauge pui-meter"),
-    Label: part(BaseMeter.Label, "pui-gauge-label"),
-    Value: part(BaseMeter.Value, "pui-gauge-value"),
-    Track: part(BaseMeter.Track, "pui-gauge-track"),
-    Indicator: part(BaseMeter.Indicator, "pui-gauge-indicator"),
+    Root: part(BaseMeter.Root, 'pui-gauge pui-meter'),
+    Label: part(BaseMeter.Label, 'pui-gauge-label'),
+    Value: part(BaseMeter.Value, 'pui-gauge-value'),
+    Track: part(BaseMeter.Track, 'pui-gauge-track'),
+    Indicator: part(BaseMeter.Indicator, 'pui-gauge-indicator'),
 };
 /** Use decorative within a loading region that already owns the announcement. */
-export const Spinner = React.forwardRef(function Spinner({ label = "Loading", decorative = false, size, className, ...props }, ref) {
+export const Spinner = React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
     const scheme = useComponentSize(size);
-    return (_jsxs("span", { ...props, ref: ref, className: ["pui-spinner", className].filter(Boolean).join(" "), "data-size": size, "data-ui-size": scheme, role: decorative ? undefined : "status", "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", opacity: ".2" }), _jsx("path", { d: "M12 3a9 9 0 0 1 9 9", strokeLinecap: "round" })] }), !decorative && _jsx("span", { className: "pui-feedback-sr", children: label })] }));
+    return (_jsxs("span", { ...props, ref: ref, className: ['pui-spinner', className].filter(Boolean).join(' '), "data-size": size, "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
 });
 /** Decorative placeholder; the owning region provides aria-busy and loading text. */
-export const Skeleton = React.forwardRef(function Skeleton({ shape = "text", className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: ["pui-skeleton", className].filter(Boolean).join(" "), "data-shape": shape, "aria-hidden": "true" }));
+export const Skeleton = React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, className: ['pui-skeleton', className].filter(Boolean).join(' '), "data-shape": shape, "aria-hidden": 'true' }));
 });
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Indicator: MeterIndicator, Label: MeterLabel, Root: MeterRoot, Track: MeterTrack, Value: MeterValue, } = Meter;

package/dist/file-upload.d.ts

@@ -1,16 +1,16 @@
-import * as React from "react";
-import { Field } from "./forms.js";
-export type UploadState = "ready" | "uploading" | "success" | "error" | "canceled";
+import * as React from 'react';
+import { Field } from './forms.js';
+export type UploadState = 'ready' | 'uploading' | 'success' | 'error' | 'canceled';
 export type UploadTransport = (file: File, context: {
     signal: AbortSignal;
     onProgress: (percent: number | null) => void;
 }) => Promise<void>;
 export type FileRejection = {
     file: File;
-    reason: "type" | "size" | "count" | "duplicate";
+    reason: 'type' | 'size' | 'count' | 'duplicate';
 };
 export type FileChangeDetails = {
-    reason: "select" | "drop" | "remove";
+    reason: 'select' | 'drop' | 'remove';
     isCanceled: boolean;
     cancel: () => void;
 };
@@ -30,12 +30,12 @@ export type FileUploadLabels = {
     reset: string;
     progress: (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"> & {
+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;
     description?: React.ReactNode;
     name?: string;
     form?: string;
-    capture?: React.InputHTMLAttributes<HTMLInputElement>["capture"];
+    capture?: React.InputHTMLAttributes<HTMLInputElement>['capture'];
     accept?: string;
     multiple?: boolean;
     required?: boolean;
@@ -47,8 +47,8 @@ export type FileUploadProps = Omit<React.ComponentPropsWithoutRef<typeof Field.R
     onReject?: (rejections: FileRejection[]) => void;
     transport?: UploadTransport;
     getUploadError?: (error: unknown) => string;
-    labels?: Partial<Omit<FileUploadLabels, "status">> & {
-        status?: Partial<FileUploadLabels["status"]>;
+    labels?: Partial<Omit<FileUploadLabels, 'status'>> & {
+        status?: Partial<FileUploadLabels['status']>;
     };
 };
 /** Native selection/validation and a cancellable transport adapter; no network request is built in. */

package/dist/file-upload.js

@@ -1,32 +1,32 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Field } from "./forms.js";
-import { Button } from "./button.js";
-import { Progress } from "./feedback.js";
-import { StatusBadge } from "./status.js";
-import { skin } from "./parts.js";
-import { useResetValue, useRootRef } from "./form-state.js";
+import * as React from 'react';
+import { Field } from './forms.js';
+import { Button } from './button.js';
+import { Progress } from './feedback.js';
+import { StatusBadge } from './status.js';
+import { skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
 const labelsDefault = {
-    choose: "Choose files",
-    drop: "or drop files here",
-    upload: "Upload",
-    retry: "Retry",
-    cancel: "Cancel",
-    remove: "Remove",
+    choose: 'Choose files',
+    drop: 'or drop files here',
+    upload: 'Upload',
+    retry: 'Retry',
+    cancel: 'Cancel',
+    remove: 'Remove',
     status: {
-        ready: "Ready",
-        uploading: "Uploading",
-        success: "Uploaded",
-        error: "Failed",
-        canceled: "Canceled",
+        ready: 'Ready',
+        uploading: 'Uploading',
+        success: 'Uploaded',
+        error: 'Failed',
+        canceled: 'Canceled',
     },
-    rejection: ({ file, reason }) => `${file.name}: ${reason === "type" ? "file type is not accepted" : reason === "size" ? "file is too large" : reason === "count" ? "file limit reached" : "file is already selected"}.`,
-    changed: (count) => `${count} file${count === 1 ? "" : "s"} selected.`,
+    rejection: ({ file, reason }) => `${file.name}: ${reason === 'type' ? 'file type is not accepted' : reason === 'size' ? 'file is too large' : reason === 'count' ? 'file limit reached' : 'file is already selected'}.`,
+    changed: (count) => `${count} file${count === 1 ? '' : 's'} selected.`,
     complete: (file) => `${file.name}: upload complete.`,
     canceled: (file) => `${file.name}: upload canceled.`,
     failed: (file) => `${file.name}: upload failed.`,
-    reset: "Files reset.",
+    reset: 'Files reset.',
     progress: (file) => `${file.name} upload progress`,
 };
 function signature(file) {
@@ -34,22 +34,22 @@ function signature(file) {
 }
 function accepts(file, accept) {
     const rules = accept
-        .split(",")
+        .split(',')
         .map((rule) => rule.trim().toLowerCase())
         .filter(Boolean);
     return (!rules.length ||
-        rules.some((rule) => rule.startsWith(".")
+        rules.some((rule) => rule.startsWith('.')
             ? file.name.toLowerCase().endsWith(rule)
-            : rule.endsWith("/*")
+            : rule.endsWith('/*')
                 ? 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}`;
+    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 = 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 = 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) {
     const labels = {
         ...labelsDefault,
         ...customLabels,
@@ -57,7 +57,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
     };
     const [root, ref] = useRootRef(forwardedRef), input = React.useRef(null);
     const uid = React.useId(), inputId = `${uid}-input`, errorId = `${uid}-selection-errors`;
-    const [metadata, setMetadata] = React.useState(new Map()), [rejections, setRejections] = React.useState([]), [announcement, announce] = React.useState(""), [dragging, setDragging] = React.useState(false);
+    const [metadata, setMetadata] = React.useState(new Map()), [rejections, setRejections] = React.useState([]), [announcement, announce] = React.useState(''), [dragging, setDragging] = React.useState(false);
     const notifying = React.useRef(false), lastSynced = React.useRef(null), skipNotifyFor = React.useRef(null);
     const primaryButtons = React.useRef(new WeakMap()), removeButtons = React.useRef(new WeakMap()), focusRemove = React.useRef(null), focusPicker = React.useRef(null);
     const requests = React.useRef(new Map()), mounted = React.useRef(false), dragDepth = React.useRef(0);
@@ -93,7 +93,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
             input.current) {
             notifying.current = true;
             try {
-                input.current.dispatchEvent(new Event("change", { bubbles: true }));
+                input.current.dispatchEvent(new Event('change', { bubbles: true }));
             }
             finally {
                 notifying.current = false;
@@ -142,11 +142,12 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
             return;
         requests.current.delete(file);
         request.controller.abort();
-        update(file, { status: "canceled", progress: null });
+        update(file, { status: 'canceled', progress: null });
         announce(labels.canceled(file));
     }
     React.useEffect(() => {
         if (disabled) {
+            ;
             [...requests.current.keys()].forEach(cancel);
             dragDepth.current = 0;
             setDragging(false);
@@ -194,13 +195,13 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
         for (const file of incoming) {
             let rejection;
             if (!accepts(file, accept))
-                rejection = "type";
+                rejection = 'type';
             else if (file.size > maxFileSize)
-                rejection = "size";
+                rejection = 'size';
             else if (next.some((current) => signature(current) === signature(file)))
-                rejection = "duplicate";
+                rejection = 'duplicate';
             else if (next.length >= limit)
-                rejection = "count";
+                rejection = 'count';
             if (rejection)
                 rejected.push({ file, reason: rejection });
             else
@@ -228,14 +229,14 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
             requests.current.get(file) === request &&
             !request.controller.signal.aborted &&
             latestFiles.current.includes(file);
-        update(file, { status: "uploading", progress: null });
+        update(file, { status: 'uploading', progress: null });
         try {
             await transport(file, {
                 signal: request.controller.signal,
                 onProgress(percent) {
                     if (current())
                         update(file, {
-                            status: "uploading",
+                            status: 'uploading',
                             progress: percent === null || !Number.isFinite(percent)
                                 ? null
                                 : Math.max(0, Math.min(100, percent)),
@@ -246,18 +247,18 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
                 if (primaryButtons.current.get(file) ===
                     input.current?.ownerDocument.activeElement)
                     focusRemove.current = file;
-                update(file, { status: "success", progress: 100 });
+                update(file, { status: 'success', progress: 100 });
                 announce(labels.complete(file));
             }
         }
         catch (error) {
             if (current()) {
-                let message = "Upload failed. Try again.";
+                let message = 'Upload failed. Try again.';
                 try {
                     message = getUploadError?.(error) || message;
                 }
                 catch { }
-                update(file, { status: "error", progress: null, error: message });
+                update(file, { status: 'error', progress: null, error: message });
                 announce(labels.failed(file));
             }
         }
@@ -266,8 +267,8 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
                 requests.current.delete(file);
         }
     }
-    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) => {
+    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) => {
                     onDragEnter?.(event);
                     if (!event.defaultPrevented && hasFiles(event) && !disabled) {
                         event.preventDefault();
@@ -283,7 +284,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
                     onDragOver?.(event);
                     if (hasFiles(event)) {
                         event.preventDefault();
-                        event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+                        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
                     }
                 }, onDrop: (event) => {
                     onDrop?.(event);
@@ -291,53 +292,53 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
                     setDragging(false);
                     if (!event.defaultPrevented && hasFiles(event)) {
                         event.preventDefault();
-                        select(Array.from(event.dataTransfer.files), "drop");
+                        select(Array.from(event.dataTransfer.files), 'drop');
                     }
-                }, 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) => {
-                            if (event.key === "Enter")
+                }, 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) => {
+                            if (event.key === 'Enter')
                                 event.preventBaseUIHandler();
                         }, onChange: (event) => {
                             if (!notifying.current) {
                                 event.preventBaseUIHandler();
-                                select(Array.from(event.currentTarget.files ?? []), "select");
+                                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("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5" }) }), labels.choose] }), _jsx("p", { className: "pui-file-drop-hint", children: labels.drop })] }), _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, {}), files.length > 0 && (_jsx("ul", { className: "pui-file-list", role: "list", children: files.map((file) => {
+                        } }), _jsxs("label", { htmlFor: inputId, className: 'pui-button pui-file-trigger', "data-variant": 'outline', "data-disabled": disabled || undefined, children: [_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5' }) }), labels.choose] }), _jsx("p", { className: 'pui-file-drop-hint', children: labels.drop })] }), _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, {}), files.length > 0 && (_jsx("ul", { className: 'pui-file-list', role: 'list', children: files.map((file) => {
                     const state = metadata.get(file) ?? {
-                        status: "ready",
+                        status: 'ready',
                         progress: null,
                     };
                     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"
-                                            ? "success"
-                                            : state.status === "error"
-                                                ? "danger"
-                                                : state.status === "uploading"
-                                                    ? "progress"
-                                                    : "neutral", children: labels.status[state.status] })] }), 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 })), _jsxs("div", { className: "pui-file-actions", children: [transport && state.status !== "success" && (_jsx(Button, { ref: (node) => {
+                    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'
+                                            ? 'success'
+                                            : state.status === 'error'
+                                                ? 'danger'
+                                                : state.status === 'uploading'
+                                                    ? 'progress'
+                                                    : 'neutral', children: labels.status[state.status] })] }), 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 })), _jsxs("div", { className: 'pui-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: () => {
-                                            if (state.status === "uploading")
+                                        }, 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: () => {
+                                            if (state.status === 'uploading')
                                                 cancel(file);
                                             else
                                                 void upload(file);
-                                        }, children: state.status === "uploading"
+                                        }, children: state.status === 'uploading'
                                             ? labels.cancel
-                                            : state.status === "ready"
+                                            : state.status === 'ready'
                                                 ? labels.upload
-                                                : labels.retry })), _jsx(Button, { type: "button", size: "sm", variant: "ghost", ref: (node) => {
+                                                : labels.retry })), _jsx(Button, { type: 'button', size: 'sm', 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: () => {
                                             setRejections([]);
-                                            if (commit(files.filter((current) => current !== file), "remove"))
+                                            if (commit(files.filter((current) => current !== file), 'remove'))
                                                 focusPicker.current = file;
                                         }, children: labels.remove })] })] }, itemId));
-                }) })), _jsx("span", { className: "pui-visually-hidden", role: "status", children: announcement })] }));
+                }) })), _jsx("span", { className: 'pui-visually-hidden', role: 'status', children: announcement })] }));
 });

package/dist/filter-bar.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const FilterBar: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
         label: string;

package/dist/filter-bar.js

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-const cx = (base, extra) => [base, extra].filter(Boolean).join(" ");
+import * as React from 'react';
+const cx = (base, extra) => [base, extra].filter(Boolean).join(' ');
 /** Layout only: filtering, routing and async results remain controlled by the caller. */
 const Root = 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) }));
+    return (_jsx("form", { ...props, ref: ref, role: 'search', "aria-label": label, className: cx('pui-filter-bar', className) }));
 });
 const Controls = React.forwardRef(function FilterBarControls({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx("pui-filter-bar-controls", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-controls', className) }));
 });
-const Field = 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 Field = 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 = React.forwardRef(function FilterBarActions({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx("pui-filter-bar-actions", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-filter-bar-actions', className) }));
 });
 const Summary = 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) }));
+    return (_jsx("div", { role: 'status', "aria-atomic": 'true', ...props, ref: ref, className: cx('pui-filter-bar-summary', className) }));
 });
 export const FilterBar = { Root, Controls, Field, Actions, Summary };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/form-state.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 /** Share the actual DOM node, including React 19 callback-ref cleanup semantics. */
 export declare function useRootRef<Element extends HTMLElement>(forwarded: React.Ref<Element> | undefined): readonly [React.RefObject<Element | null>, (node: Element | null) => () => void];
 /** Reset stateful primitives with their native form, without firing change callbacks. */

package/dist/form-state.js

@@ -1,19 +1,19 @@
-"use client";
-import * as React from "react";
+'use client';
+import * as React from 'react';
 /** Share the actual DOM node, including React 19 callback-ref cleanup semantics. */
 export function useRootRef(forwarded) {
     const element = React.useRef(null);
     const attach = React.useCallback((node) => {
         element.current = node;
-        const cleanup = typeof forwarded === "function" ? forwarded(node) : undefined;
-        if (forwarded && typeof forwarded !== "function")
+        const cleanup = typeof forwarded === 'function' ? forwarded(node) : undefined;
+        if (forwarded && typeof forwarded !== 'function')
             forwarded.current = node;
         return () => {
             if (element.current === node)
                 element.current = null;
-            if (typeof cleanup === "function")
+            if (typeof cleanup === 'function')
                 cleanup();
-            else if (typeof forwarded === "function")
+            else if (typeof forwarded === 'function')
                 forwarded(null);
             else if (forwarded)
                 forwarded.current = null;
@@ -30,9 +30,9 @@ export function useResetValue(controlled, initial, element, formId, afterReset)
     React.useEffect(() => {
         const node = element.current;
         const owner = (formId ? node?.ownerDocument.getElementById(formId) : undefined) ??
-            node?.closest("form") ??
-            Array.from(node?.querySelectorAll("input") ?? []).find((input) => input.form)?.form;
-        if (!owner || owner.tagName !== "FORM")
+            node?.closest('form') ??
+            Array.from(node?.querySelectorAll('input') ?? []).find((input) => input.form)?.form;
+        if (!owner || owner.tagName !== 'FORM')
             return;
         const pending = new Set();
         const reset = (event) => {
@@ -49,9 +49,9 @@ export function useResetValue(controlled, initial, element, formId, afterReset)
             }, 0);
             pending.add(timer);
         };
-        owner.addEventListener("reset", reset);
+        owner.addEventListener('reset', reset);
         return () => {
-            owner.removeEventListener("reset", reset);
+            owner.removeEventListener('reset', reset);
             pending.forEach(clearTimeout);
         };
     }, [element, formId]);

package/dist/forms.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { type ComponentSize } from "./sizing.js";
-import { Form as BaseForm } from "@base-ui/react/form";
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
+import { Form as BaseForm } from '@base-ui/react/form';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 declare const FieldRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;