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

package/dist/Radial/RadialTooltip.js

@@ -0,0 +1,284 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialTooltip.tsx
+ * @output Hover tooltip for radial charts (pie/donut/spider)
+ * @position Child of RadialChart; reads geometry from radial context
+ *
+ * Uses the Astryx Layer system for top-layer rendering.
+ * Hit-tests pointer position against slices (pie/donut) or axis proximity (spider).
+ * Portals the popover div outside the SVG into the chart container.
+ */
+
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useLayer } from '@astryxdesign/core/Layer';
+import { useRadial } from "./RadialContext.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Tooltip for radial charts. Detects which slice the pointer is over
+ * using polar coordinate math and renders a tooltip in the top layer.
+ *
+ * @example
+ * ```tsx
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
+ *   <RadialSlice colors={colors} />
+ *   <RadialTooltip />
+ * </RadialChart>
+ * ```
+ */
+export function RadialTooltip({
+  render,
+  highlight = true,
+  highlightOffset = 6
+}) {
+  const {
+    cx,
+    cy,
+    radius,
+    innerRadius,
+    slices,
+    mode,
+    data,
+    axes,
+    angleByAxis,
+    axisDomains
+  } = useRadial();
+  const [hoverState, setHoverState] = useState(null);
+  const [tooltipCoords, setTooltipCoords] = useState({
+    x: 0,
+    y: 0
+  });
+  const svgRef = useRef(null);
+  const portalRef = useRef(null);
+  const active = useRef(false);
+  const layer = useLayer({
+    mode: 'fixed'
+  });
+
+  // Resolve SVG + portal target from the <g> mount
+  const gRef = useCallback(el => {
+    if (el) {
+      svgRef.current = el.ownerSVGElement;
+      portalRef.current = el.ownerSVGElement?.parentElement ?? null;
+    }
+  }, []);
+  const hitTestPie = useCallback((localX, localY) => {
+    if (!slices || slices.length === 0) {
+      return null;
+    }
+    const dx = localX - cx;
+    const dy = localY - cy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist > radius || dist < innerRadius) {
+      return null;
+    }
+    let angle = Math.atan2(dy, dx);
+    if (angle < -Math.PI / 2) {
+      angle += 2 * Math.PI;
+    }
+    for (let i = 0; i < slices.length; i++) {
+      const slice = slices[i];
+      if (angle >= slice.startAngle && angle <= slice.endAngle) {
+        return {
+          label: slice.key,
+          value: slice.value,
+          percentage: slice.percentage,
+          index: i
+        };
+      }
+    }
+    return null;
+  }, [slices, cx, cy, radius, innerRadius]);
+  const hitTestSpider = useCallback((localX, localY) => {
+    if (!axes || !angleByAxis || !axisDomains) {
+      return null;
+    }
+    const dx = localX - cx;
+    const dy = localY - cy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist > radius + 20) {
+      return null;
+    }
+    const angle = Math.atan2(dy, dx);
+    let nearestAxis = axes[0];
+    let minAngleDist = Infinity;
+    for (const [key, axisAngle] of angleByAxis) {
+      let diff = Math.abs(angle - axisAngle);
+      if (diff > Math.PI) {
+        diff = 2 * Math.PI - diff;
+      }
+      if (diff < minAngleDist) {
+        minAngleDist = diff;
+        nearestAxis = key;
+      }
+    }
+    if (minAngleDist > Math.PI / axes.length) {
+      return null;
+    }
+    let bestIdx = 0;
+    let bestVal = 0;
+    for (let i = 0; i < data.length; i++) {
+      const v = data[i][nearestAxis];
+      if (typeof v === 'number' && v > bestVal) {
+        bestVal = v;
+        bestIdx = i;
+      }
+    }
+    return {
+      label: nearestAxis,
+      value: bestVal,
+      index: bestIdx
+    };
+  }, [axes, angleByAxis, axisDomains, cx, cy, radius, data]);
+  const updateTooltip = useCallback(e => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const ctm = svg.getScreenCTM()?.inverse();
+    if (!ctm) {
+      return;
+    }
+    const local = pt.matrixTransform(ctm);
+    const hit = mode === 'pie' ? hitTestPie(local.x, local.y) : hitTestSpider(local.x, local.y);
+    if (hit) {
+      setHoverState(hit);
+      setTooltipCoords({
+        x: e.clientX + 12,
+        y: e.clientY - 8
+      });
+      layer.show();
+    } else {
+      setHoverState(null);
+      layer.hide();
+    }
+  }, [mode, hitTestPie, hitTestSpider, layer]);
+
+  // Touch: tap to show, drag to scrub
+  const handlePointerDown = useCallback(e => {
+    if (e.pointerType !== 'mouse') {
+      e.preventDefault();
+      active.current = true;
+      updateTooltip(e);
+    }
+  }, [updateTooltip]);
+
+  // Mouse: hover. Touch: drag (only if active).
+  const handlePointerMove = useCallback(e => {
+    if (e.pointerType !== 'mouse' && !active.current) {
+      return;
+    }
+    updateTooltip(e);
+  }, [updateTooltip]);
+
+  // Touch: lift to dismiss
+  const handlePointerUp = useCallback(() => {
+    if (active.current) {
+      active.current = false;
+      setHoverState(null);
+      layer.hide();
+    }
+  }, [layer]);
+  const handlePointerLeave = useCallback(() => {
+    if (!active.current) {
+      setHoverState(null);
+      layer.hide();
+    }
+  }, [layer]);
+  const defaultRender = d => /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      fontSize: 12
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontWeight: 600
+      },
+      children: d.label
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          color: 'var(--color-text-secondary)'
+        },
+        children: "Value:"
+      }), ' ', /*#__PURE__*/_jsx("span", {
+        style: {
+          fontWeight: 500
+        },
+        children: d.value.toLocaleString()
+      })]
+    }), d.percentage != null && /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          color: 'var(--color-text-secondary)'
+        },
+        children: "Share:"
+      }), ' ', /*#__PURE__*/_jsxs("span", {
+        style: {
+          fontWeight: 500
+        },
+        children: [Math.round(d.percentage * 100), "%"]
+      })]
+    })]
+  });
+  const highlightSlice = highlight && hoverState && mode === 'pie' && slices?.[hoverState.index];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("g", {
+      ref: gRef,
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: cx,
+        cy: cy,
+        r: radius + 10,
+        fill: "transparent",
+        style: {
+          touchAction: 'none'
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        onPointerLeave: handlePointerLeave
+      }), highlightSlice && /*#__PURE__*/_jsx("g", {
+        transform: (() => {
+          const midAngle = (highlightSlice.startAngle + highlightSlice.endAngle) / 2;
+          const tx = Math.cos(midAngle) * highlightOffset;
+          const ty = Math.sin(midAngle) * highlightOffset;
+          return `translate(${tx},${ty})`;
+        })(),
+        pointerEvents: "none",
+        opacity: 0.3,
+        children: /*#__PURE__*/_jsx("circle", {
+          cx: cx,
+          cy: cy,
+          r: radius,
+          fill: "none",
+          stroke: "var(--color-border-emphasized)",
+          strokeWidth: 2
+        })
+      })]
+    }), portalRef.current && /*#__PURE__*/createPortal(layer.render(hoverState ? /*#__PURE__*/_jsx("div", {
+      style: {
+        background: 'var(--color-background-popover)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 8,
+        padding: '8px 12px',
+        boxShadow: 'var(--shadow-med)',
+        whiteSpace: 'nowrap',
+        width: 'fit-content',
+        pointerEvents: 'none'
+      },
+      children: render ? render(hoverState) : defaultRender(hoverState)
+    }) : null, {
+      x: tooltipCoords.x,
+      y: tooltipCoords.y
+    }), portalRef.current)]
+  });
+}

