@surflane/ui 0.3.0 → 0.5.0

package/dist/slider.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+declare function SliderRoot<Value extends number | readonly number[]>({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment, ...props }: BaseSlider.Root.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+export declare const Slider: {
+    Root: typeof SliderRoot;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLOutputElement>>;
+    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export { SliderRoot };
+export declare const SliderControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, SliderValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLOutputElement>>;

package/dist/slider.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { part, skin } from './parts.js';
+import { useResetValue, useRootRef } from './form-state.js';
+function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+}
+export const Slider = {
+    ...BaseSlider,
+    Root: SliderRoot,
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SliderRoot };
+export const { Control: SliderControl, Indicator: SliderIndicator, Label: SliderLabel, Thumb: SliderThumb, Track: SliderTrack, Value: SliderValue, } = Slider;

package/dist/spinner.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+};
+/** Use decorative within a loading region that already owns the announcement. */
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    label?: string;
+    decorative?: boolean;
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/spinner.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { sizeName, cx } from './parts.js';
+/** Use decorative within a loading region that already owns the announcement. */
+export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsxs("span", { ...props, ref: ref, className: cx('pui-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
+});

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 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,13 @@
 '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 = 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',
+    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 = 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-context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { SyntaxToken } from './syntax-engine.js';
+export type SyntaxEngine = {
+    highlightCode(code: string, language: string): Promise<SyntaxToken[][] | null>;
+};
+/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+export declare const SyntaxEngineContext: React.Context<(() => Promise<SyntaxEngine>) | null>;

package/dist/syntax-context.js

@@ -0,0 +1,4 @@
+'use client';
+import * as React from 'react';
+/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+export const SyntaxEngineContext = /* @__PURE__ */ React.createContext(null);

package/dist/syntax-highlighter.d.ts

@@ -7,7 +7,10 @@ export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>
     label?: string;
     wrap?: boolean;
 };
-/** Rendering remains selectable React text; it never inserts executable HTML. */
+/**
+ * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
+ * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
+ */
 export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
     code: string;
     language?: string;

package/dist/syntax-highlighter.js

@@ -2,6 +2,8 @@
 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',
@@ -29,18 +31,23 @@ const aliases = {
     plaintext: 'text',
     txt: 'text',
 };
