@oprt/react 0.0.0-stage → 0.1.0

package/dist/Sidebar/Sidebar.manifest.js

@@ -0,0 +1,72 @@
+// src/Sidebar/Sidebar.manifest.ts
+var SidebarManifest = {
+  Sidebar: {
+    description: "Vertical navigation rail, never wider than its container. Use with SidebarLogo, SidebarSection, and SidebarFooter. For the frame of a whole app (the workspace's name, the data connection, the time), pass the Sidebar to AppShell as its navigation instead of laying the frame out by hand. Standing alone it is a navigation landmark named Sidebar; inside AppShell's navigation it is a plain block, and the shell's landmark names the navigation. In a host of bounded height the sections scroll in place between the logo and the footer, which stay put.",
+    props: {},
+    slots: {
+      children: { type: "SidebarLogo | SidebarSection | SidebarFooter", required: true }
+    },
+    composable_with: ["SidebarLogo", "SidebarSection", "SidebarFooter", "AppShell"],
+    never_inside: ["Sidebar", "Card"],
+    example: '<Sidebar>\n  <SidebarLogo>OPERATOR</SidebarLogo>\n  <SidebarSection label="NAVIGATION">\n    <SidebarItem href="/overview" active>OVERVIEW</SidebarItem>\n    <SidebarItem href="/metrics">METRICS</SidebarItem>\n  </SidebarSection>\n  <SidebarFooter>BUILD 1.0.0</SidebarFooter>\n</Sidebar>'
+  },
+  SidebarLogo: {
+    description: "Sidebar brand/header slot \u2014 uppercase wordmark row at the top of the rail.",
+    props: {},
+    slots: {
+      children: { type: "text", required: true }
+    },
+    composable_with: ["Sidebar"],
+    never_inside: ["SidebarSection", "SidebarFooter"],
+    example: "<SidebarLogo>OPERATOR</SidebarLogo>"
+  },
+  SidebarSection: {
+    description: "Grouped block of SidebarItems with an optional uppercase section label; a labeled section is a group named by its label.",
+    props: {
+      label: { type: "string" }
+    },
+    slots: {
+      children: { type: "SidebarItem", required: true }
+    },
+    composable_with: ["Sidebar"],
+    never_inside: ["SidebarLogo", "SidebarFooter"],
+    example: '<SidebarSection label="NAVIGATION">\n  <SidebarItem href="/overview">OVERVIEW</SidebarItem>\n</SidebarSection>'
+  },
+  SidebarItem: {
+    description: "Uppercase navigation entry. Renders as an anchor when href is set, otherwise a button; marks the current page when active. Wrap case-sensitive names or IDs in a child with normal-case tracking-normal.",
+    props: {
+      active: { type: "boolean", default: false },
+      href: { type: "string" },
+      asChild: { type: "boolean", default: false }
+    },
+    slots: {
+      icon: { type: "ReactNode", required: false },
+      children: { type: "text", required: true }
+    },
+    composable_with: ["SidebarSection"],
+    never_inside: ["SidebarLogo", "SidebarFooter"],
+    example: '<SidebarItem href="/overview" active>OVERVIEW</SidebarItem>'
+  },
+  SidebarFooter: {
+    description: "Bottom-pinned sidebar slot \u2014 version string, account, or status controls.",
+    props: {},
+    slots: {
+      children: { type: "any", required: false }
+    },
+    composable_with: ["Sidebar"],
+    never_inside: ["SidebarLogo", "SidebarSection"],
+    example: "<SidebarFooter>BUILD 1.0.0</SidebarFooter>"
+  }
+};
+var SidebarCompositionRules = {
+  Sidebar: {
+    allowed_children: ["SidebarLogo", "SidebarSection", "SidebarFooter"],
+    children: {
+      SidebarSection: { allowed_children: ["SidebarItem"] }
+    }
+  }
+};
+export {
+  SidebarCompositionRules,
+  SidebarManifest
+};

