{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swapy-without-components",
  "dependencies": [
    "swapy"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/swapy/swapy-without-components.tsx",
      "content": "'use client';\nimport { useEffect, useRef } from 'react';\nimport { type Swapy, createSwapy } from 'swapy';\n\nconst slots = [\n  { slot: 'a', content: 'A', bg: 'bg-emerald-500', hasHandle: false },\n  { slot: 'b', content: 'B', bg: 'bg-rose-500', hasHandle: true },\n  { slot: 'c', content: 'C', bg: 'bg-blue-500', hasHandle: false },\n  { slot: 'd', content: 'D', bg: 'bg-purple-500', hasHandle: false },\n  { slot: 'e', content: 'E', bg: 'bg-pink-500', hasHandle: false },\n  { slot: 'f', content: 'F', bg: 'bg-yellow-400', hasHandle: true },\n  { slot: 'g', content: 'G', bg: 'bg-green-500', hasHandle: true },\n  { slot: 'h', content: 'H', bg: 'bg-orange-500', hasHandle: false },\n  { slot: 'i', content: 'I', bg: 'bg-cyan-500', hasHandle: false },\n];\n\nfunction SwapyWithoutComponents() {\n  const swapyRef = useRef<Swapy | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      swapyRef.current = createSwapy(containerRef.current, {\n        // animation: 'dynamic'\n        // swapMode: 'drop',\n        // autoScrollOnDrag: true,\n        // enabled: true,\n        // dragAxis: 'x',\n        // dragOnHold: true\n      });\n\n      // swapyRef.current.enable(false)\n      // swapyRef.current.destroy()\n      // console.log(swapyRef.current.slotItemMap())\n\n      swapyRef.current.onBeforeSwap((event) => {\n        console.log('beforeSwap', event);\n        // This is for dynamically enabling and disabling swapping.\n        // Return true to allow swapping, and return false to prevent swapping.\n        return true;\n      });\n\n      swapyRef.current.onSwapStart((event) => {\n        console.log('start', event);\n      });\n      swapyRef.current.onSwap((event) => {\n        console.log('swap', event);\n      });\n      swapyRef.current.onSwapEnd((event) => {\n        console.log('end', event);\n      });\n    }\n    return () => {\n      swapyRef.current?.destroy();\n    };\n  }, []);\n  return (\n    <div\n      className='w-full mx-auto grid xl:grid-cols-[3fr_5fr_2fr]  md:grid-cols-[3fr_5fr_2fr] grid-cols-[3fr_5fr_2fr] gap-4'\n      ref={containerRef}\n    >\n      {slots.map(({ slot, content, bg, hasHandle }) => (\n        <div\n          key={slot}\n          className={`slot w-full h-32 rounded-[10px] data-swapy-highlighted:bg-neutral-200 dark:data-swapy-highlighted:bg-neutral-800`}\n          data-swapy-slot={slot}\n        >\n          {content && (\n            <div\n              className={`item relative flex flex-col items-center justify-center rounded-[10px] w-full h-full  ${bg}`}\n              data-swapy-item={slot}\n            >\n              {hasHandle && (\n                <div\n                  className='cursor-grab w-6 h-6 opacity-50 absolute top-[14px] left-[10px]'\n                  data-swapy-handle\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'\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              <div>{content}</div>\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default SwapyWithoutComponents;\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"
}