{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-drag-to-reorder",
  "type": "registry:ui",
  "title": "Drag to reorder",
  "description": "Keep pickup, placeholder, and drop states clear while reordering.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "feedback"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/drag-to-reorder/",
  "files": [
    {
      "path": "src/registry/primitives/drag-to-reorder.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/drag-to-reorder.tsx",
      "content": "\"use client\";\n\nimport { Reorder, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type ReorderPrimitiveItem = { id: string; content: ReactNode };\n\nexport type DragToReorderPrimitiveProps = {\n  items: readonly ReorderPrimitiveItem[];\n  onReorder: (items: ReorderPrimitiveItem[]) => void;\n  distance?: number;\n  pickupScale?: number;\n  className?: string;\n  itemClassName?: string;\n};\n\nexport function DragToReorderPrimitive({\n  items,\n  onReorder,\n  distance = 48,\n  pickupScale = 1.03,\n  className,\n  itemClassName,\n}: DragToReorderPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <Reorder.Group\n      axis=\"y\"\n      values={[...items]}\n      onReorder={onReorder}\n      className={className}\n      style={{ touchAction: \"none\" }}\n    >\n      {items.map((item) => (\n        <Reorder.Item\n          key={item.id}\n          value={item}\n          className={itemClassName}\n          whileDrag={reduceMotion ? undefined : {\n            scale: pickupScale,\n            boxShadow: `0 ${Math.min(12, Math.max(2, distance / 6))}px 28px rgb(0 0 0 / 0.14)`,\n            zIndex: 2,\n          }}\n          transition={{ type: \"spring\", stiffness: 420, damping: 34, mass: 0.7 }}\n        >\n          {item.content}\n        </Reorder.Item>\n      ))}\n    </Reorder.Group>\n  );\n}\n"
    }
  ]
}