@flood-md/react 0.2.11 → 0.2.12

package/dist/index.d.ts

@@ -82,6 +82,8 @@ export interface CollectionToolbarProps extends Omit<FieldsetProps, "children" |
     summaryPrefix?: ReactNode;
     /** At most two task-important quick filters; move additional properties into filterContent. */
     quickFilters?: ReactNode;
+    /** Additional commands beside Filters in the same tool row. */
+    actions?: ReactNode;
     filterContent?: ReactNode;
     filtersLabel?: string;
     filterTitle?: string;
@@ -277,10 +279,21 @@ export declare const ImagePreview: import("react").ForwardRefExoticComponent<Ima
 export interface DataTableColumn {
     id: string;
     label: string;
+    /** Short unit shown alongside the label, such as USD or kg. */
+    unit?: string;
     sortable?: boolean;
     numeric?: boolean;
     align?: "start" | "end";
     width?: CSSProperties["width"];
+    /** Keep this column visible when the host or Columns menu hides other columns. */
+    hideable?: boolean;
+    /** Opt into pointer and keyboard width adjustments for this column. */
+    resizable?: boolean;
+    /** Interactive width bounds in CSS pixels. */
+    minWidth?: number;
+    maxWidth?: number;
+    /** Keep the column at a logical edge when the table scrolls horizontally. */
+    pinned?: "start" | "end";
 }
 export interface DataTableRow {
     id: string;
@@ -288,6 +301,8 @@ export interface DataTableRow {
     cells: Readonly<Record<string, ReactNode>>;
     sortValues?: Readonly<Record<string, string | number | null>>;
     selectionDisabled?: boolean;
+    /** Related detail rendered in a separate full-width row on disclosure. */
+    expandedContent?: ReactNode;
     /** One named record-opening action. Other controls in the row remain independent. */
     primaryAction?: {
         column: string;
@@ -312,6 +327,13 @@ export interface DataTableLabels {
     results?: (from: number, to: number, total: number) => string;
     selection?: (selected: number, total: number) => string;
     sort?: (label: string) => string;
+    columns?: string;
+    resetColumns?: string;
+    sortedColumn?: (label: string) => string;
+    resizeColumn?: (label: string) => string;
+    expandRow?: (label: string) => string;
+    collapseRow?: (label: string) => string;
+    rowDetails?: string;
     pagination?: string;
     previousPage?: string;
     nextPage?: string;
@@ -319,17 +341,33 @@ export interface DataTableLabels {
 }
 export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Host-owned heading, search and filters aligned with the outer table cells. */
-    toolbar?: ReactNode;
+    toolbar?: ReactNode | ((controls: {
+        columns: ReactNode;
+    }) => ReactNode);
     inset?: "standard" | "roomy";
     /** Ready with no rows only. Compose EmptyState/actions here; loading and error keep their owners. */
     emptyContent?: ReactNode;
     caption: string;
     hideCaption?: boolean;
     columns: readonly DataTableColumn[];
+    showColumnVisibility?: boolean;
+    hiddenColumnIds?: readonly string[];
+    /** Initial hidden columns and the layout restored by Reset columns. */
+    defaultHiddenColumnIds?: readonly string[];
+    onHiddenColumnIdsChange?: (ids: string[]) => void;
+    columnWidths?: Readonly<Record<string, number>>;
+    defaultColumnWidths?: Readonly<Record<string, number>>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
     rows: readonly DataTableRow[];
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onExpandedChange?: (ids: string[]) => void;
     density?: "compact" | "comfortable";
     striped?: boolean;
     minWidth?: CSSProperties["minWidth"];
+    /** Maximum height of the scroll viewport, including the header. */
+    maxViewportHeight?: CSSProperties["maxBlockSize"];
+    stickyHeader?: boolean;
     sort?: DataTableSort | null;
     defaultSort?: DataTableSort | null;
     onSortChange?: (sort: DataTableSort | null) => void;
@@ -344,6 +382,8 @@ export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
     onPageChange?: (page: number) => void;
     /** Hide the result range while preserving selection and pagination controls. */
     showResults?: boolean;
+    /** Hide the visible selection count while retaining its accessible status. */
+    showSelection?: boolean;
     /** Server mode renders rows as the supplied page, without local sorting/slicing. */
     paginationMode?: "client" | "server";
     totalRows?: number;
@@ -355,6 +395,20 @@ export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
 }
 /** A client-side table composed from native table, checkbox and pagination. @since 0.2.8 */
 export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label" | "aria-labelledby"> {
+    /** Equally spaced observations in order. Missing or nonfinite values break the line. */
+    values: readonly (number | null)[];
+    /** Localized text conveying the trend or the absence of data. */
+    label: string;
+    showLabel?: boolean;
+    /** Shared lower and upper bounds for comparisons. Values outside the bounds are clipped. */
+    domain?: readonly [number, number];
+    size?: "sm" | "md";
+    tone?: "neutral" | "accent" | "success" | "warning" | "error";
+    variant?: "line" | "area";
+}
+/** @since 0.2.11 */
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DataListProps extends Omit<HTMLAttributes<HTMLUListElement>, "role"> {
     density?: "compact" | "comfortable";
     dividers?: boolean;
@@ -898,6 +952,12 @@ export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, "def
     onEditingChange?: (editing: boolean) => void;
     onCommit?: (value: string) => void;
     onCancel?: () => void;
+    /** Return a message to keep the draft open and prevent a commit. */
+    validate?: (value: string) => string | undefined;
+    inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    previewVariant?: "subtle" | "ghost";
+    /** Render the editor over its trigger at this preferred width. */
+    editorOverlayWidth?: CSSProperties["inlineSize"];
     blurAction?: "commit" | "cancel" | "none";
     readOnly?: boolean;
     disabled?: boolean;
@@ -970,6 +1030,9 @@ export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
     density?: DataDensity;
     striped?: boolean;
     scrollLabel?: string;
+    /** Maximum height of the scroll viewport, including the header and caption. */
+    maxViewportHeight?: CSSProperties["maxBlockSize"];
+    stickyHeader?: boolean;
     /** Shared cell alignment. Middle keeps mixed record/action rows coherent; top is an explicit prose-table choice. */
     cellVerticalAlign?: "top" | "middle" | "bottom";
 }
@@ -1206,6 +1269,9 @@ export interface DrawerProps extends DialogProps {
     footer?: ReactNode;
 }
 export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDialogElement>>;
+export type SheetProps = Omit<DrawerProps, "side">;
+/** A modal bottom sheet for a short task or a list of choices. @since 0.2.12 */
+export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDialogElement>>;
 export interface AlertDialogProps extends Omit<DialogProps, "children" | "role" | "description" | "closeLabel" | "closeOnOutsideClick" | "initialFocusRef"> {
     description: string;
     confirmLabel?: string;
@@ -1504,7 +1570,7 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: "display" | "large" | "page" | "section";
+    size?: "display" | "large" | "page" | "section" | "group";
 }
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export type Space = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "12";
@@ -1748,7 +1814,7 @@ export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title">
     description?: ReactNode;
     actions?: ReactNode;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
-    headingSize?: "display" | "large" | "page" | "section";
+    headingSize?: HeadingProps["size"];
 }
 export declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
 export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
@@ -1792,6 +1858,8 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     mainRef?: Ref<HTMLElement>;
     scrollLabel?: string;
     scrollOrientation?: ScrollAreaProps["orientation"];
+    /** Keep the content width stable with "none" when the layout already clears the overlay rails. */
+    scrollContentInset?: ScrollAreaProps["contentInset"];
     skipLabel?: string;
 }
 /** Composes application navigation and a main landmark with optional bounded scrolling. @since 0.2.11 */

