@kind-ui/charts 0.1.0

package/dist/styles.css

@@ -0,0 +1,443 @@
+@layer kind-ui {
+  :where(.kind-ui-configured-line-root) {
+    font-family: var(--kind-ui-chart-font, ui-sans-serif, system-ui, sans-serif);
+  }
+
+  :where(.kind-ui-configured-line-chart) {
+    width: 100%;
+    height: var(--kind-ui-chart-height, 280px);
+    min-width: 0;
+  }
+
+  :where([data-kind-ui="chart-instructions"]) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  :where(.kind-ui-combo-chart .recharts-area, .kind-ui-combo-chart .recharts-area-dots) {
+    clip-path: var(--kind-ui-combo-area-clip, none);
+  }
+
+  :where(.kind-ui-area-chart .recharts-area, .kind-ui-area-chart .recharts-area-dots) {
+    clip-path: var(--kind-ui-line-clip, none);
+  }
+
+  :where(.kind-ui-bar-series) {
+    clip-path: var(--kind-ui-bar-clip, none);
+  }
+
+  :where(.kind-ui-line-chart .recharts-line, .kind-ui-line-chart .recharts-line-dots) {
+    clip-path: var(--kind-ui-line-clip, none);
+  }
+
+  :where([data-kind-ui="chart"]) {
+    width: 100%;
+    min-width: 0;
+  }
+
+  :where([data-kind-ui="chart-legend"]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    list-style: none;
+    margin: 4px 0 8px;
+    padding: 0;
+  }
+
+  :where([data-kind-ui="chart-legend-button"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid var(--kind-ui-chart-border, var(--border, currentColor));
+    border-radius: var(--kind-ui-chart-radius, var(--radius, 6px));
+    background: var(--kind-ui-chart-legend-background, var(--chart-legend-background, transparent));
+    color: inherit;
+    min-height: 24px;
+    padding: 3px 6px;
+    font-family: inherit;
+    font-size: 11px;
+    line-height: 16px;
+    cursor: pointer;
+  }
+
+  :where([data-kind-ui="chart-legend-item"] > span) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 0;
+    font-size: 11px;
+    line-height: 16px;
+  }
+
+  :where([data-kind-ui="chart-legend-button"][aria-pressed="false"]) {
+    color: var(--kind-ui-chart-muted-foreground, var(--muted-foreground, GrayText));
+    text-decoration: none;
+  }
+
+  :where([data-kind-ui="chart-indicator"]) {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    background: var(--kind-ui-chart-indicator-color, currentColor);
+  }
+
+  :where(
+    [data-kind-ui="chart-legend-button"][aria-pressed="false"] [data-kind-ui="chart-indicator"]
+  ) {
+    background: currentColor;
+  }
+
+  :where([data-kind-ui="chart-indicator"][data-legend-shape]) {
+    width: 12px;
+    height: 12px;
+    background: none;
+    fill: var(--kind-ui-chart-indicator-color, currentColor);
+  }
+
+  :where(
+    [data-kind-ui="chart-legend-button"][aria-pressed="false"]
+      [data-kind-ui="chart-indicator"][data-legend-shape]
+  ) {
+    fill: currentColor;
+  }
+
+  :where([data-kind-ui="chart-tooltip"]) {
+    padding: 6px 8px;
+    background: var(--kind-ui-chart-popover, var(--popover, Canvas));
+    color: var(--kind-ui-chart-popover-foreground, var(--popover-foreground, CanvasText));
+    border: 1px solid var(--kind-ui-chart-border, var(--border, GrayText));
+    border-radius: var(--kind-ui-chart-radius, var(--radius, 8px));
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  :where([data-kind-ui="chart-tooltip-list"]) {
+    list-style: none;
+    padding: 0;
+    margin: 2px 0 0;
+  }
+
+  :where([data-kind-ui="chart-tooltip-item"]) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 1px;
+  }
+
+  :where([data-kind-ui="chart-tooltip-item"] [data-kind-ui="chart-indicator"]) {
+    width: 3px;
+    height: 12px;
+    border-radius: 1px;
+  }
+
+  :where([data-kind-ui="chart-tooltip-item"] [data-indicator="dot"]) {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  :where([data-kind-ui="chart-tooltip-item"] [data-indicator="dashed"]) {
+    background: transparent;
+    border-left: 2px dashed var(--kind-ui-chart-indicator-color, currentColor);
+    width: 0;
+    border-radius: 0;
+  }
+
+  :where([data-kind-ui="chart-icon"]) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  :where([data-kind-ui="chart-icon"] > svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  :where([data-kind-ui="chart-tooltip-label"], [data-kind-ui="chart-tooltip-value"]) {
+    font-weight: 500;
+  }
+
+  :where([data-kind-ui="chart-tooltip-item"] > span:last-of-type) {
+    color: var(--kind-ui-chart-muted-foreground, var(--muted-foreground, inherit));
+  }
+
+  :where([data-kind-ui="chart-tooltip-value"]) {
+    margin-left: auto;
+    padding-left: 4px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kind-ui="tooltip-number"]) {
+    display: inline-block;
+    position: relative;
+    min-width: max-content;
+    overflow: clip;
+    vertical-align: bottom;
+    white-space: pre;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kind-ui="tooltip-number-final"]) {
+    display: inline-block;
+    opacity: 0;
+  }
+
+  :where([data-kind-ui="tooltip-number-visual"]) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    direction: ltr;
+    pointer-events: none;
+  }
+
+  :where([data-kind-ui="tooltip-digit"]) {
+    position: relative;
+    display: inline-block;
+    width: 1ch;
+    height: 1lh;
+    overflow: clip;
+    flex-shrink: 0;
+  }
+
+  :where([data-kind-ui="tooltip-digit-reel"]) {
+    display: block;
+    line-height: inherit;
+  }
+
+  :where([data-kind-ui="tooltip-digit-reel"] > span) {
+    display: block;
+    height: 1lh;
+  }
+}
+
+@layer kind-ui {
+  [data-kind-ui="heatmap"] {
+    --heatmap-missing: #e5e7eb;
+  }
+  [data-kind-ui="heatmap-scroll"] {
+    container-type: inline-size;
+    overflow-x: auto;
+    max-width: 100%;
+  }
+  [data-kind-ui="heatmap-grid"] {
+    border-spacing: var(--heatmap-gap, 3px);
+    table-layout: fixed;
+    width: 100%;
+    min-width: calc(7rem + var(--heatmap-columns) * 3.25rem);
+  }
+  [data-kind-ui="heatmap-grid"] caption {
+    width: 100cqw;
+    max-width: 100cqw;
+    overflow-wrap: anywhere;
+    text-align: left;
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+  [data-kind-ui="heatmap-grid"] th {
+    font-weight: 500;
+    font-size: 0.75rem;
+    overflow-wrap: anywhere;
+    padding: 0.4rem;
+  }
+  [data-kind-ui="heatmap-grid"] th:first-child {
+    width: 6rem;
+    text-align: left;
+  }
+  [data-kind-ui="heatmap-grid"] td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 2.6rem;
+    text-align: center;
+    border-radius: 3px;
+    color: #111827;
+    font-variant-numeric: tabular-nums;
+    font-size: 0.75rem;
+    cursor: default;
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"] {
+    --heatmap-row-width: 6.8rem;
+    width: calc(
+      var(--heatmap-row-width) +
+      var(--heatmap-gap, 3px) +
+      var(--heatmap-columns) *
+      (var(--heatmap-cell-size) + var(--heatmap-gap, 3px)) +
+      var(--heatmap-gap, 3px)
+    );
+    min-width: 0;
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"][data-row-labels="hidden"] {
+    --heatmap-row-width: 0px;
+  }
+  [data-kind-ui="heatmap-grid"]:where([data-cell-sizing="fixed"]) caption {
+    width: auto;
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"] col {
+    width: var(--heatmap-cell-size);
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"] col[data-kind-ui="heatmap-row-column"] {
+    width: var(--heatmap-row-width);
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"] tbody th {
+    padding-block: 0;
+    line-height: var(--heatmap-cell-size);
+  }
+  [data-kind-ui="heatmap-grid"][data-cell-sizing="fixed"] td {
+    box-sizing: border-box;
+    width: var(--heatmap-cell-size);
+    height: var(--heatmap-cell-size);
+    line-height: var(--heatmap-cell-size);
+    padding: 0;
+  }
+  [data-kind-ui="heatmap-grid"][data-row-labels="hidden"] th:first-child,
+  [data-kind-ui="heatmap-grid"][data-column-labels="hidden"] thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  [data-kind-ui="heatmap-grid"][data-row-labels="hidden"]:not([data-cell-sizing="fixed"]) {
+    min-width: calc(var(--heatmap-columns) * 3.25rem);
+  }
+  [data-kind-ui="heatmap-row-label"] {
+    display: block;
+    max-height: 1.3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-kind-ui="heatmap-grid"] td:focus-visible {
+    outline: 3px solid var(--foreground, #172033);
+    outline-offset: 1px;
+  }
+  [data-kind-ui="heatmap-grid"] td[data-missing="true"] {
+    background-image: repeating-linear-gradient(135deg, transparent 0 5px, #17203315 5px 6px);
+  }
+  [data-kind-ui="heatmap-tooltip"] {
+    margin-top: 0.75rem;
+    padding: 0.6rem 0.8rem;
+    border: 1px solid var(--border, #d1d5db);
+    border-radius: 0.5rem;
+    font-size: 0.8rem;
+    overflow-wrap: anywhere;
+  }
+  [data-kind-ui="heatmap-tooltip"][hidden] {
+    display: none;
+  }
+  [data-kind-ui="heatmap-legend"] {
+    border: 0;
+    padding: 0;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    min-width: 0;
+    margin-top: 1rem;
+    font-size: 0.75rem;
+    max-width: 22rem;
+  }
+  [data-kind-ui="heatmap-ramp"] {
+    position: relative;
+    height: 0.65rem;
+    border-radius: 3px;
+    margin-top: 0.5rem;
+  }
+  [data-kind-ui="heatmap-ticks"] {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin-top: 0.3rem;
+  }
+  [data-kind-ui="heatmap-missing-key"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.5rem;
+  }
+  [data-kind-ui="heatmap-missing-key"] i {
+    width: 0.85rem;
+    height: 0.85rem;
+    background:
+      repeating-linear-gradient(135deg, transparent 0 5px, #17203315 5px 6px),
+      var(--heatmap-missing);
+    border-radius: 2px;
+  }
+  [data-kind-ui="heatmap-data-table"] {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.8rem;
+  }
+  [data-kind-ui="heatmap-data-table"] :is(th, td) {
+    border: 1px solid var(--border, #d1d5db);
+    padding: 0.5rem;
+    text-align: left;
+  }
+  [data-kind-ui="heatmap-data-table"] caption {
+    padding: 0.75rem 0;
+    text-align: left;
+  }
+}
+
+@layer kind-ui {
+  [data-kind-ui="heatmap-zero-marker"] {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    width: 1px;
+    background: var(--foreground, #172033);
+  }
+  [data-kind-ui="heatmap-zero-label"] {
+    display: block;
+    margin-top: 0.25rem;
+    overflow-wrap: anywhere;
+  }
+  [data-kind-ui="heatmap-ticks"] > span {
+    max-width: 48%;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* Heatmap materials are background paint, confined to an 8% perimeter.
+   The quantitative center and native geometry are untouched. */
+@layer kind-ui {
+  [data-kind-ui="heatmap-grid"] td[data-material="paper"] {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22grain%22%20width%3D%226%22%20height%3D%227%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M1%201h1M4%204h1M2%206h1%22%20stroke%3D%22%23705c48%22%20stroke-opacity%3D%22.32%22%20stroke-width%3D%22.6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22%23eadac0%22%20fill-opacity%3D%22.7%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22url%28%23grain%29%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M3%205L26%203L50%205L75%203L97%205L95%2030L97%2055L95%2078L97%2096L72%2095L48%2097L25%2095L3%2097L5%2074L3%2049L5%2024Z%22%20fill%3D%22none%22%20stroke%3D%22%235c4938%22%20stroke-opacity%3D%22.65%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M5%203L30%205L58%203L83%205L95%203M3%207L5%2035L3%2062L5%2090%22%20fill%3D%22none%22%20stroke%3D%22%23fffaf0%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%22.7%22%2F%3E%3C%2Fsvg%3E");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  [data-kind-ui="heatmap-grid"] td[data-material="clay"] {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22top%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22bottom%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22right%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V8H0Z%22%20fill%3D%22url%28%23top%29%22%2F%3E%3Cpath%20d%3D%22M0%2092H100V100H0Z%22%20fill%3D%22url%28%23bottom%29%22%2F%3E%3Cpath%20d%3D%22M0%208H8V92H0Z%22%20fill%3D%22url%28%23left%29%22%2F%3E%3Cpath%20d%3D%22M92%208H100V92H92Z%22%20fill%3D%22url%28%23right%29%22%2F%3E%3C%2Fsvg%3E");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  [data-kind-ui="heatmap-grid"] td[data-material="glow"] {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22top%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.95%22%2F%3E%3Cstop%20offset%3D%22.2%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22bottom%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.95%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.95%22%2F%3E%3Cstop%20offset%3D%22.2%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22right%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.95%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V8H0Z%22%20fill%3D%22url%28%23top%29%22%2F%3E%3Cpath%20d%3D%22M0%2092H100V100H0Z%22%20fill%3D%22url%28%23bottom%29%22%2F%3E%3Cpath%20d%3D%22M0%208H8V92H0Z%22%20fill%3D%22url%28%23left%29%22%2F%3E%3Cpath%20d%3D%22M92%208H100V92H92Z%22%20fill%3D%22url%28%23right%29%22%2F%3E%3C%2Fsvg%3E");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+}
+
+@layer kind-ui {
+  [data-kind-ui="emphasis-paint"] {
+    transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-kind-ui="emphasis-paint"] {
+      transition: none;
+    }
+  }
+}

package/dist/surface-material.d.ts

@@ -0,0 +1,13 @@
+import type { LineMaterial } from "./line-material.js";
+/** Internal filled-surface finish only. Callers own native shapes, IDs and bounds. */
+export declare function SurfaceMaterialFilter({ material, id, bounds, family, }: {
+    material: Exclude<LineMaterial, "plain">;
+    id: string;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    family: "area" | "bar";
+}): import("react").JSX.Element;

package/dist/surface-material.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AreaClayRelief } from "./area-clay.js";
+/** Internal filled-surface finish only. Callers own native shapes, IDs and bounds. */
+export function SurfaceMaterialFilter({ material, id, bounds, family, }) {
+    return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, colorInterpolationFilters: "sRGB", children: material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-paper-fiber, #fff)`, floodOpacity: `var(--kind-ui-${family}-paper-grain, 0.32)` }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceAlpha", operator: "in", result: "grain" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "grain" })] })] })) : material === "clay" && family === "area" ? (_jsx(AreaClayRelief, {})) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: 1.5, result: "lower" }), _jsx("feComposite", { in: "SourceAlpha", in2: "lower", operator: "out", result: "topEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-light, #fff)`, floodOpacity: 0.65 }), _jsx("feComposite", { in2: "topEdge", operator: "in", result: "light" }), _jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: -2, result: "upper" }), _jsx("feComposite", { in: "SourceAlpha", in2: "upper", operator: "out", result: "bottomEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-shade, #17212b)`, floodOpacity: 0.38 }), _jsx("feComposite", { in2: "bottomEdge", operator: "in", result: "shade" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" }), _jsx("feMergeNode", { in: "light" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: `var(--kind-ui-${family}-glow-opacity, 0.6)`, result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.8, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-glow-light, #fff)`, floodOpacity: 0.45 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "light" })] })] })) }));
+}

package/dist/tooltip-content.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { TooltipContentProps as UpstreamTooltipContentProps } from "recharts";
+export type TooltipContentProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+    /** Pass the upstream content callback's props here so engine-only props never reach the DOM. */
+    tooltip: UpstreamTooltipContentProps;
+    missingValue?: ReactNode;
+    /** Opt in to decorative rolling digits for finite numeric text values. Default: off. */
+    valueAnimation?: "shuffle";
+    /** Omit the heading; series labels and values remain accessible. */
+    hideLabel?: boolean;
+    /** Omit the decorative marker, including a configured icon. */
+    hideIndicator?: boolean;
+    /** Defaults to the existing slim line marker. Configured icons take precedence. */
+    indicator?: "dot" | "line" | "dashed";
+    /** Stable metadata/visibility identity for an item, e.g. a pie category payload ID. */
+    itemKey?: (entry: UpstreamTooltipContentProps["payload"][number]) => string;
+};
+/** Default tooltip UI using the containing chart's labels, formats, colors and visibility. */
+export declare function TooltipContent({ tooltip, missingValue, valueAnimation, itemKey, hideLabel, hideIndicator, indicator, ...props }: TooltipContentProps): import("react").JSX.Element | null;

package/dist/tooltip-content.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { use } from "react";
+import { useChart } from "./chart-context.js";
+import { LineInteraction } from "./line-chart.js";
+import { TooltipNumber } from "./tooltip-number.js";
+/** Default tooltip UI using the containing chart's labels, formats, colors and visibility. */
+export function TooltipContent({ tooltip, missingValue = "No data", valueAnimation, itemKey, hideLabel = false, hideIndicator = false, indicator = "line", ...props }) {
+    const { config, visibleSeries } = useChart();
+    const line = use(LineInteraction);
+    const identity = (entry) => itemKey?.(entry) ??
+        (entry.graphicalItemId ? line?.seriesKeys.get(entry.graphicalItemId) : undefined) ??
+        String(entry.dataKey ?? entry.name);
+    const { active, payload, label, formatter, labelFormatter, accessibilityLayer } = tooltip;
+    const entries = active
+        ? payload.filter((item) => item.type !== "none" &&
+            !item.hide &&
+            (visibleSeries === undefined || visibleSeries.includes(identity(item))))
+        : [];
+    if (!entries.some((entry) => entry.value != null))
+        return null;
+    let hasVisibleValue = false;
+    const items = entries.map((entry, index) => {
+        const key = identity(entry);
+        const item = Object.hasOwn(config, key) ? config[key] : undefined;
+        let name = item?.label ?? entry.name ?? key;
+        let value = missingValue;
+        if (entry.value != null) {
+            const format = entry.formatter ?? formatter;
+            if (format) {
+                const result = format(entry.value, entry.name, entry, index, entries);
+                if (result == null)
+                    return null;
+                if (Array.isArray(result))
+                    [value, name] = result;
+                else
+                    value = result;
+            }
+            else
+                value = item?.formatValue
+                    ? item.formatValue(entry.value)
+                    : Array.isArray(entry.value)
+                        ? entry.value.join(" – ")
+                        : entry.value;
+            hasVisibleValue = true;
+        }
+        return (_jsxs("li", { "data-kind-ui": "chart-tooltip-item", "data-series": key, children: [!hideIndicator &&
+                    (item?.icon ? (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-icon", children: _jsx(item.icon, {}) })) : (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", "data-indicator": indicator, style: {
+                            "--kind-ui-chart-indicator-color": item
+                                ? `var(--color-${key})`
+                                : (entry.color ?? "currentColor"),
+                        } }))), _jsx("span", { children: name }), _jsx("strong", { "data-kind-ui": "chart-tooltip-value", children: valueAnimation === "shuffle" &&
+                        typeof entry.value === "number" &&
+                        Number.isFinite(entry.value) &&
+                        (typeof value === "string" || (typeof value === "number" && Number.isFinite(value))) ? (_jsx(TooltipNumber, { value: value })) : (value) })] }, entry.graphicalItemId ?? `${key}-${index}`));
+    });
+    if (!hasVisibleValue)
+        return null;
+    return (_jsx("div", { role: accessibilityLayer ? "status" : undefined, "aria-live": accessibilityLayer ? "assertive" : undefined, "aria-atomic": "true", ...props, "data-kind-ui": "chart-tooltip", children: entries.length > 0 && (_jsxs(_Fragment, { children: [!hideLabel && (_jsx("strong", { "data-kind-ui": "chart-tooltip-label", children: labelFormatter ? labelFormatter(label, entries) : label })), _jsx("ul", { "data-kind-ui": "chart-tooltip-list", children: items })] })) }));
+}

package/dist/tooltip-number.d.ts

@@ -0,0 +1,4 @@
+/** Private presentation only: formatters and native tooltip selection remain upstream. */
+export declare function TooltipNumber({ value }: {
+    value: string | number;
+}): string | number | import("react").JSX.Element;

package/dist/tooltip-number.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { useLayoutEffect, useRef, useSyncExternalStore } from "react";
+const query = "(prefers-reduced-motion: reduce)";
+function subscribe(change) {
+    const media = window.matchMedia(query);
+    media.addEventListener("change", change);
+    return () => media.removeEventListener("change", change);
+}
+const snapshot = () => window.matchMedia(query).matches;
+const serverSnapshot = () => true;
+const reel = Array.from({ length: 30 }, (_, index) => index);
+// Keep a bounded repeating reel. Interrupted transitions start at the currently painted digit.
+function Digit({ digit }) {
+    // Newly opened tooltips should paint their actual value immediately.
+    // Subsequent value updates still animate from the painted digit.
+    const position = useMotionValue(digit + 10);
+    const y = useTransform(position, (value) => `${-value}lh`);
+    useLayoutEffect(() => {
+        const current = position.get();
+        const target = [digit, digit + 10, digit + 20].reduce((closest, next) => Math.abs(next - current) < Math.abs(closest - current) ? next : closest);
+        const controls = animate(position, target, {
+            duration: 0.32,
+            ease: [0.22, 1, 0.36, 1],
+            onComplete: () => position.set(digit + 10),
+        });
+        return () => controls.stop();
+    }, [digit, position]);
+    return (_jsx("span", { "data-kind-ui": "tooltip-digit", children: _jsx(motion.span, { "data-kind-ui": "tooltip-digit-reel", style: { y }, children: reel.map((index) => (_jsx("span", { children: index % 10 }, index))) }) }));
+}
+function RollingNumber({ text }) {
+    const final = useRef(null);
+    const widest = useRef(0);
+    const width = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = final.current;
+        if (!node)
+            return;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            if (next <= widest.current)
+                return;
+            // Retain the widest value without revealing it through a clipping width.
+            width.set(next);
+            widest.current = next;
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [width]);
+    const characters = text.match(/[0-9]|[^0-9]+/g) ?? [];
+    let place = characters.filter((character) => /^[0-9]$/.test(character)).length;
+    return (_jsxs(motion.span, { "data-kind-ui": "tooltip-number", style: { width }, children: [_jsx("span", { ref: final, "data-kind-ui": "tooltip-number-final", children: text }), _jsx("span", { "aria-hidden": "true", "data-kind-ui": "tooltip-number-visual", children: characters.map((character) => /^[0-9]$/.test(character) ? (_jsx(Digit, { digit: Number(character) }, `digit-${--place}`)) : (_jsx("span", { children: character }, `text-${place}-${character}`))) })] }));
+}
+/** Private presentation only: formatters and native tooltip selection remain upstream. */
+export function TooltipNumber({ value }) {
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const text = String(value);
+    // Mixed scripts, non-ASCII digits and bidi text keep their original shaping/order.
+    const unsupported = !/[0-9]/.test(text) ||
+        /\p{Decimal_Number}/u.test(text.replace(/[0-9]/g, "")) ||
+        /[\u0590-\u08ff\u200e\u200f\u202a-\u202e\u2066-\u2069]/.test(text);
+    return reduced || unsupported ? value : _jsx(RollingNumber, { text: text });
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref } from "react";
+import { type TooltipProps as EngineTooltipProps } from "recharts";
+import { type TooltipContentProps } from "./tooltip-content.js";
+export type TooltipProps = Omit<EngineTooltipProps, "position" | "isAnimationActive" | "portal" | "allowEscapeViewBox" | "reverseDirection" | "useTranslate3d"> & {
+    /** Ref and native attributes for Kind's measured positioning element. */
+    ref?: Ref<HTMLDivElement>;
+    frameProps?: Omit<ComponentPropsWithRef<"div">, "children" | "ref">;
+    maxWidth?: number;
+    /** Resolves category identity before the existing series-key fallback. */
+    itemKey?: TooltipContentProps["itemKey"];
+    /** Opt in on Kind's default content; custom content owns its own animation. */
+    valueAnimation?: TooltipContentProps["valueAnimation"];
+};
+export type TooltipFrameProps = {
+    x: number;
+    y: number;
+    maxX: number;
+    maxY: number;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    style: ComponentPropsWithRef<"div">["style"];
+    frameProps: TooltipProps["frameProps"];
+};
+export declare function StaticTooltipFrame({ x, y, ref, style, frameProps, children }: TooltipFrameProps): import("react").JSX.Element;
+export declare function TooltipBase({ ref, content, frameProps, maxWidth, itemKey, valueAnimation, Frame, ...props }: TooltipProps & {
+    Frame?: (props: TooltipFrameProps) => ReactNode;
+}): import("react").JSX.Element;
+/** Measured and bounded content; the engine owns payload, selection and Escape dismissal. */
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;