@surflane/ui 0.1.0 → 0.2.0

package/dist/pagination.js

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Button } from "./button.js";
+import * as React from 'react';
+import { Button } from './button.js';
 function Chevron({ next = false }) {
-    return (_jsx("svg", { className: "pui-pagination-arrow", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: next ? "m9 6 6 6-6 6" : "m15 6-6 6 6 6" }) }));
+    return (_jsx("svg", { className: 'pui-pagination-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: next ? 'm9 6 6 6-6 6' : 'm15 6-6 6 6 6' }) }));
 }
-export const Pagination = React.forwardRef(function Pagination({ page, pageCount, siblings = 1, disabled = false, labels, getPageHref, onPageChange, className, "aria-label": ariaLabel = "Pagination", ...props }, ref) {
+export const Pagination = React.forwardRef(function Pagination({ page, pageCount, siblings = 1, disabled = false, labels, getPageHref, onPageChange, className, 'aria-label': ariaLabel = 'Pagination', ...props }, ref) {
     const count = Number.isFinite(pageCount)
         ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(pageCount)))
         : 0;
@@ -27,18 +27,18 @@ export const Pagination = React.forwardRef(function Pagination({ page, pageCount
     });
     function control(target, name, children, boundary = false) {
         const inactive = disabled || boundary;
-        const currentPage = !boundary && target === current && typeof children === "number";
+        const currentPage = !boundary && target === current && typeof children === 'number';
         const attributes = {
-            className: "pui-pagination-control",
-            "aria-label": name,
-            "aria-current": currentPage ? "page" : undefined,
+            className: 'pui-pagination-control',
+            'aria-label': name,
+            'aria-current': currentPage ? 'page' : undefined,
         };
         if (getPageHref)
-            return inactive ? (_jsx("span", { ...attributes, "aria-disabled": "true", children: children })) : (_jsx("a", { ...attributes, href: getPageHref(target), children: children }));
-        return (_jsx(Button, { ...attributes, variant: "ghost", type: "button", disabled: inactive, onClick: () => {
+            return inactive ? (_jsx("span", { ...attributes, "aria-disabled": 'true', children: children })) : (_jsx("a", { ...attributes, href: getPageHref(target), children: children }));
+        return (_jsx(Button, { ...attributes, variant: 'ghost', type: 'button', disabled: inactive, onClick: () => {
                 if (target !== current)
                     onPageChange?.(target);
             }, children: children }));
     }
-    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: ["pui-pagination", className].filter(Boolean).join(" "), children: [control(Math.max(1, current - 1), labels?.previous ?? "Previous page", _jsxs(_Fragment, { children: [_jsx(Chevron, {}), _jsx("span", { children: labels?.previous ?? "Previous page" })] }), current === 1), _jsx("span", { className: "pui-pagination-summary", children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: "list", className: "pui-pagination-list", children: items.map((item) => (_jsx("li", { children: typeof item === "number" ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: "pui-pagination-gap", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.5" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "1.5" })] }), _jsx("span", { className: "pui-feedback-sr", children: labels?.more ?? "More pages" })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? "Next page", _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? "Next page" }), _jsx(Chevron, { next: true })] }), current === count)] }));
+    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: ['pui-pagination', className].filter(Boolean).join(' '), children: [control(Math.max(1, current - 1), labels?.previous ?? 'Previous page', _jsxs(_Fragment, { children: [_jsx(Chevron, {}), _jsx("span", { children: labels?.previous ?? 'Previous page' })] }), current === 1), _jsx("span", { className: 'pui-pagination-summary', children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: 'list', className: 'pui-pagination-list', children: items.map((item) => (_jsx("li", { children: typeof item === 'number' ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: 'pui-pagination-gap', children: [_jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: [_jsx("circle", { cx: '5', cy: '12', r: '1.5' }), _jsx("circle", { cx: '12', cy: '12', r: '1.5' }), _jsx("circle", { cx: '19', cy: '12', r: '1.5' })] }), _jsx("span", { className: 'pui-feedback-sr', children: labels?.more ?? 'More pages' })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? 'Next page', _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? 'Next page' }), _jsx(Chevron, { next: true })] }), current === count)] }));
 });

package/dist/panels.d.ts

@@ -1,8 +1,8 @@
-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";
+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;
@@ -10,13 +10,13 @@ type PanelOptions = {
 declare function SheetRoot({ side, modal, ...props }: React.ComponentProps<typeof BaseDialog.Root> & {
     side?: PanelSide;
 }): React.JSX.Element;
-declare function DrawerRoot({ side, modal, ...props }: Omit<React.ComponentProps<typeof BaseDrawer.Root>, "swipeDirection"> & {
+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 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;

package/dist/panels.js

@@ -1,76 +1,76 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize, normalizeSize, } from "./sizing.js";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import * as React from 'react';
+import { useComponentSize, normalizeSize, } from './sizing.js';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
 const SheetSide = React.createContext({
-    side: "right",
+    side: 'right',
     modal: true,
 });
 const DrawerSide = React.createContext({
-    side: "bottom",
+    side: 'bottom',
     modal: true,
 });
-const cx = (...values) => values.filter(Boolean).join(" ");
+const cx = (...values) => values.filter(Boolean).join(' ');
 function CloseIcon() {
-    return (_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("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' }) }));
 }
-function SheetRoot({ side = "right", modal = true, ...props }) {
+function SheetRoot({ side = 'right', modal = true, ...props }) {
     return (_jsx(SheetSide.Provider, { value: { side, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal }) }));
 }
-function DrawerRoot({ side = "bottom", modal = true, ...props }) {
+function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
     const direction = {
-        left: "left",
-        right: "right",
-        top: "up",
-        bottom: "down",
+        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 SheetContent = React.forwardRef(function SheetContent({ size, closeLabel = "Close panel", className, children, ...props }, ref) {
+const SheetContent = React.forwardRef(function SheetContent({ size, closeLabel = 'Close panel', className, children, ...props }, ref) {
     const scheme = useComponentSize(size);
     const { side, modal } = React.useContext(SheetSide);
-    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: "pui-panel-layer", "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: "pui-panel-backdrop" })), _jsx("div", { className: "pui-panel-viewport", "data-side": side, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: cx("pui-panel", typeof className === "string" ? className : undefined), "data-side": side, "data-size": size
-                            ? normalizeSize(size) === "small"
-                                ? "sm"
-                                : normalizeSize(size) === "large"
-                                    ? "lg"
-                                    : "md"
-                            : "md", children: [_jsx(BaseDialog.Close, { className: "pui-panel-close pui-icon-button", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), children] }) })] }) }));
+    return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'pui-panel-backdrop' })), _jsx("div", { className: 'pui-panel-viewport', "data-side": side, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: cx('pui-panel', typeof className === 'string' ? className : undefined), "data-side": side, "data-size": size
+                            ? normalizeSize(size) === 'small'
+                                ? 'sm'
+                                : normalizeSize(size) === 'large'
+                                    ? 'lg'
+                                    : 'md'
+                            : 'md', children: [_jsx(BaseDialog.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), children] }) })] }) }));
 });