package/dist/index.js

@@ -51,6 +51,7 @@ import { ClockTimePicker } from "./time-picker.js";
 import { CivilDateTimeRangePicker } from "./date-time-range-picker.js";
 import { FileRecord, UploadRecord, ModalImagePreview, FileMetadata } from "./file-records.js";
 import { ManagedDataTable } from "./data-table.js";
+import { TrendPlot } from "./sparkline.js";
 import { CheckableCard, ExclusiveCard } from "./collection-cards.js";
 import { ColorPreview, ColorEditor } from "./color-controls.js";
 import { HoverPreview } from "./hover-card.js";
@@ -96,6 +97,10 @@ export const UploadList = /* @__PURE__ */ forwardRef(function UploadList(props,
 export const ImagePreview = /* @__PURE__ */ forwardRef(function ImagePreview(props, ref) { return _jsx(ModalImagePreview, { ...props, ref: ref }); });
 /** A client-side table composed from native table, checkbox and pagination. @since 0.2.8 */
 export const DataTable = /* @__PURE__ */ forwardRef(function DataTable(props, ref) { return _jsx(ManagedDataTable, { ...props, ref: ref }); });
+/** @since 0.2.11 */
+export const Sparkline = /* @__PURE__ */ forwardRef(function Sparkline({ showLabel = false, size = "md", tone = "accent", variant = "area", ...props }, ref) {
+    return _jsx(TrendPlot, { ...props, showLabel: showLabel, size: size, tone: tone, variant: variant, ref: ref });
+});
 /** A native list; links and actions stay independent. @since 0.2.8 */
 export const DataList = /* @__PURE__ */ forwardRef(function DataList({ density = "comfortable", dividers = true, className, ...props }, ref) {
     return _jsx("ul", { ...props, ref: ref, role: "list", "data-density": density, "data-dividers": dividers, className: classes("flood-data-list", className) });
@@ -184,8 +189,8 @@ export const DescriptionList = /* @__PURE__ */ forwardRef(function DescriptionLi
     return _jsx(DescribedData, { ...props, ref: ref, items: items, layout: layout, density: density, dividers: dividers });
 });
 /** @since 0.2.4 */
-export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", ...props }, ref) {
-    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, children: children });
+export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", stickyHeader = false, ...props }, ref) {
+    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, stickyHeader: stickyHeader, children: children });
 });
 /** @since 0.2.4 */
 export const Badge = /* @__PURE__ */ forwardRef(function Badge({ size = "md", tone = "neutral", variant = "subtle", className, ...props }, ref) {
@@ -242,6 +247,10 @@ export const CommandPalette = /* @__PURE__ */ forwardRef(function CommandPalette
 export const Drawer = /* @__PURE__ */ forwardRef(function Drawer({ side = "end", size = "md", defaultOpen = false, closeLabel = "Close", closeOnOutsideClick = true, className, footer, ...props }, ref) {
     return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick, className: classes("flood-drawer", className), "data-side": side, "data-size": size, scrollBody: true, footer: footer });
 });
+/** A modal bottom sheet for a short task or a list of choices. @since 0.2.12 */
+export const Sheet = /* @__PURE__ */ forwardRef(function Sheet({ className, size = "md", ...props }, ref) {
+    return _jsx(ModalOverlay, { ...props, ref: ref, "data-side": "bottom", "data-size": size, className: classes("flood-drawer", "flood-sheet", className), scrollBody: true, bodyContentInset: "none" });
+});
 export const AlertDialog = /* @__PURE__ */ forwardRef(function AlertDialog({ defaultOpen = false, confirmLabel = "Continue", cancelLabel = "Cancel", confirmDisabled = false, ...props }, ref) {
     return _jsx(ConfirmationDialog, { ...props, ref: ref, defaultOpen: defaultOpen, confirmLabel: confirmLabel, cancelLabel: cancelLabel, confirmDisabled: confirmDisabled });
 });

package/dist/overlay-runtime.d.ts

@@ -18,7 +18,7 @@ export declare function placeOverlay(anchor: Rect, size: {
     top: number;
     width: number;
     height: number;
-}, side: Side, align: Align, gap: number, rtl?: boolean): {
+}, side: Side, align: Align, gap: number, rtl?: boolean, overlap?: boolean): {
     left: number;
     top: number;
     side: Side;
@@ -29,13 +29,14 @@ type Layer = {
     anchor: () => HTMLElement | null;
     close: () => void;
     outside?: () => void;
+    closeOnFocusOutside?: boolean;
     modal?: boolean;
     tooltip?: boolean;
 };
 export declare function registerLayer(document: Document, layer: Layer): () => void;
 export declare function lockScroll(document: Document): () => void;
-export declare function positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align): void;
+export declare function positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align, overlap?: boolean): void;
 export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): void;
 /** Retain pixels for a CSS exit after the native layer has released focus. */
