@cdx-ui/components 0.2.3 → 0.2.4

package/lib/commonjs/components/ScrollShadow/index.js

@@ -4,79 +4,206 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScrollShadow = ScrollShadow;
+Object.defineProperty(exports, "useScrollShadow", {
+  enumerable: true,
+  get: function () {
+    return _useScrollShadow.useScrollShadow;
+  }
+});
 var _react = require("react");
 var _reactNative = require("react-native");
+var _uniwind = require("uniwind");
+var _primitives = require("@cdx-ui/primitives");
 var _utils = require("@cdx-ui/utils");
+var _gradient = require("./gradient");
 var _styles = require("./styles");
+var _useComposedScrollHandler = require("./useComposedScrollHandler");
 var _useScrollShadow = require("./useScrollShadow");
 var _jsxRuntime = require("react/jsx-runtime");
+function ScrollShadowEdge({
+  edge,
+  orientation,
+  size,
+  surface,
+  colorClassName,
+  edgeClassName,
+  opacity
+}) {
+  const surfaceColor = (0, _uniwind.useCSSVariable)(_styles.SCROLL_SHADOW_SURFACE_CSS_VARS[surface]) || 'transparent';
+  const resolvedColorClassName = (0, _uniwind.useResolveClassNames)(colorClassName ?? '');
+  const customColor = colorClassName != null ? resolvedColorClassName.accentColor ?? resolvedColorClassName.backgroundColor : undefined;
+  if (__DEV__ && colorClassName != null && customColor == null) {
+    console.warn(`[ScrollShadow] colorClassName "${colorClassName}" did not resolve to a color. Falling back to surface="${surface}".`);
+  }
+  const isWeb = _reactNative.Platform.OS === 'web';
+  // Web paints built-in surfaces with static classes; a custom color has no static class,
+  // so it takes a CSS background-image (experimental_backgroundImage paints nothing on RNW).
+  const useInlinePath = !isWeb || customColor != null;
+  const inlineGradient = useInlinePath ? (0, _gradient.getInlineBackgroundImage)(String(customColor ?? surfaceColor), orientation, edge, false) : undefined;
+  const webGradientClasses = useInlinePath ? undefined : (0, _gradient.getWebSurfaceGradientClasses)(surface, orientation, edge);
+  const inlineStyle = inlineGradient ? isWeb ? {
+    backgroundImage: inlineGradient
+  } : {
+    experimental_backgroundImage: inlineGradient
+  } : undefined;
+  const edgeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true,
+    className: (0, _utils.cn)((0, _styles.scrollShadowEdgeVariants)({
+      orientation,
+      edge,
+      size
+    }),
+    // The inline gradient is authored LTR; mirroring follows Uniwind's layout
+    // direction (I18nManager or LayoutDirection) without a re-render.
+    useInlinePath && orientation === 'horizontal' ? 'rtl:-scale-x-100' : undefined, webGradientClasses, edgeClassName),
+    style: inlineStyle,
+    ...(0, _primitives.mergeDataAttributes)((0, _primitives.dataAttributes)({
+      slot: 'scroll-shadow-edge',
+      edge
+    }))
+  });
+  if (!opacity) {
+    return edgeView;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    pointerEvents: "none",
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true,
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      opacity
+    }],
+    children: edgeView
+  });
+}
+function shouldShowEdge(visibility, edge, capability) {
+  switch (visibility) {
+    case 'both':
+      return true;
+    case 'start':
+      return edge === 'start';
+    case 'end':
+      return edge === 'end';
+    case 'none':
+      return false;
+    case 'auto':
+    default:
+      return edge === 'start' ? capability.canScrollBefore : capability.canScrollAfter;
+  }
+}
+function ReanimatedTrackedChild({
+  child,
+  handleScroll,
+  trackedChildProps
+}) {
+  const onScroll = (0, _useComposedScrollHandler.useReanimatedComposedScrollHandler)(handleScroll, child.props.onScroll);
+  return /*#__PURE__*/(0, _react.cloneElement)(child, {
+    ...trackedChildProps,
+    onScroll
+  });
+}
 function ScrollShadow({
   children,
   className,
-  fadeFromClassName = 'from-background/35',
+  style,
+  surface = 'background',
+  size = 'default',
+  visibility = 'auto',
   hideScrollBar = false,
-  orientation = 'horizontal',
+  orientation,
   offset = 0,
-  onCapabilityChange,
-  size = 64,
-  style
+  edgeClassName,
+  colorClassName,
+  onCapabilityChange
 }) {
-  const resolvedOrientation = orientation ?? 'horizontal';
   const child = _react.Children.only(children);
   if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
     throw new Error('ScrollShadow expects a single React element child.');
   }