package/dist/Sidebar/index.js

@@ -0,0 +1,18 @@
+// src/Sidebar/index.ts
+import {
+  Sidebar,
+  SidebarLogo,
+  SidebarSection,
+  SidebarItem,
+  SidebarFooter
+} from "./Sidebar.js";
+import { SidebarManifest, SidebarCompositionRules } from "./Sidebar.manifest.js";
+export {
+  Sidebar,
+  SidebarCompositionRules,
+  SidebarFooter,
+  SidebarItem,
+  SidebarLogo,
+  SidebarManifest,
+  SidebarSection
+};

package/dist/Skeleton/Skeleton.js

@@ -0,0 +1,76 @@
+"use client";
+
+// src/Skeleton/Skeleton.tsx
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { SkeletonManifest } from "./Skeleton.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx } from "react/jsx-runtime";
+var barStyles = cva(
+  "bg-oprt-surface-2 animate-pulse motion-reduce:animate-none forced-colors:bg-[color:GrayText] forced-colors:[forced-color-adjust:none]",
+  {
+    variants: {
+      variant: {
+        block: "w-full max-w-full h-oprt-md",
+        text: "h-2u w-full"
+      }
+    },
+    defaultVariants: { variant: "block" }
+  }
+);
+var Skeleton = forwardRef((allProps, ref) => {
+  const { className, variant = "block", width, height, lines = 3, ...props } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Skeleton", SkeletonManifest.Skeleton.props, { ...allProps });
+  }
+  if (variant === "text") {
+    const count = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 3;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-busy": "true",
+        "aria-label": "Loading",
+        className: clsx("flex flex-col gap-1u", className),
+        ...props,
+        children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: clsx(barStyles({ variant: "text" }), i === count - 1 && "w-2/3")
+          },
+          i
+        ))
+      }
+    );
+  }
+  const style = {};
+  if (width !== void 0) style.width = width;
+  if (height !== void 0) style.height = height;
+  const hasStyle = width !== void 0 || height !== void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      className: clsx("flex flex-col", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: barStyles({ variant: "block" }),
+          ...hasStyle ? { style } : {}
+        }
+      )
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton
+};

package/dist/Skeleton/Skeleton.manifest.js

@@ -0,0 +1,30 @@
+// src/Skeleton/Skeleton.manifest.ts
+var SkeletonManifest = {
+  Skeleton: {
+    description: "Loading placeholder. block renders one pulsing bar; text stacks `lines` bars with a shortened last line. Bars fill their container and never widen it, whatever width the caller asks for, and are drawn in a system color in forced-colors mode.",
+    props: {
+      variant: { type: "enum", values: ["block", "text"], default: "block" },
+      width: {
+        type: "union",
+        types: ["string", "number"],
+        description: "Caller dimension applied via style on the block bar (string or number). It is clamped to the container: it can ask for less, never more."
+      },
+      height: {
+        type: "union",
+        types: ["string", "number"],
+        description: "Caller dimension applied via style on the block bar (string or number)."
+      },
+      lines: {
+        type: "number",
+        default: 3,
+        description: "Number of stacked bars in the text variant, rounded down with a minimum of 1. Non-finite values fall back to 3."
+      }
+    },
+    composable_with: ["Card", "DataTable"],
+    never_inside: ["Button", "Badge"],
+    example: '<Skeleton variant="text" lines={3} />'
+  }
+};
+export {
+  SkeletonManifest
+};

package/dist/Skeleton/index.js

@@ -0,0 +1,7 @@
+// src/Skeleton/index.ts
+import { Skeleton } from "./Skeleton.js";
+import { SkeletonManifest } from "./Skeleton.manifest.js";
+export {
+  Skeleton,
+  SkeletonManifest
+};

package/dist/Slider/Slider.js

