@surflane/ui 0.4.0 → 0.6.0

package/dist/dialog.js

@@ -1,20 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { skin } from './parts.js';
+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 = /* @__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("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' }) }) }));
+    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 = /* @__PURE__ */ 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: skin('pui-dialog-popup pui-dialog-content', 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) });
@@ -33,18 +32,6 @@ export const Dialog = {
     Footer: DialogFooter,
     CloseButton: DialogCloseButton,
 };
-const AlertDialogContent = /* @__PURE__ */ 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: skin('pui-dialog-popup pui-dialog-content pui-confirm-content', 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]);
@@ -253,7 +255,7 @@ export const FileUpload = /* @__PURE__ */ React.forwardRef(function FileUpload({
         }
         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 = /* @__PURE__ */ React.forwardRef(function FileUpload({
                                 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,

package/dist/filter-bar.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-const cx = (base, extra) => [base, extra].filter(Boolean).join(' ');
+import { cx } from './parts.js';
 /** Layout only: filtering, routing and async results remain controlled by the caller. */
 const Root = /* @__PURE__ */ React.forwardRef(function FilterBarRoot({ label, className, ...props }, ref) {
     return (_jsx("form", { ...props, ref: ref, role: 'search', "aria-label": label, className: cx('pui-filter-bar', className) }));

package/dist/form.d.ts

@@ -0,0 +1,2 @@
+import { Form as BaseForm } from '@base-ui/react/form';
+export declare function Form<Values extends Record<string, unknown> = Record<string, unknown>>({ className, ...props }: BaseForm.Props<Values>): import("react").JSX.Element;

package/dist/form.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form as BaseForm } from '@base-ui/react/form';
+import { skin } from './parts.js';
+export function Form({ className, ...props }) {
+    return _jsx(BaseForm, { ...props, className: skin('pui-form', className) });
+}

package/dist/format.d.ts

@@ -0,0 +1,25 @@
+/** Number formatting shared by every screen: one place decides the locale, the sign and
+ * the precision of values, money, percentages and compact figures. Pass `locale` when
+ * rendering on the server, so the client formats the same text. */
+export type NumberFormatOptions = {
+    /** A BCP 47 locale such as 'ko-KR'. Defaults to the runtime's. */
+    locale?: string | string[];
+    /** Digits after the decimal point: an exact count, or a [minimum, maximum] range. */
+    precision?: number | readonly [number, number];
+    /** Shows + before gains and − before losses. Zero stays unsigned. */
+    signed?: boolean;
+    /** Shortens large values: 1.2K and 3.4M, or 1.2만 in Korean. */
+    compact?: boolean;
+    /** Text for a missing value: null, undefined or a non-finite number. */
+    missing?: string;
+};
+/** The default text for a missing value. Zero is a value; missing is not. */
+export declare const missingValue = "\u2014";
+/** A plain number: 1,234.5. */
+export declare function formatNumber(value: number | null | undefined, options?: NumberFormatOptions): string;
+/** An amount of money in an ISO 4217 currency: ₩1,200 or $12.50. The currency sets the
+ * default precision. */
+export declare function formatCurrency(value: number | null | undefined, currency: string, options?: NumberFormatOptions): string;
+/** A ratio as a percentage: 0.032 is 3.2%. Up to one decimal place unless `precision`
+ * says otherwise. */
+export declare function formatPercent(value: number | null | undefined, options?: NumberFormatOptions): string;

package/dist/format.js

@@ -0,0 +1,42 @@
+/** The default text for a missing value. Zero is a value; missing is not. */
+export const missingValue = '—';
+const cache = new Map();
+function formatter(locale, options) {
+    const key = JSON.stringify([locale ?? null, options]);
+    let format = cache.get(key);
+    if (!format) {
+        format = new Intl.NumberFormat(locale, options);
+        cache.set(key, format);
+    }
+    return format;
+}
+function digits(precision) {
+    if (precision === undefined)
+        return {};
+    const [minimumFractionDigits, maximumFractionDigits] = typeof precision === 'number' ? [precision, precision] : precision;
+    return { minimumFractionDigits, maximumFractionDigits };
+}
+function format(value, base, { locale, precision, signed, compact, missing = missingValue, }) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return missing;
+    return formatter(locale, {
+        ...base,
+        ...(compact ? { notation: 'compact' } : {}),
+        ...(signed ? { signDisplay: 'exceptZero' } : {}),
+        ...digits(precision),
+    }).format(value);
+}
+/** A plain number: 1,234.5. */
+export function formatNumber(value, options = {}) {
+    return format(value, {}, options);
+}
+/** An amount of money in an ISO 4217 currency: ₩1,200 or $12.50. The currency sets the
+ * default precision. */
+export function formatCurrency(value, currency, options = {}) {
+    return format(value, { style: 'currency', currency }, options);
+}
+/** A ratio as a percentage: 0.032 is 3.2%. Up to one decimal place unless `precision`
+ * says otherwise. */
+export function formatPercent(value, options = {}) {
+    return format(value, { style: 'percent' }, { precision: [0, 1], ...options });
+}

package/dist/icon.d.ts

@@ -8,16 +8,27 @@ declare const shapes: {
     alert: React.JSX.Element;
     warning: React.JSX.Element;
     menu: React.JSX.Element;
+    sidebar: React.JSX.Element;
     more: React.JSX.Element;
     sun: React.JSX.Element;
     moon: React.JSX.Element;
     monitor: React.JSX.Element;
+    minus: React.JSX.Element;
+    'minus-circle': React.JSX.Element;
+    clock: React.JSX.Element;
     'chevron-down': React.JSX.Element;
     'chevron-forward': React.JSX.Element;
+    'chevron-back': React.JSX.Element;
     'arrow-back': React.JSX.Element;
+    'arrow-up': React.JSX.Element;
+    'arrow-down': React.JSX.Element;
+    sort: React.JSX.Element;
     'external-link': React.JSX.Element;
     copy: React.JSX.Element;
     play: React.JSX.Element;
+    upload: React.JSX.Element;
+    calendar: React.JSX.Element;
+    user: React.JSX.Element;
     settings: React.JSX.Element;
 };
 export type IconName = keyof typeof shapes;

package/dist/icon.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cx } from './parts.js';
 const shapes = {
     search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '10.5', cy: '10.5', r: '6.5' }), _jsx("path", { d: 'm16 16 4 4' })] })),
     plus: _jsx("path", { d: 'M12 5v14M5 12h14' }),
