doom-design-system 0.5.0 → 0.6.0

package/dist/components/Chart/subcomponents/Root/Root.module.css

@@ -1,83 +1,71 @@
-.chartContainer {
-  position: relative;
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  padding: var(--spacing-6);
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-}
-.chartContainer.flat {
-  box-shadow: none;
-}
-.chartContainer.frameless {
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  padding: 0;
-}
-.chartContainer.solid {
-  /* ROOT CONTEXT (The Field) */
-  background-color: var(--solid-bg);
-  color: var(--solid-fg);
-  /* Root Variables */
-  --background: var(--solid-bg);
-  --foreground: var(--solid-fg);
-  --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
-  /*
-  * Standardized Brand Surface Logic
-  * Decouples Modals (Surface) from Buttons (Action)
-  */
-  --surface-brand: var(--solid-bg);
-  --surface-brand-foreground: var(--solid-fg);
-  /* SEMANTICS (True Semantic Colors) */
-  --success: var(--solid-success);
-  --success-foreground: var(--solid-fg);
-  --error: var(--solid-error);
-  --error-foreground: var(--solid-fg);
-  --warning: var(--solid-warning);
-  --warning-foreground: var(--solid-fg);
-  /* SURFACE COLORS */
-  --on-surface: var(--solid-bg);
-  --on-surface-muted: var(--solid-bg);
-  /* COMPONENT TOKENS */
-  --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --card-border: var(--solid-fg);
-  --card-foreground: var(--solid-fg);
-  /* POPOVER TOKENS */
-  --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --popover-foreground: var(--solid-bg);
-  /* INPUT TOKENS */
-  --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --border-strong: var(--solid-fg);
-  /* BUTTON TOKENS */
-  --primary: var(--solid-fg);
-  --primary-foreground: var(--solid-bg);
-  /* SECONDARY TOKENS */
-  --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
-  --secondary-foreground: var(--solid-fg);
-  /* MUTED TOKENS */
-  --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
-  border-color: var(--border-strong);
-}
-.chartContainer.solid :global(.tick) text {
-  fill: var(--solid-fg);
-}
-.chartContainer.solid :global(.domain),
-.chartContainer.solid :global(.tick) line {
-  stroke: var(--solid-fg);
-}
-.chartContainer.mobile {
-  padding: var(--spacing-2);
-}
-
-.responsiveWrapper {
-  width: 100%;
-  flex: 1;
-  height: 100%;
-  min-height: 0;
-  position: relative;
-  overflow: visible;
+@layer doom.components {
+  .chartContainer {
+    position: relative;
+    background-color: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-6);
+    overflow: visible;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+  }
+  .chartContainer.flat {
+    box-shadow: none;
+  }
+  .chartContainer.frameless {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+  .chartContainer.solid {
+    background-color: var(--solid-bg);
+    color: var(--solid-fg);
+    --background: var(--solid-bg);
+    --foreground: var(--solid-fg);
+    --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
+    --surface-brand: var(--solid-bg);
+    --surface-brand-foreground: var(--solid-fg);
+    --success: var(--solid-success);
+    --success-foreground: var(--solid-fg);
+    --error: var(--solid-error);
+    --error-foreground: var(--solid-fg);
+    --warning: var(--solid-warning);
+    --warning-foreground: var(--solid-fg);
+    --on-surface: var(--solid-bg);
+    --on-surface-muted: var(--solid-bg);
+    --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --card-border: var(--solid-fg);
+    --card-foreground: var(--solid-fg);
+    --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --popover-foreground: var(--solid-bg);
+    --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --border-strong: var(--solid-fg);
+    --primary: var(--solid-fg);
+    --primary-foreground: var(--solid-bg);
+    --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
+    --secondary-foreground: var(--solid-fg);
+    --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
+    border-color: var(--border-strong);
+  }
+  .chartContainer.solid :global(.tick) text {
+    fill: var(--solid-fg);
+  }
+  .chartContainer.solid :global(.domain),
+  .chartContainer.solid :global(.tick) line {
+    stroke: var(--solid-fg);
+  }
+  .chartContainer.mobile {
+    padding: var(--space-2);
+  }
+  .responsiveWrapper {
+    width: 100%;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    position: relative;
+    overflow: visible;
+  }
 }

package/dist/components/Chart/subcomponents/ScatterSeries/ScatterSeries.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useId, useMemo } from "react";
 import { useChartContext } from "../../context.js";
