@surflane/ui 0.3.0 → 0.5.0

package/dist/{context-overlays.d.ts → context-menu.d.ts}

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
-import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { type Placement } from './parts.js';
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export declare const ContextMenu: {
     Trigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Positioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>>> & {
+        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
         positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
     } & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -40,30 +42,11 @@ export declare const ContextMenu: {
     } & React.RefAttributes<HTMLDivElement>>;
     Root: typeof BaseContextMenu.Root;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     SubmenuRoot: typeof BaseContextMenu.SubmenuRoot;
 };
-declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
-export declare const PreviewCard: {
-    Trigger: typeof PreviewTrigger;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Popup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    createHandle: typeof BasePreviewCard.createHandle;
-    Handle: typeof BasePreviewCard.Handle;
-};
 export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, ContextMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -84,12 +67,7 @@ export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<impo
     indicator?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>, ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ContextMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Placement<React.ForwardRefExoticComponent<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>>> & {
+    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
     positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardHandle: typeof BasePreviewCard.Handle, PreviewCardPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-} & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/context-menu.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { Menu } from './menu.js';
+import { OwnPortal, defined, part, scopedPortal, } from './parts.js';
+const ContextPositioner = /* @__PURE__ */ part(BaseContextMenu.Positioner, 'pui-positioner', { portal: true });
+const ContextContent = /* @__PURE__ */ React.forwardRef(function ContextContent({ side, align, sideOffset, collisionPadding, positionerProps, ...props }, ref) {
+    return (_jsx(OwnPortal, { portal: BaseContextMenu.Portal, children: _jsx(ContextPositioner, { ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(Menu.Popup, { ...props, ref: ref }) }) }));
+});
+/** Same menu anatomy and styling, with the context-specific cursor positioner. */
+export const ContextMenu = {
+    ...BaseContextMenu,
+    Trigger: /* @__PURE__ */ part(BaseContextMenu.Trigger, 'pui-context-trigger'),
+    Portal: /* @__PURE__ */ scopedPortal(BaseContextMenu.Portal),
+    Positioner: ContextPositioner,
+    Content: ContextContent,
+    Popup: Menu.Popup,
+    Item: Menu.Item,
+    LinkItem: Menu.LinkItem,
+    CheckboxItem: Menu.CheckboxItem,
+    CheckboxItemIndicator: Menu.CheckboxItemIndicator,
+    RadioItem: Menu.RadioItem,
+    RadioItemIndicator: Menu.RadioItemIndicator,
+    GroupLabel: Menu.GroupLabel,
+    Separator: Menu.Separator,
+    SubmenuTrigger: Menu.SubmenuTrigger,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Arrow: ContextMenuArrow, Backdrop: ContextMenuBackdrop, CheckboxItem: ContextMenuCheckboxItem, CheckboxItemIndicator: ContextMenuCheckboxItemIndicator, Group: ContextMenuGroup, GroupLabel: ContextMenuGroupLabel, Item: ContextMenuItem, LinkItem: ContextMenuLinkItem, Popup: ContextMenuPopup, Portal: ContextMenuPortal, Positioner: ContextMenuPositioner, RadioGroup: ContextMenuRadioGroup, RadioItem: ContextMenuRadioItem, RadioItemIndicator: ContextMenuRadioItemIndicator, Root: ContextMenuRoot, Separator: ContextMenuSeparator, SubmenuRoot: ContextMenuSubmenuRoot, SubmenuTrigger: ContextMenuSubmenuTrigger, Trigger: ContextMenuTrigger, Content: ContextMenuContent, } = ContextMenu;

package/dist/date-picker.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from './icon.js';
 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';
@@ -16,11 +17,11 @@ 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' })] }) }));
+    return (_jsx(Button, { className: 'pui-date-trigger', children: _jsx(Icon, { name: 'calendar' }) }));
 }
 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 })) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'pui-calendar-header', children: [_jsx(Button, { slot: 'previous', className: 'pui-calendar-nav', children: _jsx(Icon, { name: 'chevron-back' }) }), _jsx(Heading, { className: 'pui-calendar-heading' }), _jsx(Button, { slot: 'next', className: 'pui-calendar-nav', children: _jsx(Icon, { name: 'chevron-forward' }) })] }), _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();

package/dist/dialog.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 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"> & {
+    /** Width and density: small 420px, default 640px, large 840px. */
+    size?: ComponentSizeAlias;
     closeLabel?: string;
     closeDisabled?: boolean;
     focusBoundaryLabel?: string;
@@ -13,6 +15,8 @@ declare const DialogBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTM
 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"> & {
