Swipe Actions

npm i @ncdai/react-swipe-actions motion

import type { ComponentProps } from "react"
import * as SwipeActionsPrimitive from "@ncdai/react-swipe-actions"

import { cn } from "@/lib/utils"

type SwipeSide = SwipeActionsPrimitive.SwipeSide
type SwipeState = SwipeActionsPrimitive.SwipeState

const SwipeRoot = SwipeActionsPrimitive.SwipeRoot

const SwipeItem = SwipeActionsPrimitive.SwipeItem

const SwipeActions = SwipeActionsPrimitive.SwipeActions

function SwipeAction({
  className,
  children,
  ...props
}: ComponentProps<typeof SwipeActionsPrimitive.SwipeAction>) {
  return (
    <SwipeActionsPrimitive.SwipeAction
      className={cn(
        "bg-secondary text-xs font-medium whitespace-nowrap text-secondary-foreground select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-foreground data-armed:brightness-90 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <SwipeActionsPrimitive.SwipeActionContent className="min-w-20 flex-col items-center justify-center gap-1.5 px-4">
        {children}
      </SwipeActionsPrimitive.SwipeActionContent>
    </SwipeActionsPrimitive.SwipeAction>
  )
}

function SwipeContent({
  className,
  ...props
}: ComponentProps<typeof SwipeActionsPrimitive.SwipeContent>) {
  return (
    <SwipeActionsPrimitive.SwipeContent
      className={cn("bg-background data-dragging:cursor-grabbing", className)}
      {...props}
    />
  )
}

export { SwipeAction, SwipeActions, SwipeContent, SwipeItem, SwipeRoot }
export type { SwipeSide, SwipeState }

"use client"

import { useState } from "react"
import { ArchiveIcon, FlagIcon, Trash2Icon } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import {
  SwipeAction,
  SwipeActions,
  SwipeContent,
  SwipeItem,
  SwipeRoot,
} from "@/components/ui/swipe-actions"

export function SwipeActionsDemo() {
  const [mails, setMails] = useState(INITIAL_MAILS)
  const shouldReduceMotion = useReducedMotion()

  const removeMail = (id: string) => {
    setMails((prev) => prev.filter((mail) => mail.id !== id))
  }

  const toggleFlag = (id: string) => {
    setMails((prev) =>
      prev.map((mail) =>
        mail.id === id ? { ...mail, flagged: !mail.flagged } : mail
      )
    )
  }

  return (
    <div className="not-prose overflow-clip rounded-xl border">
      <SwipeRoot render={<ul role="list" className="divide-y" />}>
        <AnimatePresence initial={false}>
          {mails.map((mail) => (
            <SwipeItem
              key={mail.id}
              render={
                <motion.li
                  layout={!shouldReduceMotion}
                  exit={
                    shouldReduceMotion
                      ? { opacity: 0 }
                      : { height: 0, opacity: 0 }
                  }
                  transition={
                    shouldReduceMotion
                      ? { duration: 0.1 }
                      : { duration: 0.22, ease: [0.32, 0.72, 0, 1] }
                  }
                />
              }
            >
              <SwipeActions side="left" fullSwipe>
                <SwipeAction
                  className="rounded-xl bg-sky-500 text-white"
                  onClick={() => removeMail(mail.id)}
                >
                  <ArchiveIcon />
                  Archive
                </SwipeAction>
              </SwipeActions>

              <SwipeActions side="right" fullSwipe>
                <SwipeAction
                  className="rounded-xl bg-green-500 text-white"
                  onClick={() => toggleFlag(mail.id)}
                >
                  <FlagIcon />
                  {mail.flagged ? "Unflag" : "Flag"}
                </SwipeAction>

                <SwipeAction
                  className="rounded-xl bg-red-500 text-white"
                  onClick={() => removeMail(mail.id)}
                >
                  <Trash2Icon />
                  Delete
                </SwipeAction>
              </SwipeActions>

              <SwipeContent>
                <button
                  type="button"
                  className="flex w-full flex-col items-start gap-1 rounded-xl p-4 pt-3 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-foreground"
                >
                  <span className="flex items-center gap-1.5 font-semibold">
                    {mail.sender}
                    {mail.flagged && (
                      <FlagIcon className="size-3.5 text-green-500" />
                    )}
                  </span>
                  <span className="text-sm">{mail.subject}</span>
                  <span className="w-full truncate text-xs text-muted-foreground">
                    {mail.preview}
                  </span>
                </button>
              </SwipeContent>
            </SwipeItem>
          ))}
        </AnimatePresence>
      </SwipeRoot>

      {mails.length === 0 && (
        <p className="px-4 py-8 text-center text-sm text-muted-foreground">
          No messages left.
        </p>
      )}
    </div>
  )
}

type Mail = {
  id: string
  sender: string
  subject: string
  preview: string
  flagged: boolean
}

const INITIAL_MAILS: Mail[] = [
  {
    id: "1",
    sender: "shadcn",
    subject: "Namespaced registries",
    preview: "components.json can point at any registry URL now, take a look.",
    flagged: false,
  },
  {
    id: "2",
    sender: "Evil Rabbit",
    subject: "Spacing scale review",
    preview: "Dropped the 6px step so every surface lands on the 4px grid.",
    flagged: false,
  },
  {
    id: "3",
    sender: "Shu",
    subject: "SWR cache inspector",
    preview: "Devtools panel is in, the mutation timeline still needs work.",
    flagged: true,
  },
]