-/** Rendering remains selectable React text; it never inserts executable HTML. */
-export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
+/**
+ * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
+ * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
+ */
+export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
+    const load = React.useContext(SyntaxEngineContext);
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
     const [result, setResult] = React.useState();
     React.useEffect(() => {
         let current = true;
-        if (lang === 'text' ||
+        if (!load ||
+            lang === 'text' ||
             !syntaxLanguages.includes(lang) ||
             code.length > 50000)
             return;
-        import('./syntax-engine.js')
+        load()
             .then((engine) => engine.highlightCode(code, lang))
             .then((tokens) => {
             if (current)
@@ -53,11 +60,11 @@ export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ c
         return () => {
             current = false;
         };
-    }, [code, lang]);
+    }, [code, lang, load]);
     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/syntax-highlighting.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
+ * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ */
+export declare function SyntaxHighlighting({ children, }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/syntax-highlighting.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SyntaxEngineContext } from './syntax-context.js';
+// The engine and each grammar load on first use, in their own chunks.
+const load = () => import('./syntax-engine.js');
+/**
+ * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
+ * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ */
+export function SyntaxHighlighting({ children, }) {
+    return (_jsx(SyntaxEngineContext.Provider, { value: load, children: children }));
+}

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/table.js

@@ -0,0 +1,67 @@
+'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, cx } from './parts.js';
+import { ScrollArea } from './scroll-area.js';
+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) {
+    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-sticky-header": stickyHeader || undefined }));
+});
+const layout = ({ align, numeric }) => ({
+    'data-align': numeric ? 'end' : align,
+    'data-numeric': numeric || undefined,
+});
+const HeaderCellPart = /* @__PURE__ */ part('th', 'pui-table-cell pui-table-header');
+const CellPart = /* @__PURE__ */ part('td', 'pui-table-cell');
+// align replaces the obsolete HTML align attribute of th and td.
+const TableHeaderCell = /* @__PURE__ */ React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
+    return _jsx(HeaderCellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
+    return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+function SortIcon({ sort }) {
+    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: 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: 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: 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: cx('pui-table-row', className) }));
+});
+export const Table = {
+    Container: TableContainer,
+    Root: TableRoot,
+    Caption: /* @__PURE__ */ part('caption', 'pui-table-caption'),
+    Head: /* @__PURE__ */ part('thead', 'pui-table-head'),
+    Body: /* @__PURE__ */ part('tbody', 'pui-table-body'),
+    Foot: /* @__PURE__ */ part('tfoot', 'pui-table-foot'),
+    Row: TableRow,
+    HeaderCell: TableHeaderCell,
+    SortHeader: TableSortHeader,
+    Cell: TableCell,
+    Truncate: TableTruncate,
+    Message: TableMessage,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+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/tabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const Tabs: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Panel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsPanel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsTab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>;

package/dist/tabs.js

@@ -0,0 +1,13 @@
+'use client';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { part } from './parts.js';
+export const Tabs = {
+    ...BaseTabs,
+    Root: /* @__PURE__ */ part(BaseTabs.Root, 'pui-tabs'),
+    List: /* @__PURE__ */ part(BaseTabs.List, 'pui-tabs-list'),
+    Tab: /* @__PURE__ */ part(BaseTabs.Tab, 'pui-tabs-tab'),
+    Panel: /* @__PURE__ */ part(BaseTabs.Panel, 'pui-tabs-panel'),
+    Indicator: /* @__PURE__ */ part(BaseTabs.Indicator, 'pui-tabs-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Indicator: TabsIndicator, List: TabsList, Panel: TabsPanel, Root: TabsRoot, Tab: TabsTab, } = Tabs;

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.js

@@ -1,25 +1,26 @@
 'use client';
 import { jsx as _jsx } 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 { part, skin, cx } from './parts.js';
 import { StatusIcon } from './status.js';
-const ToneContext = React.createContext('neutral');
-const Root = React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
+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 = 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 = 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', ...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' }) })) }));
+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(Icon, { name: 'close' }) }));
 });
-const Action = React.forwardRef(function Action({ className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'sm', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
+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) }));
 });
-const Viewport = React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
+const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
     const viewportRef = React.useRef(null);
     React.useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -31,7 +32,7 @@ const Viewport = React.forwardRef(function Viewport({ layout = 'stack', classNam
             const gap = parseFloat(getComputedStyle(viewport).rowGap) || 0;
             const height = cards.reduce((sum, card) => {
                 const natural = parseFloat(getComputedStyle(card).getPropertyValue('--toast-height'));
-                return (sum + (Number.isFinite(natural) ? natural : card.offsetHeight));
+                return sum + (Number.isFinite(natural) ? natural : card.offsetHeight);
             }, 0) +
                 Math.max(0, cards.length - 1) * gap;
             const wasOverflow = viewport.hasAttribute('data-stack-overflow');
@@ -85,15 +86,15 @@ const Viewport = React.forwardRef(function Viewport({ layout = 'stack', classNam
 export const Toast = {
     ...BaseToast,
     Root,
-    Icon,
+    Icon: ToneIcon,
     Close,
     Action,
     Viewport,
-    Content: part(BaseToast.Content, 'pui-toast-content'),
-    Title: part(BaseToast.Title, 'pui-toast-title'),
-    Description: part(BaseToast.Description, 'pui-toast-description'),
-    Text: part('div', 'pui-toast-text'),
-    Positioner: part(BaseToast.Positioner, 'pui-positioner'),
+    Content: /* @__PURE__ */ part(BaseToast.Content, 'pui-toast-content'),
+    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', { 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;

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 }));
+}