@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/stepper/stepper.js

@@ -0,0 +1,215 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { forwardRef, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/stepper/stepper.tsx
+const STATUS_TEXT = {
+	complete: "Completed",
+	current: "",
+	upcoming: "Not started",
+	error: "Error"
+};
+/** Stagger between connectors when progress jumps across several steps (ms). */
+const LINE_STAGGER_MS = 80;
+/** Text that rises in when it changes. Its frame follows the new height, so a message that wraps eases the steps below down instead of pushing them. */
+function StepText({ text, tone, className }) {
+	const frame = useRef(null);
+	const content = useRef(null);
+	const key = text ? `${tone}:${text}` : "";
+	useHeightFollow(frame, content, key);
+	return /* @__PURE__ */ jsx("span", {
+		ref: frame,
+		className: "height-follow block",
+		children: /* @__PURE__ */ jsx("span", {
+			ref: content,
+			className: "relative block",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: key,
+				className: cn("block", className),
+				children: text
+			})
+		})
+	});
+}
+/** The number, check and alert share one spot: the outgoing glyph shrinks away while the next one pops in and draws its stroke. */
+function Glyph({ kind, number, delay }) {
+	return /* @__PURE__ */ jsx(SwapText, {
+		swapKey: kind,
+		motion: "glyph",
+		delay,
+		className: "grid place-items-center",
+		children: kind === "number" ? number : /* @__PURE__ */ jsx("svg", {
+			className: "stepper-icon",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: kind === "check" ? /* @__PURE__ */ jsx("path", {
+				className: "stepper-draw",
+				pathLength: 1,
+				d: "M5.5 12.5l4.25 4.25L18.5 8"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
+				className: "stepper-draw",
+				pathLength: 1,
+				d: "M12 6.75v6.5"
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "stepper-dot",
+				cx: 12,
+				cy: 17.4,
+				r: 1.4,
+				fill: "currentColor",
+				stroke: "none"
+			})] })
+		})
+	});
+}
+const Stepper = forwardRef(function Stepper({ steps, current, orientation = "horizontal", onStepSelect, details = "all", compact = false, label = "Progress", completeLabel = "All steps complete", className }, ref) {
+	const count = steps.length;
+	const active = Math.min(Math.max(Math.round(current), 0), count);
+	const [travel, setTravel] = useState({
+		to: active,
+		from: active
+	});
+	if (travel.to !== active) setTravel({
+		to: active,
+		from: travel.to
+	});
+	const from = travel.from;
+	const still = typeof window !== "undefined" && prefersReducedMotion();
+	const delayAt = (index) => {
+		if (still) return 0;
+		if (active > from) return index >= from && index < active ? (index - from) * LINE_STAGGER_MS : 0;
+		return index >= active && index < from ? (from - 1 - index) * LINE_STAGGER_MS : 0;
+	};
+	const ringDelay = still ? 0 : Math.max(0, Math.abs(active - from) - 1) * LINE_STAGGER_MS + 120;
+	const interactive = Boolean(onStepSelect);
+	const vertical = orientation === "vertical";
+	const now = active >= count ? void 0 : steps[active];
+	/** Arrow keys move between the steps you can reach; Home and End jump to the first and the current one. */
+	function onKeyDown(event) {
+		const rtl = !vertical && getComputedStyle(event.currentTarget).direction === "rtl";
+		const back = ["ArrowUp", rtl ? "ArrowRight" : "ArrowLeft"];
+		const ahead = ["ArrowDown", rtl ? "ArrowLeft" : "ArrowRight"];
+		if (![
+			...back,
+			...ahead,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const targets = Array.from(event.currentTarget.querySelectorAll("button[data-reachable]"));
+		const at = targets.indexOf(event.target);
+		if (at < 0) return;
+		event.preventDefault();
+		targets[event.key === "Home" ? 0 : event.key === "End" ? targets.length - 1 : back.includes(event.key) ? Math.max(0, at - 1) : Math.min(targets.length - 1, at + 1)]?.focus();
+	}
+	return /* @__PURE__ */ jsxs(interactive ? "nav" : "div", {
+		ref,
+		"aria-label": label,
+		role: interactive ? void 0 : "group",
+		"data-slot": "stepper",
+		"data-orientation": orientation,
+		"data-compact": compact ? "" : void 0,
+		style: { "--stepper-ring-delay": `${ringDelay}ms` },
+		className: cn("stepper box-border font-sans", className),
+		children: [
+			/* @__PURE__ */ jsx("ol", {
+				className: "stepper-list",
+				style: vertical ? void 0 : { gridTemplateColumns: count > 1 ? `repeat(${count - 1}, minmax(0, 1fr)) auto` : "auto" },
+				onKeyDown: interactive ? onKeyDown : void 0,
+				children: steps.map((step, index) => {
+					const isCurrent = index === active;
+					const status = step.error ? "error" : index < active ? "complete" : isCurrent ? "current" : "upcoming";
+					const clickable = interactive && index < active;
+					const detail = step.error ?? (details === "all" || isCurrent ? step.description : void 0);
+					const kind = step.error ? "error" : index < active ? "check" : "number";
+					const delay = delayAt(index);
+					const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+						className: "stepper-marker",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("span", { className: "stepper-ring" }), /* @__PURE__ */ jsx("span", {
+							className: "stepper-disc",
+							children: /* @__PURE__ */ jsx(Glyph, {
+								kind,
+								number: index + 1,
+								delay
+							})
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "stepper-text",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "stepper-label",
+								children: step.label
+							}),
+							STATUS_TEXT[status] ? /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [", ", STATUS_TEXT[status]]
+							}) : null,
+							/* @__PURE__ */ jsx(StepText, {
+								text: detail,
+								tone: step.error ? "error" : "description",
+								className: step.error ? "stepper-detail stepper-error" : "stepper-detail"
+							})
+						]
+					})] });
+					return /* @__PURE__ */ jsxs("li", {
+						className: "stepper-item",
+						"data-status": status,
+						"data-current": isCurrent ? "" : void 0,
+						style: { "--stepper-delay": `${delay}ms` },
+						children: [index < count - 1 ? /* @__PURE__ */ jsx("span", {
+							className: "stepper-connector",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "stepper-fill",
+								"data-filled": index < active ? "" : void 0
+							})
+						}) : null, interactive ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "stepper-head",
+							"data-clickable": clickable ? "" : void 0,
+							"data-reachable": index <= active ? "" : void 0,
+							"aria-current": isCurrent ? "step" : void 0,
+							"aria-disabled": clickable ? void 0 : true,
+							tabIndex: clickable ? void 0 : -1,
+							onClick: clickable ? () => onStepSelect?.(index) : void 0,
+							children: content
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "stepper-head",
+							"aria-current": isCurrent ? "step" : void 0,
+							children: content
+						})]
+					}, step.id);
+				})
+			}),
+			vertical ? null : /* @__PURE__ */ jsxs("span", {
+				className: "stepper-caption",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx(StepText, {
+					text: now?.label ?? completeLabel,
+					tone: "label",
+					className: "stepper-caption-label"
+				}), /* @__PURE__ */ jsx(StepText, {
+					text: now?.error ?? now?.description,
+					tone: now?.error ? "error" : "description",
+					className: now?.error ? "stepper-detail stepper-error" : "stepper-detail"
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: now ? `Step ${active + 1} of ${count}: ${now.label}` : completeLabel
+			})
+		]
+	});
+});
+//#endregion
+export { Stepper };
+
+//# sourceMappingURL=stepper.js.map

