@coinbase/cds-web-visualization 0.0.0 → 3.3.2

package/dts/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+type SparklineInteractiveScrubContextInterface = {
+  setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  lineDOMNode: HTMLDivElement | null;
+  maskDOMNode: HTMLDivElement | null;
+  hoverDateDOMNode: HTMLSpanElement | null;
+  hoverPriceDOMNode: HTMLSpanElement | null;
+};
+export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<
+  ({ children }: { children: React.ReactNode }) => import('react/jsx-runtime').JSX.Element
+>;
+export declare function useSparklineInteractiveScrubContext(): SparklineInteractiveScrubContextInterface;
+export {};
+//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveScrubProvider.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,yCAAyC,GAAG;IAC/C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC;IAChE,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC;IAChE,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IACtE,oBAAoB,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAC;CAC3C,CAAC;AAaF,eAAO,MAAM,iCAAiC,2CAC7B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,6CA0B7C,CAAC;AAEF,wBAAgB,mCAAmC,8CAElD"}

package/dts/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
+import type { Area, Line } from 'd3-shape';
+export type TimeseriesPathOnRenderParams = {
+  path: string;
+  area: string;
+};
+export type TimeseriesPathProps = {
+  lineFn: Line<ChartDataPoint>;
+  areaFn: Area<ChartDataPoint>;
+  timeseries: ChartTimeseries;
+  initialPath: string;
+  onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+};
+export type SparklineInteractiveTimeseriesPathsProps = {
+  initialPath: string;
+  data: ChartTimeseries[];
+  width: number;
+  height: number;
+  onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+};
+export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<
+  ({
+    data,
+    width,
+    height,
+    initialPath,
+    onRender,
+  }: SparklineInteractiveTimeseriesPathsProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveTimeseriesPaths.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAM3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC7B,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACnE,CAAC;AA8CF,MAAM,MAAM,wCAAwC,GAAG;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,eAAO,MAAM,mCAAmC,6EACG,wCAAwC,6CA2B1F,CAAC"}

package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractive.figma.d.ts.map

package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractive.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/fade.d.ts

@@ -0,0 +1,3 @@
+export declare function fadeOut(domNode?: HTMLElement | null): void;
+export declare function fadeIn(domNode?: HTMLElement | null): void;
+//# sourceMappingURL=fade.d.ts.map

package/dts/sparkline/sparkline-interactive/fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/fade.ts"],"names":[],"mappings":"AAqCA,wBAAgB,OAAO,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGnD;AAED,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGlD"}

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts

@@ -0,0 +1,13 @@
+export declare function useSparklineInteractiveConstants(): {
+  chartWidth: number;
+  chartHeight: number;
+  chartDimensionStyles: {
+    height: number;
+    width: number;
+  };
+  xRange: number[];
+  yRange: number[];
+  startX: number;
+  endX: number;
+};
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveConstants.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts"],"names":[],"mappings":"AASA,wBAAgB,gCAAgC;;;;;;;;;;;EAuB/C"}

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import type {
+  SharedProps,
+  SparklineInteractiveHeaderSignVariant,
+  SparklineInteractiveHeaderVariant,
+} from '@coinbase/cds-common/types';
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export type SparklineInteractiveSubHead = {
+  /**
+   * Free form percentage change
+   */
+  percent: string;
+  /**
+   * Sign to denote the change in price
+   */
+  sign: SparklineInteractiveHeaderSignVariant;
+  /**
+   * The variant to use for the price and percentage change
+   */
+  variant: SparklineInteractiveHeaderVariant;
+  /**
+   * Show the dollar amount of price change
+   */
+  priceChange?: string;
+  /**
+   * The accessoryText to show after the price and / or percentage change. An example is "All time"
+   */
+  accessoryText?: string;
+  /**
+   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+   * @example
+   * // First, configure your i18n strings
+   * const messages = defineMessages({
+   *   subHeadPrefix: {
+   *     id: `${i18nKey}.subHeadPrefix`,
+   *     defaultMessage: 'Price increase in the amount of',
+   *     description: 'A prefix to make it clear which direction the price action was moving',
+   *   }
+   * });
+   *
+   * // then  provide the translated string the accessibilityLabel prop
+   * messages.subHeadPrefix
+   */
+  accessibilityLabel?: string;
+};
+export type SparklineInteractiveHeaderValues = {
+  /**
+   * Describes what the Header represents e.g. Bitcoin Price
+   */
+  label?: string;
+  /**
+   * Main content of header, this is usually the price
+   */
+  title?: React.ReactNode;
+  /**
+   * Provides additional information about the title, such as a price change
+   */
+  subHead?: SparklineInteractiveSubHead;
+};
+export type SparklineInteractiveHeaderRef = {
+  update: (params: SparklineInteractiveHeaderValues) => void;
+};
+export type SparklineInteractiveHeaderProps = SharedProps & {
+  /**
+   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+   */
+  defaultTitle: React.ReactNode;
+  /**
+   * Default label, changing this prop has no effect once the default is rendered.
+   */
+  defaultLabel?: string;
+  /**
+   * Default SubHead, changing this prop has no effect once the default is rendered.
+   */
+  defaultSubHead?: SparklineInteractiveSubHead;
+  /**
+   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+   */
+  labelNode?: React.ReactNode;
+  /**
+   * Reduce the font size used for the header itself.
+   */
+  compact?: boolean;
+};
+export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /**
+       * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+       */
+      defaultTitle: React.ReactNode;
+      /**
+       * Default label, changing this prop has no effect once the default is rendered.
+       */
+      defaultLabel?: string;
+      /**
+       * Default SubHead, changing this prop has no effect once the default is rendered.
+       */
+      defaultSubHead?: SparklineInteractiveSubHead;
+      /**
+       * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+       */
+      labelNode?: React.ReactNode;
+      /**
+       * Reduce the font size used for the header itself.
+       */
+      compact?: boolean;
+    } & React.RefAttributes<SparklineInteractiveHeaderRef>
+  >
+>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAMpC,cAAc,gEAAgE,CAAC;AAQ/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AA8KF,eAAO,MAAM,0BAA0B;IA5MrC;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;wDA6MlB,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