+import { CHART_DATA_ATTRS } from "../../engine/index.js";
 import { registerSeries, unregisterSeries, } from "../../state/store/chart.store.js";
 import { resolveAccessor } from "../../utils/accessors.js";
 import { SeriesPoint } from "../SeriesPoint/SeriesPoint.js";
@@ -35,6 +36,7 @@ const ScatterSeriesComponent = ({ data: localData, x: localX, y: localY, size: l
         }
         registerSeries(chartStore, seriesId, [
             {
+                id: seriesId,
                 label: label || "Scatter Series",
                 color: strokeColor,
                 x: xAccessor,
@@ -71,7 +73,10 @@ const ScatterSeriesComponent = ({ data: localData, x: localX, y: localY, size: l
             if (rScale && sizeAccessor) {
                 radius = rScale(sizeAccessor(d));
             }
-            return (_jsx(SeriesPoint, { color: strokeColor, "data-index": i, datum: d, hoverRadius: radius + 4, radius: radius, x: cx, y: cy }, i));
+            return (_jsx(SeriesPoint, { color: strokeColor, datum: d, hoverRadius: radius + 4, radius: radius, x: cx, y: cy, [CHART_DATA_ATTRS.TYPE]: "scatter",
+                [CHART_DATA_ATTRS.SERIES_ID]: seriesId,
+                [CHART_DATA_ATTRS.INDEX]: i,
+                [CHART_DATA_ATTRS.DRAGGABLE]: false }, i));
         }) }));
 };
 export const ScatterSeries = React.memo(ScatterSeriesComponent);

package/dist/components/Chart/subcomponents/ScatterSeries/ScatterSeries.module.css

