@webority-technologies/mobile 0.0.1

package/lib/module/components/Card/Card.js

@@ -0,0 +1,190 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const paddingMap = {
+  none: 'none',
+  sm: 'sm',
+  md: 'lg',
+  lg: 'xl',
+  xl: '2xl'
+};
+const Card = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'elevated',
+    elevation = 'sm',
+    radius = 'lg',
+    padding = 'md',
+    interactive = false,
+    header,
+    footer,
+    imageSource,
+    imageHeight = 160,
+    imageAspectRatio,
+    imageOverlay,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    style,
+    testID,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const isInteractive = interactive || typeof onPress === 'function';
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: isInteractive
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const hasImage = Boolean(imageSource);
+  const contentPadding = theme.spacing[paddingMap[padding]];
+  const containerStyle = useMemo(() => {
+    const base = {
+      borderRadius: theme.radius[radius],
+      // When an image header is present we move padding to the inner content
+      // wrapper so the image can occupy the card's full top edge.
+      padding: hasImage ? 0 : contentPadding,
+      overflow: 'hidden'
+    };
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.elevated,
+          borderWidth: 1,
+          borderColor: theme.colors.border.primary
+        };
+      case 'filled':
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.secondary
+        };
+      case 'elevated':
+      default:
+        return {
+          ...base,
+          backgroundColor: theme.colors.background.elevated,
+          ...theme.shadows[elevation]
+        };
+    }
+  }, [theme, variant, elevation, radius, padding, hasImage, contentPadding]);
+  const imageStyle = useMemo(() => {
+    const topRadius = theme.radius[radius];
+    const dimensions = typeof imageAspectRatio === 'number' ? {
+      width: '100%',
+      aspectRatio: imageAspectRatio
+    } : {
+      width: '100%',
+      height: imageHeight
+    };
+    return {
+      ...dimensions,
+      borderTopLeftRadius: topRadius,
+      borderTopRightRadius: topRadius,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }, [theme, radius, imageAspectRatio, imageHeight]);
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header ? /*#__PURE__*/_jsx(View, {
+      style: styles.header,
+      children: header
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: header || footer ? styles.body : null,
+      children: children
+    }), footer ? /*#__PURE__*/_jsx(View, {
+      style: styles.footer,
+      children: footer
+    }) : null]
+  });
+  const content = hasImage ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.imageWrapper,
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: imageSource,
+        resizeMode: "cover",
+        style: imageStyle,
+        accessibilityLabel: "",
+        accessible: false
+      }), imageOverlay ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "box-none",
+        style: styles.imageOverlay,
+        children: imageOverlay
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: contentPadding
+      },
+      children: innerContent
+    })]
+  }) : innerContent;
+  if (isInteractive) {
+    const handlePress = event => {
+      triggerHaptic('selection');
+      onPress?.(event);
+    };
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        transform: [{
+          scale
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        ref: ref,
+        onPress: handlePress,
+        onPressIn: pressIn,
+        onPressOut: pressOut,
+        android_ripple: {
+          color: theme.colors.surface.pressed,
+          borderless: false
+        },
+        accessibilityRole: accessibilityRole ?? 'button',
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: accessibilityHint,
+        testID: testID,
+        style: [containerStyle, style],
+        ...rest,
+        children: content
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    style: [containerStyle, style],
+    children: content
+  });
+});
+Card.displayName = 'Card';
+const buildStyles = theme => StyleSheet.create({
+  header: {
+    marginBottom: theme.spacing.md
+  },
+  body: {
+    flexShrink: 1
+  },
+  footer: {
+    marginTop: theme.spacing.md
+  },
+  imageWrapper: {
+    position: 'relative'
+  },
+  imageOverlay: {
+    ...StyleSheet.absoluteFillObject
+  }
+});
+export { Card };
+export default Card;
+//# sourceMappingURL=Card.js.map

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

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

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

@@ -0,0 +1,471 @@
+"use strict";
+
+/**
+ * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
+ *
+ * Backed by a virtualized FlatList for memory efficiency. Pagination is driven
+ * by `Animated.event` with `useNativeDriver` so the indicator tracks the scroll
+ * gesture frame-perfectly without round-tripping to JS.
+ *
+ * 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 { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/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,
+    renderThumbnail
+  } = 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(new Animated.Value(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.
+  useEffect(() => {
+    if (!isControlled) return;
+    if (controlledIndex === currentIndex) return;
+    scrollTo(controlledIndex, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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 ───
+  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]);
+  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: onScroll,
+      scrollEventThrottle: 16,
+      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 => {
+        triggerHaptic('selection');
+        scrollTo(idx, true);
+      },
+      theme: theme
+    }) : null]
+  });
+});
+CarouselInner.displayName = 'Carousel';
+
+// Public typed factory — preserves the generic signature.
+const Carousel = CarouselInner;
+
+// ───────── 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,
+          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(new Animated.Value(isActive ? 1.1 : 1)).current;
+  useEffect(() => {
+    Animated.spring(scale, {
+      toValue: isActive ? 1.1 : 1,
+      useNativeDriver: true,
+      friction: 6,
+      tension: 80
+    }).start();
+  }, [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,
+    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

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

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