@surflane/ui 0.1.0 → 0.3.0

package/dist/navigation.js

@@ -1,95 +1,95 @@
-"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 { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-import { Separator as BaseSeparator } from "@base-ui/react/separator";
-import { skin, part } from "./parts.js";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { skin, part } from './parts.js';
 export const Tabs = {
     ...BaseTabs,
-    Root: part(BaseTabs.Root, "pui-tabs"),
-    List: part(BaseTabs.List, "pui-tabs-list"),
-    Tab: part(BaseTabs.Tab, "pui-tabs-tab"),
-    Panel: part(BaseTabs.Panel, "pui-tabs-panel"),
-    Indicator: part(BaseTabs.Indicator, "pui-tabs-indicator"),
+    Root: part(BaseTabs.Root, 'pui-tabs'),
+    List: part(BaseTabs.List, 'pui-tabs-list'),
+    Tab: part(BaseTabs.Tab, 'pui-tabs-tab'),
+    Panel: part(BaseTabs.Panel, 'pui-tabs-panel'),
+    Indicator: part(BaseTabs.Indicator, 'pui-tabs-indicator'),
 };
 function Chevron() {
-    return (_jsx("svg", { className: "pui-disclosure-chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+    return (_jsx("svg", { className: 'pui-disclosure-chevron', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) }));
 }
 function AccordionRoot({ className, ...props }) {
-    return (_jsx(BaseAccordion.Root, { ...props, className: skin("pui-accordion", className) }));
+    return (_jsx(BaseAccordion.Root, { ...props, className: skin('pui-accordion', className) }));
 }
 const AccordionTrigger = React.forwardRef(function AccordionTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin("pui-disclosure-trigger", className), children: [_jsx("span", { className: "pui-disclosure-label", children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
+    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
 });
 const AccordionPanel = React.forwardRef(function AccordionPanel({ className, children, render, ...props }, ref) {
-    return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin("pui-accordion-panel", className), render: render ??
-            ((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === "ending" || undefined, "aria-hidden": state.transitionStatus === "ending" || undefined }))), children: _jsx("div", { className: "pui-disclosure-body", children: children }) }));
+    return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin('pui-accordion-panel', className), render: render ??
+            ((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === 'ending' || undefined, "aria-hidden": state.transitionStatus === 'ending' || undefined }))), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
 });
 export const Accordion = {
     ...BaseAccordion,
     Root: AccordionRoot,
-    Item: part(BaseAccordion.Item, "pui-accordion-item"),
-    Header: part(BaseAccordion.Header, "pui-accordion-header"),
+    Item: part(BaseAccordion.Item, 'pui-accordion-item'),
+    Header: part(BaseAccordion.Header, 'pui-accordion-header'),
     Trigger: AccordionTrigger,
     Panel: AccordionPanel,
 };
 const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin("pui-disclosure-trigger", className), children: [_jsx("span", { className: "pui-disclosure-label", children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
+    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
 });
 const CollapsiblePanel = React.forwardRef(function CollapsiblePanel({ className, children, ...props }, ref) {
-    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin("pui-collapsible-panel", className), children: _jsx("div", { className: "pui-disclosure-body", children: children }) }));
+    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('pui-collapsible-panel', className), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
 });
 export const Collapsible = {
     ...BaseCollapsible,
-    Root: part(BaseCollapsible.Root, "pui-collapsible"),
+    Root: part(BaseCollapsible.Root, 'pui-collapsible'),
     Trigger: CollapsibleTrigger,
     Panel: CollapsiblePanel,
 };
 const AvatarRoot = React.forwardRef(function AvatarRoot({ size, className, ...props }, ref) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": size, "data-ui-size": scheme, className: skin("pui-avatar", className) }));
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": size, "data-ui-size": scheme, className: skin('pui-avatar', className) }));
 });
 function Person() {
-    return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "8", r: "4" }), _jsx("path", { d: "M4 21v-2a8 8 0 0 1 16 0v2" })] }));
+    return (_jsxs("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '8', r: '4' }), _jsx("path", { d: 'M4 21v-2a8 8 0 0 1 16 0v2' })] }));
 }
 const AvatarFallback = React.forwardRef(function AvatarFallback({ children, className, ...props }, ref) {
-    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin("pui-avatar-fallback", className), children: children ?? _jsx(Person, {}) }));
+    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('pui-avatar-fallback', className), children: children ?? _jsx(Person, {}) }));
 });
 export const Avatar = {
     ...BaseAvatar,
     Root: AvatarRoot,
-    Status: part("span", "pui-avatar-status"),
+    Status: part('span', 'pui-avatar-status'),
     Fallback: AvatarFallback,
-    Image: part(BaseAvatar.Image, "pui-avatar-image"),
+    Image: part(BaseAvatar.Image, 'pui-avatar-image'),
 };
 export const Separator = React.forwardRef(function Separator({ inset = false, className, ...props }, ref) {
-    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin("pui-separator", className) }));
+    return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('pui-separator', className) }));
 });
 export const Link = React.forwardRef(function Link({ className, ...props }, ref) {
-    return (_jsx("a", { ...props, ref: ref, className: ["pui-link", className].filter(Boolean).join(" ") }));
+    return (_jsx("a", { ...props, ref: ref, className: ['pui-link', className].filter(Boolean).join(' ') }));
 });
