@surflane/ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { ChoiceLabel, type ChoiceLabelProps } from './choice-label.js';
 export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverHandle, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, PopoverViewport, PopoverContent, } from './popover.js';
 export { Menu, MenuArrow, MenuBackdrop, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuClear, MenuEmpty, MenuFilterProvider, MenuGroup, MenuGroupLabel, MenuHandle, MenuInput, MenuItem, MenuLinkItem, MenuList, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, MenuViewport, MenuContent, } from './menu.js';
 export { ContextMenu, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRoot, ContextMenuSeparator, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, ContextMenuContent, } from './context-menu.js';
-export { Tooltip, TooltipProvider } from './tooltip.js';
+export { Tooltip, TooltipProvider, type TooltipProps } from './tooltip.js';
 export { PreviewCard, PreviewCardArrow, PreviewCardBackdrop, PreviewCardHandle, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardRoot, PreviewCardTrigger, PreviewCardViewport, PreviewCardContent, } from './preview-card.js';
 export { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogHandle, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DialogViewport, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogCloseButton, } from './dialog.js';
 export { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogHandle, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, } from './alert-dialog.js';
@@ -37,6 +37,7 @@ export { Menubar } from './menubar.js';
 export { Link, type LinkProps } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
 export { Pagination, type PaginationProps } from './pagination.js';
