@scalewing/react 1.41.0 → 1.42.0

package/dist/components/document-viewer/use-page-render.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { isCancelled } from './pdf-document.js';
+/**
+ * Draws the shown page at `width` CSS pixels into the canvas and text
+ * layer, again whenever the page or the width changes, cancelling a draw
+ * that is no longer wanted. The page is visible while it draws, so it
+ * appears as PDF.js paints it. `aspect` is its height over its width, for
+ * the page's box, known before its first draw ends.
+ */
+export function usePageRender({ document, page, width, canvas, text, onError, }) {
+    const [outcome, setOutcome] = useState(null);
+    const [shape, setShape] = useState(null);
+    useEffect(() => {
+        if (!document || !canvas.current || !text.current || width <= 0)
+            return;
+        const abort = new AbortController();
+        document
+            .renderPage({
+            page,
+            width,
+            canvas: canvas.current,
+            text: text.current,
+            signal: abort.signal,
+        })
+            .then((size) => {
+            if (abort.signal.aborted)
+                return;
+            setOutcome({
+                document,
+                page,
+                width,
+                state: 'drawn',
+                aspect: size.height / size.width,
+            });
+        }, (error) => {
+            if (abort.signal.aborted || isCancelled(error))
+                return;
+            setOutcome({ document, page, width, state: 'failed', aspect: null });
+            onError(error);
+        });
+        return () => abort.abort();
+    }, [document, page, width, canvas, text, onError]);
+    // The box takes the page's shape as soon as it is known.
+    useEffect(() => {
+        if (!document)
+            return;
+        let live = true;
+        document.pageAspect(page).then((aspect) => {
+            if (live)
+                setShape({ document, page, aspect });
+        }, () => undefined);
+        return () => {
+            live = false;
+        };
+    }, [document, page]);
+    const current = outcome &&
+        outcome.document === document &&
+        outcome.page === page &&
+        outcome.width === width
+        ? outcome
+        : null;
+    const known = shape && shape.document === document && shape.page === page
+        ? shape.aspect
+        : null;
+    return {
+        state: current?.state ?? 'drawing',
+        aspect: known ?? current?.aspect ?? null,
+    };
+}

package/dist/components/document-viewer/use-pdf-document.d.ts

@@ -0,0 +1,22 @@
+import { type PdfDocument } from './pdf-document.js';
+export type PdfDocumentState = {
+    status: 'loading';
+} | {
+    status: 'ready';
+    document: PdfDocument;
+} | {
+    status: 'failed';
+    error: unknown;
+};
+/**
+ * Opens the PDF in `data` and closes it (and its worker) when the bytes
+ * change or the viewer goes away. New bytes start a new open and show as
+ * loading until it settles, so a consumer's Try again is new bytes (or a
+ * new `key`).
+ */
+export declare function usePdfDocument(data: ArrayBuffer | Uint8Array, workerSrc: string, callbacks: {
+    onLoad?: (info: {
+        pageCount: number;
+    }) => void;
+    onError?: (error: unknown) => void;
+}): PdfDocumentState;

package/dist/components/document-viewer/use-pdf-document.js

@@ -0,0 +1,47 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { openPdf } from './pdf-document.js';
+/** Closes a document no one shows any more; a failure to close is moot. */
+function closeQuietly(document) {
+    document.destroy().catch(() => undefined);
+}
+/**
+ * Opens the PDF in `data` and closes it (and its worker) when the bytes
+ * change or the viewer goes away. New bytes start a new open and show as
+ * loading until it settles, so a consumer's Try again is new bytes (or a
+ * new `key`).
+ */
+export function usePdfDocument(data, workerSrc, callbacks) {
+    const [settled, setSettled] = useState(null);
+    // The callbacks are read when the open settles, never reasons to reopen.
+    const latest = useRef(callbacks);
+    useEffect(() => {
+        latest.current = callbacks;
+    });
+    useEffect(() => {
+        let live = true;
+        let opened = null;
+        openPdf(data, workerSrc).then((document) => {
+            if (!live) {
+                closeQuietly(document);
+                return;
+            }
+            opened = document;
+            setSettled({ data, workerSrc, state: { status: 'ready', document } });
+            latest.current.onLoad?.({ pageCount: document.pageCount });
+        }, (error) => {
+            if (!live)
+                return;
+            setSettled({ data, workerSrc, state: { status: 'failed', error } });
+            latest.current.onError?.(error);
+        });
+        return () => {
+            live = false;
+            if (opened)
+                closeQuietly(opened);
+        };
+    }, [data, workerSrc]);
+    return settled && settled.data === data && settled.workerSrc === workerSrc
+        ? settled.state
+        : { status: 'loading' };
+}

