Gesture Components

function SwipeAction(props: SwipeActionProps): JSX.Element;

interface SwipeActionProps {
  rightActions?: SwipeActionAction[];
  leftActions?: SwipeActionAction[];
  onActionsReveal?: (side: 'left' | 'right', actions: SwipeActionAction[]) => void;
  closeOnTouchOutside?: boolean;
  closeOnAction?: boolean;
  children: React.ReactElement;
} & NativeProps;

interface SwipeActionAction {
  key: string | number;
  text: React.ReactNode;
  color?: 'light' | 'weak' | 'primary' | 'success' | 'warning' | 'danger' | string;
  onClick?: () => void | Promise<void>;
}

interface SwipeActionRef {
  show(): void;
  close(): void;
}

function PullToRefresh(props: PullToRefreshProps): JSX.Element;

interface PullToRefreshProps {
  onRefresh: () => Promise<any>;
  pullingText?: React.ReactNode;
  canReleaseText?: React.ReactNode;
  refreshingText?: React.ReactNode;
  completeText?: React.ReactNode;
  completeDelay?: number;
  disabled?: boolean;
  headHeight?: number;
  threshold?: number;
  renderText?: (status: PullStatus, distance: number) => React.ReactNode;
  children: React.ReactNode;
} & NativeProps;

type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';

function Swiper(props: SwiperProps): JSX.Element;

interface SwiperProps {
  defaultIndex?: number;
  allowTouchMove?: boolean;
  autoplay?: boolean;
  autoplayInterval?: number;
  loop?: boolean;
  direction?: 'horizontal' | 'vertical';
  onIndexChange?: (index: number) => void;
  indicator?: (total: number, current: number) => React.ReactNode;
  slideSize?: number;
  trackOffset?: number;
  stuckAtBoundary?: boolean;
  rubberband?: boolean;
  children?: React.ReactNode;
} & NativeProps;

interface SwiperRef {
  swipeTo(index: number): void;
  swipeNext(): void;
  swipePrev(): void;
}

function SwiperItem(props: { children?: React.ReactNode }): JSX.Element;

declare namespace Swiper {
  const Item: typeof SwiperItem;
}

function FloatingBubble(props: FloatingBubbleProps): JSX.Element;

interface FloatingBubbleProps {
  axis?: 'xy' | 'x' | 'y' | 'lock';
  magnetic?: 'x' | 'y';
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  onOffsetChange?: (offset: FloatingBubbleOffset) => void;
  children?: React.ReactNode;
} & NativeProps;

interface FloatingBubbleOffset {
  x: number;
  y: number;
}

function FloatingPanel(props: FloatingPanelProps): JSX.Element;

interface FloatingPanelProps {
  anchors: number[];
  height?: number;
  handleDraggingOfContent?: boolean;
  onHeightChange?: (height: number, animating: boolean) => void;
  children?: React.ReactNode;
} & NativeProps;

interface FloatingPanelRef {
  setHeight(height: number): void;
}

function InfiniteScroll(props: InfiniteScrollProps): JSX.Element;

interface InfiniteScrollProps {
  loadMore: () => Promise<void>;
  hasMore: boolean;
  threshold?: number;
  children?: React.ReactNode;
} & NativeProps;

import { 
  SwipeAction, 
  PullToRefresh, 
  Swiper, 
  FloatingBubble,
  InfiniteScroll 
} from "antd-mobile";

function GestureExample() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const handleRefresh = async () => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    setItems(generateInitialItems());
  };

  const loadMore = async () => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    setItems(prev => [...prev, ...generateMoreItems()]);
  };

  return (
    <div>
      <PullToRefresh onRefresh={handleRefresh}>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          {items.map(item => (
            <SwipeAction
              key={item.id}
              rightActions={[
                {
                  key: 'delete',
                  text: 'Delete',
                  color: 'danger',
                  onClick: () => deleteItem(item.id)
                }
              ]}
            >
              <div>{item.content}</div>
            </SwipeAction>
          ))}
        </InfiniteScroll>
      </PullToRefresh>

      <Swiper autoplay loop>
        <Swiper.Item>Slide 1</Swiper.Item>
        <Swiper.Item>Slide 2</Swiper.Item>
        <Swiper.Item>Slide 3</Swiper.Item>
      </Swiper>

      <FloatingBubble
        axis="xy"
        magnetic="x"
        onClick={() => console.log('Bubble clicked')}
      >
        <Button shape="rounded" color="primary">+</Button>
      </FloatingBubble>
    </div>
  );
}