-const BreadcrumbRoot = React.forwardRef(function BreadcrumbRoot({ className, "aria-label": label = "Breadcrumb", ...props }, ref) {
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["pui-breadcrumbs", className].filter(Boolean).join(" ") }));
+const BreadcrumbRoot = React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: ['pui-breadcrumbs', className].filter(Boolean).join(' ') }));
 });
-const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, role = "list", ...props }, ref) {
-    return (_jsx("ol", { ...props, role: role, ref: ref, className: ["pui-breadcrumb-list", className].filter(Boolean).join(" ") }));
+const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
+    return (_jsx("ol", { ...props, role: role, ref: ref, className: ['pui-breadcrumb-list', className].filter(Boolean).join(' ') }));
 });
 const BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, className: ["pui-breadcrumb-item", className].filter(Boolean).join(" ") }));
+    return (_jsx("li", { ...props, ref: ref, className: ['pui-breadcrumb-item', className].filter(Boolean).join(' ') }));
 });
 function BreadcrumbSeparator({ className, ...props }) {
-    return (_jsx("span", { ...props, className: ["pui-breadcrumb-separator", className]
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-separator', className]
             .filter(Boolean)
-            .join(" "), "aria-hidden": "true", children: _jsx(Chevron, {}) }));
+            .join(' '), "aria-hidden": 'true', children: _jsx(Chevron, {}) }));
 }
 function BreadcrumbCurrent({ className, ...props }) {
-    return (_jsx("span", { ...props, className: ["pui-breadcrumb-current", className]
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-current', className]
             .filter(Boolean)
-            .join(" "), "aria-current": "page" }));
+            .join(' '), "aria-current": 'page' }));
 }
 export const Breadcrumbs = {
     Root: BreadcrumbRoot,

package/dist/otp-field.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const OTPField: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Input: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/otp-field.js

@@ -1,45 +1,45 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
-import { part, skin } from "./parts.js";
-import { useResetValue, useRootRef } from "./form-state.js";
-const Root = React.forwardRef(function Root({ value, defaultValue = "", form, onValueChange, className, ...props }, forwardedRef) {
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
+import { part, skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
+const Root = React.forwardRef(function Root({ value, defaultValue = '', form, onValueChange, className, ...props }, forwardedRef) {
     const [element, ref] = useRootRef(forwardedRef);
     const [local, setLocal, revision] = useResetValue(value, defaultValue, element, form);
-    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin("pui-otp-field", className), onValueChange: (next, event) => {
+    return (_jsx(BaseOTPField.Root, { ...props, ref: ref, form: form, value: local, className: skin('pui-otp-field', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setLocal(next);
         } }, revision));
 });
 const Separator = React.forwardRef(function Separator({ className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Separator, { "aria-hidden": "true", ...props, ref: ref, className: skin("pui-otp-separator", className) }));
+    return (_jsx(BaseOTPField.Separator, { "aria-hidden": 'true', ...props, ref: ref, className: skin('pui-otp-separator', className) }));
 });
 // Preserve Base UI's DOM refs and user render composition while fixing native-validation ARIA.
 function SlotElement({ domProps, state, render, }) {
     const { ref, ...props } = domProps;
     return useRender({
-        defaultTagName: "input",
+        defaultTagName: 'input',
         ref,
-        render: typeof render === "function"
+        render: typeof render === 'function'
             ? (nextProps) => render(nextProps, state)
             : render,
         props: {
             ...props,
-            "aria-invalid": !state.disabled && state.valid === false ? true : props["aria-invalid"],
+            'aria-invalid': !state.disabled && state.valid === false ? true : props['aria-invalid'],
         },
     });
 }
 const Input = React.forwardRef(function Input({ render, className, ...props }, ref) {
-    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin("pui-input pui-otp-input", className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
+    return (_jsx(BaseOTPField.Input, { ...props, ref: ref, className: skin('pui-input pui-otp-input', className), render: (domProps, state) => (_jsx(SlotElement, { domProps: domProps, state: state, render: render })) }));
 });
 export const OTPField = {
     ...BaseOTPField,
     Root,
     Input,
-    Group: part("div", "pui-otp-group"),
+    Group: part('div', 'pui-otp-group'),
     Separator,
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/pagination.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<"nav">, "children"> & {
+import * as React from 'react';
+type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> & {
     page: number;
     pageCount: number;
     siblings?: 0 | 1 | 2;

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, {})] }));
 });