@demlanide/react-lucky-components 0.1.0

package/dist/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/Button/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ButtonVariant } from './types';
+export declare const ButtonContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").View>, {
+    $variant: ButtonVariant;
+    $isDisabled: boolean;
+    $fullWidth: boolean;
+}>>;
+export declare const ContentRow: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const IconWrap: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const ButtonLabel: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").TextProps, {
+    $variant: ButtonVariant;
+}>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/Button/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Button/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,eAAe;cAChB,aAAa;iBACV,OAAO;gBACR,OAAO;GAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU,+KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,+KAGpB,CAAC;AAEF,eAAO,MAAM,WAAW;cAA2B,aAAa;GAO/D,CAAC"}

package/dist/Button/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components/native';
+import { BUTTON_TOKENS, BUTTON_VARIANT_COLORS } from './constants';
+export const ButtonContainer = styled.TouchableOpacity `
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-height: ${BUTTON_TOKENS.minHeight}px;
+  padding: ${BUTTON_TOKENS.paddingVertical}px ${BUTTON_TOKENS.paddingHorizontal}px;
+  border-radius: ${BUTTON_TOKENS.borderRadius}px;
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+  overflow: hidden;
+  background-color: ${({ $variant, $isDisabled }) => $isDisabled
+    ? BUTTON_VARIANT_COLORS[$variant].disabledBackgroundColor
+    : BUTTON_VARIANT_COLORS[$variant].backgroundColor};
+  opacity: ${({ $variant, $isDisabled }) => $variant === 'secondary' && $isDisabled ? 0.55 : 1};
+`;
+export const ContentRow = styled.View `
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: ${BUTTON_TOKENS.gap}px;
+`;
+export const IconWrap = styled.View `
+  align-items: center;
+  justify-content: center;
+`;
+export const ButtonLabel = styled.Text `
+  font-family: 'SF Pro';
+  font-size: ${BUTTON_TOKENS.typography.fontSize}px;
+  font-weight: ${BUTTON_TOKENS.typography.fontWeight};
+  line-height: ${BUTTON_TOKENS.typography.lineHeight}px;
+  letter-spacing: ${BUTTON_TOKENS.typography.letterSpacing}px;
+  color: ${({ $variant }) => BUTTON_VARIANT_COLORS[$variant].textColor};
+`;