package/esm/index.js

@@ -0,0 +1 @@
+export * from './sparkline';

package/esm/sparkline/Counter.css

@@ -0,0 +1,3 @@
+.cds-containerCss-co2zq3s{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.cds-hiddenCss-h1nhoofs{visibility:hidden;}
+.cds-visibleCss-vhca54u{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.cds-visibleCss-vhca54u > *{width:100%;height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

package/esm/sparkline/Counter.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-co2zq3s";
+const hiddenCss = "cds-hiddenCss-h1nhoofs";
+const visibleCss = "cds-visibleCss-vhca54u";
+export const Counter = _ref => {
+  let {
+    startNum,
+    endNum,
+    renderNum,
+    durationInMillis
+  } = _ref;
+  const count = useCounter({
+    startNum,
+    endNum,
+    durationInMillis
+  });
+  const renderFunction = useMemo(() => {
+    return num => {
+      return renderNum ? renderNum(num) : num;
+    };
+  }, [renderNum]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerCss,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: hiddenCss,
+      children: renderFunction(endNum)
+    }), /*#__PURE__*/_jsx("span", {
+      className: visibleCss,
+      children: renderFunction(count)
+    })]
+  });
+};
+import "./Counter.css";

package/esm/sparkline/Sparkline.js

@@ -0,0 +1,50 @@
+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; }
+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, useRef } from 'react';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { SparklinePath } from './SparklinePath';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Sparkline = /*#__PURE__*/memo(_ref => {
+  let {
+    background,
+    color,
+    height,
+    path,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const stroke = color !== 'auto' ? color : getAccessibleColor({
+    background: background !== null && background !== void 0 ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const defs = children ? /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsx(SparklineAreaPattern, {
+      color: stroke,
+      id: patternId.current
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs("svg", {
+    height: height,
+    width: width,
+    children: [defs, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: [/*#__PURE__*/_jsx(SparklinePath, {
+        path: path,
+        stroke: stroke
+      }), generateSparklineAreaWithId(patternId.current, children)]
+    }))]
+  });
+});
+Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -0,0 +1,13 @@
+import React, { forwardRef, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    area,
+    patternId
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: ref,
+    d: area,
+    fill: "url(#".concat(patternId, ")")
+  });
+}));

