@surflane/ui 0.11.0 → 0.13.0

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'
+                    ? 'icon-small'
+                    : size === 'large'
+                        ? 'icon-large'
+                        : 'icon', "aria-label": text.refreshNow, onClick: () => onRefresh(), children: _jsx(Icon, { name: 'refresh' }) }))] }));
+};

package/dist/toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 export declare function Toggle<Value extends string>({ className, size, ref, ...props }: BaseToggle.Props<Value> & {
-    size?: ComponentSizeAlias | 'icon';
+    size?: ComponentSize | 'icon';
     ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;

package/dist/toggle.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useComponentSize } from './sizing.js';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { sizeName, skin } from './parts.js';
+import { skin } 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('surf-button surf-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('surf-button surf-toggle', className), "data-size": size, "data-ui-size": scheme }));
 }

package/dist/toolbar.d.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
+declare const RootPart: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+/** Home and End reach the first and last item, as they do in ToggleGroup, Tabs and
+ * Menubar; Base UI's toolbar leaves them out. Inside an input they move the caret. */
+declare function Root({ onKeyDown, ...props }: React.ComponentProps<typeof RootPart>): React.JSX.Element;
 export declare const Toolbar: {
-    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./size.js").ComponentSize;
-    } & {
-        ref?: React.Ref<HTMLDivElement> | undefined;
-    }) => React.JSX.Element;
+    Root: typeof Root;
     Group: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./size.js").ComponentSize;
     } & {
@@ -47,12 +51,9 @@ export declare const ToolbarButton: ({ ref, ...props }: Omit<Omit<Omit<import("@
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
-}) => React.JSX.Element, ToolbarRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./size.js").ComponentSize;
-} & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-}) => React.JSX.Element, ToolbarSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+}) => React.JSX.Element, ToolbarRoot: typeof Root, ToolbarSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element;
+export {};

package/dist/toolbar.js

@@ -1,9 +1,31 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { part } from './parts.js';
+const RootPart = /* @__PURE__ */ part(BaseToolbar.Root, 'surf-toolbar');
+/** Home and End reach the first and last item, as they do in ToggleGroup, Tabs and
+ * Menubar; Base UI's toolbar leaves them out. Inside an input they move the caret. */
+function Root({ onKeyDown, ...props }) {
+    return (_jsx(RootPart, { ...props, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            const toolbar = event.currentTarget;
+            if (event.defaultPrevented ||
+                (event.key !== 'Home' && event.key !== 'End') ||
+                event.target.matches('input, textarea'))
+                return;
+            const items = [
+                ...toolbar.querySelectorAll('[tabindex]'),
+            ].filter((item) => item.closest('[role="toolbar"]') === toolbar);
+            const item = event.key === 'Home' ? items[0] : items.at(-1);
+            if (!item)
+                return;
+            event.preventDefault();
+            item.focus();
+        } }));
+}
 export const Toolbar = {
     ...BaseToolbar,
-    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'surf-toolbar'),
+    Root,
     Group: /* @__PURE__ */ part(BaseToolbar.Group, 'surf-toolbar-group'),
     Button: /* @__PURE__ */ part(BaseToolbar.Button, 'surf-button surf-toolbar-button'),
     Link: /* @__PURE__ */ part(BaseToolbar.Link, 'surf-button surf-toolbar-link'),

package/dist/tooltip.d.ts

@@ -14,8 +14,6 @@ export type TooltipProps = {
     shortcut?: string;
     /** Keeps the tooltip from opening while the trigger stays as it is. */
     disabled?: boolean;
-    /** @deprecated Use `disabled`. Removed in a later minor. */
-    enabled?: boolean;
     children: React.ReactElement;
 } & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>;