-const DrawerContent = React.forwardRef(function DrawerContent({ size, closeLabel = "Close panel", className, children, ...props }, ref) {
+const DrawerContent = React.forwardRef(function DrawerContent({ size, 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, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: cx("pui-panel pui-drawer", typeof className === "string" ? className : undefined), "data-side": side, "data-size": size
-                                ? normalizeSize(size) === "small"
-                                    ? "sm"
-                                    : normalizeSize(size) === "large"
-                                        ? "lg"
-                                        : "md"
-                                : "lg", 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(CloseIcon, {}) }), _jsx(BaseDrawer.Content, { className: "pui-panel-content", children: children })] }) })] }) }) }));
+    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, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: cx('pui-panel pui-drawer', typeof className === 'string' ? className : undefined), "data-side": side, "data-size": size
+                                ? normalizeSize(size) === 'small'
+                                    ? 'sm'
+                                    : normalizeSize(size) === 'large'
+                                        ? 'lg'
+                                        : 'md'
+                                : 'lg', 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(CloseIcon, {}) }), _jsx(BaseDrawer.Content, { className: 'pui-panel-content', children: children })] }) })] }) }) }));
 });
 function Header({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-panel-header", className) });
+    return _jsx("div", { ...props, className: cx('pui-panel-header', className) });
 }
 const Body = React.forwardRef(function Body({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: cx("pui-panel-body", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-panel-body', className) }));
 });
 function Footer({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx("pui-panel-footer", className) });
+    return _jsx("div", { ...props, className: cx('pui-panel-footer', className) });
 }
 function SheetTitle({ className, ...props }) {
-    return (_jsx(BaseDialog.Title, { ...props, className: cx("pui-panel-title", typeof className === "string" ? className : undefined) }));
+    return (_jsx(BaseDialog.Title, { ...props, className: cx('pui-panel-title', typeof className === 'string' ? className : undefined) }));
 }
 function SheetDescription({ className, ...props }) {
-    return (_jsx(BaseDialog.Description, { ...props, className: cx("pui-panel-description", typeof className === "string" ? className : undefined) }));
+    return (_jsx(BaseDialog.Description, { ...props, className: cx('pui-panel-description', typeof className === 'string' ? className : undefined) }));
 }
 function DrawerTitle({ className, ...props }) {
-    return (_jsx(BaseDrawer.Title, { ...props, className: cx("pui-panel-title", typeof className === "string" ? className : undefined) }));
+    return (_jsx(BaseDrawer.Title, { ...props, className: cx('pui-panel-title', typeof className === 'string' ? className : undefined) }));
 }
 function DrawerDescription({ className, ...props }) {
-    return (_jsx(BaseDrawer.Description, { ...props, className: cx("pui-panel-description", typeof className === "string" ? className : undefined) }));
+    return (_jsx(BaseDrawer.Description, { ...props, className: cx('pui-panel-description', typeof className === 'string' ? className : undefined) }));
 }
 export const Sheet = {
     ...BaseDialog,

package/dist/parts.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentSize } from "./sizing.js";
-import * as React from "react";
+import { type ComponentSize } from './sizing.js';
+import * as React from 'react';
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export declare function skin<State>(base: string, custom?: string | ((state: State) => string | undefined)): string | ((state: State) => string);
 export declare function part<Element extends HTMLElement, Props extends {

package/dist/parts.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ComponentSizeContext, useComponentSize, } from "./sizing.js";
-import * as React from "react";
+import { ComponentSizeContext, useComponentSize, } from './sizing.js';
+import * as React from 'react';
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
-    if (typeof custom === "function")
-        return (state) => [base, custom(state)].filter(Boolean).join(" ");
-    return [base, custom].filter(Boolean).join(" ");
+    if (typeof custom === 'function')
+        return (state) => [base, custom(state)].filter(Boolean).join(' ');
+    return [base, custom].filter(Boolean).join(' ');
 }
 export function part(Component, base) {
     return React.forwardRef(function ThemedPart(props, ref) {
         const { className, size, ...rest } = props;
         const scheme = useComponentSize(size);
         const portal = /positioner|popup|^pui-menu$|navigation-menu-viewport/.test(base);
-        const classes = typeof className === "function"
-            ? (state) => [base, className(state)].filter(Boolean).join(" ")
-            : [base, className].filter(Boolean).join(" ");
+        const classes = typeof className === 'function'
+            ? (state) => [base, className(state)].filter(Boolean).join(' ')
+            : [base, className].filter(Boolean).join(' ');
         const element = (_jsx(Component, { ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
         // Keep the React subtree stable when size changes from omitted to explicit.
         return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: element }));

package/dist/popover.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Popover as BasePopover } from "@base-ui/react/popover";
-declare function PopoverContent({ side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding">): React.JSX.Element;
+import * as React from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+declare function PopoverContent({ side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'>): React.JSX.Element;
 export declare const Popover: {
     Content: typeof PopoverContent;
     Root: typeof BasePopover.Root;

package/dist/popover.js

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useComponentSize } from "./sizing.js";
-import { Popover as BasePopover } from "@base-ui/react/popover";
-const cx = (...v) => v.filter(Boolean).join(" ");
-function PopoverContent({ side = "bottom", align = "start", sideOffset = 8, collisionPadding = 12, className, ...props }) {
+import { useComponentSize } from './sizing.js';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+const cx = (...v) => v.filter(Boolean).join(' ');
+function PopoverContent({ side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
     const scheme = useComponentSize();
-    return (_jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: "pui-positioner", children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, ...props, className: cx("pui-popover", typeof className === "string" && className) }) }));
+    return (_jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, ...props, className: cx('pui-popover', typeof className === 'string' && className) }) }));
 }
 export const Popover = { ...BasePopover, Content: PopoverContent };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/scroll-area.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     label?: string;
     rootClassName?: string;

package/dist/scroll-area.js

@@ -1,39 +1,39 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-export const ScrollArea = React.forwardRef(function ScrollArea({ label, orientation = "horizontal", scrollChain = "auto", style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? "region" : undefined, className, children, ...props }, ref) {
+import * as React from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+export const ScrollArea = React.forwardRef(function ScrollArea({ label, orientation = 'horizontal', scrollChain = 'auto', style, rootClassName, rootStyle, tabIndex = label ? 0 : undefined, role = label ? 'region' : undefined, className, children, ...props }, ref) {
     const dragPointer = React.useRef(null);
     const clearDrag = (event) => {
         if (dragPointer.current !== event.pointerId)
             return;
         dragPointer.current = null;
-        event.currentTarget.removeAttribute("data-scroll-dragging");
+        event.currentTarget.removeAttribute('data-scroll-dragging');
     };
-    return (_jsxs(BaseScrollArea.Root, { className: ["pui-scroll-root", rootClassName].filter(Boolean).join(" "), style: rootStyle, onPointerMoveCapture: (event) => {
-            if (event.pointerType === "touch")
+    return (_jsxs(BaseScrollArea.Root, { className: ['pui-scroll-root', rootClassName].filter(Boolean).join(' '), style: rootStyle, onPointerMoveCapture: (event) => {
+            if (event.pointerType === 'touch')
                 return;
             const root = event.currentTarget;
             const bounds = root.getBoundingClientRect();
-            root.toggleAttribute("data-scroll-near-x", bounds.bottom - event.clientY <= 24 && event.clientY <= bounds.bottom);
-            root.toggleAttribute("data-scroll-near-y", bounds.right - event.clientX <= 24 && event.clientX <= bounds.right);
+            root.toggleAttribute('data-scroll-near-x', bounds.bottom - event.clientY <= 24 && event.clientY <= bounds.bottom);
+            root.toggleAttribute('data-scroll-near-y', bounds.right - event.clientX <= 24 && event.clientX <= bounds.right);
         }, onPointerLeave: (event) => {
-            event.currentTarget.removeAttribute("data-scroll-near-x");
-            event.currentTarget.removeAttribute("data-scroll-near-y");
+            event.currentTarget.removeAttribute('data-scroll-near-x');
+            event.currentTarget.removeAttribute('data-scroll-near-y');
         }, onPointerDownCapture: (event) => {
             const target = event.target;
-            const bar = target.closest(".pui-scrollbar");
+            const bar = target.closest('.pui-scrollbar');
             if (event.button === 0 && bar?.parentElement === event.currentTarget) {
                 dragPointer.current = event.pointerId;
-                event.currentTarget.setAttribute("data-scroll-dragging", bar.getAttribute("data-orientation") ?? "");
+                event.currentTarget.setAttribute('data-scroll-dragging', bar.getAttribute('data-orientation') ?? '');
             }
-        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: ["pui-scroll-viewport scroll-area", className]
+        }, onPointerUpCapture: clearDrag, onPointerCancelCapture: clearDrag, onLostPointerCapture: clearDrag, children: [_jsx(BaseScrollArea.Viewport, { ...props, ref: ref, className: ['pui-scroll-viewport scroll-area', className]
                     .filter(Boolean)
-                    .join(" "), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
-                    overflowX: orientation === "vertical" ? "hidden" : "auto",
-                    overflowY: orientation === "horizontal" ? "hidden" : "auto",
-                    overscrollBehaviorX: orientation === "vertical" ? "auto" : scrollChain,
-                    overscrollBehaviorY: orientation === "horizontal" ? "auto" : scrollChain,
+                    .join(' '), role: role, "aria-label": label, tabIndex: tabIndex, "data-scroll-orientation": orientation, style: {
+                    overflowX: orientation === 'vertical' ? 'hidden' : 'auto',
+                    overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',
+                    overscrollBehaviorX: orientation === 'vertical' ? 'auto' : scrollChain,
+                    overscrollBehaviorY: orientation === 'horizontal' ? 'auto' : scrollChain,
                     ...style,
-                }, children: _jsx(BaseScrollArea.Content, { className: "pui-scroll-content", style: orientation === "vertical" ? { minWidth: 0 } : undefined, children: children }) }), orientation !== "vertical" && (_jsx(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: "pui-scrollbar", children: _jsx(BaseScrollArea.Thumb, { className: "pui-scroll-thumb" }) })), orientation !== "horizontal" && (_jsx(BaseScrollArea.Scrollbar, { orientation: "vertical", className: "pui-scrollbar", children: _jsx(BaseScrollArea.Thumb, { className: "pui-scroll-thumb" }) })), _jsx(BaseScrollArea.Corner, {})] }));
+                }, children: _jsx(BaseScrollArea.Content, { className: 'pui-scroll-content', style: orientation === 'vertical' ? { minWidth: 0 } : undefined, children: children }) }), orientation !== 'vertical' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'horizontal', className: 'pui-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'pui-scroll-thumb' }) })), orientation !== 'horizontal' && (_jsx(BaseScrollArea.Scrollbar, { orientation: 'vertical', className: 'pui-scrollbar', children: _jsx(BaseScrollArea.Thumb, { className: 'pui-scroll-thumb' }) })), _jsx(BaseScrollArea.Corner, {})] }));
 });

package/dist/select.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type ComponentSizeAlias } from "./sizing.js";
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 export type SelectOption = {
     value: string;
     label: React.ReactNode;
@@ -19,15 +19,15 @@ export type SelectProps = {
     inputRef?: React.Ref<HTMLInputElement>;
     triggerRef?: React.Ref<HTMLButtonElement>;
     size?: ComponentSizeAlias;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
 export declare function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }: SelectProps): React.JSX.Element;
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
 export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
     size?: ComponentSizeAlias;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function NativeSelectOption(props: React.ComponentProps<"option">): React.JSX.Element;
-export declare function NativeSelectOptGroup(props: React.ComponentProps<"optgroup">): React.JSX.Element;
+export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
+export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;

package/dist/select.js

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { Select as BaseSelect } from "@base-ui/react/select";
-const cx = (...v) => v.filter(Boolean).join(" ");
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Select as BaseSelect } from '@base-ui/react/select';
+const cx = (...v) => v.filter(Boolean).join(' ');
 function Chevron() {
-    return (_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: "m7 10 5 5 5-5" }) }));
+    return (_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: 'm7 10 5 5 5-5' }) }));
 }
 function Check() {
-    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m5 12 4 4L19 6" }) }));
+    return (_jsx("svg", { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) }));
 }
 export function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }) {
     const scheme = useComponentSize(size);
-    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? "");
+    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
     const nativeInput = React.useRef(null);