package/dist/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/stepper/stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { prefersReducedMotion } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Stepper: a steps indicator for onboarding, checkout and setup flows. Place it\n * above (horizontal) or beside (vertical) the step content and drive it with\n * `current`; set `current` to `steps.length` once every step is done.\n *\n * Moving on fills the connector behind the step that was finished (a jump\n * across several steps fills or drains them one after another), the number turns\n * into a check that draws itself, and a ring grows out behind the new current\n * step. A step marked `error` morphs its marker into an alert. A changed\n * description rises in while the old one lifts away, and the steps below follow\n * the new height. Nothing animates on first render.\n *\n * Pass `onStepSelect` to let people return to completed steps by click or\n * keyboard (arrow keys move between the steps they can reach). Without it the\n * stepper is a read-only indicator. A horizontal stepper folds to markers on\n * its own below 30rem and names the current step underneath.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\nexport type StepperStatus = \"complete\" | \"current\" | \"upcoming\" | \"error\";\n\nexport interface StepperStep {\n  /** Stable key, so each step keeps its own motion when the list changes. */\n  id: string;\n  label: string;\n  /** A short hint under the label. */\n  description?: string;\n  /** Marks the step as failed: the marker morphs into an alert and this message replaces the description. */\n  error?: string;\n}\n\nexport interface StepperProps {\n  steps: StepperStep[];\n  /** Index of the step in progress. `steps.length` marks the whole flow complete. */\n  current: number;\n  /** @default \"horizontal\" */\n  orientation?: StepperOrientation;\n  /** Called with the index of a completed step when it is chosen. Without it the stepper is a read-only indicator. */\n  onStepSelect?: (index: number) => void;\n  /** `current` shows only the active step's description, for tight spaces. Errors always show. @default \"all\" */\n  details?: \"all\" | \"current\";\n  /** Markers only; labels stay available to assistive tech. A horizontal stepper switches to this below 30rem on its own and shows the current step's label underneath. */\n  compact?: boolean;\n  /** Accessible name for the stepper. @default \"Progress\" */\n  label?: string;\n  /** Announced, and shown in the compact caption, once every step is complete. @default \"All steps complete\" */\n  completeLabel?: string;\n  /** Extra classes for the stepper. Merged last. */\n  className?: string;\n}\n\ntype GlyphKind = \"number\" | \"check\" | \"error\";\n\nconst STATUS_TEXT: Record<StepperStatus, string> = {\n  complete: \"Completed\",\n  current: \"\",\n  upcoming: \"Not started\",\n  error: \"Error\",\n};\n\n/** Stagger between connectors when progress jumps across several steps (ms). */\nconst LINE_STAGGER_MS = 80;\n\n/** Text that rises in when it changes. Its frame follows the new height, so a message that wraps eases the steps below down instead of pushing them. */\nfunction StepText({ text, tone, className }: { text?: string | undefined; tone: \"description\" | \"error\" | \"label\"; className: string }) {\n  const frame = useRef<HTMLSpanElement>(null);\n  const content = useRef<HTMLSpanElement>(null);\n  const key = text ? `${tone}:${text}` : \"\";\n  useHeightFollow(frame, content, key);\n  return (\n    <span ref={frame} className=\"height-follow block\">\n      <span ref={content} className=\"relative block\">\n        <SwapText swapKey={key} className={cn(\"block\", className)}>\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** The number, check and alert share one spot: the outgoing glyph shrinks away while the next one pops in and draws its stroke. */\nfunction Glyph({ kind, number, delay }: { kind: GlyphKind; number: number; delay: number }) {\n  return (\n    <SwapText swapKey={kind} motion=\"glyph\" delay={delay} className=\"grid place-items-center\">\n      {kind === \"number\" ? (\n        number\n      ) : (\n        <svg\n          className=\"stepper-icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={2.5}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          {kind === \"check\" ? (\n            <path className=\"stepper-draw\" pathLength={1} d=\"M5.5 12.5l4.25 4.25L18.5 8\" />\n          ) : (\n            <>\n              <path className=\"stepper-draw\" pathLength={1} d=\"M12 6.75v6.5\" />\n              <circle className=\"stepper-dot\" cx={12} cy={17.4} r={1.4} fill=\"currentColor\" stroke=\"none\" />\n            </>\n          )}\n        </svg>\n      )}\n    </SwapText>\n  );\n}\n\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  {\n    steps,\n    current,\n    orientation = \"horizontal\",\n    onStepSelect,\n    details = \"all\",\n    compact = false,\n    label = \"Progress\",\n    completeLabel = \"All steps complete\",\n    className,\n  },\n  ref,\n) {\n  const count = steps.length;\n  const active = Math.min(Math.max(Math.round(current), 0), count);\n  // Remember where progress came from, so a jump across several steps fills or drains its connectors one after another.\n  const [travel, setTravel] = useState({ to: active, from: active });\n  if (travel.to !== active) setTravel({ to: active, from: travel.to });\n  const from = travel.from;\n  const still = typeof window !== \"undefined\" && prefersReducedMotion();\n  const delayAt = (index: number) => {\n    if (still) return 0;\n    if (active > from) return index >= from && index < active ? (index - from) * LINE_STAGGER_MS : 0;\n    return index >= active && index < from ? (from - 1 - index) * LINE_STAGGER_MS : 0;\n  };\n  // The ring grows out once the connectors have filled, so the eye lands on the new step last.\n  const ringDelay = still ? 0 : Math.max(0, Math.abs(active - from) - 1) * LINE_STAGGER_MS + 120;\n  const interactive = Boolean(onStepSelect);\n  const vertical = orientation === \"vertical\";\n  const done = active >= count;\n  const now = done ? undefined : steps[active];\n\n  /** Arrow keys move between the steps you can reach; Home and End jump to the first and the current one. */\n  function onKeyDown(event: KeyboardEvent<HTMLOListElement>) {\n    const rtl = !vertical && getComputedStyle(event.currentTarget).direction === \"rtl\";\n    const back = [\"ArrowUp\", rtl ? \"ArrowRight\" : \"ArrowLeft\"];\n    const ahead = [\"ArrowDown\", rtl ? \"ArrowLeft\" : \"ArrowRight\"];\n    if (![...back, ...ahead, \"Home\", \"End\"].includes(event.key)) return;\n    const targets = Array.from(\n      event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-reachable]\"),\n    );\n    const at = targets.indexOf(event.target as HTMLButtonElement);\n    if (at < 0) return;\n    event.preventDefault();\n    const next =\n      event.key === \"Home\"\n        ? 0\n        : event.key === \"End\"\n          ? targets.length - 1\n          : back.includes(event.key)\n            ? Math.max(0, at - 1)\n            : Math.min(targets.length - 1, at + 1);\n    targets[next]?.focus();\n  }\n\n  const Root = interactive ? \"nav\" : \"div\";\n  return (\n    <Root\n      ref={ref as never}\n      aria-label={label}\n      role={interactive ? undefined : \"group\"}\n      data-slot=\"stepper\"\n      data-orientation={orientation}\n      data-compact={compact ? \"\" : undefined}\n      style={{ \"--stepper-ring-delay\": `${ringDelay}ms` } as CSSProperties}\n      className={cn(\"stepper box-border font-sans\", className)}\n    >\n      <ol\n        className=\"stepper-list\"\n        style={\n          vertical\n            ? undefined\n            : { gridTemplateColumns: count > 1 ? `repeat(${count - 1}, minmax(0, 1fr)) auto` : \"auto\" }\n        }\n        onKeyDown={interactive ? onKeyDown : undefined}\n      >\n        {steps.map((step, index) => {\n          const isCurrent = index === active;\n          const status: StepperStatus = step.error\n            ? \"error\"\n            : index < active\n              ? \"complete\"\n              : isCurrent\n                ? \"current\"\n                : \"upcoming\";\n          const clickable = interactive && index < active;\n          const detail = step.error ?? (details === \"all\" || isCurrent ? step.description : undefined);\n          const kind: GlyphKind = step.error ? \"error\" : index < active ? \"check\" : \"number\";\n          const delay = delayAt(index);\n          const content: ReactNode = (\n            <>\n              <span className=\"stepper-marker\" aria-hidden=\"true\">\n                <span className=\"stepper-ring\" />\n                <span className=\"stepper-disc\">\n                  <Glyph kind={kind} number={index + 1} delay={delay} />\n                </span>\n              </span>\n              <span className=\"stepper-text\">\n                <span className=\"stepper-label\">{step.label}</span>\n                {STATUS_TEXT[status] ? <span className=\"sr-only\">, {STATUS_TEXT[status]}</span> : null}\n                <StepText\n                  text={detail}\n                  tone={step.error ? \"error\" : \"description\"}\n                  className={step.error ? \"stepper-detail stepper-error\" : \"stepper-detail\"}\n                />\n              </span>\n            </>\n          );\n          return (\n            <li\n              key={step.id}\n              className=\"stepper-item\"\n              data-status={status}\n              data-current={isCurrent ? \"\" : undefined}\n              style={{ \"--stepper-delay\": `${delay}ms` } as CSSProperties}\n            >\n              {index < count - 1 ? (\n                <span className=\"stepper-connector\" aria-hidden=\"true\">\n                  <span className=\"stepper-fill\" data-filled={index < active ? \"\" : undefined} />\n                </span>\n              ) : null}\n              {interactive ? (\n                <button\n                  type=\"button\"\n                  className=\"stepper-head\"\n                  data-clickable={clickable ? \"\" : undefined}\n                  data-reachable={index <= active ? \"\" : undefined}\n                  aria-current={isCurrent ? \"step\" : undefined}\n                  aria-disabled={clickable ? undefined : true}\n                  tabIndex={clickable ? undefined : -1}\n                  onClick={clickable ? () => onStepSelect?.(index) : undefined}\n                >\n                  {content}\n                </button>\n              ) : (\n                <span className=\"stepper-head\" aria-current={isCurrent ? \"step\" : undefined}>\n                  {content}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n      {vertical ? null : (\n        <span className=\"stepper-caption\" aria-hidden=\"true\">\n          <StepText text={now?.label ?? completeLabel} tone=\"label\" className=\"stepper-caption-label\" />\n          <StepText\n            text={now?.error ?? now?.description}\n            tone={now?.error ? \"error\" : \"description\"}\n            className={now?.error ? \"stepper-detail stepper-error\" : \"stepper-detail\"}\n          />\n        </span>\n      )}\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {now ? `Step ${active + 1} of ${count}: ${now.label}` : completeLabel}\n      </span>\n    </Root>\n  );\n});\n"],"mappings":"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"}

