overlapping-cards-scroll 0.1.1 → 0.1.2

package/dist/react-native.js

@@ -1,6 +1,7 @@
 // src/rn/OverlappingCardsScrollRN.native.tsx
 import {
   Children,
+  Fragment,
   createContext,
   useCallback,
   useContext,
@@ -13,7 +14,43 @@ import { Animated, Easing, Platform, Pressable, StyleSheet, Text, View } from "r
 import { jsx, jsxs } from "react/jsx-runtime";
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var PAGE_DOT_POSITIONS = /* @__PURE__ */ new Set(["above", "below", "overlay"]);
+var TAB_POSITIONS = /* @__PURE__ */ new Set(["above", "below"]);
 var normalizePageDotsPosition = (value) => PAGE_DOT_POSITIONS.has(value) ? value : "below";
+var normalizeTabsPosition = (value) => TAB_POSITIONS.has(value) ? value : "above";
+var toNumericOffset = (value, fallback = 0) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value.trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+};
+var toNativeDimension = (value, fallback = 0) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed === "auto") {
+      return "auto";
+    }
+    if (trimmed.endsWith("%")) {
+      const percent = Number.parseFloat(trimmed.slice(0, -1));
+      if (Number.isFinite(percent)) {
+        return `${percent}%`;
+      }
+    }
+    const numeric = Number.parseFloat(trimmed);
+    if (Number.isFinite(numeric)) {
+      return numeric;
+    }
+  }
+  return fallback;
+};
 var resolveCardXAtProgress = (index, progress, layout) => {
   const principalIndex = Math.floor(progress);
   const transitionProgress = progress - principalIndex;
@@ -51,26 +88,69 @@ function OverlappingCardsScrollRNFocusTrigger({
   children = "Make principal",
   style = void 0,
   textStyle = void 0,
+  behavior = "smooth",
   transitionMode = "swoop",
+  disabled = false,
+  accessibilityLabel = void 0,
+  testID = void 0,
   onPress = void 0,
+  onClick = void 0,
   ...pressableProps
 }) {
   const { canFocus, focusCard } = useOverlappingCardsScrollRNCardControl();
   const handlePress = (event) => {
+    onClick == null ? void 0 : onClick(event);
     onPress == null ? void 0 : onPress(event);
-    focusCard({ animated: true, transitionMode });
+    focusCard({
+      animated: behavior !== "auto",
+      transitionMode
+    });
   };
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       style: ({ pressed }) => [styles.focusTrigger, pressed && styles.focusTriggerPressed, style],
-      disabled: !canFocus,
+      disabled: disabled || !canFocus,
+      accessibilityLabel,
+      testID,
       onPress: handlePress,
       ...pressableProps,
       children: /* @__PURE__ */ jsx(Text, { style: [styles.focusTriggerText, textStyle], children })
     }
   );
 }
+function DefaultTabsContainerComponent({
+  children,
+  style,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "tablist", accessibilityLabel: ariaLabel, style, children });
+}
+function DefaultTabsComponent({
+  name,
+  style,
+  textStyle,
+  accessibilityLabel,
+  accessibilityState,
+  onPress,
+  onClick
+}) {
+  const handlePress = () => {
+    onClick();
+    onPress();
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel,
+      accessibilityState,
+      onPress: handlePress,
+      style: ({ pressed }) => [styles.tab, pressed && styles.tabPressed, style],
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.tabText, textStyle], children: name })
+    }
+  );
+}
 var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
   if (typeof cardWidth === "number" && Number.isFinite(cardWidth) && cardWidth > 0) {
     return cardWidth;
@@ -90,26 +170,66 @@ var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
   }
   return viewportWidth * fallbackRatio;
 };