+  const resolvedOrientation = orientation ?? (child.props.horizontal ? 'horizontal' : 'vertical');
+  const trackingEnabled = visibility === 'auto';
+  const startOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const endOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const fadeDistance = _styles.SCROLL_SHADOW_SIZE_PX[size];
+
+  // Opacity tracks the distance to each edge, so the fade eases out over the last
+  // `fadeDistance` px of scroll instead of cutting when the edge is reached.
+  const handleDistanceChange = (0, _react.useCallback)(({
+    before,
+    after
+  }) => {
+    startOpacity.setValue(Math.min(1, before / fadeDistance));
+    endOpacity.setValue(Math.min(1, after / fadeDistance));
+  }, [startOpacity, endOpacity, fadeDistance]);
   const {
     capability,
     handleContentSizeChange,
     handleLayout,
     handleScroll
-  } = (0, _useScrollShadow.useScrollShadow)({
+  } = (0, _useScrollShadow.useScrollShadowTracker)({
     offset,
     onCapabilityChange,
-    orientation: resolvedOrientation
+    onDistanceChange: handleDistanceChange,
+    orientation: resolvedOrientation,
+    enabled: trackingEnabled
   });
-  const overlayFade = (0, _utils.cn)(fadeFromClassName, 'to-transparent');
-  const overlayAxisSize = resolvedOrientation === 'horizontal' ? {
-    width: size
-  } : {
-    height: size
+  const showStart = shouldShowEdge(visibility, 'start', capability);
+  const showEnd = shouldShowEdge(visibility, 'end', capability);
+  const useReanimatedScroll = (0, _useComposedScrollHandler.isReanimatedScrollHandler)(child.props.onScroll);
+  const trackedChildProps = {
+    className: (0, _utils.cn)((0, _styles.scrollShadowVariants)({
+      hideScrollBar
+    }), child.props.className),
+    // Keep measuring while visibility is forced so a switch back to auto fades
+    // from the scroll position the user already reached.
+    onContentSizeChange: (width, height) => {
+      handleContentSizeChange(width, height);
+      child.props.onContentSizeChange?.(width, height);
+    },
+    onLayout: event => {
+      handleLayout(event);
+      child.props.onLayout?.(event);
+    },
+    ...(useReanimatedScroll ? {} : {
+      onScroll: (0, _useComposedScrollHandler.composeScrollHandler)(handleScroll, child.props.onScroll)
+    }),
+    ...(child.props.scrollEventThrottle === undefined ? {
+      scrollEventThrottle: 16
+    } : {})
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     className: (0, _utils.cn)((0, _styles.scrollShadowContainerVariants)(), className),
     style: style,
-    children: [/*#__PURE__*/(0, _react.cloneElement)(child, {
-      className: (0, _utils.cn)((0, _styles.scrollShadowVariants)({
-        hideScrollBar
-      }), child.props.className),
-      onContentSizeChange: (width, height) => {
-        handleContentSizeChange(width, height);
-        child.props.onContentSizeChange?.(width, height);
-      },
-      onLayout: event => {
-        handleLayout(event);
-        child.props.onLayout?.(event);
-      },
-      onScroll: event => {
-        handleScroll(event);
-        child.props.onScroll?.(event);
-      },
-      style: _reactNative.StyleSheet.flatten([child.props.style])
-    }), capability.canScrollBefore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      className: (0, _utils.cn)((0, _styles.scrollShadowOverlayVariants)({
-        orientation: resolvedOrientation,
-        edge: 'start'
-      }), overlayFade),
-      style: overlayAxisSize
-    }) : null, capability.canScrollAfter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      className: (0, _utils.cn)((0, _styles.scrollShadowOverlayVariants)({
-        orientation: resolvedOrientation,
-        edge: 'end'
-      }), overlayFade),
-      style: overlayAxisSize
+    ...(0, _primitives.mergeDataAttributes)((0, _primitives.dataAttributes)({
+      slot: 'scroll-shadow'
+    })),
+    children: [useReanimatedScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReanimatedTrackedChild, {
+      child: child,
+      handleScroll: handleScroll,
+      trackedChildProps: trackedChildProps
+    }) : (/*#__PURE__*/(0, _react.cloneElement)(child, trackedChildProps)), showStart ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollShadowEdge, {
+      colorClassName: colorClassName,
+      edge: "start",
+      edgeClassName: edgeClassName,
+      opacity: trackingEnabled ? startOpacity : undefined,
+      orientation: resolvedOrientation,
+      size: size,
+      surface: surface
+    }) : null, showEnd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollShadowEdge, {
+      colorClassName: colorClassName,
+      edge: "end",
+      edgeClassName: edgeClassName,
+      opacity: trackingEnabled ? endOpacity : undefined,
+      orientation: resolvedOrientation,
+      size: size,
+      surface: surface
     }) : null]
   });
 }
+ScrollShadow.displayName = 'ScrollShadow';
 //# sourceMappingURL=index.js.map

