@surflane/ui 0.4.0 → 0.6.0

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,22 +1,4 @@
-import * as React from 'react';
-import { type ComponentSize } from './sizing.js';
-export type StatusTone = 'neutral' | 'success' | 'danger' | 'caution' | 'progress';
-export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-};
-export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+export type StatusTone = 'neutral' | 'info' | 'success' | 'danger' | 'caution' | 'progress';
 export declare function StatusIcon({ tone }: {
     tone: StatusTone;
-}): React.JSX.Element;
-/** Domain status labels and live announcements remain the caller's responsibility. */
-export declare const StatusBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+}): import("react").JSX.Element;

package/dist/status.js

@@ -1,17 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useComponentSize } from './sizing.js';
-import { useToneTransition } from './tone-transition.js';
-export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
-    const scheme = useComponentSize(size);
-    const elementRef = useToneTransition(tone, ref);
-    return (_jsxs("span", { ...props, ref: elementRef, className: ['pui-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
-});
+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',
+    progress: 'clock',
+};
 export function StatusIcon({ tone }) {
-    return (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: tone === 'success' ? (_jsx("path", { d: 'm5 12 4 4L19 6' })) : tone === 'caution' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })) : tone === 'danger' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })) : tone === 'progress' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })) }));
+    return _jsx(Icon, { name: statusIcons[tone] });
 }
-/** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = /* @__PURE__ */ React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
-    return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
-});

package/dist/switch.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ChoiceSize } from './choice.js';
+declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+export declare const Switch: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export { SwitchRoot };
+export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/switch.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { skin, part } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
+const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
+    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
+            onCheckedChange?.(next, event);
+            if (checked === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+});
+export const Switch = {
+    ...BaseSwitch,
+    Root: SwitchRoot,
+    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SwitchRoot };
+export const { Thumb: SwitchThumb } = Switch;

package/dist/syntax-highlighter.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea } from './scroll-area.js';
 import { SyntaxEngineContext } from './syntax-context.js';
+import { cx } from './parts.js';
 export const syntaxLanguages = [
     'tsx',
     'jsx',
@@ -63,7 +64,7 @@ export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function Synta
     const tokens = result?.code === code && result.language === lang ? result.tokens : null;
     const eols = code.match(/\r\n|\n|\r/g) ?? [];
     const valid = tokens && tokens.length === eols.length + 1;
-    const element = (_jsx("code", { ...props, ref: ref, className: ['pui-syntax', className].filter(Boolean).join(' '), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
+    const element = (_jsx("code", { ...props, ref: ref, className: cx('pui-syntax', className), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
             ? tokens.map((line, i) => (_jsxs(React.Fragment, { children: [line.map((token, j) => (_jsx("span", { "data-syntax": token.role, children: token.content }, j))), eols[i] ?? ''] }, i)))
             : code }));
     return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: 'horizontal', rootClassName: 'pui-syntax-scroll', children: _jsx("pre", { className: 'pui-syntax-pre', "data-wrap": wrap || undefined, children: element }) }));

package/dist/{data.d.ts → table.d.ts}

@@ -7,6 +7,9 @@ declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.De
     scrollChain?: "auto" | "contain";
 } & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label: string;
+    /** Hangs the table into the gutter by its cell inset, so cell text lines up with
+     * the text around it and a row's hover reaches past it evenly on both sides. */
+    bleed?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type TableDensity = 'default' | 'compact';
 declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
@@ -55,6 +58,9 @@ export declare const Table: {
         scrollChain?: "auto" | "contain";
     } & React.RefAttributes<HTMLDivElement>, "ref"> & {
         label: string;
+        /** Hangs the table into the gutter by its cell inset, so cell text lines up with
+         * the text around it and a row's hover reaches past it evenly on both sides. */
+        bleed?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -97,38 +103,7 @@ export declare const Table: {
         colSpan: number;
     } & React.RefAttributes<HTMLTableCellElement>>;
 };
-declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const ListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    selected?: boolean;
-} & React.RefAttributes<HTMLLIElement>>;
-export declare const List: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-        selected?: boolean;
-    } & React.RefAttributes<HTMLLIElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
-export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export { TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableCaptionElement>>, TableHead: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
@@ -138,3 +113,4 @@ export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<Rea
 } & React.RefAttributes<HTMLTableSectionElement>>, TableFoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableSectionElement>>;
+export { useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table-selection.js';

package/dist/{data.js → table.js}

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Button } from './button.js';
-import { part } from './parts.js';
+import { part, cx } from './parts.js';
 import { ScrollArea } from './scroll-area.js';
-const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer(props, ref) {
-    return _jsx(ScrollArea, { ...props, ref: ref });
+const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer({ bleed, rootClassName, ...props }, ref) {
+    return (_jsx(ScrollArea, { ...props, ref: ref, rootClassName: cx(bleed && 'pui-table-bleed', rootClassName) }));
 });
 const RootPart = /* @__PURE__ */ part('table', 'pui-table');
 const TableRoot = /* @__PURE__ */ React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
