@surflane/ui 0.0.0-stage → 0.1.0

package/dist/data.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    label?: string;
+    rootClassName?: string;
+    rootStyle?: React.CSSProperties;
+    orientation?: "horizontal" | "vertical" | "both";
+    scrollChain?: "auto" | "contain";
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    label: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    selected?: boolean;
+} & React.RefAttributes<HTMLTableRowElement>>;
+export declare const Table: {
+    Container: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        label?: string;
+        rootClassName?: string;
+        rootStyle?: React.CSSProperties;
+        orientation?: "horizontal" | "vertical" | "both";
+        scrollChain?: "auto" | "contain";
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        label: string;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableElement>>;
+    Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCaptionElement>>;
+    Head: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableSectionElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableSectionElement>>;
+    Foot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableSectionElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+        selected?: boolean;
+    } & React.RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>>;
+    Cell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>>;
+};
+declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    selected?: boolean;
+} & React.RefAttributes<HTMLLIElement>>;
+export declare const List: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+        selected?: boolean;
+    } & React.RefAttributes<HTMLLIElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { ListRoot, ListItem, TableContainer, TableRow };
+export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ListDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableElement>>, TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCaptionElement>>, TableHead: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableSectionElement>>, TableBody: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableSectionElement>>, TableFoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableSectionElement>>, TableHeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>>, TableCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>>;