package/dist/Button/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+export type ButtonVariant = 'primary' | 'secondary';
+export interface ButtonProps extends Omit<TouchableOpacityProps, 'children' | 'style'> {
+    /** Button content */
+    children: ReactNode;
+    /** Visual style variant. Currently only `primary` is supported. */
+    variant?: ButtonVariant;
+    /** Full width button container */
+    fullWidth?: boolean;
+    /** Element rendered before the label/content */
+    iconLeft?: ReactNode;
+    /** Element rendered after the label/content */
+    iconRight?: ReactNode;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Optional text style overrides for the label */
+    textStyle?: StyleProp<TextStyle>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3F,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,GAAG,OAAO,CAAC;IACpF,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,mEAAmE;IACnE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC"}

package/dist/Button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/CardStack/BehindCard.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import Animated from 'react-native-reanimated';
+interface BehindCardProps {
+    position: number;
+    progress: Animated.SharedValue<number>;
+    maxVisible: number;
+    style: any;
+    children: React.ReactNode;
+}
+export declare function BehindCard({ position, progress, maxVisible, style, children, }: BehindCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BehindCard.d.ts.map

package/dist/CardStack/BehindCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BehindCard.d.ts","sourceRoot":"","sources":["../../src/CardStack/BehindCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAIN,MAAM,yBAAyB,CAAC;AAGjC,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,GACT,EAAE,eAAe,2CAgCjB"}

package/dist/CardStack/BehindCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { Extrapolation, useAnimatedStyle, interpolate, } from 'react-native-reanimated';
+import { CARD_STACK_TOKENS as T } from './constants';
+export function BehindCard({ position, progress, maxVisible, style, children, }) {
+    const animStyle = useAnimatedStyle(() => ({
+        transform: [
+            {
+                scale: interpolate(progress.value, [0, 1], [1 - T.scaleStep * position, 1 - T.scaleStep * (position - 1)]),
+            },
+            {
+                translateY: interpolate(progress.value, [0, 1], [T.offsetStep * position, T.offsetStep * (position - 1)]),
+            },
+        ],
+        opacity: interpolate(progress.value, [0, 0.001], [0, 1], Extrapolation.CLAMP),
+        zIndex: maxVisible - position,
+    }));
+    return (_jsx(Animated.View, { style: [style, animStyle], pointerEvents: "none", children: children }));
+}

package/dist/CardStack/CardStack.d.ts

@@ -0,0 +1,3 @@
+import type { CardStackProps } from './types';
+export declare function CardStack<Item>({ data, activeIndex, onSwipeRelease, onSwiped, showDots, dotsActiveIndex, dotsPosition, onDotPress, dotsStyle, renderCard, keyExtractor, maxVisible, swipeThreshold, swipeVelocity, swipeCommitDuration, style, cardStyle, }: CardStackProps<Item>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CardStack.d.ts.map

package/dist/CardStack/CardStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../src/CardStack/CardStack.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,IAAI,EAAE,EAC9B,IAAI,EACJ,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,eAAe,EACf,YAAuB,EACvB,UAAU,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,UAAyB,EACzB,cAAiC,EACjC,aAA+B,EAC/B,mBAA2C,EAC3C,KAAK,EACL,SAAS,GACV,EAAE,cAAc,CAAC,IAAI,CAAC,kDAiFtB"}

package/dist/CardStack/CardStack.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { CARD_STACK_TOKENS as T } from './constants';
+import { useSwipeGesture } from './useSwipeGesture';
+import { StackCard } from './StackCard';
+import { CardStackDots } from './CardStackDots';
+export function CardStack({ data, activeIndex, onSwipeRelease, onSwiped, showDots = false, dotsActiveIndex, dotsPosition = 'bottom', onDotPress, dotsStyle, renderCard, keyExtractor, maxVisible = T.maxVisible, swipeThreshold = T.swipeThreshold, swipeVelocity = T.swipeVelocity, swipeCommitDuration = T.swipeCommitDuration, style, cardStyle, }) {
+    const canCommitSwipe = data.length > 1;
+    const { pan, tx, ty, progress } = useSwipeGesture({
+        activeIndex,
+        swipeThreshold,
+        swipeVelocity,
+        swipeCommitDuration,
+        maxVisible,
+        canCommitSwipe,
+        onSwipeRelease,
+        onSwiped,
+    });
+    if (data.length === 0)
+        return null;
+    const cards = [];
+    const dotsIndex = dotsActiveIndex ?? activeIndex;
+    const flatCardStyle = cardStyle
+        ? StyleSheet.flatten([styles.card, cardStyle])
+        : styles.card;
+    for (let di = 0; di < data.length; di++) {
+        const item = data[di];
+        const key = keyExtractor(item, di);
+        const offset = (di - activeIndex + data.length) % data.length;
+        const isTop = offset === 0;
+        const isVisible = offset < maxVisible;
+        cards.push(_jsx(StackCard, { isTop: isTop, position: offset, visible: isVisible, pan: pan, tx: tx, ty: ty, progress: progress, maxVisible: maxVisible, style: flatCardStyle, children: renderCard(item, { index: di }) }, key));
+    }
+    const dots = showDots && onDotPress ? (_jsx(CardStackDots, { count: data.length, activeIndex: dotsIndex, onDotPress: onDotPress, position: dotsPosition, style: dotsStyle })) : null;
+    const isVerticalDots = dotsPosition === 'left' || dotsPosition === 'right';
+    return (_jsxs(View, { style: [styles.stack, style], children: [dots && !isVerticalDots && dotsPosition === 'top' && (_jsx(View, { style: [styles.dotsSlot, styles.dotsTop], children: dots })), _jsxs(View, { style: isVerticalDots ? styles.contentRow : styles.contentColumn, children: [dots && isVerticalDots && dotsPosition === 'left' && (_jsx(View, { style: [styles.dotsSlot, styles.dotsLeft], children: dots })), _jsx(View, { style: styles.cardsViewport, children: cards }), dots && isVerticalDots && dotsPosition === 'right' && (_jsx(View, { style: [styles.dotsSlot, styles.dotsRight], children: dots }))] }), dots && !isVerticalDots && dotsPosition === 'bottom' && (_jsx(View, { style: [styles.dotsSlot, styles.dotsBottom], children: dots }))] }));
+}
+const styles = StyleSheet.create({
+    stack: {
+        flex: 1,
+    },
+    contentColumn: {
+        flex: 1,
+    },
+    contentRow: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    cardsViewport: {
+        flex: 1,
+        position: 'relative',
+    },
+    dotsSlot: {
+        zIndex: T.maxVisible + 1,
+    },
+    dotsTop: {
+        marginBottom: 8,
+        alignItems: 'center',
+    },
+    dotsBottom: {
+        marginTop: 8,
+        alignItems: 'center',
+    },
+    dotsLeft: {
+        justifyContent: 'center',
+    },
+    dotsRight: {
+        justifyContent: 'center',
+    },
+    card: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: T.cardHorizontalInset,
+        right: T.cardHorizontalInset,
+    },
+});

package/dist/CardStack/CardStackDots.d.ts

@@ -0,0 +1,3 @@
+import type { CardStackDotsProps } from './types';
+export declare function CardStackDots({ count, activeIndex, onDotPress, position, dotSize, dotGap, dotColor, dotActiveOpacity, dotInactiveOpacity, glassIntensity, glassTint, style, }: CardStackDotsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CardStackDots.d.ts.map

package/dist/CardStack/CardStackDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardStackDots.d.ts","sourceRoot":"","sources":["../../src/CardStack/CardStackDots.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAmB,EACnB,OAAmB,EACnB,MAAiB,EACjB,QAAqB,EACrB,gBAAqC,EACrC,kBAAyC,EACzC,cAAiC,EACjC,SAAuB,EACvB,KAAK,GACN,EAAE,kBAAkB,kDAgIpB"}

package/dist/CardStack/CardStackDots.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, } from 'react-native-reanimated';
+import { BlurView } from 'expo-blur';
+import { CARD_STACK_DOTS_TOKENS as D } from './constants';
+export function CardStackDots({ count, activeIndex, onDotPress, position = 'bottom', dotSize = D.dotSize, dotGap = D.dotGap, dotColor = D.dotColor, dotActiveOpacity = D.dotActiveOpacity, dotInactiveOpacity = D.dotInactiveOpacity, glassIntensity = D.glassIntensity, glassTint = D.glassTint, style, }) {
+    const isVertical = position === 'left' || position === 'right';
+    const containerX = useSharedValue(0);
+    const containerY = useSharedValue(0);
+    const containerW = useSharedValue(0);
+    const containerH = useSharedValue(0);
+    const lastPanIdx = useSharedValue(-1);
+    const pressing = useSharedValue(0);
+    const dotStep = dotSize + dotGap;
+    const handleLayout = useCallback((e) => {
+        containerW.value = e.nativeEvent.layout.width;
+        containerH.value = e.nativeEvent.layout.height;
+        e.target.measureInWindow?.((x, y) => {
+            containerX.value = x;
+            containerY.value = y;
+        });
+    }, [containerW, containerH, containerX, containerY]);
+    const handlePan = useCallback((absoluteX, absoluteY) => {
+        'worklet';
+        const total = count * dotStep - dotGap;
+        const start = isVertical
+            ? containerY.value + (containerH.value - total) / 2
+            : containerX.value + (containerW.value - total) / 2;
+        const coord = isVertical ? absoluteY : absoluteX;
+        const idx = Math.round((coord - start) / dotStep);
+        const clamped = Math.max(0, Math.min(count - 1, idx));
+        if (clamped !== lastPanIdx.value) {
+            lastPanIdx.value = clamped;
+            runOnJS(onDotPress)(clamped);
+        }
+    }, [
+        count,
+        dotStep,
+        dotGap,
+        isVertical,
+        containerX,
+        containerY,
+        containerW,
+        containerH,
+        lastPanIdx,
+        onDotPress,
+    ]);
+    const panGesture = Gesture.Pan()
+        .onBegin((e) => {
+        pressing.value = withTiming(1, { duration: D.pressAnimateIn });
+        lastPanIdx.value = -1;
+        handlePan(e.absoluteX, e.absoluteY);
+    })
+        .onUpdate((e) => {
+        handlePan(e.absoluteX, e.absoluteY);
+    })
+        .onEnd(() => {
+        pressing.value = withTiming(0, { duration: D.pressAnimateOut });
+        lastPanIdx.value = -1;
+    })
+        .onFinalize(() => {
+        pressing.value = withTiming(0, { duration: D.pressAnimateOut });
+    });
+    const glassStyle = useAnimatedStyle(() => ({
+        opacity: pressing.value * 0.8,
+        transform: [{ scale: D.glassRestScale + pressing.value * (1 - D.glassRestScale) }],
+    }));
+    if (count <= 1)
+        return null;
+    return (_jsx(View, { style: [
+            styles.outerWrap,
+            isVertical ? styles.outerWrapVertical : styles.outerWrapHorizontal,
+            style,
+        ], children: _jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: [
+                    styles.touchArea,
+                    isVertical ? styles.touchAreaVertical : styles.touchAreaHorizontal,
+                    {
+                        gap: dotGap,
+                        paddingHorizontal: D.pillHorizontalPadding,
+                        paddingVertical: D.pillVerticalPadding,
+                    },
+                ], onLayout: handleLayout, children: [_jsx(Animated.View, { style: [styles.glassPill, glassStyle], children: _jsx(BlurView, { intensity: glassIntensity, tint: glassTint, style: StyleSheet.absoluteFill }) }), Array.from({ length: count }, (_, i) => (_jsx(TouchableOpacity, { onPress: () => onDotPress(i), hitSlop: { top: 12, bottom: 12, left: 4, right: 4 }, accessibilityRole: "button", accessibilityLabel: `Go to item ${i + 1}`, children: _jsx(View, { style: {
+                                width: dotSize,
+                                height: dotSize,
+                                borderRadius: dotSize / 2,
+                                backgroundColor: dotColor,
+                                opacity: i === activeIndex ? dotActiveOpacity : dotInactiveOpacity,
+                            } }) }, i)))] }) }) }));
+}
+const styles = StyleSheet.create({
+    outerWrap: {
+        alignItems: 'center',
+    },
+    outerWrapHorizontal: {
+        paddingBottom: 0,
+    },
+    outerWrapVertical: {
+        justifyContent: 'center',
+    },
+    touchArea: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 28,
+    },
+    touchAreaHorizontal: {
+        flexDirection: 'row',
+    },
+    touchAreaVertical: {
+        flexDirection: 'column',
+        minHeight: 0,
+        minWidth: 28,
+    },
+    glassPill: {
+        ...StyleSheet.absoluteFillObject,
+        borderRadius: 50,
+        overflow: 'hidden',
+        backgroundColor: `rgba(0, 0, 0, ${D.glassBaseOpacity})`,
+    },
+});