@@ -10,22 +11,37 @@ const shapes = {
     alert: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })),
     warning: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })),
     menu: _jsx("path", { d: 'M4 6h16M4 12h16M4 18h16' }),
+    sidebar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '16', rx: '2' }), _jsx("path", { d: 'M9 4v16' })] })),
     more: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '5', cy: '12', r: '1' }), _jsx("circle", { cx: '12', cy: '12', r: '1' }), _jsx("circle", { cx: '19', cy: '12', r: '1' })] })),
     sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '4' }), _jsx("path", { d: 'M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5' })] })),
     moon: _jsx("path", { d: 'M20.5 13.2A8.5 8.5 0 0 1 10.8 3.5 8.5 8.5 0 1 0 20.5 13.2Z' }),
     monitor: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '13', rx: '2' }), _jsx("path", { d: 'M8 21h8m-4-4v4' })] })),
+    minus: _jsx("path", { d: 'M5 12h14' }),
+    'minus-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })),
+    clock: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })),
     'chevron-down': _jsx("path", { d: 'm7 10 5 5 5-5' }),
     'chevron-forward': _jsx("path", { d: 'm9 6 6 6-6 6' }),
+    'chevron-back': _jsx("path", { d: 'm15 6-6 6 6 6' }),
     'arrow-back': _jsx("path", { d: 'M20 12H4m7-7-7 7 7 7' }),
+    'arrow-up': _jsx("path", { d: 'M12 19V5m-6 6 6-6 6 6' }),
+    'arrow-down': _jsx("path", { d: 'M12 5v14m-6-6 6 6 6-6' }),
+    sort: _jsx("path", { d: 'm8 9 4-4 4 4m-8 6 4 4 4-4' }),
     'external-link': (_jsx(_Fragment, { children: _jsx("path", { d: 'M14 3h7v7m0-7L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5' }) })),
     copy: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '13', rx: '2' }), _jsx("path", { d: 'M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3' })] })),
     play: _jsx("path", { d: 'm7 3 14 9-14 9V3Z' }),
+    upload: _jsx("path", { d: 'M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5' }),
+    calendar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '5', width: '18', height: '16', rx: '3' }), _jsx("path", { d: 'M7 3v4m10-4v4M3 11h18m-12 4h2' })] })),
+    user: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '8', r: '4' }), _jsx("path", { d: 'M4 21v-2a8 8 0 0 1 16 0v2' })] })),
     settings: (_jsx(_Fragment, { children: _jsx("path", { d: 'M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-6 0v6' }) })),
 };
 export const iconNames = Object.keys(shapes);
+// These point along the reading direction, so they mirror in right-to-left text.
+const directional = new Set([
+    'chevron-forward',
+    'chevron-back',
+    'arrow-back',
+]);
 /** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
 export const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ name, size = 'sm', decorative = true, label, className, ...props }, ref) {
-    return (_jsx("svg", { ...props, ref: ref, className: ['pui-icon', className].filter(Boolean).join(' '), "data-size": size, "data-directional": name === 'chevron-forward' || name === 'arrow-back'
-            ? 'true'
-            : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
+    return (_jsx("svg", { ...props, ref: ref, className: cx('pui-icon', className), "data-size": size, "data-directional": directional.has(name) ? 'true' : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
 });