@robr0/design-system 0.12.0 → 0.14.0

package/components/ImageCompare/ImageCompare.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "./ImageCompare.css";
+import "../../fonts/material-symbols.css";
+const clamp = (n) => Math.max(0, Math.min(100, n));
+const ImageCompare = React.forwardRef(
+  ({
+    beforeSrc,
+    afterSrc,
+    beforeAlt,
+    afterAlt,
+    beforeLabel = "Before",
+    afterLabel = "After",
+    showLabels = true,
+    position,
+    defaultPosition = 50,
+    onPositionChange,
+    aspectRatio = "16 / 10",
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const [internalPosition, setInternalPosition] = useState(clamp(defaultPosition));
+    const [dragging, setDragging] = useState(false);
+    const frameRef = useRef(null);
+    const baseClass = "ds-image-compare";
+    const currentPosition = clamp(position ?? internalPosition);
+    const classes = [baseClass, dragging ? `${baseClass}--dragging` : "", className].filter(Boolean).join(" ");
+    const setRef = (node) => {
+      frameRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const setPosition = (next) => {
+      const resolved = clamp(next);
+      if (position === void 0) setInternalPosition(resolved);
+      onPositionChange?.(resolved);
+    };
+    const positionFromPointer = (clientX) => {
+      const frame = frameRef.current;
+      if (!frame) return;
+      const rect = frame.getBoundingClientRect();
+      if (rect.width === 0) return;
+      setPosition((clientX - rect.left) / rect.width * 100);
+    };
+    const handlePointerDown = (event) => {
+      if (event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setDragging(true);
+      positionFromPointer(event.clientX);
+    };
+    const handlePointerMove = (event) => {
+      if (!dragging) return;
+      positionFromPointer(event.clientX);
+    };
+    const endDrag = () => setDragging(false);
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = currentPosition + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = currentPosition - 1;
+          break;
+        case "PageUp":
+          next = currentPosition + 10;
+          break;
+        case "PageDown":
+          next = currentPosition - 10;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = 100;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        setPosition(next);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        style: {
+          ...style,
+          aspectRatio,
+          ["--ds-image-compare-position"]: `${currentPosition}%`
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        children: [
+          /* @__PURE__ */ jsx("img", { className: `${baseClass}__after`, src: afterSrc, alt: afterAlt, draggable: false }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__before-clip`, children: /* @__PURE__ */ jsx("img", { className: `${baseClass}__before`, src: beforeSrc, alt: beforeAlt, draggable: false }) }),
+          showLabels && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--before`, "aria-hidden": "true", children: beforeLabel }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--after`, "aria-hidden": "true", children: afterLabel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__divider`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__handle`,
+              role: "slider",
+              tabIndex: 0,
+              "aria-label": `${beforeLabel} and ${afterLabel} comparison`,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(currentPosition),
+              "aria-valuetext": `${Math.round(currentPosition)}% ${beforeLabel.toLowerCase()}`,
+              "aria-orientation": "horizontal",
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "drag_indicator" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCompare.displayName = "ImageCompare";
+export {
+  ImageCompare
+};

package/components/LinkList/LinkList.d.ts

@@ -11,9 +11,11 @@ export interface LinkListItem {
     logoAlt?: string;
     /** Material Symbol name used when no logo is provided (e.g. "emoji_events") */
     icon?: string;
+    /** Open in a new tab. Defaults to true; set false for links inside the same site, which swaps the open_in_new indicator for arrow_forward. */
+    newTab?: boolean;
 }
 export interface LinkListProps {
-    /** Links to render, in display order — each opens in a new tab */
+    /** Links to render, in display order */
     items: LinkListItem[];
     /** Additional CSS classes */
     className?: string;

package/components/LinkList/LinkList.js

@@ -5,12 +5,13 @@ const LinkList = ({ items, className = "" }) => {
   const classes = ["ds-link-list", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: classes, children: items.map((item) => {
     const subs = item.sub ? Array.isArray(item.sub) ? item.sub : [item.sub] : [];
+    const newTab = item.newTab ?? true;
     return /* @__PURE__ */ jsxs(
       "a",
       {
         href: item.href,
-        target: "_blank",
-        rel: "noopener noreferrer",
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noopener noreferrer" : void 0,
         className: "ds-link-list__item",
         children: [
           /* @__PURE__ */ jsx("span", { className: "ds-link-list__icon-wrap", "aria-hidden": "true", children: item.logo ? /* @__PURE__ */ jsx(
@@ -26,7 +27,7 @@ const LinkList = ({ items, className = "" }) => {
           /* @__PURE__ */ jsxs("div", { className: "ds-link-list__content", children: [
             /* @__PURE__ */ jsxs("div", { className: "ds-link-list__title", children: [
               /* @__PURE__ */ jsx("span", { children: item.label }),
-              /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__open-icon", "aria-hidden": "true", children: "open_in_new" })
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__open-icon", "aria-hidden": "true", children: newTab ? "open_in_new" : "arrow_forward" })
             ] }),
             subs.map((s, i) => /* @__PURE__ */ jsx("span", { className: "ds-link-list__sub", children: s }, i))
           ] })

package/components/Meter/Meter.css

@@ -0,0 +1,89 @@
+/* ============================================
+   METER COMPONENT
+   Level indicator for a known quantity
+   ============================================ */
+
+.ds-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  width: 100%;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-meter__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap-md);
+}
+
+.ds-meter__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-meter__value {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  margin-left: auto;
+}
+
+/* ============================================
+   TRACK + FILL
+   ============================================ */
+
+.ds-meter__track {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+  overflow: hidden;
+}
+
+.ds-meter--compact .ds-meter__track {
+  height: 4px;
+}
+
+.ds-meter__fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   STATUS VARIANTS
+   The strong border-weight status colour, not
+   the tinted bg — the fill is a thin ribbon
+   and needs the full-strength hue to read.
+   ============================================ */
+
+.ds-meter--info .ds-meter__fill {
+  background-color: var(--color-status-info-border);
+}
+
+.ds-meter--positive .ds-meter__fill {
+  background-color: var(--color-status-positive-border);
+}
+
+.ds-meter--warning .ds-meter__fill {
+  background-color: var(--color-status-warning-border);
+}
+
+.ds-meter--error .ds-meter__fill {
+  background-color: var(--color-status-error-border);
+}
+
+.ds-meter--neutral .ds-meter__fill {
+  background-color: var(--color-status-neutral-border);
+}

package/components/Meter/Meter.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Meter itself — everything else falls through to the root node. */
+type MeterOwnProps = {
+    /** Current level */
+    value?: number;
+    /** Lower bound of the range */
+    min?: number;
+    /** Upper bound of the range */
+    max?: number;
+    /** Visible label naming what is measured, doubling as the accessible name */
+    label?: string;
+    /** Shows the value readout on the trailing edge of the label row */
+    showValue?: boolean;
+    /** Readout override — replaces the default percentage, spoken via aria-valuetext */
+    valueText?: string;
+    /** Status role colouring the fill */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Component size (bar height) */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MeterProps extends MeterOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MeterOwnProps> {
+}
+/**
+ * Level indicator for a known quantity — storage used, tokens spent,
+ * password strength, battery left. The counterpart to ProgressBar, which
+ * shows a task moving toward completion; a Meter shows how full something
+ * is right now, and its status colour says whether that is good news.
+ *
+ * Purely presentational (no 'use client'), so it renders from a Server
+ * Component. Forwards a ref to the root element and spreads unrecognised
+ * props onto it.
+ */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Meter/Meter.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Meter.css";
+const Meter = React.forwardRef(
+  ({
+    value = 0,
+    min = 0,
+    max = 100,
+    label,
+    showValue = false,
+    valueText,
+    variant = "info",
+    size = "default",
+    className = "",
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-meter";
+    const range = max - min;
+    const fraction = range > 0 ? Math.max(0, Math.min(1, (value - min) / range)) : 0;
+    const percent = Math.round(fraction * 100);
+    const readout = valueText ?? `${percent}%`;
+    const classes = [baseClass, `${baseClass}--${variant}`, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+        showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: readout })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__track`,
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": valueText,
+          "aria-label": ariaLabel ?? label ?? "Level",
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${fraction * 100}%` } })
+        }
+      )
+    ] });
+  }
+);
+Meter.displayName = "Meter";
+export {
+  Meter
+};

package/components/NotificationCenter/NotificationCenter.css

@@ -165,11 +165,16 @@
   padding: var(--padding-sm) var(--padding-sm-md);
 }
 
+/* The slot is a fixed column as wide as its largest medium — an sm Avatar
+   (32px, the --icon-size-lg rung) — with smaller media centred in it, so
+   every row's text starts on the same edge whether its medium is an avatar
+   or a bare icon. */
 .ds-notification-item__media {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
+  width: var(--icon-size-lg);
   color: var(--color-icon-primary);
 }
 
@@ -220,11 +225,14 @@
 }
 
 /* Unread dot — informational, so it takes the info status colour rather
-   than the action teal */
+   than the action teal, at the full-strength border weight for the same
+   reason Meter's fill does: a tint vanishes in a small mark. 8px because
+   a 4px dot is sub-perceptual at reading distance — the dot is the row's
+   one unmistakable unread signal, so it has to register at a glance. */
 .ds-notification-item__dot {
   flex: none;
-  width: var(--gap-xs);
-  height: var(--gap-xs);
+  width: var(--gap-sm);
+  height: var(--gap-sm);
   border-radius: var(--radius-full);
   background-color: var(--color-status-info-border);
 }

package/components/Rating/Rating.css

@@ -0,0 +1,74 @@
+/* ============================================
+   RATING COMPONENT
+   Star-scale rating control
+   ============================================ */
+
+.ds-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   STEPS
+   ============================================ */
+
+.ds-rating__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  border-radius: var(--radius-xs);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-rating__icon {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-rating--compact .ds-rating__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-rating__step--filled {
+  color: var(--color-core-accent-gold);
+}
+
+.ds-rating__step--filled .ds-rating__icon {
+  --material-symbols-fill: 1;
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.ds-rating__step:hover {
+  transform: scale(1.1);
+}
+
+.ds-rating__step:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-rating--read-only .ds-rating__step {
+  cursor: default;
+}
+
+.ds-rating--read-only .ds-rating__step:hover {
+  transform: none;
+}
+
+.ds-rating--disabled .ds-rating__step {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-rating--disabled .ds-rating__step:hover {
+  transform: none;
+}

package/components/Rating/Rating.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by Rating itself — everything else falls through to the root node. */
+type RatingOwnProps = {
+    /** Current rating (controlled). 0 means no rating. */
+    value?: number;
+    /** Initial rating for uncontrolled use. 0 means no rating. */
+    defaultValue?: number;
+    /** Number of steps on the scale */
+    max?: number;
+    /**
+     * Convenience callback receiving the new rating directly.
+     * Fires on every selection, including a clear back to 0 via `allowClear`.
+     */
+    onValueChange?: (value: number) => void;
+    /** Display-only mode — renders the current rating with no interaction */
+    readOnly?: boolean;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Selecting the already-selected step clears the rating back to 0 */
+    allowClear?: boolean;
+    /** Material Symbol drawn for each step */
+    icon?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Accessible name for the group, and the base of each step's label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface RatingProps extends RatingOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RatingOwnProps> {
+}
+/**
+ * Star-scale rating control. Behaves as a radio group: each step is a
+ * `role="radio"` button, arrow keys move the selection, and the current
+ * step holds the roving tab stop. `readOnly` renders the same row as a
+ * static image with a spoken "N out of M" label.
+ *
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Rating/Rating.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import "./Rating.css";
+import "../../fonts/material-symbols.css";
+const Rating = React.forwardRef(
+  ({
+    value,
+    defaultValue = 0,
+    max = 5,
+    onValueChange,
+    readOnly = false,
+    disabled = false,
+    allowClear = false,
+    icon = "star",
+    size = "default",
+    label = "Rating",
+    className = "",
+    ...rest
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(0);
+    const baseClass = "ds-rating";
+    const currentValue = value ?? internalValue;
+    const displayValue = !readOnly && !disabled && hoverValue > 0 ? hoverValue : currentValue;
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      readOnly ? `${baseClass}--read-only` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const setValue = (next) => {
+      const resolved = allowClear && next === currentValue ? 0 : next;
+      if (value === void 0) setInternalValue(resolved);
+      onValueChange?.(resolved);
+    };
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(max, currentValue + 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(1, currentValue - 1);
+          break;
+        case "Home":
+          next = 1;
+          break;
+        case "End":
+          next = max;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        if (value === void 0) setInternalValue(next);
+        onValueChange?.(next);
+        const steps2 = event.currentTarget.querySelectorAll('[role="radio"]');
+        steps2[next - 1]?.focus();
+      }
+    };
+    const steps = Array.from({ length: max }, (_, i) => i + 1);
+    if (readOnly) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          role: "img",
+          "aria-label": rest["aria-label"] ?? `${label}: ${currentValue} out of ${max}`,
+          children: steps.map((step) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, children: icon })
+            },
+            step
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "radiogroup",
+        "aria-label": rest["aria-label"] ?? label,
+        "aria-disabled": disabled || void 0,
+        onKeyDown: disabled ? void 0 : handleKeyDown,
+        onMouseLeave: () => setHoverValue(0),
+        children: steps.map((step) => {
+          const checked = step === currentValue;
+          const tabStop = checked || currentValue === 0 && step === 1;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": label ? `${label}: ${step} out of ${max}` : `${step} out of ${max}`,
+              tabIndex: tabStop ? 0 : -1,
+              disabled,
+              className: `${baseClass}__step ${step <= displayValue ? `${baseClass}__step--filled` : ""}`,
+              onClick: () => setValue(step),
+              onMouseEnter: () => setHoverValue(step),
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon })
+            },
+            step
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+export {
+  Rating
+};

package/components/Sparkline/Sparkline.d.ts

@@ -41,9 +41,11 @@ export interface SparklineProps extends SparklineOwnProps, Omit<React.ComponentP
  * Sparkline — an inline trend line for stats and table cells, drawn without
  * axes or chrome. Pure SVG computed from props: no charting library, no hooks,
  * no dependencies, so it renders from a Server Component and costs nothing in
- * a dense table. Degenerate data never breaks the path: an all-equal series
- * renders a horizontal midline, and fewer than two points render just the
- * end dot, or nothing.
+ * a dense table. The line bends through a monotone curve, the same family as
+ * the recharts charts' `monotone`, so it reads as a miniature LineChart
+ * rather than a jagged polyline. Degenerate data never breaks the path: an
+ * all-equal series renders a horizontal midline, and fewer than two points
+ * render just the end dot, or nothing.
  */
 export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
 export {};

package/components/Sparkline/Sparkline.js

@@ -2,6 +2,35 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Sparkline.css";
 const round = (n) => Math.round(n * 100) / 100;
+const buildMonotonePath = (pts) => {
+  const n = pts.length;
+  const dx = [];
+  const slope = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = pts[i + 1].x - pts[i].x;
+    slope[i] = (pts[i + 1].y - pts[i].y) / dx[i];
+  }
+  const tangent = [slope[0]];
+  for (let i = 1; i < n - 1; i++) {
+    if (slope[i - 1] * slope[i] <= 0) {
+      tangent[i] = 0;
+    } else {
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = dx[i] + 2 * dx[i - 1];
+      tangent[i] = (w1 + w2) / (w1 / slope[i - 1] + w2 / slope[i]);
+    }
+  }
+  tangent[n - 1] = slope[n - 2];
+  let d = `M ${round(pts[0].x)} ${round(pts[0].y)}`;
+  for (let i = 0; i < n - 1; i++) {
+    const c1x = pts[i].x + dx[i] / 3;
+    const c1y = pts[i].y + tangent[i] * dx[i] / 3;
+    const c2x = pts[i + 1].x - dx[i] / 3;
+    const c2y = pts[i + 1].y - tangent[i + 1] * dx[i] / 3;
+    d += ` C ${round(c1x)} ${round(c1y)} ${round(c2x)} ${round(c2y)} ${round(pts[i + 1].x)} ${round(pts[i + 1].y)}`;
+  }
+  return d;
+};
 const Sparkline = React.forwardRef(
   ({
     data,
@@ -40,7 +69,7 @@ const Sparkline = React.forwardRef(
     }));
     const lastPoint = points.length > 0 ? points[points.length - 1] : void 0;
     const hasLine = points.length >= 2;
-    const linePath = hasLine ? `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}` : void 0;
+    const linePath = hasLine ? buildMonotonePath(points) : void 0;
     const baseline = round(height - pad);
     const areaPath = hasLine && variant === "area" ? `${linePath} L ${points[points.length - 1].x} ${baseline} L ${points[0].x} ${baseline} Z` : void 0;
     return /* @__PURE__ */ jsxs(