@surflane/ui 0.0.0-stage → 0.2.0

package/dist/navigation.js

@@ -0,0 +1,108 @@
+'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';
+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'),
+};
+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' }) }));
+}
+function AccordionRoot({ className, ...props }) {
+    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] }));
+});
+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 }) }));
+});
+export const Accordion = {
+    ...BaseAccordion,
+    Root: AccordionRoot,
+    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] }));
+});
+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 }) }));
+});
+export const Collapsible = {
+    ...BaseCollapsible,
+    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) }));
+});
+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' })] }));
+}
+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, {}) }));
+});
+export const Avatar = {
+    ...BaseAvatar,
+    Root: AvatarRoot,
+    Status: part('span', 'pui-avatar-status'),
+    Fallback: AvatarFallback,
+    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) }));
+});
+export const Link = React.forwardRef(function Link({ className, ...props }, ref) {
+    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 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(' ') }));
+});
+function BreadcrumbSeparator({ className, ...props }) {
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-separator', className]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": 'true', children: _jsx(Chevron, {}) }));
+}
+function BreadcrumbCurrent({ className, ...props }) {
+    return (_jsx("span", { ...props, className: ['pui-breadcrumb-current', className]
+            .filter(Boolean)
+            .join(' '), "aria-current": 'page' }));
+}
+export const Breadcrumbs = {
+    Root: BreadcrumbRoot,
+    List: BreadcrumbList,
+    Item: BreadcrumbItem,
+    Link,
+    Separator: BreadcrumbSeparator,
+    Current: BreadcrumbCurrent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AccordionPanel, AccordionRoot, AccordionTrigger, AvatarFallback, AvatarRoot, CollapsiblePanel, CollapsibleTrigger, };
+export const { Header: AccordionHeader, Item: AccordionItem } = Accordion;
+export const { Image: AvatarImage, Status: AvatarStatus } = Avatar;
+export const { Root: BreadcrumbsRoot, List: BreadcrumbsList, Item: BreadcrumbsItem, Link: BreadcrumbsLink, Separator: BreadcrumbsSeparator, Current: BreadcrumbsCurrent, } = Breadcrumbs;
+export const { Root: CollapsibleRoot } = Collapsible;
+export const { Indicator: TabsIndicator, List: TabsList, Panel: TabsPanel, Root: TabsRoot, Tab: TabsTab, } = Tabs;

package/dist/otp-field.d.ts

@@ -0,0 +1,12 @@
+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>>;
+    Group: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const OTPFieldInput: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>, OTPFieldRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/otp-field").OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, OTPFieldSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, OTPFieldGroup: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/otp-field.js

@@ -0,0 +1,46 @@
+'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) {
+    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) => {
+            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) }));
+});
+// 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',
+        ref,
+        render: typeof render === 'function'
+            ? (nextProps) => render(nextProps, state)
+            : render,
+        props: {
+            ...props,
+            '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 })) }));
+});
+export const OTPField = {
+    ...BaseOTPField,
+    Root,
+    Input,
+    Group: part('div', 'pui-otp-group'),
+    Separator,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Input: OTPFieldInput, Root: OTPFieldRoot, Separator: OTPFieldSeparator, Group: OTPFieldGroup, } = OTPField;

package/dist/pagination.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+type CommonPaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> & {
+    page: number;
+    pageCount: number;
+    siblings?: 0 | 1 | 2;
+    disabled?: boolean;
+    labels?: {
+        previous?: string;
+        next?: string;
+        page?: (page: number) => string;
+        more?: string;
+        summary?: (page: number, pageCount: number) => string;
+    };
+};
+export type PaginationProps = CommonPaginationProps & ({
+    getPageHref: (page: number) => string;
+    onPageChange?: never;
+} | {
+    getPageHref?: never;
+    onPageChange: (page: number) => void;
+});
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/pagination.js

@@ -0,0 +1,44 @@
+'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';
+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' }) }));
+}
+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;
+    if (count < 2)
+        return null;
+    const current = Math.min(count, Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1));
+    const reach = Math.min(2, Math.max(0, Math.floor(siblings)));
+    const pages = new Set([1, count]);
+    for (let n = Math.max(1, current - reach); n <= Math.min(count, current + reach); n++)
+        pages.add(n);
+    const sorted = [...pages].sort((a, b) => a - b), items = [];
+    sorted.forEach((n, i) => {
+        const previous = sorted[i - 1];
+        if (i > 0 && n - previous === 2)
+            items.push(previous + 1);
+        else if (i > 0 && n - previous > 2)
+            items.push(`gap-${previous}`);
+        items.push(n);
+    });
+    function control(target, name, children, boundary = false) {
+        const inactive = disabled || boundary;
+        const currentPage = !boundary && target === current && typeof children === 'number';
+        const attributes = {
+            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: () => {
+                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)] }));
+});