package/lib/commonjs/components/ScrollShadow/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_useScrollShadow","_jsxRuntime","ScrollShadow","children","className","fadeFromClassName","hideScrollBar","orientation","offset","onCapabilityChange","size","style","resolvedOrientation","child","Children","only","isValidElement","Error","capability","handleContentSizeChange","handleLayout","handleScroll","useScrollShadow","overlayFade","cn","overlayAxisSize","width","height","jsxs","View","scrollShadowContainerVariants","cloneElement","scrollShadowVariants","props","onContentSizeChange","onLayout","event","onScroll","StyleSheet","flatten","canScrollBefore","jsx","pointerEvents","scrollShadowOverlayVariants","edge","canScrollAfter"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_uniwind","_primitives","_utils","_gradient","_styles","_useComposedScrollHandler","_useScrollShadow","_jsxRuntime","ScrollShadowEdge","edge","orientation","size","surface","colorClassName","edgeClassName","opacity","surfaceColor","useCSSVariable","SCROLL_SHADOW_SURFACE_CSS_VARS","resolvedColorClassName","useResolveClassNames","customColor","accentColor","backgroundColor","undefined","__DEV__","console","warn","isWeb","Platform","OS","useInlinePath","inlineGradient","getInlineBackgroundImage","String","webGradientClasses","getWebSurfaceGradientClasses","inlineStyle","backgroundImage","experimental_backgroundImage","edgeView","jsx","View","pointerEvents","accessible","accessibilityElementsHidden","importantForAccessibility","className","cn","scrollShadowEdgeVariants","style","mergeDataAttributes","dataAttributes","slot","Animated","StyleSheet","absoluteFill","children","shouldShowEdge","visibility","capability","canScrollBefore","canScrollAfter","ReanimatedTrackedChild","child","handleScroll","trackedChildProps","onScroll","useReanimatedComposedScrollHandler","props","cloneElement","ScrollShadow","hideScrollBar","offset","onCapabilityChange","Children","only","isValidElement","Error","resolvedOrientation","horizontal","trackingEnabled","startOpacity","useRef","Value","current","endOpacity","fadeDistance","SCROLL_SHADOW_SIZE_PX","handleDistanceChange","useCallback","before","after","setValue","Math","min","handleContentSizeChange","handleLayout","useScrollShadowTracker","onDistanceChange","enabled","showStart","showEnd","useReanimatedScroll","isReanimatedScrollHandler","scrollShadowVariants","onContentSizeChange","width","height","onLayout","event","composeScrollHandler","scrollEventThrottle","jsxs","scrollShadowContainerVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ScrollShadow/styles.js

@@ -3,52 +3,96 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollShadowVariants = exports.scrollShadowOverlayVariants = exports.scrollShadowContainerVariants = void 0;
+exports.scrollShadowVariants = exports.scrollShadowEdgeVariants = exports.scrollShadowContainerVariants = exports.SCROLL_SHADOW_SURFACE_FROM_CLASS = exports.SCROLL_SHADOW_SURFACE_CSS_VARS = exports.SCROLL_SHADOW_SIZE_PX = void 0;
 var _utils = require("@cdx-ui/utils");
+const SCROLL_SHADOW_SURFACE_CSS_VARS = exports.SCROLL_SHADOW_SURFACE_CSS_VARS = {
+  background: '--color-surface-background',
+  primary: '--color-surface-primary',
+  secondary: '--color-surface-secondary'
+};
+const SCROLL_SHADOW_SIZE_PX = exports.SCROLL_SHADOW_SIZE_PX = {
+  small: 32,
+  default: 40,
+  large: 72
+};
+const SCROLL_SHADOW_SURFACE_FROM_CLASS = exports.SCROLL_SHADOW_SURFACE_FROM_CLASS = {
+  background: 'from-surface-background',
+  primary: 'from-surface-primary',
+  secondary: 'from-surface-secondary'
+};
 const scrollShadowVariants = exports.scrollShadowVariants = (0, _utils.cva)([], {
   variants: {
-    orientation: {
-      horizontal: '',
-      vertical: ''
-    },
     hideScrollBar: {
       true: 'web:[scrollbar-width:none] web:[&::-webkit-scrollbar]:hidden',
       false: ''
     }
   },
   defaultVariants: {
-    orientation: 'horizontal',
     hideScrollBar: false
   }
 });
 const scrollShadowContainerVariants = exports.scrollShadowContainerVariants = (0, _utils.cva)('relative min-w-0 w-full');
-const scrollShadowOverlayVariants = exports.scrollShadowOverlayVariants = (0, _utils.cva)('pointer-events-none absolute z-10', {
+const scrollShadowEdgeVariants = exports.scrollShadowEdgeVariants = (0, _utils.cva)('pointer-events-none absolute z-10', {
   variants: {
     orientation: {
-      horizontal: '',
-      vertical: ''
+      horizontal: 'top-0 bottom-0',
+      vertical: 'start-0 end-0'
     },
     edge: {
       start: '',
       end: ''
+    },
+    size: {
+      small: '',
+      default: '',
+      large: ''
     }
   },
   compoundVariants: [{
     orientation: 'horizontal',
     edge: 'start',
-    className: 'left-0 top-0 bottom-0 bg-gradient-to-r'
+    className: 'start-0'
   }, {
     orientation: 'horizontal',
     edge: 'end',
-    className: 'right-0 top-0 bottom-0 bg-gradient-to-l'
+    className: 'end-0'
   }, {
     orientation: 'vertical',
     edge: 'start',
-    className: 'left-0 right-0 top-0 bg-gradient-to-b'
+    className: 'top-0'
   }, {
     orientation: 'vertical',
     edge: 'end',
-    className: 'left-0 right-0 bottom-0 bg-gradient-to-t'
-  }]
+    className: 'bottom-0'
+  }, {
+    orientation: 'horizontal',
+    size: 'small',
+    className: 'w-8'
+  }, {
+    orientation: 'horizontal',
+    size: 'default',
+    className: 'w-10'
+  }, {
+    orientation: 'horizontal',
+    size: 'large',
+    className: 'w-18'
+  }, {
+    orientation: 'vertical',
+    size: 'small',
+    className: 'h-8'
+  }, {
+    orientation: 'vertical',
+    size: 'default',
+    className: 'h-10'
+  }, {
+    orientation: 'vertical',
+    size: 'large',
+    className: 'h-18'
+  }],
+  defaultVariants: {
+    orientation: 'vertical',
+    edge: 'start',
+    size: 'default'
+  }
 });
 //# sourceMappingURL=styles.js.map

