@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/line/ReferenceLine.js

@@ -3,16 +3,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { useCartesianChartContext } from '../ChartProvider';
-import { ChartText } from '../text';
 import { getPointOnScale } from '../utils';
+import { DefaultReferenceLineLabel } from './DefaultReferenceLineLabel';
 import { DottedLine } from './DottedLine';
-
-/**
- * Configuration for ReferenceLine label rendering using ChartText.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ReferenceLine = /*#__PURE__*/memo(_ref => {
   let {
@@ -23,8 +19,16 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     labelPosition = dataY !== undefined ? 'right' : 'top',
     testID,
     LineComponent = DottedLine,
+    LabelComponent = DefaultReferenceLineLabel,
+    labelElevated,
+    labelFont,
+    labelDx,
+    labelDy,
+    labelHorizontalAlignment,
+    labelVerticalAlignment,
+    labelBoundsInset,
     stroke = 'var(--color-bgLine)',
-    labelProps,
+    opacity,
     className,
     style,
     classNames,
@@ -36,36 +40,6 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     drawingArea
   } = useCartesianChartContext();
 
-  // For horizontal lines (dataY defined): default to verticalAlignment: 'middle'
-  // For vertical lines (dataX defined): default to horizontalAlignment: 'center'
-  const isHorizontal = dataY !== undefined;
-
-  // Merge default props with user provided props, including text-specific styles and classNames
-  const finalLabelProps = useMemo(() => _objectSpread(_objectSpread(_objectSpread({
-    borderRadius: 4,
-    color: 'var(--color-fgMuted)',
-    elevation: 0,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 12,
-      right: 12
-    }
-  }, isHorizontal ? {
-    verticalAlignment: 'middle'
-  } : {
-    horizontalAlignment: 'center'
-  }), labelProps), {}, {
-    // Merge classNames for text
-    classNames: _objectSpread(_objectSpread({}, labelProps === null || labelProps === void 0 ? void 0 : labelProps.classNames), (classNames === null || classNames === void 0 ? void 0 : classNames.label) && {
-      text: classNames.label
-    }),
-    // Merge styles for text
-    styles: _objectSpread(_objectSpread({}, labelProps === null || labelProps === void 0 ? void 0 : labelProps.styles), (styles === null || styles === void 0 ? void 0 : styles.label) && {
-      text: styles.label
-    })
-  }), [isHorizontal, labelProps, classNames === null || classNames === void 0 ? void 0 : classNames.label, styles === null || styles === void 0 ? void 0 : styles.label]);
-
   // Combine root classNames
   const rootClassName = cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root);
   // Combine root styles
@@ -95,13 +69,27 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
       style: rootStyle,
       children: [/*#__PURE__*/_jsx(LineComponent, {
         animate: false,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.line,
         d: "M".concat(drawingArea.x, ",").concat(yPixel, " L").concat(drawingArea.x + drawingArea.width, ",").concat(yPixel),
-        stroke: stroke
-      }), label && /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({}, finalLabelProps), {}, {
+        stroke: stroke,
+        strokeOpacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.line
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        boundsInset: labelBoundsInset,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+        dx: labelDx,
+        dy: labelDy,
+        elevated: labelElevated,
+        font: labelFont,
+        horizontalAlignment: labelHorizontalAlignment,
+        opacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.label,
+        testID: testID,
+        verticalAlignment: labelVerticalAlignment !== null && labelVerticalAlignment !== void 0 ? labelVerticalAlignment : 'middle',
         x: labelX,
         y: yPixel,
         children: label
-      }))]
+      })]
     });
   }
 
