@surflane/ui 0.3.0 → 0.4.0

package/README.md

@@ -12,17 +12,13 @@ npm install @surflane/ui @surflane/design-tokens
 
 ## Usage
 
-Import the stylesheets once at the application root:
+Import the stylesheets once at the application root. `all.css` brings the tokens, controls, composition, document typography and component styles:
 
 ```css
-@import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/controls.css';
-@import '@surflane/design-tokens/foundations.css';
-@import '@surflane/design-tokens/typography.css';
-@import '@surflane/ui/styles.css';
+@import '@surflane/ui/all.css';
 ```
 
-Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`.
+The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
 
 ```tsx
 import {
@@ -47,6 +43,20 @@ export function Example() {
 
 Compound components are available both as namespaces (`Dialog.Root`) and as flat names (`DialogRoot`). Use flat names in React Server Components, which cannot dot into client exports. Subpath entry points such as `@surflane/ui/button` and `@surflane/ui/dialog` keep bundles small.
 
+## Optional components
+
+Chart, DatePicker, Markdown, Tree and syntax highlighting have their own entry points, and their libraries are optional peer dependencies. Install a library only when you use its component:
+
+| Import                                                                                             | Install                                                            |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `Chart` from `@surflane/ui/chart`                                                                  | `recharts`                                                         |
+| `DatePicker`, `DateRangePicker`, `TimeField`, `DateLocaleProvider` from `@surflane/ui/date-picker` | `react-aria-components`                                            |
+| `Markdown` from `@surflane/ui/markdown`                                                            | `react-markdown remark-gfm`                                        |
+| `Tree` from `@surflane/ui/tree`                                                                    | `@headless-tree/core @headless-tree/react @tanstack/react-virtual` |
+| `SyntaxHighlighting` from `@surflane/ui/syntax-highlighting`                                       | `shiki`                                                            |
+
+`CodeBlock` and `SyntaxHighlighter` render plain text until a `<SyntaxHighlighting>` provider wraps them.
+
 ## Frameworks
 
 Next.js (App Router), React Router, Astro and Vite are verified in CI with example applications. See [framework integration](https://github.com/Ashon/surflane/blob/main/docs/frameworks.md) and [examples](https://github.com/Ashon/surflane/tree/main/examples).

package/dist/advanced-forms.js

@@ -24,21 +24,21 @@ function ComboboxRoot({ children, form, ...props }) {
     const [, , revision] = useResetValue(true, true, anchor, form);
     return (_jsxs(BaseCombobox.Root, { ...props, form: form, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 }
-const ComboPopup = part(BaseCombobox.Popup, 'pui-combobox-popup');
-const ComboPositioner = part(BaseCombobox.Positioner, 'pui-positioner');
-const ComboContent = React.forwardRef(function ComboContent({ positionerProps, ...props }, ref) {
+const ComboPopup = /* @__PURE__ */ part(BaseCombobox.Popup, 'pui-combobox-popup');
+const ComboPositioner = /* @__PURE__ */ part(BaseCombobox.Positioner, 'pui-positioner');
+const ComboContent = /* @__PURE__ */ React.forwardRef(function ComboContent({ positionerProps, ...props }, ref) {
     return (_jsx(BaseCombobox.Portal, { children: _jsx(ComboPositioner, { sideOffset: 6, ...positionerProps, children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
 });
-const ComboTrigger = React.forwardRef(function ComboTrigger({ children, className, ...props }, ref) {
+const ComboTrigger = /* @__PURE__ */ React.forwardRef(function ComboTrigger({ children, className, ...props }, ref) {
     return (_jsx(BaseCombobox.Trigger, { "aria-label": 'Show options', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Mark, { kind: 'expand' }) }));
 });
-const ComboClear = React.forwardRef(function ComboClear({ children, className, ...props }, ref) {
+const ComboClear = /* @__PURE__ */ React.forwardRef(function ComboClear({ children, className, ...props }, ref) {
     return (_jsx(BaseCombobox.Clear, { "aria-label": 'Clear selection', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Mark, { kind: 'clear' }) }));
 });
-const ComboIndicator = React.forwardRef(function ComboIndicator({ children, className, ...props }, ref) {
+const ComboIndicator = /* @__PURE__ */ React.forwardRef(function ComboIndicator({ children, className, ...props }, ref) {
     return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-combobox-indicator', className), children: children ?? _jsx(Mark, { kind: 'check' }) }));
 });
-const ComboRemove = React.forwardRef(function ComboRemove({ children, className, ...props }, ref) {
+const ComboRemove = /* @__PURE__ */ React.forwardRef(function ComboRemove({ children, className, ...props }, ref) {
     return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, className: skin('pui-combobox-chip-remove', className), children: children ?? _jsx(Mark, { kind: 'clear' }) }));
 });
 export const Combobox = {
@@ -51,19 +51,19 @@ export const Combobox = {
     Clear: ComboClear,
     ItemIndicator: ComboIndicator,
     ChipRemove: ComboRemove,
-    Input: part(BaseCombobox.Input, 'pui-input pui-combobox-input'),
-    InputGroup: part(BaseCombobox.InputGroup, 'pui-combobox-group'),
-    List: part(BaseCombobox.List, 'pui-combobox-list scroll-area'),
-    Item: part(BaseCombobox.Item, 'pui-combobox-item'),
-    Empty: part(BaseCombobox.Empty, 'pui-combobox-empty'),
-    Status: part(BaseCombobox.Status, 'pui-combobox-status'),
-    Group: part(BaseCombobox.Group, 'pui-combobox-section'),
-    GroupLabel: part(BaseCombobox.GroupLabel, 'pui-combobox-section-label'),
-    Separator: part(BaseCombobox.Separator, 'pui-combobox-separator'),
-    Chips: part(BaseCombobox.Chips, 'pui-combobox-chips'),
-    Chip: part(BaseCombobox.Chip, 'pui-combobox-chip'),
+    Input: /* @__PURE__ */ part(BaseCombobox.Input, 'pui-input pui-combobox-input'),
+    InputGroup: /* @__PURE__ */ part(BaseCombobox.InputGroup, 'pui-combobox-group'),
+    List: /* @__PURE__ */ part(BaseCombobox.List, 'pui-combobox-list scroll-area'),
+    Item: /* @__PURE__ */ part(BaseCombobox.Item, 'pui-combobox-item'),
+    Empty: /* @__PURE__ */ part(BaseCombobox.Empty, 'pui-combobox-empty'),
+    Status: /* @__PURE__ */ part(BaseCombobox.Status, 'pui-combobox-status'),
+    Group: /* @__PURE__ */ part(BaseCombobox.Group, 'pui-combobox-section'),
+    GroupLabel: /* @__PURE__ */ part(BaseCombobox.GroupLabel, 'pui-combobox-section-label'),
+    Separator: /* @__PURE__ */ part(BaseCombobox.Separator, 'pui-combobox-separator'),
+    Chips: /* @__PURE__ */ part(BaseCombobox.Chips, 'pui-combobox-chips'),
+    Chip: /* @__PURE__ */ part(BaseCombobox.Chip, 'pui-combobox-chip'),
 };
-const NumberRoot = React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
+const NumberRoot = /* @__PURE__ */ React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
     const [element, attach] = useRootRef(ref);
     const [numeric, setNumeric] = useResetValue(value, defaultValue ?? null, element, form);
     return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin('pui-number-field', className), onValueChange: (next, event) => {
@@ -72,10 +72,10 @@ const NumberRoot = React.forwardRef(function NumberRoot({ value, defaultValue, o
                 setNumeric(next);
         } }));
 });
-const NumberIncrement = React.forwardRef(function NumberIncrement({ className, children, ...props }, ref) {
+const NumberIncrement = /* @__PURE__ */ React.forwardRef(function NumberIncrement({ className, children, ...props }, ref) {
     return (_jsx(BaseNumberField.Increment, { "aria-label": 'Increase value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'plus' }) }));
 });
-const NumberDecrement = React.forwardRef(function NumberDecrement({ className, children, ...props }, ref) {
+const NumberDecrement = /* @__PURE__ */ React.forwardRef(function NumberDecrement({ className, children, ...props }, ref) {
     return (_jsx(BaseNumberField.Decrement, { "aria-label": 'Decrease value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'minus' }) }));
 });
 export const NumberField = {
@@ -83,9 +83,9 @@ export const NumberField = {
     Root: NumberRoot,
     Increment: NumberIncrement,
     Decrement: NumberDecrement,
-    Group: part(BaseNumberField.Group, 'pui-number-group'),
-    Input: part(BaseNumberField.Input, 'pui-number-input'),
-    ScrubArea: part(BaseNumberField.ScrubArea, 'pui-number-scrub'),
+    Group: /* @__PURE__ */ part(BaseNumberField.Group, 'pui-number-group'),
+    Input: /* @__PURE__ */ part(BaseNumberField.Input, 'pui-number-input'),
+    ScrubArea: /* @__PURE__ */ part(BaseNumberField.ScrubArea, 'pui-number-scrub'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { ComboboxRoot };

package/dist/app-shell.js

@@ -3,32 +3,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 const skin = (base, extra) => [base, extra].filter(Boolean).join(' ');
 /** Layout only. Routing, session, theme and mobile disclosure belong to the caller. */
-const Root = React.forwardRef(function AppShellRoot({ collapsed = false, layout = 'header', className, ...props }, ref) {
+const Root = /* @__PURE__ */ React.forwardRef(function AppShellRoot({ collapsed = false, layout = 'header', className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? 'collapsed' : 'expanded', className: skin('pui-app-shell', className) }));
 });
-const Header = React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
+const Header = /* @__PURE__ */ React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-header', className) }));
 });
-const Sidebar = React.forwardRef(function AppShellSidebar({ className, ...props }, ref) {
+const Sidebar = /* @__PURE__ */ React.forwardRef(function AppShellSidebar({ className, ...props }, ref) {
     return (_jsx("aside", { ...props, ref: ref, className: skin('pui-app-shell-sidebar', className) }));
 });
-const Content = React.forwardRef(function AppShellContent({ className, ...props }, ref) {
+const Content = /* @__PURE__ */ React.forwardRef(function AppShellContent({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-content', className) }));
 });
 /**
  * The page surface inside a workspace Content. It insets from the shell on every
  * side but the sidebar's; without the sidebar, on narrow screens, it insets evenly.
  */
-const Page = React.forwardRef(function AppShellPage({ className, ...props }, ref) {
+const Page = /* @__PURE__ */ React.forwardRef(function AppShellPage({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-page', className) }));
 });
-const Footer = React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
+const Footer = /* @__PURE__ */ React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-footer', className) }));
 });
-const Label = React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
+const Label = /* @__PURE__ */ React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
     return (_jsx("span", { ...props, ref: ref, className: skin('pui-app-shell-label', className) }));
 });
-const Link = React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
+const Link = /* @__PURE__ */ React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
     return (_jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: skin('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }));
 });
 export const AppShell = {

package/dist/avatar.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+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 { AvatarFallback, AvatarRoot };
+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>>;

package/dist/avatar.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { useComponentSize } from './sizing.js';
+import { sizeName, skin, part } from './parts.js';
+const AvatarRoot = /* @__PURE__ */ React.forwardRef(function AvatarRoot({ size, className, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(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 = /* @__PURE__ */ 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: /* @__PURE__ */ part('span', 'pui-avatar-status'),
+    Fallback: AvatarFallback,
+    Image: /* @__PURE__ */ part(BaseAvatar.Image, 'pui-avatar-image'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AvatarFallback, AvatarRoot };
+export const { Image: AvatarImage, Status: AvatarStatus } = Avatar;

package/dist/button.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import { useComponentSize } from './sizing.js';
-import { skin } from './parts.js';
-export const Button = React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
+import { sizeName, skin } from './parts.js';
+export const Button = /* @__PURE__ */ React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
     const scheme = useComponentSize(size === 'icon-sm' || size === 'icon-xs'
         ? 'small'
         : size === 'icon-lg'
@@ -12,5 +12,5 @@ export const Button = React.forwardRef(function Button({ className, variant = 'd
             : size === 'xs' || size === 'icon'
                 ? undefined
                 : size);
-    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": size, "data-ui-size": scheme }));
+    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": sizeName(size), "data-ui-size": scheme }));
 });

package/dist/chart.js

@@ -20,7 +20,7 @@ function Pattern({ id, index, color, }) {
 }
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, locale = 'en-US', formatValue, missingLabel = 'Not available', emptyLabel = 'No numeric measurements to display.', hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
+export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, locale = 'en-US', formatValue, missingLabel = 'Not available', emptyLabel = 'No numeric measurements to display.', hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
@@ -85,13 +85,16 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
     return (_jsxs("figure", { ...props, ref: ref, className: ['pui-chart', className].filter(Boolean).join(' '), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'pui-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsx("ul", { className: 'pui-chart-legend', "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'pui-chart-legend-button', "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx("svg", { width: '32', height: '20', viewBox: '0 0 32 20', "aria-hidden": 'true', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: colorFor(index), strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _jsx("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
                             if (event.key === 'Escape')
                                 setDismissed(true);
-                            else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+                            else if (event.key === 'ArrowLeft' ||
+                                event.key === 'ArrowRight')
                                 setDismissed(false);
                         }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: _jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
                                             const label = byId.get(String(value))?.label ?? String(value);
                                             // minTickGap already drops ticks that would overlap; the cap
                                             // only keeps one very long label from crowding the axis.
-                                            return label.length > 24 ? label.slice(0, 23) + '…' : label;
+                                            return label.length > 24
+                                                ? label.slice(0, 23) + '…'
+                                                : label;
                                         }, tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: { stroke: 'var(--line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max] }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
                                             ? false
                                             : {

package/dist/chevron.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+/** The disclosure and breadcrumb chevron. Internal: not exported from the package. */
+export declare function Chevron(): React.JSX.Element;

package/dist/chevron.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The disclosure and breadcrumb chevron. Internal: not exported from the package. */
+export 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' }) }));
+}

package/dist/commands.js

@@ -5,23 +5,23 @@ import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
-import { skin, part } from './parts.js';
+import { sizeName, skin, part } from './parts.js';
 export function Toggle({ className, size, ref, ...props }) {
     const scheme = useComponentSize(size === 'icon' ? undefined : size);
-    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": size, "data-ui-size": scheme }));
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
 }
 export function ToggleGroup({ className, ref, ...props }) {
     return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
 }
 export const Toolbar = {
     ...BaseToolbar,
-    Root: part(BaseToolbar.Root, 'pui-toolbar'),
-    Group: part(BaseToolbar.Group, 'pui-toolbar-group'),
-    Button: part(BaseToolbar.Button, 'pui-button pui-toolbar-button'),
-    Link: part(BaseToolbar.Link, 'pui-button pui-toolbar-link'),
-    Input: part(BaseToolbar.Input, 'pui-input pui-toolbar-input'),
-    Separator: part(BaseToolbar.Separator, 'pui-toolbar-separator'),
+    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'pui-toolbar'),
+    Group: /* @__PURE__ */ part(BaseToolbar.Group, 'pui-toolbar-group'),
+    Button: /* @__PURE__ */ part(BaseToolbar.Button, 'pui-button pui-toolbar-button'),
+    Link: /* @__PURE__ */ part(BaseToolbar.Link, 'pui-button pui-toolbar-link'),
+    Input: /* @__PURE__ */ part(BaseToolbar.Input, 'pui-input pui-toolbar-input'),
+    Separator: /* @__PURE__ */ part(BaseToolbar.Separator, 'pui-toolbar-separator'),
 };
-export const Menubar = part(BaseMenubar, 'pui-menubar');
+export const Menubar = /* @__PURE__ */ part(BaseMenubar, 'pui-menubar');
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Button: ToolbarButton, Group: ToolbarGroup, Input: ToolbarInput, Link: ToolbarLink, Root: ToolbarRoot, Separator: ToolbarSeparator, } = Toolbar;

package/dist/content.js

@@ -6,10 +6,10 @@ import { part } from './parts.js';
 import { Button } from './button.js';
 import { SyntaxHighlighter } from './syntax-highlighter.js';
 import { ScrollArea } from './scroll-area.js';
-const CardRoot = React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
+const CardRoot = /* @__PURE__ */ React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
     return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ['pui-card', className].filter(Boolean).join(' ') }));
 });
-const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
+const CardTitle = /* @__PURE__ */ React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
@@ -18,11 +18,11 @@ const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ..
 });
 export const Card = {
     Root: CardRoot,
-    Header: part('div', 'pui-card-header'),
+    Header: /* @__PURE__ */ part('div', 'pui-card-header'),
     Title: CardTitle,
-    Description: part('p', 'pui-card-description'),
-    Body: part('div', 'pui-card-body'),
-    Footer: part('div', 'pui-card-footer'),
+    Description: /* @__PURE__ */ part('p', 'pui-card-description'),
+    Body: /* @__PURE__ */ part('div', 'pui-card-body'),
+    Footer: /* @__PURE__ */ part('div', 'pui-card-footer'),
 };
 const copyIcons = {
     idle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '12', rx: '2' }), _jsx("path", { d: 'M16 8V4H4v12h4' })] })),
@@ -31,7 +31,7 @@ const copyIcons = {
 };
 // Feedback stays inside the copy button and returns to the action after this long.
 const copyFeedbackDuration = 2000;
-export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
+export const CodeBlock = /* @__PURE__ */ React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
     const [state, setState] = React.useState('idle');
     // After the first copy, each change of label fades in; the first render does not.
     const [used, setUsed] = React.useState(false);
@@ -50,6 +50,8 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Co
         clearTimeout(timer.current);
         setState('idle');
     }, [code]);
+    const resting = React.useRef(true);
+    resting.current = state === 'idle';
     // The button keeps its resting width, so the feedback never moves the toolbar.
     React.useLayoutEffect(() => {
         const element = button.current;
@@ -60,8 +62,9 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Co
             element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
         };
         measure();
+        // Fonts can finish loading after a copy; the result label must not set the width.
         document.fonts?.ready.then(() => {
-            if (mounted.current)
+            if (mounted.current && resting.current)
                 measure();
         });
     }, [copyLabel, state]);

package/dist/context-overlays.js

@@ -5,14 +5,14 @@ import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 import { Menu } from './menu.js';
 import { part, skin } from './parts.js';
-const ContextPositioner = part(BaseContextMenu.Positioner, 'pui-positioner');
-const ContextContent = React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
+const ContextPositioner = /* @__PURE__ */ part(BaseContextMenu.Positioner, 'pui-positioner');
+const ContextContent = /* @__PURE__ */ React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
     return (_jsx(ContextPositioner, { ...positionerProps, children: _jsx(Menu.Popup, { ...props, ref: ref }) }));
 });
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export const ContextMenu = {
     ...BaseContextMenu,
-    Trigger: part(BaseContextMenu.Trigger, 'pui-context-trigger'),
+    Trigger: /* @__PURE__ */ part(BaseContextMenu.Trigger, 'pui-context-trigger'),
     Positioner: ContextPositioner,
     Content: ContextContent,
     Popup: Menu.Popup,
@@ -26,16 +26,16 @@ export const ContextMenu = {
     Separator: Menu.Separator,
     SubmenuTrigger: Menu.SubmenuTrigger,
 };
-const PreviewPositioner = part(BasePreviewCard.Positioner, 'pui-positioner');
+const PreviewPositioner = /* @__PURE__ */ part(BasePreviewCard.Positioner, 'pui-positioner');
 // The preview is visual enhancement; its destination is the accessible interface.
-const PreviewPopup = React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
+const PreviewPopup = /* @__PURE__ */ React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
     return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": 'true', className: skin('pui-preview-card', className) }));
 });
 function PreviewTrigger(props) {
     const { className, ...rest } = props;
     return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
 }
-const PreviewContent = React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
+const PreviewContent = /* @__PURE__ */ React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
     return (_jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, children: _jsx(PreviewPopup, { ...props, ref: ref }) }));
 });
 export const PreviewCard = {

package/dist/data.js

@@ -4,24 +4,24 @@ import * as React from 'react';
 import { Button } from './button.js';
 import { part } from './parts.js';
 import { ScrollArea } from './scroll-area.js';
-const TableContainer = React.forwardRef(function TableContainer(props, ref) {
+const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer(props, ref) {
     return _jsx(ScrollArea, { ...props, ref: ref });
 });
-const RootPart = part('table', 'pui-table');
-const TableRoot = React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
+const RootPart = /* @__PURE__ */ part('table', 'pui-table');
+const TableRoot = /* @__PURE__ */ React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
     return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-sticky-header": stickyHeader || undefined }));
 });
 const layout = ({ align, numeric }) => ({
     'data-align': numeric ? 'end' : align,
     'data-numeric': numeric || undefined,
 });
-const HeaderCellPart = part('th', 'pui-table-cell pui-table-header');
-const CellPart = part('td', 'pui-table-cell');
+const HeaderCellPart = /* @__PURE__ */ part('th', 'pui-table-cell pui-table-header');
+const CellPart = /* @__PURE__ */ part('td', 'pui-table-cell');
 // align replaces the obsolete HTML align attribute of th and td.
-const TableHeaderCell = React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
+const TableHeaderCell = /* @__PURE__ */ React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
     return _jsx(HeaderCellPart, { ...props, ...layout({ align, numeric }), ref: ref });
 });
-const TableCell = React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
+const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
     return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
 });
 function SortIcon({ sort }) {
@@ -32,29 +32,29 @@ function SortIcon({ sort }) {
                     : 'm8 9 4-4 4 4m-8 6 4 4 4-4' }) }));
 }
 /** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
-const TableSortHeader = React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
+const TableSortHeader = /* @__PURE__ */ React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
     return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: ['pui-table-sort-header', className].filter(Boolean).join(' '), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
 });
 /** One-line text that ends in an ellipsis. String content also becomes the title. */
-const TableTruncate = React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
+const TableTruncate = /* @__PURE__ */ React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
     return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: ['pui-table-truncate', className].filter(Boolean).join(' '), children: children }));
 });
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
-const TableMessage = React.forwardRef(function TableMessage({ className, ...props }, ref) {
+const TableMessage = /* @__PURE__ */ React.forwardRef(function TableMessage({ className, ...props }, ref) {
     return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: ['pui-table-cell pui-table-message', className]
                 .filter(Boolean)
                 .join(' ') }) }));
 });
