@surflane/ui 0.10.1 → 0.12.0

package/dist/icon.d.ts

@@ -23,6 +23,7 @@ declare const shapes: {
     'arrow-back': React.JSX.Element;
     'arrow-up': React.JSX.Element;
     'arrow-down': React.JSX.Element;
+    refresh: React.JSX.Element;
     sort: React.JSX.Element;
     'external-link': React.JSX.Element;
     copy: React.JSX.Element;
@@ -31,6 +32,15 @@ declare const shapes: {
     calendar: React.JSX.Element;
     user: React.JSX.Element;
     settings: React.JSX.Element;
+    server: React.JSX.Element;
+    database: React.JSX.Element;
+    disk: React.JSX.Element;
+    chip: React.JSX.Element;
+    memory: React.JSX.Element;
+    network: React.JSX.Element;
+    bolt: React.JSX.Element;
+    token: React.JSX.Element;
+    thermometer: React.JSX.Element;
 };
 export type IconName = keyof typeof shapes;
 export declare const iconNames: readonly IconName[];

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,16 @@ 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' })] })),
 };
 export const iconNames = Object.keys(shapes);
 // These point along the reading direction, so they mirror in right-to-left text.

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';
@@ -45,8 +45,11 @@ export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, T
 export { CodeBlock, type CodeBlockProps, type CodeBlockLabels } 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';
