@surflane/ui 0.11.0 → 0.12.0

package/dist/css/rules/bottom-navigation.css

@@ -117,6 +117,22 @@
     font-variant-numeric: tabular-nums;
     text-align: center;
   }
+  /* Status fills, each 4.5:1 against the canvas-colored count. */
+  .surf-bottom-nav-badge[data-tone='caution'] {
+    background: var(--surf-status-caution-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='success'] {
+    background: var(--surf-status-success-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='info'] {
+    background: var(--surf-status-info-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='progress'] {
+    background: var(--surf-status-progress-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='neutral'] {
+    background: var(--surf-status-neutral-fg);
+  }
   .surf-bottom-nav-badge[data-dot] {
     inset-block-start: 0;
     min-inline-size: 0;

package/dist/css/rules/card.css

@@ -7,4 +7,9 @@
     padding: var(--surf-surface-padding, var(--surf-ui-card-padding));
     gap: var(--surf-ui-surface-padding);
   }
+  :where([data-ui-size], [data-ui-size] *).surf-card-title {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/chart.css

@@ -54,7 +54,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--surf-space-2);
-    min-height: 36px;
+    min-height: var(--surf-control-height);
     padding: var(--surf-space-1) var(--surf-space-2);
     border: 0;
     border-radius: var(--surf-radius-md);
@@ -66,9 +66,39 @@
     cursor: pointer;
     text-align: start;
   }
-  .surf-chart-legend-button svg {
+  .surf-chart-legend-button svg,
+  .surf-chart-legend-reference svg {
     flex: none;
   }
+  /* A threshold or band: named with its value, not a toggle. */
+  .surf-chart-legend-reference {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--surf-space-2);
+    min-height: var(--surf-control-height);
+    padding: var(--surf-space-1) var(--surf-space-2);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+  }
+  .surf-chart-legend-more {
+    font-variant-numeric: tabular-nums;
+  }
+  /* The series past legendLimit, one per row in a popover. */
+  .surf-chart-legend-list {
+    display: grid;
+    gap: var(--surf-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .surf-chart-legend-list .surf-chart-legend-button {
+    inline-size: 100%;
+  }
+  .surf-chart-key[data-position='bottom'] .surf-chart-legend {
+    margin-inline-start: 0;
+  }
   .surf-chart-legend-button span {
     overflow-wrap: anywhere;
   }
@@ -166,6 +196,10 @@
     inline-size: var(--surf-space-6);
     block-size: var(--surf-space-4);
   }
+  .surf-chart-tooltip-total {
+    padding-block-start: var(--surf-space-1);
+    border-block-start: 1px solid var(--surf-line);
+  }
   .surf-chart-tooltip-value {
     white-space: nowrap;
     margin-inline-start: auto;
@@ -231,8 +265,39 @@
   .surf-chart-table .surf-scroll-viewport {
     max-block-size: 320px;
   }
+  /* Compact, for charts in dashboard cards: the plot, its legend and the floating
+     values show; the caption, keyboard help, readout and x-axis name stay for
+     assistive technology. */
+  .surf-chart[data-density='compact'] {
+    gap: var(--surf-space-2);
+  }
+  .surf-chart[data-density='compact']
+    :is(
+      .surf-chart-caption,
+      .surf-chart-help,
+      .surf-chart-inspector,
+      .surf-chart-x-label
+    ) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .surf-chart[data-density='compact']
+    :is(.surf-chart-legend-button, .surf-chart-legend-reference) {
+    min-height: var(--surf-space-6);
+    padding-block: 0;
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+  }
   @media (max-width: 760px), (pointer: coarse) {
-    .surf-chart-legend-button {
+    .surf-chart-legend-button,
+    .surf-chart[data-density='compact'] .surf-chart-legend-button {
       min-height: var(--surf-control-target-size);
     }
   }
@@ -251,6 +316,12 @@
       --surf-chart-category-4: CanvasText;
       --surf-chart-category-5: CanvasText;
       --surf-chart-category-6: CanvasText;
+      --surf-chart-category-7: CanvasText;
+      --surf-chart-category-8: CanvasText;
+      --surf-chart-category-9: CanvasText;
+      --surf-chart-category-10: CanvasText;
+      --surf-chart-category-11: CanvasText;
+      --surf-chart-category-12: CanvasText;
     }
     .surf-chart-plot .recharts-surface,
     .surf-chart-mark {

package/dist/css/rules/dashboard.css

@@ -0,0 +1,66 @@
+/* Dashboard, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* As many columns as fit a panel's minimum width; one on a phone. */
+  .surf-dashboard {
+    --surf-dashboard-panel-min-width: 20rem;
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(100%, var(--surf-dashboard-panel-min-width)), 1fr)
+    );
+    gap: var(--surf-space-4);
+    min-inline-size: 0;
+  }
+  /* The header keeps its height; the content takes the rest of a stretched row. */
+  .surf-dashboard-panel {
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
+    min-inline-size: 0;
+  }
+  .surf-dashboard-panel[data-span='2'] {
+    grid-column: span 2;
+  }
+  .surf-dashboard-panel[data-span='3'] {
+    grid-column: span 3;
+  }
+  .surf-dashboard-panel[data-span='full'] {
+    grid-column: 1 / -1;
+  }
+  /* As tall as an icon button, with or without one, so titles line up across a row. */
+  .surf-dashboard-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--surf-space-2);
+    min-inline-size: 0;
+    min-block-size: var(--surf-control-height);
+  }
+  .surf-dashboard-panel-header .surf-card-title {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-dashboard-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--surf-space-1);
+    margin-inline-start: auto;
+  }
+  .surf-dashboard-panel-body {
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  .surf-dashboard-panel-empty {
+    margin: 0;
+    color: var(--surf-ink-muted);
+  }
+  /* A phone shows one panel a row, whatever it spans. */
+  @media (max-width: 760px) {
+    .surf-dashboard-panel[data-span] {
+      grid-column: auto;
+    }
+  }
+}

package/dist/css/rules/dialog.css

@@ -158,9 +158,20 @@
   ) {
     padding-inline: var(--surf-ui-card-padding);
   }
