@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Chart/ChartZoom.d.ts

@@ -0,0 +1,23 @@
+/** Toolbar position relative to the chart */
+export type ZoomToolbarPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface ChartZoomProps {
+    onXDomainChange?: (domain: [number, number]) => void;
+    onYDomainChange?: (domain: [number, number]) => void;
+    /**
+     * Zoom speed factor per scroll tick. Higher = faster zoom.
+     * @default 0.1
+     */
+    zoomSpeed?: number;
+    /** Only zoom/pan the x-axis */
+    xOnly?: boolean;
+    /** Only zoom/pan the y-axis */
+    yOnly?: boolean;
+    /**
+     * Show the zoom/pan toolbar.
+     * Pass `false` to hide, or a position string to show at that corner.
+     * @default 'top-right'
+     */
+    toolbar?: false | ZoomToolbarPosition;
+}
+export declare function ChartZoom({ onXDomainChange, onYDomainChange, zoomSpeed, xOnly, yOnly, toolbar, }: ChartZoomProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartZoom.d.ts.map

package/dist/Chart/ChartZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartZoom.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartZoom.tsx"],"names":[],"mappings":"AAmBA,6CAA6C;AAC7C,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,WAAW,cAAc;IAC7B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,mBAAmB,CAAC;CACvC;AAiDD,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,eAAe,EACf,SAAe,EACf,KAAa,EACb,KAAa,EACb,OAAqB,GACtB,EAAE,cAAc,+BAwShB"}

package/dist/Chart/ChartZoom.js

@@ -0,0 +1,314 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartZoom.tsx
+ * @output Scroll/pinch zoom + drag pan with optional toolbar.
+ * @position Child of Chart; modifies x/yDomain via callbacks
+ *
+ * Zoom is aspect-ratio-normalized: both axes scale by the same visual
+ * factor regardless of their domain ranges. Reset button restores
+ * the initial domains captured on mount.
+ */
+
+import { useCallback, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { useChart } from "./ChartContext.js";
+import { isBandScale } from "./utils.js";
+
+/** Toolbar position relative to the chart */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Chart toolbar icons (16x16 SVG)
+function ZoomInIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M8 3v10M3 8h10"
+    })
+  });
+}
+function ZoomOutIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M3 8h10"
+    })
+  });
+}
+function ResetIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M2 8a6 6 0 1 1 1.5 4M2 12V8h4"
+    })
+  });
+}
+export function ChartZoom({
+  onXDomainChange,
+  onYDomainChange,
+  zoomSpeed = 0.1,
+  xOnly = false,
+  yOnly = false,
+  toolbar = 'top-right'
+}) {
+  const {
+    width,
+    height,
+    xScale,
+    yScale,
+    svgRef
+  } = useChart();
+
+  // Capture initial domains on mount for reset
+  const initialDomainsRef = useRef(null);
+  useEffect(() => {
+    if (initialDomainsRef.current) {
+      return;
+    } // only capture once
+    const xDomain = isBandScale(xScale) ? null : xScale.domain();
+    const yDomain = yScale.domain();
+    initialDomainsRef.current = {
+      x: xDomain,
+      y: yDomain
+    };
+  }, [xScale, yScale]);
+  const dragRef = useRef(null);
+  const pointersRef = useRef(new Map());
+  const pinchRef = useRef(null);
+  const getXDomain = useCallback(() => isBandScale(xScale) ? [0, 0] : xScale.domain(), [xScale]);
+
+  // Zoom a single axis around a pivot point by a factor.
+  // factor > 1 = zoom out, factor < 1 = zoom in.
+  const zoomAxis = useCallback((domain, factor, pivot) => {
+    const [lo, hi] = domain;
+    const range = hi - lo;
+    const leftRatio = (pivot - lo) / range;
+    const newRange = range * factor;
+    return [pivot - newRange * leftRatio, pivot + newRange * (1 - leftRatio)];
+  }, []);
+  const zoomBy = useCallback((factor, pivotX, pivotY) => {
+    if (!yOnly && !isBandScale(xScale)) {
+      const linear = xScale;
+      const [xMin, xMax] = linear.domain();
+      const xPivot = pivotX != null ? linear.invert(pivotX) : (xMin + xMax) / 2;
+      onXDomainChange?.(zoomAxis([xMin, xMax], factor, xPivot));
+    }
+    if (!xOnly) {
+      const [yMin, yMax] = yScale.domain();
+      const yPivot = pivotY != null ? yScale.invert(pivotY) : (yMin + yMax) / 2;
+      onYDomainChange?.(zoomAxis([yMin, yMax], factor, yPivot));
+    }
+  }, [xScale, yScale, onXDomainChange, onYDomainChange, xOnly, yOnly, zoomAxis]);
+  const handleWheel = useCallback(e => {
+    e.preventDefault();
+    const svg = e.currentTarget.ownerSVGElement;
+    if (!svg) {
+      return;
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const local = pt.matrixTransform(e.currentTarget.getScreenCTM()?.inverse());
+
+    // Clamp delta to prevent trackpad acceleration from blowing out the domain.
+    // A single tick should zoom by at most zoomSpeed (10% default).
+    const clampedDelta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), 50);
+    const rawFactor = 1 + clampedDelta / 50 * zoomSpeed;
+
+    // Apply per-axis, normalizing by each axis's pixel-to-domain ratio
+    // so both axes zoom at the same visual rate.
+    if (!yOnly && !isBandScale(xScale)) {
+      const linear = xScale;
+      const [xMin, xMax] = linear.domain();
+      const xPivot = linear.invert(local.x);
+      onXDomainChange?.(zoomAxis([xMin, xMax], rawFactor, xPivot));
+    }
+    if (!xOnly) {
+      const [yMin, yMax] = yScale.domain();
+      const yPivot = yScale.invert(local.y);
+      onYDomainChange?.(zoomAxis([yMin, yMax], rawFactor, yPivot));
+    }
+  }, [zoomSpeed, xScale, yScale, onXDomainChange, onYDomainChange, xOnly, yOnly, zoomAxis]);
+  const onPointerDown = useCallback(e => {
+    e.target.setPointerCapture(e.pointerId);
+    e.preventDefault(); // prevent selection on touch
+    pointersRef.current.set(e.pointerId, {
+      x: e.clientX,
+      y: e.clientY
+    });
+    if (pointersRef.current.size === 2) {
+      const pts = [...pointersRef.current.values()];
+      const dist = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
+      pinchRef.current = {
+        dist,
+        xDomain: getXDomain(),
+        yDomain: yScale.domain()
+      };
+      dragRef.current = null;
+    } else if (pointersRef.current.size === 1) {
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        xDomain: getXDomain(),
+        yDomain: yScale.domain()
+      };
+    }
+  }, [getXDomain, yScale]);
+  const onPointerMove = useCallback(e => {
+    pointersRef.current.set(e.pointerId, {
+      x: e.clientX,
+      y: e.clientY
+    });
+    if (pointersRef.current.size === 2 && pinchRef.current) {
+      const pts = [...pointersRef.current.values()];
+      const dist = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
+      const ratio = pinchRef.current.dist / dist;
+      if (!yOnly && !isBandScale(xScale)) {
+        const [xMin, xMax] = pinchRef.current.xDomain;
+        const mid = (xMin + xMax) / 2;
+        const half = (xMax - xMin) / 2 * ratio;
+        onXDomainChange?.([mid - half, mid + half]);
+      }
+      if (!xOnly) {
+        const [yMin, yMax] = pinchRef.current.yDomain;
+        const mid = (yMin + yMax) / 2;
+        const half = (yMax - yMin) / 2 * ratio;
+        onYDomainChange?.([mid - half, mid + half]);
+      }
+    } else if (dragRef.current) {
+      const dx = e.clientX - dragRef.current.startX;
+      const dy = e.clientY - dragRef.current.startY;
+      if (!yOnly && !isBandScale(xScale)) {
+        const [xMin, xMax] = dragRef.current.xDomain;
+        const xShift = -(dx / width) * (xMax - xMin);
+        onXDomainChange?.([xMin + xShift, xMax + xShift]);
+      }
+      if (!xOnly) {
+        const [yMin, yMax] = dragRef.current.yDomain;
+        const yShift = dy / height * (yMax - yMin);
+        onYDomainChange?.([yMin + yShift, yMax + yShift]);
+      }
+    }
+  }, [xScale, width, height, onXDomainChange, onYDomainChange, xOnly, yOnly]);
+  const onPointerUp = useCallback(e => {
+    pointersRef.current.delete(e.pointerId);
+    if (pointersRef.current.size < 2) {
+      pinchRef.current = null;
+    }
+    if (pointersRef.current.size === 0) {
+      dragRef.current = null;
+    }
+  }, []);
+  const handleReset = useCallback(() => {
+    const init = initialDomainsRef.current;
+    if (!init) {
+      return;
+    }
+    if (init.x) {
+      onXDomainChange?.(init.x);
+    }
+    onYDomainChange?.(init.y);
+  }, [onXDomainChange, onYDomainChange]);
+
+  // Toolbar portal target
+  const portalTarget = svgRef.current?.parentElement;
+
+  // Toolbar position styles
+  const toolbarPositionStyle = pos => {
+    const base = {
+      position: 'absolute',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      zIndex: 1
+    };
+    switch (pos) {
+      case 'top-right':
+        return {
+          ...base,
+          top: 8,
+          right: 8
+        };
+      case 'top-left':
+        return {
+          ...base,
+          top: 8,
+          left: 8
+        };
+      case 'bottom-right':
+        return {
+          ...base,
+          bottom: 8,
+          right: 8
+        };
+      case 'bottom-left':
+        return {
+          ...base,
+          bottom: 8,
+          left: 8
+        };
+    }
+  };
+  const zoomRectStyle = {
+    cursor: 'grab',
+    touchAction: 'none',
+    userSelect: 'none'
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("g", {
+      children: /*#__PURE__*/_jsx("rect", {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height,
+        fill: "transparent",
+        style: zoomRectStyle,
+        onWheel: handleWheel,
+        onPointerDown: onPointerDown,
+        onPointerMove: onPointerMove,
+        onPointerUp: onPointerUp,
+        onPointerCancel: onPointerUp
+      })
+    }), toolbar && portalTarget && /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs("div", {
+      style: toolbarPositionStyle(toolbar),
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        label: "Zoom in",
+        icon: /*#__PURE__*/_jsx(ZoomInIcon, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: () => zoomBy(1 / (1 + zoomSpeed))
+      }), /*#__PURE__*/_jsx(IconButton, {
+        label: "Zoom out",
+        icon: /*#__PURE__*/_jsx(ZoomOutIcon, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: () => zoomBy(1 + zoomSpeed)
+      }), /*#__PURE__*/_jsx(IconButton, {
+        label: "Reset zoom",
+        icon: /*#__PURE__*/_jsx(ResetIcon, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: handleReset
+      })]
+    }), portalTarget)]
+  });
+}