-    const initialValue = defaultValue ?? options[0]?.value ?? "";
+    const initialValue = defaultValue ?? options[0]?.value ?? '';
     const resetCallback = React.useRef(onValueChange);
     resetCallback.current = onValueChange;
     React.useEffect(() => {
@@ -32,24 +32,24 @@ export function Select({ options, value, defaultValue, onValueChange, className,
             }, 0);
             pending.add(timer);
         };
-        owner.addEventListener("reset", reset);
+        owner.addEventListener('reset', reset);
         return () => {
-            owner.removeEventListener("reset", reset);
+            owner.removeEventListener('reset', reset);
             pending.forEach(clearTimeout);
         };
     }, [initialValue, props.form]);
     const selected = value ?? localValue;
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx("pui-select control-shell select-control", className), "data-size": size, "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
-                setLocalValue(v ?? "");
-                onValueChange?.(v ?? "");
+    return (_jsx("span", { className: cx('pui-select control-shell select-control', className), "data-size": size, "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
+                setLocalValue(v ?? '');
+                onValueChange?.(v ?? '');
             }, inputRef: (node) => {
                 nativeInput.current = node;
-                if (typeof inputRef === "function")
+                if (typeof inputRef === 'function')
                     inputRef(node);
                 else if (inputRef)
                     inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: "pui-select-trigger form-control", "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: "pui-select-icon select-chevron", children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "pui-positioner", sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "pui-select-popup", "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: "pui-select-item", value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: "pui-select-check", children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
+            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: 'pui-select-trigger form-control', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon select-chevron', children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'pui-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'pui-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
 }
 function optionList(children) {
     return React.Children.toArray(children).flatMap((child) => {
@@ -57,12 +57,12 @@ function optionList(children) {
             return [];
         const p = child.props;
         if (child.type === React.Fragment ||
-            child.type === "optgroup" ||
+            child.type === 'optgroup' ||
             child.type === NativeSelectOptGroup)
             return optionList(p.children);
         return [
             {
-                value: String(p.value ?? p.children ?? ""),
+                value: String(p.value ?? p.children ?? ''),
                 label: p.label ?? p.children,
                 disabled: p.disabled,
             },
@@ -73,15 +73,15 @@ function optionList(children) {
 export const NativeSelect = React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
     const input = React.useRef(null);
     const options = optionList(children);
-    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"], onValueChange: (next) => {
+    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
             if (!onChange)
                 return;
             const target = input.current;
             if (!target)
                 return;
-            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
             setter?.call(target, next);
-            const event = new Event("change", { bubbles: true });
+            const event = new Event('change', { bubbles: true });
             Object.defineProperties(event, {
                 target: { value: target },
                 currentTarget: { value: target },

package/dist/sizing.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-export type ComponentSize = "small" | "default" | "large";
-export type ComponentSizeAlias = ComponentSize | "sm" | "md" | "lg";
+import * as React from 'react';
+export type ComponentSize = 'small' | 'default' | 'large';
+export type ComponentSizeAlias = ComponentSize | 'sm' | 'md' | 'lg';
 export declare const ComponentSizeContext: React.Context<ComponentSize | undefined>;
 export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;
 /** Explicit sizes override the surrounding scheme; portals retain React context. */

package/dist/sizing.js

@@ -1,14 +1,14 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import * as React from 'react';
 export const ComponentSizeContext = React.createContext(undefined);
 export function normalizeSize(size) {
-    return size === "sm"
-        ? "small"
-        : size === "md"
-            ? "default"
-            : size === "lg"
-                ? "large"
+    return size === 'sm'
+        ? 'small'
+        : size === 'md'
+            ? 'default'
+            : size === 'lg'
+                ? 'large'
                 : size;
 }
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
@@ -19,5 +19,5 @@ export function useComponentSize(size) {
 /** No layout box: grid/flex items and semantic children retain their own layout.
  * For table internals, place the provider outside the table, never inside tbody. */
 export function SizeProvider({ size, children, }) {
-    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: "pui-size-scope", "data-ui-size": size, children: children }) }));
+    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: 'pui-size-scope', "data-ui-size": size, children: children }) }));
 }

package/dist/slot.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare function Slot({ children, ...props }: React.HTMLAttributes<HTMLElement>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/slot.js

@@ -1,10 +1,10 @@
-"use client";
-import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 export function Slot({ children, ...props }) {
     return useRender({
         render: React.isValidElement(children) ? children : undefined,
         props: React.isValidElement(children) ? props : { ...props, children },
-        defaultTagName: "span",
+        defaultTagName: 'span',
     });
 }

package/dist/status.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { type ComponentSize } from "./sizing.js";
-export type StatusTone = "neutral" | "success" | "danger" | "caution" | "progress";
-export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & {
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
+export type StatusTone = 'neutral' | 'success' | 'danger' | 'caution' | 'progress';
+export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
     size?: ComponentSize;
     tone?: StatusTone;
     icon?: React.ReactNode;