{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "draggable-list-shadcnui",
  "type": "registry:component",
  "title": "Draggable List",
  "description": "Reorderable list with drag and drop spring physics",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/lists/draggable-list.tsx",
      "content": "\"use client\";\n\nimport { Reorder } from \"framer-motion\";\nimport { GripVertical } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst initialItems = [\n  { id: 1, text: \"First item\" },\n  { id: 2, text: \"Second item\" },\n  { id: 3, text: \"Third item\" },\n  { id: 4, text: \"Fourth item\" },\n];\n\nexport function DraggableList() {\n  const [items, setItems] = useState(initialItems);\n\n  return (\n    <Reorder.Group\n      axis=\"y\"\n      values={items}\n      onReorder={setItems}\n      className=\"w-full max-w-md space-y-2\"\n    >\n      {items.map((item) => (\n        <Reorder.Item\n          key={item.id}\n          value={item}\n          className=\"flex cursor-grab items-center gap-3 rounded-lg border  bg-[var(--card-bg)] p-4 active:cursor-grabbing\"\n          whileDrag={{ scale: 1.05, boxShadow: \"0 10px 30px rgba(0,0,0,0.2)\" }}\n        >\n          <GripVertical className=\"h-5 w-5 text-[var(--foreground)]/40\" />\n          <span className=\"text-sm\">{item.text}</span>\n        </Reorder.Item>\n      ))}\n    </Reorder.Group>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/draggable-list-shadcnui.tsx"
    }
  ]
}