+export { BottomNavigation, BottomNavigationRoot, BottomNavigationItem, type BottomNavigationRootProps, type BottomNavigationItemProps, } from './bottom-navigation.js';
 export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
 export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from './badge.js';
 export { Card, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './card.js';
@@ -44,21 +45,24 @@ export { Table, TableContainer, TableRoot, TableCaption, TableHead, TableBody, T
 export { CodeBlock, type CodeBlockProps } 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 { Sparkline, type SparklineProps, type SparklineTrend, } from './sparkline.js';
 export { ScrollArea } from './scroll-area.js';
 export { Separator } from './separator.js';
 export { Progress, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, } from './progress.js';
 export { Meter, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './meter.js';
-export { Toast, type ToastRootProps, type ToastViewportProps, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, } from './toast.js';
+export { Toast, type ToastRootProps, type ToastViewportProps, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, toast, createToaster, Toaster, type ToastOptions, type ToastStep, type ToastHelper, type ToasterProps, } from './toast.js';
 export { InlineMessage, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, } from './inline-message.js';
 export { Spinner, type SpinnerProps } from './spinner.js';
 export { Skeleton, type SkeletonProps } from './skeleton.js';
 export { EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from './empty-state.js';
 export { Container, Stack, Inline, Grid, GridItem, Surface, type SurfaceKind, type Space, } from './layout.js';
 export { Heading, Text, Prose } from './typography.js';
+export { formatNumber, formatCurrency, formatPercent, missingValue, type NumberFormatOptions, } from './format.js';
 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, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, type AppShellRootProps, type AppShellSidebarToggleProps, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';

package/dist/index.js

@@ -47,6 +47,7 @@ export { Menubar } from './menubar.js';
 export { Link } from './link.js';
 export { Breadcrumbs, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './breadcrumbs.js';
 export { Pagination } from './pagination.js';
+export { BottomNavigation, BottomNavigationRoot, BottomNavigationItem, } from './bottom-navigation.js';
 // Data display
 export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, } from './avatar.js';
 export { Badge, StatusBadge, } from './badge.js';
@@ -55,13 +56,15 @@ 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 { Sparkline, } from './sparkline.js';
 // Structure
 export { ScrollArea } from './scroll-area.js';
 export { Separator } from './separator.js';
 // Feedback
 export { Progress, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, } from './progress.js';
 export { Meter, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './meter.js';
-export { Toast, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, } from './toast.js';
+export { Toast, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToastIcon, ToastText, toast, createToaster, Toaster, } from './toast.js';
 export { InlineMessage, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, } from './inline-message.js';
 export { Spinner } from './spinner.js';
 export { Skeleton } from './skeleton.js';
@@ -69,11 +72,12 @@ export { EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyState
 // Foundations
 export { Container, Stack, Inline, Grid, GridItem, Surface, } from './layout.js';
 export { Heading, Text, Prose } from './typography.js';
+export { formatNumber, formatCurrency, formatPercent, missingValue, } from './format.js';
 export { Icon, iconNames } from './icon.js';
 export { SizeProvider, } from './sizing.js';
 export { DirectionProvider } from '@base-ui/react/direction-provider';
 export { Slot } from './slot.js';
 // Patterns
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellSidebarToggle, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { PageHeader } from './page-header.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';

package/dist/sparkline.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { ComponentSizeAlias } from './sizing.js';
+export type SparklineTrend = 'auto' | 'up' | 'down' | 'flat' | 'neutral';
+export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'role' | 'aria-label'> & {
+    /** Values in order. A missing value leaves a gap. */
+    data: readonly (number | null | undefined)[];
+    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
+     * line is an image; this is its name. */
+    label: string;
+    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    size?: ComponentSizeAlias;
+    /** A reference line: a value, the first value, or none. */
+    baseline?: number | 'first' | 'none';
+    /** Marks the last value with a dot. */
+    marker?: boolean;
+    /** The line's color. auto compares the last value with the baseline, or with the
+     * first value when there is none. */
+    trend?: SparklineTrend;
+    /** For measures where a fall is good: the colors swap. */
+    lowerIsBetter?: boolean;
+};
+/** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
+ * when people need to read values. */
+export declare const Sparkline: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "children" | "role" | "aria-label"> & {
+    /** Values in order. A missing value leaves a gap. */
+    data: readonly (number | null | undefined)[];
+    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
+     * line is an image; this is its name. */
+    label: string;
+    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    size?: ComponentSizeAlias;
+    /** A reference line: a value, the first value, or none. */
+    baseline?: number | "first" | "none";
+    /** Marks the last value with a dot. */
+    marker?: boolean;
+    /** The line's color. auto compares the last value with the baseline, or with the
+     * first value when there is none. */
+    trend?: SparklineTrend;
+    /** For measures where a fall is good: the colors swap. */
+    lowerIsBetter?: boolean;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/sparkline.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx, sizeName } from './parts.js';
+const finite = (value) => typeof value === 'number' && Number.isFinite(value);
+/** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
+ * when people need to read values. */
+export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ...props }, ref) {
+    const values = data.filter(finite);
+    const first = values[0];
+    const last = values[values.length - 1];
+    const reference = baseline === 'first' ? first : baseline === 'none' ? undefined : baseline;
+    const bounds = finite(reference) ? [...values, reference] : values;
+    const min = Math.min(...bounds);
+    const max = Math.max(...bounds);
+    const span = max - min || 1;
+    // The line keeps clear of the edges by a tenth of the height.
+    const y = (value) => 95 - ((value - min) / span) * 90;
+    const x = (index) => data.length > 1 ? (index / (data.length - 1)) * 100 : 50;
+    let path = '';
+    let pen = false;
+    data.forEach((value, index) => {
+        if (!finite(value))
+            return void (pen = false);
+        path += `${pen ? 'L' : 'M'}${x(index)} ${y(value)}`;
+        pen = true;
+    });
+    const from = finite(reference) ? reference : first;
+    const way = trend !== 'auto'
+        ? trend
+        : !finite(last) || !finite(from)
+            ? 'neutral'
+            : last > from
+                ? 'up'
+                : last < from
+                    ? 'down'
+                    : 'flat';
+    const tone = lowerIsBetter && way === 'up'
+        ? 'down'
+        : lowerIsBetter && way === 'down'
+            ? 'up'
+            : way;
+    let end = data.length - 1;
+    while (end >= 0 && !finite(data[end]))
+        end--;
+    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('pui-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'pui-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'pui-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
+            // A zero-length segment with a round cap stays a circle however the
+            // line stretches.
+            _jsx("path", { className: 'pui-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
+});

package/dist/stat.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+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. */
+    value: number;
+    /** Text for the change. Defaults to a signed percentage of `value`. */
+    format?: (value: number) => React.ReactNode;
+    /** Overrides the direction the sign gives. */
+    direction?: StatDirection;
+    /** For measures where a fall is good, such as latency: the colors swap, the arrow
+     * still points the way the value moved. */
+    lowerIsBetter?: boolean;
+};
+/** 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: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDListElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Change: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
+        /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
+        value: number;
+        /** Text for the change. Defaults to a signed percentage of `value`. */
+        format?: (value: number) => React.ReactNode;
+        /** Overrides the direction the sign gives. */
+        direction?: StatDirection;
+        /** For measures where a fall is good, such as latency: the colors swap, the arrow
+         * still points the way the value moved. */
+        lowerIsBetter?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+};
+export declare const StatRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDListElement>>, StatLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>, StatValue: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>, StatChange: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
+    /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
+    value: number;
+    /** Text for the change. Defaults to a signed percentage of `value`. */
+    format?: (value: number) => React.ReactNode;
+    /** Overrides the direction the sign gives. */
+    direction?: StatDirection;
+    /** For measures where a fall is good, such as latency: the colors swap, the arrow
+     * still points the way the value moved. */
+    lowerIsBetter?: boolean;
+} & React.RefAttributes<HTMLElement>>, StatCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>;

package/dist/stat.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { part, cx } from './parts.js';
+import { formatPercent } from './format.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
+ * color. The sign and the arrow carry the direction, so color is never alone. */
+const ChangePart = /* @__PURE__ */ React.forwardRef(function StatChange({ value, format = signed, direction, lowerIsBetter, className, ...props }, ref) {
+    const way = direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'flat');
+    const tone = way === 'flat' || !lowerIsBetter ? way : way === 'up' ? 'down' : 'up';
+    return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('pui-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
+});
+/** 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 = {
+    Root: /* @__PURE__ */ part('dl', 'pui-stat'),
+    Label: /* @__PURE__ */ part('dt', 'pui-stat-label'),
+    Value: /* @__PURE__ */ part('dd', 'pui-stat-value'),
+    Change: ChangePart,
+    Caption: /* @__PURE__ */ part('dd', 'pui-stat-caption'),
+};
+// 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;

package/dist/status.d.ts

@@ -1,4 +1,4 @@
-export type StatusTone = 'neutral' | 'success' | 'danger' | 'caution' | 'progress';
+export type StatusTone = 'neutral' | 'info' | 'success' | 'danger' | 'caution' | 'progress';
 export declare function StatusIcon({ tone }: {
     tone: StatusTone;
 }): import("react").JSX.Element;

package/dist/status.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from './icon.js';
 const statusIcons = {
     neutral: 'minus-circle',
+    info: 'info',
     success: 'check',
     danger: 'alert',
     caution: 'warning',

package/dist/toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Toast as BaseToast } from '@base-ui/react/toast';
+import { Toast as BaseToast, type ToastManager, type ToastManagerAddOptions } from '@base-ui/react/toast';
 import { type StatusTone } from './status.js';
 export type ToastRootProps = React.ComponentPropsWithoutRef<typeof BaseToast.Root> & {
     tone?: StatusTone;
@@ -57,3 +57,59 @@ export declare const ToastAction: React.ForwardRefExoticComponent<Omit<Omit<impo
 } & React.RefAttributes<HTMLSpanElement>>, ToastText: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;
+/** What a toast() call takes besides its title. */
+export type ToastOptions = Omit<ToastManagerAddOptions<object>, 'title' | 'type'> & {
+    /** A button in the toast, such as Undo. Shorthand for actionProps. */
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+};
+/** A promise step or an update: the options, with the title among them. */
+export type ToastStep = ToastOptions & {
+    title?: React.ReactNode;
+};
+type PromiseStep<Value> = React.ReactNode | ToastStep | ((value: Value) => React.ReactNode | ToastStep);
+export type ToastHelper = {
+    /** A neutral toast. Returns its ID, which update and dismiss take. */
+    (title: React.ReactNode, options?: ToastOptions): string;
+    info: (title: React.ReactNode, options?: ToastOptions) => string;
+    success: (title: React.ReactNode, options?: ToastOptions) => string;
+    warning: (title: React.ReactNode, options?: ToastOptions) => string;
+    error: (title: React.ReactNode, options?: ToastOptions) => string;
+    /** Stays until updated or dismissed. */
+    loading: (title: React.ReactNode, options?: ToastOptions) => string;
+    /** A loading toast that turns into success or error when the promise settles. */
+    promise: <Value>(promise: Promise<Value>, steps: {
+        loading: React.ReactNode | ToastStep;
+        success: PromiseStep<Value>;
+        error: PromiseStep<unknown>;
+    }) => Promise<Value>;
+    update: (id: string, options: ToastStep) => void;
+    /** Closes one toast, or every toast without an ID. */
+    dismiss: (id?: string) => void;
+    /** The Base UI manager the Toaster reads. */
+    manager: ToastManager;
+};
+/** A toast helper with a manager of its own. Use the shared `toast` unless a region
+ * needs separate notifications. */
+export declare function createToaster(): ToastHelper;
+/** The shared toast helper: call toast.success('Saved') anywhere, with one Toaster
+ * in the app. */
+export declare const toast: ToastHelper;
+export type ToasterProps = Omit<ToastViewportProps, 'children'> & {
+    /** The helper whose toasts this renders. */
+    toast?: ToastHelper;
+    /** How many toasts stay visible; older ones wait. */
+    limit?: number;
+    /** Milliseconds before a toast closes, unless it sets its own. */
+    timeout?: number;
+    /** The notifications region's name. */
+    label?: string;
+    /** Directions a toast can be swiped away in. */
+    swipeDirection?: React.ComponentPropsWithoutRef<typeof BaseToast.Root>['swipeDirection'];
+};
+/** Renders a helper's toasts: the provider, the region and each toast. Put one in the
+ * app, then call toast() from anywhere. */
+export declare function Toaster({ toast: helper, limit, timeout, label, swipeDirection, ...props }: ToasterProps): React.JSX.Element;
+export {};

package/dist/toast.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
-import { Toast as BaseToast } from '@base-ui/react/toast';
+import { Toast as BaseToast, } from '@base-ui/react/toast';
 import { part, skin, cx } from './parts.js';
 import { StatusIcon } from './status.js';
 const ToneContext = /* @__PURE__ */ React.createContext('neutral');
@@ -98,3 +98,74 @@ export const Toast = {
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Action: ToastAction, Arrow: ToastArrow, Close: ToastClose, Content: ToastContent, Description: ToastDescription, Portal: ToastPortal, Positioner: ToastPositioner, Provider: ToastProvider, Root: ToastRoot, Title: ToastTitle, Viewport: ToastViewport, Icon: ToastIcon, Text: ToastText, } = Toast;
+// Event names, as other toast libraries call them, and the tones they show.
+const tones = {
+    info: 'info',
+    success: 'success',
+    warning: 'caution',
+    caution: 'caution',
+    error: 'danger',
+    danger: 'danger',
+    loading: 'progress',
+    progress: 'progress',
+};
+const isOptions = (value) => typeof value === 'object' &&
+    value !== null &&
+    !React.isValidElement(value) &&
+    !Array.isArray(value);
+function settle({ action, actionProps, ...rest }, type) {
+    return {
+        ...rest,
+        ...(type ? { type } : {}),
+        actionProps: action
+            ? { ...actionProps, children: action.label, onClick: action.onClick }
+            : actionProps,
+    };
+}
+const step = (value, type, timeout) => settle(isOptions(value)
+    ? { ...(timeout === undefined ? {} : { timeout }), ...value }
+    : {
+        title: value,
+        ...(timeout === undefined ? {} : { timeout }),
+    }, type);
+/** A toast helper with a manager of its own. Use the shared `toast` unless a region
+ * needs separate notifications. */
+export function createToaster() {
+    const manager = BaseToast.createToastManager();
+    const add = (type, timeout) => (title, options = {}) => manager.add({
+        ...(timeout === undefined ? {} : { timeout }),
+        ...settle(options, type),
+        title,
+    });
+    return Object.assign(add(), {
+        info: add('info'),
+        success: add('success'),
+        warning: add('warning'),
+        error: add('error'),
+        loading: add('loading', 0),
+        promise: (promise, steps) => manager.promise(promise, {
+            loading: step(steps.loading, 'loading', 0),
+            success: (value) => step(typeof steps.success === 'function'
+                ? steps.success(value)
+                : steps.success, 'success'),
+            error: (error) => step(typeof steps.error === 'function'
+                ? steps.error(error)
+                : steps.error, 'error', 0),
+        }),
+        update: (id, options) => manager.update(id, settle(options)),
+        dismiss: (id) => manager.close(id),
+        manager,
+    });
+}
+/** The shared toast helper: call toast.success('Saved') anywhere, with one Toaster
+ * in the app. */
+export const toast = /* @__PURE__ */ createToaster();
+function ToastList({ swipeDirection }) {
+    const { toasts } = BaseToast.useToastManager();
+    return toasts.map((item) => (_jsx(Root, { toast: item, tone: tones[item.type ?? ''] ?? 'neutral', swipeDirection: swipeDirection, children: _jsxs(Toast.Content, { children: [_jsx(ToneIcon, {}), _jsxs(Toast.Text, { children: [_jsx(Toast.Title, {}), _jsx(Toast.Description, {}), _jsx(Action, {})] }), _jsx(Close, {})] }) }, item.id)));
+}
+/** Renders a helper's toasts: the provider, the region and each toast. Put one in the
+ * app, then call toast() from anywhere. */
+export function Toaster({ toast: helper = toast, limit = 3, timeout = 5000, label = 'Notifications', swipeDirection, ...props }) {
+    return (_jsx(BaseToast.Provider, { toastManager: helper.manager, limit: limit, timeout: timeout, children: _jsx(BaseToast.Portal, { children: _jsx(Viewport, { "aria-label": label, ...props, children: _jsx(ToastList, { swipeDirection: swipeDirection }) }) }) }));
+}

package/dist/tooltip.d.ts

@@ -5,8 +5,14 @@ export declare function TooltipProvider({ delayDuration, skipDelayDuration, chil
     skipDelayDuration?: number;
     children: React.ReactNode;
 }): React.JSX.Element;
-export declare function Tooltip({ label, enabled, side, align, sideOffset, children, }: {
-    label: string;
+export type TooltipProps = {
+    /** What the trigger does, in a few words. It may hold an icon or emphasis, but
+     * nothing interactive: a tooltip never takes focus. */
+    label: React.ReactNode;
+    /** A keyboard shortcut for the same action, such as '⌘B', set apart after the
+     * label. */
+    shortcut?: string;
     enabled?: boolean;
     children: React.ReactElement;
-} & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>): React.JSX.Element;
+} & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>;
+export declare function Tooltip({ label, shortcut, enabled, side, align, sideOffset, children, }: TooltipProps): React.JSX.Element;

package/dist/tooltip.js

@@ -5,9 +5,9 @@ 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, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
+export function Tooltip({ label, shortcut, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
     const scheme = useComponentSize();
-    if (!enabled)
-        return children;
-    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsx(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: label }) }) })] }));
+    // Disabling keeps the trigger mounted, so turning the tooltip on or off never
+    // moves focus.
+    return (_jsxs(BaseTooltip.Root, { disabled: !enabled, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsxs(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: [label, shortcut && _jsx("kbd", { className: 'pui-tooltip-shortcut', children: shortcut })] }) }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -28,8 +28,6 @@
   ],
   "files": [
     "dist",
-    "src/styles.css",
-    "src/all.css",
     "LICENSE-MIT",
     "LICENSE-APACHE"
   ],