-function OverlappingCardsScrollRN({
-  children,
-  style = void 0,
-  cardHeight = 300,
-  cardWidth = void 0,
-  cardWidthRatio = 1 / 3,
-  basePeek = 64,
-  minPeek = 10,
-  maxPeek = 84,
-  showsHorizontalScrollIndicator = true,
-  snapToCardOnRelease = true,
-  snapDecelerationRate = "normal",
-  snapDisableIntervalMomentum = false,
-  showPageDots = false,
-  pageDotsPosition = "below",
-  pageDotsOffset = 10,
-  focusTransitionDuration = 420
-}) {
-  const cards = useMemo(() => Children.toArray(children), [children]);
+function OverlappingCardsScrollRN(props) {
+  const {
+    style = void 0,
+    cardHeight = 300,
+    cardWidth = void 0,
+    cardWidthRatio = 1 / 3,
+    basePeek = 64,
+    minPeek = 10,
+    maxPeek = 84,
+    showsHorizontalScrollIndicator = true,
+    snapToCardOnRelease = true,
+    snapDecelerationRate = "normal",
+    snapDisableIntervalMomentum = false,
+    showPageDots = false,
+    pageDotsPosition = "below",
+    pageDotsOffset = 10,
+    focusTransitionDuration = 420,
+    cardContainerStyle = void 0,
+    showTabs = false,
+    tabsPosition = "above",
+    tabsOffset = 10,
+    tabsComponent: TabsComponent = DefaultTabsComponent,
+    tabsContainerComponent: TabsContainerComponent = DefaultTabsContainerComponent
+  } = props;
+  const hasItems = "items" in props && Array.isArray(props.items);
+  const hasChildren = "children" in props && props.children != null;
+  useEffect(() => {
+    if (hasItems && hasChildren) {
+      console.warn(
+        "OverlappingCardsScrollRN: Both `items` and `children` were provided. `items` takes precedence."
+      );
+    }
+  }, [hasItems, hasChildren]);
+  const itemsProp = hasItems ? props.items : null;
+  const childrenProp = hasChildren ? props.children : null;
+  const cards = useMemo(() => {
+    if (itemsProp) {
+      return itemsProp.map((item) => /* @__PURE__ */ jsx(Fragment, { children: item.jsx }, item.id));
+    }
+    return Children.toArray(childrenProp);
+  }, [childrenProp, itemsProp]);
+  const cardNames = useMemo(() => {
+    if (itemsProp) {
+      return itemsProp.map((item) => item.name);
+    }
+    return null;
+  }, [itemsProp]);
   const cardCount = cards.length;
+  const resolvedTabsPosition = normalizeTabsPosition(tabsPosition);
+  const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
+  const resolvedPageDotsOffset = toNumericOffset(pageDotsOffset, 10);
+  const resolvedTabsOffset = toNumericOffset(tabsOffset, 10);
+  const resolvedCardHeight = toNativeDimension(cardHeight, 300);
+  useEffect(() => {
+    if (showTabs && cardNames === null) {
+      console.warn(
+        "OverlappingCardsScrollRN: `showTabs` requires the `items` prop to provide card names. Tabs will not render."
+      );
+    }
+  }, [cardNames, showTabs]);
   const scrollRef = useRef(null);
   const scrollX = useRef(new Animated.Value(0)).current;
   const scrollXValueRef = useRef(0);
@@ -118,6 +238,7 @@ function OverlappingCardsScrollRN({
   const focusTransitionIdRef = useRef(0);
   const [viewportWidth, setViewportWidth] = useState(1);
   const [focusTransition, setFocusTransition] = useState(null);
+  const [scrollProgress, setScrollProgress] = useState(0);
   const layout = useMemo(() => {
     const safeWidth = Math.max(1, viewportWidth);
     const safeRatio = clamp(cardWidthRatio, 0.2, 0.95);
@@ -160,11 +281,26 @@ function OverlappingCardsScrollRN({
   useEffect(() => {
     const id = scrollX.addListener(({ value }) => {
       scrollXValueRef.current = value;
+      if (!showNavigationTabs) {
+        return;
+      }
+      const nextProgress = cardCount > 1 ? clamp(value / layout.stepDistance, 0, cardCount - 1) : 0;
+      setScrollProgress(
+        (currentProgress) => Math.abs(currentProgress - nextProgress) < 1e-3 ? currentProgress : nextProgress
+      );
     });
     return () => {
       scrollX.removeListener(id);
     };
-  }, [scrollX]);
+  }, [cardCount, layout.stepDistance, scrollX, showNavigationTabs]);
+  useEffect(() => {
+    if (!showNavigationTabs) {
+      setScrollProgress(0);
+      return;
+    }
+    const nextProgress = cardCount > 1 ? clamp(scrollXValueRef.current / layout.stepDistance, 0, cardCount - 1) : 0;
+    setScrollProgress(nextProgress);
+  }, [cardCount, layout.stepDistance, showNavigationTabs]);
   useEffect(() => () => stopFocusTransitionAnimation(), [stopFocusTransitionAnimation]);
   useEffect(() => {
     if (cardCount > 1) {
@@ -199,6 +335,9 @@ function OverlappingCardsScrollRN({
       const nextScrollLeft = clamp(safeIndex * layout.stepDistance, 0, layout.scrollRange);
       const transitionMode = (_a = options.transitionMode) != null ? _a : "swoop";
       if (transitionMode === "swoop" && cardCount > 1) {
+        if (showNavigationTabs) {
+          setScrollProgress(safeIndex);
+        }
         const fromProgress = clamp(
           scrollXValueRef.current / layout.stepDistance,
           0,
@@ -255,6 +394,9 @@ function OverlappingCardsScrollRN({
       if (((_c = options.animated) != null ? _c : true) === false) {
         scrollX.setValue(nextScrollLeft);
         scrollXValueRef.current = nextScrollLeft;
+        if (showNavigationTabs) {
+          setScrollProgress(safeIndex);
+        }
       }
     },
     [
@@ -265,6 +407,7 @@ function OverlappingCardsScrollRN({
       layout.scrollRange,
       layout.stepDistance,
       scrollX,
+      showNavigationTabs,
       stopFocusTransitionAnimation
     ]
   );
@@ -289,11 +432,13 @@ function OverlappingCardsScrollRN({
       extrapolate: "clamp"
     });
   }, [focusTransition, focusTransitionProgress, layout.stepDistance, scrollX]);
+  const progress = showNavigationTabs ? scrollProgress : 0;
+  const activeIndex = Math.floor(progress);
   const renderPageDots = (placement) => {
     if (!showNavigationDots || resolvedPageDotsPosition !== placement) {
       return null;
     }
-    const rowStyle = placement === "above" ? [styles.pageDotsRow, { marginBottom: pageDotsOffset }] : placement === "below" ? [styles.pageDotsRow, { marginTop: pageDotsOffset }] : [styles.pageDotsRow, styles.pageDotsOverlay, { bottom: pageDotsOffset }];
+    const rowStyle = placement === "above" ? [styles.pageDotsRow, { marginBottom: resolvedPageDotsOffset }] : placement === "below" ? [styles.pageDotsRow, { marginTop: resolvedPageDotsOffset }] : [styles.pageDotsRow, styles.pageDotsOverlay, { bottom: resolvedPageDotsOffset }];
     return /* @__PURE__ */ jsx(
       View,
       {
@@ -329,12 +474,63 @@ function OverlappingCardsScrollRN({
       }
     );
   };
+  const renderTabs = (position) => {
+    if (!showNavigationTabs || resolvedTabsPosition !== position || cardNames === null) {
+      return null;
+    }
+    const containerStyle = position === "above" ? [styles.tabsRow, { marginBottom: resolvedTabsOffset }] : [styles.tabsRow, { marginTop: resolvedTabsOffset }];
+    return /* @__PURE__ */ jsx(
+      TabsContainerComponent,
+      {
+        position,
+        className: `rn-ocs-tabs rn-ocs-tabs--${position}`,
+        style: containerStyle,
+        ariaLabel: "Card tabs",
+        cardNames,
+        activeIndex,
+        progress,
+        children: cardNames.map((name, index) => {
+          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+          const isPrincipal = influence > 0.98;
+          const animate = {
+            opacity: 0.45 + influence * 0.55
+          };
+          const pressTab = () => focusCard(index, {
+            animated: true,
+            transitionMode: "swoop"
+          });
+          return /* @__PURE__ */ jsx(
+            TabsComponent,
+            {
+              name,
+              index,
+              position,
+              isPrincipal,
+              influence,
+              animate,
+              className: isPrincipal ? "rn-ocs-tab rn-ocs-tab--active" : "rn-ocs-tab",
+              style: { opacity: animate.opacity },
+              textStyle: isPrincipal ? styles.tabTextActive : void 0,
+              ariaLabel: `Go to ${name}`,
+              ariaCurrent: isPrincipal ? "page" : void 0,
+              accessibilityLabel: `Go to ${name}`,
+              accessibilityState: { selected: isPrincipal },
+              onPress: pressTab,
+              onClick: pressTab
+            },
+            `rn-ocs-tab-${position}-${index}`
+          );
+        })
+      }
+    );
+  };
   return /* @__PURE__ */ jsx(OverlappingCardsScrollRNControllerContext.Provider, { value: controllerContextValue, children: /* @__PURE__ */ jsxs(View, { style: [styles.shell, style], children: [
+    renderTabs("above"),
     renderPageDots("above"),
     /* @__PURE__ */ jsxs(
       View,
       {
-        style: [styles.root, { height: cardHeight }],
+        style: [styles.root, { height: resolvedCardHeight }],
         onLayout: (event) => {
           const width = event.nativeEvent.layout.width || 1;
           setViewportWidth(Math.max(1, width));
@@ -345,8 +541,8 @@ function OverlappingCardsScrollRN({
             {
               ref: scrollRef,
               horizontal: true,
-              style: [styles.scrollRegion, { height: cardHeight }],
-              contentContainerStyle: { width: layout.trackWidth, height: cardHeight },
+              style: [styles.scrollRegion, { height: resolvedCardHeight }],
+              contentContainerStyle: { width: layout.trackWidth, height: resolvedCardHeight },
               onScroll,
               onScrollBeginDrag: cancelFocusTransition,
               onMomentumScrollBegin: cancelFocusTransition,
@@ -356,7 +552,7 @@ function OverlappingCardsScrollRN({
               snapToAlignment: shouldSnapToCard ? "start" : void 0,
               decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
               disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
-              children: /* @__PURE__ */ jsx(View, { style: [styles.track, { width: layout.trackWidth, height: cardHeight }], children: cards.map((card, index) => {
+              children: /* @__PURE__ */ jsx(View, { style: [styles.track, { width: layout.trackWidth, height: resolvedCardHeight }], children: cards.map((card, index) => {
                 var _a;
                 const restingRightX = index === 0 ? 0 : (index - 1) * layout.peek + layout.cardWidth;
                 const restingLeftX = index * layout.peek;
@@ -381,13 +577,14 @@ function OverlappingCardsScrollRN({
                       styles.card,
                       {
                         width: layout.cardWidth,
-                        height: cardHeight,
+                        height: resolvedCardHeight,
                         transform: [
                           {
                             translateX: Animated.add(scrollX, animatedCardX)
                           }
                         ]
-                      }
+                      },
+                      cardContainerStyle
                     ],
                     children: /* @__PURE__ */ jsx(OverlappingCardsScrollRNCardIndexContext.Provider, { value: index, children: card })
                   },
@@ -400,7 +597,8 @@ function OverlappingCardsScrollRN({
         ]
       }
     ),
-    renderPageDots("below")
+    renderPageDots("below"),
+    renderTabs("below")
   ] }) });
 }
 var styles = StyleSheet.create({
@@ -451,6 +649,36 @@ var styles = StyleSheet.create({
     borderRadius: 999,
     backgroundColor: "#1f4666"
   },
+  tabsRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    zIndex: 6
+  },
+  tab: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: "rgba(30, 67, 99, 0.2)",
+    backgroundColor: "#eef5ff",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    marginHorizontal: 4,
+    marginVertical: 4
+  },
+  tabPressed: {
+    opacity: 0.85
+  },
+  tabText: {
+    color: "#275070",
+    fontSize: 12,
+    fontWeight: "700",
+    letterSpacing: 0.2
+  },
+  tabTextActive: {
+    color: "#173047"
+  },
   focusTrigger: {
     alignSelf: "flex-start",
     borderRadius: 99,

package/dist/types/rn/OverlappingCardsScrollRN.native.d.ts

@@ -1,26 +1,4 @@
-export declare function OverlappingCardsScrollRNFocusTrigger({ children, style, textStyle, transitionMode, onPress, ...pressableProps }: {
-    [x: string]: any;
-    children?: string;
-    style?: any;
-    textStyle?: any;
-    transitionMode?: string;
-    onPress?: any;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function OverlappingCardsScrollRN({ children, style, cardHeight, cardWidth, cardWidthRatio, basePeek, minPeek, maxPeek, showsHorizontalScrollIndicator, snapToCardOnRelease, snapDecelerationRate, snapDisableIntervalMomentum, showPageDots, pageDotsPosition, pageDotsOffset, focusTransitionDuration, }: {
-    children: any;
-    style?: any;
-    cardHeight?: number;
-    cardWidth?: any;
-    cardWidthRatio?: number;
-    basePeek?: number;
-    minPeek?: number;
-    maxPeek?: number;
-    showsHorizontalScrollIndicator?: boolean;
-    snapToCardOnRelease?: boolean;
-    snapDecelerationRate?: string;
-    snapDisableIntervalMomentum?: boolean;
-    showPageDots?: boolean;
-    pageDotsPosition?: string;
-    pageDotsOffset?: number;
-    focusTransitionDuration?: number;
-}): import("react/jsx-runtime").JSX.Element;
+import type { OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNProps } from './OverlappingCardsScrollRN.types';
+export type { OverlappingCardsScrollRNFocusTransitionMode, OverlappingCardsScrollRNFocusTriggerBehavior, OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNItem, OverlappingCardsScrollRNPageDotsPosition, OverlappingCardsScrollRNProps, OverlappingCardsScrollRNSnapDecelerationRate, OverlappingCardsScrollRNTabsContainerProps, OverlappingCardsScrollRNTabProps, OverlappingCardsScrollRNTabsPosition, } from './OverlappingCardsScrollRN.types';
+export declare function OverlappingCardsScrollRNFocusTrigger({ children, style, textStyle, behavior, transitionMode, disabled, accessibilityLabel, testID, onPress, onClick, ...pressableProps }: OverlappingCardsScrollRNFocusTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverlappingCardsScrollRN(props: OverlappingCardsScrollRNProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/rn/OverlappingCardsScrollRN.types.d.ts

@@ -0,0 +1,74 @@
+import type { ComponentProps, ComponentType, ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { CardItem as OverlappingCardsScrollWebCardItem, OverlappingCardsScroll, OverlappingCardsScrollFocusTriggerProps as OverlappingCardsScrollWebFocusTriggerProps } from '../lib/OverlappingCardsScroll';
+type OverlappingCardsScrollWebProps = ComponentProps<typeof OverlappingCardsScroll>;
+type OverlappingCardsScrollRNSharedProps = Omit<OverlappingCardsScrollWebProps, 'children' | 'items' | 'cardContainerStyle' | 'tabsComponent' | 'tabsContainerComponent'>;
+export type OverlappingCardsScrollRNPageDotsPosition = NonNullable<OverlappingCardsScrollWebProps['pageDotsPosition']>;
+export type OverlappingCardsScrollRNFocusTriggerBehavior = OverlappingCardsScrollWebFocusTriggerProps['behavior'];
+export type OverlappingCardsScrollRNFocusTransitionMode = NonNullable<OverlappingCardsScrollWebFocusTriggerProps['transitionMode']>;
+export type OverlappingCardsScrollRNSnapDecelerationRate = 'normal' | 'fast' | number;
+export type OverlappingCardsScrollRNItem = OverlappingCardsScrollWebCardItem;
+export type OverlappingCardsScrollRNTabsPosition = 'above' | 'below';
+export interface OverlappingCardsScrollRNTabProps {
+    name: string;
+    index: number;
+    position: OverlappingCardsScrollRNTabsPosition;
+    isPrincipal: boolean;
+    influence: number;
+    animate: {
+        opacity: number;
+    };
+    className: string;
+    style: StyleProp<ViewStyle>;
+    textStyle: StyleProp<TextStyle>;
+    ariaLabel: string;
+    ariaCurrent?: 'page';
+    accessibilityLabel: string;
+    accessibilityState?: {
+        selected?: boolean;
+    };
+    onPress: () => void;
+    onClick: () => void;
+}
+export interface OverlappingCardsScrollRNTabsContainerProps {
+    children: ReactNode;
+    position: OverlappingCardsScrollRNTabsPosition;
+    className: string;
+    style: StyleProp<ViewStyle>;
+    ariaLabel: string;
+    cardNames: string[];
+    activeIndex: number;
+    progress: number;
+}
+type OverlappingCardsScrollRNWithChildren = OverlappingCardsScrollRNSharedProps & {
+    children: ReactNode;
+    items?: never;
+};
+type OverlappingCardsScrollRNWithItems = OverlappingCardsScrollRNSharedProps & {
+    items: OverlappingCardsScrollRNItem[];
+    children?: never;
+};
+type OverlappingCardsScrollRNContentProps = OverlappingCardsScrollRNWithChildren | OverlappingCardsScrollRNWithItems;
+export type OverlappingCardsScrollRNProps = OverlappingCardsScrollRNContentProps & {
+    style?: StyleProp<ViewStyle>;
+    cardContainerStyle?: StyleProp<ViewStyle>;
+    tabsComponent?: ComponentType<OverlappingCardsScrollRNTabProps>;
+    tabsContainerComponent?: ComponentType<OverlappingCardsScrollRNTabsContainerProps>;
+    showsHorizontalScrollIndicator?: boolean;
+    snapDecelerationRate?: OverlappingCardsScrollRNSnapDecelerationRate;
+    snapDisableIntervalMomentum?: boolean;
+};
+export interface OverlappingCardsScrollRNFocusTriggerProps {
+    children?: ReactNode;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    behavior?: OverlappingCardsScrollRNFocusTriggerBehavior;
+    transitionMode?: OverlappingCardsScrollRNFocusTransitionMode;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    testID?: string;
+    onPress?: (event: unknown) => void;
+    onClick?: (event: unknown) => void;
+}
+export {};

package/dist/types/rn/OverlappingCardsScrollRN.web.d.ts

@@ -1,18 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { OverlappingCardsScroll } from '../lib/OverlappingCardsScroll';
-interface OverlappingCardsScrollRNFocusTriggerProps extends Omit<ComponentProps<'button'>, 'onClick'> {
-    children?: ReactNode;
-    className?: string;
-    onPress?: (event: unknown) => void;
-    onClick?: (event: unknown) => void;
-}
-export declare function OverlappingCardsScrollRNFocusTrigger({ children, className, onPress, onClick, ...buttonProps }: OverlappingCardsScrollRNFocusTriggerProps): import("react/jsx-runtime").JSX.Element;
-type OverlappingCardsScrollRNProps = Omit<ComponentProps<typeof OverlappingCardsScroll>, 'items'> & {
-    style?: StyleProp<ViewStyle>;
-    showsHorizontalScrollIndicator?: boolean;
-    snapDecelerationRate?: string;
-    snapDisableIntervalMomentum?: boolean;
-};
-export declare function OverlappingCardsScrollRN({ children, style, showsHorizontalScrollIndicator, snapDecelerationRate, snapDisableIntervalMomentum, ...overlappingCardsScrollProps }: OverlappingCardsScrollRNProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNProps } from './OverlappingCardsScrollRN.types';
+export type { OverlappingCardsScrollRNFocusTransitionMode, OverlappingCardsScrollRNFocusTriggerBehavior, OverlappingCardsScrollRNFocusTriggerProps, OverlappingCardsScrollRNItem, OverlappingCardsScrollRNPageDotsPosition, OverlappingCardsScrollRNProps, OverlappingCardsScrollRNSnapDecelerationRate, OverlappingCardsScrollRNTabsContainerProps, OverlappingCardsScrollRNTabProps, OverlappingCardsScrollRNTabsPosition, } from './OverlappingCardsScrollRN.types';
+export declare function OverlappingCardsScrollRNFocusTrigger({ children, className, style, textStyle, behavior, transitionMode, disabled, accessibilityLabel, testID, onPress, onClick, ...buttonProps }: OverlappingCardsScrollRNFocusTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverlappingCardsScrollRN({ style, showsHorizontalScrollIndicator, snapDecelerationRate, snapDisableIntervalMomentum, ...overlappingCardsScrollProps }: OverlappingCardsScrollRNProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overlapping-cards-scroll",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Overlapping cards scroll component for React, React Native, and React Native Web.",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,8 @@
   },
   "files": [
     "dist",
+    "src/lib",
+    "src/rn",
     "README.md",
     "LICENSE"
   ],
@@ -67,7 +69,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "dev:expo": "expo start",
+    "dev:expo": "node ./node_modules/expo/bin/cli start ./expo-demo",
     "build": "npm run build:package",
     "build:package": "node ./scripts/build-package.mjs && npm run build:types",
     "build:types": "tsc -p tsconfig.package.json",
@@ -75,7 +77,10 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "preview": "vite preview --outDir web-build",
-    "prepack": "npm run build:package"
+    "prepack": "npm run build:package",
+    "patch": "npm version patch",
+    "publish": "npm publish --access public",
+    "npmlogin": "npm login"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",