feat(components): add perspective carousel and Swipe card carousel

package.json

@@ -75,6 +75,7 @@
     "sonner": "^2.0.7",
     "styled-components": "^6.1.19",
     "svg-path-commander": "^2.1.10",
+    "swiper": "^14.0.0",
     "tailwind-merge": "^3.3.1",
     "three": "^0.176.0",
     "topojson-client": "^3.1.0",

public/r/animated-list.json

@@ -11,18 +11,18 @@
   "registryDependencies": [],
   "files": [
     {
-      "path": "./src/components/nurui/animated-list-demo.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { Notification } from \"@/components/nurui/notification\";\nimport { AnimatedList } from \"@/components/nurui/animated-list-items\";\n\nlet notifications = [\n  {\n    name: \"New follower\",\n    description: \"Alex started following you\",\n    time: \"2m ago\",\n    icon: \"👥\",\n    color: \"#6C63FF\",\n  },\n  {\n    name: \"Comment received\",\n    description: \"John commented on your post\",\n    time: \"5m ago\",\n    icon: \"💬\",\n    color: \"#FF6584\",\n  },\n  {\n    name: \"File uploaded\",\n    description: \"You uploaded 'design.png'\",\n    time: \"8m ago\",\n    icon: \"📁\",\n    color: \"#4CAF50\",\n  },\n  {\n    name: \"Payment processed\",\n    description: \"$120 sent to your account\",\n    time: \"12m ago\",\n    icon: \"💳\",\n    color: \"#00BFA6\",\n  },\n  {\n    name: \"New like\",\n    description: \"Sophia liked your photo\",\n    time: \"18m ago\",\n    icon: \"❤️\",\n    color: \"#FF1744\",\n  },\n  {\n    name: \"System alert\",\n    description: \"Server downtime detected\",\n    time: \"25m ago\",\n    icon: \"⚠️\",\n    color: \"#FFC107\",\n  },\n  {\n    name: \"Message received\",\n    description: \"Daniel sent you a message\",\n    time: \"45m ago\",\n    icon: \"📨\",\n    color: \"#2196F3\",\n  },\n  {\n    name: \"Password updated\",\n    description: \"Your account password has been changed\",\n    time: \"1h ago\",\n    icon: \"🔑\",\n    color: \"#9C27B0\",\n  },\n];\nnotifications = Array.from({ length: 10 }, () => notifications).flat();\n\nfunction AnimatedListDemo({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[30rem] w-full flex-col overflow-hidden p-2\",\n        className,\n      )}\n    >\n      <AnimatedList>\n        {notifications.map((item, idx) => (\n          <Notification {...item} key={idx} />\n        ))}\n      </AnimatedList>\n\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-background\"></div>\n    </div>\n  );\n}\n\nexport default AnimatedListDemo;\n",
+      "path": "src/components/nurui/animated-list-demo.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\r\nimport { Notification } from \"@/components/nurui/notification\";\r\nimport { AnimatedList } from \"@/components/nurui/animated-list-items\";\r\n\r\nlet notifications = [\r\n  {\r\n    name: \"New follower\",\r\n    description: \"Alex started following you\",\r\n    time: \"2m ago\",\r\n    icon: \"👥\",\r\n    color: \"#6C63FF\",\r\n  },\r\n  {\r\n    name: \"Comment received\",\r\n    description: \"John commented on your post\",\r\n    time: \"5m ago\",\r\n    icon: \"💬\",\r\n    color: \"#FF6584\",\r\n  },\r\n  {\r\n    name: \"File uploaded\",\r\n    description: \"You uploaded 'design.png'\",\r\n    time: \"8m ago\",\r\n    icon: \"📁\",\r\n    color: \"#4CAF50\",\r\n  },\r\n  {\r\n    name: \"Payment processed\",\r\n    description: \"$120 sent to your account\",\r\n    time: \"12m ago\",\r\n    icon: \"💳\",\r\n    color: \"#00BFA6\",\r\n  },\r\n  {\r\n    name: \"New like\",\r\n    description: \"Sophia liked your photo\",\r\n    time: \"18m ago\",\r\n    icon: \"❤️\",\r\n    color: \"#FF1744\",\r\n  },\r\n  {\r\n    name: \"System alert\",\r\n    description: \"Server downtime detected\",\r\n    time: \"25m ago\",\r\n    icon: \"⚠️\",\r\n    color: \"#FFC107\",\r\n  },\r\n  {\r\n    name: \"Message received\",\r\n    description: \"Daniel sent you a message\",\r\n    time: \"45m ago\",\r\n    icon: \"📨\",\r\n    color: \"#2196F3\",\r\n  },\r\n  {\r\n    name: \"Password updated\",\r\n    description: \"Your account password has been changed\",\r\n    time: \"1h ago\",\r\n    icon: \"🔑\",\r\n    color: \"#9C27B0\",\r\n  },\r\n];\r\nnotifications = Array.from({ length: 10 }, () => notifications).flat();\r\n\r\nfunction AnimatedListDemo({ className }: { className?: string }) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex h-[30rem] w-full flex-col overflow-hidden p-2\",\r\n        className,\r\n      )}\r\n    >\r\n      <AnimatedList>\r\n        {notifications.map((item, idx) => (\r\n          <Notification {...item} key={idx} />\r\n        ))}\r\n      </AnimatedList>\r\n\r\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-background\"></div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default AnimatedListDemo;\r\n",
       "type": "registry:component"
     },
     {
-      "path": "./src/components/nurui/animated-list-items.tsx",
-      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, {\n  ComponentPropsWithoutRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n  const initial = { scale: 0, opacity: 0 };\n  const animate = { scale: 1, opacity: 1, originY: 0 };\n  const exit = { scale: 0, opacity: 0 };\n  const transition = { type: \"spring\" as const, stiffness: 350, damping: 40 };\n\n  return (\n    <motion.div\n      initial={initial}\n      animate={animate}\n      exit={exit}\n      transition={transition}\n      layout\n      className=\"mx-auto w-full\"\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n  delay?: number;\n}\n\nexport const AnimatedList = React.memo(\n  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n    const [index, setIndex] = useState(0);\n    const childrenArray = useMemo(\n      () => React.Children.toArray(children),\n      [children],\n    );\n\n    useEffect(() => {\n      if (index < childrenArray.length - 1) {\n        const timeout = setTimeout(() => {\n          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length);\n        }, delay);\n\n        return () => clearTimeout(timeout);\n      }\n    }, [index, delay, childrenArray.length]);\n\n    const itemsToShow = useMemo(() => {\n      const result = childrenArray.slice(0, index + 1).reverse();\n      return result;\n    }, [index, childrenArray]);\n\n    return (\n      <div\n        className={cn(`flex flex-col items-center gap-4`, className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {itemsToShow.map((item) => (\n            <AnimatedListItem key={(item as React.ReactElement).key}>\n              {item}\n            </AnimatedListItem>\n          ))}\n        </AnimatePresence>\n      </div>\n    );\n  },\n);\n\nAnimatedList.displayName = \"AnimatedList\";\n",
+      "path": "src/components/nurui/animated-list-items.tsx",
+      "content": "\"use client\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\nimport React, {\r\n  ComponentPropsWithoutRef,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n} from \"react\";\r\n\r\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\r\n  const initial = { scale: 0, opacity: 0 };\r\n  const animate = { scale: 1, opacity: 1, originY: 0 };\r\n  const exit = { scale: 0, opacity: 0 };\r\n  const transition = { type: \"spring\" as const, stiffness: 350, damping: 40 };\r\n\r\n  return (\r\n    <motion.div\r\n      initial={initial}\r\n      animate={animate}\r\n      exit={exit}\r\n      transition={transition}\r\n      layout\r\n      className=\"mx-auto w-full\"\r\n    >\r\n      {children}\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\r\n  children: React.ReactNode;\r\n  delay?: number;\r\n}\r\n\r\nexport const AnimatedList = React.memo(\r\n  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\r\n    const [index, setIndex] = useState(0);\r\n    const childrenArray = useMemo(\r\n      () => React.Children.toArray(children),\r\n      [children],\r\n    );\r\n\r\n    useEffect(() => {\r\n      if (index < childrenArray.length - 1) {\r\n        const timeout = setTimeout(() => {\r\n          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length);\r\n        }, delay);\r\n\r\n        return () => clearTimeout(timeout);\r\n      }\r\n    }, [index, delay, childrenArray.length]);\r\n\r\n    const itemsToShow = useMemo(() => {\r\n      const result = childrenArray.slice(0, index + 1).reverse();\r\n      return result;\r\n    }, [index, childrenArray]);\r\n\r\n    return (\r\n      <div\r\n        className={cn(`flex flex-col items-center gap-4`, className)}\r\n        {...props}\r\n      >\r\n        <AnimatePresence>\r\n          {itemsToShow.map((item) => (\r\n            <AnimatedListItem key={(item as React.ReactElement).key}>\r\n              {item}\r\n            </AnimatedListItem>\r\n          ))}\r\n        </AnimatePresence>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nAnimatedList.displayName = \"AnimatedList\";\r\n",
       "type": "registry:component"
     },
     {
-      "path": "./src/components/nurui/notification.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\ninterface Item {\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  time: string;\n}\n\nexport const Notification = ({\n  name,\n  description,\n  icon,\n  color,\n  time,\n}: Item) => {\n  return (\n    <figure\n      className={cn(\n        \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n        // animation styles\n        \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n        // light styles\n        \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n        // dark styles\n        \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n      )}\n    >\n      <div className=\"flex flex-row items-center gap-3\">\n        <div\n          className=\"flex size-10 items-center justify-center rounded-2xl\"\n          style={{\n            backgroundColor: color,\n          }}\n        >\n          <span className=\"text-lg\">{icon}</span>\n        </div>\n        <div className=\"flex flex-col overflow-hidden\">\n          <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\n            <span className=\"text-sm sm:text-lg\">{name}</span>\n            <span className=\"mx-1\">·</span>\n            <span className=\"text-xs text-gray-500\">{time}</span>\n          </figcaption>\n          <p className=\"text-sm font-normal dark:text-white/60\">\n            {description}\n          </p>\n        </div>\n      </div>\n    </figure>\n  );\n};\n",
+      "path": "src/components/nurui/notification.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\r\ninterface Item {\r\n  name: string;\r\n  description: string;\r\n  icon: string;\r\n  color: string;\r\n  time: string;\r\n}\r\n\r\nexport const Notification = ({\r\n  name,\r\n  description,\r\n  icon,\r\n  color,\r\n  time,\r\n}: Item) => {\r\n  return (\r\n    <figure\r\n      className={cn(\r\n        \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\r\n        // animation styles\r\n        \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\r\n        // light styles\r\n        \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\r\n        // dark styles\r\n        \"transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\r\n      )}\r\n    >\r\n      <div className=\"flex flex-row items-center gap-3\">\r\n        <div\r\n          className=\"flex size-10 items-center justify-center rounded-2xl\"\r\n          style={{\r\n            backgroundColor: color,\r\n          }}\r\n        >\r\n          <span className=\"text-lg\">{icon}</span>\r\n        </div>\r\n        <div className=\"flex flex-col overflow-hidden\">\r\n          <figcaption className=\"flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white \">\r\n            <span className=\"text-sm sm:text-lg\">{name}</span>\r\n            <span className=\"mx-1\">·</span>\r\n            <span className=\"text-xs text-gray-500\">{time}</span>\r\n          </figcaption>\r\n          <p className=\"text-sm font-normal dark:text-white/60\">\r\n            {description}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </figure>\r\n  );\r\n};\r\n",
       "type": "registry:component"
     }
   ],