@wireservers-ui/react-natives 1.0.0-rc.1 → 1.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireservers-ui/react-natives",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "70+ production-ready React Native components — TypeScript-first, themeable, accessible. Created by WireServers-UI.",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -48,6 +48,12 @@
     "react-native-svg": ">=13"
   },
   "peerDependenciesMeta": {
+    "nativewind": {
+      "optional": true
+    },
+    "tailwind-variants": {
+      "optional": true
+    },
     "react-native-reanimated": {
       "optional": true
     },

package/src/button/styles.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const buttonStyle = tv({
-  base: 'group/button rounded bg-primary-500 self-start flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
+  base: 'group/button overflow-visible rounded bg-primary-500 self-start flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
   variants: {
     action: {
       primary:

package/src/carousel/carousel.tsx

@@ -7,7 +7,7 @@ import { carouselStyle, carouselContentStyle, carouselItemStyle, carouselPreviou
 export const [CarouselProvider, useCarouselContext] = createComponentContext<CarouselContextValue>('Carousel');
 
 export const Carousel = React.forwardRef<React.ElementRef<typeof View>, CarouselProps>(
-  ({ className, defaultIndex = 0, loop = false, onIndexChange, children, ...props }, ref) => {
+  ({ className, defaultIndex = 0, loop = false, onIndexChange, itemWidth: itemWidthProp = 0, gap: gapProp = 0, autoPlay = false, autoPlayInterval = 3000, children, ...props }, ref) => {
     const [activeIndex, _setActiveIndex] = useState(defaultIndex);
     const [itemCount, setItemCount] = useState(0);
     const [width, setWidth] = useState(0);
@@ -17,7 +17,12 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
     const animX = useRef(new Animated.Value(0)).current;
     const animXValueRef = useRef(0);
 
-    // Track animX value changes
+    // Keep prop refs stable for callbacks
+    const itemWidthRef = useRef(itemWidthProp);
+    itemWidthRef.current = itemWidthProp;
+    const gapRef = useRef(gapProp);
+    gapRef.current = gapProp;
+
     useEffect(() => {
       const id = animX.addListener(({ value }) => { animXValueRef.current = value; });
       return () => animX.removeListener(id);
@@ -29,9 +34,27 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
       onIndexChange?.(index);
     }, [onIndexChange]);
 
+    /** step = distance between one item start and the next */
+    const getStep = useCallback(() => {
+      const iw = itemWidthRef.current;
+      return iw > 0 ? iw + gapRef.current : widthRef.current;
+    }, []);
+
+    /** How many items to clone on each side for seamless loop */
+    const getCloneCount = useCallback(() => {
+      const iw = itemWidthRef.current;
+      if (!loop) return 0;
+      if (iw > 0) {
+        const step = iw + gapRef.current;
+        return step > 0 ? Math.ceil(widthRef.current / step) + 1 : 1;
+      }
+      return 1;
+    }, [loop]);
+
     const goTo = useCallback((index: number, animate = true) => {
-      const w = widthRef.current;
-      const targetX = loop ? -(index + 1) * w : -index * w;
+      const step = getStep();
+      const clones = getCloneCount();
+      const targetX = loop ? -(index + clones) * step : -index * step;
       setActiveIndex(index);
       if (animate) {
         Animated.timing(animX, { toValue: targetX, duration: 300, useNativeDriver: true }).start();
@@ -39,18 +62,20 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
         animX.setValue(targetX);
         animXValueRef.current = targetX;
       }
-    }, [loop, animX, setActiveIndex]);
+    }, [loop, animX, setActiveIndex, getStep, getCloneCount]);
 
     const next = useCallback(() => {
       const count = itemCountRef.current;
-      const w = widthRef.current;
+      const step = getStep();
+      const clones = getCloneCount();
       if (loop) {
         const nextIdx = activeIndexRef.current + 1;
         if (nextIdx >= count) {
-          // Animate into clone-of-first, then jump to real first
-          Animated.timing(animX, { toValue: -(count + 1) * w, duration: 300, useNativeDriver: true }).start(() => {
-            animX.setValue(-w);
-            animXValueRef.current = -w;
+          // Animate into first clone zone, then jump to real first
+          Animated.timing(animX, { toValue: -(count + clones) * step, duration: 300, useNativeDriver: true }).start(() => {
+            const jumpX = -clones * step;
+            animX.setValue(jumpX);
+            animXValueRef.current = jumpX;
             setActiveIndex(0);
           });
         } else {
@@ -59,18 +84,20 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
       } else {
         goTo(Math.min(activeIndexRef.current + 1, count - 1));
       }
-    }, [loop, animX, goTo, setActiveIndex]);
+    }, [loop, animX, goTo, setActiveIndex, getStep, getCloneCount]);
 
     const previous = useCallback(() => {
       const count = itemCountRef.current;
-      const w = widthRef.current;
+      const step = getStep();
+      const clones = getCloneCount();
       if (loop) {
         const prevIdx = activeIndexRef.current - 1;
         if (prevIdx < 0) {
-          // Animate into clone-of-last, then jump to real last
-          Animated.timing(animX, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
-            animX.setValue(-count * w);
-            animXValueRef.current = -count * w;
+          // Animate into last clone zone, then jump to real last
+          Animated.timing(animX, { toValue: -(clones - 1) * step, duration: 300, useNativeDriver: true }).start(() => {
+            const jumpX = -(count - 1 + clones) * step;
+            animX.setValue(jumpX);
+            animXValueRef.current = jumpX;
             setActiveIndex(count - 1);
           });
         } else {
@@ -79,10 +106,17 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
       } else {
         goTo(Math.max(activeIndexRef.current - 1, 0));
       }
-    }, [loop, animX, goTo, setActiveIndex]);
+    }, [loop, animX, goTo, setActiveIndex, getStep, getCloneCount]);
+
+    // Auto-play
+    useEffect(() => {
+      if (!autoPlay || itemCountRef.current === 0) return;
+      const id = setInterval(() => { next(); }, autoPlayInterval);
+      return () => clearInterval(id);
+    }, [autoPlay, autoPlayInterval, next]);
 
     return (
-      <CarouselProvider value={{ activeIndex, setActiveIndex, activeIndexRef, itemCount, setItemCount, itemCountRef, loop, width, setWidth, widthRef, animX, animXValueRef, goTo, next, previous }}>
+      <CarouselProvider value={{ activeIndex, setActiveIndex, activeIndexRef, itemCount, setItemCount, itemCountRef, loop, width, setWidth, widthRef, animX, animXValueRef, goTo, next, previous, itemWidth: itemWidthProp, gap: gapProp }}>
         <View ref={ref} className={carouselStyle({ class: className })} {...props}>{children}</View>
       </CarouselProvider>
     );
@@ -91,16 +125,19 @@ export const Carousel = React.forwardRef<React.ElementRef<typeof View>, Carousel
 Carousel.displayName = 'Carousel';
 
 export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, CarouselContentProps>(({ className, children, style, ...props }, ref) => {
-  const { setWidth, setItemCount, itemCountRef, loop, setActiveIndex, activeIndexRef, animX, animXValueRef, widthRef } = useCarouselContext();
+  const { setWidth, setItemCount, itemCountRef, loop, setActiveIndex, activeIndexRef, animX, animXValueRef, widthRef, itemWidth: itemWidthProp, gap: gapProp } = useCarouselContext();
   const dragStartValue = useRef(0);
   const dragStartIndex = useRef(0);
   const internalRef = useRef<View>(null);
 
-  // Keep mutable refs for values used in gesture callbacks
   const loopRef = useRef(loop);
   loopRef.current = loop;
   const setActiveIndexRef = useRef(setActiveIndex);
   setActiveIndexRef.current = setActiveIndex;
+  const itemWidthRef = useRef(itemWidthProp);
+  itemWidthRef.current = itemWidthProp;
+  const gapRef = useRef(gapProp);
+  gapRef.current = gapProp;
 
   const childArray = React.Children.toArray(children);
   const count = childArray.length;
@@ -109,27 +146,58 @@ export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, C
     itemCountRef.current = count;
   }, [count]);
 
-  // In loop mode: [cloneLast, ...real, cloneFirst]
-  const displayedChildren = loop && count > 0
-    ? [
-        React.cloneElement(childArray[count - 1] as React.ReactElement, { key: '__clone-last__' }),
-        ...childArray,
-        React.cloneElement(childArray[0] as React.ReactElement, { key: '__clone-first__' }),
-      ]
-    : children;
+  const getStep = () => {
+    const iw = itemWidthRef.current;
+    return iw > 0 ? iw + gapRef.current : widthRef.current;
+  };
+
+  const getCloneCount = () => {
+    const iw = itemWidthRef.current;
+    if (!loopRef.current) return 0;
+    if (iw > 0) {
+      const step = iw + gapRef.current;
+      return step > 0 ? Math.ceil(widthRef.current / step) + 1 : 1;
+    }
+    return 1;
+  };
+
+  // Build displayed children with clones for loop mode
+  const cloneCount = getCloneCount();
+  let displayedChildren: React.ReactNode;
+  if (loop && count > 0 && cloneCount > 0) {
+    const leadClones: React.ReactElement[] = [];
+    const trailClones: React.ReactElement[] = [];
+    for (let i = 0; i < cloneCount; i++) {
+      // Lead clones: last `cloneCount` items
+      const leadIdx = ((count - cloneCount + i) % count + count) % count;
+      leadClones.push(
+        React.cloneElement(childArray[leadIdx] as React.ReactElement, { key: `__clone-lead-${i}__` }),
+      );
+      // Trail clones: first `cloneCount` items
+      const trailIdx = i % count;
+      trailClones.push(
+        React.cloneElement(childArray[trailIdx] as React.ReactElement, { key: `__clone-trail-${i}__` }),
+      );
+    }
+    displayedChildren = [...leadClones, ...childArray, ...trailClones];
+  } else {
+    displayedChildren = children;
+  }
 
   const handleLayout = (e: LayoutChangeEvent) => {
     const w = e.nativeEvent.layout.width;
     widthRef.current = w;
     setWidth(w);
     if (loop && w > 0) {
-      // Start at real first (padded index 1)
-      animX.setValue(-w);
-      animXValueRef.current = -w;
+      const step = getStep();
+      const clones = getCloneCount();
+      const initialX = -clones * step;
+      animX.setValue(initialX);
+      animXValueRef.current = initialX;
     }
   };
 
-  // --- Shared gesture helpers (access everything via refs for stable closures) ---
+  // --- Shared gesture helpers ---
   const gestureStart = () => {
     animX.stopAnimation();
     dragStartValue.current = animXValueRef.current;
@@ -137,60 +205,67 @@ export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, C
   };
 
   const gestureMove = (dx: number) => {
-    const w = widthRef.current;
-    const clamped = Math.max(-w, Math.min(w, dx));
+    const step = getStep();
+    const clamped = Math.max(-step, Math.min(step, dx));
     animX.setValue(dragStartValue.current + clamped);
   };
 
   const gestureEnd = (dx: number, vx: number) => {
-    const w = widthRef.current;
-    if (w === 0) return;
+    const step = getStep();
+    if (step === 0) return;
     const cnt = itemCountRef.current;
     const start = dragStartIndex.current;
     const isLoop = loopRef.current;
     const setIdx = setActiveIndexRef.current;
+    const clones = getCloneCount();
 
     let delta = 0;
-    if (vx < -0.3 || dx < -w * 0.3) delta = 1;
-    else if (vx > 0.3 || dx > w * 0.3) delta = -1;
+    if (vx < -0.3 || dx < -step * 0.3) delta = 1;
+    else if (vx > 0.3 || dx > step * 0.3) delta = -1;
 
     const targetLogical = start + delta;
 
     if (isLoop) {
-      const paddedStart = start + 1;
+      const paddedStart = start + clones;
       const targetPage = paddedStart + delta;
 
-      if (targetPage <= 0) {
-        Animated.timing(animX, { toValue: 0, duration: 200, useNativeDriver: true }).start(() => {
-          animX.setValue(-cnt * w);
-          animXValueRef.current = -cnt * w;
-          setIdx(cnt - 1);
+      if (targetPage < clones) {
+        // Went before first real item — animate to clone, then jump
+        Animated.timing(animX, { toValue: -targetPage * step, duration: 200, useNativeDriver: true }).start(() => {
+          const jumpIdx = cnt - 1;
+          const jumpX = -(jumpIdx + clones) * step;
+          animX.setValue(jumpX);
+          animXValueRef.current = jumpX;
+          setIdx(jumpIdx);
         });
-      } else if (targetPage >= cnt + 1) {
-        Animated.timing(animX, { toValue: -(cnt + 1) * w, duration: 200, useNativeDriver: true }).start(() => {
-          animX.setValue(-w);
-          animXValueRef.current = -w;
+      } else if (targetPage >= cnt + clones) {
+        // Went past last real item — animate to clone, then jump
+        Animated.timing(animX, { toValue: -targetPage * step, duration: 200, useNativeDriver: true }).start(() => {
+          const jumpX = -clones * step;
+          animX.setValue(jumpX);
+          animXValueRef.current = jumpX;
           setIdx(0);
         });
       } else {
-        setIdx(Math.max(0, Math.min(cnt - 1, targetLogical)));
-        Animated.timing(animX, { toValue: -targetPage * w, duration: 200, useNativeDriver: true }).start();
+        const idx = Math.max(0, Math.min(cnt - 1, targetLogical));
+        setIdx(idx);
+        Animated.timing(animX, { toValue: -targetPage * step, duration: 200, useNativeDriver: true }).start();
       }
     } else {
       const clampedIdx = Math.max(0, Math.min(cnt - 1, targetLogical));
       setIdx(clampedIdx);
-      Animated.timing(animX, { toValue: -clampedIdx * w, duration: 200, useNativeDriver: true }).start();
+      Animated.timing(animX, { toValue: -clampedIdx * step, duration: 200, useNativeDriver: true }).start();
     }
   };
 
   const gestureCancel = () => {
-    const w = widthRef.current;
-    if (w === 0) return;
+    const step = getStep();
+    if (step === 0) return;
     const start = dragStartIndex.current;
-    const isLoop = loopRef.current;
-    const targetPage = isLoop ? start + 1 : start;
+    const clones = getCloneCount();
+    const targetPage = loopRef.current ? start + clones : start;
     setActiveIndexRef.current(start);
-    Animated.timing(animX, { toValue: -targetPage * w, duration: 200, useNativeDriver: true }).start();
+    Animated.timing(animX, { toValue: -targetPage * step, duration: 200, useNativeDriver: true }).start();
   };
 
   // --- Native: PanResponder ---
@@ -207,7 +282,7 @@ export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, C
       : null
   ).current;
 
-  // --- Web: Pointer events (PanResponder is unreliable on web) ---
+  // --- Web: Pointer events ---
   useEffect(() => {
     if (Platform.OS !== 'web') return;
     const el = internalRef.current as unknown as HTMLElement;
@@ -296,7 +371,7 @@ export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, C
       {...(panResponder?.panHandlers ?? {})}
       {...props}
     >
-      <Animated.View style={{ flexDirection: 'row', transform: [{ translateX: animX }] }}>
+      <Animated.View style={{ flexDirection: 'row', gap: gapProp, transform: [{ translateX: animX }] }}>
         {displayedChildren}
       </Animated.View>
     </View>
@@ -305,12 +380,13 @@ export const CarouselContent = React.forwardRef<React.ElementRef<typeof View>, C
 CarouselContent.displayName = 'CarouselContent';
 
 export const CarouselItem = React.forwardRef<React.ElementRef<typeof View>, CarouselItemProps>(({ className, style, onPress, children, ...props }, ref) => {
-  const { width } = useCarouselContext();
+  const { width, itemWidth } = useCarouselContext();
+  const effectiveWidth = itemWidth > 0 ? itemWidth : width;
   return (
     <View
       ref={ref}
       className={carouselItemStyle({ class: className })}
-      style={[width > 0 ? { width } : undefined, style]}
+      style={[effectiveWidth > 0 ? { width: effectiveWidth } : undefined, style]}
       {...props}
     >
       {onPress ? (

package/src/carousel/types.ts

@@ -16,6 +16,8 @@ export interface CarouselContextValue {
   goTo: (index: number, animate?: boolean) => void;
   next: () => void;
   previous: () => void;
+  itemWidth: number;
+  gap: number;
 }
 
 export interface CarouselProps extends React.ComponentPropsWithoutRef<typeof View> {
@@ -23,6 +25,14 @@ export interface CarouselProps extends React.ComponentPropsWithoutRef<typeof Vie
   defaultIndex?: number;
   loop?: boolean;
   onIndexChange?: (index: number) => void;
+  /** Fixed width for each item. When set, multiple items are visible. */
+  itemWidth?: number;
+  /** Gap between items in pixels. */
+  gap?: number;
+  /** Automatically advance slides. */
+  autoPlay?: boolean;
+  /** Interval in ms between auto-advances (default 3000). */
+  autoPlayInterval?: number;
 }
 export interface CarouselContentProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
 export interface CarouselItemProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; onPress?: () => void; }

package/src/divider/styles.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const dividerStyle = tv({
-  base: 'bg-outline-200',
+  base: 'bg-outline-200 shrink-0',
   variants: {
     orientation: {
       horizontal: 'h-px w-full',

package/tailwind-preset.js

@@ -172,9 +172,9 @@ module.exports = {
         },
       },
       fontFamily: {
-        heading: undefined,
-        body: undefined,
-        mono: undefined,
+        heading: ['System', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        body: ['System', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        mono: ['ui-monospace', 'SFMono-Regular', 'monospace'],
         jakarta: ['var(--font-plus-jakarta-sans)'],
         roboto: ['var(--font-roboto)'],
         code: ['var(--font-source-code-pro)'],