package/lib/commonjs/components/ScrollShadow/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","scrollShadowVariants","exports","cva","variants","orientation","horizontal","vertical","hideScrollBar","true","false","defaultVariants","scrollShadowContainerVariants","scrollShadowOverlayVariants","edge","start","end","compoundVariants","className"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,UAAG,EAAC,EAAE,EAAE;EAC1CC,QAAQ,EAAE;IACRC,WAAW,EAAE;MACXC,UAAU,EAAE,EAAE;MACdC,QAAQ,EAAE;IACZ,CAAC;IACDC,aAAa,EAAE;MACbC,IAAI,EAAE,8DAA8D;MACpEC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,WAAW,EAAE,YAAY;IACzBG,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;AAEK,MAAMI,6BAA6B,GAAAV,OAAA,CAAAU,6BAAA,GAAG,IAAAT,UAAG,EAAC,yBAAyB,CAAC;AAEpE,MAAMU,2BAA2B,GAAAX,OAAA,CAAAW,2BAAA,GAAG,IAAAV,UAAG,EAAC,mCAAmC,EAAE;EAClFC,QAAQ,EAAE;IACRC,WAAW,EAAE;MACXC,UAAU,EAAE,EAAE;MACdC,QAAQ,EAAE;IACZ,CAAC;IACDO,IAAI,EAAE;MACJC,KAAK,EAAE,EAAE;MACTC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,gBAAgB,EAAE,CAChB;IACEZ,WAAW,EAAE,YAAY;IACzBS,IAAI,EAAE,OAAO;IACbI,SAAS,EAAE;EACb,CAAC,EACD;IACEb,WAAW,EAAE,YAAY;IACzBS,IAAI,EAAE,KAAK;IACXI,SAAS,EAAE;EACb,CAAC,EACD;IACEb,WAAW,EAAE,UAAU;IACvBS,IAAI,EAAE,OAAO;IACbI,SAAS,EAAE;EACb,CAAC,EACD;IACEb,WAAW,EAAE,UAAU;IACvBS,IAAI,EAAE,KAAK;IACXI,SAAS,EAAE;EACb,CAAC;AAEL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_utils","require","SCROLL_SHADOW_SURFACE_CSS_VARS","exports","background","primary","secondary","SCROLL_SHADOW_SIZE_PX","small","default","large","SCROLL_SHADOW_SURFACE_FROM_CLASS","scrollShadowVariants","cva","variants","hideScrollBar","true","false","defaultVariants","scrollShadowContainerVariants","scrollShadowEdgeVariants","orientation","horizontal","vertical","edge","start","end","size","compoundVariants","className"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKO,MAAMC,8BAAmE,GAAAC,OAAA,CAAAD,8BAAA,GAAG;EACjFE,UAAU,EAAE,4BAA4B;EACxCC,OAAO,EAAE,yBAAyB;EAClCC,SAAS,EAAE;AACb,CAAC;AAEM,MAAMC,qBAAuD,GAAAJ,OAAA,CAAAI,qBAAA,GAAG;EACrEC,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AAEM,MAAMC,gCAAqE,GAAAR,OAAA,CAAAQ,gCAAA,GAAG;EACnFP,UAAU,EAAE,yBAAyB;EACrCC,OAAO,EAAE,sBAAsB;EAC/BC,SAAS,EAAE;AACb,CAAC;AAEM,MAAMM,oBAAoB,GAAAT,OAAA,CAAAS,oBAAA,GAAG,IAAAC,UAAG,EAAC,EAAE,EAAE;EAC1CC,QAAQ,EAAE;IACRC,aAAa,EAAE;MACbC,IAAI,EAAE,8DAA8D;MACpEC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;AAEK,MAAMI,6BAA6B,GAAAhB,OAAA,CAAAgB,6BAAA,GAAG,IAAAN,UAAG,EAAC,yBAAyB,CAAC;AAEpE,MAAMO,wBAAwB,GAAAjB,OAAA,CAAAiB,wBAAA,GAAG,IAAAP,UAAG,EAAC,mCAAmC,EAAE;EAC/EC,QAAQ,EAAE;IACRO,WAAW,EAAE;MACXC,UAAU,EAAE,gBAAgB;MAC5BC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,KAAK,EAAE,EAAE;MACTC,GAAG,EAAE;IACP,CAAC;IACDC,IAAI,EAAE;MACJnB,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,EAAE;MACXC,KAAK,EAAE;IACT;EACF,CAAC;EACDkB,gBAAgB,EAAE,CAChB;IAAEP,WAAW,EAAE,YAAY;IAAEG,IAAI,EAAE,OAAO;IAAEK,SAAS,EAAE;EAAU,CAAC,EAClE;IAAER,WAAW,EAAE,YAAY;IAAEG,IAAI,EAAE,KAAK;IAAEK,SAAS,EAAE;EAAQ,CAAC,EAC9D;IAAER,WAAW,EAAE,UAAU;IAAEG,IAAI,EAAE,OAAO;IAAEK,SAAS,EAAE;EAAQ,CAAC,EAC9D;IAAER,WAAW,EAAE,UAAU;IAAEG,IAAI,EAAE,KAAK;IAAEK,SAAS,EAAE;EAAW,CAAC,EAC/D;IAAER,WAAW,EAAE,YAAY;IAAEM,IAAI,EAAE,OAAO;IAAEE,SAAS,EAAE;EAAM,CAAC,EAC9D;IAAER,WAAW,EAAE,YAAY;IAAEM,IAAI,EAAE,SAAS;IAAEE,SAAS,EAAE;EAAO,CAAC,EACjE;IAAER,WAAW,EAAE,YAAY;IAAEM,IAAI,EAAE,OAAO;IAAEE,SAAS,EAAE;EAAO,CAAC,EAC/D;IAAER,WAAW,EAAE,UAAU;IAAEM,IAAI,EAAE,OAAO;IAAEE,SAAS,EAAE;EAAM,CAAC,EAC5D;IAAER,WAAW,EAAE,UAAU;IAAEM,IAAI,EAAE,SAAS;IAAEE,SAAS,EAAE;EAAO,CAAC,EAC/D;IAAER,WAAW,EAAE,UAAU;IAAEM,IAAI,EAAE,OAAO;IAAEE,SAAS,EAAE;EAAO,CAAC,CAC9D;EACDX,eAAe,EAAE;IACfG,WAAW,EAAE,UAAU;IACvBG,IAAI,EAAE,OAAO;IACbG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/ScrollShadow/useComposedScrollHandler.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.composeScrollHandler = composeScrollHandler;
+exports.isReanimatedScrollHandler = isReanimatedScrollHandler;
+exports.useReanimatedComposedScrollHandler = useReanimatedComposedScrollHandler;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _reactNativeWorklets = require("react-native-worklets");
+var _utils = require("@cdx-ui/utils");
+function isReanimatedScrollHandler(handler) {
+  return handler != null && typeof handler !== 'function';
+}
+function composeScrollHandler(internalHandler, externalHandler) {
+  if (typeof externalHandler === 'function') {
+    return (0, _utils.composeEventHandlers)(internalHandler, externalHandler);
+  }
+  return internalHandler;
+}
+
+/**
+ * Only call this when the child already passed a Reanimated scroll handler.
+ * `useAnimatedScrollHandler` requires a Babel worklet, and the published
+ * package is not transformed by that plugin, so the plain ScrollView path
+ * must not mount this hook.
+ */
+function useReanimatedComposedScrollHandler(internalHandler, externalHandler) {
+  const internalHandlerRef = (0, _react.useRef)(internalHandler);
+  internalHandlerRef.current = internalHandler;
+  const internalAnimatedHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
+    onScroll: event => {
+      'worklet';
+
+      // The UI-thread event is a host object. Copy the numbers scheduleOnRN can
+      // serialize; passing the event itself drops contentOffset and contentSize.
+      const {
+        contentOffset,
+        contentSize,
+        layoutMeasurement
+      } = event;
+      (0, _reactNativeWorklets.scheduleOnRN)(internalHandlerRef.current, {
+        nativeEvent: {
+          contentOffset: {
+            x: contentOffset.x,
+            y: contentOffset.y
+          },
+          contentSize: {
+            width: contentSize.width,
+            height: contentSize.height
+          },
+          layoutMeasurement: {
+            width: layoutMeasurement.width,
+            height: layoutMeasurement.height
+          }
+        }
+      });
+    }
+  });
+  return (0, _reactNativeReanimated.useComposedEventHandler)([externalHandler, internalAnimatedHandler]);
+}
+//# sourceMappingURL=useComposedScrollHandler.js.map