package/dist/streamgraph/index.d.ts

@@ -0,0 +1,2 @@
+import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } from "./streamgraph.js";
+export { Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries };

package/dist/streamgraph/index.js

@@ -0,0 +1,2 @@
+import { Streamgraph } from "./streamgraph.js";
+export { Streamgraph };

package/dist/streamgraph/streamgraph.d.ts

@@ -0,0 +1,70 @@
+//#region src/streamgraph/streamgraph.d.ts
+/**
+ * Streamgraph: how the mix of several parts changes over time, when the overall
+ * shape matters more than exact values. Layers flow around a centre line, the
+ * first through the middle and the rest alternating above and below it.
+ *
+ * The stream swells out of a hairline along its centre the first time it is
+ * seen. New data blends every layer from the shape on screen to the new one;
+ * switching a layer off thins it to nothing while the others close over it.
+ * Hovering, touching or the arrow keys read the stream at a point in time: a
+ * crosshair glides to it and a tooltip lists every layer. The layer under the
+ * pointer (or chosen with the up and down keys, or the legend) comes forward and
+ * the rest step back. Each layer is named inside its widest stretch when it is
+ * thick enough to hold the text.
+ *
+ * Plain SVG written straight to the DOM by one small spring tween; the curves
+ * are resampled onto a shared grid, so datasets of any length morph into each
+ * other.
+ */
+export interface StreamgraphSeries {
+  /** Stable identity. A layer keeps its place and colour across data changes, so switching datasets morphs it. */
+  key: string;
+  /** Name in the legend, the direct label, the tooltip and the data table. */
+  label: string;
+  /** Any CSS colour. Defaults to chart-1 to chart-4 for the first four layers, then neutral steps. */
+  color?: string;
+}
+export interface StreamgraphDatum {
+  /** Stable identity, such as an ISO week. */
+  key: string;
+  /** Full label for the tooltip and screen readers, such as "Week of Sep 14". */
+  label: string;
+  /** Short label on the time axis. Leave it out to keep the axis quiet at that point. */
+  axisLabel?: string;
+  /** One value per series key. Missing values count as zero; negatives are treated as zero. */
+  values: Record<string, number | undefined>;
+}
+export interface StreamgraphProps {
+  data: StreamgraphDatum[];
+  /** Layers from the centre out: the first runs through the middle of the stream, the rest alternate above and below it. */
+  series: StreamgraphSeries[];
+  /** What is measured, such as "Support tickets by topic". Names the chart for assistive technology. */
+  label: string;
+  /** Unit after each value, such as "tickets". */
+  unit?: string;
+  /** Plot height in pixels. The width follows the container. @default 260 */
+  height?: number;
+  /** "wiggle" minimises layer slopes for a flowing stream, "silhouette" centres the stack, "zero" stacks from a flat baseline. @default "wiggle" */
+  offset?: "wiggle" | "silhouette" | "zero";
+  formatValue?: (value: number, series: StreamgraphSeries) => string;
+  /** Controlled hidden layer keys. A hidden layer thins to nothing and the rest reflow. */
+  hiddenSeries?: string[];
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Called as the reading moves, and with nulls when it leaves. */
+  onActiveChange?: (index: number | null, seriesKey: string | null) => void;
+  /** Layer toggles above the plot. @default true */
+  legend?: boolean;
+  /** Names each layer inside its widest stretch when it is thick enough to hold the text. @default true */
+  directLabels?: boolean;
+  /** Header of the first column in the screen reader table. @default "Date" */
+  categoryLabel?: string;
+  /** @default "No data for this range" */
+  emptyLabel?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const Streamgraph: import("react").ForwardRefExoticComponent<StreamgraphProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=streamgraph.d.ts.map