package/dist/components/document-viewer/use-pinch-zoom.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+/**
+ * Two fingers on the page zoom it, between fit width and four times as
+ * wide, about the point between them. The page's box allows
+ * only panning (`touch-action: pan-x pan-y`), so the browser does not zoom
+ * the whole screen instead; a two-finger move is taken from the browser
+ * (a non-passive listener), one finger still scrolls.
+ */
+export declare function usePinchZoom(box: RefObject<HTMLElement | null>, zoom: number, zoomTo: (zoom: number, at: {
+    x: number;
+    y: number;
+}) => void): void;

package/dist/components/document-viewer/use-pinch-zoom.js

@@ -0,0 +1,67 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { clampZoom } from './zoom.js';
+function spread(touches) {
+    const [a, b] = [touches[0], touches[1]];
+    return {
+        distance: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+        x: (a.clientX + b.clientX) / 2,
+        y: (a.clientY + b.clientY) / 2,
+    };
+}
+/**
+ * Two fingers on the page zoom it, between fit width and four times as
+ * wide, about the point between them. The page's box allows
+ * only panning (`touch-action: pan-x pan-y`), so the browser does not zoom
+ * the whole screen instead; a two-finger move is taken from the browser
+ * (a non-passive listener), one finger still scrolls.
+ */
+export function usePinchZoom(box, zoom, zoomTo) {
+    const current = useRef(zoom);
+    const pinch = useRef(null);
+    const setter = useRef(zoomTo);
+    useEffect(() => {
+        current.current = zoom;
+        setter.current = zoomTo;
+    });
+    useEffect(() => {
+        const element = box.current;
+        if (!element)
+            return;
+        function start(event) {
+            if (event.touches.length !== 2)
+                return;
+            pinch.current = {
+                distance: spread(event.touches).distance,
+                zoom: current.current,
+            };
+        }
+        function move(event) {
+            const begun = pinch.current;
+            if (!begun || event.touches.length !== 2 || !element)
+                return;
+            event.preventDefault();
+            const now = spread(event.touches);
+            if (begun.distance <= 0)
+                return;
+            const next = clampZoom((begun.zoom * now.distance) / begun.distance);
+            if (next === current.current)
+                return;
+            setter.current(next, { x: now.x, y: now.y });
+        }
+        function end(event) {
+            if (event.touches.length < 2)
+                pinch.current = null;
+        }
+        element.addEventListener('touchstart', start, { passive: true });
+        element.addEventListener('touchmove', move, { passive: false });
+        element.addEventListener('touchend', end);
+        element.addEventListener('touchcancel', end);
+        return () => {
+            element.removeEventListener('touchstart', start);
+            element.removeEventListener('touchmove', move);
+            element.removeEventListener('touchend', end);
+            element.removeEventListener('touchcancel', end);
+        };
+    }, [box]);
+}

package/dist/components/document-viewer/use-zoom.d.ts

@@ -0,0 +1,23 @@
+/** How long a zoom rests before the page is drawn again at its size. */
+export declare const zoomSettleMs = 150;
+/**
+ * The page's zoom (1 is fit width) and the scrolling box it is shown in.
+ * `zoomTo` changes it about a point on the screen (`at`, in client
+ * pixels; the middle of the box's visible part when left out) so the spot
+ * of the page under it stays put: once the bigger or smaller page is laid
+ * out, the box scrolls across and the boxes around it (the window at
+ * last) scroll down by what keeps that spot in place. `drawnZoom`
+ * follows `zoom` once it rests, so a pinch stretches the drawn page and
+ * only its end draws it again. Another `resetKey` (another page) is fit
+ * width again.
+ */
+export declare function useZoom(resetKey: string): {
+    box: import("react").RefObject<HTMLDivElement | null>;
+    page: import("react").RefObject<HTMLDivElement | null>;
+    zoom: number;
+    drawnZoom: number;
+    zoomTo: (next: number, at?: {
+        x: number;
+        y: number;
+    }) => void;
+};