package/dist/Radial/index.d.ts

@@ -0,0 +1,9 @@
+export { RadialChart, type RadialChartProps } from './RadialChart';
+export { RadialGrid, type RadialGridProps } from './RadialGrid';
+export { RadialArea, type RadialAreaProps } from './RadialArea';
+export { RadialAxis, type RadialAxisProps } from './RadialAxis';
+export { RadialSlice, type RadialSliceProps } from './RadialSlice';
+export { RadialTooltip, type RadialTooltipProps, type RadialTooltipDatum, } from './RadialTooltip';
+export { useRadial } from './RadialContext';
+export type { RadialContext, RadialMode } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Radial/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Radial/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC"}

package/dist/Radial/index.js

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { RadialChart } from "./RadialChart.js";
+export { RadialGrid } from "./RadialGrid.js";
+export { RadialArea } from "./RadialArea.js";
+export { RadialAxis } from "./RadialAxis.js";
+export { RadialSlice } from "./RadialSlice.js";
+export { RadialTooltip } from "./RadialTooltip.js";
+export { useRadial } from "./RadialContext.js";

package/dist/Radial/types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @file types.ts
+ * @output Radial chart types and context
+ * @position Foundation types consumed by all radial sub-components
+ */
+/** Radial chart mode */
+export type RadialMode = 'spider' | 'pie';
+/** Radial context provided by RadialChart to children */
+export interface RadialContext {
+    /** Center x pixel position */
+    cx: number;
+    /** Center y pixel position */
+    cy: number;
+    /** Outer radius in pixels */
+    radius: number;
+    /** Inner radius in pixels (>0 for donut) */
+    innerRadius: number;
+    /** The full dataset */
+    data: Record<string, unknown>[];
+    /** Chart mode */
+    mode: RadialMode;
+    /** Axis keys for spider charts */
+    axes?: string[];
+    /** Angle for each axis in radians */
+    angleByAxis?: Map<string, number>;
+    /** Radius scale: maps a normalized value (0-1) to pixel distance from center */
+    radiusScale?: (t: number) => number;
+    /** Domain [min, max] per axis for spider normalization */
+    axisDomains?: Map<string, [number, number]>;
+    /** Computed slices with start/end angles */
+    slices?: Array<{
+        key: string;
+        value: number;
+        startAngle: number;
+        endAngle: number;
+        percentage: number;
+    }>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Radial/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Radial/types.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,wBAAwB;AACxB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1C,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,iBAAiB;IACjB,IAAI,EAAE,UAAU,CAAC;IAGjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,qCAAqC;IACrC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAG5C,4CAA4C;IAC5C,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ"}

package/dist/Radial/types.js

@@ -0,0 +1 @@
+export {};

package/dist/SVGIcon/SVGIcon.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @file SVGIcon.tsx
+ * @input SVG path data with per-element roles, variation preset, size, color
+ * @output CSS-variable-driven SVG icon with role-aware rendering and mask-based gaps
+ * @position Core implementation for the lab SVG icon system
+ *
+ * Two key concepts beyond basic CSS-var-driven icons:
+ *
+ * 1. Path roles — each element is either "fill" (closed shapes that switch between
+ *    stroke and fill across variations) or "stroke" (lines that always stay stroked).
+ *
+ * 2. Mask-based gaps — in bold/filled mode, overlapping fill-role shapes get
+ *    auto-generated SVG masks. Secondary fill shapes are knocked out of primary
+ *    shapes with a configurable gap and corner rounding, producing clean negative
+ *    space on any background.
+ */
+import { type SVGProps } from 'react';
+export type SVGIconVariation = 'linear' | 'bold' | 'twotone' | 'bulk' | 'broken';
+export type SVGIconSize = 'xsm' | 'sm' | 'md' | 'lg';
+export type SVGIconColor = 'primary' | 'secondary' | 'disabled' | 'accent' | 'positive' | 'negative' | 'warning' | 'inherit';
+/**
+ * Role determines how an element behaves across variations.
+ * - "fill": closed shapes — stroked in linear, filled in bold
+ * - "stroke": lines/detail strokes — always rendered as strokes
+ */
+export type IconShapeRole = 'fill' | 'stroke';
+/** Shape element within an icon layer */
+export interface IconShape {
+    /** SVG element type */
+    type: 'path' | 'circle' | 'rect' | 'line' | 'polyline' | 'polygon';
+    /** SVG attributes for this shape (d, cx, cy, r, points, x1, y1, etc.) */
+    attrs: Record<string, string>;
+    /**
+     * How this element behaves across variations.
+     * @default 'fill'
+     */
+    role?: IconShapeRole;
+}
+/** Definition of an SVG icon's geometry */
+export interface SVGIconDef {
+    /** Display name */
+    name: string;
+    /** ViewBox dimensions (default: "0 0 24 24") */
+    viewBox?: string;
+    /** Primary layer shapes (main outlines) */
+    primary: IconShape[];
+    /** Secondary layer shapes (detail elements) */
+    secondary?: IconShape[];
+}
+export interface SVGIconProps extends Omit<SVGProps<SVGSVGElement>, 'color'> {
+    /** The icon definition containing path data */
+    icon: SVGIconDef;
+    /**
+     * Visual variation preset.
+     * @default 'linear'
+     */
+    variation?: SVGIconVariation;
+    /**
+     * Icon size with optical stroke compensation.
+     * @default 'md'
+     */
+    size?: SVGIconSize;
+    /**
+     * Semantic color.
+     * @default 'primary'
+     */
+    color?: SVGIconColor;
+    /** Override stroke width (bypasses optical compensation). */
+    strokeWidth?: number;
+}
+/**
+ * CSS-variable-driven SVG icon with role-aware rendering.
+ *
+ * Each shape element has a role ("fill" or "stroke") that determines how it
+ * behaves across variations. In bold mode, overlapping fill-role shapes get
+ * auto-generated SVG masks for clean gap subtraction.
+ *
+ * @example
+ * ```
+ * <SVGIcon icon={bellIcon} variation="twotone" size="md" color="accent" />
+ * ```
+ */
+export declare function SVGIcon({ icon, variation, size, color, strokeWidth, style, ...props }: SVGIconProps): import("react").JSX.Element;
+export declare namespace SVGIcon {
+    var displayName: string;
+}
+//# sourceMappingURL=SVGIcon.d.ts.map

package/dist/SVGIcon/SVGIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGIcon.d.ts","sourceRoot":"","sources":["../../src/SVGIcon/SVGIcon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAqB,KAAK,QAAQ,EAAQ,MAAM,OAAO,CAAC;AAY/D,MAAM,MAAM,gBAAgB,GACxB,QAAQ,GACR,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AACb,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,yCAAyC;AACzC,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACnE,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,2CAA2C;AAC3C,MAAM,WAAW,UAAU;IACzB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAC1E,+CAA+C;IAC/C,IAAI,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkND;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAoB,EACpB,IAAW,EACX,KAAiB,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,+BAuEd;yBA/Ee,OAAO"}