@surflane/ui 0.2.0 → 0.4.0

package/dist/input-extensions.js

@@ -15,10 +15,10 @@ const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defa
                 setQuery(next);
         }, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 };
-const AutoTrigger = React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
+const AutoTrigger = /* @__PURE__ */ React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
     return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
 });
-const AutoClear = React.forwardRef(function AutoClear(props, ref) {
+const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref) {
     return _jsx(Combobox.Clear, { "aria-label": 'Clear input', ...props, ref: ref });
 });
 export const Autocomplete = {
@@ -35,9 +35,9 @@ export const Autocomplete = {
     GroupLabel: Combobox.GroupLabel,
     Clear: AutoClear,
     Trigger: AutoTrigger,
-    InputGroup: part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
-    Item: part(BaseAutocomplete.Item, 'pui-combobox-item'),
-    Separator: part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
+    InputGroup: /* @__PURE__ */ part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
+    Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'pui-combobox-item'),
+    Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
 };
 function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
     const [element, attach] = useRootRef(ref);
@@ -51,12 +51,12 @@ function SliderRoot({ value, defaultValue, onValueChange, ref, className, form,
 export const Slider = {
     ...BaseSlider,
     Root: SliderRoot,
-    Label: part(BaseSlider.Label, 'pui-slider-label'),
-    Value: part(BaseSlider.Value, 'pui-slider-value'),
-    Control: part(BaseSlider.Control, 'pui-slider-control'),
-    Track: part(BaseSlider.Track, 'pui-slider-track'),
-    Indicator: part(BaseSlider.Indicator, 'pui-slider-indicator'),
-    Thumb: part(BaseSlider.Thumb, 'pui-slider-thumb'),
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { AutocompleteRoot, SliderRoot };

package/dist/input.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { Input as BaseInput } from '@base-ui/react/input';
 const cx = (...v) => v.filter(Boolean).join(' ');
-export const Input = React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
+export const Input = /* @__PURE__ */ React.forwardRef(function Input({ className, leadingIcon, wrapperClassName, size, ...props }, ref) {
     const scheme = useComponentSize(typeof size === 'string' ? size : undefined);
     return (_jsxs("span", { "data-ui-size": scheme, className: cx('pui-control', wrapperClassName), "data-leading-icon": leadingIcon ? '' : undefined, "data-disabled": props.disabled || undefined, children: [leadingIcon && (_jsx("span", { className: 'pui-control-icon control-icon', "aria-hidden": 'true', children: leadingIcon })), _jsx(BaseInput, { ...props, size: typeof size === 'number' ? size : undefined, ref: ref, className: cx('pui-input', className) })] }));
 });

package/dist/markdown.js

@@ -20,7 +20,7 @@ function visit(node, callback) {
 }
 /** CommonMark + GFM. HTML stays disabled, URLs use react-markdown's safe default.
  * Fetching, permissions, frontmatter, MDX and script execution are caller concerns. */
-export const Markdown = React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
+export const Markdown = /* @__PURE__ */ React.forwardRef(function Markdown({ source, label = 'Markdown content', headingLevel = 2, codeWrap = false, className, ...props }, ref) {
     const prefix = `md-${React.useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
     const headings = React.useMemo(() => () => (tree) => {
         const counts = new Map();
@@ -91,7 +91,8 @@ export const Markdown = React.forwardRef(function Markdown({ source, label = 'Ma
                 const child = React.Children.toArray(children)[0];
                 if (!React.isValidElement(child))
                     return _jsx("pre", { children: children });
-                const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ?? 'text';
+                const language = /(?:^|\s)language-([^\s]+)/.exec(child.props.className ?? '')?.[1] ??
+                    'text';
                 const code = String(child.props.children ?? '').replace(/\n$/, '');
                 return (_jsx(CodeBlock, { code: code, language: language, wrap: codeWrap, label: `${label}: code at line ${node?.position?.start.line ?? 1}` }));
             },

package/dist/menu.js

@@ -3,21 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { skin, part } from './parts.js';
-const MenuPopup = part(BaseMenu.Popup, 'pui-menu');
-const MenuPositioner = part(BaseMenu.Positioner, 'pui-positioner');
-const MenuContent = React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
+const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'pui-menu');
+const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'pui-positioner');
+const MenuContent = /* @__PURE__ */ React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
     return (_jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }));
 });
-const MenuTrigger = React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
+const MenuTrigger = /* @__PURE__ */ React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
     return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-menu-trigger', className) }));
 });
-const CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
+const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
     return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) })) }));
 });
-const RadioIndicator = React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
+const RadioIndicator = /* @__PURE__ */ React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
     return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
 });
-const SubmenuTrigger = React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
+const SubmenuTrigger = /* @__PURE__ */ React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
     return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('pui-menu-item pui-menu-submenu-trigger', className), children: [children, indicator === false
                 ? null
                 : (indicator ?? (_jsx("svg", { className: 'pui-submenu-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) })))] }));
@@ -31,13 +31,13 @@ export const Menu = {
     CheckboxItemIndicator: CheckboxIndicator,
     RadioItemIndicator: RadioIndicator,
     SubmenuTrigger,
-    Item: part(BaseMenu.Item, 'pui-menu-item'),
-    LinkItem: part(BaseMenu.LinkItem, 'pui-menu-item'),
-    CheckboxItem: part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
-    RadioItem: part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
-    GroupLabel: part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
-    Separator: part(BaseMenu.Separator, 'pui-menu-separator'),
-    Input: part(BaseMenu.Input, 'pui-input'),
+    Item: /* @__PURE__ */ part(BaseMenu.Item, 'pui-menu-item'),
+    LinkItem: /* @__PURE__ */ part(BaseMenu.LinkItem, 'pui-menu-item'),
+    CheckboxItem: /* @__PURE__ */ part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
+    RadioItem: /* @__PURE__ */ part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
+    GroupLabel: /* @__PURE__ */ part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
+    Separator: /* @__PURE__ */ part(BaseMenu.Separator, 'pui-menu-separator'),
+    Input: /* @__PURE__ */ part(BaseMenu.Input, 'pui-input'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent };

package/dist/messages.js

@@ -4,22 +4,22 @@ import * as React from 'react';
 import { useToneTransition } from './tone-transition.js';
 import { part } from './parts.js';
 import { StatusIcon } from './status.js';
-const MessageRoot = React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
+const MessageRoot = /* @__PURE__ */ React.forwardRef(function MessageRoot({ tone = 'neutral', className, ...props }, ref) {
     const elementRef = useToneTransition(tone, ref);
     return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: ['pui-message', className].filter(Boolean).join(' ') }));
 });
-const MessageIcon = React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
+const MessageIcon = /* @__PURE__ */ React.forwardRef(function MessageIcon({ tone = 'neutral', children, className, ...props }, ref) {
     return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-message-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
 });
 export const InlineMessage = {
     Root: MessageRoot,
     Icon: MessageIcon,
-    Content: part('div', 'pui-message-content'),
-    Title: part('strong', 'pui-message-title'),
-    Description: part('p', 'pui-message-description'),
-    Actions: part('div', 'pui-message-actions'),
+    Content: /* @__PURE__ */ part('div', 'pui-message-content'),
+    Title: /* @__PURE__ */ part('strong', 'pui-message-title'),
+    Description: /* @__PURE__ */ part('p', 'pui-message-description'),
+    Actions: /* @__PURE__ */ part('div', 'pui-message-actions'),
 };
-const EmptyTitle = React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
+const EmptyTitle = /* @__PURE__ */ React.forwardRef(function EmptyTitle({ level = 3, className, ...props }, ref) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
@@ -27,11 +27,11 @@ const EmptyTitle = React.forwardRef(function EmptyTitle({ level = 3, className,
     });
 });
 export const EmptyState = {
-    Root: part('div', 'pui-empty'),
-    Icon: part('div', 'pui-empty-icon'),
+    Root: /* @__PURE__ */ part('div', 'pui-empty'),
+    Icon: /* @__PURE__ */ part('div', 'pui-empty-icon'),
     Title: EmptyTitle,
-    Description: part('p', 'pui-empty-description'),
-    Actions: part('div', 'pui-empty-actions'),
+    Description: /* @__PURE__ */ part('p', 'pui-empty-description'),
+    Actions: /* @__PURE__ */ part('div', 'pui-empty-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: EmptyStateRoot, Icon: EmptyStateIcon, Title: EmptyStateTitle, Description: EmptyStateDescription, Actions: EmptyStateActions, } = EmptyState;

package/dist/navigation-menu.js

@@ -7,7 +7,7 @@ function Root(props) {
     const { className, orientation = 'horizontal', ...rest } = props;
     return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('pui-navigation-menu', className) }));
 }
-const Trigger = React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
+const Trigger = /* @__PURE__ */ React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
     return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-navigation-trigger', className), children: [children, indicator === false
                 ? null
                 : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) }) })))] }));
@@ -16,14 +16,14 @@ export const NavigationMenu = {
     ...BaseNavigationMenu,
     Root,
     Trigger,
-    List: part(BaseNavigationMenu.List, 'pui-navigation-list'),
-    Item: part(BaseNavigationMenu.Item, 'pui-navigation-item'),
-    Link: part(BaseNavigationMenu.Link, 'pui-navigation-link'),
-    Content: part(BaseNavigationMenu.Content, 'pui-navigation-content'),
-    Positioner: part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
-    Popup: part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
-    Viewport: part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
-    Icon: React.forwardRef(function Icon({ children, className, ...props }, ref) {
+    List: /* @__PURE__ */ part(BaseNavigationMenu.List, 'pui-navigation-list'),
+    Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'pui-navigation-item'),
+    Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'pui-navigation-link'),
+    Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'pui-navigation-content'),
+    Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
+    Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
+    Viewport: /* @__PURE__ */ part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
+    Icon: /* @__PURE__ */ React.forwardRef(function Icon({ children, className, ...props }, ref) {
         return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
     }),
 };

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)