@@ -0,0 +1,246 @@
+"use client";
+
+// src/Slider/Slider.tsx
+import {
+  Slider as AriaSlider,
+  SliderTrack,
+  SliderThumb,
+  SliderFill,
+  SliderStateContext
+} from "react-aria-components";
+import { mergeProps } from "react-aria";
+import { cva } from "class-variance-authority";
+import { Fragment, forwardRef, useContext, useRef } from "react";
+import clsx from "clsx";
+import { SliderManifest } from "./Slider.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly } from "../_internal/aria.js";
+import { joinIds, useFieldWiring, usePartIds } from "../_internal/fieldIds.js";
+import { keyForIds } from "../_internal/hydration.js";
+import { NumberText } from "../_internal/numberText.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import {
+  FORCED_SLIDER_FILL,
+  FORCED_SLIDER_THUMB,
+  FORCED_SLIDER_TRACK
+} from "../_internal/controlStyles.js";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva(
+  "relative flex items-center gap-x-2u gap-y-1u min-h-3u select-none touch-none w-full data-[orientation=horizontal]:flex-wrap data-[orientation=vertical]:flex-col data-[orientation=vertical]:flex-grow data-[orientation=vertical]:w-auto data-[orientation=vertical]:min-w-3u data-[disabled]:opacity-50",
+  {
+    variants: {
+      size: { sm: "", md: "", lg: "" }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var trackStyles = cva(
+  "relative flex-grow bg-oprt-border-control data-[orientation=horizontal]:mx-1.5u data-[orientation=horizontal]:min-w-16u data-[orientation=vertical]:my-1.5u",
+  {
+    variants: {
+      size: {
+        sm: "data-[orientation=horizontal]:h-oprt-track-sm data-[orientation=vertical]:w-oprt-track-sm",
+        md: "data-[orientation=horizontal]:h-oprt-track-md data-[orientation=vertical]:w-oprt-track-md",
+        lg: "data-[orientation=horizontal]:h-oprt-track-lg data-[orientation=vertical]:w-oprt-track-lg"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var rangeStyles = "absolute bg-oprt-accent data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full";
+var thumbStyles = cva(
+  "block bg-oprt-surface-1 border border-oprt-accent group-data-[invalid]/slider:border-oprt-error group-data-[focus-visible]/slider:border-oprt-border-focus group-data-[focus-visible]/slider:shadow-oprt-focus cursor-pointer group-data-[disabled]/slider:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5u w-1.5u",
+        md: "h-2u w-2u",
+        lg: "h-2.5u w-2.5u"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var valueStyles = "max-w-full font-mono text-oprt-base text-oprt-text tabular-nums";
+function isRange(value) {
+  return Array.isArray(value);
+}
+function valueToArray(v, min, max) {
+  if (v === void 0) return void 0;
+  const values = Array.isArray(v) ? [...v] : [v];
+  return values.map((value) => Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : min).sort((a, b) => a - b);
+}
+function ValueThumb({
+  formatValue,
+  nameIds,
+  index = 0,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const state = useContext(SliderStateContext);
+  useIsomorphicLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const valueText = formatValue ? formatValue(state.values[index] ?? state.getThumbMinValue(index)) : state.getThumbValueLabel(index);
+    input.setAttribute("aria-valuetext", valueText);
+    if (nameIds) input.setAttribute("aria-labelledby", nameIds);
+    else input.removeAttribute("aria-labelledby");
+  });
+  return /* @__PURE__ */ jsx(SliderThumb, { ...props, index, inputRef });
+}
+var ENDS = ["lower", "upper"];
+var Slider = forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled,
+    orientation = "horizontal",
+    size = "md",
+    showValue,
+    formatValue,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const value = rest.value;
+  const defaultValue = rest.defaultValue;
+  const onValueChange = rest.onValueChange;
+  const domProps = { ...rest };
+  delete domProps["value"];
+  delete domProps["defaultValue"];
+  delete domProps["onValueChange"];
+  if (disabled) domProps["aria-disabled"] = true;
+  const isRangeMode = isRange(value) || isRange(defaultValue);
+  const safeMin = Number.isFinite(min) ? min : 0;
+  const safeMax = Number.isFinite(max) && max > safeMin ? max : safeMin + 100;
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const {
+    id: finalId,
+    labelledBy,
+    describedBy,
+    invalid
+  } = useFieldWiring(
+    {
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid
+    },
+    { label: "labelledby" }
+  );
+  const wrapper = useRef(null);
+  const ends = usePartIds(ENDS, {
+    readRendered: () => wrapper.current?.getAttribute("data-oprt-ids")
+  });
+  const handleChange = (next) => {
+    if (!onValueChange) return;
+    const arr = Array.isArray(next) ? next : [next];
+    if (isRangeMode) {
+      const tuple = [arr[0] ?? 0, arr[1] ?? 0];
+      onValueChange(tuple);
+    } else {
+      onValueChange(arr[0] ?? 0);
+    }
+  };
+  const ariaValue = valueToArray(value, safeMin, safeMax);
+  const ariaDefaultValue = valueToArray(defaultValue, safeMin, safeMax) ?? (isRangeMode ? [safeMin, safeMax] : [safeMin]);
+  const thumbValues = ariaValue ?? ariaDefaultValue;
+  const thumbCount = thumbValues.length;
+  const endOf = (i) => thumbCount === 1 ? void 0 : ENDS[i === 0 ? 0 : 1];
+  const thumbLabel = (i) => {
+    if (labelledBy || !ariaLabel) return void 0;
+    const end = endOf(i);
+    return end ? `${ariaLabel} (${end})` : ariaLabel;
+  };
+  const thumbNameIds = (i) => {
+    const end = endOf(i);
+    return labelledBy ? joinIds(labelledBy, end && ends[end]) : void 0;
+  };
+  const rootProps = {
+    ref,
+    className: clsx(rootStyles({ size }), className),
+    minValue: safeMin,
+    maxValue: safeMax,
+    step: safeStep,
+    orientation,
+    onChange: handleChange,
+    // The attributes RAC does not pass on itself (title, handlers) reach the root through its
+    // render function; RAC's own props win where both set one.
+    render: (rendered) => /* @__PURE__ */ jsx("div", { ...mergeProps(domProps, rendered) })
+  };
+  if (style !== void 0) rootProps["style"] = style;
+  if (disabled !== void 0) rootProps["isDisabled"] = disabled;
+  if (finalId !== void 0) rootProps["id"] = finalId;
+  if (describedBy !== void 0) rootProps["aria-describedby"] = describedBy;
+  if (ariaLabel !== void 0) rootProps["aria-label"] = ariaLabel;
+  if (labelledBy !== void 0) rootProps["aria-labelledby"] = labelledBy;
+  if (invalid) rootProps["data-invalid"] = true;
+  if (ariaValue !== void 0) {
+    rootProps["value"] = ariaValue;
+  } else {
+    rootProps["defaultValue"] = ariaDefaultValue;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Slider", SliderManifest.Slider.props, { orientation, size });
+  }
+  return (
+    // RAC's Slider root is a <div> (Radix's was a <span>), so the wrapper is a
+    // <div> too — a <div> inside a <span> would be invalid nesting.
+    // A vertical slider takes the height its container gives it, and at least 128px (two 8u
+    // blocks), so its track has a length to fill; it sits at the start of a wide container.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapper,
+        "data-oprt-ids": ends.base,
+        className: orientation === "vertical" ? "flex h-full min-h-16u flex-col items-start" : "inline-flex w-full items-center",
+        children: [
+          labelledBy && thumbCount > 1 && /* @__PURE__ */ jsxs(Fragment2, { children: [
+            /* @__PURE__ */ jsx("span", { id: ends.lower, hidden: true, children: "(lower)" }),
+            /* @__PURE__ */ jsx("span", { id: ends.upper, hidden: true, children: "(upper)" })
+          ] }),
+          /* @__PURE__ */ jsx(AriaSlider, { ...rootProps, children: ({ state }) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+            /* @__PURE__ */ jsxs(SliderTrack, { className: clsx(trackStyles({ size }), FORCED_SLIDER_TRACK), children: [
+              /* @__PURE__ */ jsx(SliderFill, { className: clsx(rangeStyles, FORCED_SLIDER_FILL) }),
+              thumbValues.map((_, i) => /* @__PURE__ */ jsx(
+                ValueThumb,
+                {
+                  index: i,
+                  className: "group/slider flex items-center justify-center h-3u w-3u cursor-pointer data-[disabled]:cursor-not-allowed",
+                  isInvalid: invalid,
+                  "data-invalid": invalid || void 0,
+                  ...definedOnly({
+                    "aria-label": thumbLabel(i),
+                    // Its label for the server markup, before the thumb's effect names it.
+                    "aria-labelledby": labelledBy,
+                    nameIds: thumbNameIds(i),
+                    name,
+                    formatValue
+                  }),
+                  children: /* @__PURE__ */ jsx("span", { className: clsx(thumbStyles({ size }), FORCED_SLIDER_THUMB) })
+                },
+                i
+              ))
+            ] }),
+            showValue && /* @__PURE__ */ jsx("span", { className: valueStyles, "aria-hidden": "true", children: state.values.map((current, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              index > 0 && " \u2013 ",
+              /* @__PURE__ */ jsx(NumberText, { value: formatValue ? formatValue(current) : current })
+            ] }, index)) })
+          ] }) }, keyForIds(finalId, labelledBy))
+        ]
+      }
+    )
+  );
+});
+Slider.displayName = "Slider";
+export {
+  Slider
+};

