{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-list",
  "type": "registry:ui",
  "title": "Notification List",
  "description": "Notification List Component",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/ui-elements/notification-list/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { RotateCcw, ArrowUpRight } from 'lucide-react';\nimport { motion, type Transition } from 'motion/react';\n\nconst notifications = [\n  {\n    id: 1,\n    title: 'NPM Install Complete',\n    subtitle: '1,227 packages added!',\n    time: 'just now',\n    count: 2,\n  },\n  {\n    id: 2,\n    title: 'Build Succeeded',\n    subtitle: 'Build finished in 12.34s',\n    time: '1m 11s',\n  },\n  {\n    id: 3,\n    title: 'Lint Passed',\n    subtitle: 'No problems found',\n    time: '5m',\n  },\n];\n\nconst transition: Transition = {\n  type: 'spring',\n  stiffness: 300,\n  damping: 26,\n};\n\nconst getCardVariants = (i: number) => ({\n  collapsed: {\n    marginTop: i === 0 ? 0 : -44,\n    scaleX: 1 - i * 0.05,\n  },\n  expanded: {\n    marginTop: i === 0 ? 0 : 4,\n    scaleX: 1,\n  },\n});\n\nconst textSwitchTransition: Transition = {\n  duration: 0.22,\n  ease: 'easeInOut',\n};\n\nconst notificationTextVariants = {\n  collapsed: { opacity: 1, y: 0, pointerEvents: 'auto' },\n  expanded: { opacity: 0, y: -16, pointerEvents: 'none' },\n};\n\nconst viewAllTextVariants = {\n  collapsed: { opacity: 0, y: 16, pointerEvents: 'none' },\n  expanded: { opacity: 1, y: 0, pointerEvents: 'auto' },\n};\n\nfunction NotificationList() {\n  return (\n    <motion.div\n      className=\"bg-neutral-200 dark:bg-neutral-900 p-3 rounded-3xl w-xs space-y-3 shadow-md\"\n      initial=\"collapsed\"\n      whileHover=\"expanded\"\n    >\n      <div>\n        {notifications.map((notification, i) => (\n          <motion.div\n            key={notification.id}\n            className=\"bg-neutral-100 dark:bg-neutral-800 rounded-xl px-4 py-2 shadow-sm hover:shadow-lg transition-shadow duration-200 relative\"\n            variants={getCardVariants(i)}\n            transition={transition}\n            style={{\n              zIndex: notifications.length - i,\n            }}\n          >\n            <div className=\"flex justify-between items-center\">\n              <h1 className=\"text-sm font-medium\">{notification.title}</h1>\n              {notification.count && (\n                <div className=\"flex items-center text-xs gap-0.5 font-medium text-neutral-500 dark:text-neutral-300\">\n                  <RotateCcw className=\"size-3\" />\n                  <span>{notification.count}</span>\n                </div>\n              )}\n            </div>\n            <div className=\"text-xs text-neutral-500 font-medium\">\n              <span>{notification.time}</span>\n              &nbsp;•&nbsp;\n              <span>{notification.subtitle}</span>\n            </div>\n          </motion.div>\n        ))}\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <div className=\"size-5 rounded-full bg-neutral-400 text-white text-xs flex items-center justify-center font-medium\">\n          {notifications.length}\n        </div>\n        <span className=\"grid\">\n          <motion.span\n            className=\"text-sm font-medium text-neutral-600 dark:text-neutral-300 row-start-1 col-start-1\"\n            variants={notificationTextVariants}\n            transition={textSwitchTransition}\n          >\n            Notifications\n          </motion.span>\n          <motion.span\n            className=\"text-sm font-medium text-neutral-600 dark:text-neutral-300 flex items-center gap-1 cursor-pointer select-none row-start-1 col-start-1\"\n            variants={viewAllTextVariants}\n            transition={textSwitchTransition}\n          >\n            View all <ArrowUpRight className=\"size-4\" />\n          </motion.span>\n        </span>\n      </div>\n    </motion.div>\n  );\n}\n\nexport { NotificationList };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/ui-elements/notification-list.tsx"
    }
  ]
}