@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/Carousel/Carousel.js

@@ -1,587 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Carousel = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _index3 = require("../Skeleton/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
- *
- * Backed by a virtualized FlatList for memory efficiency. Dot and bar
- * pagination track the scroll gesture through `Animated.event`.
- *
- * USAGE:
- *
- * const ref = useRef<CarouselRef>(null);
- * <Carousel
- *   data={items}
- *   renderItem={(item) => <Card {...item} />}
- *   autoPlay
- *   loop
- * />
- *
- * ref.current?.scrollTo(2);
- * ref.current?.next();
- * ref.current?.prev();
- */
-
-// We intentionally use a generic forwardRef wrapper — the inner component is
-// untyped at the generic level (forwardRef can't preserve generics in TS yet),
-// so we cast via a typed factory below.
-const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    data,
-    renderItem,
-    keyExtractor,
-    index: controlledIndex,
-    defaultIndex = 0,
-    onIndexChange,
-    autoPlay = false,
-    autoPlayInterval = 4000,
-    loop = false,
-    showPagination = true,
-    paginationStyle = 'dots',
-    itemWidth = 'screen',
-    spacing = 0,
-    containerStyle,
-    accessibilityLabel,
-    testID,
-    showThumbnails = false,
-    haptic,
-    renderThumbnail,
-    loading = false
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const isControlled = typeof controlledIndex === 'number';
-  const isLooping = loop || autoPlay;
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').width);
-  const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
-  const slideStride = resolvedItemWidth + spacing;
-  const flatListRef = (0, _react.useRef)(null);
-  const scrollX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
-  const [currentIndex, setCurrentIndex] = (0, _react.useState)(initialIndex);
-
-  // Refs for auto-play & idle resume.
-  const autoPlayTimerRef = (0, _react.useRef)(null);
-  const resumeTimerRef = (0, _react.useRef)(null);
-  const isUserDraggingRef = (0, _react.useRef)(false);
-  const currentIndexRef = (0, _react.useRef)(currentIndex);
-  currentIndexRef.current = currentIndex;
-  const setIndexJS = (0, _react.useCallback)(next => {
-    const safe = clamp(next, 0, Math.max(0, data.length - 1));
-    setCurrentIndex(prev => {
-      if (prev === safe) {
-        return prev;
-      }
-      onIndexChange?.(safe);
-      return safe;
-    });
-  }, [data.length, onIndexChange]);
-  const scrollTo = (0, _react.useCallback)((target, animated = true) => {
-    if (data.length === 0) {
-      return;
-    }
-    const safe = clamp(target, 0, data.length - 1);
-    flatListRef.current?.scrollToOffset({
-      offset: safe * slideStride,
-      animated
-    });
-    setIndexJS(safe);
-  }, [data.length, slideStride, setIndexJS]);
-  const next = (0, _react.useCallback)(() => {
-    if (data.length === 0) {
-      return;
-    }
-    const target = currentIndexRef.current + 1;
-    if (target >= data.length) {
-      if (isLooping) {
-        scrollTo(0, false);
-      }
-      return;
-    }
-    scrollTo(target, true);
-  }, [data.length, isLooping, scrollTo]);
-  const prev = (0, _react.useCallback)(() => {
-    if (data.length === 0) {
-      return;
-    }
-    const target = currentIndexRef.current - 1;
-    if (target < 0) {
-      if (isLooping) {
-        scrollTo(data.length - 1, false);
-      }
-      return;
-    }
-    scrollTo(target, true);
-  }, [data.length, isLooping, scrollTo]);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    scrollTo,
-    next,
-    prev
-  }), [scrollTo, next, prev]);
-
-  // Drive controlled `index` prop.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: adding `currentIndex` would scroll back to the controlled index while the user is mid-swipe
-  (0, _react.useEffect)(() => {
-    if (!isControlled) {
-      return;
-    }
-    if (controlledIndex === currentIndex) {
-      return;
-    }
-    scrollTo(controlledIndex, true);
-  }, [controlledIndex]);
-
-  // ─── Auto-play ───
-  const clearAutoPlay = (0, _react.useCallback)(() => {
-    if (autoPlayTimerRef.current) {
-      clearInterval(autoPlayTimerRef.current);
-      autoPlayTimerRef.current = null;
-    }
-  }, []);
-  const startAutoPlay = (0, _react.useCallback)(() => {
-    if (!autoPlay || data.length <= 1) {
-      return;
-    }
-    clearAutoPlay();
-    autoPlayTimerRef.current = setInterval(() => {
-      if (isUserDraggingRef.current) {
-        return;
-      }
-      const cur = currentIndexRef.current;
-      const target = cur + 1;
-      if (target >= data.length) {
-        scrollTo(0, false);
-      } else {
-        scrollTo(target, true);
-      }
-    }, autoPlayInterval);
-  }, [autoPlay, autoPlayInterval, data.length, scrollTo, clearAutoPlay]);
-  (0, _react.useEffect)(() => {
-    startAutoPlay();
-    return () => {
-      clearAutoPlay();
-      if (resumeTimerRef.current) {
-        clearTimeout(resumeTimerRef.current);
-      }
-    };
-  }, [startAutoPlay, clearAutoPlay]);
-
-  // ─── Scroll handlers ───
-  // The dot and bar widths interpolate on the JS driver, so every scroll frame
-  // crosses to JS. Only those indicators need it; without them nothing listens.
-  const tracksScroll = showPagination && data.length > 1 && paginationStyle !== 'numbers';
-  const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
-    nativeEvent: {
-      contentOffset: {
-        x: scrollX
-      }
-    }
-  }], {
-    useNativeDriver: false
-  } // pagination width interpolation needs JS driver
-  ), [scrollX]);
-  const onMomentumScrollEnd = (0, _react.useCallback)(e => {
-    if (slideStride <= 0) {
-      return;
-    }
-    const offsetX = e.nativeEvent.contentOffset.x;
-    const idx = Math.round(offsetX / slideStride);
-    setIndexJS(idx);
-  }, [slideStride, setIndexJS]);
-  const onScrollBeginDrag = (0, _react.useCallback)(() => {
-    isUserDraggingRef.current = true;
-    clearAutoPlay();
-    if (resumeTimerRef.current) {
-      clearTimeout(resumeTimerRef.current);
-      resumeTimerRef.current = null;
-    }
-  }, [clearAutoPlay]);
-  const onScrollEndDrag = (0, _react.useCallback)(() => {
-    isUserDraggingRef.current = false;
-    if (!autoPlay) {
-      return;
-    }
-    if (resumeTimerRef.current) {
-      clearTimeout(resumeTimerRef.current);
-    }
-    resumeTimerRef.current = setTimeout(() => {
-      startAutoPlay();
-    }, 1000);
-  }, [autoPlay, startAutoPlay]);
-
-  // ─── A11y ───
-  const onAccessibilityAction = (0, _react.useCallback)(event => {
-    switch (event.nativeEvent.actionName) {
-      case 'increment':
-        next();
-        break;
-      case 'decrement':
-        prev();
-        break;
-    }
-  }, [next, prev]);
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const flatListRenderItem = (0, _react.useCallback)(({
-    item,
-    index: i
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      width: resolvedItemWidth,
-      marginRight: i === data.length - 1 ? 0 : spacing
-    },
-    accessibilityElementsHidden: i !== currentIndex,
-    importantForAccessibility: i === currentIndex ? 'yes' : 'no-hide-descendants',
-    children: renderItem(item, i)
-  }), [renderItem, resolvedItemWidth, spacing, data.length, currentIndex]);
-  const defaultKeyExtractor = (0, _react.useCallback)((_, i) => String(i), []);
-  const getItemLayout = (0, _react.useCallback)((_data, i) => ({
-    length: slideStride,
-    offset: slideStride * i,
-    index: i
-  }), [slideStride]);
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselSkeleton, {
-      ...props,
-      containerWidth: containerWidth
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.container, containerStyle],
-    onLayout: e => setContainerWidth(e.nativeEvent.layout.width),
-    accessibilityRole: 'adjustable',
-    accessibilityLabel: accessibilityLabel ?? 'Carousel',
-    accessibilityValue: {
-      min: 0,
-      max: Math.max(0, data.length - 1),
-      now: currentIndex,
-      text: `Slide ${currentIndex + 1} of ${data.length}`
-    },
-    accessibilityActions: [{
-      name: 'increment'
-    }, {
-      name: 'decrement'
-    }],
-    onAccessibilityAction: onAccessibilityAction,
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      ref: flatListRef,
-      data: data,
-      keyExtractor: keyExtractor ?? defaultKeyExtractor,
-      renderItem: flatListRenderItem,
-      horizontal: true,
-      pagingEnabled: itemWidth === 'screen' && spacing === 0,
-      snapToInterval: slideStride,
-      snapToAlignment: "start",
-      decelerationRate: "fast",
-      showsHorizontalScrollIndicator: false,
-      onScroll: tracksScroll ? onScroll : undefined,
-      scrollEventThrottle: tracksScroll ? 16 : undefined,
-      onMomentumScrollEnd: onMomentumScrollEnd,
-      onScrollBeginDrag: onScrollBeginDrag,
-      onScrollEndDrag: onScrollEndDrag,
-      getItemLayout: getItemLayout,
-      initialScrollIndex: initialIndex,
-      bounces: false
-    }), showPagination && data.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
-      count: data.length,
-      currentIndex: currentIndex,
-      scrollX: scrollX,
-      slideStride: slideStride,
-      variant: paginationStyle,
-      theme: theme
-    }) : null, showThumbnails && data.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailStrip, {
-      data: data,
-      currentIndex: currentIndex,
-      renderThumbnail: renderThumbnail,
-      onSelect: idx => {
-        const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-        if (h) {
-          (0, _index2.triggerHaptic)(h);
-        }
-        scrollTo(idx, true);
-      },
-      theme: theme
-    }) : null]
-  });
-});
-CarouselInner.displayName = 'Carousel';
-
-/**
- * Placeholder shape for `<Carousel>`. Renders one full-width slide skeleton
- * plus pagination dots underneath, so the visual footprint matches the
- * loaded state. `containerWidth` is forwarded from the live component when
- * known; otherwise falls back to a 320 default.
- */
-const CarouselSkeleton = ({
-  itemWidth = 'screen',
-  showPagination = true,
-  paginationStyle = 'dots',
-  containerStyle,
-  containerWidth
-}) => {
-  const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [carouselSkeletonStyles.container, containerStyle],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
-      width: slideWidth,
-      height: 160,
-      radius: "md"
-    }), showPagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [carouselSkeletonStyles.paginationRow, {
-        marginTop: 12
-      }],
-      children: Array.from({
-        length: 3
-      }).map((_, i) => paginationStyle === 'numbers' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
-        width: 24,
-        height: 16,
-        radius: "sm",
-        style: {
-          marginHorizontal: 4
-        }
-      }, `sk-pg-${i}`) : paginationStyle === 'bars' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
-        width: 20,
-        height: 4,
-        radius: 2,
-        style: {
-          marginHorizontal: 3
-        }
-      }, `sk-pg-${i}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
-        shape: "circle",
-        width: 8,
-        height: 8,
-        style: {
-          marginHorizontal: 4
-        }
-      }, `sk-pg-${i}`))
-    }) : null]
-  });
-};
-CarouselSkeleton.displayName = 'CarouselSkeleton';
-const carouselSkeletonStyles = _reactNative.StyleSheet.create({
-  container: {
-    alignItems: 'center'
-  },
-  paginationRow: {
-    flexDirection: 'row',
-    justifyContent: 'center'
-  }
-});
-
-// Public typed factory — preserves the generic signature.
-const Carousel = exports.Carousel = CarouselInner;
-Carousel.Skeleton = CarouselSkeleton;
-
-// ───────── Pagination ─────────
-
-const Pagination = ({
-  count,
-  currentIndex,
-  scrollX,
-  slideStride,
-  variant,
-  theme
-}) => {
-  if (variant === 'numbers') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: paginationStyles.numbersWrap,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [paginationStyles.numbersText, {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.sm,
-          fontWeight: theme.typography.fontWeight.medium
-        }],
-        accessibilityLabel: `Slide ${currentIndex + 1} of ${count}`,
-        children: `${currentIndex + 1} / ${count}`
-      })
-    });
-  }
-  const items = Array.from({
-    length: count
-  }, (_, i) => i);
-  const isBars = variant === 'bars';
-  const baseSize = isBars ? 24 : 6;
-  const expandedSize = isBars ? 36 : 16;
-  const height = isBars ? 3 : 6;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: paginationStyles.dotRow,
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no-hide-descendants",
-    children: items.map(i => {
-      const inputRange = [(i - 1) * slideStride, i * slideStride, (i + 1) * slideStride];
-      const widthAnim = scrollX.interpolate({
-        inputRange,
-        outputRange: [baseSize, expandedSize, baseSize],
-        extrapolate: 'clamp'
-      });
-      const opacityAnim = scrollX.interpolate({
-        inputRange,
-        outputRange: [0.5, 1, 0.5],
-        extrapolate: 'clamp'
-      });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: [{
-          width: widthAnim,
-          height,
-          marginHorizontal: 4,
-          borderRadius: height / 2,
-          ..._corners.smoothCorners,
-          backgroundColor: i === currentIndex ? theme.colors.primary : theme.colors.border.primary,
-          opacity: opacityAnim
-        }]
-      }, i);
-    })
-  });
-};
-
-// ───────── Thumbnail Strip ─────────
-
-const ThumbnailStrip = ({
-  data,
-  currentIndex,
-  renderThumbnail,
-  onSelect,
-  theme
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    contentContainerStyle: thumbStyles.row,
-    accessibilityRole: "tablist",
-    children: data.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailItem, {
-      item: item,
-      index: i,
-      isActive: i === currentIndex,
-      renderThumbnail: renderThumbnail,
-      onPress: () => onSelect(i),
-      theme: theme
-    }, i))
-  });
-};
-const ThumbnailItem = ({
-  item,
-  index,
-  isActive,
-  renderThumbnail,
-  onPress,
-  theme
-}) => {
-  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1.1 : 1)).current;
-  (0, _react.useEffect)(() => {
-    const anim = _reactNative.Animated.spring(scale, {
-      toValue: isActive ? 1.1 : 1,
-      useNativeDriver: true,
-      friction: 6,
-      tension: 80
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [isActive, scale]);
-  const content = (0, _react.useMemo)(() => {
-    if (renderThumbnail) {
-      return renderThumbnail(item, index);
-    }
-    if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: {
-          uri: item.uri
-        },
-        style: thumbStyles.image,
-        resizeMode: "cover"
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [thumbStyles.placeholder, {
-        backgroundColor: theme.colors.background.secondary
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.xs,
-          fontWeight: theme.typography.fontWeight.semibold
-        },
-        children: index + 1
-      })
-    });
-  }, [item, index, renderThumbnail, theme]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    onPress: onPress,
-    accessibilityRole: "tab",
-    accessibilityState: {
-      selected: isActive
-    },
-    accessibilityLabel: `Go to slide ${index + 1}`,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [thumbStyles.thumb, {
-        borderColor: isActive ? theme.colors.primary : 'transparent',
-        transform: [{
-          scale
-        }]
-      }],
-      children: content
-    })
-  });
-};
-const thumbStyles = _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 8
-  },
-  thumb: {
-    width: 40,
-    height: 40,
-    marginHorizontal: 4,
-    borderRadius: 6,
-    ..._corners.smoothCorners,
-    borderWidth: 2,
-    overflow: 'hidden'
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  placeholder: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-
-// ───────── Helpers ─────────
-
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  container: {
-    width: '100%'
-  }
-});
-const paginationStyles = _reactNative.StyleSheet.create({
-  dotRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12
-  },
-  numbersWrap: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12
-  },
-  numbersText: {
-    textAlign: 'center'
-  }
-});
-var _default = exports.default = Carousel;
-//# sourceMappingURL=Carousel.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Carousel=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_index3=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?r:n){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(s,t,a):s[t]=e[t]);return s})(e,t)}const CarouselInner=(0,_react.forwardRef)((e,t)=>{const{data:n,renderItem:r,keyExtractor:i,index:a,defaultIndex:s=0,onIndexChange:l,autoPlay:o=!1,autoPlayInterval:c=4e3,loop:u=!1,showPagination:d=!0,paginationStyle:m="dots",itemWidth:h="screen",spacing:x=0,containerStyle:_,accessibilityLabel:g,testID:y,showThumbnails:p=!1,haptic:b,renderThumbnail:f,loading:S=!1}=e,j=(0,_index.useTheme)(),v="number"==typeof a,R=u||o,[w,k]=(0,_react.useState)(()=>_reactNative.Dimensions.get("window").width),C="screen"===h?w:h,I=C+x,N=(0,_react.useRef)(null),T=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,A=clamp(v?a:s,0,Math.max(0,n.length-1)),[V,W]=(0,_react.useState)(A),M=(0,_react.useRef)(null),z=(0,_react.useRef)(null),E=(0,_react.useRef)(!1),P=(0,_react.useRef)(V);P.current=V;const H=(0,_react.useCallback)(e=>{const t=clamp(e,0,Math.max(0,n.length-1));W(e=>e===t?e:(l?.(t),t))},[n.length,l]),D=(0,_react.useCallback)((e,t=!0)=>{if(0===n.length)return;const r=clamp(e,0,n.length-1);N.current?.scrollToOffset({offset:r*I,animated:t}),H(r)},[n.length,I,H]),q=(0,_react.useCallback)(()=>{if(0===n.length)return;const e=P.current+1;e>=n.length?R&&D(0,!1):D(e,!0)},[n.length,R,D]),$=(0,_react.useCallback)(()=>{if(0===n.length)return;const e=P.current-1;e<0?R&&D(n.length-1,!1):D(e,!0)},[n.length,R,D]);(0,_react.useImperativeHandle)(t,()=>({scrollTo:D,next:q,prev:$}),[D,q,$]),(0,_react.useEffect)(()=>{v&&a!==V&&D(a,!0)},[a]);const O=(0,_react.useCallback)(()=>{M.current&&(clearInterval(M.current),M.current=null)},[]),L=(0,_react.useCallback)(()=>{!o||n.length<=1||(O(),M.current=setInterval(()=>{if(E.current)return;const e=P.current+1;e>=n.length?D(0,!1):D(e,!0)},c))},[o,c,n.length,D,O]);(0,_react.useEffect)(()=>(L(),()=>{O(),z.current&&clearTimeout(z.current)}),[L,O]);const F=d&&n.length>1&&"numbers"!==m,X=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{x:T}}}],{useNativeDriver:!1}),[T]),B=(0,_react.useCallback)(e=>{if(I<=0)return;const t=e.nativeEvent.contentOffset.x,n=Math.round(t/I);H(n)},[I,H]),G=(0,_react.useCallback)(()=>{E.current=!0,O(),z.current&&(clearTimeout(z.current),z.current=null)},[O]),J=(0,_react.useCallback)(()=>{E.current=!1,o&&(z.current&&clearTimeout(z.current),z.current=setTimeout(()=>{L()},1e3))},[o,L]),K=(0,_react.useCallback)(e=>{switch(e.nativeEvent.actionName){case"increment":q();break;case"decrement":$()}},[q,$]),Q=(0,_react.useMemo)(()=>buildStyles(j),[j]),U=(0,_react.useCallback)(({item:e,index:t})=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:C,marginRight:t===n.length-1?0:x},accessibilityElementsHidden:t!==V,importantForAccessibility:t===V?"yes":"no-hide-descendants",children:r(e,t)}),[r,C,x,n.length,V]),Y=(0,_react.useCallback)((e,t)=>String(t),[]),Z=(0,_react.useCallback)((e,t)=>({length:I,offset:I*t,index:t}),[I]);return S?(0,_jsxRuntime.jsx)(CarouselSkeleton,{...e,containerWidth:w}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[Q.container,_],onLayout:e=>k(e.nativeEvent.layout.width),accessibilityRole:"adjustable",accessibilityLabel:g??"Carousel",accessibilityValue:{min:0,max:Math.max(0,n.length-1),now:V,text:`Slide ${V+1} of ${n.length}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:K,testID:y,children:[(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:N,data:n,keyExtractor:i??Y,renderItem:U,horizontal:!0,pagingEnabled:"screen"===h&&0===x,snapToInterval:I,snapToAlignment:"start",decelerationRate:"fast",showsHorizontalScrollIndicator:!1,onScroll:F?X:void 0,scrollEventThrottle:F?16:void 0,onMomentumScrollEnd:B,onScrollBeginDrag:G,onScrollEndDrag:J,getItemLayout:Z,initialScrollIndex:A,bounces:!1}),d&&n.length>1?(0,_jsxRuntime.jsx)(Pagination,{count:n.length,currentIndex:V,scrollX:T,slideStride:I,variant:m,theme:j}):null,p&&n.length>0?(0,_jsxRuntime.jsx)(ThumbnailStrip,{data:n,currentIndex:V,renderThumbnail:f,onSelect:e=>{const t=(0,_index2.resolveHaptic)(b,"selection");t&&(0,_index2.triggerHaptic)(t),D(e,!0)},theme:j}):null]})});CarouselInner.displayName="Carousel";const CarouselSkeleton=({itemWidth:e="screen",showPagination:t=!0,paginationStyle:n="dots",containerStyle:r,containerWidth:i})=>{const a="screen"===e?i||320:e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[carouselSkeletonStyles.container,r],children:[(0,_jsxRuntime.jsx)(_index3.Skeleton,{width:a,height:160,radius:"md"}),t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[carouselSkeletonStyles.paginationRow,{marginTop:12}],children:Array.from({length:3}).map((e,t)=>"numbers"===n?(0,_jsxRuntime.jsx)(_index3.Skeleton,{width:24,height:16,radius:"sm",style:{marginHorizontal:4}},`sk-pg-${t}`):"bars"===n?(0,_jsxRuntime.jsx)(_index3.Skeleton,{width:20,height:4,radius:2,style:{marginHorizontal:3}},`sk-pg-${t}`):(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"circle",width:8,height:8,style:{marginHorizontal:4}},`sk-pg-${t}`))}):null]})};CarouselSkeleton.displayName="CarouselSkeleton";const carouselSkeletonStyles=_reactNative.StyleSheet.create({container:{alignItems:"center"},paginationRow:{flexDirection:"row",justifyContent:"center"}}),Carousel=exports.Carousel=CarouselInner;Carousel.Skeleton=CarouselSkeleton;const Pagination=({count:e,currentIndex:t,scrollX:n,slideStride:r,variant:i,theme:a})=>{if("numbers"===i)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:paginationStyles.numbersWrap,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[paginationStyles.numbersText,{color:a.colors.text.secondary,fontSize:a.typography.fontSize.sm,fontWeight:a.typography.fontWeight.medium}],accessibilityLabel:`Slide ${t+1} of ${e}`,children:`${t+1} / ${e}`})});const s=Array.from({length:e},(e,t)=>t),l="bars"===i,o=l?24:6,c=l?36:16,u=l?3:6;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:paginationStyles.dotRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:s.map(e=>{const i=[(e-1)*r,e*r,(e+1)*r],s=n.interpolate({inputRange:i,outputRange:[o,c,o],extrapolate:"clamp"}),l=n.interpolate({inputRange:i,outputRange:[.5,1,.5],extrapolate:"clamp"});return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[{width:s,height:u,marginHorizontal:4,borderRadius:u/2,..._corners.smoothCorners,backgroundColor:e===t?a.colors.primary:a.colors.border.primary,opacity:l}]},e)})})},ThumbnailStrip=({data:e,currentIndex:t,renderThumbnail:n,onSelect:r,theme:i})=>(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:thumbStyles.row,accessibilityRole:"tablist",children:e.map((e,a)=>(0,_jsxRuntime.jsx)(ThumbnailItem,{item:e,index:a,isActive:a===t,renderThumbnail:n,onPress:()=>r(a),theme:i},a))}),ThumbnailItem=({item:e,index:t,isActive:n,renderThumbnail:r,onPress:i,theme:a})=>{const s=(0,_react.useRef)((0,_index.createAnimatedValue)(n?1.1:1)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.spring(s,{toValue:n?1.1:1,useNativeDriver:!0,friction:6,tension:80});return e.start(),()=>e.stop()},[n,s]);const l=(0,_react.useMemo)(()=>r?r(e,t):e&&"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:e.uri},style:thumbStyles.image,resizeMode:"cover"}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[thumbStyles.placeholder,{backgroundColor:a.colors.background.secondary}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:a.colors.text.secondary,fontSize:a.typography.fontSize.xs,fontWeight:a.typography.fontWeight.semibold},children:t+1})}),[e,t,r,a]);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:i,accessibilityRole:"tab",accessibilityState:{selected:n},accessibilityLabel:`Go to slide ${t+1}`,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[thumbStyles.thumb,{borderColor:n?a.colors.primary:"transparent",transform:[{scale:s}]}],children:l})})},thumbStyles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:8},thumb:{width:40,height:40,marginHorizontal:4,borderRadius:6,..._corners.smoothCorners,borderWidth:2,overflow:"hidden"},image:{width:"100%",height:"100%"},placeholder:{flex:1,alignItems:"center",justifyContent:"center"}}),clamp=(e,t,n)=>Math.min(Math.max(e,t),n),buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"}}),paginationStyles=_reactNative.StyleSheet.create({dotRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12},numbersWrap:{alignItems:"center",justifyContent:"center",paddingVertical:12},numbersText:{textAlign:"center"}});var _default=exports.default=Carousel;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Carousel", {
-  enumerable: true,
-  get: function () {
-    return _Carousel.Carousel;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Carousel.default;
-  }
-});
-var _Carousel = _interopRequireWildcard(require("./Carousel.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Carousel",{enumerable:!0,get:function(){return _Carousel.Carousel}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Carousel.default}});var _Carousel=_interopRequireWildcard(require("./Carousel.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,u,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(a,r,u):a[r]=e[r]);return a})(e,r)}