{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "default-swapy",
  "dependencies": [
    "swapy"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/swapy/default-swapy.tsx",
      "content": "'use client';\nimport { DragHandle, SwapyItem, SwapyLayout, SwapySlot } from '@/components/ui/swapy';\nimport { Heart, PlusCircle } from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { type SlotItemMapArray, utils } from 'swapy';\n\nexport function ProjectViewsCard() {\n  return (\n    <div className='bg-emerald-600 rounded-xl h-full p-6 flex flex-col justify-center items-center text-center shadow-md'>\n      <div className='flex gap-2'>\n        <h2 className='text-yellow-200 2xl:text-5xl text-3xl font-bold mb-2'>4.875</h2>\n        <div className='text-yellow-200 flex items-center gap-1 mb-1'>\n          <span className='text-xl'>\n            <Heart className='fill-yellow-200' size={24} />\n          </span>\n        </div>\n      </div>\n      <p className='text-yellow-200 font-medium'>Project Views</p>\n      <p className='text-yellow-200/80 text-sm'>last year</p>\n    </div>\n  );\n}\nexport function NewUsersCard() {\n  return (\n    <div className='bg-neutral-600 rounded-xl h-full p-6 flex flex-col justify-center shadow-md'>\n      <p className='text-yellow-200 mb-1 font-medium'>New Users</p>\n      <h2 className='text-yellow-200 2xl:text-6xl text-4xl font-bold leading-none'>57K</h2>\n      <p className='text-green-400 font-medium mt-2'>+10%</p>\n    </div>\n  );\n}\nexport function TeamCard() {\n  return (\n    <div className='bg-blue-100 rounded-xl p-6 h-full  flex flex-col justify-between relative overflow-hidden shadow-md'>\n      <div className='bg-blue-300 text-black font-medium px-4 py-2 rounded-xl inline-block mb-4 max-w-fit'>\n        Team of passionate designers and developers\n      </div>\n      <div>\n        <p className='font-bold text-neutral-800'>Daily New clients</p>\n        <div className='flex items-end gap-2'>\n          <span className='text-6xl font-bold text-neutral-900'>54</span>\n          <span className='text-green-500 font-medium mb-1'>+40%</span>\n        </div>\n      </div>\n    </div>\n  );\n}\nexport function AgencyCard() {\n  return (\n    <div className='bg-purple-300 rounded-xl h-full p-4 relative overflow-hidden shadow-md'>\n      <div className='bg-neutral-900 text-yellow-200 text-lg font-medium px-4 py-2 rounded-lg inline-block mb-4 w-full'>\n        <p>Smart Digital</p>\n        <p>Agency For Your</p>\n        <p>Business</p>\n      </div>\n      <div className='flex  gap-2 h-20'>\n        <div className='w-full rounded-xl bg-purple-400  overflow-hidden'></div>\n        <div className='w-full rounded-xl bg-yellow-200  overflow-hidden ml-4'></div>\n      </div>\n    </div>\n  );\n}\nexport function LogoCard() {\n  return (\n    <div className='bg-pink-200 rounded-xl h-full p-6 flex flex-col items-center justify-center shadow-md'>\n      <div className='w-16 h-16 mb-4'>\n        <svg viewBox='0 0 100 100' className='w-full h-full'>\n          <circle cx='33' cy='33' r='25' fill='rgb(27, 13, 221)' />\n          <circle cx='67' cy='33' r='25' fill='rgb(9, 4, 255)' />\n          <circle cx='50' cy='67' r='25' fill='rgb(1, 61, 226)' />\n        </svg>\n      </div>\n      <h2 className='2xl:text-3xl text-xl font-bold text-neutral-900'>UI-Layouts</h2>\n    </div>\n  );\n}\nexport function UserTrustCard() {\n  return (\n    <div className='bg-blue-600 rounded-xl h-full p-4 flex flex-col justify-center items-center text-white shadow-lg'>\n      <h3 className='text-2xl font-bold mb-2'>Trusted By</h3>\n      <p className='text-3xl font-bold mb-4'>500+ Users</p>\n\n      <div className='flex -space-x-2 mb-4'>\n        <div className='w-10 h-10 rounded-xl overflow-hidden border-2 border-blue-600 bg-neutral-200'></div>\n        <div className='w-10 h-10 rounded-xl overflow-hidden border-2 border-blue-600 bg-neutral-200'></div>\n        <div className='w-10 h-10 rounded-xl overflow-hidden border-2 border-blue-600 bg-neutral-200'></div>\n        <div className='w-10 h-10 rounded-xl overflow-hidden border-2 border-blue-600 bg-neutral-200'></div>\n        <div className='w-10 h-10 rounded-xl bg-yellow-500 border-2 border-blue-600 flex items-center justify-center'>\n          <PlusCircle className='w-5 h-5 text-white' />\n        </div>\n      </div>\n\n      <p className='text-sm'>Don't Take Our Words For It...</p>\n    </div>\n  );\n}\nexport function FontCard() {\n  return (\n    <div className='bg-yellow-200 rounded-xl h-full p-6 col-span-1 shadow-md'>\n      <h2 className='text-3xl font-bold mb-1 text-neutral-900'>Font</h2>\n      <p className='mb-6 text-neutral-700'>SK-Modernist</p>\n\n      <div className='flex gap-3 mt-4'>\n        <div className='w-12 h-12 bg-neutral-800 rounded-md'></div>\n        <div className='w-12 h-12 bg-neutral-400 rounded-md'></div>\n        <div className='w-12 h-12 bg-red-400 rounded-md'></div>\n        <div className='w-12 h-12 bg-pink-300 rounded-md'></div>\n      </div>\n    </div>\n  );\n}\nexport function DesignIndustryCard() {\n  return (\n    <div className='bg-emerald-600 text-yellow-200 rounded-xl h-full p-6 flex flex-col justify-between relative shadow-md'>\n      <p className='text-2xl font-bold'>We Build Future of</p>\n      <p className='text-2xl font-bold'>Design Industry</p>\n    </div>\n  );\n}\nexport function CardBalanceCard() {\n  return (\n    <div className='bg-yellow-200 rounded-xl h-full p-6 shadow-lg'>\n      <h3 className='text-xl font-bold mb-4 text-neutral-950'>Cards balance</h3>\n      <h2 className='text-3xl font-bold mb-6 text-neutral-800'>$ 12,457</h2>\n\n      <div className='bg-black text-white rounded-lg p-4 shadow-xs'>\n        <div className='flex justify-between text-sm mb-2'>\n          <span>Card Holder</span>\n          <span>Expires</span>\n        </div>\n        <div className='flex justify-between font-medium'>\n          <span>Robert Fox</span>\n          <span>07/22</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype Item = {\n  id: string;\n  title: string;\n  widgets: React.ReactNode;\n  className?: string;\n};\n\nconst initialItems: Item[] = [\n  {\n    id: '1',\n    title: '1',\n    widgets: <ProjectViewsCard />,\n    className: 'lg:col-span-4 sm:col-span-7 col-span-12',\n  },\n  {\n    id: '2',\n    title: '2',\n    widgets: <NewUsersCard />,\n    className: 'lg:col-span-3 sm:col-span-5 col-span-12',\n  },\n  {\n    id: '3',\n    title: '3',\n    widgets: <DesignIndustryCard />,\n    className: 'lg:col-span-5 sm:col-span-5 col-span-12',\n  },\n  {\n    id: '4',\n    title: '4',\n    widgets: <TeamCard />,\n    className: 'lg:col-span-5 sm:col-span-7 col-span-12',\n  },\n  {\n    id: '5',\n    title: '5',\n    widgets: <LogoCard />,\n    className: 'lg:col-span-4 sm:col-span-6 col-span-12',\n  },\n  {\n    id: '6',\n    title: '6',\n    widgets: <FontCard />,\n    className: 'lg:col-span-3 sm:col-span-6 col-span-12',\n  },\n  {\n    id: '7',\n    title: '7',\n    widgets: <AgencyCard />,\n    className: 'lg:col-span-4 sm:col-span-5 col-span-12',\n  },\n  {\n    id: '8',\n    title: '8',\n    widgets: <UserTrustCard />,\n    className: 'lg:col-span-4 sm:col-span-7 col-span-12',\n  },\n  {\n    id: '9',\n    title: '9',\n    widgets: <CardBalanceCard />,\n    className: 'lg:col-span-4 sm:col-span-12 col-span-12',\n  },\n];\n\nfunction DefaultSwapy() {\n  const [slotItemMap, setSlotItemMap] = useState<SlotItemMapArray>(\n    utils.initSlotItemMap(initialItems, 'id')\n  );\n\n  const slottedItems = useMemo(\n    () => utils.toSlottedItems(initialItems, 'id', slotItemMap),\n    [initialItems, slotItemMap]\n  );\n\n  return (\n    <SwapyLayout\n      id='swapy'\n      className='w-full'\n      config={{\n        swapMode: 'hover',\n      }}\n      onSwap={(event: { newSlotItemMap: { asArray: any } }) => {\n        console.log('Swap detected!', event.newSlotItemMap.asArray);\n      }}\n    >\n      <div className='grid w-full  grid-cols-12 gap-2 md:gap-6 py-4'>\n        {slottedItems.map(({ slotId, itemId }) => {\n          const item = initialItems.find((i) => i.id === itemId);\n\n          return (\n            <SwapySlot\n              key={slotId}\n              className={`swapyItem rounded-lg h-64 ${item?.className}`}\n              id={slotId}\n            >\n              <SwapyItem\n                id={itemId}\n                className='relative rounded-lg w-full h-full 2xl:text-xl text-sm'\n                key={itemId}\n              >\n                {item?.widgets}\n              </SwapyItem>\n            </SwapySlot>\n          );\n        })}\n      </div>\n    </SwapyLayout>\n  );\n}\n\nexport default DefaultSwapy;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/swapy.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport type React from 'react';\nimport { useEffect, useRef } from 'react';\nimport { type SlotItemMapArray, createSwapy } from 'swapy';\n\ntype AnimationType = 'dynamic' | 'spring' | 'none';\ntype SwapMode = 'hover' | 'drop';\n\ntype Config = {\n  animation: AnimationType;\n  continuousMode: boolean;\n  manualSwap: boolean;\n  swapMode: SwapMode;\n  autoScrollOnDrag: boolean;\n};\n\ntype SwapyLayoutProps = {\n  id: string;\n  enable?: boolean;\n  onSwap?: (event: { newSlotItemMap: { asArray: SlotItemMapArray } }) => void;\n  config?: Partial<Config>;\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport const SwapyLayout = ({ id, onSwap, config = {}, className, children }: SwapyLayoutProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const swapyRef = useRef<ReturnType<typeof createSwapy> | null>(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    swapyRef.current = createSwapy(container, config);\n\n    if (onSwap) {\n      swapyRef.current.onSwap(onSwap);\n    }\n\n    return () => {\n      swapyRef.current?.destroy();\n    };\n  }, [config, onSwap]);\n\n  return (\n    <div id={id} ref={containerRef} className={className}>\n      {children}\n    </div>\n  );\n};\n\nexport const DragHandle = ({ className }: { className?: string }) => {\n  return (\n    <div\n      data-swapy-handle\n      className={cn(\n        'absolute top-2 left-2 cursor-grab  text-neutral-500  rounded-md bg-transparent  active:cursor-grabbing  ',\n        className\n      )}\n    >\n      <svg\n        xmlns='http://www.w3.org/2000/svg'\n        width='24'\n        height='24'\n        viewBox='0 0 24 24'\n        fill='none'\n        stroke='currentColor'\n        strokeWidth='2'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        className='lucide lucide-grip-vertical-icon lucide-grip-vertical opacity-80'\n      >\n        <circle cx='9' cy='12' r='1' />\n        <circle cx='9' cy='5' r='1' />\n        <circle cx='9' cy='19' r='1' />\n        <circle cx='15' cy='12' r='1' />\n        <circle cx='15' cy='5' r='1' />\n        <circle cx='15' cy='19' r='1' />\n      </svg>\n    </div>\n  );\n};\n\nexport const SwapySlot = ({\n  id,\n  className,\n  children,\n}: {\n  id: string;\n  className?: string;\n  children: React.ReactNode;\n}) => {\n  return (\n    <div\n      className={cn(\n        'data-swapy-highlighted:bg-neutral-200 dark:data-swapy-highlighted:bg-neutral-800',\n        className\n      )}\n      data-swapy-slot={id}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst dragOpacityClassMap: Record<number, string> = {\n  10: 'data-swapy-dragging:opacity-10',\n  20: 'data-swapy-dragging:opacity-20',\n  30: 'data-swapy-dragging:opacity-30',\n  40: 'data-swapy-dragging:opacity-40',\n  50: 'data-swapy-dragging:opacity-50',\n  60: 'data-swapy-dragging:opacity-60',\n  70: 'data-swapy-dragging:opacity-70',\n  80: 'data-swapy-dragging:opacity-80',\n  90: 'data-swapy-dragging:opacity-90',\n  100: 'data-swapy-dragging:opacity-100',\n};\n\nexport const SwapyItem = ({\n  id,\n  className,\n  children,\n  dragItemOpacity = 100, // default to 100\n}: {\n  id: string;\n  className?: string;\n  children: React.ReactNode;\n  dragItemOpacity?: number;\n}) => {\n  const opacityClass = dragOpacityClassMap[dragItemOpacity] ?? 'data-swapy-dragging:opacity-50';\n  return (\n    <div className={cn(opacityClass, className)} data-swapy-item={id}>\n      {children}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}