@@ -25,28 +26,26 @@ const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell({ align, n
     return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
 });
 function SortIcon({ sort }) {
-    return (_jsx("svg", { className: 'pui-table-sort-icon', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: _jsx("path", { d: sort === 'ascending'
-                ? 'M12 19V5m-6 6 6-6 6 6'
-                : sort === 'descending'
-                    ? 'M12 5v14m-6-6 6 6 6-6'
-                    : 'm8 9 4-4 4 4m-8 6 4 4 4-4' }) }));
+    return (_jsx(Icon, { name: sort === 'ascending'
+            ? 'arrow-up'
+            : sort === 'descending'
+                ? 'arrow-down'
+                : 'sort', className: 'pui-table-sort-icon' }));
 }
 /** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
 const TableSortHeader = /* @__PURE__ */ React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
-    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: ['pui-table-sort-header', className].filter(Boolean).join(' '), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
+    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: cx('pui-table-sort-header', className), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
 });
 /** One-line text that ends in an ellipsis. String content also becomes the title. */
 const TableTruncate = /* @__PURE__ */ React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: ['pui-table-truncate', className].filter(Boolean).join(' '), children: children }));
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: cx('pui-table-truncate', className), children: children }));
 });
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
 const TableMessage = /* @__PURE__ */ React.forwardRef(function TableMessage({ className, ...props }, ref) {
-    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: ['pui-table-cell pui-table-message', className]
-                .filter(Boolean)
-                .join(' ') }) }));
+    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: cx('pui-table-cell pui-table-message', className) }) }));
 });
 const TableRow = /* @__PURE__ */ React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('pui-table-row', className) }));
 });
 export const Table = {
     Container: TableContainer,
@@ -62,21 +61,7 @@ export const Table = {
     Truncate: TableTruncate,
     Message: TableMessage,
 };
-const ListRoot = /* @__PURE__ */ React.forwardRef(function ListRoot({ className, ...props }, ref) {
-    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
-});
-const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-list-item', className].filter(Boolean).join(' ') }));
-});
-export const List = {
-    Root: ListRoot,
-    Item: ListItem,
-    Content: /* @__PURE__ */ part('div', 'pui-list-content'),
-    Title: /* @__PURE__ */ part('div', 'pui-list-title'),
-    Description: /* @__PURE__ */ part('p', 'pui-list-description'),
-    Actions: /* @__PURE__ */ part('div', 'pui-list-actions'),
-};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
-export const { Content: ListContent, Title: ListTitle, Description: ListDescription, Actions: ListActions, } = List;
+export { TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export const { Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, } = Table;
+export { useTableSelection, } from './table-selection.js';

package/dist/textarea.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+/** A multi-line text field. Inside Field.Root it takes the label, description and
+ * error from the field, as Input does. */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Field as BaseField } from '@base-ui/react/field';
+import { cx } from './parts.js';
+/** A multi-line text field. Inside Field.Root it takes the label, description and
+ * error from the field, as Input does. */
+export const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ className, size, rows, cols, wrap, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('pui-input pui-textarea', className) }));
+});

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,20 +1,21 @@
 '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 { part, skin } from './parts.js';
+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');
 const Root = /* @__PURE__ */ React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
     return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('pui-toast', className) }) }));
 });
-const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
+const ToneIcon = /* @__PURE__ */ React.forwardRef(function ToastIcon({ tone, children, className, ...props }, ref) {
     const inherited = React.useContext(ToneContext);
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-toast-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('pui-toast-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
 });
 const Close = /* @__PURE__ */ React.forwardRef(function Close({ className, children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) })) }));
+    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
 });
 const Action = /* @__PURE__ */ React.forwardRef(function Action({ className, ...props }, ref) {
     return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
@@ -85,7 +86,7 @@ const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = '
 export const Toast = {
     ...BaseToast,
     Root,
-    Icon,
+    Icon: ToneIcon,
     Close,
     Action,
     Viewport,
@@ -93,7 +94,78 @@ export const Toast = {
     Title: /* @__PURE__ */ part(BaseToast.Title, 'pui-toast-title'),
     Description: /* @__PURE__ */ part(BaseToast.Description, 'pui-toast-description'),
     Text: /* @__PURE__ */ part('div', 'pui-toast-text'),
-    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner'),
+    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner', { portal: true }),
 };
 // 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/toggle-group.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+export declare function ToggleGroup<Value extends string>({ className, ref, ...props }: BaseToggleGroup.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;

package/dist/toggle-group.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { skin } from './parts.js';
+export function ToggleGroup({ className, ref, ...props }) {
+    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
+}

package/dist/toggle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } 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';
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;

package/dist/toggle.js

@@ -0,0 +1,9 @@
+'use client';
+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';
+export function Toggle({ className, size, ref, ...props }) {
+    const scheme = useComponentSize(size === 'icon' ? undefined : size);
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
+}