@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/Carousel/Carousel.js

@@ -1,583 +1 @@
-"use strict";
-
-/**
- * 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();
- */
-
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, FlatList, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { Skeleton } from "../Skeleton/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// 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__*/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 = useTheme();
-  const isControlled = typeof controlledIndex === 'number';
-  const isLooping = loop || autoPlay;
-  const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width);
-  const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
-  const slideStride = resolvedItemWidth + spacing;
-  const flatListRef = useRef(null);
-  const scrollX = useRef(createAnimatedValue(0)).current;
-  const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-
-  // Refs for auto-play & idle resume.
-  const autoPlayTimerRef = useRef(null);
-  const resumeTimerRef = useRef(null);
-  const isUserDraggingRef = useRef(false);
-  const currentIndexRef = useRef(currentIndex);
-  currentIndexRef.current = currentIndex;
-  const setIndexJS = 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 = 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 = 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 = 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]);
-  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
-  useEffect(() => {
-    if (!isControlled) {
-      return;
-    }
-    if (controlledIndex === currentIndex) {
-      return;
-    }
-    scrollTo(controlledIndex, true);
-  }, [controlledIndex]);
-
-  // ─── Auto-play ───
-  const clearAutoPlay = useCallback(() => {
-    if (autoPlayTimerRef.current) {
-      clearInterval(autoPlayTimerRef.current);
-      autoPlayTimerRef.current = null;
-    }
-  }, []);
-  const startAutoPlay = 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]);
-  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 = useMemo(() => Animated.event([{
-    nativeEvent: {
-      contentOffset: {
-        x: scrollX
-      }
-    }
-  }], {
-    useNativeDriver: false
-  } // pagination width interpolation needs JS driver
-  ), [scrollX]);
-  const onMomentumScrollEnd = useCallback(e => {
-    if (slideStride <= 0) {
-      return;
-    }
-    const offsetX = e.nativeEvent.contentOffset.x;
-    const idx = Math.round(offsetX / slideStride);
-    setIndexJS(idx);
-  }, [slideStride, setIndexJS]);
-  const onScrollBeginDrag = useCallback(() => {
-    isUserDraggingRef.current = true;
-    clearAutoPlay();
-    if (resumeTimerRef.current) {
-      clearTimeout(resumeTimerRef.current);
-      resumeTimerRef.current = null;
-    }
-  }, [clearAutoPlay]);
-  const onScrollEndDrag = useCallback(() => {
-    isUserDraggingRef.current = false;
-    if (!autoPlay) {
-      return;
-    }
-    if (resumeTimerRef.current) {
-      clearTimeout(resumeTimerRef.current);
-    }
-    resumeTimerRef.current = setTimeout(() => {
-      startAutoPlay();
-    }, 1000);
-  }, [autoPlay, startAutoPlay]);
-
-  // ─── A11y ───
-  const onAccessibilityAction = useCallback(event => {
-    switch (event.nativeEvent.actionName) {
-      case 'increment':
-        next();
-        break;
-      case 'decrement':
-        prev();
-        break;
-    }
-  }, [next, prev]);
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const flatListRenderItem = useCallback(({
-    item,
-    index: i
-  }) => /*#__PURE__*/_jsx(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 = useCallback((_, i) => String(i), []);
-  const getItemLayout = useCallback((_data, i) => ({
-    length: slideStride,
-    offset: slideStride * i,
-    index: i
-  }), [slideStride]);
-  if (loading) {
-    return /*#__PURE__*/_jsx(CarouselSkeleton, {
-      ...props,
-      containerWidth: containerWidth
-    });
-  }
-  return /*#__PURE__*/_jsxs(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__*/_jsx(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__*/_jsx(Pagination, {
-      count: data.length,
-      currentIndex: currentIndex,
-      scrollX: scrollX,
-      slideStride: slideStride,
-      variant: paginationStyle,
-      theme: theme
-    }) : null, showThumbnails && data.length > 0 ? /*#__PURE__*/_jsx(ThumbnailStrip, {
-      data: data,
-      currentIndex: currentIndex,
-      renderThumbnail: renderThumbnail,
-      onSelect: idx => {
-        const h = resolveHaptic(haptic, 'selection');
-        if (h) {
-          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__*/_jsxs(View, {
-    style: [carouselSkeletonStyles.container, containerStyle],
-    children: [/*#__PURE__*/_jsx(Skeleton, {
-      width: slideWidth,
-      height: 160,
-      radius: "md"
-    }), showPagination ? /*#__PURE__*/_jsx(View, {
-      style: [carouselSkeletonStyles.paginationRow, {
-        marginTop: 12
-      }],
-      children: Array.from({
-        length: 3
-      }).map((_, i) => paginationStyle === 'numbers' ? /*#__PURE__*/_jsx(Skeleton, {
-        width: 24,
-        height: 16,
-        radius: "sm",
-        style: {
-          marginHorizontal: 4
-        }
-      }, `sk-pg-${i}`) : paginationStyle === 'bars' ? /*#__PURE__*/_jsx(Skeleton, {
-        width: 20,
-        height: 4,
-        radius: 2,
-        style: {
-          marginHorizontal: 3
-        }
-      }, `sk-pg-${i}`) : /*#__PURE__*/_jsx(Skeleton, {
-        shape: "circle",
-        width: 8,
-        height: 8,
-        style: {
-          marginHorizontal: 4
-        }
-      }, `sk-pg-${i}`))
-    }) : null]
-  });
-};
-CarouselSkeleton.displayName = 'CarouselSkeleton';
-const carouselSkeletonStyles = StyleSheet.create({
-  container: {
-    alignItems: 'center'
-  },
-  paginationRow: {
-    flexDirection: 'row',
-    justifyContent: 'center'
-  }
-});
-
-// Public typed factory — preserves the generic signature.
-const Carousel = CarouselInner;
-Carousel.Skeleton = CarouselSkeleton;
-
-// ───────── Pagination ─────────
-
-const Pagination = ({
-  count,
-  currentIndex,
-  scrollX,
-  slideStride,
-  variant,
-  theme
-}) => {
-  if (variant === 'numbers') {
-    return /*#__PURE__*/_jsx(View, {
-      style: paginationStyles.numbersWrap,
-      children: /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(Animated.View, {
-        style: [{
-          width: widthAnim,
-          height,
-          marginHorizontal: 4,
-          borderRadius: height / 2,
-          ...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__*/_jsx(ScrollView, {
-    horizontal: true,
-    showsHorizontalScrollIndicator: false,
-    contentContainerStyle: thumbStyles.row,
-    accessibilityRole: "tablist",
-    children: data.map((item, i) => /*#__PURE__*/_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 = useRef(createAnimatedValue(isActive ? 1.1 : 1)).current;
-  useEffect(() => {
-    const anim = Animated.spring(scale, {
-      toValue: isActive ? 1.1 : 1,
-      useNativeDriver: true,
-      friction: 6,
-      tension: 80
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [isActive, scale]);
-  const content = useMemo(() => {
-    if (renderThumbnail) {
-      return renderThumbnail(item, index);
-    }
-    if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
-      return /*#__PURE__*/_jsx(Image, {
-        source: {
-          uri: item.uri
-        },
-        style: thumbStyles.image,
-        resizeMode: "cover"
-      });
-    }
-    return /*#__PURE__*/_jsx(View, {
-      style: [thumbStyles.placeholder, {
-        backgroundColor: theme.colors.background.secondary
-      }],
-      children: /*#__PURE__*/_jsx(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__*/_jsx(Pressable, {
-    onPress: onPress,
-    accessibilityRole: "tab",
-    accessibilityState: {
-      selected: isActive
-    },
-    accessibilityLabel: `Go to slide ${index + 1}`,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [thumbStyles.thumb, {
-        borderColor: isActive ? theme.colors.primary : 'transparent',
-        transform: [{
-          scale
-        }]
-      }],
-      children: content
-    })
-  });
-};
-const thumbStyles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 8
-  },
-  thumb: {
-    width: 40,
-    height: 40,
-    marginHorizontal: 4,
-    borderRadius: 6,
-    ...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 => StyleSheet.create({
-  container: {
-    width: '100%'
-  }
-});
-const paginationStyles = StyleSheet.create({
-  dotRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12
-  },
-  numbersWrap: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12
-  },
-  numbersText: {
-    textAlign: 'center'
-  }
-});
-export { Carousel };
-export default Carousel;
-//# sourceMappingURL=Carousel.js.map
+import e,{forwardRef as t,useCallback as n,useEffect as r,useImperativeHandle as i,useMemo as o,useRef as a,useState as l}from"react";import{Animated as c,Dimensions as s,FlatList as d,Image as h,Pressable as u,ScrollView as m,StyleSheet as g,Text as y,View as p}from"react-native";import{createAnimatedValue as b,useTheme as f}from"../../theme/index.js";import{resolveHaptic as x,triggerHaptic as w}from"../../utils/index.js";import{smoothCorners as v}from"../../utils/corners.js";import{Skeleton as S}from"../Skeleton/index.js";import{jsx as I,jsxs as T}from"react/jsx-runtime";const z=t((e,t)=>{const{data:h,renderItem:u,keyExtractor:m,index:g,defaultIndex:y=0,onIndexChange:v,autoPlay:S=!1,autoPlayInterval:z=4e3,loop:R=!1,showPagination:j=!0,paginationStyle:C="dots",itemWidth:E="screen",spacing:A=0,containerStyle:W,accessibilityLabel:k,testID:H,showThumbnails:D=!1,haptic:M,renderThumbnail:$,loading:P=!1}=e,V=f(),L="number"==typeof g,N=R||S,[O,F]=l(()=>s.get("window").width),X="screen"===E?O:E,B=X+A,G=a(null),q=a(b(0)).current,J=clamp(L?g:y,0,Math.max(0,h.length-1)),[K,Q]=l(J),U=a(null),Y=a(null),Z=a(!1),_=a(K);_.current=K;const ee=n(e=>{const t=clamp(e,0,Math.max(0,h.length-1));Q(e=>e===t?e:(v?.(t),t))},[h.length,v]),te=n((e,t=!0)=>{if(0===h.length)return;const n=clamp(e,0,h.length-1);G.current?.scrollToOffset({offset:n*B,animated:t}),ee(n)},[h.length,B,ee]),ne=n(()=>{if(0===h.length)return;const e=_.current+1;e>=h.length?N&&te(0,!1):te(e,!0)},[h.length,N,te]),re=n(()=>{if(0===h.length)return;const e=_.current-1;e<0?N&&te(h.length-1,!1):te(e,!0)},[h.length,N,te]);i(t,()=>({scrollTo:te,next:ne,prev:re}),[te,ne,re]),r(()=>{L&&g!==K&&te(g,!0)},[g]);const ie=n(()=>{U.current&&(clearInterval(U.current),U.current=null)},[]),oe=n(()=>{!S||h.length<=1||(ie(),U.current=setInterval(()=>{if(Z.current)return;const e=_.current+1;e>=h.length?te(0,!1):te(e,!0)},z))},[S,z,h.length,te,ie]);r(()=>(oe(),()=>{ie(),Y.current&&clearTimeout(Y.current)}),[oe,ie]);const ae=j&&h.length>1&&"numbers"!==C,le=o(()=>c.event([{nativeEvent:{contentOffset:{x:q}}}],{useNativeDriver:!1}),[q]),ce=n(e=>{if(B<=0)return;const t=e.nativeEvent.contentOffset.x,n=Math.round(t/B);ee(n)},[B,ee]),se=n(()=>{Z.current=!0,ie(),Y.current&&(clearTimeout(Y.current),Y.current=null)},[ie]),de=n(()=>{Z.current=!1,S&&(Y.current&&clearTimeout(Y.current),Y.current=setTimeout(()=>{oe()},1e3))},[S,oe]),he=n(e=>{switch(e.nativeEvent.actionName){case"increment":ne();break;case"decrement":re()}},[ne,re]),ue=o(()=>buildStyles(V),[V]),me=n(({item:e,index:t})=>I(p,{style:{width:X,marginRight:t===h.length-1?0:A},accessibilityElementsHidden:t!==K,importantForAccessibility:t===K?"yes":"no-hide-descendants",children:u(e,t)}),[u,X,A,h.length,K]),ge=n((e,t)=>String(t),[]),ye=n((e,t)=>({length:B,offset:B*t,index:t}),[B]);return P?I(CarouselSkeleton,{...e,containerWidth:O}):T(p,{style:[ue.container,W],onLayout:e=>F(e.nativeEvent.layout.width),accessibilityRole:"adjustable",accessibilityLabel:k??"Carousel",accessibilityValue:{min:0,max:Math.max(0,h.length-1),now:K,text:`Slide ${K+1} of ${h.length}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:he,testID:H,children:[I(d,{ref:G,data:h,keyExtractor:m??ge,renderItem:me,horizontal:!0,pagingEnabled:"screen"===E&&0===A,snapToInterval:B,snapToAlignment:"start",decelerationRate:"fast",showsHorizontalScrollIndicator:!1,onScroll:ae?le:void 0,scrollEventThrottle:ae?16:void 0,onMomentumScrollEnd:ce,onScrollBeginDrag:se,onScrollEndDrag:de,getItemLayout:ye,initialScrollIndex:J,bounces:!1}),j&&h.length>1?I(Pagination,{count:h.length,currentIndex:K,scrollX:q,slideStride:B,variant:C,theme:V}):null,D&&h.length>0?I(ThumbnailStrip,{data:h,currentIndex:K,renderThumbnail:$,onSelect:e=>{const t=x(M,"selection");t&&w(t),te(e,!0)},theme:V}):null]})});z.displayName="Carousel";const CarouselSkeleton=({itemWidth:e="screen",showPagination:t=!0,paginationStyle:n="dots",containerStyle:r,containerWidth:i})=>{const o="screen"===e?i||320:e;return T(p,{style:[R.container,r],children:[I(S,{width:o,height:160,radius:"md"}),t?I(p,{style:[R.paginationRow,{marginTop:12}],children:Array.from({length:3}).map((e,t)=>I(S,"numbers"===n?{width:24,height:16,radius:"sm",style:{marginHorizontal:4}}:"bars"===n?{width:20,height:4,radius:2,style:{marginHorizontal:3}}:{shape:"circle",width:8,height:8,style:{marginHorizontal:4}},`sk-pg-${t}`))}):null]})};CarouselSkeleton.displayName="CarouselSkeleton";const R=g.create({container:{alignItems:"center"},paginationRow:{flexDirection:"row",justifyContent:"center"}}),j=z;j.Skeleton=CarouselSkeleton;const Pagination=({count:e,currentIndex:t,scrollX:n,slideStride:r,variant:i,theme:o})=>{if("numbers"===i)return I(p,{style:E.numbersWrap,children:I(y,{style:[E.numbersText,{color:o.colors.text.secondary,fontSize:o.typography.fontSize.sm,fontWeight:o.typography.fontWeight.medium}],accessibilityLabel:`Slide ${t+1} of ${e}`,children:`${t+1} / ${e}`})});const a=Array.from({length:e},(e,t)=>t),l="bars"===i,s=l?24:6,d=l?36:16,h=l?3:6;return I(p,{style:E.dotRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:a.map(e=>{const i=[(e-1)*r,e*r,(e+1)*r],a=n.interpolate({inputRange:i,outputRange:[s,d,s],extrapolate:"clamp"}),l=n.interpolate({inputRange:i,outputRange:[.5,1,.5],extrapolate:"clamp"});return I(c.View,{style:[{width:a,height:h,marginHorizontal:4,borderRadius:h/2,...v,backgroundColor:e===t?o.colors.primary:o.colors.border.primary,opacity:l}]},e)})})},ThumbnailStrip=({data:e,currentIndex:t,renderThumbnail:n,onSelect:r,theme:i})=>I(m,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:C.row,accessibilityRole:"tablist",children:e.map((e,o)=>I(ThumbnailItem,{item:e,index:o,isActive:o===t,renderThumbnail:n,onPress:()=>r(o),theme:i},o))}),ThumbnailItem=({item:e,index:t,isActive:n,renderThumbnail:i,onPress:l,theme:s})=>{const d=a(b(n?1.1:1)).current;r(()=>{const e=c.spring(d,{toValue:n?1.1:1,useNativeDriver:!0,friction:6,tension:80});return e.start(),()=>e.stop()},[n,d]);const m=o(()=>i?i(e,t):e&&"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?I(h,{source:{uri:e.uri},style:C.image,resizeMode:"cover"}):I(p,{style:[C.placeholder,{backgroundColor:s.colors.background.secondary}],children:I(y,{style:{color:s.colors.text.secondary,fontSize:s.typography.fontSize.xs,fontWeight:s.typography.fontWeight.semibold},children:t+1})}),[e,t,i,s]);return I(u,{onPress:l,accessibilityRole:"tab",accessibilityState:{selected:n},accessibilityLabel:`Go to slide ${t+1}`,children:I(c.View,{style:[C.thumb,{borderColor:n?s.colors.primary:"transparent",transform:[{scale:d}]}],children:m})})},C=g.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:8},thumb:{width:40,height:40,marginHorizontal:4,borderRadius:6,...v,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=>g.create({container:{width:"100%"}}),E=g.create({dotRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12},numbersWrap:{alignItems:"center",justifyContent:"center",paddingVertical:12},numbersText:{textAlign:"center"}});export{j as Carousel};export default j;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { Carousel, default } from "./Carousel.js";
-//# sourceMappingURL=index.js.map
+export{Carousel,default}from"./Carousel.js";