@surflane/ui 0.0.0-stage → 0.1.0

package/dist/file-upload.js

@@ -0,0 +1,343 @@
+"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";
+const labelsDefault = {
+    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",
+    },
+    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.",
+    progress: (file) => `${file.name} upload progress`,
+};
+function signature(file) {
+    return JSON.stringify([file.name, file.size, file.type, file.lastModified]);
+}
+function accepts(file, accept) {
+    const rules = accept
+        .split(",")
+        .map((rule) => rule.trim().toLowerCase())
+        .filter(Boolean);
+    return (!rules.length ||
+        rules.some((rule) => rule.startsWith(".")
+            ? file.name.toLowerCase().endsWith(rule)
+            : 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}`;
+}
+/** 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) {
+    const labels = {
+        ...labelsDefault,
+        ...customLabels,
+        status: { ...labelsDefault.status, ...customLabels?.status },
+    };
+    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 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);
+    const identities = React.useRef(new WeakMap()), nextId = React.useRef(0);
+    function syncInput(next) {
+        if (!input.current)
+            return;
+        const transfer = new DataTransfer();
+        next.forEach((file) => transfer.items.add(file));
+        input.current.files = transfer.files;
+    }
+    function abortAll() {
+        requests.current.forEach((request) => request.controller.abort());
+        requests.current.clear();
+    }
+    const [files, setFiles, revision] = useResetValue(controlled, defaultFiles, root, form, () => {
+        abortAll();
+        setMetadata(new Map());
+        setRejections([]);
+        dragDepth.current = 0;
+        setDragging(false);
+        skipNotifyFor.current = controlled ?? defaultFiles;
+        syncInput(controlled ?? defaultFiles);
+        announce(labels.reset);
+    });
+    const latestFiles = React.useRef(files);
+    latestFiles.current = files;
+    React.useLayoutEffect(() => {
+        syncInput(files);
+        if (lastSynced.current !== null &&
+            lastSynced.current !== files &&
+            skipNotifyFor.current !== files &&
+            input.current) {
+            notifying.current = true;
+            try {
+                input.current.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+            finally {
+                notifying.current = false;
+            }
+        }
+        lastSynced.current = files;
+        skipNotifyFor.current = null;
+    }, [files, revision]);
+    React.useLayoutEffect(() => {
+        if (focusPicker.current && !files.includes(focusPicker.current)) {
+            input.current?.focus();
+            focusPicker.current = null;
+        }
+        if (focusRemove.current) {
+            removeButtons.current.get(focusRemove.current)?.focus();
+            focusRemove.current = null;
+        }
+    }, [files, metadata]);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            abortAll();
+        };
+    }, []);
+    React.useEffect(() => {
+        const selected = new Set(files);
+        requests.current.forEach((request, file) => {
+            if (!selected.has(file)) {
+                requests.current.delete(file);
+                request.controller.abort();
+            }
+        });
+        setMetadata((previous) => {
+            if ([...previous.keys()].every((file) => selected.has(file)))
+                return previous;
+            return new Map([...previous].filter(([file]) => selected.has(file)));
+        });
+    }, [files]);
+    function update(file, next) {
+        setMetadata((previous) => new Map(previous).set(file, next));
+    }
+    function cancel(file) {
+        const request = requests.current.get(file);
+        if (!request)
+            return;
+        requests.current.delete(file);
+        request.controller.abort();
+        update(file, { status: "canceled", progress: null });
+        announce(labels.canceled(file));
+    }
+    React.useEffect(() => {
+        if (disabled) {
+            [...requests.current.keys()].forEach(cancel);
+            dragDepth.current = 0;
+            setDragging(false);
+        }
+    }, [disabled]);
+    function commit(next, reason) {
+        const details = {
+            reason,
+            isCanceled: false,
+            cancel() {
+                this.isCanceled = true;
+            },
+        };
+        let accepted = false;
+        try {
+            onFilesChange?.(next, details);
+            accepted = !details.isCanceled;
+        }
+        finally {
+            if (accepted && controlled === undefined) {
+                files.forEach((file) => {
+                    if (!next.includes(file)) {
+                        const request = requests.current.get(file);
+                        requests.current.delete(file);
+                        request?.controller.abort();
+                    }
+                });
+                setFiles(next);
+                syncInput(next);
+            }
+            else
+                syncInput(files);
+        }
+        if (accepted)
+            announce(labels.changed(next.length));
+        return accepted;
+    }
+    function select(incoming, reason) {
+        if (disabled) {
+            syncInput(files);
+            return;
+        }
+        const next = multiple ? [...files] : [], rejected = [];
+        const limit = multiple ? Math.max(0, Math.floor(maxFiles)) : 1;
+        for (const file of incoming) {
+            let rejection;
+            if (!accepts(file, accept))
+                rejection = "type";
+            else if (file.size > maxFileSize)
+                rejection = "size";
+            else if (next.some((current) => signature(current) === signature(file)))
+                rejection = "duplicate";
+            else if (next.length >= limit)
+                rejection = "count";
+            if (rejection)
+                rejected.push({ file, reason: rejection });
+            else
+                next.push(file);
+        }
+        // A fully rejected single selection must not erase a previously accepted file.
+        const selected = next.length || multiple ? next : [...files];
+        setRejections(rejected);
+        if (selected.length !== files.length ||
+            selected.some((file, index) => file !== files[index]))
+            commit(selected, reason);
+        else
+            syncInput(files);
+        onReject?.(rejected);
+    }
+    async function upload(file) {
+        if (disabled ||
+            !transport ||
+            requests.current.has(file) ||
+            !latestFiles.current.includes(file))
+            return;
+        const request = { controller: new AbortController() };
+        requests.current.set(file, request);
+        const current = () => mounted.current &&
+            requests.current.get(file) === request &&
+            !request.controller.signal.aborted &&
+            latestFiles.current.includes(file);
+        update(file, { status: "uploading", progress: null });
+        try {
+            await transport(file, {
+                signal: request.controller.signal,
+                onProgress(percent) {
+                    if (current())
+                        update(file, {
+                            status: "uploading",
+                            progress: percent === null || !Number.isFinite(percent)
+                                ? null
+                                : Math.max(0, Math.min(100, percent)),
+                        });
+                },
+            });
+            if (current()) {
+                if (primaryButtons.current.get(file) ===
+                    input.current?.ownerDocument.activeElement)
+                    focusRemove.current = file;
+                update(file, { status: "success", progress: 100 });
+                announce(labels.complete(file));
+            }
+        }
+        catch (error) {
+            if (current()) {
+                let message = "Upload failed. Try again.";
+                try {
+                    message = getUploadError?.(error) || message;
+                }
+                catch { }
+                update(file, { status: "error", progress: null, error: message });
+                announce(labels.failed(file));
+            }
+        }
+        finally {
+            if (requests.current.get(file) === request)
+                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) => {
+                    onDragEnter?.(event);
+                    if (!event.defaultPrevented && hasFiles(event) && !disabled) {
+                        event.preventDefault();
+                        dragDepth.current++;
+                        setDragging(true);
+                    }
+                }, onDragLeave: (event) => {
+                    onDragLeave?.(event);
+                    dragDepth.current = Math.max(0, dragDepth.current - 1);
+                    if (!dragDepth.current)
+                        setDragging(false);
+                }, onDragOver: (event) => {
+                    onDragOver?.(event);
+                    if (hasFiles(event)) {
+                        event.preventDefault();
+                        event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+                    }
+                }, onDrop: (event) => {
+                    onDrop?.(event);
+                    dragDepth.current = 0;
+                    setDragging(false);
+                    if (!event.defaultPrevented && hasFiles(event)) {
+                        event.preventDefault();
+                        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")
+                                event.preventBaseUIHandler();
+                        }, onChange: (event) => {
+                            if (!notifying.current) {
+                                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("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",
+                        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) => {
+                                            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")
+                                                cancel(file);
+                                            else
+                                                void upload(file);
+                                        }, children: state.status === "uploading"
+                                            ? labels.cancel
+                                            : state.status === "ready"
+                                                ? labels.upload
+                                                : 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"))
+                                                focusPicker.current = file;
+                                        }, children: labels.remove })] })] }, itemId));
+                }) })), _jsx("span", { className: "pui-visually-hidden", role: "status", children: announcement })] }));
+});

package/dist/filter-bar.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export declare const FilterBar: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+        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"> & {
+        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>>;
+};
+export declare const FilterBarRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
+    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"> & {
+    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>>;

package/dist/filter-bar.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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) }));
+});
+const Controls = React.forwardRef(function FilterBarControls({ className, ...props }, ref) {
+    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 Actions = React.forwardRef(function FilterBarActions({ className, ...props }, ref) {
+    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) }));
+});
+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-state.d.ts

@@ -0,0 +1,5 @@
+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. */
+export declare function useResetValue<Value>(controlled: Value | undefined, initial: Value, element: React.RefObject<HTMLElement | null>, formId?: string, afterReset?: () => void): readonly [Value, React.Dispatch<React.SetStateAction<Value>>, number];

package/dist/form-state.js

@@ -0,0 +1,63 @@
+"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")
+            forwarded.current = node;
+        return () => {
+            if (element.current === node)
+                element.current = null;
+            if (typeof cleanup === "function")
+                cleanup();
+            else if (typeof forwarded === "function")
+                forwarded(null);
+            else if (forwarded)
+                forwarded.current = null;
+        };
+    }, [forwarded]);
+    return [element, attach];
+}
+/** Reset stateful primitives with their native form, without firing change callbacks. */
+export function useResetValue(controlled, initial, element, formId, afterReset) {
+    const [local, setLocal] = React.useState(initial);
+    const [revision, refresh] = React.useReducer((value) => value + 1, 0);
+    const latest = React.useRef({ controlled, initial, afterReset });
+    latest.current = { controlled, initial, 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")
+            return;
+        const pending = new Set();
+        const reset = (event) => {
+            // Native dispatch can run microtasks between listeners. Wait for all cancel handlers.
+            const timer = setTimeout(() => {
+                pending.delete(timer);
+                if (event.defaultPrevented)
+                    return;
+                if (latest.current.controlled === undefined)
+                    setLocal(latest.current.initial);
+                else
+                    refresh(); // Reassert controlled hidden inputs after the browser's native reset.
+                latest.current.afterReset?.();
+            }, 0);
+            pending.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => {
+            owner.removeEventListener("reset", reset);
+            pending.forEach(clearTimeout);
+        };
+    }, [element, formId]);
+    return [
+        controlled === undefined ? local : controlled,
+        setLocal,
+        revision,
+    ];
+}

package/dist/forms.d.ts

@@ -0,0 +1,91 @@
+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>>;
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: 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?: 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?: 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?: 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?: ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Error: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Validity: React.FC<import("@base-ui/react/field").FieldValidityProps>;
+};
+export declare const Fieldset: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Legend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare function Form<Values extends Record<string, unknown> = Record<string, unknown>>({ className, ...props }: BaseForm.Props<Values>): React.JSX.Element;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    size?: ComponentSize;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Checkbox: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function RadioGroup<Value = string>({ value, defaultValue, onValueChange, className, form, ref, ...props }: BaseRadioGroup.Props<Value>): React.JSX.Element;
+declare const RadioRoot: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Radio: {
+    Root: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Switch: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };
+export declare const FieldValidity: React.FC<import("@base-ui/react/field").FieldValidityProps>;
+export declare const FieldsetLegend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, FieldsetRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & React.RefAttributes<HTMLElement>>;
+export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;