package/dist/Slider/Slider.manifest.js

@@ -0,0 +1,56 @@
+// src/Slider/Slider.manifest.ts
+var SliderManifest = {
+  Slider: {
+    description: "Single-thumb or range slider. Pass value: number for single, [number, number] for range. Track in the control outline color; active range in accent; square thumbs that stay inside the slider at both ends. Inside a Field it is named by the label (range thumbs add lower and upper) and a Field error marks it invalid, drawing its thumbs in the error color.",
+    props: {
+      value: {
+        type: "union",
+        types: ["number", "array"],
+        description: "Single thumb when number; pass [number, number] tuple for range mode."
+      },
+      defaultValue: {
+        type: "union",
+        types: ["number", "array"],
+        description: "Pass [number, number] tuple for range mode."
+      },
+      onValueChange: {
+        type: "function",
+        description: "(value: number | [number, number]) => void. Called as the value changes; a tuple in range mode."
+      },
+      min: {
+        type: "number",
+        default: 0,
+        description: "Finite lower bound. Non-finite values fall back to 0."
+      },
+      max: {
+        type: "number",
+        default: 100,
+        description: "Finite upper bound greater than min. Invalid values fall back to min + 100."
+      },
+      step: {
+        type: "number",
+        default: 1,
+        description: "Finite positive increment. Invalid values fall back to 1."
+      },
+      disabled: { type: "boolean", default: false },
+      orientation: { type: "enum", values: ["horizontal", "vertical"], default: "horizontal" },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      showValue: {
+        type: "boolean",
+        default: false,
+        description: "Render the current value(s) in mono next to the track; the readout moves under the track when the row cannot hold both."
+      },
+      formatValue: {
+        type: "function",
+        description: "(value: number) => string. Formats displayed values and each thumb's aria-valuetext. Applies separately to both values in range mode, including when showValue is false."
+      },
+      name: { type: "string" }
+    },
+    composable_with: ["Field"],
+    never_inside: ["Button", "Badge"],
+    example: '<Slider aria-label="Acceptable temperature" defaultValue={[18, 24]} min={-20} max={50} showValue />'
+  }
+};
+export {
+  SliderManifest
+};

