@cdx-ui/components 0.2.3 → 0.2.5

package/lib/module/components/ScrollShadow/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["I18nManager","SCROLL_SHADOW_SURFACE_FROM_CLASS","getWebSurfaceGradientClasses","surface","orientation","edge","fromClass","getInlineBackgroundImage","color","isRTL"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/gradient.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,cAAc;AAC1C,SAASC,gCAAgC,QAAkC,UAAU;AAKrF,OAAO,SAASC,4BAA4BA,CAC1CC,OAA4B,EAC5BC,WAAoC,EACpCC,IAAsB,EACd;EACR,MAAMC,SAAS,GAAGL,gCAAgC,CAACE,OAAO,CAAC;EAE3D,IAAIC,WAAW,KAAK,UAAU,EAAE;IAC9B,OAAOC,IAAI,KAAK,OAAO,GACnB,oBAAoBC,SAAS,iBAAiB,GAC9C,oBAAoBA,SAAS,iBAAiB;EACpD;;EAEA;EACA;EACA,OAAOD,IAAI,KAAK,OAAO,GACnB,6CAA6CC,SAAS,iBAAiB,GACvE,6CAA6CA,SAAS,iBAAiB;AAC7E;AAEA,OAAO,SAASC,wBAAwBA,CACtCC,KAAa,EACbJ,WAAoC,EACpCC,IAAsB,EACtBI,KAAK,GAAGT,WAAW,CAACS,KAAK,EACjB;EACR,IAAIL,WAAW,KAAK,UAAU,EAAE;IAC9B,OAAOC,IAAI,KAAK,OAAO,GACnB,8BAA8BG,KAAK,gBAAgB,GACnD,2BAA2BA,KAAK,gBAAgB;EACtD;EAEA,IAAIC,KAAK,EAAE;IACT,OAAOJ,IAAI,KAAK,OAAO,GACnB,4BAA4BG,KAAK,gBAAgB,GACjD,6BAA6BA,KAAK,gBAAgB;EACxD;EAEA,OAAOH,IAAI,KAAK,OAAO,GACnB,6BAA6BG,KAAK,gBAAgB,GAClD,4BAA4BA,KAAK,gBAAgB;AACvD","ignoreList":[]}

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

@@ -1,78 +1,200 @@
 "use strict";
 
-import { Children, cloneElement, isValidElement } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Children, cloneElement, isValidElement, useCallback, useRef } from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { useCSSVariable, useResolveClassNames } from 'uniwind';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { scrollShadowContainerVariants, scrollShadowOverlayVariants, scrollShadowVariants } from './styles';
-import { useScrollShadow } from './useScrollShadow';
+import { getInlineBackgroundImage, getWebSurfaceGradientClasses } from './gradient';
+import { SCROLL_SHADOW_SIZE_PX, SCROLL_SHADOW_SURFACE_CSS_VARS, scrollShadowContainerVariants, scrollShadowEdgeVariants, scrollShadowVariants } from './styles';
+import { composeScrollHandler, isReanimatedScrollHandler, useReanimatedComposedScrollHandler } from './useComposedScrollHandler';
+import { useScrollShadowTracker } from './useScrollShadow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { useScrollShadow } from './useScrollShadow';
+function ScrollShadowEdge({
+  edge,
+  orientation,
+  size,
+  surface,
+  colorClassName,
+  edgeClassName,
+  opacity
+}) {
+  const surfaceColor = useCSSVariable(SCROLL_SHADOW_SURFACE_CSS_VARS[surface]) || 'transparent';
+  const resolvedColorClassName = 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 = 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 ? getInlineBackgroundImage(String(customColor ?? surfaceColor), orientation, edge, false) : undefined;
+  const webGradientClasses = useInlinePath ? undefined : getWebSurfaceGradientClasses(surface, orientation, edge);
+  const inlineStyle = inlineGradient ? isWeb ? {
+    backgroundImage: inlineGradient
+  } : {
+    experimental_backgroundImage: inlineGradient
+  } : undefined;
+  const edgeView = /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true,
+    className: cn(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,
+    ...mergeDataAttributes(dataAttributes({
+      slot: 'scroll-shadow-edge',
+      edge
+    }))
+  });
+  if (!opacity) {
+    return edgeView;
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    "aria-hidden": true,
+    style: [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 = useReanimatedComposedScrollHandler(handleScroll, child.props.onScroll);
+  return /*#__PURE__*/cloneElement(child, {
+    ...trackedChildProps,
+    onScroll
+  });
+}
 export 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 = Children.only(children);
   if (! /*#__PURE__*/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 = useRef(new Animated.Value(0)).current;
+  const endOpacity = useRef(new Animated.Value(0)).current;
+  const fadeDistance = 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 = 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
-  } = useScrollShadow({
+  } = useScrollShadowTracker({
     offset,
     onCapabilityChange,
-    orientation: resolvedOrientation
+    onDistanceChange: handleDistanceChange,
+    orientation: resolvedOrientation,
+    enabled: trackingEnabled
   });
-  const overlayFade = 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 = isReanimatedScrollHandler(child.props.onScroll);
+  const trackedChildProps = {
+    className: cn(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: composeScrollHandler(handleScroll, child.props.onScroll)
+    }),
+    ...(child.props.scrollEventThrottle === undefined ? {
+      scrollEventThrottle: 16
+    } : {})
   };
   return /*#__PURE__*/_jsxs(View, {
     className: cn(scrollShadowContainerVariants(), className),
     style: style,
-    children: [/*#__PURE__*/cloneElement(child, {
-      className: cn(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: StyleSheet.flatten([child.props.style])
-    }), capability.canScrollBefore ? /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      className: cn(scrollShadowOverlayVariants({
-        orientation: resolvedOrientation,
-        edge: 'start'
-      }), overlayFade),
-      style: overlayAxisSize
-    }) : null, capability.canScrollAfter ? /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      className: cn(scrollShadowOverlayVariants({
-        orientation: resolvedOrientation,
-        edge: 'end'
-      }), overlayFade),
-      style: overlayAxisSize
+    ...mergeDataAttributes(dataAttributes({
+      slot: 'scroll-shadow'
+    })),
+    children: [useReanimatedScroll ? /*#__PURE__*/_jsx(ReanimatedTrackedChild, {
+      child: child,
+      handleScroll: handleScroll,
+      trackedChildProps: trackedChildProps
+    }) : (/*#__PURE__*/cloneElement(child, trackedChildProps)), showStart ? /*#__PURE__*/_jsx(ScrollShadowEdge, {
+      colorClassName: colorClassName,
+      edge: "start",
+      edgeClassName: edgeClassName,
+      opacity: trackingEnabled ? startOpacity : undefined,
+      orientation: resolvedOrientation,
+      size: size,
+      surface: surface
+    }) : null, showEnd ? /*#__PURE__*/_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/module/components/ScrollShadow/index.js.map

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

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

@@ -1,50 +1,94 @@
 "use strict";
 
 import { cva } from '@cdx-ui/utils';
+export const SCROLL_SHADOW_SURFACE_CSS_VARS = {
+  background: '--color-surface-background',
+  primary: '--color-surface-primary',
+  secondary: '--color-surface-secondary'
+};
+export const SCROLL_SHADOW_SIZE_PX = {
+  small: 32,
+  default: 40,
+  large: 72
+};
+export const SCROLL_SHADOW_SURFACE_FROM_CLASS = {
+  background: 'from-surface-background',
+  primary: 'from-surface-primary',
+  secondary: 'from-surface-secondary'
+};
 export const scrollShadowVariants = cva([], {
   variants: {
-    orientation: {
-      horizontal: '',
-      vertical: ''
-    },
     hideScrollBar: {
       true: 'web:[scrollbar-width:none] web:[&::-webkit-scrollbar]:hidden',
       false: ''
     }
   },
   defaultVariants: {
-    orientation: 'horizontal',
     hideScrollBar: false
   }
 });
 export const scrollShadowContainerVariants = cva('relative min-w-0 w-full');
-export const scrollShadowOverlayVariants = cva('pointer-events-none absolute z-10', {
+export const scrollShadowEdgeVariants = 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/module/components/ScrollShadow/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["cva","scrollShadowVariants","variants","orientation","horizontal","vertical","hideScrollBar","true","false","defaultVariants","scrollShadowContainerVariants","scrollShadowOverlayVariants","edge","start","end","compoundVariants","className"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,eAAe;AAEtD,OAAO,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,EAAE,EAAE;EAC1CE,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;AAEF,OAAO,MAAMI,6BAA6B,GAAGV,GAAG,CAAC,yBAAyB,CAAC;AAE3E,OAAO,MAAMW,2BAA2B,GAAGX,GAAG,CAAC,mCAAmC,EAAE;EAClFE,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":["cva","SCROLL_SHADOW_SURFACE_CSS_VARS","background","primary","secondary","SCROLL_SHADOW_SIZE_PX","small","default","large","SCROLL_SHADOW_SURFACE_FROM_CLASS","scrollShadowVariants","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,SAASA,GAAG,QAA2B,eAAe;AAKtD,OAAO,MAAMC,8BAAmE,GAAG;EACjFC,UAAU,EAAE,4BAA4B;EACxCC,OAAO,EAAE,yBAAyB;EAClCC,SAAS,EAAE;AACb,CAAC;AAED,OAAO,MAAMC,qBAAuD,GAAG;EACrEC,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,gCAAqE,GAAG;EACnFP,UAAU,EAAE,yBAAyB;EACrCC,OAAO,EAAE,sBAAsB;EAC/BC,SAAS,EAAE;AACb,CAAC;AAED,OAAO,MAAMM,oBAAoB,GAAGV,GAAG,CAAC,EAAE,EAAE;EAC1CW,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;AAEF,OAAO,MAAMI,6BAA6B,GAAGhB,GAAG,CAAC,yBAAyB,CAAC;AAE3E,OAAO,MAAMiB,wBAAwB,GAAGjB,GAAG,CAAC,mCAAmC,EAAE;EAC/EW,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;MACJlB,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,EAAE;MACXC,KAAK,EAAE;IACT;EACF,CAAC;EACDiB,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/module/components/ScrollShadow/useComposedScrollHandler.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { useRef } from 'react';
+import { useAnimatedScrollHandler, useComposedEventHandler } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { composeEventHandlers } from '@cdx-ui/utils';
+export function isReanimatedScrollHandler(handler) {
+  return handler != null && typeof handler !== 'function';
+}
+export function composeScrollHandler(internalHandler, externalHandler) {
+  if (typeof externalHandler === 'function') {
+    return 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.
+ */
+export function useReanimatedComposedScrollHandler(internalHandler, externalHandler) {
+  const internalHandlerRef = useRef(internalHandler);
+  internalHandlerRef.current = internalHandler;
+  const internalAnimatedHandler = 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;
+      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 useComposedEventHandler([externalHandler, internalAnimatedHandler]);
+}
+//# sourceMappingURL=useComposedScrollHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useAnimatedScrollHandler","useComposedEventHandler","scheduleOnRN","composeEventHandlers","isReanimatedScrollHandler","handler","composeScrollHandler","internalHandler","externalHandler","useReanimatedComposedScrollHandler","internalHandlerRef","current","internalAnimatedHandler","onScroll","event","contentOffset","contentSize","layoutMeasurement","nativeEvent","x","y","width","height"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/useComposedScrollHandler.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,OAAO;AAE9B,SAASC,wBAAwB,EAAEC,uBAAuB,QAAQ,yBAAyB;AAC3F,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,oBAAoB,QAAQ,eAAe;AAIpD,OAAO,SAASC,yBAAyBA,CAACC,OAAgB,EAAW;EACnE,OAAOA,OAAO,IAAI,IAAI,IAAI,OAAOA,OAAO,KAAK,UAAU;AACzD;AAEA,OAAO,SAASC,oBAAoBA,CAClCC,eAA8B,EAC9BC,eAAwB,EACT;EACf,IAAI,OAAOA,eAAe,KAAK,UAAU,EAAE;IACzC,OAAOL,oBAAoB,CAACI,eAAe,EAAEC,eAAgC,CAAC;EAChF;EAEA,OAAOD,eAAe;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,kCAAkCA,CAChDF,eAA8B,EAC9BC,eAAwB,EACf;EACT,MAAME,kBAAkB,GAAGX,MAAM,CAACQ,eAAe,CAAC;EAClDG,kBAAkB,CAACC,OAAO,GAAGJ,eAAe;EAE5C,MAAMK,uBAAuB,GAAGZ,wBAAwB,CAAC;IACvDa,QAAQ,EAAGC,KAAK,IAAK;MACnB,SAAS;;MACT;MACA;MACA,MAAM;QAAEC,aAAa;QAAEC,WAAW;QAAEC;MAAkB,CAAC,GAAGH,KAAK;MAE/DZ,YAAY,CAACQ,kBAAkB,CAACC,OAAO,EAAE;QACvCO,WAAW,EAAE;UACXH,aAAa,EAAE;YAAEI,CAAC,EAAEJ,aAAa,CAACI,CAAC;YAAEC,CAAC,EAAEL,aAAa,CAACK;UAAE,CAAC;UACzDJ,WAAW,EAAE;YAAEK,KAAK,EAAEL,WAAW,CAACK,KAAK;YAAEC,MAAM,EAAEN,WAAW,CAACM;UAAO,CAAC;UACrEL,iBAAiB,EAAE;YACjBI,KAAK,EAAEJ,iBAAiB,CAACI,KAAK;YAC9BC,MAAM,EAAEL,iBAAiB,CAACK;UAC5B;QACF;MACF,CAA4C,CAAC;IAC/C;EACF,CAAC,CAAC;EAEF,OAAOrB,uBAAuB,CAAC,CAACO,eAAe,EAAWI,uBAAuB,CAAC,CAAC;AACrF","ignoreList":[]}

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

@@ -1,11 +1,18 @@
 "use strict";
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
 const INITIAL_METRICS = {
   scrollOffset: 0,
   viewportSize: 0,
   contentSize: 0
 };
+export function normalizeAxisScrollOffset(rawOffset, orientation, maxOffset, platform = 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,
@@ -23,17 +30,45 @@ function getScrollCapability(metrics, offset) {
     canScrollAfter: scrollOffset + viewportSize + offset < contentSize
   };
 }
-export 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)
+  };
+}
+export function useScrollShadow(options = {}) {
+  return useScrollShadowTracker(options);
+}
+export function useScrollShadowTracker({
+  orientation = 'vertical',
   offset = 0,
-  onCapabilityChange
+  enabled = true,
+  onCapabilityChange,
+  onDistanceChange
 } = {}) {
-  const metricsRef = useRef(INITIAL_METRICS);
+  const metricsRef = useRef({
+    ...INITIAL_METRICS
+  });
   const [capability, setCapability] = useState({
     canScrollBefore: false,
     canScrollAfter: false
   });
   const updateCapability = 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) {
@@ -42,7 +77,7 @@ export function useScrollShadow({
       onCapabilityChange?.(nextCapability);
       return nextCapability;
     });
-  }, [offset, onCapabilityChange]);
+  }, [enabled, offset, onCapabilityChange, onDistanceChange]);
   useEffect(() => {
     updateCapability();
   }, [updateCapability]);
@@ -64,9 +99,12 @@ export 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/module/components/ScrollShadow/useScrollShadow.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useRef","useState","INITIAL_METRICS","scrollOffset","viewportSize","contentSize","getScrollCapability","metrics","offset","canScrollBefore","canScrollAfter","useScrollShadow","orientation","onCapabilityChange","metricsRef","capability","setCapability","updateCapability","nextCapability","current","prev","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":["useCallback","useEffect","useRef","useState","Platform","INITIAL_METRICS","scrollOffset","viewportSize","contentSize","normalizeAxisScrollOffset","rawOffset","orientation","maxOffset","platform","OS","offset","Math","abs","min","max","getScrollCapability","metrics","canScrollBefore","canScrollAfter","getScrollDistance","before","after","useScrollShadow","options","useScrollShadowTracker","enabled","onCapabilityChange","onDistanceChange","metricsRef","capability","setCapability","updateCapability","current","nextCapability","prev","handleLayout","event","width","height","nativeEvent","layout","handleContentSizeChange","handleScroll","contentOffset","layoutMeasurement","y","x","axisContentSize"],"sourceRoot":"../../../../src","sources":["components/ScrollShadow/useScrollShadow.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Stack/HStack.js

@@ -1,8 +1,9 @@
 "use strict";
 
 import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box } from '../Box';
 import { hStackRootVariants } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const HStack = /*#__PURE__*/forwardRef(({
@@ -13,7 +14,7 @@ export const HStack = /*#__PURE__*/forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     className: cn(hStackRootVariants({
       reversed,
@@ -21,6 +22,9 @@ export const HStack = /*#__PURE__*/forwardRef(({
     }), className),
     style: style,
     ...restProps,
+    ...mergeDataAttributes(dataAttributes({
+      slot: 'hstack'
+    }), restProps),
     children: children
   });
 });

package/lib/module/components/Stack/HStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","cn","hStackRootVariants","jsx","_jsx","HStack","reversed","space","style","className","children","restProps","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/HStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGN,UAAU,CAC9B,CACE;EAAEO,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACJ,IAAI;IACHY,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAER,EAAE,CAACC,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAAD,QAAA,EAEZA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDL,MAAM,CAACQ,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","dataAttributes","mergeDataAttributes","cn","Box","hStackRootVariants","jsx","_jsx","HStack","reversed","space","style","className","children","restProps","ref","slot","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/HStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,oBAAoB;AACxE,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,GAAG,QAAuB,QAAQ;AAC3C,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGR,UAAU,CAC9B,CACE;EAAES,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACH,GAAG;IACFW,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAET,EAAE,CAACE,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAA,GAETZ,mBAAmB,CAACD,cAAc,CAAC;MAAEe,IAAI,EAAE;IAAS,CAAC,CAAC,EAAEF,SAAS,CAAC;IAAAD,QAAA,EAErEA;EAAQ,CACN,CAAC;AAEV,CACF,CAAC;AAEDL,MAAM,CAACS,WAAW,GAAG,QAAQ","ignoreList":[]}