-export declare function useLayerExitContent(panel: RefObject<HTMLElement | null>, open: boolean, enabled?: boolean): boolean;
+export declare function useLayerExitContent(panel: RefObject<HTMLElement | null>, open: boolean, enabled?: boolean, transitionProperty?: string): boolean;
 export {};

package/dist/overlay-runtime.js

@@ -1,16 +1,18 @@
 import { useEffect, useLayoutEffect, useState } from "react";
 /** Pure collision handling in layout-viewport coordinates. */
-export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false) {
+export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false, overlap = false) {
     const edge = { left: viewport.left + gap, right: viewport.left + viewport.width - gap, top: viewport.top + gap, bottom: viewport.top + viewport.height - gap };
     const space = { top: anchor.top - edge.top, bottom: edge.bottom - anchor.bottom, left: anchor.left - edge.left, right: edge.right - anchor.right };
     const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
     const needed = (side === "top" || side === "bottom" ? size.height : size.width) + gap;
-    if (space[side] < needed && space[opposite[side]] > space[side])
+    if (!overlap && space[side] < needed && space[opposite[side]] > space[side])
         side = opposite[side];
     const horizontal = side === "top" || side === "bottom";
     const resolved = horizontal && rtl ? (align === "start" ? "end" : align === "end" ? "start" : align) : align;
     let left = horizontal ? (resolved === "start" ? anchor.left : resolved === "end" ? anchor.right - size.width : anchor.left + (anchor.width - size.width) / 2) : side === "left" ? anchor.left - size.width - gap : anchor.right + gap;
     let top = horizontal ? (side === "top" ? anchor.top - size.height - gap : anchor.bottom + gap) : (resolved === "start" ? anchor.top : resolved === "end" ? anchor.bottom - size.height : anchor.top + (anchor.height - size.height) / 2);
+    if (overlap)
+        top = anchor.top;
     left = Math.max(edge.left, Math.min(left, edge.right - size.width));
     top = Math.max(edge.top, Math.min(top, edge.bottom - size.height));
     return { left, top, side };
@@ -58,7 +60,7 @@ export function registerLayer(document, layer) {
         (layer.outside ?? layer.close)();
     };
     const focus = (event) => {
-        if (top() !== layer || layer.modal)
+        if (top() !== layer || layer.modal || layer.closeOnFocusOutside === false)
             return;
         const target = event.target;
         if (!layer.panel.contains(target) && !layer.anchor()?.contains(target))
@@ -109,7 +111,7 @@ export function lockScroll(document) {
         locks.delete(document);
     };
 }
-export function positionLayer(anchor, panel, side, align) {
+export function positionLayer(anchor, panel, side, align, overlap = false) {
     const view = panel.ownerDocument.defaultView;
     const visual = view.visualViewport;
     const viewport = { left: visual?.offsetLeft ?? 0, top: visual?.offsetTop ?? 0, width: visual?.width ?? view.innerWidth, height: visual?.height ?? view.innerHeight };
@@ -121,7 +123,7 @@ export function positionLayer(anchor, panel, side, align) {
         panel.style.setProperty("--flood-overlay-anchor-width", anchorWidth);
     if (panel.style.getPropertyValue("--flood-overlay-anchor-height") !== anchorHeight)
         panel.style.setProperty("--flood-overlay-anchor-height", anchorHeight);
-    const position = placeOverlay(bounds, panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl");
+    const position = placeOverlay(bounds, panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl", overlap);
     const left = `${position.left}px`, top = `${position.top}px`;
     if (panel.style.left !== left)
         panel.style.left = left;
@@ -136,7 +138,7 @@ export function returnFocus(panel, anchor) {
         anchor.focus({ preventScroll: true });
 }
 /** Retain pixels for a CSS exit after the native layer has released focus. */
-export function useLayerExitContent(panel, open, enabled = true) {
+export function useLayerExitContent(panel, open, enabled = true, transitionProperty = "opacity") {
     const [retained, setRetained] = useState(false);
     useLayerLayoutEffect(() => {
         const node = panel.current;
@@ -149,7 +151,7 @@ export function useLayerExitContent(panel, open, enabled = true) {
             return;
         }
         node.inert = true;
-        const transitions = node.getAnimations().filter(animation => "transitionProperty" in animation && animation.transitionProperty === "opacity");
+        const transitions = node.getAnimations().filter(animation => "transitionProperty" in animation && animation.transitionProperty === transitionProperty);
         let active = true;
         if (!transitions.length)
             setRetained(false);
@@ -159,7 +161,7 @@ export function useLayerExitContent(panel, open, enabled = true) {
                     setRetained(false);
             });
         return () => { active = false; node.inert = false; };
-    }, [panel, open, enabled]);
+    }, [panel, open, enabled, transitionProperty]);
     return open || enabled && retained;
 }
 const useLayerLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/overlays.d.ts

@@ -7,6 +7,7 @@ interface ModalOverlayProps extends DialogProps {
     showCloseButton?: boolean;
     role?: "dialog" | "alertdialog";
     scrollBody?: boolean;
+    bodyContentInset?: "none" | "scrollbar";
     footer?: import("react").ReactNode;
 }
 export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/overlays.js

@@ -126,7 +126,7 @@ export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverl
                     leave();
                 } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [pop.chrome === "minimal" ? _jsx(VisuallyHidden, { children: _jsx("h2", { id: `${id}-title`, children: pop.title }) }) : _jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), !titleOnly && _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), showContent && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
 });