package/dist/Chart/formatters.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @file formatters.ts
+ * @output Built-in tick format utilities for common data types
+ * @position Utility; consumed by ChartAxis via tickFormat prop
+ */
+/**
+ * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
+ */
+export declare function compactNumber(value: unknown): string;
+/**
+ * Currency formatter factory. Returns a tick format function.
+ *
+ * @example
+ * ```
+ * <ChartAxis tickFormat={currency()} />       // $1.5K
+ * <ChartAxis tickFormat={currency('€')} />    // €1.5K
+ * <ChartAxis tickFormat={currency('¥')} />    // ¥1.5K
+ * ```
+ */
+export declare function currency(symbol?: string): (value: unknown) => string;
+/**
+ * Percent formatter (e.g. 0.45 → "45%", 1.2 → "120%")
+ */
+export declare function percent(value: unknown): string;
+/**
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ */
+export declare function shortDate(value: unknown): string;
+/**
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ */
+export declare function monthYear(value: unknown): string;
+//# sourceMappingURL=formatters.d.ts.map

package/dist/Chart/formatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,MAAM,SAAM,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiBjE;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAMhD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAMhD"}

package/dist/Chart/formatters.js

@@ -0,0 +1,101 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file formatters.ts
+ * @output Built-in tick format utilities for common data types
+ * @position Utility; consumed by ChartAxis via tickFormat prop
+ */
+
+/**
+ * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
+ */
+export function compactNumber(value) {
+  const n = Number(value);
+  if (isNaN(n)) {
+    return String(value);
+  }
+  if (Math.abs(n) >= 1_000_000_000) {
+    return `${strip(n / 1_000_000_000)}B`;
+  }
+  if (Math.abs(n) >= 1_000_000) {
+    return `${strip(n / 1_000_000)}M`;
+  }
+  if (Math.abs(n) >= 1_000) {
+    return `${strip(n / 1_000)}K`;
+  }
+  return n.toString();
+}
+
+/**
+ * Currency formatter factory. Returns a tick format function.
+ *
+ * @example
+ * ```
+ * <ChartAxis tickFormat={currency()} />       // $1.5K
+ * <ChartAxis tickFormat={currency('€')} />    // €1.5K
+ * <ChartAxis tickFormat={currency('¥')} />    // ¥1.5K
+ * ```
+ */
+export function currency(symbol = '$') {
+  return value => {
+    const n = Number(value);
+    if (isNaN(n)) {
+      return String(value);
+    }
+    if (Math.abs(n) >= 1_000_000_000) {
+      return `${symbol}${strip(n / 1_000_000_000)}B`;
+    }
+    if (Math.abs(n) >= 1_000_000) {
+      return `${symbol}${strip(n / 1_000_000)}M`;
+    }
+    if (Math.abs(n) >= 1_000) {
+      return `${symbol}${strip(n / 1_000)}K`;
+    }
+    return `${symbol}${n.toLocaleString()}`;
+  };
+}
+
+/** Remove trailing .0 from fixed-point strings */
+function strip(n) {
+  const s = n.toFixed(1);
+  return s.endsWith('.0') ? s.slice(0, -2) : s;
+}
+
+/**
+ * Percent formatter (e.g. 0.45 → "45%", 1.2 → "120%")
+ */
+export function percent(value) {
+  const n = Number(value);
+  if (isNaN(n)) {
+    return String(value);
+  }
+  return `${Math.round(n * 100)}%`;
+}
+
+/**
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ */
+export function shortDate(value) {
+  const d = value instanceof Date ? value : new Date(Number(value));
+  if (isNaN(d.getTime())) {
+    return String(value);
+  }
+  return d.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
+/**
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ */
+export function monthYear(value) {
+  const d = value instanceof Date ? value : new Date(Number(value));
+  if (isNaN(d.getTime())) {
+    return String(value);
+  }
+  return d.toLocaleDateString(undefined, {
+    month: 'short',
+    year: 'numeric'
+  });
+}

package/dist/Chart/getChartColors.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @file getChartColors.ts
+ * @output Pure function to resolve chart colors from a theme — no React required
+ * @position Foundation utility; consumed by useChartColors and non-React contexts
+ *
+ * Takes a token resolver function (or a defined theme + mode) and returns
+ * the full chart colors API. The useChartColors hook wraps this.
+ */
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+/** Hue names available in the sequential ramps */
+export type SequentialHue = 'blue' | 'shamrock' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' | 'gray';
+/** The chart colors API returned by both getChartColors and useChartColors */
+export interface ChartColorsAPI {
+    categorical(n: number): string[];
+    sequential: Record<SequentialHue, (n: number) => string[]>;
+    diverging: {
+        positiveNegative(n: number): string[];
+        coldHot(n: number): string[];
+        custom(neg: SequentialHue, pos: SequentialHue, n: number, midpoint?: string): string[];
+    };
+    semantic: {
+        positive: string;
+        negative: string;
+        warning: string;
+        neutral: string;
+    };
+    /** Structural colors for chart chrome — axes, grid, ticks, labels */
+    structural: {
+        axis: string;
+        grid: string;
+        tick: string;
+        label: string;
+    };
+    alpha(hex: string, opacity: number): string;
+}
+/** A function that resolves a token name to its current value */
+export type TokenResolver = (name: string) => string;
+/**
+ * Build chart colors from a token resolver function.
+ * This is the lowest-level API — pass any function that maps token names to values.
+ */
+export declare function getChartColorsFromResolver(resolve: TokenResolver): ChartColorsAPI;
+/**
+ * Build chart colors from a defined theme and color mode.
+ *
+ * Use this in non-React contexts — WebGL setup, SSR, tests, Node scripts.
+ *
+ * @example
+ * ```
+ * import { neutralTheme } from '@astryxdesign/theme-neutral';
+ * const colors = getChartColors(neutralTheme, 'light');
+ * colors.categorical(5)
+ * ```
+ */
+export declare function getChartColors(theme: DefinedTheme, mode?: 'light' | 'dark'): ChartColorsAPI;
+//# sourceMappingURL=getChartColors.d.ts.map

package/dist/Chart/getChartColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getChartColors.d.ts","sourceRoot":"","sources":["../../src/Chart/getChartColors.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAM3D,kDAAkD;AAClD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,UAAU,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEX,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC;IAC3D,SAAS,EAAE;QACT,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACtC,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,MAAM,CACJ,GAAG,EAAE,aAAa,EAClB,GAAG,EAAE,aAAa,EAClB,CAAC,EAAE,MAAM,EACT,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,EAAE,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,qEAAqE;IACrE,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C;AAED,iEAAiE;AACjE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAgErD;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,aAAa,GACrB,cAAc,CA+EhB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,cAAc,CAsBhB"}

package/dist/Chart/getChartColors.js

@@ -0,0 +1,150 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file getChartColors.ts
+ * @output Pure function to resolve chart colors from a theme — no React required
+ * @position Foundation utility; consumed by useChartColors and non-React contexts
+ *
+ * Takes a token resolver function (or a defined theme + mode) and returns
+ * the full chart colors API. The useChartColors hook wraps this.
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Hue names available in the sequential ramps */
+
+/** The chart colors API returned by both getChartColors and useChartColors */
+
+/** A function that resolves a token name to its current value */
+
+// =============================================================================
+// Internals
+// =============================================================================
+
+const CATEGORICAL_TOKENS = ['--color-data-categorical-blue', '--color-data-categorical-orange', '--color-data-categorical-purple', '--color-data-categorical-green', '--color-data-categorical-pink', '--color-data-categorical-cyan', '--color-data-categorical-red', '--color-data-categorical-teal', '--color-data-categorical-brown', '--color-data-categorical-indigo'];
+const SEQUENTIAL_HUES = ['blue', 'shamrock', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow', 'gray'];
+function pickFromRamp(stops, n) {
+  if (n <= 0) {
+    return [];
+  }
+  if (n >= 5) {
+    return stops;
+  }
+  if (n === 1) {
+    return [stops[2]];
+  }
+  return Array.from({
+    length: n
+  }, (_, i) => stops[Math.round(i * 4 / (n - 1))]);
+}
+function hexAlpha(hex, opacity) {
+  const match = hex.match(/^#?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);
+  if (!match) {
+    return hex;
+  }
+  const r = parseInt(match[1], 16);
+  const g = parseInt(match[2], 16);
+  const b = parseInt(match[3], 16);
+  return `rgba(${r},${g},${b},${Math.max(0, Math.min(1, opacity))})`;
+}
+
+// =============================================================================
+// Public API
+// =============================================================================
+
+/**
+ * Build chart colors from a token resolver function.
+ * This is the lowest-level API — pass any function that maps token names to values.
+ */
+export function getChartColorsFromResolver(resolve) {
+  const categorical = CATEGORICAL_TOKENS.map(t => resolve(t));
+  const ramp = hue => [5, 4, 3, 2, 1].map(step => resolve(`--color-data-${hue}-${step}`));
+  const gray1 = resolve('--color-data-gray-1');
+  function buildDiverging(negHue, posHue, n, midpoint = gray1) {
+    if (n <= 0) {
+      return [];
+    }
+    if (n === 1) {
+      return [midpoint];
+    }
+    const neg = ramp(negHue);
+    const pos = ramp(posHue);
+    const half = Math.floor(n / 2);
+    const hasCenter = n % 2 === 1;
+    const negSide = pickFromRamp(neg, half);
+    const posSide = pickFromRamp(pos, half).reverse();
+    if (hasCenter) {
+      return [...negSide, midpoint, ...posSide];
+    }
+    return [...negSide, ...posSide];
+  }
+  return {
+    categorical(n) {
+      if (n <= 0) {
+        return [];
+      }
+      return categorical.slice(0, Math.min(n, categorical.length));
+    },
+    sequential: Object.fromEntries(SEQUENTIAL_HUES.map(hue => [hue, n => {
+      if (n <= 0) {
+        return [];
+      }
+      return pickFromRamp(ramp(hue), n);
+    }])),
+    diverging: {
+      positiveNegative: n => buildDiverging('shamrock', 'red', n),
+      coldHot: n => buildDiverging('blue', 'red', n),
+      custom: (neg, pos, n, mid) => buildDiverging(neg, pos, n, mid)
+    },
+    semantic: {
+      positive: resolve('--color-data-categorical-green'),
+      negative: resolve('--color-data-categorical-red'),
+      warning: resolve('--color-data-categorical-orange'),
+      neutral: resolve('--color-data-neutral')
+    },
+    structural: {
+      axis: resolve('--color-border-emphasized'),
+      grid: resolve('--color-border'),
+      tick: resolve('--color-border-emphasized'),
+      label: resolve('--color-text-secondary')
+    },
+    alpha: hexAlpha
+  };
+}
+
+/**
+ * Build chart colors from a defined theme and color mode.
+ *
+ * Use this in non-React contexts — WebGL setup, SSR, tests, Node scripts.
+ *
+ * @example
+ * ```
+ * import { neutralTheme } from '@astryxdesign/theme-neutral';
+ * const colors = getChartColors(neutralTheme, 'light');
+ * colors.categorical(5)
+ * ```
+ */
+export function getChartColors(theme, mode = 'light') {
+  // Build a resolver from the theme's token map
+  const resolve = name => {
+    // Check theme token overrides first, then fall back to defaults
+    const raw = theme.tokens?.[name] ?? '';
+    if (!raw) {
+      return '';
+    }
+    // Resolve light-dark() for the given mode
+    if (raw.startsWith('light-dark(') && raw.endsWith(')')) {
+      const inner = raw.slice(11, -1);
+      const commaIdx = inner.indexOf(',');
+      if (commaIdx !== -1) {
+        const light = inner.slice(0, commaIdx).trim();
+        const dark = inner.slice(commaIdx + 1).trim();
+        return mode === 'light' ? light : dark;
+      }
+    }
+    return raw;
+  };
+  return getChartColorsFromResolver(resolve);
+}