@surflane/ui 0.10.1 → 0.12.0

package/dist/app-shell.d.ts

@@ -25,6 +25,11 @@ export type AppShellSidebarToggleProps = Omit<ButtonProps, 'children'> & {
     labels?: Partial<AppShellSidebarToggleLabels>;
     children?: React.ReactNode;
 };
+export type AppShellMenuTriggerProps = Omit<ButtonProps, 'children'> & {
+    /** The button's name. Say what it opens. */
+    label?: string;
+    children?: React.ReactNode;
+};
 export type AppShellBrandProps = Omit<useRender.ComponentProps<'div'>, 'ref' | 'children'> & {
     /** The product mark, about 24px. It is decorative: the name names the brand. */
     mark?: React.ReactNode;
@@ -55,6 +60,9 @@ export declare const AppShell: {
     SidebarToggle: ({ labels, className, children, onClick, ref, ...props }: AppShellSidebarToggleProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }) => React.JSX.Element;
+    MenuTrigger: ({ label, className, children, ref, ...props }: AppShellMenuTriggerProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
     Brand: ({ mark, name, description, render, className, ref, ...props }: AppShellBrandProps & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -85,6 +93,8 @@ export declare const AppShellRoot: ({ collapsed, defaultCollapsed, onCollapsedCh
     ref?: React.Ref<HTMLElement>;
 }) => React.JSX.Element, AppShellSidebarToggle: ({ labels, className, children, onClick, ref, ...props }: AppShellSidebarToggleProps & {
     ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, AppShellMenuTrigger: ({ label, className, children, ref, ...props }: AppShellMenuTriggerProps & {
+    ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element, AppShellBrand: ({ mark, name, description, render, className, ref, ...props }: AppShellBrandProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>, AppShellNav: ({ label, className, children, ref, ...props }: AppShellNavProps & {

package/dist/app-shell.js

@@ -75,6 +75,11 @@ const SidebarToggle = function AppShellSidebarToggle({ labels, className, childr
                     shell.setCollapsed(!shell.collapsed);
             }, children: children ?? _jsx(Icon, { name: 'sidebar' }) }) }));
 };
+/** Opens the caller's navigation, such as a Sheet, where the sidebar is hidden: at
+ * 760px and narrower it shows at the header's end, and above that it is hidden. */
+const MenuTrigger = function AppShellMenuTrigger({ label = 'Open navigation', className, children, ref, ...props }) {
+    return (_jsx(Button, { variant: 'ghost', size: 'icon', ...props, ref: ref, "aria-label": label, className: skin('surf-app-shell-menu-trigger', className), children: children ?? _jsx(Icon, { name: 'menu', decorative: true }) }));
+};
 const Header = function AppShellHeader({ className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, className: cx('surf-app-shell-header', className) }));
 };
@@ -144,6 +149,7 @@ export const AppShell = {
     Header,
     Sidebar,
     SidebarToggle,
+    MenuTrigger,
     Brand,
     Nav,
     Content,
@@ -153,4 +159,4 @@ export const AppShell = {
     Link,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, Brand: AppShellBrand, Nav: AppShellNav, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;
+export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, MenuTrigger: AppShellMenuTrigger, Brand: AppShellBrand, Nav: AppShellNav, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;

package/dist/bar-list.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type BarListItem = {
+    id: string;
+    /** What the row measures, such as a directory or a project. */
+    label: string;
+    /** A second, quieter name under the label, such as a path. */
+    detail?: string;
+    value: number;
+    /** The value as written, such as "412 GiB". Defaults to the formatted value. */
+    text?: string;
+};
+export type BarListProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
+    /** Names the list, such as "Disk used by directory". */
+    label: string;
+    items: readonly BarListItem[];
+    /** The value a full bar stands for. Defaults to the largest value. */
+    max?: number;
+    /** Orders the rows from the largest value down. Turn it off to keep your order. */
+    sorted?: boolean;
+    /** The rows shown before the list scrolls inside itself. */
+    maxRows?: number;
+    /** Writes a value that has no text. */
+    formatValue?: (value: number) => string;
+    locale?: string;
+};
+/** A ranked list of named values, each with a bar in proportion to the largest, such
+ * as disk by directory or tokens by project. Names and values are text; the bars are
+ * decoration. */
+export declare const BarList: ({ label, items, max, sorted, maxRows, formatValue, locale, className, style, ref, ...props }: BarListProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/bar-list.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './class-names.js';
+import { ScrollArea } from './scroll-area.js';
+/** A ranked list of named values, each with a bar in proportion to the largest, such
+ * as disk by directory or tokens by project. Names and values are text; the bars are
+ * decoration. */
+export const BarList = function BarList({ label, items, max, sorted = true, maxRows, formatValue, locale, className, style, ref, ...props }) {
+    const rows = sorted ? [...items].sort((a, b) => b.value - a.value) : items;
+    const top = max ?? rows.reduce((largest, item) => Math.max(largest, item.value), 0);
+    const number = new Intl.NumberFormat(locale);
+    const write = (value) => formatValue ? formatValue(value) : number.format(value);
+    const scrolls = maxRows !== undefined && rows.length > maxRows;
+    const list = (_jsx("ol", { className: 'surf-bar-list-items', "aria-label": label, children: rows.map((item) => {
+            const share = top > 0 && Number.isFinite(item.value)
+                ? Math.min(100, Math.max(0, (item.value / top) * 100))
+                : 0;
+            return (_jsxs("li", { className: 'surf-bar-list-item', children: [_jsxs("span", { className: 'surf-bar-list-label', children: [_jsx("span", { className: 'surf-bar-list-name', title: item.label, children: item.label }), item.detail && (_jsx("span", { className: 'surf-bar-list-detail', title: item.detail, children: item.detail }))] }), _jsx("span", { className: 'surf-bar-list-bar', "aria-hidden": 'true', children: _jsx("span", { className: 'surf-bar-list-fill', style: { inlineSize: `${share}%` } }) }), _jsx("span", { className: 'surf-bar-list-value', children: item.text ?? write(item.value) })] }, item.id));
+        }) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-bar-list', className), "data-detail": items.some((item) => item.detail) || undefined, style: scrolls
+            ? {
+                ...style,
+                '--surf-bar-list-rows': maxRows,
+            }
+            : style, children: scrolls ? (_jsx(ScrollArea, { orientation: 'vertical', label: label, children: list })) : (list) }));
+};

package/dist/bottom-navigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { StatusTone } from './status.js';
 export type BottomNavigationRootProps = React.ComponentPropsWithoutRef<'nav'> & {
     /** Names the navigation, such as "Primary". */
     'aria-label': string;
@@ -20,17 +21,20 @@ export type BottomNavigationItemProps = Omit<useRender.ComponentProps<'a'>, 'ref
     /** What the badge means, read after the label, such as "3 unread". A count reads
      * as its number without it; a dot needs it. */
     badgeLabel?: string;
+    /** The badge's color, by what it means: danger for what needs action now,
+     * caution for what needs a look soon, neutral for news. */
+    badgeTone?: StatusTone;
 };
 export declare const BottomNavigation: {
     Root: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
         ref?: React.Ref<HTMLElement>;
     }) => React.JSX.Element;
-    Item: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+    Item: ({ icon, label, current, badge, badgeLabel, badgeTone, render, className, ref, ...props }: BottomNavigationItemProps & {
         ref?: React.Ref<HTMLAnchorElement>;
     }) => React.JSX.Element;
 };
 export declare const BottomNavigationRoot: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
     ref?: React.Ref<HTMLElement>;
-}) => React.JSX.Element, BottomNavigationItem: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+}) => React.JSX.Element, BottomNavigationItem: ({ icon, label, current, badge, badgeLabel, badgeTone, render, className, ref, ...props }: BottomNavigationItemProps & {
     ref?: React.Ref<HTMLAnchorElement>;
 }) => React.JSX.Element;

