@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

package/esm/sparkline/Sparkline.js

@@ -0,0 +1,164 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, memo, useMemo, useRef } from 'react';
+import { Defs, G, LinearGradient, Mask, Path, Rect, Stop, Svg } from 'react-native-svg';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    height,
+    path,
+    width,
+    yAxisScalingFactor,
+    children,
+    strokeType = 'solid',
+    fillType = 'dotted'
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const strokeColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background != null ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const hasChildren = !!children;
+  const useModernFill = fillType === 'gradient' || fillType === 'gradientDotted';
+
+  // Stroke gradient (for strokeType='gradient')
+  const strokeGradient = useMemo(() => {
+    if (strokeType !== 'gradient') return null;
+    return getAccessibleForegroundGradient({
+      background: background != null ? background : theme.color.bg,
+      color,
+      colorScheme: theme.activeColorScheme,
+      usage: 'graphic'
+    });
+  }, [strokeType, background, color, theme]);
+
+  // Calculate gradient coordinates for modern fills
+  const {
+    gradientY1,
+    gradientY2
+  } = useMemo(() => {
+    if (!useModernFill) return {
+      gradientY1: 0,
+      gradientY2: 0
+    };
+    if (!Number.isFinite(yAxisScalingFactor)) {
+      return {
+        gradientY1: 2,
+        gradientY2: height - 2
+      };
+    }
+    const {
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const pathHeight = Math.abs(yRange[0] - yRange[1]);
+    const yTranslate = height / 2 - pathHeight / 2;
+    return {
+      gradientY1: yRange[1],
+      gradientY2: height - yTranslate
+    };
+  }, [useModernFill, height, width, yAxisScalingFactor]);
+  const maskGradientId = patternId.current + "-mask-gradient";
+  const maskId = patternId.current + "-mask";
+  const defs = useMemo(() => {
+    if (!strokeGradient && !hasChildren) return null;
+    return /*#__PURE__*/_jsxs(Defs, {
+      children: [strokeGradient && /*#__PURE__*/_jsx(LinearGradient, {
+        id: "gradient",
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: strokeGradient.map((item, i) => /*#__PURE__*/_jsx(Stop, {
+          offset: item.offset,
+          stopColor: item.color
+        }, i + "_" + item))
+      }), hasChildren && fillType === 'dotted' && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: strokeColor,
+        id: patternId.current
+      }), hasChildren && fillType === 'gradient' && /*#__PURE__*/_jsxs(LinearGradient, {
+        gradientUnits: "userSpaceOnUse",
+        id: patternId.current,
+        x1: "0",
+        x2: "0",
+        y1: gradientY1,
+        y2: gradientY2,
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: strokeColor,
+          stopOpacity: 0.3
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: strokeColor,
+          stopOpacity: 0
+        })]
+      }), hasChildren && fillType === 'gradientDotted' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SparklineAreaPattern, {
+          color: strokeColor,
+          id: patternId.current,
+          opacity: 1
+        }), /*#__PURE__*/_jsxs(LinearGradient, {
+          gradientUnits: "userSpaceOnUse",
+          id: maskGradientId,
+          x1: "0",
+          x2: "0",
+          y1: gradientY1,
+          y2: gradientY2,
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: 1
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: 0
+          })]
+        }), /*#__PURE__*/_jsx(Mask, {
+          id: maskId,
+          children: /*#__PURE__*/_jsx(Rect, {
+            fill: "url(#" + maskGradientId + ")",
+            height: height,
+            width: width
+          })
+        })]
+      })]
+    });
+  }, [strokeGradient, hasChildren, fillType, strokeColor, gradientY1, gradientY2, height, width, maskGradientId, maskId]);
+  const stroke = strokeType === 'gradient' ? 'url(#gradient)' : strokeColor;
+  const shouldPlaceDefsInside = useModernFill;
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "none",
+    height: height,
+    width: width,
+    children: [!shouldPlaceDefsInside && defs, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
+      children: [shouldPlaceDefsInside && defs, /*#__PURE__*/_jsx(Path, {
+        ref: ref,
+        d: path,
+        stroke: stroke,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: borderWidth
+      }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
+    }))]
+  });
+}));
+Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import { Path } from 'react-native-svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use AreaChart instead.
+ */
+export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    area,
+    patternId,
+    maskId
+  } = _ref;
+  return /*#__PURE__*/_jsx(Path, {
+    ref: ref,
+    d: area,
+    fill: "url(#" + patternId + ")",
+    mask: maskId ? "url(#" + maskId + ")" : undefined
+  });
+}));

