{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "undo-pill-demo",
  "title": "Undo Pill Demo",
  "description": "Demo usage for the Undo Pill component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@spectrumui/undo-pill"
  ],
  "files": [
    {
      "path": "app/registry/undo-pill/undo-pill-demo.tsx",
      "content": "'use client';\n\nimport React, { useCallback, useState } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Trash2 } from 'lucide-react';\nimport { UndoPill } from '@/components/spectrumui/undo-pill';\n\nconst MESSAGES = [\n  {\n    id: 1,\n    sender: 'Ana Wells',\n    avatar: '/avatars/people/01.jpg',\n    preview: 'The homepage mock is ready for review',\n  },\n  {\n    id: 2,\n    sender: 'Dev Patel',\n    avatar: '/avatars/people/03.jpg',\n    preview: 'Standup moved to 10:30 tomorrow',\n  },\n  {\n    id: 3,\n    sender: 'Mia Chen',\n    avatar: '/avatars/people/06.jpg',\n    preview: 'Shipping notes for the 2.4 release',\n  },\n];\n\nexport default function UndoPillDemo() {\n  const [deletedIds, setDeletedIds] = useState<number[]>([]);\n  const [pendingId, setPendingId] = useState<number | null>(null);\n\n  const visibleMessages = MESSAGES.filter(\n    (message) => !deletedIds.includes(message.id) && message.id !== pendingId,\n  );\n\n  const handleDelete = useCallback(\n    (id: number) => {\n      // Deleting while a pill is open commits the previous pending delete\n      if (pendingId !== null) {\n        setDeletedIds((prev) => [...prev, pendingId]);\n      }\n      setPendingId(id);\n    },\n    [pendingId],\n  );\n\n  const handleUndo = useCallback(() => {\n    setPendingId(null);\n  }, []);\n\n  const handleExpire = useCallback(() => {\n    if (pendingId !== null) {\n      setDeletedIds((prev) => [...prev, pendingId]);\n    }\n    setPendingId(null);\n  }, [pendingId]);\n\n  return (\n    <div className=\"relative flex min-h-[280px] w-full max-w-md flex-col justify-center py-10\">\n      <div className=\"flex flex-col\">\n        <AnimatePresence initial={false}>\n          {visibleMessages.map((message) => (\n            <motion.div\n              key={message.id}\n              initial={{ height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={{ type: 'spring', stiffness: 360, damping: 34 }}\n              className=\"overflow-hidden\"\n            >\n              <div className=\"flex items-center gap-3 border-b border-neutral-200 py-3 dark:border-neutral-800\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={message.avatar}\n                  alt=\"\"\n                  loading=\"lazy\"\n                  width={36}\n                  height={36}\n                  className=\"size-9 shrink-0 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10\"\n                />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm font-medium text-neutral-900 dark:text-neutral-100\">\n                    {message.sender}\n                  </p>\n                  <p className=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                    {message.preview}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={() => handleDelete(message.id)}\n                  aria-label={`Delete message from ${message.sender}`}\n                  className=\"rounded-full p-2 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 dark:focus-visible:ring-neutral-300\"\n                >\n                  <Trash2 size={16} aria-hidden=\"true\" />\n                </button>\n              </div>\n            </motion.div>\n          ))}\n        </AnimatePresence>\n\n        {visibleMessages.length === 0 && pendingId === null && (\n          <div className=\"flex flex-col items-center gap-2 py-8 text-center\">\n            <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">All messages deleted</p>\n            <button\n              type=\"button\"\n              onClick={() => setDeletedIds([])}\n              className=\"text-sm font-medium text-neutral-700 underline-offset-2 hover:underline dark:text-neutral-300\"\n            >\n              Reset list\n            </button>\n          </div>\n        )}\n      </div>\n\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-4 flex justify-center\">\n        <UndoPill\n          open={pendingId !== null}\n          label=\"Message deleted\"\n          onUndo={handleUndo}\n          onExpire={handleExpire}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/undo-pill-demo.tsx"
    }
  ],
  "type": "registry:component"
}