package/dist/bottom-navigation.js

@@ -9,7 +9,7 @@ const Root = function BottomNavigationRoot({ visible = 'mobile', position = 'fix
 };
 /** One destination: an icon above its label. Pass a router's link element as
  * `render` to keep client navigation. */
-const Item = function BottomNavigationItem({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }) {
+const Item = function BottomNavigationItem({ icon, label, current, badge, badgeLabel, badgeTone = 'danger', render, className, ref, ...props }) {
     const count = typeof badge === 'number' && badge > 0
         ? badge > 99
             ? '99+'
@@ -25,7 +25,7 @@ const Item = function BottomNavigationItem({ icon, label, current, badge, badgeL
             ...props,
             'aria-current': current ? 'page' : props['aria-current'],
             className: cx('surf-bottom-nav-item', className),
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'surf-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'surf-bottom-nav-badge', "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'surf-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'surf-feedback-sr', children: [", ", spoken] }))] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'surf-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'surf-bottom-nav-badge', "data-tone": badgeTone, "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'surf-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'surf-feedback-sr', children: [", ", spoken] }))] })),
         },
     });
     return _jsx("li", { className: 'surf-bottom-nav-entry', children: link });

package/dist/chart.d.ts

@@ -1,12 +1,32 @@
 import * as React from 'react';
 export type ChartDatum = {
     id: string;
+    /** What the readout and the table call the row, such as its full date and time. */
     label: string;
+    /** When the row was measured, in ms since the epoch or as a Date. Required for
+     * xScale="time", where it places the row on the axis. */
+    time?: number | Date;
     values: Readonly<Record<string, number | null | undefined>>;
 };
 export type ChartSeries = {
     key: string;
     label: string;
+    /** A color of your own, such as var(--surf-chart-category-3), in place of the
+     * palette's. Marks and dashes still tell the series apart. */
+    color?: string;
+};
+export type ChartTone = 'neutral' | 'caution' | 'danger';
+/** A threshold line at y, or a band from one value to another, such as a target
+ * range. The legend names it with its value. */
+export type ChartReference = {
+    y: number;
+    label: string;
+    tone?: ChartTone;
+} | {
+    from: number;
+    to: number;
+    label: string;
+    tone?: ChartTone;
 };
 export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children' | 'title'> & {
     title: string;
