@surflane/ui 0.11.0 → 0.13.0

package/dist/icon.js

@@ -23,6 +23,7 @@ const shapes = {
     'arrow-back': _jsx("path", { d: 'M20 12H4m7-7-7 7 7 7' }),
     'arrow-up': _jsx("path", { d: 'M12 19V5m-6 6 6-6 6 6' }),
     'arrow-down': _jsx("path", { d: 'M12 5v14m-6-6 6 6 6-6' }),
+    refresh: _jsx("path", { d: 'M20 12a8 8 0 1 1-2.34-5.66M20 4v4h-4' }),
     sort: _jsx("path", { d: 'm8 9 4-4 4 4m-8 6 4 4 4-4' }),
     'external-link': (_jsx(_Fragment, { children: _jsx("path", { d: 'M14 3h7v7m0-7L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5' }) })),
     copy: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '13', rx: '2' }), _jsx("path", { d: 'M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3' })] })),
@@ -31,6 +32,20 @@ const shapes = {
     calendar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '5', width: '18', height: '16', rx: '3' }), _jsx("path", { d: 'M7 3v4m10-4v4M3 11h18m-12 4h2' })] })),
     user: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '8', r: '4' }), _jsx("path", { d: 'M4 21v-2a8 8 0 0 1 16 0v2' })] })),
     settings: (_jsx(_Fragment, { children: _jsx("path", { d: 'M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-6 0v6' }) })),
+    // What a product runs on: machines, storage, links, power and model tokens.
+    server: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '7', rx: '2' }), _jsx("rect", { x: '3', y: '13', width: '18', height: '7', rx: '2' }), _jsx("path", { d: 'M7 7.5h3m-3 9h3' })] })),
+    database: (_jsxs(_Fragment, { children: [_jsx("ellipse", { cx: '12', cy: '6', rx: '8', ry: '3' }), _jsx("path", { d: 'M4 6v12c0 1.66 3.58 3 8 3s8-1.34 8-3V6M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3' })] })),
+    disk: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M3 14 5.6 5.4A2 2 0 0 1 7.5 4h9a2 2 0 0 1 1.9 1.4L21 14' }), _jsx("rect", { x: '3', y: '14', width: '18', height: '6', rx: '2' }), _jsx("path", { d: 'M7 17h2' })] })),
+    chip: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '6', y: '6', width: '12', height: '12', rx: '2' }), _jsx("rect", { x: '9.5', y: '9.5', width: '5', height: '5', rx: '1' }), _jsx("path", { d: 'M9.5 2.5V6m5-3.5V6m-5 12v3.5m5-3.5v3.5M2.5 9.5H6m-3.5 5H6m12-5h3.5M18 14.5h3.5' })] })),
+    memory: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '2', y: '7', width: '20', height: '10', rx: '2' }), _jsx("path", { d: 'M6 17v3m4-3v3m4-3v3m4-3v3M7 10.5v3m5-3v3m5-3v3' })] })),
+    network: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '9', y: '3', width: '6', height: '5', rx: '1' }), _jsx("rect", { x: '3', y: '16', width: '6', height: '5', rx: '1' }), _jsx("rect", { x: '15', y: '16', width: '6', height: '5', rx: '1' }), _jsx("path", { d: 'M12 8v4M6 16v-4h12v4' })] })),
+    bolt: _jsx("path", { d: 'M13 2.5 4.5 13.5H12l-1 8 8.5-11H12l1-8Z' }),
+    token: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 7.8 4.5v9L12 21l-7.8-4.5v-9L12 3Z' }), _jsx("circle", { cx: '12', cy: '12', r: '3' })] })),
+    thermometer: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M14 14.5V5a2 2 0 0 0-4 0v9.5a4 4 0 1 0 4 0Z' }), _jsx("path", { d: 'M12 9v7.5' })] })),
+    // View controls: keep an item in place, and show a list or a grid.
+    pin: _jsx("path", { d: 'M9 3h6l-1 6 4 4H6l4-4-1-6ZM12 13v8' }),
+    list: _jsx("path", { d: 'M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01' }),
+    grid: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '4', y: '4', width: '6', height: '6', rx: '1' }), _jsx("rect", { x: '14', y: '4', width: '6', height: '6', rx: '1' }), _jsx("rect", { x: '4', y: '14', width: '6', height: '6', rx: '1' }), _jsx("rect", { x: '14', y: '14', width: '6', height: '6', rx: '1' })] })),
 };
 export const iconNames = Object.keys(shapes);
 // These point along the reading direction, so they mirror in right-to-left text.