@@ -38,8 +36,77 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles.css": "./src/styles.css",
-    "./all.css": "./src/all.css",
+    "./styles.css": "./dist/css/styles.css",
+    "./all.css": "./dist/css/all.css",
+    "./button.css": "./dist/css/button.css",
+    "./toolbar.css": "./dist/css/toolbar.css",
+    "./input.css": "./dist/css/input.css",
+    "./select.css": "./dist/css/select.css",
+    "./native-select.css": "./dist/css/native-select.css",
+    "./field.css": "./dist/css/field.css",
+    "./fieldset.css": "./dist/css/fieldset.css",
+    "./form.css": "./dist/css/form.css",
+    "./textarea.css": "./dist/css/textarea.css",
+    "./combobox.css": "./dist/css/combobox.css",
+    "./autocomplete.css": "./dist/css/autocomplete.css",
+    "./number-field.css": "./dist/css/number-field.css",
+    "./slider.css": "./dist/css/slider.css",
+    "./otp-field.css": "./dist/css/otp-field.css",
+    "./date-picker.css": "./dist/css/date-picker.css",
+    "./file-upload.css": "./dist/css/file-upload.css",
+    "./checkbox.css": "./dist/css/checkbox.css",
+    "./checkbox-group.css": "./dist/css/checkbox-group.css",
+    "./radio-group.css": "./dist/css/radio-group.css",
+    "./switch.css": "./dist/css/switch.css",
+    "./toggle.css": "./dist/css/toggle.css",
+    "./toggle-group.css": "./dist/css/toggle-group.css",
+    "./choice-label.css": "./dist/css/choice-label.css",
+    "./popover.css": "./dist/css/popover.css",
+    "./menu.css": "./dist/css/menu.css",
+    "./context-menu.css": "./dist/css/context-menu.css",
+    "./tooltip.css": "./dist/css/tooltip.css",
+    "./preview-card.css": "./dist/css/preview-card.css",
+    "./dialog.css": "./dist/css/dialog.css",
+    "./alert-dialog.css": "./dist/css/alert-dialog.css",
+    "./sheet.css": "./dist/css/sheet.css",
+    "./drawer.css": "./dist/css/drawer.css",
+    "./tabs.css": "./dist/css/tabs.css",
+    "./accordion.css": "./dist/css/accordion.css",
+    "./collapsible.css": "./dist/css/collapsible.css",
+    "./navigation-menu.css": "./dist/css/navigation-menu.css",
+    "./menubar.css": "./dist/css/menubar.css",
+    "./link.css": "./dist/css/link.css",
+    "./breadcrumbs.css": "./dist/css/breadcrumbs.css",
+    "./pagination.css": "./dist/css/pagination.css",
+    "./bottom-navigation.css": "./dist/css/bottom-navigation.css",
+    "./avatar.css": "./dist/css/avatar.css",
+    "./badge.css": "./dist/css/badge.css",
+    "./card.css": "./dist/css/card.css",
+    "./table.css": "./dist/css/table.css",
+    "./code.css": "./dist/css/code.css",
+    "./syntax-highlighter.css": "./dist/css/syntax-highlighter.css",
+    "./markdown.css": "./dist/css/markdown.css",
+    "./list.css": "./dist/css/list.css",
+    "./stat.css": "./dist/css/stat.css",
+    "./sparkline.css": "./dist/css/sparkline.css",
+    "./tree.css": "./dist/css/tree.css",
+    "./chart.css": "./dist/css/chart.css",
+    "./scroll-area.css": "./dist/css/scroll-area.css",
+    "./separator.css": "./dist/css/separator.css",
+    "./progress.css": "./dist/css/progress.css",
+    "./meter.css": "./dist/css/meter.css",
+    "./toast.css": "./dist/css/toast.css",
+    "./inline-message.css": "./dist/css/inline-message.css",
+    "./spinner.css": "./dist/css/spinner.css",
+    "./skeleton.css": "./dist/css/skeleton.css",
+    "./empty-state.css": "./dist/css/empty-state.css",
+    "./layout.css": "./dist/css/layout.css",
+    "./typography.css": "./dist/css/typography.css",
+    "./icon.css": "./dist/css/icon.css",
+    "./sizing.css": "./dist/css/sizing.css",
+    "./app-shell.css": "./dist/css/app-shell.css",
+    "./page-header.css": "./dist/css/page-header.css",
+    "./filter-bar.css": "./dist/css/filter-bar.css",
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
@@ -200,6 +267,10 @@
       "types": "./dist/pagination.d.ts",
       "import": "./dist/pagination.js"
     },