@@ -63,6 +66,6 @@ export { Icon, iconNames, type IconName, type IconProps } from './icon.js';
 export { SizeProvider, 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

@@ -55,8 +55,11 @@ export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, T
 export { CodeBlock } 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/select.d.ts

@@ -10,11 +10,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;
@@ -24,12 +21,42 @@ export type SelectProps = {
     inputRef?: React.Ref<HTMLInputElement>;
     triggerRef?: React.Ref<HTMLButtonElement>;
     size?: ComponentSizeAlias;
+    /** 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;
+    onValueChange?: (value: string) => 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[]) => 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 {};

package/dist/select.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
@@ -7,8 +7,17 @@ import { Select as BaseSelect } from '@base-ui/react/select';
 import { sizeName, cx } from './parts.js';
 const isGroup = (item) => 'options' in item;
 const flatten = (items) => items.flatMap((item) => (isGroup(item) ? item.options : [item]));
-/** A single-choice list. The ref reaches the trigger button, as triggerRef does. */
-export const Select = function Select({ options: items, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ref, ...props }) {
+const multipleLabels = {
+    all: 'All',
+    none: 'None',
+    count: (count) => `${count} selected`,
+};
+// The value the "all" option carries; it never reaches a form or a callback.
+const ALL = '\u0000all';
+/** A choice from a list, or several with multiple. The ref reaches the trigger
+ * button, as triggerRef does. */
+export const Select = function Select(allProps) {
+    const { options: items, className, inputRef, triggerRef, size, width = 'fill', ref, multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, labels: _labels, ...props } = allProps;
     const scheme = useComponentSize(size);
     const options = flatten(items);
     // One stable callback, so the trigger ref is not detached on every render.
@@ -19,11 +28,16 @@ export const Select = function Select({ options: items, value, defaultValue, onV
             else if (target)
                 target.current = node;
     }, [ref, triggerRef]);
-    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
+    const many = allProps.multiple === true ? allProps : undefined;
+    const one = allProps.multiple === true ? undefined : allProps;
+    const initialValue = many
+        ? (many.defaultValue ?? [])
+        : (one.defaultValue ?? options[0]?.value ?? '');
+    const [localValue, setLocalValue] = React.useState(initialValue);
     const nativeInput = React.useRef(null);
-    const initialValue = defaultValue ?? options[0]?.value ?? '';
-    const resetCallback = React.useRef(onValueChange);
-    resetCallback.current = onValueChange;
+    const resetCallback = React.useRef(undefined);
+    resetCallback.current = allProps.onValueChange;
+    const resetKey = many ? initialValue.toString() : initialValue;
     React.useEffect(() => {
         const owner = nativeInput.current?.form;
         if (!owner)
@@ -35,7 +49,9 @@ export const Select = function Select({ options: items, value, defaultValue, onV
                 if (event.defaultPrevented)
                     return;
                 setLocalValue(initialValue);
-                resetCallback.current?.(initialValue);
+                resetCallback.current?.((Array.isArray(initialValue)
+                    ? [...initialValue]
+                    : initialValue));
             }, 0);
             pending.add(timer);
         };
@@ -44,20 +60,77 @@ export const Select = function Select({ options: items, value, defaultValue, onV
             owner.removeEventListener('reset', reset);
             pending.forEach(clearTimeout);
         };
-    }, [initialValue, props.form]);
-    const selected = value ?? localValue;
+        // initialValue is read through resetKey, so a new array of the same values
+        // does not re-register the listener.
+    }, [resetKey, props.form]);
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx('surf-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
-                setLocalValue(v ?? '');
-                onValueChange?.(v ?? '');
-            }, inputRef: (node) => {
-                nativeInput.current = node;
-                if (typeof inputRef === 'function')
-                    inputRef(node);
-                else if (inputRef)
-                    inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'surf-select-trigger', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'surf-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'surf-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'surf-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'surf-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'surf-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item))) }) }) }) })] }) }));
+    const setInput = (node) => {
+        nativeInput.current = node;
+        if (typeof inputRef === 'function')
+            inputRef(node);
+        else if (inputRef)
+            inputRef.current = node;
+    };
+    // Several values: the "all" option leads the list, and the trigger sums them up.
+    const choosable = options.filter((option) => !option.disabled);
+    const text = { ...multipleLabels, ...(many?.labels ?? {}) };
+    const chosen = many
+        ? (many.value ?? localValue)
+        : [];
+    const everything = choosable.length > 0 &&
+        choosable.every((option) => chosen.includes(option.value));
+    const summary = (values) => values.length === 0
+        ? text.none
+        : choosable.every((option) => values.includes(option.value))
+            ? text.all
+            : values.length === 1
+                ? options.find((option) => option.value === values[0])?.label
+                : text.count(values.length);
+    const selected = many
+        ? everything
+            ? [ALL, ...chosen]
+            : chosen
+        : (one.value ?? localValue);
+    const value = many ? summary(chosen) : _jsx(BaseSelect.Value, {});
+    // Content width: every label the trigger can show, stacked in one cell.
+    const sizes = many
+        ? [
+            text.all,
+            text.none,
+            text.count(options.length),
+            ...options.map((option) => option.label),
+        ]
+        : options.map((option) => option.label);
+    return (_jsx("span", { className: cx('surf-select', className), "data-size": sizeName(size), "data-ui-size": scheme, "data-width": width, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, multiple: multiple, value: selected, onValueChange: (next) => {
+                if (many) {
+                    const list = next ?? [];
+                    const toggledAll = list.includes(ALL) !== everything;
+                    const values = toggledAll
+                        ? everything
+                            ? []
+                            : choosable.map((option) => option.value)
+                        : // Unchecking one option of "all" leaves the others.
+                            list.filter((item) => item !== ALL);
+                    setLocalValue(values);
+                    many.onValueChange?.(values);
+                }
+                else {
+                    setLocalValue(next ?? '');
+                    one.onValueChange?.(next ?? '');
+                }
+            }, inputRef: setInput, 
+            // A multiple Select submits its own inputs, without the "all" value.
+            name: many ? undefined : name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: setTrigger, className: 'surf-select-trigger', "data-value": many ? chosen.join(' ') : selected, children: [width === 'content' ? (
+                        // Every label sits in one cell, hidden but the chosen one, so the
+                        // trigger is as wide as the longest.
+                        _jsxs("span", { className: 'surf-select-sizer', children: [_jsx("span", { className: 'surf-select-value', children: value }), sizes.map((label, index) => (_jsx("span", { "aria-hidden": 'true', children: label }, index)))] })) : many ? (_jsx("span", { className: 'surf-select-value', children: value })) : (value), _jsx(BaseSelect.Icon, { className: 'surf-select-icon', children: _jsx(Icon, { name: 'chevron-down' }) })] }), many &&
+                    name &&
+                    chosen.map((item) => (_jsx("input", { type: 'hidden', name: name, value: item, form: form }, item))), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'surf-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'surf-select-popup', "data-ui-size": scheme, children: _jsxs(BaseSelect.List, { children: [many && (_jsxs(_Fragment, { children: [renderOption({
+                                                value: ALL,
+                                                label: text.all,
+                                                disabled: choosable.length === 0,
+                                            }), _jsx(BaseSelect.Separator, { className: 'surf-select-separator' })] })), items.map((item, index) => isGroup(item) ? (_jsxs(BaseSelect.Group, { className: 'surf-select-group', children: [_jsx(BaseSelect.GroupLabel, { className: 'surf-select-group-label', children: item.label }), item.options.map(renderOption)] }, index)) : (renderOption(item)))] }) }) }) })] }) }));
 };
 function renderOption(option) {
-    return (_jsxs(BaseSelect.Item, { className: 'surf-select-item', value: option.value, "data-option-value": option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'surf-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
+    return (_jsxs(BaseSelect.Item, { className: 'surf-select-item', value: option.value, "data-option-value": option.value === ALL ? undefined : option.value, disabled: option.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'surf-select-check', children: _jsx(Icon, { name: 'check' }) }), _jsx(BaseSelect.ItemText, { children: option.label })] }, option.value));
 }

