@flood-md/react 0.2.10 → 0.2.12

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/dist/toolbar.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } f
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const selector = 'button:not([role]),button[role="button"],a[href]:not([role]),a[href][role="link"]';
 const independent = '[role="menu"],[role="tablist"],[role="radiogroup"],[role="listbox"],[role="combobox"],.flood-toggle-group';
-export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
+export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, shape = "rounded", variant = "contained", className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
     const root = useRef(null), current = useRef(null), within = useRef(false);
     const refresh = useRef(() => []);
     useImperativeHandle(ref, () => root.current, []);
@@ -73,7 +73,7 @@ export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({
         controls[next].scrollIntoView({ block: "nearest", inline: "nearest" });
         refresh.current();
     };
-    return _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, className: ["flood-toolbar", className].filter(Boolean).join(" "), onFocus: event => { onFocus?.(event); if (event.defaultPrevented)
+    return _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, "data-shape": shape, "data-variant": variant, className: ["flood-toolbar", className].filter(Boolean).join(" "), onFocus: event => { onFocus?.(event); if (event.defaultPrevented)
             return; within.current = true; refresh.current(); }, onKeyDownCapture: event => { onKeyDownCapture?.(event); if (!event.defaultPrevented && orientation === "vertical" && event.target.getAttribute("aria-haspopup") === "menu" && ["ArrowUp", "ArrowDown"].includes(event.key))
             move(event); }, onKeyDown: event => { onKeyDown?.(event); if (!event.defaultPrevented)
             move(event); } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.10",
+  "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.10"
+    "@flood-md/tokens": "0.2.12"
   },
   "publishConfig": {
     "access": "public"