@@ -39,9 +54,7 @@ const directional = new Set([
     'chevron-back',
     'arrow-back',
 ]);
-// The short spellings map by pixel size: sm was 16px, which is now the default.
-const iconSizes = { sm: 'default', md: 'large', lg: 'lg' };
 /** Static SVG only. Actions, focus, accessible button names and hit targets belong to the parent control. */
 export const Icon = function Icon({ name, size, decorative = true, label, className, ref, ...props }) {
-    return (_jsx("svg", { ...props, ref: ref, className: cx('surf-icon', className), "data-size": size === 'sm' || size === 'md' || size === 'lg' ? iconSizes[size] : size, "data-directional": directional.has(name) ? 'true' : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
+    return (_jsx("svg", { ...props, ref: ref, className: cx('surf-icon', className), "data-size": size, "data-directional": directional.has(name) ? 'true' : undefined, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": decorative ? true : undefined, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, children: shapes[name] }));
 };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Button, type ButtonVariant, type ButtonSize, type ButtonProps, LinkButton, type LinkButtonProps, } from './button.js';
 export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarRoot, ToolbarSeparator, } from './toolbar.js';
 export { Input } from './input.js';
-export { Select, type SelectOption, type SelectGroup, type SelectProps, } from './select.js';
+export { Select, type SelectOption, type SelectGroup, type SelectProps, type SelectMultipleProps, type SelectMultipleLabels, } from './select.js';
 export { NativeSelect, NativeSelectOption, NativeSelectOptGroup, } from './native-select.js';
 export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, FieldValidity, } from './field.js';
 export { Fieldset, FieldsetLegend, FieldsetRoot } from './fieldset.js';
@@ -32,7 +32,7 @@ export { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription,
 export { Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, } from './tabs.js';
 export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, } from './accordion.js';
 export { Collapsible, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, } from './collapsible.js';
-export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, } from './navigation-menu.js';
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuLinkTitle, NavigationMenuLinkDescription, } from './navigation-menu.js';
 export { Menubar } from './menubar.js';
 export { Link, type LinkProps } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
@@ -42,11 +42,14 @@ export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from '
 export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from './badge.js';
 export { Card, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './card.js';
 export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, type TableDensity, type TableVariant, type TableSort, useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table.js';
-export { CodeBlock, type CodeBlockProps, type CodeBlockLabels } from './code.js';
+export { CodeBlock, CopyButton, type CodeBlockProps, type CodeBlockLabels, type CopyButtonProps, type CopyButtonLabels, } from './code.js';
 export { SyntaxHighlighter, syntaxLanguages, type SyntaxHighlighterProps, } from './syntax-highlighter.js';
 export { List, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './list.js';
-export { Stat, StatRoot, StatLabel, StatValue, StatChange, StatCaption, type StatChangeProps, type StatDirection, } from './stat.js';
+export { Stat, StatRoot, StatLabel, StatValue, StatChange, StatCaption, StatStatus, StatGroup, type StatChangeProps, type StatStatusProps, type StatGroupProps, type StatDirection, } from './stat.js';
 export { Sparkline, type SparklineProps, type SparklineTrend, } from './sparkline.js';
+export { BarList, type BarListProps, type BarListItem } from './bar-list.js';
+export { Dashboard, DashboardRoot, DashboardPanel, type DashboardRootProps, type DashboardPanelProps, type DashboardPanelLabels, } from './dashboard.js';
+export { TimeRangePicker, timeRangeOptions, refreshIntervalOptions, type TimeRangePickerProps, type TimeRangePickerLabels, type TimeRangeOption, } from './time-range-picker.js';
 export { ScrollArea } from './scroll-area.js';
 export { Separator } from './separator.js';
 export { Progress, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, } from './progress.js';
@@ -60,9 +63,9 @@ export { Container, Stack, Inline, Grid, GridItem, Surface, type SurfaceKind, ty
 export { Heading, Text, Prose } from './typography.js';
 export { formatNumber, formatCurrency, formatPercent, missingValue, type NumberFormatOptions, } from './format.js';
 export { Icon, iconNames, type IconName, type IconProps } from './icon.js';
-export { SizeProvider, type ComponentSize, type ComponentSizeAlias, } from './sizing.js';
+export { SizeProvider, type ComponentDensity, type ComponentSize, type ComponentSizeAlias, } from './sizing.js';
 export { DirectionProvider } from '@base-ui/react/direction-provider';
 export { Slot } from './slot.js';
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, type AppShellRootProps, type AppShellSidebarToggleProps, type AppShellSidebarToggleLabels, AppShellBrand, type AppShellBrandProps, AppShellNav, type AppShellNavProps, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, type AppShellLinkProps, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellMenuTrigger, type AppShellRootProps, type AppShellSidebarToggleProps, type AppShellSidebarToggleLabels, type AppShellMenuTriggerProps, AppShellBrand, type AppShellBrandProps, AppShellNav, type AppShellNavProps, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, type AppShellLinkProps, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';

package/dist/index.js

@@ -41,7 +41,7 @@ export { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription,
 export { Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, } from './tabs.js';
 export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, } from './accordion.js';
 export { Collapsible, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, } from './collapsible.js';
-export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, } from './navigation-menu.js';
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuLinkTitle, NavigationMenuLinkDescription, } from './navigation-menu.js';
 export { Menubar } from './menubar.js';
 export { Link } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
@@ -52,11 +52,14 @@ export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from '
 export { Badge, StatusBadge, } from './badge.js';
 export { Card, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './card.js';
 export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, useTableSelection, } from './table.js';
-export { CodeBlock } from './code.js';
+export { CodeBlock, CopyButton, } from './code.js';
 export { SyntaxHighlighter, syntaxLanguages, } from './syntax-highlighter.js';
 export { List, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './list.js';
-export { Stat, StatRoot, StatLabel, StatValue, StatChange, StatCaption, } from './stat.js';
+export { Stat, StatRoot, StatLabel, StatValue, StatChange, StatCaption, StatStatus, StatGroup, } from './stat.js';
 export { Sparkline, } from './sparkline.js';
+export { BarList } from './bar-list.js';
+export { Dashboard, DashboardRoot, DashboardPanel, } from './dashboard.js';
+export { TimeRangePicker, timeRangeOptions, refreshIntervalOptions, } from './time-range-picker.js';
 // Structure
 export { ScrollArea } from './scroll-area.js';
 export { Separator } from './separator.js';
@@ -77,6 +80,6 @@ export { SizeProvider, } from './sizing.js';
 export { DirectionProvider } from '@base-ui/react/direction-provider';
 export { Slot } from './slot.js';
 // Patterns
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellBrand, AppShellNav, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellMenuTrigger, AppShellBrand, AppShellNav, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';

package/dist/inline-message.d.ts

@@ -6,7 +6,7 @@ export declare const InlineMessage: {
     } & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
-    Icon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    Icon: ({ tone: ownTone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
         tone?: StatusTone;
     } & {
         ref?: React.Ref<HTMLSpanElement>;
@@ -36,7 +36,7 @@ export declare const InlineMessageRoot: ({ tone, className, ref, ...props }: Rea
     tone?: StatusTone;
 } & {
     ref?: React.Ref<HTMLDivElement>;
-}) => React.JSX.Element, InlineMessageIcon: ({ tone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+}) => React.JSX.Element, InlineMessageIcon: ({ tone: ownTone, children, className, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
     tone?: StatusTone;
 } & {
     ref?: React.Ref<HTMLSpanElement>;

package/dist/inline-message.js

@@ -1,13 +1,18 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { useToneTransition } from './tone-transition.js';
 import { part, cx } from './parts.js';
 import { StatusIcon } from './status.js';
+/** The Root's tone, so its Icon matches without repeating it, as Toast's does. */
+const MessageTone = /* @__PURE__ */ React.createContext('neutral');
 const MessageRoot = function MessageRoot({ tone = 'neutral', className, ref, ...props }) {
     const elementRef = useToneTransition(tone, ref);
-    return (_jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: cx('surf-message', className) }));
+    return (_jsx(MessageTone.Provider, { value: tone, children: _jsx("div", { ...props, ref: elementRef, "data-tone": tone, className: cx('surf-message', className) }) }));
 };
-const MessageIcon = function MessageIcon({ tone = 'neutral', children, className, ref, ...props }) {
+const MessageIcon = function MessageIcon({ tone: ownTone, children, className, ref, ...props }) {
+    const inherited = React.useContext(MessageTone);
+    const tone = ownTone ?? inherited;
     return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('surf-message-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone }) }));
 };
 export const InlineMessage = {

package/dist/input.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 export declare const Input: ({ className, leadingIcon, wrapperClassName, size, ref, ...props }: Omit<React.ComponentPropsWithoutRef<"input">, "size"> & {
-    size?: number | ComponentSizeAlias;
+    size?: number | ComponentSize;
     leadingIcon?: React.ReactNode;
     wrapperClassName?: string;
 } & {

package/dist/layout.d.ts

@@ -34,11 +34,9 @@ export declare const GridItem: ({ span, mediumSpan, smallSpan, className, style,
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
 export type SurfaceKind = 'canvas' | 'subtle';
-export declare const Surface: ({ surface, tone, padding, className, style, ref, ...props }: React.ComponentProps<"div"> & {
+export declare const Surface: ({ surface, padding, className, style, ref, ...props }: React.ComponentProps<"div"> & {
     /** The background: subtle sits on the sheet, canvas matches it. */
     surface?: SurfaceKind;
-    /** @deprecated Use surface; tone names a status color elsewhere. */
-    tone?: SurfaceKind;
     padding?: Space;
 } & {
     ref?: React.Ref<HTMLDivElement>;

package/dist/layout.js

@@ -30,8 +30,8 @@ export const GridItem = function GridItem({ span, mediumSpan, smallSpan, classNa
             ...style,
         } }));
 };
-export const Surface = function Surface({ surface, tone, padding, className, style, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cx('surf-surface', className), "data-surface": surface ?? tone ?? 'subtle', style: {
+export const Surface = function Surface({ surface, padding, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-surface', className), "data-surface": surface ?? 'subtle', style: {
             ...(padding === undefined
                 ? {}
                 : { '--surf-surface-padding': `var(--surf-space-${padding})` }),

package/dist/native-select.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
 export declare const NativeSelect: ({ children, onChange, value, defaultValue, className, size, ref, ...props }: Omit<React.ComponentPropsWithoutRef<"select">, "size" | "multiple"> & {
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element;

package/dist/navigation-menu.d.ts

@@ -23,6 +23,16 @@ export declare const NavigationMenu: {
     } & {
         ref?: React.Ref<HTMLAnchorElement> | undefined;
     }) => React.JSX.Element;
+    /** A destination's name, on its own line inside a Link. */
+    LinkTitle: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    /** A line under the title that says what is there. */
+    LinkDescription: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
     Content: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./size.js").ComponentSize;
     } & {
@@ -64,6 +74,12 @@ export declare const NavigationMenuArrow: React.ForwardRefExoticComponent<Omit<i
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => React.JSX.Element, NavigationMenuLinkDescription: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element, NavigationMenuLinkTitle: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLSpanElement> | undefined;
 }) => React.JSX.Element, NavigationMenuList: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
 } & {

package/dist/navigation-menu.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from './icon.js';
 import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
 import { part, skin } from './parts.js';
+import { elementPart } from './element-part.js';
 function Root(props) {
     const { className, orientation = 'horizontal', ...rest } = props;
     return (_jsx(BaseNavigationMenu.Root, { ...rest, orientation: orientation, "data-orientation": orientation, className: skin('surf-navigation-menu', className) }));
@@ -19,6 +20,10 @@ export const NavigationMenu = {
     List: /* @__PURE__ */ part(BaseNavigationMenu.List, 'surf-navigation-list'),
     Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'surf-navigation-item'),
     Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'surf-navigation-link'),
+    /** A destination's name, on its own line inside a Link. */
+    LinkTitle: /* @__PURE__ */ elementPart('span', 'surf-navigation-link-title'),
+    /** A line under the title that says what is there. */
+    LinkDescription: /* @__PURE__ */ elementPart('span', 'surf-navigation-link-description'),
     Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'surf-navigation-content'),
     Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'surf-positioner surf-navigation-positioner', {
         portal: true,
@@ -30,4 +35,4 @@ export const NavigationMenu = {
     },
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Arrow: NavigationMenuArrow, Backdrop: NavigationMenuBackdrop, Content: NavigationMenuContent, Icon: NavigationMenuIcon, Item: NavigationMenuItem, Link: NavigationMenuLink, List: NavigationMenuList, Popup: NavigationMenuPopup, Portal: NavigationMenuPortal, Positioner: NavigationMenuPositioner, Root: NavigationMenuRoot, Trigger: NavigationMenuTrigger, Viewport: NavigationMenuViewport, } = NavigationMenu;
+export const { Arrow: NavigationMenuArrow, Backdrop: NavigationMenuBackdrop, Content: NavigationMenuContent, Icon: NavigationMenuIcon, Item: NavigationMenuItem, Link: NavigationMenuLink, LinkDescription: NavigationMenuLinkDescription, LinkTitle: NavigationMenuLinkTitle, List: NavigationMenuList, Popup: NavigationMenuPopup, Portal: NavigationMenuPortal, Positioner: NavigationMenuPositioner, Root: NavigationMenuRoot, Trigger: NavigationMenuTrigger, Viewport: NavigationMenuViewport, } = NavigationMenu;

package/dist/page-header.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export declare function PageHeader({ as: Root, headingProps, actionsLabel, title, description, breadcrumb, actions, level, size, className, ...props }: Omit<React.ComponentProps<'div'>, 'title'> & {
+import { type HeadingVariant } from './typography.js';
+export declare function PageHeader({ as: Root, headingProps, actionsLabel, title, description, breadcrumb, actions, level, variant, size, lead, className, ...props }: Omit<React.ComponentProps<'div'>, 'title'> & {
     as?: 'div' | 'header';
     headingProps?: Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'dangerouslySetInnerHTML'>;
     actionsLabel?: string;
@@ -8,5 +9,12 @@ export declare function PageHeader({ as: Root, headingProps, actionsLabel, title
     breadcrumb?: React.ReactNode;
     actions?: React.ReactNode;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: 'title' | 'page' | 'workspace' | 'document';
+    /** The title's type role, as Heading's variant is. */
+    variant?: HeadingVariant;
+    /** @deprecated The earlier name for `variant`. `workspace` and `document` are
+     * earlier names for `display`. */
+    size?: HeadingVariant | 'workspace' | 'document';
+    /** Sets the description as the page's lead: the reading role at the reading
+     * measure, for a document that opens with it. */
+    lead?: boolean;
 }): React.JSX.Element;

package/dist/page-header.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from './class-names.js';
 import { Heading, Text } from './typography.js';
-export function PageHeader({ as: Root = 'div', headingProps, actionsLabel, title, description, breadcrumb, actions, level = 1, size = 'title', className, ...props }) {
-    return (_jsxs(Root, { ...props, className: cx('surf-page-header', className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== '' && (_jsx("div", { className: 'surf-page-header-breadcrumb', children: breadcrumb })), _jsxs("div", { className: 'surf-page-header-content', children: [_jsxs("div", { className: 'surf-page-header-copy', children: [_jsx(Heading, { ...headingProps, level: level, size: size, children: title }), description != null &&
+export function PageHeader({ as: Root = 'div', headingProps, actionsLabel, title, description, breadcrumb, actions, level = 1, variant, size, lead = false, className, ...props }) {
+    return (_jsxs(Root, { ...props, className: cx('surf-page-header', className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== '' && (_jsx("div", { className: 'surf-page-header-breadcrumb', children: breadcrumb })), _jsxs("div", { className: 'surf-page-header-content', children: [_jsxs("div", { className: 'surf-page-header-copy', children: [_jsx(Heading, { ...headingProps, level: level, size: variant ?? size ?? 'title', children: title }), description != null &&
                                 description !== false &&
-                                description !== '' && (_jsx(Text, { color: 'secondary', className: 'surf-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'surf-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
+                                description !== '' && (_jsx(Text, { color: 'secondary', variant: lead ? 'reading' : 'body', "data-lead": lead || undefined, className: 'surf-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'surf-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
 }

package/dist/panel.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 export type PanelSide = 'left' | 'right' | 'top' | 'bottom';
 export type PanelOptions = {
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
     closeLabel?: string;
     /** Attaches the panel to its edge: no gap, and square corners on that edge, as a
      * mobile bottom sheet sits. */
@@ -12,4 +12,7 @@ export declare function Header({ className, ...props }: React.ComponentProps<'di
 export declare const Body: ({ className, ref, ...props }: React.ComponentProps<"div"> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
-export declare function Footer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export declare function Footer({ stacked, className, ...props }: React.ComponentProps<'div'> & {
+    /** Stacks the actions, each the full width, as a phone's bottom sheet does. */
+    stacked?: boolean;
+}): React.JSX.Element;

package/dist/panel.js

@@ -7,6 +7,6 @@ export function Header({ className, ...props }) {
 export const Body = function Body({ className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, className: cx('surf-panel-body', className) }));
 };
-export function Footer({ className, ...props }) {
-    return _jsx("div", { ...props, className: cx('surf-panel-footer', className) });
+export function Footer({ stacked = false, className, ...props }) {
+    return (_jsx("div", { ...props, "data-stacked": stacked || undefined, className: cx('surf-panel-footer', className) }));
 }

package/dist/parts.d.ts

@@ -1,11 +1,15 @@
 import { type ComponentSize } from './sizing.js';
 import * as React from 'react';
-export { cx, sizeName } from './class-names.js';
+export { cx } from './class-names.js';
 /** 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);
+/** A portal renders outside the element that set dir, so a popup carries the
+ * DirectionProvider's direction itself: its text runs and its alignment mirror.
+ * Undefined unless the provider says right to left, so a page's own dir stays. */
+export declare function usePortalDirection(): "rtl" | undefined;
 /** A styled Base UI part or element. A portal part renders outside the tree that sets
- * data-ui-size, so it always carries the size scheme; other parts carry it only when
- * size is set. */
+ * data-ui-size and dir, so it always carries the size scheme and the provider's
+ * direction; other parts carry the size only when size is set. */
 export declare function part<Element extends HTMLElement, Props extends {
     className?: unknown;
 }>(Component: React.ElementType, base: string, { portal }?: {

package/dist/parts.js

@@ -2,25 +2,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComponentSizeContext, useComponentSize, } from './sizing.js';
 import * as React from 'react';
+import { useDirection } from '@base-ui/react/direction-provider';
 import { cx } from './class-names.js';
-export { cx, sizeName } from './class-names.js';
+export { cx } from './class-names.js';
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
     if (typeof custom === 'function')
         return (state) => cx(base, custom(state));
     return cx(base, custom);
 }
+/** A portal renders outside the element that set dir, so a popup carries the
+ * DirectionProvider's direction itself: its text runs and its alignment mirror.
+ * Undefined unless the provider says right to left, so a page's own dir stays. */
+export function usePortalDirection() {
+    return useDirection() === 'rtl' ? 'rtl' : undefined;
+}
 /** A styled Base UI part or element. A portal part renders outside the tree that sets
- * data-ui-size, so it always carries the size scheme; other parts carry it only when
- * size is set. */
+ * data-ui-size and dir, so it always carries the size scheme and the provider's
+ * direction; other parts carry the size only when size is set. */
 export function part(Component, base, { portal = false } = {}) {
     return function ThemedPart({ ref, ...props }) {
         const { className, size, ...rest } = props;
         const scheme = useComponentSize(size);
+        const direction = usePortalDirection();
         const classes = typeof className === 'function'
             ? (state) => cx(base, className(state))
             : cx(base, className);
-        const element = (_jsx(Component, { ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
+        const element = (_jsx(Component, { dir: portal ? direction : undefined, ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
         // Keep the React subtree stable when size changes from omitted to explicit.
         return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: element }));
     };

package/dist/popover.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 declare function PopoverContent({ size, side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'> & {
     /** Width and density: small 240px, default 320px, large 480px. Unset, the
      * popover keeps the default width and takes the surrounding density. */
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 }): React.JSX.Element;
 declare const PopoverTitle: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<HTMLHeadingElement> | undefined;
 }) => React.JSX.Element;
 declare const PopoverDescription: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
+    size?: ComponentSize;
 } & {
     ref?: React.Ref<HTMLParagraphElement> | undefined;
 }) => React.JSX.Element;
@@ -22,12 +22,12 @@ export declare const Popover: {
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: typeof PopoverContent;
     Title: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
     } & {
         ref?: React.Ref<HTMLHeadingElement> | undefined;
     }) => React.JSX.Element;
     Description: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
+        size?: ComponentSize;
     } & {
         ref?: React.Ref<HTMLParagraphElement> | undefined;
     }) => React.JSX.Element;

package/dist/popover.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { OwnPortal, part, scopedPortal, sizeName, skin } from './parts.js';
+import { OwnPortal, part, scopedPortal, skin, usePortalDirection, } from './parts.js';
 import { useComponentSize } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 function PopoverContent({ size, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'surf-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, className: skin('surf-popover', className) }) }) }));
+    const dir = usePortalDirection();
+    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { dir: dir, side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'surf-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": size, ...props, className: skin('surf-popover', className) }) }) }));
 }
 const PopoverTitle = /* @__PURE__ */ part(BasePopover.Title, 'surf-popover-title');
 const PopoverDescription = /* @__PURE__ */ part(BasePopover.Description, 'surf-popover-description');

package/dist/preview-card.d.ts

@@ -13,10 +13,7 @@ export declare const PreviewCard: {
     Popup: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
-    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
-        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-    } & {
+    Content: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
@@ -32,10 +29,7 @@ export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<impo
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLDivElement> | undefined;
-}) => React.JSX.Element, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
-    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
-} & {
+}) => React.JSX.Element, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & Placement<typeof BasePreviewCard.Positioner> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;
 export {};

package/dist/preview-card.js

@@ -11,8 +11,8 @@ function PreviewTrigger(props) {
     const { className, ...rest } = props;
     return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('surf-link surf-preview-trigger', className) }));
 }
-const PreviewContent = function PreviewContent({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }) {
-    return (_jsx(OwnPortal, { portal: BasePreviewCard.Portal, children: _jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(PreviewPopup, { ...props, ref: ref }) }) }));
+const PreviewContent = function PreviewContent({ side, align, sideOffset, collisionPadding, ref, ...props }) {
+    return (_jsx(OwnPortal, { portal: BasePreviewCard.Portal, children: _jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(PreviewPopup, { ...props, ref: ref }) }) }));
 };
 export const PreviewCard = {
     ...BasePreviewCard,

package/dist/select.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
+import { Select as BaseSelect } from '@base-ui/react/select';
 export type SelectOption = {
     value: string;
     label: React.ReactNode;
@@ -10,11 +11,8 @@ export type SelectGroup = {
     label: React.ReactNode;
     options: SelectOption[];
 };
-export type SelectProps = {
+type SelectCommonProps = {
     options: (SelectOption | SelectGroup)[];
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
     name?: string;
     form?: string;
     required?: boolean;
@@ -23,13 +21,45 @@ export type SelectProps = {
     className?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     triggerRef?: React.Ref<HTMLButtonElement>;
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
+    /** fill takes its container's width, as a form field does. content fits the
+     * longest option, as a native select does, so it sits beside other controls in
+     * a header or toolbar and keeps its width when the value changes. */
+    width?: 'fill' | 'content';
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
-/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
-export declare const Select: ({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ref, ...props }: SelectProps & {
+export type SelectProps = SelectCommonProps & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    /** Runs with the new value and Base UI's event details; call
+     * eventDetails.cancel() to keep the current value, as other fields allow. */
+    onValueChange?: (value: string, eventDetails: BaseSelect.Root.ChangeEventDetails) => void;
+};
+/** What a multiple Select's trigger says, and its first option. */
+export type SelectMultipleLabels = {
+    /** Every option chosen, such as "All projects"; also the option that chooses them. */
+    all: string;
+    /** Nothing chosen, such as "No projects". */
+    none: string;
+    /** Several chosen, such as "3 projects". */
+    count: (count: number) => string;
+};
+/** Several choices from a list, summed up on one line: a filter of projects, models
+ * or nodes. Its first option, labels.all, chooses every option or none. */
+export type SelectMultipleProps = SelectCommonProps & {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[], eventDetails: BaseSelect.Root.ChangeEventDetails) => void;
+    labels?: Partial<SelectMultipleLabels>;
+};
+/** A choice from a list, or several with multiple. The ref reaches the trigger
+ * button, as triggerRef does. */
+export declare const Select: (allProps: (SelectProps | SelectMultipleProps) & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element;
+export {};