@surflane/ui 0.9.0 → 0.10.0

package/dist/dialog.js

@@ -1,28 +1,27 @@
 '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';
 /** 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(Icon, { name: 'close' }) }));
-});
-const DialogContent = /* @__PURE__ */ React.forwardRef(function DialogContent({ size, className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
+const DialogCloseButton = function DialogCloseButton({ className, 'aria-label': label = 'Close dialog', ref, ...props }) {
+    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: skin('surf-icon-button surf-dialog-close', className), children: _jsx(Icon, { name: 'close' }) }));
+};
+const DialogContent = function DialogContent({ size, className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ref, ...props }) {
     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, "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] })] }));
-});
+    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'surf-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, ref: ref, className: skin('surf-dialog-popup surf-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) });
+    return _jsx("div", { ...props, className: cx('surf-dialog-header', className) });
 }
-const DialogBody = /* @__PURE__ */ React.forwardRef(function DialogBody({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('pui-dialog-body', className) }));
-});
+const DialogBody = function DialogBody({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-dialog-body', className) }));
+};
 function DialogFooter({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx('pui-dialog-footer', className) });
+    return _jsx("div", { ...props, className: cx('surf-dialog-footer', className) });
 }
 export const Dialog = {
     ...BaseDialog,

package/dist/drawer.d.ts

@@ -4,15 +4,21 @@ 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 DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup> & PanelOptions & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => 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 Drawer: {
     Root: typeof DrawerRoot;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & PanelOptions & React.RefAttributes<HTMLDivElement>>;
+    Content: ({ size, flush, closeLabel, className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup> & PanelOptions & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     PrimitiveContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Header: typeof Header;
-    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
     Footer: typeof Footer;
     Title: typeof DrawerTitle;
     Description: typeof DrawerDescription;
@@ -31,5 +37,7 @@ export declare const Drawer: {
     Handle: typeof BaseDrawer.Handle;
 };
 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 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: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, DrawerFooter: typeof Footer;
 export type { PanelSide } from './panel.js';

package/dist/drawer.js

@@ -19,17 +19,17 @@ function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
     };
     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 DrawerContent = function DrawerContent({ size, flush, closeLabel = 'Close panel', className, children, ref, ...props }) {
     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 })] }) })] }) }) }));
-});
+    return (_jsx(KeyboardProvider, { children: _jsx(BaseDrawer.Portal, { children: _jsxs("div", { className: 'surf-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDrawer.Backdrop, { className: 'surf-panel-backdrop' })), _jsx(BaseDrawer.Viewport, { className: 'surf-panel-viewport', "data-side": side, "data-flush": flush || undefined, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: skin('surf-panel surf-drawer', className), "data-side": side, "data-size": normalizeSize(size) ?? 'large', "data-flush": flush || undefined, children: [_jsx("div", { className: 'surf-drawer-handle', "aria-hidden": 'true' }), _jsx(BaseDrawer.Close, { className: 'surf-panel-close surf-icon-button', "aria-label": closeLabel, children: _jsx(Icon, { name: 'close' }) }), _jsx(BaseDrawer.Content, { className: 'surf-panel-content', children: children })] }) })] }) }) }));
+};
 function DrawerTitle({ className, ...props }) {
-    return (_jsx(BaseDrawer.Title, { ...props, className: skin('pui-panel-title', className) }));
+    return (_jsx(BaseDrawer.Title, { ...props, className: skin('surf-panel-title', className) }));
 }
 function DrawerDescription({ className, ...props }) {
-    return (_jsx(BaseDrawer.Description, { ...props, className: skin('pui-panel-description', className) }));
+    return (_jsx(BaseDrawer.Description, { ...props, className: skin('surf-panel-description', className) }));
 }
 export const Drawer = {
     ...BaseDrawer,

package/dist/element-part.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type ComponentSize } from './size.js';
+export declare function elementPart<Element extends HTMLElement, Props extends {
+    className?: string;
+}>(tag: string, base: string): ({ className, size, ref, ...rest }: Omit<Props, "size"> & {
+    size?: ComponentSize;
+    ref?: React.Ref<Element>;
+}) => React.JSX.Element;

package/dist/element-part.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A styled element part that renders on the server as well as the client. Its size
+// reaches the parts inside it through data-ui-size, which the size rules read; only
+// an explicit size opens a small client boundary, so portalled popups inside it keep
+// the size too.
+import * as React from 'react';
+import { cx } from './class-names.js';
+import { normalizeSize } from './size.js';
+import { SizeScope } from './sizing.js';
+export function elementPart(tag, base) {
+    return function ElementPart({ className, size, ref, ...rest }) {
+        const scheme = normalizeSize(size);
+        const element = React.createElement(tag, {
+            ...rest,
+            ref,
+            className: cx(base, className),
+            'data-ui-size': scheme,
+        });
+        return scheme ? _jsx(SizeScope, { size: scheme, children: element }) : element;
+    };
+}