{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swapy",
  "dependencies": [
    "swapy"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "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"
}