{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stripe-accordion",
  "type": "registry:block",
  "title": "Stripe accordion",
  "description": "Stripe accordion",
  "files": [
    {
      "path": "components/usages/stripeaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport StripeAccordion, {\n\tUnsplashGrid,\n} from \"@/registry/open-source/stripe-accordion\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<StripeAccordion />\n\t\t\t<UnsplashGrid />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/stripeaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport StripeAccordion, {\n\tUnsplashGrid,\n} from \"@/registry/open-source/stripe-accordion\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<StripeAccordion />\n\t\t\t<UnsplashGrid />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/stripe-accordion.tsx",
      "content": "// @ts-nocheck\n\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport {\n\tAnimatePresence,\n\tAnimateSharedLayout,\n\tmotion,\n\tuseInView,\n} from \"motion/react\";\n\nconst items = [\n\t{\n\t\tid: \"456\",\n\t\turl: \"/itjustworks.jpg\",\n\t\ttitle: \"item 1\",\n\t},\n\t{\n\t\tid: \"789\",\n\t\turl: \"/itjustworks.jpg\",\n\t\ttitle: \"item 2\",\n\t},\n];\n\nfunction Gallery({ items, setIndex, setOpen, index }) {\n\treturn (\n\t\t<div className=\"rounded-md w-fit mx-auto md:gap-2 gap-1 flex pb-20 pt-10 \">\n\t\t\t{items.slice(0, 11).map((item, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\twhileTap={{ scale: 0.95 }}\n\t\t\t\t\t\t\tclassName={`rounded-2xl ${\n\t\t\t\t\t\t\t\tindex === i\n\t\t\t\t\t\t\t\t\t? \"w-[250px] \"\n\t\t\t\t\t\t\t\t\t: \"xl:w-[50px] md:w-[30px] sm:w-[20px] w-[14px]\"\n\t\t\t\t\t\t\t} h-[200px] shrink-0  object-cover transition-[width] ease-in-out duration-300`}\n\t\t\t\t\t\t\tkey={item + \"stripe-accordion\"}\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tsetIndex(i);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\t\t\t\tsetIndex(i);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetIndex(i);\n\t\t\t\t\t\t\t\tsetOpen(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsrc={item?.url}\n\t\t\t\t\t\t\tlayoutId={item.id}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nexport default function StripeAccordion() {\n\tconst [index, setIndex] = useState(5);\n\tconst [open, setOpen] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (open) {\n\t\t\tdocument.body.classList.add(\"overflow-hidden\");\n\t\t} else {\n\t\t\tdocument.body.classList.remove(\"overflow-hidden\");\n\t\t}\n\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tsetOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [open]);\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t<Gallery\n\t\t\t\titems={items}\n\t\t\t\tindex={index}\n\t\t\t\tsetIndex={setIndex}\n\t\t\t\tsetOpen={setOpen}\n\t\t\t/>\n\t\t\t<AnimatePresence>\n\t\t\t\t{open !== false && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\tkey=\"overlay\"\n\t\t\t\t\t\tclassName=\"dark:bg-background/40 bg-background/40 backdrop-blur-xs fixed inset-0 z-50 top-0 left-0 bottom-0 right-0 w-full h-full grid place-content-center\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tlayoutId={items[index].id}\n\t\t\t\t\t\t\t\tclassName=\"w-[400px] h-[400px] rounded-2xl cursor-default\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\tsrc={items[index].url}\n\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\theight={400}\n\t\t\t\t\t\t\t\t\talt=\"single-image\"\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-2xl h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<article className=\"dark:bg-base-dark bg-background rounded-md p-2 mt-2 border \">\n\t\t\t\t\t\t\t\t\t<motion.h1\n\t\t\t\t\t\t\t\t\t\tinitial={{ scaleY: 0.2 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{ scaleY: 1 }}\n\t\t\t\t\t\t\t\t\t\texit={{ scaleY: 0.2 }}\n\t\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.2, delay: 0.2 }}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-xl font-semibold\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{items[index].title}\n\t\t\t\t\t\t\t\t\t</motion.h1>\n\t\t\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\t\t\tinitial={{ y: -10, opacity: 0 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{ y: 0, opacity: 1 }}\n\t\t\t\t\t\t\t\t\t\texit={{ scaleY: -10, opacity: 0 }}\n\t\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.2, delay: 0.2 }}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-sm leading-[100%] py-2\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{items[index].description}\n\t\t\t\t\t\t\t\t\t</motion.p>\n\t\t\t\t\t\t\t\t</article>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nfunction UnsplashGrid() {\n\tconst [selected, setSelected] = useState(null);\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"container mx-auto sm:p-4 px-0 \">\n\t\t\t\t<div className=\"columns-2 md:columns-3 2xl:columns-4 gap-4\">\n\t\t\t\t\t<>\n\t\t\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t\t\t<ImageItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tsetSelected={setSelected}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Modal selected={selected} setSelected={setSelected} />\n\t\t</>\n\t);\n}\ninterface Item {\n\tid: number;\n\turl: string;\n\ttitle: string;\n}\n\ninterface ImageItemProps {\n\titem: Item;\n\tindex: number | string;\n\tsetSelected: any;\n}\n\nfunction ImageItem({ item, index, setSelected }: ImageItemProps) {\n\tconst ref = useRef(null);\n\tconst isInView = useInView(ref, { once: true });\n\treturn (\n\t\t<motion.figure\n\t\t\tinitial=\"hidden\"\n\t\t\tanimate={isInView && \"visible\"}\n\t\t\tref={ref}\n\t\t\tclassName=\"inline-block group w-full rounded-md  relative dark:bg-background bg-background  before:absolute before:top-0 before:content-[''] before:h-full before:w-full hover:before:bg-linear-to-t dark:before:from-background  before:from-background/90 before:from-5% before:to-transparent before:to-90% cursor-pointer\"\n\t\t\tonClick={() => setSelected(item)}\n\t\t>\n\t\t\t<motion.img\n\t\t\t\tlayoutId={`card-${item.id}`}\n\t\t\t\twhileHover={{ scale: 1.025 }}\n\t\t\t\tsrc={item.url}\n\t\t\t\tclassName=\"w-full bg-base-100 shadow-xl image-full cursor-pointer\"\n\t\t\t/>\n\t\t\t<div className=\"flex flex-wrap mt-2 absolute bottom-0 left-0 p-2 group-hover:opacity-100 opacity-0 font-semibold \">\n\t\t\t\t<h1>{item.title}</h1>\n\t\t\t</div>\n\t\t</motion.figure>\n\t);\n}\n\ntype ImageModalProps = {\n\titem: any;\n\tuniqueId: string;\n\titemArr: any;\n};\n\nconst Modal: React.FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"columns-3 \">\n\t\t\t\t{items\n\t\t\t\t\t.slice(0, 8)\n\t\t\t\t\t?.map((item, index) => (\n\t\t\t\t\t\t<SliderModal\n\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\titemArr={items}\n\t\t\t\t\t\t\tuniqueId={`id-${index}`}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nconst SliderModal = ({ uniqueId, itemArr }: ImageModalProps) => {\n\tconst item = items[0];\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [newItem, setNewItem] = useState(item);\n\tconst [hight, setHight] = useState(0);\n\tconst [constraints, setConstraints] = useState(0);\n\tconst carousel = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = carousel.current;\n\t\tconst viewportHeight = element?.offsetHeight;\n\t\tconst viewScrollHeight = element?.scrollHeight;\n\t\t// console.log(viewportHeight, viewScrollHeight);\n\t\tsetConstraints(Number(viewportHeight) - Number(viewScrollHeight));\n\t}, [carousel, isOpen]);\n\t// console.log(constraints)\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tdocument.body.classList.add(\"overflow-hidden\");\n\t\t} else {\n\t\t\tdocument.body.classList.remove(\"overflow-hidden\");\n\t\t}\n\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tsetIsOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [isOpen]);\n\n\treturn (\n\t\t<>\n\t\t\t<motion.div\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetIsOpen(true);\n\t\t\t\t\tsetNewItem(item);\n\t\t\t\t}}\n\t\t\t\tclassName=\"overflow-hidden mb-3\"\n\t\t\t>\n\t\t\t\t<motion.div layoutId={uniqueId}>\n\t\t\t\t\t<Image\n\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\theight={400}\n\t\t\t\t\t\tsrc={item?.url}\n\t\t\t\t\t\tclassName=\"bg-background text-foreground rounded-md w-full cursor-zoom-in\"\n\t\t\t\t\t\talt=\"img\"\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\n\t\t\t<AnimatePresence>\n\t\t\t\t{isOpen && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\tclassName=\"fixed inset-0 z-50 top-0 left-0  right-0 bottom-0  flex flex-col items-center w-full h-screen justify-center dark:bg-background/80 bg-background/80 backdrop-blur-lg cursor-zoom-out\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetNewItem(null);\n\t\t\t\t\t\t\tsetIsOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"absolute top-2 right-2 p-4 border dark:bg-background/80 text-foreground  bg-background/40 backdrop-blur-lg \"\n\t\t\t\t\t\t\tonClick={() => setIsOpen(false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tX\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayoutId={uniqueId}\n\t\t\t\t\t\t\tclassName=\"rounded-md w-fit h-[80%] flex gap-2 items-center mx-auto cursor-auto \"\n\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{newItem && (\n\t\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t\t{itemArr.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\ttab: any,\n\t\t\t\t\t\t\t\t\t\t\tindex: React.Key | null | undefined\n\t\t\t\t\t\t\t\t\t\t) => (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index + \"stripe-accordion-item\"}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<AnimatePresence mode=\"popLayout\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{tab.id === newItem.id && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.figure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={tab?.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dark:bg-background/40 bg-background/40 border  rounded-md p-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: \"ease\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: 0.3,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: \"ease\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc={newItem.url}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={1000}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={1000}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"preview_img\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\" object-contain h-[70vh]  mx-auto rounded-md\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tclassName=\"h-[300px] overflow-hidden dark:bg-background/40 bg-background/40 border rounded-md\"\n\t\t\t\t\t\t\t\tref={carousel}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\twhileDrag={{ scale: 0.95 }}\n\t\t\t\t\t\t\t\t\tdragElastic={0.2}\n\t\t\t\t\t\t\t\t\tdragTransition={{ bounceDamping: 30 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeInOut\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"h-fit \"\n\t\t\t\t\t\t\t\t\tdrag=\"y\"\n\t\t\t\t\t\t\t\t\tdragConstraints={{ top: constraints, bottom: 0 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{itemArr?.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\titemData: {\n\t\t\t\t\t\t\t\t\t\t\t\turl: string | StaticImport;\n\t\t\t\t\t\t\t\t\t\t\t\tid: any;\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\tindex: React.Key | null | undefined\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index + \"accordion-stripe\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={`relative p-2   cursor-grab active:cursor-grabbing`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setNewItem(itemData)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc={itemData?.url}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={400}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"img\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"sm:w-28 w-52 h-16 object-cover cursor-pointer relative z-2 rounded-md pointer-events-none\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{itemData?.id === newItem?.id && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlayoutId=\"slider\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute top-0 left-0 h-full w-full dark:bg-background bg-background rounded-md\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t></motion.div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>\n\t\t</>\n\t);\n};\n\nconst ExampleSlider = () => {\n\treturn (\n\t\t<div className=\"columns-3 \">\n\t\t\t{items?.map((item, index) => (\n\t\t\t\t<SliderModal item={item} itemArr={items} uniqueId={`id-${index}`} />\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport { StripeAccordion, UnsplashGrid, ExampleSlider };\n",
      "type": "registry:ui"
    }
  ]
}