package/lib/commonjs/components/ScrollShadow/useComposedScrollHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","_reactNativeWorklets","_utils","isReanimatedScrollHandler","handler","composeScrollHandler","internalHandler","externalHandler","composeEventHandlers","useReanimatedComposedScrollHandler","internalHandlerRef","useRef","current","internalAnimatedHandler","useAnimatedScrollHandler","onScroll","event","contentOffset","contentSize","layoutMeasurement","scheduleOnRN","nativeEvent","x","y","width","height","useComposedEventHandler"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/useComposedScrollHandler.ts"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAIO,SAASI,yBAAyBA,CAACC,OAAgB,EAAW;EACnE,OAAOA,OAAO,IAAI,IAAI,IAAI,OAAOA,OAAO,KAAK,UAAU;AACzD;AAEO,SAASC,oBAAoBA,CAClCC,eAA8B,EAC9BC,eAAwB,EACT;EACf,IAAI,OAAOA,eAAe,KAAK,UAAU,EAAE;IACzC,OAAO,IAAAC,2BAAoB,EAACF,eAAe,EAAEC,eAAgC,CAAC;EAChF;EAEA,OAAOD,eAAe;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,kCAAkCA,CAChDH,eAA8B,EAC9BC,eAAwB,EACf;EACT,MAAMG,kBAAkB,GAAG,IAAAC,aAAM,EAACL,eAAe,CAAC;EAClDI,kBAAkB,CAACE,OAAO,GAAGN,eAAe;EAE5C,MAAMO,uBAAuB,GAAG,IAAAC,+CAAwB,EAAC;IACvDC,QAAQ,EAAGC,KAAK,IAAK;MACnB,SAAS;;MACT;MACA;MACA,MAAM;QAAEC,aAAa;QAAEC,WAAW;QAAEC;MAAkB,CAAC,GAAGH,KAAK;MAE/D,IAAAI,iCAAY,EAACV,kBAAkB,CAACE,OAAO,EAAE;QACvCS,WAAW,EAAE;UACXJ,aAAa,EAAE;YAAEK,CAAC,EAAEL,aAAa,CAACK,CAAC;YAAEC,CAAC,EAAEN,aAAa,CAACM;UAAE,CAAC;UACzDL,WAAW,EAAE;YAAEM,KAAK,EAAEN,WAAW,CAACM,KAAK;YAAEC,MAAM,EAAEP,WAAW,CAACO;UAAO,CAAC;UACrEN,iBAAiB,EAAE;YACjBK,KAAK,EAAEL,iBAAiB,CAACK,KAAK;YAC9BC,MAAM,EAAEN,iBAAiB,CAACM;UAC5B;QACF;MACF,CAA4C,CAAC;IAC/C;EACF,CAAC,CAAC;EAEF,OAAO,IAAAC,8CAAuB,EAAC,CAACnB,eAAe,EAAWM,uBAAuB,CAAC,CAAC;AACrF","ignoreList":[]}

