{
  "name": "SortableList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SortableList.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "sortable-list",
  "elName": "SortableList composed with SortableHandle",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#sortable-list",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SortableList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SortableListProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SortableList } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "sortable-indicator",
    "sortable-list"
  ],
  "examples": {
    "react": null,
    "html": "<ul class=\"sortable-list\">\n  <li><div class=\"step-row\"><span class=\"step-row-title\">Alpha</span><span class=\"sortable-handle\"><span class=\"sortable-handle-grip\" aria-label=\"Drag to reorder\">⋮⋮</span></span></div></li>\n  <li><div class=\"step-row\"><span class=\"step-row-title\">Beta</span><span class=\"sortable-handle\"><span class=\"sortable-handle-grip\" aria-label=\"Drag to reorder\">⋮⋮</span></span></div></li>\n  <li><div class=\"step-row\"><span class=\"step-row-title\">Gamma</span><span class=\"sortable-handle\"><span class=\"sortable-handle-grip\" aria-label=\"Drag to reorder\">⋮⋮</span></span></div></li>\n</ul>",
    "css": ".sortable-indicator {\n  position: absolute;\n  left: 0; right: 0;\n  height: 2px;\n  background: var(--accent);\n  border-radius: 999px;\n  pointer-events: none;\n  z-index: 2;\n  transform: translateY(-1px);\n}\n\n.sortable-list { position: relative; }"
  }
}