@@ -17,13 +37,33 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
     xLabel: string;
     yLabel: string;
     type?: 'line' | 'bar' | 'area';
+    /** Plot height in px: 280 by default, 180 when compact. */
     height?: number;
     /** Keeps 0 on the value axis. Turn it off for values far from zero, such as
      * prices, so the line uses the height; bars always start at zero. */
     includeZero?: boolean;
-    /** neutral tells series apart by ink, dashes and markers. categorical adds six hues,
-     * for categories that color must separate, such as buckets or sectors. */
+    /** neutral tells series apart by ink, dashes and markers. categorical adds twelve
+     * hues, for categories that color must separate, such as buckets or sectors. */
     palette?: 'neutral' | 'categorical';
+    /** category spaces the rows evenly and names them by label. time places them by
+     * data[].time, puts ticks on round times and breaks a line where sampling stops. */
+    xScale?: 'category' | 'time';
+    /** log suits values across orders of magnitude, such as prefill and decode
+     * throughput. Zero and negative values stay off the plot and in the table. */
+    yScale?: 'linear' | 'log';
+    /** step holds each value until the next, for values sampled when they change. */
+    curve?: 'linear' | 'step';
+    /** Stacks bar and area series, so the top of the stack is their total. */
+    stacked?: boolean;
+    /** Thresholds and target bands over the plot. The value axis reaches them. */
+    references?: readonly ChartReference[];
+    /** compact keeps the plot, legend and floating values for a dashboard card; the
+     * caption, keyboard help and readout stay for assistive technology. */
+    density?: 'default' | 'compact';
+    /** Above the plot, beside the value axis name, or below it. */
+    legendPosition?: 'top' | 'bottom';
+    /** Shows this many series in the legend; the rest fold behind a "+N" button. */
+    legendLimit?: number;
     locale?: string;
     /** Formats a value for the readout, the table and the value axis ticks. The unit
      * follows it in the readout and the table, and names the axis. */
@@ -52,9 +92,22 @@ export type ChartLabels = {
     legend: (title: string) => string;
     /** A legend button that shows or hides a series. */
     series: (label: string) => string;
+    /** The button that opens the series past legendLimit. */
+    moreSeries: (count: number) => string;
+    /** The sum of stacked series in the readout. */
+    total: string;
+};
+export type ChartSeriesMarkProps = {
+    type?: 'line' | 'bar' | 'area';
+    /** The series' place in the chart's series, which sets its dash, marker and color. */
+    index: number;
+    palette?: 'neutral' | 'categorical';
+    color?: string;
 };
+/** A series' swatch as Chart's legend draws it, for a legend or key of your own. */
+export declare function ChartSeriesMark({ type, index, palette, color, }: ChartSeriesMarkProps): React.JSX.Element;
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export declare const Chart: ({ title, description, data, series, unit, xLabel, yLabel, type, height, includeZero, palette, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, className, ref, ...props }: ChartProps & {
+export declare const Chart: ({ title, description, data, series, unit, xLabel, yLabel, type, height, includeZero, palette, xScale, yScale, curve, stacked, references, density, legendPosition, legendLimit, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, className, ref, ...props }: ChartProps & {
     ref?: React.Ref<HTMLElement>;
 }) => React.JSX.Element;