package/esm/sparkline/SparklineAreaPattern.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Circle, G, Pattern, Rect } from 'react-native-svg';
+import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineAreaPattern = _ref => {
+  let {
+    color,
+    id,
+    opacity
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const themeOpacity = useSparklineAreaOpacity(activeColorScheme);
+  const fillOpacity = opacity != null ? opacity : themeOpacity;
+  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,76 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, memo, useMemo, useRef } from 'react';
+import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+
+/**
+ * @deprecated Use LineChart instead.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    path,
+    height,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const gradient = getAccessibleForegroundGradient({
+    background: background != null ? background : theme.color.bg,
+    color,
+    colorScheme: theme.activeColorScheme,
+    usage: 'graphic'
+  });
+  const areaColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background != null ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const hasChildren = !!children;
+  const linearGradient = useMemo(() => {
+    return /*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        id: "gradient",
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: gradient.map((item, i) => /*#__PURE__*/_jsx(Stop, {
+          offset: item.offset,
+          stopColor: item.color
+        }, i + "_" + item))
+      }), hasChildren && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: areaColor,
+        id: patternId.current
+      })]
+    });
+  }, [areaColor, hasChildren, gradient]);
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "none",
+    height: height,
+    width: width,
+    children: [linearGradient, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        ref: ref,
+        d: path,
+        stroke: "url(#gradient)",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: borderWidth
+      }), generateSparklineAreaWithId(patternId.current, children)]
+    }))]
+  });
+}));
+SparklineGradient.displayName = 'SparklineGradient';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+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/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  example: function Example() {
+    const data = [20, 30, 5, 45, 0];
+    const path = useSparklinePath({
+      height: 200,
+      width: 200,
+      data
+    });
+    return /*#__PURE__*/_jsx(Sparkline, {
+      color: "auto",
+      height: 200,
+      path: path,
+      width: 400
+    });
+  }
+});

package/esm/sparkline/__stories__/Sparkline.stories.js

@@ -0,0 +1,120 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Dimensions } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+import { Cell } from '@coinbase/cds-mobile/cells/Cell';
+import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { HStack } from '@coinbase/cds-mobile/layout/HStack';
+import { VStack } from '@coinbase/cds-mobile/layout/VStack';
+import { TextBody } from '@coinbase/cds-mobile/typography/TextBody';
+import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
+import { Sparkline } from '../Sparkline';
+import { SparklineArea } from '../SparklineArea';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SparklineExample = _ref => {
+  let {
+    imageUrl,
+    name,
+    symbol,
+    color
+  } = _ref;
+  const dimensions = {
+    width: 64,
+    height: 20
+  };
+  const path = useSparklinePath(_extends({}, dimensions, {
+    data: prices
+  }));
+  return /*#__PURE__*/_jsx(Cell, {
+    detail: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
+        color: color,
+        path: path
+      })), /*#__PURE__*/_jsxs(VStack, {
+        alignContent: "flex-end",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        paddingStart: 2,
+        children: [/*#__PURE__*/_jsx(TextBody, {
+          align: "end",
+          numberOfLines: 1,
+          children: "$2,874.49"
+        }), /*#__PURE__*/_jsx(TextBody, {
+          align: "end",
+          color: "fgMuted",
+          numberOfLines: 1,
+          children: "+36.08%"
+        })]
+      })]
+    }),
+    media: /*#__PURE__*/_jsx(CellMedia, {
+      source: imageUrl,
+      title: "Title",
+      type: "image"
+    }),
+    children: /*#__PURE__*/_jsxs(VStack, {
+      justifyContent: "center",
+      children: [/*#__PURE__*/_jsx(TextHeadline, {
+        ellipsize: "tail",
+        numberOfLines: 1,
+        children: name
+      }), /*#__PURE__*/_jsx(TextBody, {
+        ellipsize: "tail",
+        numberOfLines: 1,
+        children: symbol
+      })]
+    })
+  });
+};
+const SparklineScalingExample = props => {
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height: 320
+  };
+  const path = useSparklinePath(_extends({}, dimensions, props));
+  const area = useSparklineArea(_extends({}, dimensions, props));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+      ellipsize: "tail",
+      numberOfLines: 1,
+      children: ["Scale: ", props.yAxisScalingFactor]
+    }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
+      color: "#F7931A",
+      path: path,
+      yAxisScalingFactor: props.yAxisScalingFactor,
+      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const PressableOpacityScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Sparkline",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        marginX: -2,
+        children: [/*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.sushi))]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineWithScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineWithScaleAndFill",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
+        fill: true
+      }), item.yAxisScalingFactor))
+    })]
+  });
+};
+export default PressableOpacityScreen;

package/esm/sparkline/__stories__/SparklineGradient.stories.js

@@ -0,0 +1,123 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Dimensions } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+import { Cell } from '@coinbase/cds-mobile/cells/Cell';
+import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { TextBody, TextHeadline } from '@coinbase/cds-mobile/typography';
+import { SparklineArea } from '../SparklineArea';
+import { SparklineGradient } from '../SparklineGradient';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const height = 320;
+const SparklineGradientExample = _ref => {
+  let {
+    imageUrl,
+    name,
+    symbol,
+    color,
+    fill
+  } = _ref;
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height
+  };
+  const path = useSparklinePath(_extends({}, dimensions, {
+    data: prices
+  }));
+  const area = useSparklineArea(_extends({}, dimensions, {
+    data: prices
+  }));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsx(Cell, {
+      media: /*#__PURE__*/_jsx(CellMedia, {
+        source: imageUrl,
+        type: "image"
+      }),
+      children: /*#__PURE__*/_jsxs(VStack, {
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(TextHeadline, {
+          ellipsize: "tail",
+          numberOfLines: 1,
+          children: name
+        }), /*#__PURE__*/_jsx(TextBody, {
+          ellipsize: "tail",
+          numberOfLines: 1,
+          children: symbol
+        })]
+      })
+    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
+      color: color,
+      path: path,
+      children: fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const SparklineScalingExample = props => {
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height
+  };
+  const path = useSparklinePath(_extends({}, dimensions, props));
+  const area = useSparklineArea(_extends({}, dimensions, props));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+      ellipsize: "tail",
+      numberOfLines: 1,
+      children: ["Scale: ", props.yAxisScalingFactor]
+    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
+      color: "#F7931A",
+      path: path,
+      yAxisScalingFactor: props.yAxisScalingFactor,
+      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const PressableOpacityScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      title: "SparklineGradient",
+      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi))]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "SparklineGradientWithArea",
+      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi, {
+        fill: true
+      }))]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineGradientWithScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineGradientWithAreaAndScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
+        fill: true
+      }), item.yAxisScalingFactor))
+    })]
+  });
+};
+export default PressableOpacityScreen;

