{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drag-and-drop-flow",
  "title": "Drag and Drop Flow",
  "description": "Simulated file drag into a dropzone followed by upload progress.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/drag-and-drop-flow/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { CSSProperties } from \"react\";\n\nconst FileIcon = ({ color }: { color: string }) => (\n  <svg width=\"44\" height=\"56\" viewBox=\"0 0 44 56\" fill=\"none\">\n    <path\n      d=\"M6 4a4 4 0 014-4h18l12 12v40a4 4 0 01-4 4H10a4 4 0 01-4-4V4z\"\n      fill=\"white\"\n      stroke={color}\n      strokeWidth=\"2\"\n    />\n    <path\n      d=\"M28 0v8a4 4 0 004 4h8\"\n      stroke={color}\n      strokeWidth=\"2\"\n      fill=\"none\"\n    />\n    <rect\n      x=\"12\"\n      y=\"22\"\n      width=\"20\"\n      height=\"2\"\n      rx=\"1\"\n      fill={color}\n      opacity=\"0.5\"\n    />\n    <rect\n      x=\"12\"\n      y=\"28\"\n      width=\"16\"\n      height=\"2\"\n      rx=\"1\"\n      fill={color}\n      opacity=\"0.5\"\n    />\n    <rect\n      x=\"12\"\n      y=\"34\"\n      width=\"18\"\n      height=\"2\"\n      rx=\"1\"\n      fill={color}\n      opacity=\"0.5\"\n    />\n  </svg>\n);\n\nexport interface DragAndDropFlowProps {\n  accent?: string;\n  dropzoneLabel?: string;\n  fileName?: string;\n  background?: string;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\nexport const DragAndDropFlow = ({\n  accent = \"#0ea5e9\",\n  dropzoneLabel = \"Drop file to upload\",\n  fileName = \"design.fig\",\n  background = \"#fafafa\",\n  speed = 1,\n  fps = 30,\n  durationInFrames = 150,\n  width = 1280,\n  height = 720,\n  className,\n}: DragAndDropFlowProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n\n  const dragEndMs = (durationInFrames * 0.45 * frameMs) / safeSpeed;\n  const highlightEndMs = (durationInFrames * 0.55 * frameMs) / safeSpeed;\n  const progressEndMs = (durationInFrames * frameMs) / safeSpeed;\n\n  const containerStyle: CSSProperties = {\n    alignItems: \"center\",\n    background,\n    display: \"flex\",\n    fontFamily:\n      \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n    height,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  const dropzoneWidth = 420;\n  const dropzoneHeight = 260;\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-drag-file {\n            from { transform: translate(-220px, -120px); opacity: 0; }\n            to { transform: translate(0, 0); opacity: 1; }\n          }\n          @keyframes framecn-drag-file-fade {\n            from { opacity: 1; }\n            to { opacity: 0; }\n          }\n          @keyframes framecn-drag-border {\n            from { border-color: #d4d4d8; }\n            to { border-color: ${accent}; }\n          }\n          @keyframes framecn-drag-progress {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes framecn-drag-bar {\n            from { width: 0%; }\n            to { width: 100%; }\n          }\n        `}</style>\n        <div\n          style={{\n            alignItems: \"center\",\n            animation: `framecn-drag-border ${highlightEndMs - dragEndMs}ms ease-out ${dragEndMs}ms backwards`,\n            background: \"white\",\n            border: `2.5px dashed ${accent}`,\n            borderRadius: 18,\n            color: \"#71717a\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            fontSize: 16,\n            fontWeight: 500,\n            gap: 14,\n            height: dropzoneHeight,\n            justifyContent: \"center\",\n            position: \"relative\",\n            width: dropzoneWidth,\n          }}\n        >\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12\"\n              stroke={accent}\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n          <span\n            style={{\n              animation: `framecn-drag-border ${highlightEndMs - dragEndMs}ms ease-out ${dragEndMs}ms backwards`,\n            }}\n          >\n            {dropzoneLabel}\n          </span>\n\n          {/* Progress bar */}\n          <div\n            style={{\n              animation: `framecn-drag-progress 300ms ease-out ${highlightEndMs}ms backwards`,\n              bottom: 32,\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 8,\n              left: 32,\n              position: \"absolute\",\n              right: 32,\n            }}\n          >\n            <div\n              style={{\n                color: \"#52525b\",\n                display: \"flex\",\n                fontSize: 13,\n                justifyContent: \"space-between\",\n              }}\n            >\n              <span>{fileName}</span>\n              <span>100%</span>\n            </div>\n            <div\n              style={{\n                background: \"#e4e4e7\",\n                borderRadius: 999,\n                height: 6,\n                overflow: \"hidden\",\n              }}\n            >\n              <div\n                style={{\n                  animation: `framecn-drag-bar ${progressEndMs - highlightEndMs}ms ease-out ${highlightEndMs}ms backwards`,\n                  background: accent,\n                  borderRadius: 999,\n                  height: \"100%\",\n                }}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Animated file icon */}\n        <div\n          style={{\n            animation: `framecn-drag-file ${dragEndMs}ms cubic-bezier(0.16, 1, 0.3, 1) backwards, framecn-drag-file-fade 300ms ease-out ${highlightEndMs}ms forwards`,\n            filter: \"drop-shadow(0 8px 16px rgba(0,0,0,0.15))\",\n            left: \"50%\",\n            marginLeft: -22,\n            marginTop: -28,\n            position: \"absolute\",\n            top: \"50%\",\n          }}\n        >\n          <FileIcon color={accent} />\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/drag-and-drop-flow.tsx"
    }
  ],
  "type": "registry:component"
}