+  /* Head and footer follow the size's card padding: 24/20px and 20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-dialog-header {
+    padding-block: var(--surf-ui-card-padding)
+      calc(var(--surf-ui-card-padding) - var(--surf-space-1));
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-footer {
+    padding-block: calc(var(--surf-ui-card-padding) - var(--surf-space-1));
+  }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-header h2 {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/filter-bar.css

@@ -15,16 +15,23 @@
     gap: var(--surf-space-4);
     min-inline-size: 0;
   }
+  /* A filter keeps its width; only the search field takes the room left in the row. */
   .surf-filter-bar-field {
     display: grid;
     gap: var(--surf-space-2);
-    flex: 1 1 12rem;
+    flex: 0 1 12rem;
     min-inline-size: 0;
     max-inline-size: 100%;
   }
   .surf-filter-bar-field[data-width='search'] {
     flex: 2 1 20rem;
   }
+  /* On a phone each field fills its row. */
+  @media (max-width: 760px) {
+    .surf-filter-bar-field {
+      flex-grow: 1;
+    }
+  }
   .surf-filter-bar-field > :is(.surf-control, .surf-select-trigger) {
     inline-size: 100%;
     min-inline-size: 0;

package/dist/css/rules/panel.css

@@ -217,10 +217,18 @@
   ) {
     padding-inline: var(--surf-ui-card-padding);
   }
-  /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap. */
+  /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap.
+   * Above and below, the head follows the size's card padding: 24/20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-panel-header {
+    padding-block: var(--surf-ui-card-padding)
+      calc(var(--surf-ui-card-padding) - var(--surf-space-1));
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-panel-title {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/select.css

@@ -11,11 +11,35 @@
     text-align: start;
     cursor: pointer;
   }
-  .surf-select-trigger > span:first-child {
+  .surf-select-trigger > span:first-child,
+  .surf-select-value {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Content width: the trigger fits its longest option and keeps that width. */
+  .surf-select[data-width='content'],
+  .surf-select[data-width='content'] .surf-select-trigger {
+    width: auto;
+  }
+  .surf-select-sizer {
+    display: grid;
+    min-width: 0;
+  }
+  .surf-select-sizer > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-select-sizer > [aria-hidden='true'] {
+    visibility: hidden;
+  }
+  .surf-select-separator {
+    block-size: 1px;
+    margin-block: var(--surf-space-1);
+    background: var(--surf-line);
+  }
   .surf-select-icon {
     display: flex;
     align-items: center;

package/dist/css/rules/sizing.css

@@ -11,6 +11,10 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-small);
     --surf-ui-file-padding: var(--surf-size-file-padding-small);
     --surf-ui-content-gap: var(--surf-size-content-gap-small);
+    /* Surface titles (Card, Sheet, Dialog) step down one role at Small. */
+    --surf-ui-title-size: var(--surf-type-subsection-size);
+    --surf-ui-title-leading: var(--surf-type-subsection-leading);
+    --surf-ui-title-tracking: var(--surf-type-subsection-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-small);
     --surf-ui-control-padding: var(--surf-size-control-padding-small);
@@ -51,6 +55,9 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-default);
     --surf-ui-file-padding: var(--surf-size-file-padding-default);
     --surf-ui-content-gap: var(--surf-size-content-gap-default);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-default);
     --surf-ui-control-padding: var(--surf-size-control-padding-default);