package/dist/data.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { part } from "./parts.js";
+import { ScrollArea } from "./scroll-area.js";
+const TableContainer = React.forwardRef(function TableContainer(props, ref) {
+    return _jsx(ScrollArea, { ...props, ref: ref });
+});
+const TableRow = React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-table-row", className].filter(Boolean).join(" ") }));
+});
+export const Table = {
+    Container: TableContainer,
+    Root: part("table", "pui-table"),
+    Caption: part("caption", "pui-table-caption"),
+    Head: part("thead", "pui-table-head"),
+    Body: part("tbody", "pui-table-body"),
+    Foot: part("tfoot", "pui-table-foot"),
+    Row: TableRow,
+    HeaderCell: part("th", "pui-table-cell pui-table-header"),
+    Cell: part("td", "pui-table-cell"),
+};
+const ListRoot = React.forwardRef(function ListRoot({ className, ...props }, ref) {
+    return (_jsx("ul", { role: "list", ...props, ref: ref, className: ["pui-list", className].filter(Boolean).join(" ") }));
+});
+const ListItem = React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
+    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-list-item", className].filter(Boolean).join(" ") }));
+});
+export const List = {
+    Root: ListRoot,
+    Item: ListItem,
+    Content: part("div", "pui-list-content"),
+    Title: part("div", "pui-list-title"),
+    Description: part("p", "pui-list-description"),
+    Actions: part("div", "pui-list-actions"),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { ListRoot, ListItem, TableContainer, TableRow };
+export const { Content: ListContent, Title: ListTitle, Description: ListDescription, Actions: ListActions, } = List;
+export const { Root: TableRoot, Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, HeaderCell: TableHeaderCell, Cell: TableCell, } = Table;

package/dist/date-picker.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from "react-aria-components/DatePicker";
+import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components/DateRangePicker";
+import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from "react-aria-components/TimeField";
+export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+export type { DateValue, TimeValue };
+type FieldContent = {
+    label: string;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode | ((validation: ValidationResult) => React.ReactNode);
+    ref?: React.Ref<HTMLDivElement>;
+};
+type CalendarContent = {
+    calendarLabel?: string;
+};
+export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, "children"> & FieldContent & CalendarContent;
+export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, "children"> & FieldContent & CalendarContent;
+export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, "children"> & FieldContent;
+/** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
+ * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
+export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, calendarLabel, className, ...props }: DatePickerProps<T>): React.JSX.Element;
+export declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, calendarLabel, className, ...props }: DateRangePickerProps<T>): React.JSX.Element;
+export declare function TimeField<T extends TimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): React.JSX.Element;

package/dist/date-picker.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentSize } from "./sizing.js";
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from "react-aria-components/DatePicker";
+import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from "react-aria-components/DateRangePicker";
+import { TimeField as AriaTimeField, } from "react-aria-components/TimeField";
+import { Heading } from "react-aria-components/Heading";
+import { Dialog } from "react-aria-components/Dialog";
+import { skin } from "./parts.js";
+import { useLocale } from "react-aria-components/I18nProvider";
+export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+function Segments({ slot }) {
+    return (_jsx(DateInput, { slot: slot, className: "pui-date-input", children: (segment) => (_jsx(DateSegment, { segment: segment, className: "pui-date-segment" })) }));
+}
+function FieldHelp({ description, errorMessage, }) {
+    return (_jsxs(_Fragment, { children: [description && (_jsx(Text, { slot: "description", className: "pui-field-description", children: description })), _jsx(FieldError, { className: "pui-field-error", children: errorMessage })] }));
+}
+function CalendarButton() {
+    return (_jsx(Button, { className: "pui-date-trigger", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "3" }), _jsx("path", { d: "M7 3v4m10-4v4M3 11h18m-12 4h2" })] }) }));
+}
+function CalendarContents() {
+    const { locale } = useLocale();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pui-calendar-header", children: [_jsx(Button, { slot: "previous", className: "pui-calendar-nav", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m15 6-6 6 6 6" }) }) }), _jsx(Heading, { className: "pui-calendar-heading" }), _jsx(Button, { slot: "next", className: "pui-calendar-nav", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }) })] }), _jsxs(CalendarGrid, { className: "pui-calendar-grid", weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pui-calendar-weekday", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: "pui-calendar-day", children: ({ formattedDate }) => locale.startsWith("ko") ? `${formattedDate}일` : formattedDate })) })] })] }));
+}
+function CalendarPopup({ label, range }) {
+    const scheme = useComponentSize();
+    return (_jsx(Popover, { "data-ui-size": scheme, className: "pui-date-popover", offset: 8, placement: "bottom start", children: _jsx(Dialog, { "aria-label": label, className: "pui-date-dialog", children: range ? (_jsx(RangeCalendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) }) }));
+}
+/** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
+ * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
+export function DatePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
+    return (_jsxs(AriaDatePicker, { ...props, className: skin("pui-date-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
+}
+export function DateRangePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
+    return (_jsxs(AriaDateRangePicker, { ...props, className: skin("pui-date-picker pui-date-range-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsxs("div", { className: "pui-date-range-inputs", children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": "true", className: "pui-date-range-separator", children: "\u2013" }), _jsx(Segments, { slot: "end" })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
+}
+export function TimeField({ label, description, errorMessage, className, ...props }) {
+    return (_jsxs(AriaTimeField, { ...props, className: skin("pui-time-field", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsx("div", { className: "pui-date-group", children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
+}

package/dist/dialog-focus.d.ts

@@ -0,0 +1,5 @@
+/** Base UI 1.9 exposes WebKit's focus guards as buttons for VoiceOver.
+ * Give those boundaries a name without hiding or changing their focus behavior.
+ * Scope observation to this portal and disconnect it on React ref cleanup.
+ */
+export declare function useDialogFocusBoundary(label: string): (portal: HTMLDivElement | null) => (() => void) | undefined;

package/dist/dialog-focus.js

@@ -0,0 +1,35 @@
+"use client";
+import * as React from "react";
+/** Base UI 1.9 exposes WebKit's focus guards as buttons for VoiceOver.
+ * Give those boundaries a name without hiding or changing their focus behavior.
+ * Scope observation to this portal and disconnect it on React ref cleanup.
+ */
+export function useDialogFocusBoundary(label) {
+    return React.useCallback((portal) => {
+        if (!portal)
+            return;
+        const owned = new Set();
+        const nameBoundaries = () => {
+            for (const guard of portal.querySelectorAll(':scope > [data-base-ui-focus-guard][role="button"]')) {
+                if (!guard.hasAttribute("aria-label")) {
+                    guard.setAttribute("aria-label", label);
+                    owned.add(guard);
+                }
+            }
+        };
+        nameBoundaries();
+        const observer = new MutationObserver(nameBoundaries);
+        observer.observe(portal, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["role"],
+        });
+        return () => {
+            observer.disconnect();
+            for (const guard of owned)
+                if (guard.getAttribute("aria-label") === label)
+                    guard.removeAttribute("aria-label");
+        };
+    }, [label]);
+}

package/dist/dialog.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+/** Visible icon close action; inherits Dialog focus and dismissal behavior. */
+declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "children"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    closeLabel?: string;
+    closeDisabled?: boolean;
+    focusBoundaryLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const DialogBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare const Dialog: {
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        closeLabel?: string;
+        closeDisabled?: boolean;
+        focusBoundaryLabel?: string;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: typeof DialogHeader;
+    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: typeof DialogFooter;
+    CloseButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "children"> & React.RefAttributes<HTMLButtonElement>>;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: BaseDialog.Trigger;
+    createHandle: typeof BaseDialog.createHandle;
+    Handle: typeof BaseDialog.Handle;
+};
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    focusBoundaryLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialog: {
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        focusBoundaryLabel?: string;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Root: typeof BaseAlertDialog.Root;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: BaseAlertDialog.Trigger;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Handle: typeof BaseAlertDialog.Handle;
+    createHandle: typeof BaseAlertDialog.createHandle;
+};
+export { AlertDialogContent, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, };
+export declare const AlertDialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AlertDialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, AlertDialogHandle: typeof BaseAlertDialog.Handle, AlertDialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogRoot: typeof BaseAlertDialog.Root, AlertDialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, AlertDialogTrigger: BaseAlertDialog.Trigger, AlertDialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogHeader: typeof DialogHeader, AlertDialogFooter: typeof DialogFooter;
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, DialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, DialogHandle: typeof BaseDialog.Handle, DialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DialogRoot: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element, DialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, DialogTrigger: BaseDialog.Trigger, DialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/dialog.js

