@surflane/ui 0.11.0 → 0.12.0

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.11.0",
+  "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.11.0",
-    "@surflane/design-tokens": "^0.11.0",
+    "@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",