-export declare function Tooltip({ label, shortcut, disabled, enabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ label, shortcut, disabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;

package/dist/tooltip.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useComponentSize } from './sizing.js';
+import { usePortalDirection } from './parts.js';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 export function TooltipProvider({ delayDuration = 150, skipDelayDuration = 300, children, }) {
     return (_jsx(BaseTooltip.Provider, { delay: delayDuration, closeDelay: 0, timeout: skipDelayDuration, children: children }));
 }
-export function Tooltip({ label, shortcut, disabled = false, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
+export function Tooltip({ label, shortcut, disabled = false, side = 'right', align, sideOffset = 10, children, }) {
     const scheme = useComponentSize();
+    const dir = usePortalDirection();
     // Disabling keeps the trigger mounted, so turning the tooltip on or off never
     // moves focus.
-    return (_jsxs(BaseTooltip.Root, { disabled: disabled || !enabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'surf-positioner surf-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'surf-tooltip', "data-ui-size": scheme, children: [label, shortcut && (_jsx("kbd", { className: 'surf-tooltip-shortcut', children: shortcut }))] }) }) })] }));
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { dir: dir, side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'surf-positioner surf-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'surf-tooltip', "data-ui-size": scheme, children: [label, shortcut && (_jsx("kbd", { className: 'surf-tooltip-shortcut', children: shortcut }))] }) }) })] }));
 }

package/dist/tree.d.ts

@@ -30,10 +30,8 @@ export type TreeProps = {
     size?: ComponentSize;
     virtualized?: boolean;
     labels?: Partial<TreeLabels>;
-    /** @deprecated Use `labels.empty`. Removed in a later minor. */
-    emptyLabel?: string;
     dir?: 'ltr' | 'rtl';
     className?: string;
 };
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, labels, emptyLabel, dir, className, }: TreeProps): React.JSX.Element;
+export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, labels, dir, className, }: TreeProps): React.JSX.Element;

package/dist/tree.js

@@ -11,7 +11,7 @@ import { ScrollArea } from './scroll-area.js';
 import { cx } from './parts.js';
 const normalize = (text) => text.normalize('NFKC').toLocaleLowerCase();
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, labels, emptyLabel, dir, className, }) {
+export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, labels, dir, className, }) {
     const scheme = useComponentSize(size);
     const touchFloor = React.useSyncExternalStore((listener) => {
         const query = matchMedia('(max-width: 760px), (pointer: coarse)');
@@ -313,5 +313,5 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                                 item.expand();
                         }, children: _jsx(Icon, { name: 'chevron-forward', "data-expanded": item.isExpanded() || undefined }) })) : (_jsx("span", { className: 'surf-tree-leaf', "aria-hidden": 'true' })),
                     _jsx("span", { className: 'surf-tree-label', children: node.label })));
-            }) })) : (_jsx("div", { role: 'status', className: 'surf-tree-empty', children: labels?.empty ?? emptyLabel ?? 'No items.' })) }));
+            }) })) : (_jsx("div", { role: 'status', className: 'surf-tree-empty', children: labels?.empty ?? 'No items.' })) }));
 }

package/dist/typography.d.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
-export declare function Heading({ level, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {
+export type HeadingVariant = 'display' | 'title' | 'page' | 'section' | 'subsection';
+export declare function Heading({ level, variant, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: 'display' | 'title' | 'page' | 'section' | 'subsection' | 'workspace' | 'document';
+    /** The type role, as Text's variant is: display, title, page, section or
+     * subsection. */
+    variant?: HeadingVariant;
+    /** @deprecated The earlier name for `variant`. `workspace` and `document` are
+     * earlier names for `display`. */
+    size?: HeadingVariant | 'workspace' | 'document';
 }): React.JSX.Element;
 export declare function Text({ as: Tag, variant, color, weight, className, ...props }: React.HTMLAttributes<HTMLElement> & {
     as?: 'p' | 'span' | 'div';
-    variant?: 'body' | 'reading' | 'table' | 'caption' | 'label' | 'mono' | 'metric';
+    /** `table` is the earlier name for `compact`, deprecated: it renders the same. */
+    variant?: 'body' | 'reading' | 'compact' | 'table' | 'caption' | 'label' | 'mono' | 'metric';
     color?: 'primary' | 'secondary' | 'muted';
     weight?: 'regular' | 'medium';
 }): React.JSX.Element;

package/dist/typography.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from './class-names.js';
-export function Heading({ level = 2, size = 'section', className, ...props }) {
+export function Heading({ level = 2, variant, size, className, ...props }) {
     const Tag = `h${level}`;
-    return (_jsx(Tag, { ...props, className: cx('surf-heading', className), "data-size": size }));
+    // The role stays in data-size, which @surflane/css's heading classes read.
+    return (_jsx(Tag, { ...props, className: cx('surf-heading', className), "data-size": variant ?? size ?? 'section' }));
 }
 export function Text({ as: Tag = 'p', variant = 'body', color = 'primary', weight = 'regular', className, ...props }) {
-    return (_jsx(Tag, { ...props, className: cx('surf-text', className), "data-variant": variant, "data-color": color, "data-weight": weight }));
+    return (_jsx(Tag, { ...props, className: cx('surf-text', className), "data-variant": variant === 'table' ? 'compact' : variant, "data-color": color, "data-weight": weight }));
 }
 export const Prose = function Prose({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cx('surf-prose', className) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.11.0",
+  "version": "0.13.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.13.0",
+    "@surflane/design-tokens": "^0.13.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",