Elements

Every elements export of @appfunnel-dev/sdk, generated from the SDK source. Signatures and descriptions are exact; for how these fit together, see the guides.

`Carousel`

component · elements/Carousel.tsx


Carousel(props: CarouselProps & RefAttributes<CarouselHandle>): ReactNode

`Marquee`

component · elements/Marquee.tsx


Marquee(props: MarqueeProps & RefAttributes<MarqueeHandle>): ReactNode

`SpinnerWheel`

component · elements/SpinnerWheel.tsx


SpinnerWheel(props: SpinnerWheelProps & RefAttributes<SpinnerWheelHandle>): ReactNode

A prize/fortune spinner wheel with configurable segments, spin animation, and optional React content inside each segment.

Basic spinner with callback


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>

`ease`

function · elements/easing.ts


ease(t: number, type: EasingType): number

Maps a linear t (0–1) to an eased t (0–1)

`easeInverse`

function · elements/easing.ts


easeInverse(eased: number, type: EasingType): number

Inverse: given an eased value (0–1), recover the linear t (0–1)

`CarouselHandle`

interface · elements/Carousel.tsx


export interface CarouselHandle {
  
  next: () => void
  
  prev: () => void
  
  goTo: (index: number) => void
  
  pause: () => void
  
  resume: () => void
}

`CarouselProps`

interface · elements/Carousel.tsx


export interface CarouselProps {
  
  children: ReactNode[]
  
  axis?: 'horizontal' | 'vertical'
  
  autoPlay?: boolean
  
  interval?: number
  
  loop?: boolean
  
  draggable?: boolean
  
  align?: 'start' | 'center' | 'end'
  
  gap?: number | string
  
  showDots?: boolean
  
  dotColor?: string
  
  activeDotColor?: string
  
  dotSize?: number
  
  dotGap?: number
  
  showArrows?: boolean
  
  renderPrevArrow?: (onClick: () => void, enabled: boolean) => ReactNode
  
  renderNextArrow?: (onClick: () => void, enabled: boolean) => ReactNode
  
  onSlideChange?: (index: number) => void
  
  style?: CSSProperties
  
  className?: string
  
  slideStyle?: CSSProperties
}

`MarqueeHandle`

interface · elements/Marquee.tsx


export interface MarqueeHandle {
  
  start: () => void
  
  pause: () => void
}

`MarqueeProps`

interface · elements/Marquee.tsx


export interface MarqueeProps {
  
  children: ReactNode
  
  speed?: number
  
  direction?: 'left' | 'right' | 'up' | 'down'
  
  pauseOnHover?: boolean
  
  gap?: number | string
  
  autoStart?: boolean
  
  style?: CSSProperties
  
  className?: string
}

`SpinnerSegment`

interface · elements/SpinnerWheel.tsx


export interface SpinnerSegment {
  
  id: string
  
  label: string
  
  value: string
  
  color: string
  
  textColor?: string
  
  item?: ReactNode
}

`SpinnerWheelHandle`

interface · elements/SpinnerWheel.tsx


export interface SpinnerWheelHandle {
  
  spin: (targetIndex?: number) => void
}

`SpinnerWheelProps`

interface · elements/SpinnerWheel.tsx


export interface SpinnerWheelProps {
  
  segments: SpinnerSegment[]
  
  duration?: number
  
  rotations?: number
  
  mode?: 'trigger' | 'continuous'
  
  onComplete?: (segment: SpinnerSegment) => void
  
  pointerColor?: string
  
  strokeColor?: string
  
  strokeWidth?: number
  
  centerRadius?: number
  
  centerColor?: string
  
  style?: CSSProperties
  
  className?: string
}

`EasingType`

type · elements/easing.ts


export type EasingType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut'