@appfunnel-dev/sdk 0.5.0 → 0.7.0

package/dist/elements/index.d.ts

@@ -0,0 +1,602 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { motion } from 'framer-motion';
+
+type EasingType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
+
+interface ProgressBarCheckpoint {
+    /** Percentage (0–100) at which this checkpoint fires */
+    at: number;
+    /** If true, the progress bar pauses at this checkpoint until resumed */
+    pause?: boolean;
+}
+interface ProgressBarHandle {
+    /** Start the progress animation from the beginning */
+    start: () => void;
+    /** Pause the progress animation */
+    pause: () => void;
+    /** Resume after a pause */
+    resume: () => void;
+    /** Reset to 0 without starting */
+    reset: () => void;
+}
+interface ProgressBarProps {
+    /** Duration of the full animation in milliseconds (default: 5000) */
+    duration?: number;
+    /** Track (background) color (default: #e5e7eb) */
+    trackColor?: string;
+    /** Fill (progress) color (default: #3b82f6) */
+    fillColor?: string;
+    /** Border radius of the bar (default: 9999px) */
+    borderRadius?: string | number;
+    /** Start automatically on mount (default: true) */
+    autoStart?: boolean;
+    /** Easing curve for the animation (default: linear) */
+    animation?: EasingType;
+    /** Checkpoints that fire callbacks or pause the animation */
+    checkpoints?: ProgressBarCheckpoint[];
+    /** Called on each checkpoint hit with the checkpoint percentage */
+    onCheckpoint?: (percentage: number) => void;
+    /** Called on every whole-number progress change (0–100) */
+    onProgress?: (percentage: number) => void;
+    /** Called when progress reaches 100% */
+    onComplete?: () => void;
+    /** Container style */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Fill bar style overrides */
+    fillStyle?: CSSProperties;
+    /** Fill bar className */
+    fillClassName?: string;
+    /** Children rendered inside the container (e.g., a label overlay) */
+    children?: ReactNode;
+}
+/**
+ * An animated horizontal progress bar with easing, checkpoints, and pause/resume control.
+ *
+ * @example Auto-starting progress bar
+ * ```tsx
+ * <ProgressBar
+ *   duration={3000}
+ *   fillColor="#2FAD39"
+ *   animation="easeOut"
+ *   onComplete={() => goToNextPage()}
+ * />
+ * ```
+ *
+ * @example With checkpoints and ref control
+ * ```tsx
+ * const barRef = useRef<ProgressBarHandle>(null)
+ *
+ * <ProgressBar
+ *   ref={barRef}
+ *   duration={5000}
+ *   autoStart={false}
+ *   fillColor="#3b82f6"
+ *   checkpoints={[
+ *     { at: 25, pause: true },
+ *     { at: 50, pause: true },
+ *   ]}
+ *   onCheckpoint={(pct) => console.log(`Reached ${pct}%`)}
+ *   onProgress={(pct) => setLabel(`${pct}%`)}
+ * />
+ *
+ * <button onClick={() => barRef.current?.start()}>Start</button>
+ * <button onClick={() => barRef.current?.resume()}>Resume</button>
+ * ```
+ */
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<ProgressBarHandle>>;
+
+interface ProgressCircleCheckpoint {
+    /** Percentage (0–100) at which this checkpoint fires */
+    at: number;
+    /** If true, the progress pauses at this checkpoint until resumed */
+    pause?: boolean;
+}
+interface ProgressCircleHandle {
+    /** Start the progress animation from the beginning */
+    start: () => void;
+    /** Pause the progress animation */
+    pause: () => void;
+    /** Resume after a pause */
+    resume: () => void;
+    /** Reset to 0 without starting */
+    reset: () => void;
+}
+interface ProgressCircleProps {
+    /** Duration of the full animation in milliseconds (default: 5000) */
+    duration?: number;
+    /** Track (background) color (default: #e5e7eb) */
+    trackColor?: string;
+    /** Fill (progress) color (default: #3b82f6) */
+    fillColor?: string;
+    /** Track stroke width (default: 8) */
+    trackWidth?: number;
+    /** Fill stroke width (default: 8) */
+    fillWidth?: number;
+    /** Stroke line cap (default: round) */
+    lineCap?: 'round' | 'butt' | 'square';
+    /** Start automatically on mount (default: true) */
+    autoStart?: boolean;
+    /** Easing curve for the animation (default: linear) */
+    animation?: EasingType;
+    /** Checkpoints that fire callbacks or pause the animation */
+    checkpoints?: ProgressCircleCheckpoint[];
+    /** Called on each checkpoint hit */
+    onCheckpoint?: (percentage: number) => void;
+    /** Called on every whole-number progress change (0–100) */
+    onProgress?: (percentage: number) => void;
+    /** Called when progress reaches 100% */
+    onComplete?: () => void;
+    /** Size of the SVG viewBox (default: 100) */
+    size?: number;
+    /** Container style */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Render custom content centered inside the circle — receives current progress (0–100) */
+    renderInner?: (progress: number) => ReactNode;
+}
+/**
+ * A circular SVG progress indicator with easing, checkpoints, and inner content.
+ *
+ * @example Loading screen with percentage
+ * ```tsx
+ * <ProgressCircle
+ *   duration={5000}
+ *   fillColor="#2FAD39"
+ *   trackColor="#ededed"
+ *   animation="easeOut"
+ *   onComplete={() => goToNextPage()}
+ *   renderInner={(progress) => <span>{progress}%</span>}
+ * />
+ * ```
+ *
+ * @example Manual control with ref
+ * ```tsx
+ * const circleRef = useRef<ProgressCircleHandle>(null)
+ *
+ * <ProgressCircle
+ *   ref={circleRef}
+ *   duration={3000}
+ *   autoStart={false}
+ *   fillColor="#3b82f6"
+ *   trackWidth={6}
+ *   fillWidth={6}
+ *   onProgress={(pct) => updateSteps(pct)}
+ * />
+ *
+ * <button onClick={() => circleRef.current?.start()}>Start</button>
+ * ```
+ */
+declare const ProgressCircle: react.ForwardRefExoticComponent<ProgressCircleProps & react.RefAttributes<ProgressCircleHandle>>;
+
+interface CountUpHandle {
+    /** Start the animation from `from` to `to` */
+    start: () => void;
+    /** Reset to the `from` value without animating */
+    reset: () => void;
+}
+interface CountUpProps {
+    /** Starting value (default: 0) */
+    from?: number;
+    /** Target value (default: 100) */
+    to?: number;
+    /** Animation duration in milliseconds (default: 2000) */
+    duration?: number;
+    /** Number of decimal places (default: 0) */
+    decimals?: number;
+    /** Text before the number */
+    prefix?: string;
+    /** Text after the number */
+    suffix?: string;
+    /** When true, starts the animation when the element scrolls into view. When false, only starts via ref.start() (default: true) */
+    autoStart?: boolean;
+    /** Container style */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Custom formatter — receives the current number, return a string */
+    formatter?: (value: number) => string;
+}
+/**
+ * A spring-animated number counter that smoothly counts from one value to another.
+ *
+ * Uses framer-motion springs for natural-feeling animations.
+ * When `autoStart` is true (default), the animation triggers when the element
+ * becomes visible via IntersectionObserver.
+ *
+ * @example Basic count up on scroll
+ * ```tsx
+ * <CountUp from={0} to={1573} prefix="$" duration={2000} />
+ * ```
+ *
+ * @example With decimals and manual trigger
+ * ```tsx
+ * const countRef = useRef<CountUpHandle>(null)
+ *
+ * <CountUp
+ *   ref={countRef}
+ *   from={0}
+ *   to={99.9}
+ *   decimals={1}
+ *   suffix="%"
+ *   autoStart={false}
+ * />
+ *
+ * <button onClick={() => countRef.current?.start()}>Animate</button>
+ * ```
+ *
+ * @example Custom formatter
+ * ```tsx
+ * <CountUp
+ *   from={0}
+ *   to={50000}
+ *   duration={3000}
+ *   formatter={(v) => v.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
+ * />
+ * ```
+ */
+declare const CountUp: react.ForwardRefExoticComponent<CountUpProps & react.RefAttributes<CountUpHandle>>;
+
+interface SpinnerSegment {
+    /** Unique id for the segment */
+    id: string;
+    /** Display label on the wheel (used as SVG text when `item` is not provided) */
+    label: string;
+    /** Value returned on completion */
+    value: string;
+    /** Segment background color */
+    color: string;
+    /** Label text color (auto-detected from background if omitted) */
+    textColor?: string;
+    /** Custom ReactNode to render instead of the text label — rendered via foreignObject */
+    item?: ReactNode;
+}
+interface SpinnerWheelHandle {
+    /**
+     * Spin the wheel.
+     * @param targetIndex - index of the segment to land on (random if omitted)
+     */
+    spin: (targetIndex?: number) => void;
+}
+interface SpinnerWheelProps {
+    /** Wheel segments */
+    segments: SpinnerSegment[];
+    /** Spin animation duration in ms (default: 4000) */
+    duration?: number;
+    /** Number of full rotations before landing (default: 3) */
+    rotations?: number;
+    /** Mode: 'trigger' = spin on demand; 'continuous' = spins on mount, call spin() to land (default: trigger) */
+    mode?: 'trigger' | 'continuous';
+    /** Called when the wheel lands on a segment */
+    onComplete?: (segment: SpinnerSegment) => void;
+    /** Pointer / center accent color (default: #22c55e) */
+    pointerColor?: string;
+    /** Segment border color (default: #ffffff) */
+    strokeColor?: string;
+    /** Segment border width (default: 2) */
+    strokeWidth?: number;
+    /** Center circle radius (default: 14) */
+    centerRadius?: number;
+    /** Center circle color (default: #ffffff) */
+    centerColor?: string;
+    /** Container style */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+}
+/**
+ * A prize/fortune spinner wheel with configurable segments, spin animation,
+ * and optional React content inside each segment.
+ *
+ * @example Basic spinner with callback
+ * ```tsx
+ * const wheelRef = useRef<SpinnerWheelHandle>(null)
+ *
+ * <SpinnerWheel
+ *   ref={wheelRef}
+ *   segments={[
+ *     { id: '1', label: '10% OFF', value: 10, color: '#FF6B6B' },
+ *     { id: '2', label: '25% OFF', value: 25, color: '#4ECDC4' },
+ *     { id: '3', label: '50% OFF', value: 50, color: '#45B7D1' },
+ *     { id: '4', label: '75% OFF', value: 75, color: '#96CEB4' },
+ *   ]}
+ *   onComplete={(segment) => alert(`You won ${segment.label}!`)}
+ * />
+ *
+ * <button onClick={() => wheelRef.current?.spin(3)}>Spin to 75% OFF</button>
+ * ```
+ *
+ * @example With custom React content in segments
+ * ```tsx
+ * <SpinnerWheel
+ *   ref={wheelRef}
+ *   segments={[
+ *     { id: '1', label: '10%', value: 10, color: '#FF6B6B',
+ *       item: <div style={{ textAlign: 'center' }}>🎁<br/>10%</div> },
+ *     { id: '2', label: '25%', value: 25, color: '#4ECDC4',
+ *       item: <div style={{ textAlign: 'center' }}>🎉<br/>25%</div> },
+ *   ]}
+ *   duration={5000}
+ *   rotations={5}
+ * />
+ * ```
+ */
+declare const SpinnerWheel: react.ForwardRefExoticComponent<SpinnerWheelProps & react.RefAttributes<SpinnerWheelHandle>>;
+
+interface DialogHandle {
+    /** Open the dialog */
+    open: () => void;
+    /** Close the dialog */
+    close: () => void;
+}
+interface DialogProps {
+    /** Controlled open state. If provided, the dialog is controlled externally. */
+    open?: boolean;
+    /** Called when open state changes (for controlled mode or close events) */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the dialog finishes closing */
+    onClose?: () => void;
+    /** Dialog content */
+    children: ReactNode;
+    /** Optional trigger element that opens the dialog */
+    trigger?: ReactNode;
+    /** Dialog title (rendered in header, required for accessibility) */
+    title?: string;
+    /** Whether to show the close (X) button (default: true) */
+    showClose?: boolean;
+    /** Whether clicking the overlay closes the dialog (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Overlay background color (default: rgba(0,0,0,0.5)) */
+    overlayColor?: string;
+    /** Dialog panel background color (default: #ffffff) */
+    backgroundColor?: string;
+    /** Dialog panel border radius (default: 16px) */
+    borderRadius?: string | number;
+    /** Dialog max width (default: 500px) */
+    maxWidth?: string | number;
+    /** Dialog panel padding (default: 24px) */
+    padding?: string | number;
+    /** Additional style for the dialog panel */
+    style?: CSSProperties;
+    /** Additional className for the dialog panel */
+    className?: string;
+}
+/**
+ * A pre-styled centered modal dialog with overlay, close button, and accessibility built in.
+ *
+ * Supports both controlled and uncontrolled usage.
+ *
+ * @example Uncontrolled with trigger
+ * ```tsx
+ * <Dialog
+ *   trigger={<button>Open</button>}
+ *   title="Confirm purchase"
+ *   description="You will be charged $9.99"
+ * >
+ *   <button onClick={() => alert('Confirmed!')}>Confirm</button>
+ * </Dialog>
+ * ```
+ *
+ * @example Controlled with ref
+ * ```tsx
+ * const dialogRef = useRef<DialogHandle>(null)
+ *
+ * <Dialog ref={dialogRef} title="Checkout" onClose={() => console.log('closed')}>
+ *   <StripePaymentForm onSuccess={() => dialogRef.current?.close()} />
+ * </Dialog>
+ *
+ * <button onClick={() => dialogRef.current?.open()}>Pay now</button>
+ * ```
+ *
+ * @example Controlled with state
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ *
+ * <Dialog open={open} onOpenChange={setOpen} title="Settings">
+ *   <p>Dialog content here</p>
+ * </Dialog>
+ *
+ * <button onClick={() => setOpen(true)}>Open settings</button>
+ * ```
+ */
+declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<DialogHandle>>;
+
+interface DrawerHandle {
+    /** Open the drawer */
+    open: () => void;
+    /** Close the drawer */
+    close: () => void;
+}
+interface DrawerProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the drawer closes */
+    onClose?: () => void;
+    /** Drawer content */
+    children: ReactNode;
+    /** Optional trigger element */
+    trigger?: ReactNode;
+    /** Drawer height — CSS value like "50vh", "auto", or a number in px (default: 50vh) */
+    height?: string | number;
+    /** Whether dragging down to dismiss is enabled (default: true) */
+    dragToClose?: boolean;
+    /** Drag distance threshold to trigger close in px (default: 100) */
+    dragThreshold?: number;
+    /** Whether clicking overlay closes the drawer (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether to show the drag handle indicator (default: true) */
+    showHandle?: boolean;
+    /** Overlay background color (default: rgba(0,0,0,0.5)) */
+    overlayColor?: string;
+    /** Drawer background color (default: #ffffff) */
+    backgroundColor?: string;
+    /** Drawer border radius (default: 16) */
+    borderRadius?: number;
+    /** Drawer panel padding (default: 0) */
+    padding?: string | number;
+    /** Additional style for the drawer panel */
+    style?: CSSProperties;
+    /** Additional className for the drawer panel */
+    className?: string;
+}
+/**
+ * A bottom sheet drawer with drag-to-close, spring animations,
+ * and full accessibility via Radix UI.
+ *
+ * @example Bottom sheet with trigger
+ * ```tsx
+ * <Drawer trigger={<button>Show filters</button>} size="60vh">
+ *   <div style={{ padding: 24 }}>
+ *     <h2>Filters</h2>
+ *   </div>
+ * </Drawer>
+ * ```
+ *
+ * @example Controlled with ref
+ * ```tsx
+ * const drawerRef = useRef<DrawerHandle>(null)
+ *
+ * <Drawer ref={drawerRef} snapPoint={70} onClose={() => console.log('closed')}>
+ *   <div style={{ padding: 24 }}>
+ *     <h2>Payment</h2>
+ *   </div>
+ * </Drawer>
+ *
+ * <button onClick={() => drawerRef.current?.open()}>Checkout</button>
+ * ```
+ */
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<DrawerHandle>>;
+
+interface MarqueeHandle {
+    /** Start / resume the scrolling animation */
+    start: () => void;
+    /** Pause the scrolling animation */
+    pause: () => void;
+}
+interface MarqueeProps {
+    /** Content to scroll — will be duplicated for seamless looping */
+    children: ReactNode;
+    /** Scroll speed in pixels per second (default: 50) */
+    speed?: number;
+    /** Scroll direction (default: 'left') */
+    direction?: 'left' | 'right' | 'up' | 'down';
+    /** Pause scrolling when the user hovers (default: true) */
+    pauseOnHover?: boolean;
+    /** Gap between the original and duplicated content (default: 0) */
+    gap?: number | string;
+    /** Start automatically on mount (default: true) */
+    autoStart?: boolean;
+    /** Container style overrides */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+}
+declare const Marquee: react.ForwardRefExoticComponent<MarqueeProps & react.RefAttributes<MarqueeHandle>>;
+
+interface CarouselHandle {
+    /** Go to the next slide */
+    next: () => void;
+    /** Go to the previous slide */
+    prev: () => void;
+    /** Jump to a specific slide index */
+    goTo: (index: number) => void;
+    /** Pause autoplay */
+    pause: () => void;
+    /** Resume autoplay */
+    resume: () => void;
+}
+interface CarouselProps {
+    /** Each child is rendered as a slide */
+    children: ReactNode[];
+    /** Scroll axis (default: 'horizontal') */
+    axis?: 'horizontal' | 'vertical';
+    /** Enable autoplay (default: false) */
+    autoPlay?: boolean;
+    /** Autoplay interval in milliseconds (default: 3000) */
+    interval?: number;
+    /** Loop back to start when reaching the end (default: true) */
+    loop?: boolean;
+    /** Enable drag/swipe to navigate (default: true) */
+    draggable?: boolean;
+    /** Slide alignment (default: 'start') */
+    align?: 'start' | 'center' | 'end';
+    /** Gap between slides */
+    gap?: number | string;
+    /** Show pagination dots (default: false) */
+    showDots?: boolean;
+    /** Dot color (default: '#d1d5db') */
+    dotColor?: string;
+    /** Active dot color (default: '#3b82f6') */
+    activeDotColor?: string;
+    /** Dot size in pixels (default: 8) */
+    dotSize?: number;
+    /** Gap between dots in pixels (default: 8) */
+    dotGap?: number;
+    /** Show prev/next arrow buttons (default: false) */
+    showArrows?: boolean;
+    /** Render custom previous arrow — receives onClick handler */
+    renderPrevArrow?: (onClick: () => void, enabled: boolean) => ReactNode;
+    /** Render custom next arrow — receives onClick handler */
+    renderNextArrow?: (onClick: () => void, enabled: boolean) => ReactNode;
+    /** Called when the active slide changes */
+    onSlideChange?: (index: number) => void;
+    /** Container style overrides */
+    style?: CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Slide wrapper style overrides (applied to each slide container) */
+    slideStyle?: CSSProperties;
+}
+declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<CarouselHandle>>;
+
+interface SingleSelectProps<T> {
+    /** The response key to store the selected value under (in answers.*) */
+    responseKey: string;
+    /** Array of option objects */
+    options: T[];
+    /** Extract a unique value from each option (used as the stored response) */
+    keyExtractor?: (item: T, index: number) => string;
+    /** Render each option. Receives the item and whether it's currently selected. */
+    renderItem: (info: {
+        item: T;
+        index: number;
+        active: boolean;
+    }) => ReactNode;
+    /** Automatically advance to the next page on selection (default: true) */
+    autoAdvance?: boolean;
+    /** Delay in ms before auto-advancing (default: 200) */
+    autoAdvanceDelay?: number;
+    /** Container className */
+    className?: string;
+}
+declare function SingleSelect<T>({ responseKey, options, keyExtractor, renderItem, autoAdvance, autoAdvanceDelay, className, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface MultiSelectProps<T> {
+    /** The response key to store the selected values under (in answers.*) */
+    responseKey: string;
+    /** Array of option objects */
+    options: T[];
+    /** Extract a unique value from each option (used as the stored response) */
+    keyExtractor?: (item: T, index: number) => string;
+    /** Render each option. Receives the item and whether it's currently selected. */
+    renderItem: (info: {
+        item: T;
+        index: number;
+        active: boolean;
+    }) => ReactNode;
+    /** Minimum number of selections required (default: 0) */
+    min?: number;
+    /** Maximum number of selections allowed (default: unlimited) */
+    max?: number;
+    /** Container className */
+    className?: string;
+}
+declare function MultiSelect<T>({ responseKey, options, keyExtractor, renderItem, min, max, className, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Carousel, type CarouselHandle, type CarouselProps, CountUp, type CountUpHandle, type CountUpProps, Dialog, type DialogHandle, type DialogProps, Drawer, type DrawerHandle, type DrawerProps, type EasingType, Marquee, type MarqueeHandle, type MarqueeProps, MultiSelect, type MultiSelectProps, ProgressBar, type ProgressBarCheckpoint, type ProgressBarHandle, type ProgressBarProps, ProgressCircle, type ProgressCircleCheckpoint, type ProgressCircleHandle, type ProgressCircleProps, SingleSelect, type SingleSelectProps, type SpinnerSegment, SpinnerWheel, type SpinnerWheelHandle, type SpinnerWheelProps };