@@ -129,13 +117,27 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
       style: rootStyle,
       children: [/*#__PURE__*/_jsx(LineComponent, {
         animate: false,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.line,
         d: "M".concat(xPixel, ",").concat(drawingArea.y, " L").concat(xPixel, ",").concat(drawingArea.y + drawingArea.height),
-        stroke: stroke
-      }), label && /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({}, finalLabelProps), {}, {
+        stroke: stroke,
+        strokeOpacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.line
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        boundsInset: labelBoundsInset,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+        dx: labelDx,
+        dy: labelDy,
+        elevated: labelElevated,
+        font: labelFont,
+        horizontalAlignment: labelHorizontalAlignment !== null && labelHorizontalAlignment !== void 0 ? labelHorizontalAlignment : 'center',
+        opacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.label,
+        testID: testID,
+        verticalAlignment: labelVerticalAlignment,
         x: xPixel,
         y: labelY,
         children: label
-      }))]
+      })]
     });
   }
   return;

package/esm/chart/line/SolidLine.js

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth"];
+const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "animate", "transitions", "transition", "d"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,29 +6,53 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
+import { memo, useId } from 'react';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A customizable solid line component which uses path element.
+ * A customizable solid line component.
+ * Supports gradient for gradient effects and smooth data transitions.
  */
 export const SolidLine = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       fill = 'none',
-      stroke = 'var(--color-bgLine)',
+      stroke = 'var(--color-fgPrimary)',
       strokeLinecap = 'round',
       strokeLinejoin = 'round',
       strokeOpacity = 1,
-      strokeWidth = 2
+      strokeWidth = 2,
+      gradient,
+      yAxisId,
+      animate,
+      transitions,
+      transition,
+      d
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Path, _objectSpread({
-    clipOffset: strokeWidth,
-    fill: fill,
-    stroke: stroke,
-    strokeLinecap: strokeLinecap,
-    strokeLinejoin: strokeLinejoin,
-    strokeOpacity: strokeOpacity,
-    strokeWidth: strokeWidth
-  }, props));
+  const gradientId = useId();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [gradient && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: gradientId,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        yAxisId: yAxisId
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      clipOffset: strokeWidth,
+      d: d,
+      fill: fill,
+      stroke: gradient ? "url(#".concat(gradientId, ")") : stroke,
+      strokeLinecap: strokeLinecap,
+      strokeLinejoin: strokeLinejoin,
+      strokeOpacity: strokeOpacity,
+      strokeWidth: strokeWidth,
+      transition: transition,
+      transitions: transitions
+    }, props))]
+  });
 });

package/esm/chart/line/index.js

@@ -1,6 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './DefaultReferenceLineLabel';
 export * from './DottedLine';
-export * from './GradientLine';
 export * from './Line';
 export * from './LineChart';
 export * from './ReferenceLine';

package/esm/chart/{line/GradientLine.js → point/DefaultPointLabel.js}

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "startColor", "endColor", "strokeOpacity", "startOpacity", "endOpacity", "strokeLinecap", "strokeLinejoin", "strokeWidth"];
+const _excluded = ["x", "y", "position", "offset", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,53 +6,39 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useId } from 'react';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ChartText } from '../text';
+import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A gradient line component which uses path element.
+ * DefaultPointLabel is the default label component for point labels.
+ * It renders text at the specified position relative to the point.
  */