package/dist/components/document-viewer/use-zoom.js

@@ -0,0 +1,70 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { scrollChainBy } from './scroll-chain.js';
+import { anchorShift, clampZoom, minZoom } from './zoom.js';
+/** The middle of the part of `element` inside the window, in client pixels. */
+function visibleMiddle(element) {
+    const rect = element.getBoundingClientRect();
+    const view = element.ownerDocument.documentElement;
+    const top = Math.max(rect.top, 0);
+    const bottom = Math.min(rect.bottom, view.clientHeight || rect.bottom);
+    return {
+        x: rect.left + rect.width / 2,
+        y: bottom > top ? (top + bottom) / 2 : rect.top + rect.height / 2,
+    };
+}
+/** How long a zoom rests before the page is drawn again at its size. */
+export const zoomSettleMs = 150;
+/**
+ * The page's zoom (1 is fit width) and the scrolling box it is shown in.
+ * `zoomTo` changes it about a point on the screen (`at`, in client
+ * pixels; the middle of the box's visible part when left out) so the spot
+ * of the page under it stays put: once the bigger or smaller page is laid
+ * out, the box scrolls across and the boxes around it (the window at
+ * last) scroll down by what keeps that spot in place. `drawnZoom`
+ * follows `zoom` once it rests, so a pinch stretches the drawn page and
+ * only its end draws it again. Another `resetKey` (another page) is fit
+ * width again.
+ */
+export function useZoom(resetKey) {
+    const box = useRef(null);
+    const page = useRef(null);
+    const [keyed, setKeyed] = useState({ key: resetKey, zoom: minZoom });
+    const [drawn, setDrawn] = useState({ key: resetKey, zoom: minZoom });
+    const zoom = keyed.key === resetKey ? keyed.zoom : minZoom;
+    const drawnZoom = drawn.key === resetKey ? drawn.zoom : minZoom;
+    const anchor = useRef(null);
+    const shown = useRef(zoom);
+    useLayoutEffect(() => {
+        const from = shown.current;
+        shown.current = zoom;
+        const element = box.current;
+        const sheet = page.current;
+        const spot = anchor.current;
+        anchor.current = null;
+        if (!element || !sheet || !spot || from === zoom)
+            return;
+        const shift = anchorShift(spot.before, sheet.getBoundingClientRect(), spot.point);
+        scrollChainBy(element, 'x', shift.x);
+        scrollChainBy(element, 'y', shift.y);
+    }, [zoom]);
+    useEffect(() => {
+        const timer = setTimeout(() => setDrawn({ key: resetKey, zoom }), zoomSettleMs);
+        return () => clearTimeout(timer);
+    }, [resetKey, zoom]);
+    function zoomTo(next, at) {
+        const element = box.current;
+        const sheet = page.current;
+        const target = clampZoom(next);
+        if (target === shown.current)
+            return;
+        if (element && sheet) {
+            anchor.current = {
+                point: at ?? visibleMiddle(element),
+                before: sheet.getBoundingClientRect(),
+            };
+        }
+        setKeyed({ key: resetKey, zoom: target });
+    }
+    return { box, page, zoom, drawnZoom, zoomTo };
+}

package/dist/components/document-viewer/zoom.d.ts

@@ -0,0 +1,29 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export declare const minZoom = 1;
+export declare const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export declare const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export declare function clampZoom(zoom: number): number;
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export declare function zoomForKey(key: string, zoom: number): number | null;
+/** A box on the screen, as `getBoundingClientRect` gives it. */
+export type ScreenBox = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export declare function anchorShift(before: ScreenBox, after: ScreenBox, point: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};

package/dist/components/document-viewer/zoom.js