@@ -1,6 +1,8 @@
-.dot {
-  fill: var(--background);
-  stroke: var(--primary);
-  stroke-width: calc(var(--border-width) * 1.5);
-  transition: r 0.2s ease, fill 0.2s;
+@layer doom.components {
+  .dot {
+    fill: var(--background);
+    stroke: var(--primary);
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+    transition: r 0.2s ease, fill 0.2s;
+  }
 }

package/dist/components/Chart/subcomponents/Series/Series.module.css

@@ -1,129 +1,119 @@
-.chart {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: visible;
-  pointer-events: auto;
-}
-.chart :global .domain {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-}
-.chart :global .domain.hideDomain {
-  stroke: none;
-}
-.chart :global .tick line {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  opacity: 1;
-}
-.chart :global .tick text {
-  fill: var(--foreground);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-}
-
-.grid :global(.tick) line {
-  stroke: var(--muted);
-  stroke-opacity: 0.5;
-}
-.grid path {
-  display: none;
-}
-
-.path {
-  fill: none;
-  stroke: var(--primary);
-  stroke-width: calc(var(--border-width) * 1.5);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.area {
-  fill: var(--primary);
-  stroke: none;
-}
-
-.bar {
-  fill: var(--primary);
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  stroke-linejoin: round;
-  transition: opacity 0.2s;
-}
-.bar:hover {
-  cursor: crosshair;
-  filter: brightness(1.1);
-}
-
-.cursorLine {
-  stroke: var(--muted-foreground);
-  stroke-width: var(--border-width);
-  stroke-dasharray: 4 4;
-  opacity: 0;
-  transition: opacity 0.1s ease-out;
-  pointer-events: none;
-}
-
-.cursorPoint {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  transition: opacity 0.1s ease-out;
-  pointer-events: none;
-}
-
-.dot {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  transition: r 0.2s;
-  z-index: var(--z-overlay);
-}
-.dot:hover {
-  r: 8;
-  stroke-width: calc(var(--border-width) * 1.5);
-}
-
-.responsiveWrapper {
-  width: 100%;
-  flex: 1;
-  height: 100%;
-  min-height: 300px;
-  position: relative;
-  overflow: visible;
-}
-
-.tooltipWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  z-index: var(--z-tooltip);
-  will-change: transform;
-}
-
-.tooltipCard {
-  padding: var(--spacing-3) var(--spacing-4);
-  font-size: var(--text-xs);
-  white-space: nowrap;
-}
-
-.tooltipLabel {
-  color: var(--muted-foreground);
-  text-transform: uppercase;
-  font-size: var(--text-2xs);
-  letter-spacing: 0.05em;
-  margin-bottom: var(--spacing-1);
-}
-
-.axisLabel {
-  fill: var(--foreground);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  text-anchor: middle;
+@layer doom.components {
+  .chart {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: auto;
+  }
+  .chart :global .domain {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+  }
+  .chart :global .domain.hideDomain {
+    stroke: none;
+  }
+  .chart :global .tick line {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    opacity: 1;
+  }
+  .chart :global .tick text {
+    fill: var(--foreground);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+  }
+  .grid :global(.tick) line {
+    stroke: var(--muted);
+    stroke-opacity: 0.5;
+  }
+  .grid path {
+    display: none;
+  }
+  .path {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .area {
+    fill: var(--primary);
+    stroke: none;
+  }
+  .bar {
+    fill: var(--primary);
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    stroke-linejoin: round;
+    transition: opacity 0.2s;
+  }
+  .bar:hover {
+    cursor: crosshair;
+    filter: brightness(1.1);
+  }
+  .cursorLine {
+    stroke: var(--muted-foreground);
+    stroke-width: var(--surface-border-width);
+    stroke-dasharray: 4 4;
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+    pointer-events: none;
+  }
+  .cursorPoint {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    transition: opacity 0.1s ease-out;
+    pointer-events: none;
+  }
+  .dot {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    transition: r 0.2s;
+    z-index: var(--z-overlay);
+  }
+  .dot:hover {
+    r: 8;
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+  }
+  .responsiveWrapper {
+    width: 100%;
+    flex: 1;
+    height: 100%;
+    min-height: 300px;
+    position: relative;
+    overflow: visible;
+  }
+  .tooltipWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: var(--z-tooltip);
+    will-change: transform;
+  }
+  .tooltipCard {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+  }
+  .tooltipLabel {
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    font-size: var(--text-2xs);
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-1);
+  }
+  .axisLabel {
+    fill: var(--foreground);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    text-anchor: middle;
+  }
 }

package/dist/components/Chart/subcomponents/SeriesPoint/SeriesPoint.module.css

@@ -1,9 +1,11 @@
-.point {
-  fill: var(--primary);
-  stroke: var(--card-border);
-  stroke-width: 2;
-  transition: r 0.15s ease, stroke-width 0.15s ease, opacity 0.2s;
-  z-index: var(--z-overlay);
-  /* Ensure it sits above lines */
-  position: relative;
+@layer doom.components {
+  .point {
+    fill: var(--primary);
+    stroke: var(--card-border);
+    stroke-width: 2;
+    transition: r 0.15s ease, stroke-width 0.15s ease, opacity 0.2s;
+    z-index: var(--z-overlay);
+    /* Ensure it sits above lines */
+    position: relative;
+  }
 }

package/dist/components/Chart/subcomponents/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ import { Text } from "../../../Text/Text.js";
 import { useChartContext } from "../../context.js";
 import { resolveAccessor } from "../../types/index.js";
 import { InteractionChannel } from "../../types/interaction.js";
-import { Reposition, TOOLTIP_GAP_X, TOOLTIP_GAP_Y, TOUCH_OFFSET_Y, } from "../../utils/Reposition/index.js";
+import { Reposition, TOOLTIP_GAP_X, TOOLTIP_GAP_Y, } from "../../utils/Reposition/index.js";
 import styles from "./Tooltip.module.css";
 /**
  * The Tooltip component is a pure reactor that renders the chart's tooltip.
@@ -31,7 +31,7 @@ export function Tooltip({ containerRef, }) {
     const position = hover === null || hover === void 0 ? void 0 : hover.pointer;
     const [layout, setLayout] = useState({ x: 0, y: 0, visible: false });
     useLayoutEffect(() => {
-        var _a, _b, _c;
+        var _a, _b;
         if (!tooltipRef.current || !target || !position) {
             return;
         }
@@ -42,7 +42,6 @@ export function Tooltip({ containerRef, }) {
         })
             .gap({ x: TOOLTIP_GAP_X, y: TOOLTIP_GAP_Y })
             .align({ vertical: "center" })
-            .touchOffset(TOUCH_OFFSET_Y, (_c = position.isTouch) !== null && _c !== void 0 ? _c : false)
             .edgeDetect({ container: containerRef })
             .resolve();
         setLayout({ x, y, visible: true });

package/dist/components/Chart/subcomponents/Tooltip/Tooltip.module.css

@@ -1,68 +1,53 @@
-.tooltipWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  z-index: var(--z-tooltip);
-  will-change: transform;
-}
-
-.solid {
-  /* ROOT CONTEXT (The Field) */
-  background-color: var(--solid-bg);
-  color: var(--solid-fg);
-  /* Root Variables */
-  --background: var(--solid-bg);
-  --foreground: var(--solid-fg);
-  --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
-  /*
-  * Standardized Brand Surface Logic
-  * Decouples Modals (Surface) from Buttons (Action)
-  */
-  --surface-brand: var(--solid-bg);
-  --surface-brand-foreground: var(--solid-fg);
-  /* SEMANTICS (True Semantic Colors) */
-  --success: var(--solid-success);
-  --success-foreground: var(--solid-fg);
-  --error: var(--solid-error);
-  --error-foreground: var(--solid-fg);
-  --warning: var(--solid-warning);
-  --warning-foreground: var(--solid-fg);
-  /* SURFACE COLORS */
-  --on-surface: var(--solid-bg);
-  --on-surface-muted: var(--solid-bg);
-  /* COMPONENT TOKENS */
-  --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --card-border: var(--solid-fg);
-  --card-foreground: var(--solid-fg);
-  /* POPOVER TOKENS */
-  --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --popover-foreground: var(--solid-bg);
-  /* INPUT TOKENS */
-  --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --border-strong: var(--solid-fg);
-  /* BUTTON TOKENS */
-  --primary: var(--solid-fg);
-  --primary-foreground: var(--solid-bg);
-  /* SECONDARY TOKENS */
-  --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
-  --secondary-foreground: var(--solid-fg);
-  /* MUTED TOKENS */
-  --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
-}
-
-.tooltipCard {
-  padding: var(--spacing-3) var(--spacing-4);
-  font-size: var(--text-xs);
-  white-space: nowrap;
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-}
-
-.tooltipLabel {
-  color: var(--muted-foreground);
-  text-transform: uppercase;
-  font-size: var(--text-2xs);
-  letter-spacing: 0.05em;
-  margin-bottom: var(--spacing-1);
+@layer doom.components {
+  .tooltipWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: var(--z-tooltip);
+    will-change: transform;
+  }
+  .solid {
+    background-color: var(--solid-bg);
+    color: var(--solid-fg);
+    --background: var(--solid-bg);
+    --foreground: var(--solid-fg);
+    --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
+    --surface-brand: var(--solid-bg);
+    --surface-brand-foreground: var(--solid-fg);
+    --success: var(--solid-success);
+    --success-foreground: var(--solid-fg);
+    --error: var(--solid-error);
+    --error-foreground: var(--solid-fg);
+    --warning: var(--solid-warning);
+    --warning-foreground: var(--solid-fg);
+    --on-surface: var(--solid-bg);
+    --on-surface-muted: var(--solid-bg);
+    --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --card-border: var(--solid-fg);
+    --card-foreground: var(--solid-fg);
+    --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --popover-foreground: var(--solid-bg);
+    --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --border-strong: var(--solid-fg);
+    --primary: var(--solid-fg);
+    --primary-foreground: var(--solid-bg);
+    --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
+    --secondary-foreground: var(--solid-fg);
+    --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
+  }
+  .tooltipCard {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+  }
+  .tooltipLabel {
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    font-size: var(--text-2xs);
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-1);
+  }
 }

package/dist/components/Chart/types/context.d.ts

@@ -1,3 +1,4 @@
+import { Engine } from "../engine";
 import { Store } from "../state/store/chart.store";
 import { Accessor, Config, SeriesType } from "./index";
 import { XScale, YScale } from "./scales";
@@ -23,6 +24,13 @@ export interface RenderFrame<T = unknown> {
         element: Element;
         data: T;
     } | null;
+    seriesId: string;
+    chartDataAttrs: {
+        TYPE: string;
+        SERIES_ID: string;
+        INDEX: string;
+        DRAGGABLE: string;
+    };
 }
 /**
  * Main context value for the Chart system.
@@ -30,6 +38,7 @@ export interface RenderFrame<T = unknown> {
  */
 export interface ContextValue<T = unknown> {
     chartStore: Store;
+    engine: Engine<T>;
     config: Config;
     isMobile: boolean;
     colorPalette: string[];