-const TableRow = React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
+const TableRow = /* @__PURE__ */ React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
     return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
 });
 export const Table = {
     Container: TableContainer,
     Root: TableRoot,
-    Caption: part('caption', 'pui-table-caption'),
-    Head: part('thead', 'pui-table-head'),
-    Body: part('tbody', 'pui-table-body'),
-    Foot: part('tfoot', 'pui-table-foot'),
+    Caption: /* @__PURE__ */ part('caption', 'pui-table-caption'),
+    Head: /* @__PURE__ */ part('thead', 'pui-table-head'),
+    Body: /* @__PURE__ */ part('tbody', 'pui-table-body'),
+    Foot: /* @__PURE__ */ part('tfoot', 'pui-table-foot'),
     Row: TableRow,
     HeaderCell: TableHeaderCell,
     SortHeader: TableSortHeader,
@@ -62,19 +62,19 @@ export const Table = {
     Truncate: TableTruncate,
     Message: TableMessage,
 };
-const ListRoot = React.forwardRef(function ListRoot({ className, ...props }, ref) {
+const ListRoot = /* @__PURE__ */ React.forwardRef(function ListRoot({ className, ...props }, ref) {
     return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
 });
-const ListItem = React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
+const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
     return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-list-item', className].filter(Boolean).join(' ') }));
 });
 export const List = {
     Root: ListRoot,
     Item: ListItem,
-    Content: part('div', 'pui-list-content'),
-    Title: part('div', 'pui-list-title'),
-    Description: part('p', 'pui-list-description'),
-    Actions: part('div', 'pui-list-actions'),
+    Content: /* @__PURE__ */ part('div', 'pui-list-content'),
+    Title: /* @__PURE__ */ part('div', 'pui-list-title'),
+    Description: /* @__PURE__ */ part('p', 'pui-list-description'),
+    Actions: /* @__PURE__ */ part('div', 'pui-list-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };

package/dist/dialog.js

@@ -1,24 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { skin } from './parts.js';
 import { useDialogFocusBoundary } from './dialog-focus.js';
 import { useComponentSize } from './sizing.js';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
 const cx = (...v) => v.filter(Boolean).join(' ');
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
-const DialogCloseButton = React.forwardRef(function DialogCloseButton({ className, 'aria-label': label = 'Close dialog', ...props }, ref) {
-    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: cx('pui-icon-button pui-dialog-close', typeof className === 'string' && className), children: _jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) }) }));
+const DialogCloseButton = /* @__PURE__ */ React.forwardRef(function DialogCloseButton({ className, 'aria-label': label = 'Close dialog', ...props }, ref) {
+    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "aria-label": label, className: skin('pui-icon-button pui-dialog-close', className), children: _jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) }) }));
 });