+    "./bottom-navigation": {
+      "types": "./dist/bottom-navigation.d.ts",
+      "import": "./dist/bottom-navigation.js"
+    },
     "./avatar": {
       "types": "./dist/avatar.d.ts",
       "import": "./dist/avatar.js"
@@ -236,6 +307,14 @@
       "types": "./dist/list.d.ts",
       "import": "./dist/list.js"
     },
+    "./stat": {
+      "types": "./dist/stat.d.ts",
+      "import": "./dist/stat.js"
+    },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "import": "./dist/sparkline.js"
+    },
     "./tree": {
       "types": "./dist/tree.d.ts",
       "import": "./dist/tree.js"
@@ -300,6 +379,10 @@
       "types": "./dist/slot.d.ts",
       "import": "./dist/slot.js"
     },
+    "./format": {
+      "types": "./dist/format.d.ts",
+      "import": "./dist/format.js"
+    },
     "./app-shell": {
       "types": "./dist/app-shell.d.ts",
       "import": "./dist/app-shell.js"
@@ -315,7 +398,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json && node ../../scripts/build-styles.mjs",
     "prepack": "npm run build"
   },
   "dependencies": {
@@ -324,7 +407,7 @@
   "peerDependencies": {
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
-    "@surflane/design-tokens": "^0.5.0",
+    "@surflane/design-tokens": "^0.7.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",