@@ -91,6 +98,9 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-large);
     --surf-ui-file-padding: var(--surf-size-file-padding-large);
     --surf-ui-content-gap: var(--surf-size-content-gap-large);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-large);
     --surf-ui-control-padding: var(--surf-size-control-padding-large);

package/dist/css/rules/stat.css

@@ -49,6 +49,35 @@
   .surf-stat-change[data-tone='down'] {
     color: var(--surf-trend-down-fg);
   }
+  /* The value's state: the tone's icon and text, on the value's line. */
+  .surf-stat-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--surf-space-1);
+    color: var(--surf-status-neutral-fg);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+    font-weight: var(--surf-weight-medium);
+  }
+  .surf-stat-status[data-tone='info'] {
+    color: var(--surf-status-info-fg);
+  }
+  .surf-stat-status[data-tone='success'] {
+    color: var(--surf-status-success-fg);
+  }
+  .surf-stat-status[data-tone='progress'] {
+    color: var(--surf-status-progress-fg);
+  }
+  /* Past a threshold the value takes the status color as well. */
+  .surf-stat-status[data-tone='caution'],
+  .surf-stat:has(> .surf-stat-status[data-tone='caution']) > .surf-stat-value {
+    color: var(--surf-status-caution-fg);
+  }
+  .surf-stat-status[data-tone='danger'],
+  .surf-stat:has(> .surf-stat-status[data-tone='danger']) > .surf-stat-value {
+    color: var(--surf-status-danger-fg);
+  }
   .surf-stat-caption {
     flex: 1 0 100%;
     color: var(--surf-ink-muted);
@@ -56,4 +85,32 @@
     line-height: var(--surf-type-caption-leading);
     letter-spacing: var(--surf-type-caption-tracking);
   }
+  /* A group: the shared label, then each value under its own name, side by side. */
+  .surf-stat-group {
+    display: grid;
+    gap: var(--surf-space-2);
+    min-width: 0;
+  }
+  .surf-stat-group-label {
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+  }
+  /* Each value takes its own width and wraps to a new line when the row is full. */
+  .surf-stat-group-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--surf-space-3) var(--surf-space-6);
+    min-width: 0;
+  }
+  /* In a group each value stacks its lines, so it is only as wide as the widest. */
+  .surf-stat-group-items > .surf-stat {
+    display: grid;
+    justify-items: start;
+    align-content: start;
+  }
+  .surf-stat-group-items .surf-stat-label {
+    color: var(--surf-ink-body);
+  }
 }

package/dist/css/rules/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* The span, the interval and the button sit on one line in a header or toolbar. */
+  .surf-time-range {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--surf-space-2);
+    max-inline-size: 100%;
+  }
+}

package/dist/css/styles.css

@@ -62,6 +62,7 @@
 @import './rules/app-shell.css';
 @import './rules/tree.css';
 @import './rules/date-picker.css';
+@import './rules/time-range-picker.css';
 @import './rules/chart.css';
 @import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';
@@ -73,8 +74,10 @@
 @import './rules/list.css';
 @import './rules/stat.css';
 @import './rules/sparkline.css';
+@import './rules/bar-list.css';
 @import '@surflane/css/presentation/inline-message.css';
 @import './rules/inline-message.css';
+@import './rules/dashboard.css';
 @import './rules/syntax-highlighter.css';
 @import '@surflane/css/presentation/code.css';
 @import './rules/code.css';

package/dist/css/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/select.css';
+@import './rules/button.css';
+@import './rules/time-range-picker.css';