@@ -0,0 +1,49 @@
+"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(" ");
+/** 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 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] })] }));
+});
+function DialogHeader({ className, ...props }) {
+    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) }));
+});
+function DialogFooter({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx("pui-dialog-footer", className) });
+}
+export const Dialog = {
+    ...BaseDialog,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Body: DialogBody,
+    Footer: DialogFooter,
+    CloseButton: DialogCloseButton,
+};
+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) })] }));
+});
+export const AlertDialog = {
+    ...BaseAlertDialog,
+    Content: AlertDialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AlertDialogContent, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, };
+export const { Backdrop: AlertDialogBackdrop, Close: AlertDialogClose, Description: AlertDialogDescription, Handle: AlertDialogHandle, Popup: AlertDialogPopup, Portal: AlertDialogPortal, Root: AlertDialogRoot, Title: AlertDialogTitle, Trigger: AlertDialogTrigger, Viewport: AlertDialogViewport, Header: AlertDialogHeader, Footer: AlertDialogFooter, } = AlertDialog;
+export const { Backdrop: DialogBackdrop, Close: DialogClose, Description: DialogDescription, Handle: DialogHandle, Popup: DialogPopup, Portal: DialogPortal, Root: DialogRoot, Title: DialogTitle, Trigger: DialogTrigger, Viewport: DialogViewport, } = Dialog;

package/dist/feedback.d.ts

@@ -0,0 +1,76 @@
+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;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Meter: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<"span">, "children"> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+};
+/** Use decorative within a loading region that already owns the announcement. */
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLSpanElement>>;
+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"> & {
+    shape?: "text" | "block" | "circle";
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, MeterRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, ProgressRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ProgressValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/feedback.js

@@ -0,0 +1,35 @@
+"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";
+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"),
+};
+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"),
+};
+/** 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) {
+    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 })] }));
+});
+/** 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" }));
+});
+// 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;
+export const { Indicator: ProgressIndicator, Label: ProgressLabel, Root: ProgressRoot, Track: ProgressTrack, Value: ProgressValue, } = Progress;

package/dist/file-upload.d.ts

@@ -0,0 +1,77 @@
+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";
+};
+export type FileChangeDetails = {
+    reason: "select" | "drop" | "remove";
+    isCanceled: boolean;
+    cancel: () => void;
+};
+export type FileUploadLabels = {
+    choose: string;
+    drop: string;
+    upload: string;
+    retry: string;
+    cancel: string;
+    remove: string;
+    status: Record<UploadState, string>;
+    rejection: (rejection: FileRejection) => string;
+    changed: (count: number) => string;
+    complete: (file: File) => string;
+    canceled: (file: File) => string;
+    failed: (file: File) => string;
+    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"> & {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    name?: string;
+    form?: string;
+    capture?: React.InputHTMLAttributes<HTMLInputElement>["capture"];
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    files?: readonly File[];
+    defaultFiles?: readonly File[];
+    onFilesChange?: (files: File[], details: FileChangeDetails) => void;
+    onReject?: (rejections: FileRejection[]) => void;
+    transport?: UploadTransport;
+    getUploadError?: (error: unknown) => string;
+    labels?: Partial<Omit<FileUploadLabels, "status">> & {
+        status?: Partial<FileUploadLabels["status"]>;
+    };
+};
+/** Native selection/validation and a cancellable transport adapter; no network request is built in. */
+export declare const FileUpload: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@base-ui/react").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "name" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & Pick<React.HTMLAttributes<HTMLDivElement>, "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    name?: string;
+    form?: string;
+    capture?: React.InputHTMLAttributes<HTMLInputElement>["capture"];
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    files?: readonly File[];
+    defaultFiles?: readonly File[];
+    onFilesChange?: (files: File[], details: FileChangeDetails) => void;
+    onReject?: (rejections: FileRejection[]) => void;
+    transport?: UploadTransport;
+    getUploadError?: (error: unknown) => string;
+    labels?: Partial<Omit<FileUploadLabels, "status">> & {
+        status?: Partial<FileUploadLabels["status"]>;
+    };
+} & React.RefAttributes<HTMLDivElement>>;