package/dist/CardStack/StackCard.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { type SharedValue } from 'react-native-reanimated';
+interface StackCardProps {
+    isTop: boolean;
+    position: number;
+    visible: boolean;
+    pan: ReturnType<typeof Gesture.Pan>;
+    tx: SharedValue<number>;
+    ty: SharedValue<number>;
+    progress: SharedValue<number>;
+    maxVisible: number;
+    style: any;
+    children: React.ReactNode;
+}
+/**
+ * Unified card wrapper that keeps a stable React identity regardless of
+ * whether the card is the active (top) card or a behind/off-screen card.
+ *
+ * Uses a single useAnimatedStyle for both states so that Reanimated never
+ * needs to swap one animated style object for another on the native view,
+ * which avoids stale property issues (e.g. opacity: 0 lingering after a
+ * card transitions from behind to top).
+ */
+export declare function StackCard({ isTop, position, visible, pan, tx, ty, progress, maxVisible, style, children, }: StackCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StackCard.d.ts.map

package/dist/CardStack/StackCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackCard.d.ts","sourceRoot":"","sources":["../../src/CardStack/StackCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,OAAO,EAAmB,MAAM,8BAA8B,CAAC;AACxE,OAAiB,EAIf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAGjC,UAAU,cAAc;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;IACpC,EAAE,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxB,EAAE,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,EACH,EAAE,EACF,EAAE,EACF,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,2CAkDhB"}

package/dist/CardStack/StackCard.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { Extrapolation, useAnimatedStyle, interpolate, } from 'react-native-reanimated';
+import { CARD_STACK_TOKENS as T } from './constants';
+/**
+ * Unified card wrapper that keeps a stable React identity regardless of
+ * whether the card is the active (top) card or a behind/off-screen card.
+ *
+ * Uses a single useAnimatedStyle for both states so that Reanimated never
+ * needs to swap one animated style object for another on the native view,
+ * which avoids stale property issues (e.g. opacity: 0 lingering after a
+ * card transitions from behind to top).
+ */
+export function StackCard({ isTop, position, visible, pan, tx, ty, progress, maxVisible, style, children, }) {
+    const noop = useRef(Gesture.Manual()).current;
+    const animStyle = useAnimatedStyle(() => {
+        if (isTop) {
+            return {
+                transform: [
+                    { translateX: tx.value },
+                    { translateY: ty.value },
+                    { rotate: `${tx.value * T.rotationPerPx}deg` },
+                ],
+                opacity: 1,
+                zIndex: maxVisible,
+            };
+        }
+        return {
+            transform: [
+                {
+                    scale: interpolate(progress.value, [0, 1], [1 - T.scaleStep * position, 1 - T.scaleStep * (position - 1)]),
+                },
+                {
+                    translateY: interpolate(progress.value, [0, 1], [T.offsetStep * position, T.offsetStep * (position - 1)]),
+                },
+            ],
+            opacity: visible
+                ? interpolate(progress.value, [0, 0.001], [0, 1], Extrapolation.CLAMP)
+                : 0,
+            zIndex: visible ? maxVisible - position : -1,
+        };
+    });
+    return (_jsx(GestureDetector, { gesture: isTop ? pan : noop, children: _jsx(Animated.View, { style: [style, animStyle], pointerEvents: isTop ? 'auto' : 'none', children: children }) }));
+}

package/dist/CardStack/constants.d.ts

@@ -0,0 +1,32 @@
+export declare const CARD_STACK_TOKENS: {
+    readonly swipeThreshold: 120;
+    readonly swipeVelocity: 800;
+    readonly swipeCommitDuration: 80;
+    readonly flyDuration: 800;
+    readonly flyDistance: 1500;
+    readonly maxVisible: 3;
+    readonly scaleStep: 0.05;
+    readonly offsetStep: 8;
+    readonly rotationPerPx: 0.08;
+    readonly peekDeadZone: 0.08;
+    readonly peekFadeRange: 0.1;
+    readonly springDamping: 20;
+    readonly springStiffness: 200;
+    readonly cardHorizontalInset: 16;
+};
+export declare const CARD_STACK_DOTS_TOKENS: {
+    readonly dotSize: 8;
+    readonly dotGap: 8;
+    readonly dotColor: "#000000";
+    readonly dotActiveOpacity: 1;
+    readonly dotInactiveOpacity: 0.3;
+    readonly pillVerticalPadding: 8;
+    readonly pillHorizontalPadding: 12;
+    readonly glassIntensity: 40;
+    readonly glassTint: "dark";
+    readonly glassBaseOpacity: 0.25;
+    readonly glassRestScale: 0.92;
+    readonly pressAnimateIn: 120;
+    readonly pressAnimateOut: 200;
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/CardStack/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/CardStack/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAepB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;CAczB,CAAC"}

package/dist/CardStack/constants.js

@@ -0,0 +1,31 @@
+export const CARD_STACK_TOKENS = {
+    swipeThreshold: 120,
+    swipeVelocity: 800,
+    swipeCommitDuration: 80,
+    flyDuration: 800,
+    flyDistance: 1500,
+    maxVisible: 3,
+    scaleStep: 0.05,
+    offsetStep: 8,
+    rotationPerPx: 0.08,
+    peekDeadZone: 0.08,
+    peekFadeRange: 0.1,
+    springDamping: 20,
+    springStiffness: 200,
+    cardHorizontalInset: 16,
+};
+export const CARD_STACK_DOTS_TOKENS = {
+    dotSize: 8,
+    dotGap: 8,
+    dotColor: '#000000',
+    dotActiveOpacity: 1,
+    dotInactiveOpacity: 0.3,
+    pillVerticalPadding: 8,
+    pillHorizontalPadding: 12,
+    glassIntensity: 40,
+    glassTint: 'dark',
+    glassBaseOpacity: 0.25,
+    glassRestScale: 0.92,
+    pressAnimateIn: 120,
+    pressAnimateOut: 200,
+};

package/dist/CardStack/index.d.ts

@@ -0,0 +1,4 @@
+export { CardStack } from './CardStack';
+export { CardStackDots } from './CardStackDots';
+export type { CardStackProps, CardStackDotsProps, CardStackDotsPosition, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/CardStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CardStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}

package/dist/CardStack/index.js

@@ -0,0 +1,2 @@
+export { CardStack } from './CardStack';
+export { CardStackDots } from './CardStackDots';

package/dist/CardStack/types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type CardStackDotsPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface CardStackProps<T> {
+    data: T[];
+    activeIndex: number;
+    onSwipeRelease?: () => void;
+    onSwiped: () => void;
+    showDots?: boolean;
+    dotsActiveIndex?: number;
+    dotsPosition?: CardStackDotsPosition;
+    onDotPress?: (index: number) => void;
+    dotsStyle?: StyleProp<ViewStyle>;
+    renderCard: (item: T, info: {
+        index: number;
+    }) => ReactNode;
+    keyExtractor: (item: T, index: number) => string;
+    maxVisible?: number;
+    swipeThreshold?: number;
+    swipeVelocity?: number;
+    swipeCommitDuration?: number;
+    style?: StyleProp<ViewStyle>;
+    cardStyle?: StyleProp<ViewStyle>;
+}
+export interface CardStackDotsProps {
+    count: number;
+    activeIndex: number;
+    onDotPress: (index: number) => void;
+    position?: CardStackDotsPosition;
+    dotSize?: number;
+    dotGap?: number;
+    dotColor?: string;
+    dotActiveOpacity?: number;
+    dotInactiveOpacity?: number;
+    glassIntensity?: number;
+    glassTint?: 'light' | 'dark' | 'default';
+    style?: StyleProp<ViewStyle>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/CardStack/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/CardStack/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAC5D,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/CardStack/types.js

@@ -0,0 +1 @@
+export {};

package/dist/CardStack/useSwipeGesture.d.ts

@@ -0,0 +1,18 @@
+interface UseSwipeGestureOptions {
+    activeIndex: number;
+    swipeThreshold: number;
+    swipeVelocity: number;
+    swipeCommitDuration: number;
+    maxVisible: number;
+    canCommitSwipe: boolean;
+    onSwipeRelease?: () => void;
+    onSwiped: () => void;
+}
+export declare function useSwipeGesture({ activeIndex, swipeThreshold, swipeVelocity, swipeCommitDuration, maxVisible, canCommitSwipe, onSwipeRelease, onSwiped, }: UseSwipeGestureOptions): {
+    pan: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    tx: import("react-native-reanimated").SharedValue<number>;
+    ty: import("react-native-reanimated").SharedValue<number>;
+    progress: import("react-native-reanimated").DerivedValue<number>;
+};
+export {};
+//# sourceMappingURL=useSwipeGesture.d.ts.map

package/dist/CardStack/useSwipeGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipeGesture.d.ts","sourceRoot":"","sources":["../../src/CardStack/useSwipeGesture.ts"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,cAAc,EACd,QAAQ,GACT,EAAE,sBAAsB;;;;;EAuFxB"}

package/dist/CardStack/useSwipeGesture.js

@@ -0,0 +1,70 @@
+import { useCallback, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { useSharedValue, useDerivedValue, withTiming, withSpring, runOnJS, Easing, } from 'react-native-reanimated';
+import { CARD_STACK_TOKENS as T } from './constants';
+export function useSwipeGesture({ activeIndex, swipeThreshold, swipeVelocity, swipeCommitDuration, maxVisible, canCommitSwipe, onSwipeRelease, onSwiped, }) {
+    const tx = useSharedValue(0);
+    const ty = useSharedValue(0);
+    const flying = useSharedValue(false);
+    const swipeCommitProgress = useSharedValue(0);
+    const prevIndex = useRef(activeIndex);
+    if (prevIndex.current !== activeIndex) {
+        prevIndex.current = activeIndex;
+        tx.value = 0;
+        ty.value = 0;
+        flying.value = false;
+        swipeCommitProgress.value = 0;
+    }
+    const progress = useDerivedValue(() => {
+        if (flying.value)
+            return 1;
+        return Math.min(Math.sqrt(tx.value ** 2 + ty.value ** 2) / swipeThreshold, 1);
+    });
+    const onSwipeEnd = useCallback(() => {
+        onSwiped();
+    }, [onSwiped]);
+    const onSwipeReleaseStart = useCallback(() => {
+        onSwipeRelease?.();
+    }, [onSwipeRelease]);
+    const pan = Gesture.Pan()
+        .activeOffsetX([-10, 10])
+        .activeOffsetY([-10, 10])
+        .onUpdate((e) => {
+        if (flying.value)
+            return;
+        tx.value = e.translationX;
+        ty.value = e.translationY;
+    })
+        .onEnd((e) => {
+        if (flying.value)
+            return;
+        const dist = Math.sqrt(e.translationX ** 2 + e.translationY ** 2);
+        const vel = Math.sqrt(e.velocityX ** 2 + e.velocityY ** 2);
+        if (canCommitSwipe && (dist > swipeThreshold || vel > swipeVelocity)) {
+            flying.value = true;
+            runOnJS(onSwipeReleaseStart)();
+            const angle = Math.atan2(e.translationY + e.velocityY * 0.15, e.translationX + e.velocityX * 0.15);
+            const targetX = Math.cos(angle) * T.flyDistance;
+            const targetY = Math.sin(angle) * T.flyDistance;
+            const commitDuration = Math.max(0, Math.min(swipeCommitDuration, T.flyDuration));
+            tx.value = withTiming(targetX, { duration: T.flyDuration, easing: Easing.out(Easing.cubic) });
+            ty.value = withTiming(targetY, { duration: T.flyDuration, easing: Easing.out(Easing.cubic) });
+            swipeCommitProgress.value = 0;
+            swipeCommitProgress.value = withTiming(1, { duration: commitDuration, easing: Easing.linear }, (finished) => {
+                if (finished)
+                    runOnJS(onSwipeEnd)();
+            });
+        }
+        else {
+            tx.value = withSpring(0, {
+                damping: T.springDamping,
+                stiffness: T.springStiffness,
+            });
+            ty.value = withSpring(0, {
+                damping: T.springDamping,
+                stiffness: T.springStiffness,
+            });
+        }
+    });
+    return { pan, tx, ty, progress };
+}