-export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
+export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, bodyContentInset, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
     const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
     const dialog = useRef(null), anchor = useRef(null), generated = useId(), id = explicitId ?? `flood-dialog-${generated}`;
     const request = (next) => { if (controlled === undefined)
@@ -194,5 +194,5 @@ export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ s
                         event.preventDefault();
                         first.focus();
                     }
-                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
+                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", contentInset: bodyContentInset, style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
 });

package/dist/sparkline.d.ts

@@ -0,0 +1,2 @@
+import { type SparklineProps } from "./index.js";
+export declare const TrendPlot: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sparkline.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { Text } from "./index.js";
+const plotWidth = 96;
+const plotHeight = 32;
+const plotInset = 3;
+function isObservation(value) {
+    return typeof value === "number" && Number.isFinite(value);
+}
+function getPlot(values, domain, area) {
+    let observedMin = Infinity;
+    let observedMax = -Infinity;
+    for (const value of values) {
+        if (isObservation(value)) {
+            observedMin = Math.min(observedMin, value);
+            observedMax = Math.max(observedMax, value);
+        }
+    }
+    if (observedMin === Infinity)
+        return null;
+    const [min, max] = domain && Number.isFinite(domain[0]) && Number.isFinite(domain[1]) && domain[0] < domain[1]
+        ? domain
+        : [observedMin, observedMax];
+    const span = max - min;
+    const commands = [];
+    const areas = [];
+    const markers = [];
+    let lastPoint;
+    let segmentStart = 0;
+    let segmentStartX = "";
+    for (const [index, value] of values.entries()) {
+        if (!isObservation(value))
+            continue;
+        const clamped = Math.min(max, Math.max(min, value));
+        // Halve the operands before subtracting if the finite bounds span more than Number.MAX_VALUE.
+        const fraction = span === 0 ? 0.5 : Number.isFinite(span)
+            ? (clamped - min) / span
+            : (clamped / 2 - min / 2) / (max / 2 - min / 2);
+        const x = values.length === 1 ? plotWidth / 2 : plotInset + index * (plotWidth - 2 * plotInset) / (values.length - 1);
+        const y = plotHeight - plotInset - fraction * (plotHeight - 2 * plotInset);
+        const continuesLine = isObservation(values[index - 1]);
+        const plotX = x.toFixed(2);
+        if (!continuesLine) {
+            segmentStart = commands.length;
+            segmentStartX = plotX;
+        }
+        commands.push(`${continuesLine ? "L" : "M"}${plotX} ${y.toFixed(2)}`);
+        lastPoint = { x, y, index };
+        if (!isObservation(values[index + 1])) {
+            if (!continuesLine)
+                markers.push(lastPoint);
+            else if (area)
+                areas.push(`${commands.slice(segmentStart).join(" ")} L${plotX} ${plotHeight} H${segmentStartX} Z`);
+        }
+    }
+    if (lastPoint && markers.at(-1) !== lastPoint)
+        markers.push(lastPoint);
+    return { path: commands.join(" "), area: areas.join(" "), markers, lastPoint };
+}
+const markerPath = ({ x, y }) => `M${x.toFixed(2)} ${y.toFixed(2)}h0`;
+export const TrendPlot = /* @__PURE__ */ forwardRef(function TrendPlot({ values, domain, label, showLabel, size, tone, variant, className, ...props }, ref) {
+    const gradientId = useId();
+    const plot = getPlot(values, domain, variant === "area");
+    return (_jsxs("div", { ...props, ref: ref, className: ["flood-sparkline", className].filter(Boolean).join(" "), "data-size": size, "data-tone": tone, role: "img", "aria-label": label, children: [plot ? (_jsxs("svg", { className: "flood-sparkline__plot", viewBox: `0 0 ${plotWidth} ${plotHeight}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: [plot.area && _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { stopColor: "currentColor", stopOpacity: ".42" }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), _jsx("path", { className: "flood-sparkline__area", d: plot.area, fill: `url(#${gradientId})` })] }), _jsx("path", { className: "flood-sparkline__line", d: plot.path }), plot.lastPoint && _jsx("path", { className: "flood-sparkline__halo", d: markerPath(plot.lastPoint) }), plot.markers.map(point => (_jsx("path", { className: "flood-sparkline__point", d: markerPath(point), "data-latest": point === plot.lastPoint || undefined }, point.index)))] })) : (_jsx(Text, { className: "flood-sparkline__empty", size: "helper", tone: "subtle", "aria-hidden": "true", children: "\u2014" })), showLabel && _jsx(Text, { className: "flood-sparkline__label", size: "helper", tone: "subtle", "aria-hidden": "true", children: label })] }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.11"
+    "@flood-md/tokens": "0.2.12"
   },
   "publishConfig": {
     "access": "public"