package/esm/sparkline/SparklineAreaPattern.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineAreaPattern = _ref => {
+  let {
+    color,
+    id
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const fillOpacity = useSparklineAreaOpacity(activeColorScheme);
+  return /*#__PURE__*/_jsx("pattern", {
+    height: "4",
+    id: id,
+    patternUnits: "userSpaceOnUse",
+    width: "4",
+    x: "0",
+    y: "0",
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("rect", {
+        fill: "transparent",
+        height: "4",
+        width: "4"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: "1",
+        cy: "1",
+        fill: color,
+        fillOpacity: fillOpacity,
+        r: "1"
+      })]
+    })
+  });
+};

package/esm/sparkline/SparklineGradient.js

@@ -0,0 +1,72 @@
+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; }
+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, { forwardRef, memo, useId, useMemo, useRef } from 'react';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { SparklinePath } from './SparklinePath';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    background,
+    color,
+    path,
+    height,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const gradient = getAccessibleForegroundGradient({
+    background: background !== null && background !== void 0 ? background : theme.color.bg,
+    color,
+    colorScheme: theme.activeColorScheme,
+    usage: 'graphic'
+  });
+  const areaColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background !== null && background !== void 0 ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const gradientId = useId();
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const hasChildren = !!children;
+  const linearGradient = useMemo(() => {
+    return /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("linearGradient", {
+        id: gradientId,
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: gradient.map((item, i) => /*#__PURE__*/_jsx("stop", {
+          offset: item.offset,
+          stopColor: item.color
+        }, "".concat(i, "_").concat(item)))
+      }), hasChildren && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: areaColor,
+        id: patternId.current
+      })]
+    });
+  }, [gradientId, gradient, hasChildren, areaColor]);
+  return /*#__PURE__*/_jsxs("svg", {
+    height: height,
+    width: width,
+    children: [linearGradient, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: [/*#__PURE__*/_jsx(SparklinePath, {
+        ref: forwardedRef,
+        path: path,
+        stroke: "url(#".concat(gradientId, ")")
+      }), generateSparklineAreaWithId(patternId.current, children)]
+    }))]
+  });
+}));
+SparklineGradient.displayName = 'SparklineGradient';

package/esm/sparkline/SparklinePath.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklinePath = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    path,
+    stroke
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: forwardedRef,
+    d: path,
+    fill: "transparent",
+    stroke: stroke,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: borderWidth
+  });
+}));
+SparklinePath.displayName = 'SparklinePath';

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Sparkline } from '../Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
+  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  example: () => {
+    const data = [20, 30, 5, 45, 0];
+    // @ts-expect-error: useSparklinePath is not typed correctly
+    const path = useSparklinePath({
+      height: 200,
+      width: 200,
+      data
+    });
+    return /*#__PURE__*/_jsx(Sparkline, {
+      color: "auto",
+      height: 200,
+      path: path,
+      width: 400
+    });
+  }
+});

package/esm/sparkline/generateSparklineWithId.js

@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+export function generateSparklineAreaWithId(id, children) {
+  return children ? /*#__PURE__*/cloneElement(children, {
+    patternId: id
+  }) : undefined;
+}

package/esm/sparkline/index.js

@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';

package/esm/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const InnerSparklineInteractiveProvider = _ref => {
+  let {
+    width,
+    height,
+    children
+  } = _ref;
+  const {
+    setWidth,
+    setHeight
+  } = useSparklineInteractiveContext();
+  useEffect(() => {
+    setWidth(width);
+    setHeight(height);
+  }, [width, height, setWidth, setHeight]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};