package/dist/stat.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type StatusTone } from './status.js';
 export type StatDirection = 'up' | 'down' | 'flat';
 export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'children'> & {
     /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
@@ -11,6 +12,15 @@ export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'childr
      * still points the way the value moved. */
     lowerIsBetter?: boolean;
 };
+export type StatStatusProps = React.ComponentPropsWithoutRef<'dd'> & {
+    /** The value's state: caution for one to watch, danger for one past its limit. */
+    tone: StatusTone;
+};
+export type StatGroupProps = React.ComponentPropsWithoutRef<'div'> & {
+    /** What every value in the group measures, such as "GPU temperature". It shows
+     * above them and names the group. */
+    label: string;
+};
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export declare const Stat: {
@@ -29,10 +39,16 @@ export declare const Stat: {
     Change: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element;
+    Status: ({ tone, className, children, ref, ...props }: StatStatusProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
     Caption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
         size?: import("./size.js").ComponentSize;
         ref?: React.Ref<HTMLElement> | undefined;
     }) => React.JSX.Element;
+    Group: ({ label, className, children, ref, ...props }: StatGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
 };
 export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
@@ -45,7 +61,11 @@ export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<Rea
     ref?: React.Ref<HTMLElement> | undefined;
 }) => React.JSX.Element, StatChange: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
     ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, StatStatus: ({ tone, className, children, ref, ...props }: StatStatusProps & {
+    ref?: React.Ref<HTMLElement>;
 }) => React.JSX.Element, StatCaption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
     ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, StatGroup: ({ label, className, children, ref, ...props }: StatGroupProps & {
+    ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/stat.js

@@ -3,6 +3,7 @@ import { Icon } from './icon.js';
 import { cx } from './class-names.js';
 import { elementPart } from './element-part.js';
 import { formatPercent } from './format.js';
+import { StatusIcon } from './status.js';
 const signed = (value) => formatPercent(value, { signed: true });
 const arrows = { up: 'arrow-up', down: 'arrow-down', flat: 'minus' };
 /** A change against an earlier value: an arrow, a signed figure and its direction's
@@ -12,6 +13,17 @@ const ChangePart = function StatChange({ value, format = signed, direction, lowe
     const tone = way === 'flat' || !lowerIsBetter ? way : way === 'up' ? 'down' : 'up';
     return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('surf-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
 };
+/** The value's state against a threshold, such as "Below 30 GiB": the tone's icon and
+ * text in its color. A caution or danger status colors the value too, and the text
+ * says why, so color is never alone. */
+const StatusPart = function StatStatus({ tone, className, children, ref, ...props }) {
+    return (_jsxs("dd", { ...props, ref: ref, "data-tone": tone, className: cx('surf-stat-status', className), children: [_jsx(StatusIcon, { tone: tone }), children] }));
+};
+/** Several values of one measure side by side, such as one per node: a shared label
+ * over Stat.Roots whose own labels name each. */
+const GroupPart = function StatGroup({ label, className, children, ref, ...props }) {
+    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-stat-group', className), children: [_jsx("span", { className: 'surf-stat-group-label', "aria-hidden": 'true', children: label }), _jsx("div", { className: 'surf-stat-group-items', children: children })] }));
+};
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export const Stat = {
@@ -19,7 +31,9 @@ export const Stat = {
     Label: /* @__PURE__ */ elementPart('dt', 'surf-stat-label'),
     Value: /* @__PURE__ */ elementPart('dd', 'surf-stat-value'),
     Change: ChangePart,
+    Status: StatusPart,
     Caption: /* @__PURE__ */ elementPart('dd', 'surf-stat-caption'),
+    Group: GroupPart,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Caption: StatCaption, } = Stat;
+export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Status: StatStatus, Caption: StatCaption, Group: StatGroup, } = Stat;

package/dist/time-range-picker.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { ComponentSizeAlias } from './size.js';
+/** A span of time back from now, or a refresh interval, in milliseconds. */
+export type TimeRangeOption = {
+    value: number;
+    label: string;
+};
+export declare const timeRangeOptions: readonly TimeRangeOption[];
+/** 0 is off. */
+export declare const refreshIntervalOptions: readonly TimeRangeOption[];
+export type TimeRangePickerLabels = {
+    /** The range select's name. */
+    range: string;
+    /** The refresh interval select's name. */
+    refresh: string;
+    /** The button that refreshes now. */
+    refreshNow: string;
+};
+export type TimeRangePickerProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /** Names the group, such as "Dashboard time". */
+    label: string;
+    /** The span back from now, in ms; one of ranges. */
+    range: number;
+    onRangeChange: (range: number) => void;
+    /** The span options, such as timeRangeOptions with translated labels. */
+    ranges?: readonly TimeRangeOption[];
+    /** How often onRefresh runs, in ms; 0 is off. Leave it out for no interval select. */
+    refreshInterval?: number;
+    onRefreshIntervalChange?: (interval: number) => void;
+    refreshIntervals?: readonly TimeRangeOption[];
+    /** Runs when the button is pressed and on every interval while the page is shown.
+     * Leave it out for no refresh button. */
+    onRefresh?: () => void;
+    labels?: Partial<TimeRangePickerLabels>;
+    size?: ComponentSizeAlias;
+};
+/** The span a monitoring screen shows, back from now, with how often it refreshes and
+ * a button to refresh now. For a fixed span between two dates, put a DateRangePicker
+ * beside it. */
+export declare const TimeRangePicker: ({ label, range, onRangeChange, ranges, refreshInterval, onRefreshIntervalChange, refreshIntervals: intervals, onRefresh, labels, size, className, ref, ...props }: TimeRangePickerProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/time-range-picker.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { Icon } from './icon.js';
+import { Select } from './select.js';
+import { cx } from './class-names.js';
+const MINUTE = 60_000, HOUR = 60 * MINUTE, DAY = 24 * HOUR;
+export const timeRangeOptions = [
+    { value: 15 * MINUTE, label: 'Last 15 minutes' },
+    { value: HOUR, label: 'Last hour' },
+    { value: 6 * HOUR, label: 'Last 6 hours' },
+    { value: DAY, label: 'Last 24 hours' },
+    { value: 7 * DAY, label: 'Last 7 days' },
+    { value: 30 * DAY, label: 'Last 30 days' },
+];
+/** 0 is off. */
+export const refreshIntervalOptions = [
+    { value: 0, label: 'Off' },
+    { value: 10_000, label: 'Every 10 seconds' },
+    { value: 30_000, label: 'Every 30 seconds' },
+    { value: MINUTE, label: 'Every minute' },
+    { value: 5 * MINUTE, label: 'Every 5 minutes' },
+];
+const pickerLabels = {
+    range: 'Time range',
+    refresh: 'Refresh interval',
+    refreshNow: 'Refresh now',
+};
+/** The span a monitoring screen shows, back from now, with how often it refreshes and
+ * a button to refresh now. For a fixed span between two dates, put a DateRangePicker
+ * beside it. */
+export const TimeRangePicker = function TimeRangePicker({ label, range, onRangeChange, ranges = timeRangeOptions, refreshInterval, onRefreshIntervalChange, refreshIntervals: intervals = refreshIntervalOptions, onRefresh, labels, size, className, ref, ...props }) {
+    const text = { ...pickerLabels, ...labels };
+    const refresh = React.useRef(onRefresh);
+    refresh.current = onRefresh;
+    // The interval pauses while the page is hidden, and refreshes once it shows again.
+    React.useEffect(() => {
+        if (!refreshInterval || !refresh.current)
+            return;
+        let due = false;
+        const timer = setInterval(() => {
+            if (document.hidden)
+                due = true;
+            else
+                refresh.current?.();
+        }, refreshInterval);
+        const shown = () => {
+            if (!document.hidden && due) {
+                due = false;
+                refresh.current?.();
+            }
+        };
+        document.addEventListener('visibilitychange', shown);
+        return () => {
+            clearInterval(timer);
+            document.removeEventListener('visibilitychange', shown);
+        };
+    }, [refreshInterval]);
+    const options = (list) => list.map((option) => ({
+        value: String(option.value),
+        label: option.label,
+    }));
+    return (_jsxs("div", { role: 'group', "aria-label": label, ...props, ref: ref, className: cx('surf-time-range', className), children: [_jsx(Select, { width: 'content', size: size, options: options(ranges), value: String(range), onValueChange: (value) => onRangeChange(Number(value)), "aria-label": text.range }), refreshInterval !== undefined && (_jsx(Select, { width: 'content', size: size, options: options(intervals), value: String(refreshInterval), onValueChange: (value) => onRefreshIntervalChange?.(Number(value)), "aria-label": text.refresh })), onRefresh && (_jsx(Button, { variant: 'outline', size: size === 'small' || size === 'sm'
+                    ? 'icon-small'
+                    : size === 'large' || size === 'lg'
+                        ? 'icon-large'
+                        : 'icon', "aria-label": text.refreshNow, onClick: () => onRefresh(), children: _jsx(Icon, { name: 'refresh' }) }))] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -90,6 +90,9 @@
     "./list.css": "./dist/css/list.css",
     "./stat.css": "./dist/css/stat.css",
     "./sparkline.css": "./dist/css/sparkline.css",
+    "./bar-list.css": "./dist/css/bar-list.css",
+    "./dashboard.css": "./dist/css/dashboard.css",
+    "./time-range-picker.css": "./dist/css/time-range-picker.css",
     "./tree.css": "./dist/css/tree.css",
     "./chart.css": "./dist/css/chart.css",
     "./scroll-area.css": "./dist/css/scroll-area.css",
@@ -316,6 +319,18 @@
       "types": "./dist/sparkline.d.ts",
       "import": "./dist/sparkline.js"
     },
+    "./bar-list": {
+      "types": "./dist/bar-list.d.ts",
+      "import": "./dist/bar-list.js"
+    },
+    "./dashboard": {
+      "types": "./dist/dashboard.d.ts",
+      "import": "./dist/dashboard.js"
+    },
+    "./time-range-picker": {
+      "types": "./dist/time-range-picker.d.ts",
+      "import": "./dist/time-range-picker.js"
+    },
     "./tree": {
       "types": "./dist/tree.d.ts",
       "import": "./dist/tree.js"
@@ -406,8 +421,8 @@
     "@base-ui/react": "^1.9.0",
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
-    "@surflane/css": "^0.10.1",
-    "@surflane/design-tokens": "^0.10.1",
+    "@surflane/css": "^0.12.0",
+    "@surflane/design-tokens": "^0.12.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",