@coinbase/cds-mobile 9.13.0 → 9.15.0

package/esm/accordion/AccordionHeader.js

@@ -1,5 +1,5 @@
 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, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionIconHiddenRotate, accordionIconVisibleRotate } from '@coinbase/cds-common/animation/accordion';
 import { listHeight } from '@coinbase/cds-common/tokens/cell';
@@ -11,20 +11,28 @@ import { AnimatedCaret } from '../motion/AnimatedCaret';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AccordionMedia = /*#__PURE__*/memo(_ref => {
+const compactPaddingProps = paddingProps => {
+  const entries = Object.entries(paddingProps).filter(_ref => {
+    let [, value] = _ref;
+    return value !== undefined;
+  });
+  if (entries.length === 0) return undefined;
+  return Object.fromEntries(entries);
+};
+export const AccordionMedia = /*#__PURE__*/memo(_ref2 => {
   let {
     media
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/_jsx(Box, {
     children: media
   });
 });
-export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
+export const AccordionTitle = /*#__PURE__*/memo(_ref3 => {
   let {
     title,
     subtitle,
     tertiaryTitle
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/_jsx(Box, {
     flexGrow: 1,
     flexShrink: 1,
@@ -45,14 +53,16 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
     })
   });
 });
-export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
+export const AccordionIcon = /*#__PURE__*/memo(_ref4 => {
   let {
-    collapsed
-  } = _ref3;
+    collapsed,
+    caretSize = 's'
+  } = _ref4;
   return /*#__PURE__*/_jsx(Box, {
     justifyContent: "flex-end",
     children: /*#__PURE__*/_jsx(AnimatedCaret, {
-      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate
+      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate,
+      size: caretSize
     })
   });
 });
@@ -60,7 +70,7 @@ export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
  * Renders a Pressable element to use as the header to an AccordionItem.
  * Composes an Accordion Media, Title, and Icon.
  */
-export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
+export const AccordionHeader = /*#__PURE__*/memo(_ref5 => {
   let {
     ref: forwardedRef,
     itemKey,
@@ -70,13 +80,35 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
     onPress,
     media,
     collapsed,
-    testID
-  } = _ref4;
+    testID,
+    style,
+    background = 'bg',
+    caretSize,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = _ref5;
   const {
     setActiveKey,
     activeKey
   } = useAccordionContext();
-  const spacing = useCellSpacing();
+  const outerSpacing = useMemo(() => compactPaddingProps({
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
+  // Header padding follows the same outer spacing rules as Cell.
+  const spacing = useCellSpacing({
+    outerSpacing
+  });
   const accessibilityLabel = [title, subtitle, tertiaryTitle].filter(Boolean).join(', ');
   const handlePress = useCallback(() => {
     onPress == null || onPress(itemKey);
@@ -85,15 +117,16 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
   return /*#__PURE__*/_jsx(Pressable, {
     ref: forwardedRef,
     noScaleOnPress: true,
-    transparentWhileInactive: true,
     accessibilityLabel: accessibilityLabel,
     accessibilityRole: "togglebutton",
     accessibilityState: {
       expanded: !collapsed
     },
-    background: "bg",
+    background: background,
     onPress: handlePress,
+    style: style,
     testID: testID,
+    transparentWhileInactive: true,
     children: /*#__PURE__*/_jsxs(HStack, _extends({
       alignItems: "center",
       gap: 2,
@@ -107,6 +140,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
         tertiaryTitle: tertiaryTitle,
         title: title
       }), /*#__PURE__*/_jsx(AccordionIcon, {
+        caretSize: caretSize,
         collapsed: collapsed
       })]
     }))

package/esm/accordion/AccordionItem.js

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionMinWidth } from '@coinbase/cds-common/tokens/accordion';
+import { useComponentConfig } from '../hooks/useComponentConfig';
+import { Divider } from '../layout/Divider';
 import { VStack } from '../layout/VStack';
 import { AccordionHeader } from './AccordionHeader';
 import { AccordionPanel } from './AccordionPanel';
@@ -10,8 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * It composes together an AccordionHeader and a collapsible AccordionPanel.
  * Accepts a unique `itemKey` prop to uniquely identify one item from another within the same Accordion.
  */
-export const AccordionItem = /*#__PURE__*/memo(_ref => {
-  let {
+export const AccordionItem = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('AccordionItem', _props);
+  const {
     itemKey,
     title,
     subtitle,
@@ -22,30 +25,61 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
     testID,
     headerRef,
     panelRef,
-    style
-  } = _ref;
+    style,
+    styles,
+    showHeaderBorder = false,
+    background,
+    caretSize,
+    borderRadius,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = mergedProps;
   const {
     activeKey
   } = useAccordionContext();
   const collapsed = activeKey !== itemKey;
   return /*#__PURE__*/_jsxs(VStack, {
+    borderRadius: borderRadius,
     minWidth: accordionMinWidth,
-    style: style,
+    overflow: borderRadius !== undefined ? 'hidden' : undefined,
+    style: [style, styles == null ? void 0 : styles.root],
     testID: testID,
+    width: "100%",
     children: [/*#__PURE__*/_jsx(AccordionHeader, {
       ref: headerRef,
+      background: background,
+      caretSize: caretSize,
       collapsed: collapsed,
       itemKey: itemKey,
       media: media,
       onPress: onPress,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      style: styles == null ? void 0 : styles.header,
       subtitle: subtitle,
       tertiaryTitle: tertiaryTitle,
       testID: testID && testID + "-header",
       title: title
-    }), /*#__PURE__*/_jsx(AccordionPanel, {
+    }), showHeaderBorder ? /*#__PURE__*/_jsx(Divider, {
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingX: paddingX,
+      testID: testID && testID + "-divider"
+    }) : null, /*#__PURE__*/_jsx(AccordionPanel, {
       ref: panelRef,
       collapsed: collapsed,
       itemKey: itemKey,
+      style: styles == null ? void 0 : styles.panel,
       testID: testID && testID + "-panel",
       children: children
     })]

package/esm/accordion/AccordionPanel.js

@@ -13,12 +13,14 @@ export const AccordionPanel = /*#__PURE__*/memo(_ref => {
     ref: forwardedRef,
     children,
     collapsed = true,
-    testID
+    testID,
+    style
   } = _ref;
   return /*#__PURE__*/_jsx(Collapsible, _extends({
     ref: forwardedRef,
     collapsed: collapsed,
     maxHeight: accordionVisibleMaxHeight,
+    style: style,
     testID: testID
   }, accordionSpacing, {
     children: children

package/esm/collapsible/Collapsible.js

@@ -34,7 +34,8 @@ export const Collapsible = /*#__PURE__*/memo(_ref => {
     paddingEnd,
     paddingBottom,
     paddingStart,
-    scrollViewProps
+    scrollViewProps,
+    style
   } = mergedProps;
   const theme = useTheme();
   // TO DO: Remove this after refactoring useContentSize to default values to null on initial render
@@ -112,10 +113,11 @@ export const Collapsible = /*#__PURE__*/memo(_ref => {
   }));
   const animatedContainerStyles = useMemo(() => [styles.container, animatedStyles, animatedInMaxSize], [animatedStyles, animatedInMaxSize]);
   const containerStyles = isUnmountedExpanded ? styles.container : animatedContainerStyles;
+  const mergedContainerStyles = useMemo(() => style ? [containerStyles, style] : containerStyles, [containerStyles, style]);
   return /*#__PURE__*/_jsx(ReanimatedView, {
     ref: forwardedRef,
     "aria-expanded": !collapsed,
-    style: containerStyles,
+    style: mergedContainerStyles,
     testID: testID,
     children: /*#__PURE__*/_jsx(ScrollView, _extends({
       nestedScrollEnabled: true // for Android

package/esm/controls/Switch.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["children", "style", "styles"];
+  _excluded2 = ["children", "style", "styles", "variant", "background", "checked"];
 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); }
 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, useMemo } from 'react';
@@ -9,14 +9,26 @@ import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Control } from './Control';
+
+/** Border width of the switch head/handle, kept as a hairline regardless of theme. */
 import { jsx as _jsx } from "react/jsx-runtime";
+const switchThumbBorderWidth = 0.5;
+
+/** Semantic color variants for Switch, matching the semantics used by other control components. */
+
+/** Track background color applied when Switch is checked, keyed by `variant`. */
+const switchVariantBackground = {
+  primary: 'bgPrimary',
+  positive: 'bgPositive',
+  negative: 'bgNegative'
+};
 const SwitchIcon = _ref => {
   let {
     pressed,
     checked,
     disabled,
     controlColor,
-    background = checked ? 'bgPrimary' : 'bgTertiary',
+    background = 'bgTertiary',
     borderColor,
     borderRadius = 1000,
     borderWidth = 0,
@@ -45,7 +57,8 @@ const SwitchIcon = _ref => {
     height: switchThumbSize,
     position: 'absolute',
     top: thumbInset - borderSize,
-    left: thumbInset - borderSize
+    left: thumbInset - borderSize,
+    borderWidth: switchThumbBorderWidth
   }, {
     transform: [{
       translateX: animatedScaleValue.interpolate({
@@ -85,7 +98,10 @@ const SwitchWithRef = function SwitchWithRef(_ref2) {
   const {
       children,
       style,
-      styles
+      styles,
+      variant = 'primary',
+      background,
+      checked
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
@@ -93,11 +109,16 @@ const SwitchWithRef = function SwitchWithRef(_ref2) {
     switchHeight
   } = theme.controlSize;
   const controlStyles = useMemo(() => StyleSheet.flatten([style, styles == null ? void 0 : styles.control]), [style, styles == null ? void 0 : styles.control]);
+  // The variant only informs the track color while checked; the background prop is more
+  // specific and always wins when provided.
+  const resolvedBackground = useMemo(() => background != null ? background : checked ? switchVariantBackground[variant] : undefined, [background, checked, variant]);
   const switchNode = /*#__PURE__*/_jsx(Control, _extends({
     ref: ref,
     accessible: true,
     shouldUseSwitchTransition: true,
     accessibilityRole: "switch",
+    background: resolvedBackground,
+    checked: checked,
     label: children,
     style: controlStyles
   }, props, {

package/esm/controls/__stories__/Switch.stories.js

@@ -1,7 +1,7 @@
 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, { useState } from 'react';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { VStack } from '../../layout';
+import { HStack, VStack } from '../../layout';
 import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
 import { Switch } from '../Switch';
@@ -68,6 +68,31 @@ const SwitchScreen = () => {
           })]
         });
       }
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Variants",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        flexWrap: "wrap",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "primary",
+          children: "Primary"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "positive",
+          children: "Positive"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          variant: "negative",
+          children: "Negative"
+        }), /*#__PURE__*/_jsx(Switch, {
+          checked: true,
+          background: "accentBoldPurple",
+          variant: "negative",
+          children: "Background override"
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Custom Theme",

package/esm/tabs/SegmentedTabs.js

@@ -1,16 +1,23 @@
 const _excluded = ["ref"],
-  _excluded2 = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
+  _excluded2 = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius", "equalWidth", "alignSelf", "styles"];
 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); }
 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 } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
 import { Tabs } from './Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const equalWidthTabContainerStyle = {
+  flex: 1
+};
+const equalWidthTabStyle = {
+  alignSelf: 'stretch'
+};
 
 // We do Partial/Pick to allow TabComponent and TabsActiveIndicatorComponent to be optional
 // We grab 'tabs' from the Omit allowing it to stay required
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const SegmentedTabsComponent = /*#__PURE__*/memo(_ref => {
   let {
       ref
@@ -22,16 +29,28 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(_ref => {
       TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
       activeBackground = 'bgInverse',
       background = 'bgSecondary',
-      borderRadius = 700
+      borderRadius = 700,
+      equalWidth,
+      alignSelf = equalWidth ? 'stretch' : undefined,
+      styles
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+  const resolvedStyles = useMemo(() => {
+    if (!equalWidth) return styles;
+    return _extends({}, styles, {
+      tabContainer: [equalWidthTabContainerStyle, styles == null ? void 0 : styles.tabContainer],
+      tab: [equalWidthTabStyle, styles == null ? void 0 : styles.tab]
+    });
+  }, [equalWidth, styles]);
   return /*#__PURE__*/_jsx(Tabs, _extends({
     ref: ref,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    alignSelf: alignSelf,
     background: background,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    styles: resolvedStyles
   }, props));
 });
 SegmentedTabsComponent.displayName = 'SegmentedTabs';

package/esm/visualizations/chart/axis/AxisTickLabelOverflowMask.js

@@ -0,0 +1,44 @@
+import { memo, useMemo } from 'react';
+import { Group, LinearGradient, Rect, vec } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickLabelOverflowFadeWidth = 30;
+const maskOpaque = 'rgba(255, 255, 255, 1)';
+const maskClear = 'rgba(255, 255, 255, 0)';
+export const AxisTickLabelOverflowMask = /*#__PURE__*/memo(_ref => {
+  let {
+    axis,
+    children
+  } = _ref;
+  const {
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const fadeWidth = axisTickLabelOverflowFadeWidth;
+  const isXAxis = axis === 'x';
+  const fadeX = Math.min(fadeWidth, chartWidth / 2) / Math.max(chartWidth, 1);
+  const fadeY = Math.min(fadeWidth, chartHeight / 2) / Math.max(chartHeight, 1);
+  const colors = useMemo(() => [maskClear, maskOpaque, maskOpaque, maskClear], []);
+  const positions = useMemo(() => isXAxis ? [0, fadeX, 1 - fadeX, 1] : [0, fadeY, 1 - fadeY, 1], [fadeX, fadeY, isXAxis]);
+  if (chartWidth <= 0 || chartHeight <= 0) {
+    return /*#__PURE__*/_jsx(Group, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(Group, {
+    layer: true,
+    children: [children, /*#__PURE__*/_jsx(Rect, {
+      blendMode: "dstIn",
+      height: chartHeight,
+      width: chartWidth,
+      x: 0,
+      y: 0,
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        colors: colors,
+        end: isXAxis ? vec(chartWidth, 0) : vec(0, chartHeight),
+        positions: positions,
+        start: vec(0, 0)
+      })
+    })]
+  });
+});

package/esm/visualizations/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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, useCallback, useEffect, useId, useMemo } from 'react';
 import { Group } from '@shopify/react-native-skia';
@@ -12,6 +12,7 @@ import { getAxisTicksData, toPointAnchor } from '../utils/axis';
 import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;
@@ -40,7 +41,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       labelGap = 4,
       height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -55,6 +57,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const xScale = getXScale(axisId);
   const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -189,11 +192,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         chartTextProps: {
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          horizontalAlignment: 'center'
+          horizontalAlignment: 'center',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'y' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick]);
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, fadeTickLabels, tickLabelOverflow]);
   if (!xScale || !axisBounds) return;
   const labelX = axisBounds.x + axisBounds.width / 2;
   const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
@@ -221,11 +225,6 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
           stroke: theme.color.bgLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -248,8 +247,22 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       stroke: theme.color.fg,
       strokeCap: "square",
       strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(ChartText, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "x",
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    })), label && /*#__PURE__*/_jsx(ChartText, {
       horizontalAlignment: "center",
+      repositionAxes: "none",
       verticalAlignment: "middle",
       x: labelX,
       y: labelY,

package/esm/visualizations/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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, useCallback, useEffect, useId, useMemo } from 'react';
 import { Group, vec } from '@shopify/react-native-skia';
@@ -12,6 +12,7 @@ import { getAxisTicksData, toPointAnchor } from '../utils/axis';
 import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -38,7 +39,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       labelGap = 4,
       width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -53,6 +55,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -182,11 +185,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         chartTextProps: {
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          horizontalAlignment: position === 'left' ? 'right' : 'left'
+          horizontalAlignment: position === 'left' ? 'right' : 'left',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'x' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted, fadeTickLabels, tickLabelOverflow]);
   if (!yScale || !axisBounds) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
@@ -214,11 +218,6 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           stroke: theme.color.bgLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -241,13 +240,27 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       stroke: theme.color.fg,
       strokeCap: "square",
       strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(Group, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "y",
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    })), label && /*#__PURE__*/_jsx(Group, {
       origin: vec(labelX, labelY),
       transform: [{
         rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
       }],
       children: /*#__PURE__*/_jsx(ChartText, {
         horizontalAlignment: "center",
+        repositionAxes: "none",
         verticalAlignment: "middle",
         x: labelX,
         y: labelY,