@@ -0,0 +1,37 @@
+/** Fit width is 1; a page can be drawn up to four times as wide. */
+export const minZoom = 1;
+export const maxZoom = 4;
+/** One key press's step: a quarter of the fitted width. */
+export const zoomStep = 0.25;
+/** A zoom kept between fit width and the most, to two decimals. */
+export function clampZoom(zoom) {
+    if (!Number.isFinite(zoom))
+        return minZoom;
+    return Math.round(Math.min(maxZoom, Math.max(minZoom, zoom)) * 100) / 100;
+}
+/** The zoom a key asks for on the page: `+` or `=` in, `-` out, `0` fit. */
+export function zoomForKey(key, zoom) {
+    if (key === '+' || key === '=')
+        return clampZoom(zoom + zoomStep);
+    if (key === '-' || key === '_')
+        return clampZoom(zoom - zoomStep);
+    if (key === '0')
+        return minZoom;
+    return null;
+}
+/**
+ * How far to scroll, across and down, so the spot of the page that was
+ * under `point` before a zoom (the page at `before`) is under it again
+ * after (the page at `after`). Both boxes are the page's own, so the
+ * stage's padding and where the page sits on the screen count.
+ */
+export function anchorShift(before, after, point) {
+    if (before.width <= 0 || before.height <= 0)
+        return { x: 0, y: 0 };
+    const across = (point.x - before.left) / before.width;
+    const down = (point.y - before.top) / before.height;
+    return {
+        x: after.left + across * after.width - point.x,
+        y: after.top + down * after.height - point.y,
+    };
+}

package/dist/components/file-field/file-field-checks.d.ts

@@ -0,0 +1,13 @@
+import type { FileFieldValue } from '../FileField.js';
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name
+ * or a blank detail.
+ */
+export declare function assertFileField(props: {
+    label: string;
+    chooseLabel: string;
+    changeLabel: string;
+    dropLabel: string | undefined;
+    value: FileFieldValue | null;
+}): void;

package/dist/components/file-field/file-field-checks.js

@@ -0,0 +1,21 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a FileField it cannot name or show: an empty label,
+ * choose or change words, a blank drop hint, or a chosen file with no name
+ * or a blank detail.
+ */
+export function assertFileField(props) {
+    for (const key of ['label', 'chooseLabel', 'changeLabel'])
+        if (isBlank(props[key]))
+            throw new RangeError(`FileField ${key} must be non-empty text`);
+    if (props.dropLabel !== undefined && isBlank(props.dropLabel))
+        throw new RangeError('FileField dropLabel must be non-empty text');
+    if (props.value === null)
+        return;
+    if (isBlank(props.value.name))
+        throw new RangeError('FileField value name must be non-empty text');
+    if (props.value.detail !== undefined && isBlank(props.value.detail))
+        throw new RangeError('FileField value detail must be non-empty text');
+}

package/dist/components/file-field/use-file-drop.d.ts

@@ -0,0 +1,34 @@
+import { type DragEvent } from 'react';
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+declare function refuse(event: DragEvent): void;
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export declare function useFileDrop({ disabled, onFile, }: {
+    disabled: boolean;
+    onFile: (file: File) => void;
+}): {
+    dragging: boolean;
+    handlers: {
+        onDragOver: typeof refuse;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+        onDragEnter?: undefined;
+    };
+} | {
+    dragging: boolean;
+    handlers: {
+        onDragEnter: (event: DragEvent) => void;
+        onDragOver: (event: DragEvent) => void;
+        onDragLeave: (event: DragEvent) => void;
+        onDrop: (event: DragEvent) => void;
+    };
+};
+export {};

package/dist/components/file-field/use-file-drop.js

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react';
+/** Whether a drag carries files, not text or a link dragged from the page. */
+function carriesFiles(event) {
+    return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+}
+/**
+ * A disabled field still keeps the browser from opening a file dropped on
+ * it, and shows no copy cursor: the drop does nothing.
+ */
+function refuse(event) {
+    if (!carriesFiles(event))
+        return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+}
+/**
+ * A drop target for one file: whether files are dragged over it, and the
+ * handlers that keep the browser from opening a dropped file and hand the
+ * first one to `onFile`. A counter follows the drag through the target's
+ * children, whose enter and leave events would otherwise flicker it. While
+ * `disabled`, a dropped file is refused and a drag in progress ends.
+ */
+export function useFileDrop({ disabled, onFile, }) {
+    const depth = useRef(0);
+    const [dragging, setDragging] = useState(false);
+    // A drag that began before the field was disabled ends here too, so its
+    // tint is gone when the field is enabled again.
+    const stop = (event) => {
+        refuse(event);
+        depth.current = 0;
+        setDragging(false);
+    };
+    if (disabled)
+        return {
+            dragging: false,
+            handlers: {
+                onDragOver: refuse,
+                // Leaving or dropping ends a drag that began while enabled.
+                onDragLeave: stop,
+                onDrop: stop,
+            },
+        };
+    return {
+        dragging,
+        handlers: {
+            onDragEnter: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current += 1;
+                setDragging(true);
+            },
+            onDragOver: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'copy';
+            },
+            onDragLeave: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                depth.current = Math.max(0, depth.current - 1);
+                if (depth.current === 0)
+                    setDragging(false);
+            },
+            onDrop: (event) => {
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current = 0;
+                setDragging(false);
+                const file = event.dataTransfer.files[0];
+                if (file)
+                    onFile(file);
+            },
+        },
+    };
+}

