@surflane/ui 0.1.0 → 0.2.0

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>>;

package/dist/forms.js

@@ -1,23 +1,23 @@
-"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 { Field as BaseField } from "@base-ui/react/field";
-import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
-import { Form as BaseForm } from "@base-ui/react/form";
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Field as BaseField } from '@base-ui/react/field';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { Form as BaseForm } from '@base-ui/react/form';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 const ChoiceResetPaint = React.createContext(0);
-import { skin, part } from "./parts.js";
-const FieldRoot = part(BaseField.Root, "pui-field");
-const FieldLabel = part(BaseField.Label, "pui-field-label");
-const FieldControl = part(BaseField.Control, "pui-input");
-const FieldDescription = part(BaseField.Description, "pui-field-description");
-const FieldError = part(BaseField.Error, "pui-field-error");
-const FieldItem = part(BaseField.Item, "pui-field-item");
+import { skin, part } from './parts.js';
+const FieldRoot = part(BaseField.Root, 'pui-field');
+const FieldLabel = part(BaseField.Label, 'pui-field-label');
+const FieldControl = part(BaseField.Control, 'pui-input');
+const FieldDescription = part(BaseField.Description, 'pui-field-description');
+const FieldError = part(BaseField.Error, 'pui-field-error');
+const FieldItem = part(BaseField.Item, 'pui-field-item');
 export const Field = {
     ...BaseField,
     Root: FieldRoot,
@@ -29,31 +29,31 @@ export const Field = {
 };
 export const Fieldset = {
     ...BaseFieldset,
-    Root: part(BaseFieldset.Root, "pui-fieldset"),
-    Legend: part(BaseFieldset.Legend, "pui-fieldset-legend"),
+    Root: part(BaseFieldset.Root, 'pui-fieldset'),
+    Legend: part(BaseFieldset.Legend, 'pui-fieldset-legend'),
 };
 export function Form({ className, ...props }) {
-    return (_jsx(BaseForm, { ...props, className: skin("pui-form", className) }));
+    return _jsx(BaseForm, { ...props, className: skin('pui-form', className) });
 }
 export const Textarea = React.forwardRef(function Textarea({ className, size, ...props }, ref) {
     const scheme = useComponentSize(size);
-    return (_jsx("textarea", { "data-ui-size": scheme, ...props, ref: ref, className: ["pui-input pui-textarea", className]
+    return (_jsx("textarea", { "data-ui-size": scheme, ...props, ref: ref, className: ['pui-input pui-textarea', className]
             .filter(Boolean)
-            .join(" ") }));
+            .join(' ') }));
 });
-import { useRootRef, useResetValue } from "./form-state.js";
+import { useRootRef, useResetValue } from './form-state.js';
 const CheckboxRoot = React.forwardRef(function CheckboxRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
     React.useContext(ChoiceResetPaint);
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
-    return (_jsx(BaseCheckbox.Root, { ...props, form: form, ref: attach, checked: selected, className: skin("pui-checkbox", className), onCheckedChange: (next, event) => {
+    return (_jsx(BaseCheckbox.Root, { ...props, form: form, ref: attach, checked: selected, className: skin('pui-checkbox', className), onCheckedChange: (next, event) => {
             onCheckedChange?.(next, event);
             if (checked === undefined && !event.isCanceled)
                 setSelected(next);
         } }));
 });
 const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin("pui-checkbox-indicator", className), children: children ?? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("path", { className: "pui-checkbox-check", d: "m4 10 4 4 8-8" }), _jsx("path", { className: "pui-checkbox-mixed", d: "M4 10h12" })] })) }));
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin('pui-checkbox-indicator', className), children: children ?? (_jsxs("svg", { width: '14', height: '14', viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("path", { className: 'pui-checkbox-check', d: 'm4 10 4 4 8-8' }), _jsx("path", { className: 'pui-checkbox-mixed', d: 'M4 10h12' })] })) }));
 });
 export const Checkbox = {
     ...BaseCheckbox,
@@ -63,7 +63,7 @@ export const Checkbox = {
 export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected, revision] = useResetValue(value, defaultValue, element);
-    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin("pui-choice-group", className), onValueChange: (next, event) => {
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
                 onValueChange?.(next, event);
                 if (value === undefined && !event.isCanceled)
                     setSelected(next);
@@ -72,7 +72,7 @@ export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, de
 export function RadioGroup({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected, revision] = useResetValue(value, defaultValue ?? null, element, form);
-    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin("pui-choice-group", className), onValueChange: (next, event) => {
+    return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
                 onValueChange?.(next, event);
                 if (value === undefined && !event.isCanceled)
                     setSelected(next);
@@ -80,17 +80,17 @@ export function RadioGroup({ value, defaultValue, onValueChange, className, form
 }
 const RadioRoot = React.forwardRef(function RadioRoot({ className, ...props }, ref) {
     React.useContext(ChoiceResetPaint);
-    return (_jsx(BaseRadio.Root, { ...props, ref: ref, className: skin("pui-radio", className) }));
+    return (_jsx(BaseRadio.Root, { ...props, ref: ref, className: skin('pui-radio', className) }));
 });
 export const Radio = {
     ...BaseRadio,
     Root: RadioRoot,
-    Indicator: part(BaseRadio.Indicator, "pui-radio-indicator"),
+    Indicator: part(BaseRadio.Indicator, 'pui-radio-indicator'),
 };
 const SwitchRoot = React.forwardRef(function SwitchRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
-    return (_jsx(BaseSwitch.Root, { ...props, form: form, ref: attach, checked: selected, className: skin("pui-switch", className), onCheckedChange: (next, event) => {
+    return (_jsx(BaseSwitch.Root, { ...props, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
             onCheckedChange?.(next, event);
             if (checked === undefined && !event.isCanceled)
                 setSelected(next);
@@ -99,7 +99,7 @@ const SwitchRoot = React.forwardRef(function SwitchRoot({ checked, defaultChecke
 export const Switch = {
     ...BaseSwitch,
     Root: SwitchRoot,
-    Thumb: part(BaseSwitch.Thumb, "pui-switch-thumb"),
+    Thumb: part(BaseSwitch.Thumb, 'pui-switch-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };