@surflane/ui 0.3.0 → 0.4.0

package/dist/navigation.d.ts

@@ -1,70 +1,4 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
-import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-export declare const Tabs: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-};
-declare function AccordionRoot<Value = string>({ className, ...props }: BaseAccordion.Root.Props<Value>): React.JSX.Element;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
-    indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-declare const AccordionPanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Accordion: {
-    Root: typeof AccordionRoot;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Header: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLHeadingElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
-        indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Collapsible: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-        indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
-    size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export declare const Avatar: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
-        size?: ComponentSizeAlias;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Status: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Fallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Image: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLImageElement>>;
-};
 export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -79,29 +13,5 @@ export declare const Breadcrumbs: {
     Separator: typeof BreadcrumbSeparator;
     Current: typeof BreadcrumbCurrent;
 };
-export { AccordionPanel, AccordionRoot, AccordionTrigger, AvatarFallback, AvatarRoot, CollapsiblePanel, CollapsibleTrigger, };
-export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLHeadingElement>>, AccordionItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLImageElement>>, AvatarStatus: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
 export declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, BreadcrumbsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>, BreadcrumbsItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>, BreadcrumbsLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>, TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsPanel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsTab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/navigation.js

@@ -1,84 +1,22 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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) {
+import { Chevron } from './chevron.js';
+import { skin } from './parts.js';
+export const Separator = /* @__PURE__ */ 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) {
+export const Link = /* @__PURE__ */ 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) {
+const BreadcrumbRoot = /* @__PURE__ */ 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) {
+const BreadcrumbList = /* @__PURE__ */ 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) {
+const BreadcrumbItem = /* @__PURE__ */ 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 }) {
@@ -100,9 +38,4 @@ export const Breadcrumbs = {
     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.js

@@ -5,7 +5,7 @@ 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 Root = /* @__PURE__ */ 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) => {
@@ -14,7 +14,7 @@ const Root = React.forwardRef(function Root({ value, defaultValue = '', form, on
                 setLocal(next);
         } }, revision));
 });
-const Separator = React.forwardRef(function Separator({ className, ...props }, ref) {
+const Separator = /* @__PURE__ */ 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.
@@ -32,14 +32,14 @@ function SlotElement({ domProps, state, render, }) {
         },
     });
 }
-const Input = React.forwardRef(function Input({ render, className, ...props }, ref) {
+const Input = /* @__PURE__ */ 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'),
+    Group: /* @__PURE__ */ part('div', 'pui-otp-group'),
     Separator,
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/pagination.js

@@ -5,7 +5,7 @@ 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) {
+export const Pagination = /* @__PURE__ */ 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;

package/dist/panels.js

@@ -1,14 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { skin } from './parts.js';
 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({
+const SheetSide = /* @__PURE__ */ React.createContext({
     side: 'right',
     modal: true,
 });
-const DrawerSide = React.createContext({
+const DrawerSide = /* @__PURE__ */ React.createContext({
     side: 'bottom',
     modal: true,
 });
@@ -28,10 +29,10 @@ function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
     };
     return (_jsx(DrawerSide.Provider, { value: { side, modal }, children: _jsx(BaseDrawer.Root, { ...props, modal: modal, swipeDirection: direction[side] }) }));
 }
-const SheetContent = React.forwardRef(function SheetContent({ size, closeLabel = 'Close panel', className, children, ...props }, ref) {
+const SheetContent = /* @__PURE__ */ 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
+    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: skin('pui-panel', className), "data-side": side, "data-size": size
                             ? normalizeSize(size) === 'small'
                                 ? 'sm'
                                 : normalizeSize(size) === 'large'
@@ -39,11 +40,11 @@ const SheetContent = React.forwardRef(function SheetContent({ size, closeLabel =
                                     : '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 = /* @__PURE__ */ 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
+    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: skin('pui-panel pui-drawer', className), "data-side": side, "data-size": size
                                 ? normalizeSize(size) === 'small'
                                     ? 'sm'
                                     : normalizeSize(size) === 'large'
@@ -54,23 +55,23 @@ const DrawerContent = React.forwardRef(function DrawerContent({ size, closeLabel
 function Header({ className, ...props }) {
     return _jsx("div", { ...props, className: cx('pui-panel-header', className) });
 }
-const Body = React.forwardRef(function Body({ className, ...props }, ref) {
+const Body = /* @__PURE__ */ 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) }));
+    return (_jsx(BaseDialog.Title, { ...props, className: skin('pui-panel-title', className) }));
 }
 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: skin('pui-panel-description', className) }));
 }
 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: skin('pui-panel-title', className) }));
 }
 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: skin('pui-panel-description', className) }));
 }
 export const Sheet = {
     ...BaseDialog,

package/dist/parts.d.ts

@@ -1,5 +1,8 @@
 import { type ComponentSize } from './sizing.js';
 import * as React from 'react';
+/** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
+ * spellings meet the same CSS; other values such as xs or icon pass through. */
+export declare function sizeName<Size extends string>(size?: Size): ComponentSize | Size | undefined;
 /** 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,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ComponentSizeContext, useComponentSize, } from './sizing.js';
+import { ComponentSizeContext, normalizeSize, useComponentSize, } from './sizing.js';
 import * as React from 'react';
+/** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
+ * spellings meet the same CSS; other values such as xs or icon pass through. */
+export function sizeName(size) {
+    return size === 'sm' || size === 'md' || size === 'lg'
+        ? normalizeSize(size)
+        : size;
+}
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
     if (typeof custom === 'function')

package/dist/popover.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { skin } from './parts.js';
 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: skin('pui-popover', className) }) }));
 }
 export const Popover = { ...BasePopover, Content: PopoverContent };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/scroll-area.js

@@ -2,7 +2,7 @@
 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) {
+export const ScrollArea = /* @__PURE__ */ 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)

package/dist/select.js

@@ -3,6 +3,7 @@ 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';
+import { sizeName } from './parts.js';
 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' }) }));
@@ -40,7 +41,7 @@ export function Select({ options, value, defaultValue, onValueChange, className,
     }, [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) => {
+    return (_jsx("span", { className: cx('pui-select control-shell select-control', className), "data-size": sizeName(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) => {
@@ -70,7 +71,7 @@ function optionList(children) {
     });
 }
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export const NativeSelect = React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
+export const NativeSelect = /* @__PURE__ */ 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) => {

package/dist/sizing.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-export const ComponentSizeContext = React.createContext(undefined);
+export const ComponentSizeContext = /* @__PURE__ */ React.createContext(undefined);
 export function normalizeSize(size) {
     return size === 'sm'
         ? 'small'

package/dist/status.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { useToneTransition } from './tone-transition.js';
-export const Badge = React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
+export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
     const scheme = useComponentSize(size);
     const elementRef = useToneTransition(tone, ref);
     return (_jsxs("span", { ...props, ref: elementRef, className: ['pui-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
@@ -12,6 +12,6 @@ export function StatusIcon({ tone }) {
     return (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: tone === 'success' ? (_jsx("path", { d: 'm5 12 4 4L19 6' })) : tone === 'caution' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })) : tone === 'danger' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })) : tone === 'progress' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })) }));
 }
 /** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
+export const StatusBadge = /* @__PURE__ */ React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
     return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
 });

package/dist/syntax-context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { SyntaxToken } from './syntax-engine.js';
+export type SyntaxEngine = {
+    highlightCode(code: string, language: string): Promise<SyntaxToken[][] | null>;
+};
+/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+export declare const SyntaxEngineContext: React.Context<(() => Promise<SyntaxEngine>) | null>;

package/dist/syntax-context.js

@@ -0,0 +1,4 @@
+'use client';
+import * as React from 'react';
+/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+export const SyntaxEngineContext = /* @__PURE__ */ React.createContext(null);

package/dist/syntax-highlighter.d.ts

@@ -7,7 +7,10 @@ export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>
     label?: string;
     wrap?: boolean;
 };
-/** Rendering remains selectable React text; it never inserts executable HTML. */
+/**
+ * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
+ * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
+ */
 export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
     code: string;
     language?: string;

package/dist/syntax-highlighter.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea } from './scroll-area.js';
+import { SyntaxEngineContext } from './syntax-context.js';
 export const syntaxLanguages = [
     'tsx',
     'jsx',
@@ -29,18 +30,23 @@ const aliases = {
     plaintext: 'text',
     txt: 'text',
 };
-/** Rendering remains selectable React text; it never inserts executable HTML. */
-export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
+/**
+ * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
+ * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
+ */
+export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
+    const load = React.useContext(SyntaxEngineContext);
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
     const [result, setResult] = React.useState();
     React.useEffect(() => {
         let current = true;
-        if (lang === 'text' ||
+        if (!load ||
+            lang === 'text' ||
             !syntaxLanguages.includes(lang) ||
             code.length > 50000)
             return;
-        import('./syntax-engine.js')
+        load()
             .then((engine) => engine.highlightCode(code, lang))
             .then((tokens) => {
             if (current)
@@ -53,7 +59,7 @@ export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ c
         return () => {
             current = false;
         };
-    }, [code, lang]);
+    }, [code, lang, load]);
     const tokens = result?.code === code && result.language === lang ? result.tokens : null;
     const eols = code.match(/\r\n|\n|\r/g) ?? [];
     const valid = tokens && tokens.length === eols.length + 1;

package/dist/syntax-highlighting.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
+ * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ */
+export declare function SyntaxHighlighting({ children, }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/syntax-highlighting.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SyntaxEngineContext } from './syntax-context.js';
+// The engine and each grammar load on first use, in their own chunks.
+const load = () => import('./syntax-engine.js');
+/**
+ * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
+ * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ */
+export function SyntaxHighlighting({ children, }) {
+    return (_jsx(SyntaxEngineContext.Provider, { value: load, children: children }));
+}

package/dist/tabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const Tabs: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Panel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsPanel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsTab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>;

package/dist/tabs.js

@@ -0,0 +1,13 @@
+'use client';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { part } from './parts.js';
+export const Tabs = {
+    ...BaseTabs,
+    Root: /* @__PURE__ */ part(BaseTabs.Root, 'pui-tabs'),
+    List: /* @__PURE__ */ part(BaseTabs.List, 'pui-tabs-list'),
+    Tab: /* @__PURE__ */ part(BaseTabs.Tab, 'pui-tabs-tab'),
+    Panel: /* @__PURE__ */ part(BaseTabs.Panel, 'pui-tabs-panel'),
+    Indicator: /* @__PURE__ */ part(BaseTabs.Indicator, 'pui-tabs-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Indicator: TabsIndicator, List: TabsList, Panel: TabsPanel, Root: TabsRoot, Tab: TabsTab, } = Tabs;