package/lib/commonjs/components/ScrollShadow/useScrollShadow.js

@@ -3,13 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.normalizeAxisScrollOffset = normalizeAxisScrollOffset;
 exports.useScrollShadow = useScrollShadow;
+exports.useScrollShadowTracker = useScrollShadowTracker;
 var _react = require("react");
+var _reactNative = require("react-native");
 const INITIAL_METRICS = {
   scrollOffset: 0,
   viewportSize: 0,
   contentSize: 0
 };
+function normalizeAxisScrollOffset(rawOffset, orientation, maxOffset, platform = _reactNative.Platform.OS) {
+  // Web RTL reports a negative x and browsers do not rubber-band it. Native RTL
+  // stays positive, so a negative native offset is overscroll at the start edge.
+  const offset = orientation === 'horizontal' && platform === 'web' ? Math.abs(rawOffset) : rawOffset;
+  return Math.min(Math.max(0, offset), Math.max(0, maxOffset));
+}
 function getScrollCapability(metrics, offset) {
   const {
     scrollOffset,
@@ -27,17 +36,45 @@ function getScrollCapability(metrics, offset) {
     canScrollAfter: scrollOffset + viewportSize + offset < contentSize
   };
 }
-function useScrollShadow({
-  orientation = 'horizontal',
+function getScrollDistance(metrics, offset) {
+  const {
+    scrollOffset,
+    viewportSize,
+    contentSize
+  } = metrics;
+  if (viewportSize <= 0 || contentSize <= viewportSize) {
+    return {
+      before: 0,
+      after: 0
+    };
+  }
+  return {
+    before: Math.max(0, scrollOffset - offset),
+    after: Math.max(0, contentSize - viewportSize - scrollOffset - offset)
+  };
+}
+function useScrollShadow(options = {}) {
+  return useScrollShadowTracker(options);
+}
+function useScrollShadowTracker({
+  orientation = 'vertical',
   offset = 0,
-  onCapabilityChange
+  enabled = true,
+  onCapabilityChange,
+  onDistanceChange
 } = {}) {
-  const metricsRef = (0, _react.useRef)(INITIAL_METRICS);
+  const metricsRef = (0, _react.useRef)({
+    ...INITIAL_METRICS
+  });
   const [capability, setCapability] = (0, _react.useState)({
     canScrollBefore: false,
     canScrollAfter: false
   });
   const updateCapability = (0, _react.useCallback)(() => {
+    if (!enabled) {
+      return;
+    }
+    onDistanceChange?.(getScrollDistance(metricsRef.current, offset));
     const nextCapability = getScrollCapability(metricsRef.current, offset);
     setCapability(prev => {
       if (prev.canScrollBefore === nextCapability.canScrollBefore && prev.canScrollAfter === nextCapability.canScrollAfter) {
@@ -46,7 +83,7 @@ function useScrollShadow({
       onCapabilityChange?.(nextCapability);
       return nextCapability;
     });
-  }, [offset, onCapabilityChange]);
+  }, [enabled, offset, onCapabilityChange, onDistanceChange]);
   (0, _react.useEffect)(() => {
     updateCapability();
   }, [updateCapability]);
@@ -68,9 +105,12 @@ function useScrollShadow({
       layoutMeasurement,
       contentSize
     } = event.nativeEvent;
-    metricsRef.current.scrollOffset = orientation === 'vertical' ? contentOffset.y : contentOffset.x;
-    metricsRef.current.viewportSize = orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
-    metricsRef.current.contentSize = orientation === 'vertical' ? contentSize.height : contentSize.width;
+    const rawOffset = orientation === 'vertical' ? contentOffset.y : contentOffset.x;
+    const viewportSize = orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
+    const axisContentSize = orientation === 'vertical' ? contentSize.height : contentSize.width;
+    metricsRef.current.scrollOffset = normalizeAxisScrollOffset(rawOffset, orientation, axisContentSize - viewportSize);
+    metricsRef.current.viewportSize = viewportSize;
+    metricsRef.current.contentSize = axisContentSize;
     updateCapability();
   }, [orientation, updateCapability]);
   return {

package/lib/commonjs/components/ScrollShadow/useScrollShadow.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","INITIAL_METRICS","scrollOffset","viewportSize","contentSize","getScrollCapability","metrics","offset","canScrollBefore","canScrollAfter","useScrollShadow","orientation","onCapabilityChange","metricsRef","useRef","capability","setCapability","useState","updateCapability","useCallback","nextCapability","current","prev","useEffect","handleLayout","event","width","height","nativeEvent","layout","handleContentSizeChange","handleScroll","contentOffset","layoutMeasurement","y","x"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/useScrollShadow.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","INITIAL_METRICS","scrollOffset","viewportSize","contentSize","normalizeAxisScrollOffset","rawOffset","orientation","maxOffset","platform","Platform","OS","offset","Math","abs","min","max","getScrollCapability","metrics","canScrollBefore","canScrollAfter","getScrollDistance","before","after","useScrollShadow","options","useScrollShadowTracker","enabled","onCapabilityChange","onDistanceChange","metricsRef","useRef","capability","setCapability","useState","updateCapability","useCallback","current","nextCapability","prev","useEffect","handleLayout","event","width","height","nativeEvent","layout","handleContentSizeChange","handleScroll","contentOffset","layoutMeasurement","y","x","axisContentSize"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/useScrollShadow.ts"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAqCA,MAAME,eAA8B,GAAG;EACrCC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,CAAC;EACfC,WAAW,EAAE;AACf,CAAC;AAEM,SAASC,yBAAyBA,CACvCC,SAAiB,EACjBC,WAAsC,EACtCC,SAAiB,EACjBC,QAA4B,GAAGC,qBAAQ,CAACC,EAAE,EAClC;EACR;EACA;EACA,MAAMC,MAAM,GACVL,WAAW,KAAK,YAAY,IAAIE,QAAQ,KAAK,KAAK,GAAGI,IAAI,CAACC,GAAG,CAACR,SAAS,CAAC,GAAGA,SAAS;EAEtF,OAAOO,IAAI,CAACE,GAAG,CAACF,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEJ,MAAM,CAAC,EAAEC,IAAI,CAACG,GAAG,CAAC,CAAC,EAAER,SAAS,CAAC,CAAC;AAC9D;AAEA,SAASS,mBAAmBA,CAACC,OAAsB,EAAEN,MAAc,EAA0B;EAC3F,MAAM;IAAEV,YAAY;IAAEC,YAAY;IAAEC;EAAY,CAAC,GAAGc,OAAO;EAE3D,IAAIf,YAAY,IAAI,CAAC,IAAIC,WAAW,IAAID,YAAY,EAAE;IACpD,OAAO;MAAEgB,eAAe,EAAE,KAAK;MAAEC,cAAc,EAAE;IAAM,CAAC;EAC1D;EAEA,OAAO;IACLD,eAAe,EAAEjB,YAAY,GAAGU,MAAM;IACtCQ,cAAc,EAAElB,YAAY,GAAGC,YAAY,GAAGS,MAAM,GAAGR;EACzD,CAAC;AACH;AAEA,SAASiB,iBAAiBA,CAACH,OAAsB,EAAEN,MAAc,EAAwB;EACvF,MAAM;IAAEV,YAAY;IAAEC,YAAY;IAAEC;EAAY,CAAC,GAAGc,OAAO;EAE3D,IAAIf,YAAY,IAAI,CAAC,IAAIC,WAAW,IAAID,YAAY,EAAE;IACpD,OAAO;MAAEmB,MAAM,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAC;EAChC;EAEA,OAAO;IACLD,MAAM,EAAET,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEd,YAAY,GAAGU,MAAM,CAAC;IAC1CW,KAAK,EAAEV,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEZ,WAAW,GAAGD,YAAY,GAAGD,YAAY,GAAGU,MAAM;EACvE,CAAC;AACH;AAEO,SAASY,eAAeA,CAACC,OAA+B,GAAG,CAAC,CAAC,EAAyB;EAC3F,OAAOC,sBAAsB,CAACD,OAAO,CAAC;AACxC;AAEO,SAASC,sBAAsBA,CAAC;EACrCnB,WAAW,GAAG,UAAU;EACxBK,MAAM,GAAG,CAAC;EACVe,OAAO,GAAG,IAAI;EACdC,kBAAkB;EAClBC;AAC0B,CAAC,GAAG,CAAC,CAAC,EAAyB;EACzD,MAAMC,UAAU,GAAG,IAAAC,aAAM,EAAgB;IAAE,GAAG9B;EAAgB,CAAC,CAAC;EAChE,MAAM,CAAC+B,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAyB;IACnEf,eAAe,EAAE,KAAK;IACtBC,cAAc,EAAE;EAClB,CAAC,CAAC;EAEF,MAAMe,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACzC,IAAI,CAACT,OAAO,EAAE;MACZ;IACF;IAEAE,gBAAgB,GAAGR,iBAAiB,CAACS,UAAU,CAACO,OAAO,EAAEzB,MAAM,CAAC,CAAC;IACjE,MAAM0B,cAAc,GAAGrB,mBAAmB,CAACa,UAAU,CAACO,OAAO,EAAEzB,MAAM,CAAC;IAEtEqB,aAAa,CAAEM,IAAI,IAAK;MACtB,IACEA,IAAI,CAACpB,eAAe,KAAKmB,cAAc,CAACnB,eAAe,IACvDoB,IAAI,CAACnB,cAAc,KAAKkB,cAAc,CAAClB,cAAc,EACrD;QACA,OAAOmB,IAAI;MACb;MAEAX,kBAAkB,GAAGU,cAAc,CAAC;MACpC,OAAOA,cAAc;IACvB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACX,OAAO,EAAEf,MAAM,EAAEgB,kBAAkB,EAAEC,gBAAgB,CAAC,CAAC;EAE3D,IAAAW,gBAAS,EAAC,MAAM;IACdL,gBAAgB,CAAC,CAAC;EACpB,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,MAAMM,YAAY,GAAG,IAAAL,kBAAW,EAC7BM,KAAwB,IAAK;IAC5B,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAACC,MAAM;IAClDhB,UAAU,CAACO,OAAO,CAAClC,YAAY,GAAGI,WAAW,KAAK,UAAU,GAAGqC,MAAM,GAAGD,KAAK;IAC7ER,gBAAgB,CAAC,CAAC;EACpB,CAAC,EACD,CAAC5B,WAAW,EAAE4B,gBAAgB,CAChC,CAAC;EAED,MAAMY,uBAAuB,GAAG,IAAAX,kBAAW,EACzC,CAACO,KAAa,EAAEC,MAAc,KAAK;IACjCd,UAAU,CAACO,OAAO,CAACjC,WAAW,GAAGG,WAAW,KAAK,UAAU,GAAGqC,MAAM,GAAGD,KAAK;IAC5ER,gBAAgB,CAAC,CAAC;EACpB,CAAC,EACD,CAAC5B,WAAW,EAAE4B,gBAAgB,CAChC,CAAC;EAED,MAAMa,YAAY,GAAG,IAAAZ,kBAAW,EAC7BM,KAA8C,IAAK;IAClD,MAAM;MAAEO,aAAa;MAAEC,iBAAiB;MAAE9C;IAAY,CAAC,GAAGsC,KAAK,CAACG,WAAW;IAC3E,MAAMvC,SAAS,GAAGC,WAAW,KAAK,UAAU,GAAG0C,aAAa,CAACE,CAAC,GAAGF,aAAa,CAACG,CAAC;IAEhF,MAAMjD,YAAY,GAChBI,WAAW,KAAK,UAAU,GAAG2C,iBAAiB,CAACN,MAAM,GAAGM,iBAAiB,CAACP,KAAK;IACjF,MAAMU,eAAe,GAAG9C,WAAW,KAAK,UAAU,GAAGH,WAAW,CAACwC,MAAM,GAAGxC,WAAW,CAACuC,KAAK;IAE3Fb,UAAU,CAACO,OAAO,CAACnC,YAAY,GAAGG,yBAAyB,CACzDC,SAAS,EACTC,WAAW,EACX8C,eAAe,GAAGlD,YACpB,CAAC;IACD2B,UAAU,CAACO,OAAO,CAAClC,YAAY,GAAGA,YAAY;IAC9C2B,UAAU,CAACO,OAAO,CAACjC,WAAW,GAAGiD,eAAe;IAEhDlB,gBAAgB,CAAC,CAAC;EACpB,CAAC,EACD,CAAC5B,WAAW,EAAE4B,gBAAgB,CAChC,CAAC;EAED,OAAO;IACLH,UAAU;IACVS,YAAY;IACZM,uBAAuB;IACvBC;EACF,CAAC;AACH","ignoreList":[]}