package/esm/sparkline/generateSparklineWithId.js

@@ -0,0 +1,7 @@
+import { cloneElement } from 'react';
+export function generateSparklineAreaWithId(id, children, maskId) {
+  return children ? /*#__PURE__*/cloneElement(children, {
+    patternId: id,
+    maskId
+  }) : 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/SparklineAccessibleView.js

@@ -0,0 +1,75 @@
+import React, { memo, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+import chunk from 'lodash/chunk';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flex: 1,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+
+/**
+ * SparklineAccessibleView renders an accessible view for Sparkline Chart.
+ *
+ * It chunks the sparkline data into 10 (or fewer) pieces, rendering each as a View with
+ * flex width proportional to the chunk size. The first data point in each chunk is used
+ * to generate an accessibilityLabel with the date and value.
+ *
+ * @param data - The sparkline data mapped by time period
+ * @param selectedPeriod - The currently selected time period
+ */
+export const SparklineAccessibleView = /*#__PURE__*/memo(function SparklineAccessibleView(_ref) {
+  let {
+    data,
+    selectedPeriod
+  } = _ref;
+  const chunkedData = data ? chunk(data[selectedPeriod], data[selectedPeriod].length / 10) : [];
+  // if the data is not evenly divisible by 10, the last chunk will be smaller than the rest
+  // so we need to combine it with the previous chunk
+  if (chunkedData.length === 11) {
+    const lastChunk = chunkedData.pop();
+    chunkedData[chunkedData.length - 1] = chunkedData[chunkedData.length - 1].concat(lastChunk != null ? lastChunk : []);
+  }
+  const getStyleByLength = useCallback(length => ({
+    flex: length
+  }), []);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: chunkedData.map(dataChunk => {
+      // use the first data point in chunk for accessibility label
+      const item = dataChunk[0];
+
+      // only announce time for hour and day
+      const shouldAnnounceTime = selectedPeriod === 'hour' || selectedPeriod === 'day';
+
+      // Extract date formatting options
+      const timeOptions = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true
+      };
+      const dateOptions = {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric'
+      };
+
+      // TODO: localize date and time
+      const dateTime = item.date.toLocaleString('en-US', shouldAnnounceTime ? timeOptions : dateOptions);
+      const price = item.value.toFixed(2);
+      return /*#__PURE__*/_jsx(View, {
+        accessible: true,
+        accessibilityLabel: dateTime + ", $" + price
+        // variable width base on chunk length
+        ,
+        style: getStyleByLength(dataChunk.length)
+      }, String(item.date));
+    })
+  });
+});