-export const GradientLine = /*#__PURE__*/memo(_ref => {
+export const DefaultPointLabel = /*#__PURE__*/memo(_ref => {
   let {
-      fill = 'none',
-      stroke = 'var(--color-bgLine)',
-      startColor,
-      endColor,
-      strokeOpacity = 1,
-      startOpacity = strokeOpacity,
-      endOpacity = strokeOpacity,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
-      strokeWidth = 2
+      x,
+      y,
+      position = 'center',
+      offset,
+      children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const patternId = useId();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("defs", {
-      children: /*#__PURE__*/_jsxs("linearGradient", {
-        id: patternId,
-        x1: "0%",
-        x2: "0%",
-        y1: "0%",
-        y2: "100%",
-        children: [/*#__PURE__*/_jsx("stop", {
-          offset: "0%",
-          stopColor: startColor !== null && startColor !== void 0 ? startColor : stroke,
-          stopOpacity: startOpacity
-        }), /*#__PURE__*/_jsx("stop", {
-          offset: "100%",
-          stopColor: endColor !== null && endColor !== void 0 ? endColor : stroke,
-          stopOpacity: endOpacity
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Path, _objectSpread({
-      clipOffset: strokeWidth,
-      fill: fill,
-      stroke: "url(#".concat(patternId, ")"),
-      strokeLinecap: strokeLinecap,
-      strokeLinejoin: strokeLinejoin,
-      strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
-    }, props))]
-  });
+  const {
+    horizontalAlignment,
+    verticalAlignment
+  } = useMemo(() => getAlignmentFromPosition(position), [position]);
+  const labelCoordinates = useMemo(() => {
+    if (offset === undefined) return {
+      x,
+      y
+    };
+    return getLabelCoordinates(x, y, position, offset);
+  }, [x, y, position, offset]);
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({}, props), {}, {
+    horizontalAlignment: horizontalAlignment,
+    verticalAlignment: verticalAlignment,
+    x: labelCoordinates.x,
+    y: labelCoordinates.y,
+    children: children
+  }));
 });

package/esm/chart/point/Point.css

@@ -0,0 +1,2 @@
+.cds-containerCss-ckemp0e{outline:none;}
+.cds-innerPointCss-ik8duli{border-radius:var(--borderRadius-1000);outline:none;}.cds-innerPointCss-ik8duli:focus{outline:none;}.cds-innerPointCss-ik8duli:focus-visible{outline:2px solid var(--color-fgPrimary);outline-offset:2px;}

package/esm/chart/{Point.js → point/Point.js}

@@ -1,4 +1,4 @@
-const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "onScrubberEnter", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "labelProps", "testID", "pixelCoordinates", "animate"];
+const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "LabelComponent", "labelPosition", "labelOffset", "labelFont", "testID", "animate", "transitions", "transition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,23 +6,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useEffect, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { m as motion } from 'framer-motion';
-import { useCartesianChartContext } from './ChartProvider';
-import { ChartText } from './text';
-import { projectPoint, useScrubberContext } from './utils';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const containerCss = "cds-containerCss-c137x6qr";
-const innerPointCss = "cds-innerPointCss-i1qyub1f";
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultAccessoryEnterTransition, defaultTransition, getTransition, projectPoint } from '../utils';
+import { DefaultPointLabel } from './DefaultPointLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-ckemp0e";
+const innerPointCss = "cds-innerPointCss-ik8duli";
 
 /**
- * Parameters passed to renderPoints callback function.
- */
-
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
+ * Props for point label components.
  */
 
 export const Point = /*#__PURE__*/memo(_ref => {
@@ -31,10 +26,9 @@ export const Point = /*#__PURE__*/memo(_ref => {
       dataY,
       yAxisId,
       fill = 'var(--color-fgPrimary)',
-      radius = 4,
+      radius = 5,
       opacity,
       onClick,
-      onScrubberEnter,
       className,
       style,
       classNames,
@@ -43,27 +37,28 @@ export const Point = /*#__PURE__*/memo(_ref => {
       strokeWidth = 2,
       accessibilityLabel,
       label,
-      labelProps,
+      LabelComponent = DefaultPointLabel,
+      labelPosition = 'center',
+      labelOffset = radius * 2,
+      labelFont,
       testID,
-      pixelCoordinates,
-      animate
+      animate: animateProp,
+      transitions,
+      transition
     } = _ref,
     svgProps = _objectWithoutProperties(_ref, _excluded);
   const {
     getXScale,
     getYScale,
-    animate: animationEnabled
+    animate: animationEnabled,
+    drawingArea
   } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animationEnabled;
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition]);
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
   const pixelCoordinate = useMemo(() => {
-    if (pixelCoordinates) {
-      return pixelCoordinates;
-    }
     if (!xScale || !yScale) {
       return {
         x: 0,
@@ -76,15 +71,11 @@ export const Point = /*#__PURE__*/memo(_ref => {
       xScale,
       yScale
     });
-  }, [xScale, yScale, dataX, dataY, pixelCoordinates]);
-  useEffect(() => {
-    if (isScrubberHighlighted && onScrubberEnter) {
-      onScrubberEnter({
-        x: pixelCoordinate.x,
-        y: pixelCoordinate.y
-      });
-    }
-  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
+  }, [xScale, yScale, dataX, dataY]);
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
   const innerPoint = useMemo(() => {
     const mergedStyles = _objectSpread(_objectSpread({
       cursor: onClick !== undefined ? 'pointer' : undefined
@@ -113,21 +104,38 @@ export const Point = /*#__PURE__*/memo(_ref => {
         });
       }
     } : undefined;
-
-    // Use the animate prop if provided, otherwise fall back to chart context
-    const shouldAnimateInteractions = animate !== null && animate !== void 0 ? animate : animationEnabled;
-    const shouldAnimatePosition = animate !== null && animate !== void 0 ? animate : animationEnabled;
+    if (!animate) {
+      return /*#__PURE__*/_jsx("circle", _objectSpread({
+        "aria-label": accessibilityLabel,
+        className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: fill,
+        onClick: onClick ? event => onClick(event, {
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        }) : undefined,
+        onKeyDown: handleKeyDown,
+        r: radius,
+        role: onClick ? 'button' : undefined,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        style: mergedStyles,
+        tabIndex: onClick ? 0 : -1
+      }, svgProps));
+    }
     return /*#__PURE__*/_jsx(motion.circle, _objectSpread({
-      animate: shouldAnimatePosition ? {
+      animate: {
         cx: pixelCoordinate.x,
         cy: pixelCoordinate.y
-      } : undefined,
+      },
       "aria-label": accessibilityLabel,
       className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
       cx: pixelCoordinate.x,
       cy: pixelCoordinate.y,
       fill: fill,
-      initial: false,
       onClick: onClick ? event => onClick(event, {
         dataX,
         dataY,
@@ -142,30 +150,47 @@ export const Point = /*#__PURE__*/memo(_ref => {
       style: mergedStyles,
       tabIndex: onClick ? 0 : -1,
       transition: {
-        duration: 0.3,
-        ease: 'easeInOut'
+        cx: updateTransition,
+        cy: updateTransition
       },
       variants: variants,
-      whileHover: shouldAnimateInteractions && onClick ? 'hovered' : 'default',
-      whileTap: shouldAnimateInteractions && onClick ? 'pressed' : 'default'
+      whileHover: onClick ? 'hovered' : 'default',
+      whileTap: onClick ? 'pressed' : 'default'
     }, svgProps));
-  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, animationEnabled, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel]);
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel, updateTransition]);
   if (!xScale || !yScale) {
-    return null;
+    return;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("g", {
-      className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
-      "data-testid": testID,
-      opacity: opacity,
-      style: styles === null || styles === void 0 ? void 0 : styles.container,
-      children: innerPoint
-    }), label && /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
-      x: pixelCoordinate.x,
-      y: pixelCoordinate.y
-    }, labelProps), {}, {
-      children: label
-    }))]
+  return /*#__PURE__*/_jsx("g", {
+    opacity: isWithinDrawingArea ? 1 : 0,
+    children: /*#__PURE__*/_jsxs(motion.g, {
+      animate: {
+        opacity: 1
+      },
+      initial: animate ? {
+        opacity: 0
+      } : false,
+      transition: {
+        opacity: enterTransition
+      },
+      children: [/*#__PURE__*/_jsx("g", {
+        className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+        "data-testid": testID,
+        opacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.root,
+        children: innerPoint
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        dataX: dataX,
+        dataY: dataY,
+        fill: fill,
+        font: labelFont,
+        offset: labelOffset,
+        position: labelPosition,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y,
+        children: label
+      })]
+    })
   });
 });
 import "./Point.css";

package/esm/chart/point/index.js

@@ -0,0 +1,2 @@
+export * from './DefaultPointLabel';
+export * from './Point';