package/dist/dashboard.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export type DashboardRootProps = React.ComponentPropsWithoutRef<'div'>;
+export type DashboardPanelLabels = {
+    /** The button that shows the description, given the title. */
+    about: (title: string) => string;
+    loading: string;
+    refreshing: string;
+    error: string;
+    retry: string;
+    empty: string;
+};
+export type DashboardPanelProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & {
+    title: string;
+    /** What the panel shows and how it is measured, behind an info button by the title. */
+    description?: React.ReactNode;
+    /** The heading level of the title. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** loading shows a placeholder until the first data arrives; error and empty
+     * replace the content with a message. */
+    state?: 'ready' | 'loading' | 'error' | 'empty';
+    /** New data is on its way: the content stays, a spinner shows by the title and the
+     * panel is busy for assistive technology. */
+    refreshing?: boolean;
+    /** Shows a retry button in the error message. */
+    onRetry?: () => void;
+    /** Why it failed or why it is empty, in place of the default text. */
+    message?: React.ReactNode;
+    /** Controls at the end of the header, such as a menu. */
+    actions?: React.ReactNode;
+    /** Columns the panel spans where they fit; a phone shows one. */
+    span?: 1 | 2 | 3 | 'full';
+    labels?: Partial<DashboardPanelLabels>;
+};
+export declare const Dashboard: {
+    Root: ({ className, ref, ...props }: DashboardRootProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Panel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, labels, className, children, ref, ...props }: DashboardPanelProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+};
+export declare const DashboardRoot: ({ className, ref, ...props }: DashboardRootProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, DashboardPanel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, labels, className, children, ref, ...props }: DashboardPanelProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/dashboard.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { Card } from './card.js';
+import { Icon } from './icon.js';
+import { InlineMessage } from './inline-message.js';
+import { Popover } from './popover.js';
+import { Skeleton } from './skeleton.js';
+import { Spinner } from './spinner.js';
+import { cx } from './class-names.js';
+/** The panels of a dashboard on a responsive grid: as many columns as fit panels of
+ * --surf-dashboard-panel-min-width (20rem), one column on a phone. */
+const Root = function DashboardRoot({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-dashboard', className) }));
+};
+const panelLabels = {
+    about: (title) => `About ${title}`,
+    loading: 'Loading',
+    refreshing: 'Refreshing',
+    error: 'This panel could not load.',
+    retry: 'Retry',
+    empty: 'No data in this range.',
+};
+/** One panel of a dashboard: a card with its title, an optional description, the
+ * states of its data and the content. The content takes the room the row gives it. */
+const Panel = function DashboardPanel({ title, description, level = 3, state = 'ready', refreshing = false, onRetry, message, actions, span, labels, className, children, ref, ...props }) {
+    const text = { ...panelLabels, ...labels };
+    const id = React.useId();
+    const busy = state === 'loading' || refreshing;
+    return (_jsxs(Card.Root, { role: 'group', "aria-labelledby": `${id}-title`, "aria-busy": busy || undefined, ...props, ref: ref, "data-span": span, "data-state": state, className: cx('surf-dashboard-panel', className), children: [_jsxs("div", { className: 'surf-dashboard-panel-header', children: [_jsx(Card.Title, { level: level, id: `${id}-title`, children: title }), description && (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { variant: 'ghost', size: 'icon-small', "aria-label": text.about(title) }), children: _jsx(Icon, { name: 'info' }) }), _jsx(Popover.Content, { size: 'small', children: _jsx(Popover.Description, { children: description }) })] })), refreshing && state !== 'loading' && (_jsx(Spinner, { size: 'small', label: text.refreshing })), actions && (_jsx("div", { className: 'surf-dashboard-panel-actions', children: actions }))] }), _jsx("div", { className: 'surf-dashboard-panel-body', children: state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { shape: 'block' }), _jsx("span", { className: 'surf-feedback-sr', children: text.loading })] })) : state === 'error' ? (_jsxs(InlineMessage.Root, { tone: 'danger', children: [_jsx(InlineMessage.Icon, { tone: 'danger' }), _jsxs(InlineMessage.Content, { children: [_jsx(InlineMessage.Description, { children: message ?? text.error }), onRetry && (_jsx(InlineMessage.Actions, { children: _jsx(Button, { variant: 'outline', size: 'small', onClick: onRetry, children: text.retry }) }))] })] })) : state === 'empty' ? (_jsx("p", { className: 'surf-dashboard-panel-empty', children: message ?? text.empty })) : (children) })] }));
+};
+export const Dashboard = { Root, Panel };
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: DashboardRoot, Panel: DashboardPanel } = Dashboard;

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';