+        /** Width and density: small 420px, default 640px, large 840px. */
+        size?: ComponentSizeAlias;
         closeLabel?: string;
         closeDisabled?: boolean;
         focusBoundaryLabel?: string;
@@ -33,27 +37,5 @@ export declare const Dialog: {
     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 { DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, };
 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

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

@@ -1,43 +1,12 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
-import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
-export type PanelSide = 'left' | 'right' | 'top' | 'bottom';
-type PanelOptions = {
-    size?: ComponentSizeAlias;
-    closeLabel?: string;
-};
-declare function SheetRoot({ side, modal, ...props }: React.ComponentProps<typeof BaseDialog.Root> & {
-    side?: PanelSide;
-}): React.JSX.Element;
+import { Footer, Header, type PanelOptions, type PanelSide } from './panel.js';
 declare function DrawerRoot({ side, modal, ...props }: Omit<React.ComponentProps<typeof BaseDrawer.Root>, 'swipeDirection'> & {
     side?: PanelSide;
 }): React.JSX.Element;
-declare const SheetContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
-declare function Header({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function Footer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof BaseDialog.Title>): React.JSX.Element;
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof BaseDialog.Description>): React.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof BaseDrawer.Title>): React.JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof BaseDrawer.Description>): React.JSX.Element;
-export declare const Sheet: {
-    Root: typeof SheetRoot;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
-    Header: typeof Header;
-    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Footer: typeof Footer;
-    Title: typeof SheetTitle;
-    Description: typeof SheetDescription;
-    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>>;
-    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>>;
-    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: BaseDialog.Trigger;
-    createHandle: typeof BaseDialog.createHandle;
-    Handle: typeof BaseDialog.Handle;
-};
 export declare const Drawer: {
     Root: typeof DrawerRoot;
     Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
@@ -61,6 +30,6 @@ export declare const Drawer: {
     createHandle: typeof BaseDrawer.createHandle;
     Handle: typeof BaseDrawer.Handle;
 };
-export { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle, SheetDescription, SheetRoot, SheetTitle, SheetContent, };
+export { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle };
 export declare const DrawerBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerClose: BaseDrawer.Close, DrawerHandle: typeof BaseDrawer.Handle, DrawerIndent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerIndentProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerIndentBackground: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerPortal: BaseDrawer.Portal, DrawerProvider: typeof BaseDrawer.Provider, DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerTrigger: BaseDrawer.Trigger, DrawerViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerVirtualKeyboardProvider: typeof BaseDrawer.VirtualKeyboardProvider, DrawerPrimitiveContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerHeader: typeof Header, DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, DrawerFooter: typeof Footer;
-export declare const SheetBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, SheetHandle: typeof BaseDialog.Handle, SheetPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetTrigger: BaseDialog.Trigger, SheetViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetHeader: typeof Header, SheetBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, SheetFooter: typeof Footer;
+export type { PanelSide } from './panel.js';

package/dist/drawer.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { skin } from './parts.js';
+import { useComponentSize, normalizeSize } from './sizing.js';
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import { Body, Footer, Header, } from './panel.js';
+const DrawerSide = /* @__PURE__ */ React.createContext({
+    side: 'bottom',
+    modal: true,
+});
+function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
+    const direction = {
+        left: 'left',
+        right: 'right',
+        top: 'up',
+        bottom: 'down',
+    };
+    return (_jsx(DrawerSide.Provider, { value: { side, modal }, children: _jsx(BaseDrawer.Root, { ...props, modal: modal, swipeDirection: direction[side] }) }));
+}
+const DrawerContent = /* @__PURE__ */ React.forwardRef(function DrawerContent({ size, flush, closeLabel = 'Close panel', className, children, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const { side, modal } = React.useContext(DrawerSide);
+    const KeyboardProvider = side === 'bottom' ? BaseDrawer.VirtualKeyboardProvider : React.Fragment;
+    return (_jsx(KeyboardProvider, { children: _jsx(BaseDrawer.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDrawer.Backdrop, { className: 'pui-panel-backdrop' })), _jsx(BaseDrawer.Viewport, { className: 'pui-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: skin('pui-panel pui-drawer', className), "data-side": side, "data-size": normalizeSize(size) ?? 'large', "data-flush": flush || undefined, children: [_jsx("div", { className: 'pui-drawer-handle', "aria-hidden": 'true' }), _jsx(BaseDrawer.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), _jsx(BaseDrawer.Content, { className: 'pui-panel-content', children: children })] }) })] }) }) }));
+});
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(BaseDrawer.Title, { ...props, className: skin('pui-panel-title', className) }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(BaseDrawer.Description, { ...props, className: skin('pui-panel-description', className) }));
+}
+export const Drawer = {
+    ...BaseDrawer,
+    Root: DrawerRoot,
+    Content: DrawerContent,
+    PrimitiveContent: BaseDrawer.Content,
+    Header,
+    Body,
+    Footer,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle };
+export const { Backdrop: DrawerBackdrop, Close: DrawerClose, Handle: DrawerHandle, Indent: DrawerIndent, IndentBackground: DrawerIndentBackground, Popup: DrawerPopup, Portal: DrawerPortal, Provider: DrawerProvider, SwipeArea: DrawerSwipeArea, Trigger: DrawerTrigger, Viewport: DrawerViewport, VirtualKeyboardProvider: DrawerVirtualKeyboardProvider, PrimitiveContent: DrawerPrimitiveContent, Header: DrawerHeader, Body: DrawerBody, Footer: DrawerFooter, } = Drawer;

package/dist/empty-state.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const EmptyState: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        level?: 2 | 3 | 4 | 5 | 6;
+    } & React.RefAttributes<HTMLHeadingElement>>;
+    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 declare const EmptyStateRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, EmptyStateIcon: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, EmptyStateTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    level?: 2 | 3 | 4 | 5 | 6;
+} & React.RefAttributes<HTMLHeadingElement>>, EmptyStateDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>, EmptyStateActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/empty-state.js

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

package/dist/field.d.ts

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

package/dist/field.js

@@ -0,0 +1,21 @@
+'use client';
+import { Field as BaseField } from '@base-ui/react/field';
+import { part } from './parts.js';
+const FieldRoot = /* @__PURE__ */ part(BaseField.Root, 'pui-field');
+const FieldLabel = /* @__PURE__ */ part(BaseField.Label, 'pui-field-label');
+const FieldControl = /* @__PURE__ */ part(BaseField.Control, 'pui-input');
+const FieldDescription = /* @__PURE__ */ part(BaseField.Description, 'pui-field-description');
+const FieldError = /* @__PURE__ */ part(BaseField.Error, 'pui-field-error');
+const FieldItem = /* @__PURE__ */ part(BaseField.Item, 'pui-field-item');
+export const Field = {
+    ...BaseField,
+    Root: FieldRoot,
+    Label: FieldLabel,
+    Control: FieldControl,
+    Description: FieldDescription,
+    Error: FieldError,
+    Item: FieldItem,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, };
+export const { Validity: FieldValidity } = Field;

package/dist/fieldset.d.ts

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

package/dist/fieldset.js

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

package/dist/file-upload.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Field } from './forms.js';
+import { Field } from './field.js';
 export type UploadState = 'ready' | 'uploading' | 'success' | 'error' | 'canceled';
 export type UploadTransport = (file: File, context: {
     signal: AbortSignal;
@@ -29,6 +29,8 @@ export type FileUploadLabels = {
     failed: (file: File) => string;
     reset: string;
     progress: (file: File) => string;
+    /** Shown when an upload fails and getUploadError gives no message. */
+    uploadError: 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;

package/dist/file-upload.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Field } from './forms.js';
+import { Icon } from './icon.js';
+import { Field } from './field.js';
 import { Button } from './button.js';
-import { Progress } from './feedback.js';
-import { StatusBadge } from './status.js';
+import { Progress } from './progress.js';
+import { StatusBadge } from './badge.js';
 import { skin } from './parts.js';
 import { useResetValue, useRootRef } from './form-state.js';
 const labelsDefault = {
@@ -28,6 +29,7 @@ const labelsDefault = {
     failed: (file) => `${file.name}: upload failed.`,
     reset: 'Files reset.',
     progress: (file) => `${file.name} upload progress`,
+    uploadError: 'Upload failed. Try again.',
 };
 function signature(file) {
     return JSON.stringify([file.name, file.size, file.type, file.lastModified]);
@@ -49,7 +51,7 @@ function sizeLabel(bytes) {
     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 = /* @__PURE__ */ React.forwardRef(function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }, forwardedRef) {
     const labels = {
         ...labelsDefault,
         ...customLabels,
@@ -253,7 +255,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
         }
         catch (error) {
             if (current()) {
-                let message = 'Upload failed. Try again.';
+                let message = labels.uploadError;
                 try {
                     message = getUploadError?.(error) || message;
                 }
@@ -302,7 +304,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ label, descript
                                 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) => {
+                        } }), _jsxs("label", { htmlFor: inputId, className: 'pui-button pui-file-trigger', "data-variant": 'outline', "data-disabled": disabled || undefined, children: [_jsx(Icon, { name: 'upload' }), labels.choose] }), _jsx("p", { className: 'pui-file-drop-hint', children: labels.drop })] }), _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,