{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-gallery",
  "title": "Expandable Gallery",
  "description": "A photo gallery with smooth item expansion.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/default/example/expandable-gallery.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, AnimatePresence, LayoutGroup } from \"motion/react\";\r\nimport React, { useState, useId, useRef } from \"react\";\r\nimport { useOutsideClick } from \"@/hooks/use-outside-click\";\r\nimport Image from \"next/image\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { ArrowLeft01Icon, ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Change Here\r\nconst PHOTOS = [\r\n  {\r\n    id: \"photo-1\",\r\n\r\n    src: \"https://images.unsplash.com/photo-1755398104393-746e52af4a9f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mzd8fHxlbnwwfHx8fHw%3D?q=80&w=800\",\r\n    alt: \"Technology setup\",\r\n    rotation: -15,\r\n    x: -90,\r\n    y: 10,\r\n    zIndex: 10,\r\n  },\r\n  {\r\n    id: \"photo-2\",\r\n    src: \"https://images.unsplash.com/photo-1756764099214-b09a5666914b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTB8fHxlbnwwfHx8fHw%3D?q=80&w=800\",\r\n    alt: \"Design research\",\r\n    rotation: -3,\r\n    x: -10,\r\n    y: -15,\r\n    zIndex: 20,\r\n  },\r\n  {\r\n    id: \"photo-3\",\r\n    src: \"https://images.unsplash.com/photo-1757372429884-92e02350c5d9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjJ8fHxlbnwwfHx8fHw%3D?q=80&w=800\",\r\n    alt: \"Code and development\",\r\n    rotation: 12,\r\n    x: 75,\r\n    y: 5,\r\n    zIndex: 30,\r\n  },\r\n  {\r\n    id: \"photo-4\",\r\n    src: \"https://images.unsplash.com/photo-1756993399574-2fa126269ce7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8NzR8fHxlbnwwfHx8fHw%3D?q=80&w=800\",\r\n    alt: \"Dashboard interface\",\r\n  },\r\n  {\r\n    id: \"photo-5\",\r\n    src: \"https://images.unsplash.com/photo-1756990637536-714b76296a30?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8ODJ8fHxlbnwwfHx8fHw%3D?q=80&w=800\",\r\n    alt: \"Product design\",\r\n  },\r\n  {\r\n    id: \"photo-6\",\r\n    src: \"https://images.unsplash.com/photo-1756838197413-07f174def66c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTA0fHx8ZW58MHx8fHx8?q=80&w=800\",\r\n    alt: \"Laptop on desk\",\r\n  },\r\n  {\r\n    id: \"photo-7\",\r\n    src: \"https://images.unsplash.com/photo-1756310406492-3ce3bef447aa?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTQwfHx8ZW58MHx8fHx8?q=80&w=800\",\r\n    alt: \"Team collaboration\",\r\n  },\r\n  {\r\n    id: \"photo-8\",\r\n    src: \"https://images.unsplash.com/photo-1755311905796-d539c7d24acd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTgzfHx8ZW58MHx8fHx8?q=80&w=800\",\r\n    alt: \"UX wireframes\",\r\n  },\r\n  {\r\n    id: \"photo-9\",\r\n    src: \"https://images.unsplash.com/photo-1755542366797-b3f036b11310?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTg2fHx8ZW58MHx8fHx8?q=80&w=800\",\r\n    alt: \"Developer workspace\",\r\n  },\r\n];\r\n\r\nconst transition = {\r\n  type: \"spring\",\r\n  stiffness: 160,\r\n  damping: 18,\r\n  mass: 1,\r\n} as const;\r\n\r\nexport default function ExpandableGallery() {\r\n  const [isExpanded, setIsExpanded] = useState(false);\r\n  const layoutGroupId = useId();\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useOutsideClick(containerRef, () => {\r\n    if (isExpanded) {\r\n      setIsExpanded(false);\r\n    }\r\n  });\r\n\r\n  return (\r\n    <section className=\"relative w-full  px-4 md:px-8 bg-background flex flex-col items-center justify-start min-h-[850px] overflow-hidden\">\r\n      <LayoutGroup id={layoutGroupId}>\r\n        <div className=\"w-full max-w-6xl mx-auto flex flex-col items-center\">\r\n          <div className=\"w-full h-12 flex items-center justify-between px-4 mb-2\">\r\n            <AnimatePresence>\r\n              {isExpanded && (\r\n                <motion.button\r\n                  key=\"back-button\"\r\n                  initial={{ opacity: 0, x: -10 }}\r\n                  animate={{ opacity: 1, x: 0 }}\r\n                  exit={{ opacity: 0, x: -10 }}\r\n                  onClick={() => setIsExpanded(false)}\r\n                  className=\"flex items-center gap-2 text-muted-foreground hover:text-foreground transition-all group z-50\"\r\n                >\r\n                  <div className=\"p-2 rounded-full bg-muted group-hover:bg-accent transition-colors text-foreground\">\r\n                    <HugeiconsIcon\r\n                      icon={ArrowLeft01Icon}\r\n                      width={20}\r\n                      height={20}\r\n                    />\r\n                  </div>\r\n                  <span className=\"font-medium\">Go back</span>\r\n                </motion.button>\r\n              )}\r\n            </AnimatePresence>\r\n          </div>\r\n\r\n          <motion.div\r\n            ref={containerRef}\r\n            layout\r\n            className={cn(\r\n              \"relative w-full\",\r\n              isExpanded\r\n                ? \"grid grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-4\"\r\n                : \"flex flex-col items-center justify-start pt-4\"\r\n            )}\r\n            transition={transition}\r\n          >\r\n            <div\r\n              className={cn(\r\n                \"relative\",\r\n                isExpanded\r\n                  ? \"contents\"\r\n                  : \"h-[450px] w-full flex items-center justify-center mb-8\"\r\n              )}\r\n            >\r\n              {PHOTOS.map((photo, index) => {\r\n                const isPrimary = index < 3;\r\n                if (!isPrimary && !isExpanded) return null;\r\n\r\n                return (\r\n                  <motion.div\r\n                    key={`card-${photo.id}`}\r\n                    layoutId={`card-container-${photo.id}`}\r\n                    layout\r\n                    initial={{ opacity: 0, scale: 0.9 }}\r\n                    animate={{\r\n                      opacity: 1,\r\n                      scale: 1,\r\n                      rotate: !isExpanded ? photo.rotation || 0 : 0,\r\n                      x: !isExpanded ? photo.x || 0 : 0,\r\n                      y: !isExpanded ? photo.y || 0 : 0,\r\n                      zIndex: !isExpanded ? photo.zIndex || index : 10,\r\n                    }}\r\n                    transition={transition}\r\n                    whileHover={\r\n                      !isExpanded\r\n                        ? {\r\n                            scale: 1.05,\r\n                            y: (photo.y || 0) - 15,\r\n                            rotate: (photo.rotation || 0) * 0.8,\r\n                            zIndex: 50,\r\n                            transition: {\r\n                              type: \"spring\",\r\n                              stiffness: 400,\r\n                              damping: 25,\r\n                            },\r\n                          }\r\n                        : { scale: 1.02 }\r\n                    }\r\n                    className={cn(\r\n                      \"cursor-pointer overflow-hidden bg-muted\",\r\n                      isExpanded\r\n                        ? \"relative aspect-square rounded-[2rem] md:rounded-[3rem] border-4 md:border-[6px] border-background shadow-lg\"\r\n                        : \"absolute w-44 h-44 md:w-60 md:h-60 rounded-[2.5rem] md:rounded-[3rem] border-[6px] border-background shadow-[0_20px_50px_rgba(0,0,0,0.15)]\"\r\n                    )}\r\n                    onClick={() => !isExpanded && setIsExpanded(true)}\r\n                  >\r\n                    <motion.div\r\n                      layoutId={`image-inner-${photo.id}`}\r\n                      layout=\"position\"\r\n                      className=\"w-full h-full relative\"\r\n                      transition={transition}\r\n                    >\r\n                      <Image\r\n                        src={photo.src}\r\n                        alt={photo.alt}\r\n                        fill\r\n                        className=\"object-cover select-none pointer-events-none\"\r\n                        sizes={\r\n                          isExpanded\r\n                            ? \"(max-width: 1024px) 50vw, 33vw\"\r\n                            : \"240px\"\r\n                        }\r\n                        priority={isPrimary}\r\n                      />\r\n                    </motion.div>\r\n                  </motion.div>\r\n                );\r\n              })}\r\n            </div>\r\n\r\n            <AnimatePresence>\r\n              {!isExpanded && (\r\n                <motion.div\r\n                  key=\"stack-content\"\r\n                  initial={{ opacity: 1 }}\r\n                  exit={{ opacity: 0 }}\r\n                  className=\"text-center max-w-2xl space-y-8\"\r\n                >\r\n                  <h2 className=\"text-2xl md:text-4xl font-normal tracking-tight text-foreground/90 leading-tight\">\r\n                    People don’t fall in love with components.{\" \"}\r\n                    <br className=\"hidden md:block\" />\r\n                    They fall in love with how something feels.\r\n                  </h2>\r\n\r\n                  <div className=\"flex justify-center\">\r\n                    <Button\r\n                      variant=\"default\"\r\n                      onClick={() => setIsExpanded(true)}\r\n                      className=\"rounded-full cursor-pointer py-6 px-8 border-border/40 font-normal group \"\r\n                    >\r\n                      Explore more components\r\n                      <HugeiconsIcon\r\n                        icon={ArrowRight01Icon}\r\n                        className=\"transition-transform group-hover:translate-x-1\"\r\n                        width={20}\r\n                        height={20}\r\n                      />\r\n                    </Button>\r\n                  </div>\r\n                </motion.div>\r\n              )}\r\n            </AnimatePresence>\r\n          </motion.div>\r\n        </div>\r\n      </LayoutGroup>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-outside-click.ts",
      "content": "import { useEffect, type RefObject } from \"react\";\r\n\r\nexport function useOutsideClick(\r\n  ref: RefObject<HTMLElement | null>,\r\n  callback: (event: MouseEvent | TouchEvent) => void\r\n) {\r\n  useEffect(() => {\r\n    const listener = (event: MouseEvent | TouchEvent) => {\r\n      if (!ref.current || ref.current.contains(event.target as Node)) {\r\n        return;\r\n      }\r\n      callback(event);\r\n    };\r\n\r\n    document.addEventListener(\"mousedown\", listener);\r\n    document.addEventListener(\"touchstart\", listener);\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", listener);\r\n      document.removeEventListener(\"touchstart\", listener);\r\n    };\r\n  }, [ref, callback]);\r\n}\r\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:component"
}