package/dist/components/file-field/use-swap-focus.d.ts

@@ -0,0 +1,15 @@
+import { type FocusEvent, type RefObject } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export declare function useSwapFocus(button: RefObject<HTMLElement | null>, chosen: boolean): {
+    onFocus: () => void;
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+};

package/dist/components/file-field/use-swap-focus.js

@@ -0,0 +1,40 @@
+'use client';
+import { useLayoutEffect, useRef, } from 'react';
+/**
+ * Keeps focus when the field swaps its zone for the chosen row (or back).
+ * The frame's focus handlers note whether focus is in the field. A blur
+ * that leaves the button in the page, with the window still focused, means
+ * the person moved on; one whose button was removed is the swap; and one
+ * while the window is away is the system picker. After a swap, if focus
+ * was in the field and is now nowhere, it moves to the button now there.
+ * Focus the person moved elsewhere (an answer that comes later) is never
+ * taken back.
+ */
+export function useSwapFocus(button, chosen) {
+    const inside = useRef(false);
+    useLayoutEffect(() => {
+        if (!inside.current)
+            return;
+        const active = document.activeElement;
+        if (active === null || active === document.body)
+            button.current?.focus();
+    }, [button, chosen]);
+    return {
+        onFocus: () => {
+            inside.current = true;
+        },
+        onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && event.currentTarget.contains(next))
+                return;
+            const left = event.target;
+            // Removed by the swap, the button is gone by the next microtask; and
+            // while the system picker is open the window itself has lost focus,
+            // which is not the person leaving the field.
+            queueMicrotask(() => {
+                if (left.isConnected && document.hasFocus())
+                    inside.current = false;
+            });
+        },
+    };
+}

package/dist/components/list/ListRowContent.d.ts

@@ -14,9 +14,13 @@ export type ListRowContentProps = {
     tone: ListRowTone;
     titleAppearance: ListRowTitleAppearance;
     accessory: ListRowAccessory;
+    /** The unread words; the dot shows while they are given. */
+    unreadLabel?: string;
+    tag?: ReactNode;
 };
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
- * over its detail, the value over its detail, then the chevron or check.
+ * (with the unread dot and its hidden words) over its detail, the value
+ * over its detail, the tag, then the chevron or check.
  */
-export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }: ListRowContentProps): import("react").JSX.Element;
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cx } from '../../class-names.js';
 import { Badge } from '../Badge.js';
 import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
+import { hasSlot } from './row-slot.js';
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
- * over its detail, the value over its detail, then the chevron or check.
+ * (with the unread dot and its hidden words) over its detail, the value
+ * over its detail, the tag, then the chevron or check.
  */
-export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }) {
-    return (_jsxs(_Fragment, { children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsx("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: title }), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, }) {
+    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: [title, unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
 }

package/dist/components/list/ListRowItem.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+/**
+ * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
+ * row with an `action` holds that control after the row, a sibling of the
+ * row's button or link, so it is never inside the row's press area.
+ */
+export declare function ListRowItem({ action, children, }: {
+    action: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/list/ListRowItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { cx } from '../../class-names.js';
+import { ListRowContainer } from './list-row-container.js';
+import { hasSlot } from './row-slot.js';
+/**
+ * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
+ * row with an `action` holds that control after the row, a sibling of the
+ * row's button or link, so it is never inside the row's press area.
+ */
+export function ListRowItem({ action, children, }) {
+    const container = useContext(ListRowContainer);
+    const hasAction = hasSlot(action);
+    const content = (_jsxs(_Fragment, { children: [children, hasAction ? _jsx("div", { className: "sw-list-row-action", children: action }) : null] }));
+    const className = cx('sw-list-item', hasAction && 'sw-list-item-action');
+    return container === 'li' ? (_jsx("li", { className: className, children: content })) : (_jsx("div", { className: className, children: content }));
+}