-const DialogContent = React.forwardRef(function DialogContent({ className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
+const DialogContent = /* @__PURE__ */ React.forwardRef(function DialogContent({ className, children, closeLabel = 'Close dialog', closeDisabled, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content', typeof className === 'string' && className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
+    return (_jsxs(BaseDialog.Portal, { ref: portalRef, children: [_jsx(BaseDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsxs(BaseDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: skin('pui-dialog-popup pui-dialog-content', className), children: [_jsx(DialogCloseButton, { "aria-label": closeLabel, disabled: closeDisabled }), children] })] }));
 });
 function DialogHeader({ className, ...props }) {
     return _jsx("div", { ...props, className: cx('pui-dialog-header', className) });
 }
-const DialogBody = React.forwardRef(function DialogBody({ className, ...props }, ref) {
+const DialogBody = /* @__PURE__ */ React.forwardRef(function DialogBody({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: cx('pui-dialog-body', className) }));
 });
 function DialogFooter({ className, ...props }) {
@@ -32,10 +33,10 @@ export const Dialog = {
     Footer: DialogFooter,
     CloseButton: DialogCloseButton,
 };
-const AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
+const AlertDialogContent = /* @__PURE__ */ React.forwardRef(function AlertDialogContent({ className, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
     const scheme = useComponentSize();
     const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
-    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: cx('pui-dialog-popup pui-dialog-content pui-confirm-content', typeof className === 'string' && className) })] }));
+    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, ...props, ref: ref, className: skin('pui-dialog-popup pui-dialog-content pui-confirm-content', className) })] }));
 });
 export const AlertDialog = {
     ...BaseAlertDialog,