package/dist/panels.d.ts

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

package/dist/panels.js

@@ -0,0 +1,99 @@
+'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';
+const SheetSide = React.createContext({
+    side: 'right',
+    modal: true,
+});
+const DrawerSide = React.createContext({
+    side: 'bottom',
+    modal: true,
+});
+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' }) }));
+}
+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 }) {
+    const direction = {
+        left: 'left',
+        right: 'right',
+        top: 'up',
+        bottom: 'down',
+    };
+    return (_jsx(DrawerSide.Provider, { value: { side, modal }, children: _jsx(BaseDrawer.Root, { ...props, modal: modal, swipeDirection: direction[side] }) }));
+}
+const 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] }) })] }) }));
+});
+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 })] }) })] }) }) }));
+});
+function Header({ className, ...props }) {
+    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) }));
+});
+function Footer({ className, ...props }) {
+    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) }));
+}
+function SheetDescription({ className, ...props }) {
+    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) }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(BaseDrawer.Description, { ...props, className: cx('pui-panel-description', typeof className === 'string' ? className : undefined) }));
+}
+export const Sheet = {
+    ...BaseDialog,
+    Root: SheetRoot,
+    Content: SheetContent,
+    Header,
+    Body,
+    Footer,
+    Title: SheetTitle,
+    Description: SheetDescription,
+};
+export const Drawer = {
+    ...BaseDrawer,
+    Root: DrawerRoot,
+    Content: DrawerContent,
+    PrimitiveContent: BaseDrawer.Content,
+    Header,
+    Body,
+    Footer,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle, SheetDescription, SheetRoot, SheetTitle, SheetContent, };
+export const { Backdrop: DrawerBackdrop, Close: DrawerClose, Handle: DrawerHandle, Indent: DrawerIndent, IndentBackground: DrawerIndentBackground, Popup: DrawerPopup, Portal: DrawerPortal, Provider: DrawerProvider, SwipeArea: DrawerSwipeArea, Trigger: DrawerTrigger, Viewport: DrawerViewport, VirtualKeyboardProvider: DrawerVirtualKeyboardProvider, PrimitiveContent: DrawerPrimitiveContent, Header: DrawerHeader, Body: DrawerBody, Footer: DrawerFooter, } = Drawer;
+export const { Backdrop: SheetBackdrop, Close: SheetClose, Handle: SheetHandle, Popup: SheetPopup, Portal: SheetPortal, Trigger: SheetTrigger, Viewport: SheetViewport, Header: SheetHeader, Body: SheetBody, Footer: SheetFooter, } = Sheet;

package/dist/parts.d.ts

@@ -0,0 +1,9 @@
+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 {
+    className?: unknown;
+}>(Component: React.ElementType, base: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, "size"> & {
+    size?: ComponentSize;
+}> & React.RefAttributes<Element>>;

package/dist/parts.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(' ');
+}
+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 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

@@ -0,0 +1,21 @@
+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;
+    Trigger: BasePopover.Trigger;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    createHandle: typeof BasePopover.createHandle;
+    Handle: typeof BasePopover.Handle;
+};
+export { PopoverContent };
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, PopoverDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, PopoverHandle: typeof BasePopover.Handle, PopoverPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverRoot: typeof BasePopover.Root, PopoverTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, PopoverTrigger: BasePopover.Trigger, PopoverViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover.js

@@ -0,0 +1,13 @@
+'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 }) {
+    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) }) }));
+}
+export const Popover = { ...BasePopover, Content: PopoverContent };
+// Flat names for React Server Components, which cannot dot into client exports.
+export { PopoverContent };
+export const { Arrow: PopoverArrow, Backdrop: PopoverBackdrop, Close: PopoverClose, Description: PopoverDescription, Handle: PopoverHandle, Popup: PopoverPopup, Portal: PopoverPortal, Positioner: PopoverPositioner, Root: PopoverRoot, Title: PopoverTitle, Trigger: PopoverTrigger, Viewport: PopoverViewport, } = Popover;

package/dist/scroll-area.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    label?: string;
+    rootClassName?: string;
+    rootStyle?: React.CSSProperties;
+    orientation?: "horizontal" | "vertical" | "both";
+    scrollChain?: "auto" | "contain";
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area.js

@@ -0,0 +1,39 @@
+'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) {
+    const dragPointer = React.useRef(null);
+    const clearDrag = (event) => {
+        if (dragPointer.current !== event.pointerId)
+            return;
+        dragPointer.current = null;
+        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;
+            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);
+        }, onPointerLeave: (event) => {
+            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');
+            if (event.button === 0 && bar?.parentElement === event.currentTarget) {
+                dragPointer.current = event.pointerId;
+                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]
+                    .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,
+                    ...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, {})] }));
+});

package/dist/select.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export type SelectOption = {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    options: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    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'];
+};
+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;