package/dist/Slider/index.js

@@ -0,0 +1,7 @@
+// src/Slider/index.ts
+import { Slider } from "./Slider.js";
+import { SliderManifest } from "./Slider.manifest.js";
+export {
+  Slider,
+  SliderManifest
+};

package/dist/Sparkline/Sparkline.js

@@ -0,0 +1,135 @@
+"use client";
+
+// src/Sparkline/Sparkline.tsx
+import { forwardRef, useId } from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { devValidate } from "../_internal/devValidate.js";
+import {
+  extent,
+  isFinitePoint,
+  linePath,
+  scale,
+  segments,
+  seriesColorClass
+} from "../Chart/geometry.js";
+import { SparklineManifest } from "./Sparkline.manifest.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sparklineStyles = cva("inline-block w-16u max-w-full shrink-0 align-middle font-sans", {
+  variants: { variant: { line: "", area: "" } },
+  defaultVariants: { variant: "line" }
+});
+var Sparkline = forwardRef((allProps, ref) => {
+  const { label, data, unit, seriesId, color, variant = "line", className, ...props } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Sparkline", SparklineManifest.Sparkline.props, { ...allProps });
+  }
+  const id = useId();
+  const points = data.map((y2, x2) => ({ x: x2, y: y2 }));
+  const finite = points.filter(isFinitePoint);
+  const x = scale(extent(points.map((point) => point.x)), 4, 124);
+  const y = scale(
+    extent(
+      finite.map((point) => point.y),
+      variant === "area"
+    ),
+    28,
+    4
+  );
+  const baseline = y(0);
+  const last = finite[finite.length - 1];
+  const values = data.map(
+    (value) => value !== null && Number.isFinite(value) ? `${value}${unit ? ` ${unit}` : ""}` : "Missing"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      "data-oprt-sparkline": variant,
+      className: clsx(sparklineStyles({ variant }), seriesColorClass(seriesId, color), className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            role: "img",
+            "aria-label": label,
+            "aria-describedby": `${id}-values`,
+            viewBox: "0 0 128 32",
+            className: "block h-auto w-full overflow-visible",
+            children: [
+              variant === "area" && finite.length > 0 && /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: 4,
+                  x2: 124,
+                  y1: baseline,
+                  y2: baseline,
+                  "aria-hidden": "true",
+                  className: "text-oprt-chart-grid",
+                  stroke: "currentColor",
+                  strokeWidth: "var(--oprt-chart-guide-width)",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              segments(points).map((segment, index) => {
+                const path = linePath(segment, x, y);
+                return /* @__PURE__ */ jsxs("g", { "data-chart-segment": "", "aria-hidden": "true", children: [
+                  variant === "area" && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: `${path} L${x(segment[segment.length - 1].x)},${baseline} L${x(segment[0].x)},${baseline} Z`,
+                      fill: "currentColor",
+                      fillOpacity: "var(--oprt-chart-area-opacity)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: path,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "var(--oprt-chart-stroke-width)",
+                      strokeLinecap: "butt",
+                      strokeLinejoin: "miter",
+                      strokeMiterlimit: 2,
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ),
+                  segment.length === 1 && segment[0] !== last && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: x(segment[0].x) - 1.5,
+                      y: y(segment[0].y) - 1.5,
+                      width: 3,
+                      height: 3,
+                      fill: "currentColor"
+                    }
+                  )
+                ] }, index);
+              }),
+              last && /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  "data-sparkline-endpoint": "",
+                  "aria-hidden": "true",
+                  x: x(last.x) - 2,
+                  y: y(last.y) - 2,
+                  width: 4,
+                  height: 4,
+                  fill: "currentColor"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { id: `${id}-values`, className: "sr-only", children: values.length ? values.join(", ") : "No data" }),
+        finite.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-oprt-base text-oprt-text-dim", children: "No finite data" })
+      ]
+    }
+  );
+});
+Sparkline.displayName = "Sparkline";
+export {
+  Sparkline
+};